24 changed files with 951 additions and 27 deletions
@ -0,0 +1,27 @@ |
|||||
|
import request from "../utils/request"; |
||||
|
|
||||
|
|
||||
|
//城市列表
|
||||
|
export function cityList(data:any) { |
||||
|
return request({ |
||||
|
url: '/sys/city/list', |
||||
|
method: 'get', |
||||
|
params:data |
||||
|
}) |
||||
|
} |
||||
|
//轮播
|
||||
|
export function bannerList(data:any) { |
||||
|
return request({ |
||||
|
url: '/home/banner/list', |
||||
|
method: 'get', |
||||
|
params:data |
||||
|
}) |
||||
|
} |
||||
|
//职位类型
|
||||
|
export function positionTypeList(data:any) { |
||||
|
return request({ |
||||
|
url: '/position/positionTypeApi', |
||||
|
method: 'get', |
||||
|
params:data |
||||
|
}) |
||||
|
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,128 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { useRouter } from "vue-router"; |
||||
|
const props=defineProps({ |
||||
|
talentList:{ |
||||
|
type:Array, |
||||
|
default:()=>[] |
||||
|
} |
||||
|
}) |
||||
|
const router=useRouter() |
||||
|
const gotoDetail=(id:any)=>{ |
||||
|
router.push('/talent/details/'+id) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="talent-item" v-for="(item,index) in talentList" :key="index" @click="gotoDetail(item.id)"> |
||||
|
<div class="talent-item-top"> |
||||
|
<div class="talent-item-pic"> |
||||
|
<img src="../../assets/img/icon/icon-message.png"/> |
||||
|
</div> |
||||
|
<div class="talent-item-cont"> |
||||
|
<h3>理想<span>驻场</span><span>远程</span><span>全职</span></h3> |
||||
|
<p>前端工程师 | 5年 | 本科 | 23岁</p> |
||||
|
<dl> |
||||
|
<dt>vue</dt> |
||||
|
<dt>node.js</dt> |
||||
|
<dt>react</dt> |
||||
|
</dl> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="talent-item-bottom"> |
||||
|
<label>已做两个项目要</label> |
||||
|
<span><van-icon name="location-o" />北京</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.talent-item{ |
||||
|
margin: 0 0rem 0.53rem; |
||||
|
padding: 0.77rem 0.64rem 0; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 0.53rem; |
||||
|
font-size: 0.69rem; |
||||
|
} |
||||
|
.talent-item-top{ |
||||
|
display: flex; |
||||
|
padding-bottom: 0.75rem; |
||||
|
border-bottom: 1px solid #f5f5f5; |
||||
|
} |
||||
|
.talent-item-pic{ |
||||
|
width: 4rem; |
||||
|
height: 4rem; |
||||
|
border-radius: 0.27rem; |
||||
|
overflow: hidden; |
||||
|
margin-right: 0.85rem; |
||||
|
} |
||||
|
.talent-item-pic img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.talent-item-cont{} |
||||
|
.talent-item-cont h3{ |
||||
|
font-size: 0.91rem; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 0.64rem; |
||||
|
} |
||||
|
.talent-item-cont h3 span{ |
||||
|
width: 1.97rem; |
||||
|
height: 0.85rem; |
||||
|
line-height: 0.85rem; |
||||
|
border-radius: 0.53rem; |
||||
|
font-size: 0.59rem; |
||||
|
font-weight: 300; |
||||
|
color: #FFFFFF; |
||||
|
margin-left: 0.2rem; |
||||
|
text-align: center; |
||||
|
padding: 0.1rem 0; |
||||
|
} |
||||
|
.talent-item-cont h3 span:nth-child(1){ |
||||
|
background: linear-gradient(90deg, #FEA829, #FE8F27); |
||||
|
} |
||||
|
.talent-item-cont h3 span:nth-child(2){ |
||||
|
background: linear-gradient(90deg, #55EDB9, #52DEA4); |
||||
|
} |
||||
|
.talent-item-cont h3 span:nth-child(3){ |
||||
|
background: linear-gradient(90deg, #42C3E8, #249AF6); |
||||
|
} |
||||
|
.talent-item-cont p{ |
||||
|
font-size: 0.69rem; |
||||
|
line-height: 0.69rem; |
||||
|
font-weight: 100; |
||||
|
color: #666666; |
||||
|
margin-bottom: 0.56rem; |
||||
|
} |
||||
|
dl{ |
||||
|
display: flex; |
||||
|
flex-flow: wrap; |
||||
|
} |
||||
|
dl dt{ |
||||
|
padding: 0.3rem 0.5rem; |
||||
|
font-size: 0.59rem; |
||||
|
line-height: 0.59rem; |
||||
|
font-weight: 300; |
||||
|
color: #666666; |
||||
|
margin-right: 0.27rem; |
||||
|
background: #F6F7F8; |
||||
|
border-radius: 0.16rem; |
||||
|
margin-bottom: 0.3rem; |
||||
|
} |
||||
|
.talent-item-bottom{ |
||||
|
display: flex; |
||||
|
padding: 0.72rem 0 0.72rem; |
||||
|
} |
||||
|
.talent-item-bottom label{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
.talent-item-bottom span{ |
||||
|
text-align: right; |
||||
|
} |
||||
|
.talent-item-bottom i{ |
||||
|
font-size: 0.8rem; |
||||
|
font-weight: 600; |
||||
|
margin-right: 0.1rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,81 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { useRouter } from "vue-router"; |
||||
|
const props=defineProps({ |
||||
|
messageList:{ |
||||
|
type:Array, |
||||
|
default:()=>[] |
||||
|
} |
||||
|
}) |
||||
|
const router=useRouter() |
||||
|
const gotoDetail=(id:any):void=>{ |
||||
|
router.push('/message/talk/'+id) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<dl v-for="(item,index) in messageList" :key="index" @click="gotoDetail(item.id)"> |
||||
|
<dd> |
||||
|
<img src="../../assets/img/icon/icon-message.png"/> |
||||
|
<span></span> |
||||
|
</dd> |
||||
|
<dt> |
||||
|
<h3>北京驻场无忧科技有限公司<span>5分钟前</span></h3> |
||||
|
<p>你好，我们这边在招聘前端工程师，看了......</p> |
||||
|
</dt> |
||||
|
|
||||
|
</dl> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
dl{ |
||||
|
font-size: 0.64rem; |
||||
|
color: #666666; |
||||
|
padding: 0.9rem 0; |
||||
|
margin: 0 0.67rem; |
||||
|
border-bottom: 1px solid #eeeeee; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
dl dd{ |
||||
|
position: relative; |
||||
|
margin-right: 0.56rem; |
||||
|
} |
||||
|
dl dd img{ |
||||
|
width: 2.61rem; |
||||
|
height: 2.61rem; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
dl dd span{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right:0; |
||||
|
width: 0.32rem; |
||||
|
height: 0.32rem; |
||||
|
background: #FF0000; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
dl dt{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
dl dt h3{ |
||||
|
font-size: 0.8rem; |
||||
|
line-height: 0.8rem; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
margin-bottom: 0.43rem; |
||||
|
} |
||||
|
dl dt h3 span{ |
||||
|
float: right; |
||||
|
color: #999999; |
||||
|
font-size: 0.64rem; |
||||
|
font-weight: 100; |
||||
|
} |
||||
|
dl dt p{ |
||||
|
font-size: 0.69rem; |
||||
|
line-height: 0.69rem; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 1; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
</style> |
||||
@ -1,4 +1,4 @@ |
|||||
import { createPinia } from "pinia"; |
import { createPinia } from "pinia"; |
||||
|
|
||||
const store = createPinia |
|
||||
|
const store = createPinia(); |
||||
export default store |
export default store |
||||
@ -0,0 +1,27 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
import { bannerList, positionTypeList } from '../api/task'; |
||||
|
export const taskStore = defineStore({ |
||||
|
id: 'task', |
||||
|
state: () => { |
||||
|
return { |
||||
|
cityList: [], |
||||
|
cityValue: localStorage.getItem('city') || '北京', |
||||
|
bannerList: [], |
||||
|
positionList:[] |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
setCityValue(value: string){ |
||||
|
this.cityValue = value |
||||
|
}, |
||||
|
setCityList(data: any){ |
||||
|
this.cityList=data |
||||
|
}, |
||||
|
setBannerList(data: any) { |
||||
|
this.bannerList=data |
||||
|
}, |
||||
|
setPositionList(data: any) { |
||||
|
this.positionList=data |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,23 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
export const userStore = defineStore({ |
||||
|
id: 'user', |
||||
|
state: () => { |
||||
|
return { |
||||
|
token: localStorage.getItem('token') || '', |
||||
|
role: localStorage.getItem('role') || '1', |
||||
|
userInfo: {} |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
setRole(type: string){ |
||||
|
this.role = type |
||||
|
}, |
||||
|
setUserInfo(data: any){ |
||||
|
this.userInfo = data.user_info |
||||
|
this.token = data.token |
||||
|
this.role = data.user_info.role || '1' |
||||
|
localStorage.setItem('token',this.token) |
||||
|
localStorage.setItem('role',this.role) |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
@ -1,11 +1,171 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref,reactive } from "vue"; |
||||
|
import {useRoute,useRouter} from 'vue-router' |
||||
|
import { getCode,login } from '@/api/user' |
||||
|
import {userStore} from "@/store/user"; |
||||
|
import { showToast } from 'vant' |
||||
|
const store=userStore() |
||||
|
|
||||
|
interface Istate{ |
||||
|
checked:boolean; |
||||
|
accounts:string; |
||||
|
code:string; |
||||
|
codeText:string; |
||||
|
time:number; |
||||
|
interTimeCode:any |
||||
|
} |
||||
|
const state:Istate = reactive({ |
||||
|
checked:true, |
||||
|
accounts:'', |
||||
|
code:'', |
||||
|
codeText:"获取验证码", |
||||
|
time:60, |
||||
|
interTimeCode:null |
||||
|
}) |
||||
|
const getCodeChange=async ()=>{ |
||||
|
if(state.interTimeCode) return |
||||
|
const res:any=await getCode({ |
||||
|
accounts:state.accounts |
||||
|
}) |
||||
|
console.log(res); |
||||
|
if(res){ |
||||
|
state.interTimeCode=setInterval(()=>{ |
||||
|
state.time-- |
||||
|
if(state.time<=0){ |
||||
|
clearInterval(state.interTimeCode) |
||||
|
state.interTimeCode=null |
||||
|
state.time=60 |
||||
|
state.codeText='获取验证码' |
||||
|
}else{ |
||||
|
state.codeText='重新发送（'+state.time+'s)' |
||||
|
} |
||||
|
|
||||
|
},1000) |
||||
|
state.code=res.code |
||||
|
} |
||||
|
} |
||||
|
const router = useRouter() |
||||
|
const loginSubmit=async ()=>{ |
||||
|
if(!state.code){ |
||||
|
showToast('请输入验证码') |
||||
|
return null |
||||
|
} |
||||
|
if(!state.checked){ |
||||
|
showToast('轻阅读隐私协议') |
||||
|
return |
||||
|
} |
||||
|
const res:any=await login({ |
||||
|
accounts:state.accounts, |
||||
|
code:state.code |
||||
|
}) |
||||
|
if(res.errCode===200){ |
||||
|
//d登录成功之后需要把登录返回的数据存到store中 |
||||
|
store.setUserInfo(res.data) |
||||
|
if(store.role=='1'){ |
||||
|
router.push('/task') |
||||
|
} |
||||
|
if(store.role=='2'){ |
||||
|
router.push('/talent') |
||||
|
} |
||||
|
|
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
const onClickLeft=()=>{ |
||||
|
history.back() |
||||
|
} |
||||
|
</script> |
||||
<template> |
<template> |
||||
<div> |
<div> |
||||
登录页 |
|
||||
|
<van-icon class="icon-left" name="arrow-left" @click-left="onClickLeft()"/> |
||||
|
<div class="login-form"> |
||||
|
<h3>验证码登录</h3> |
||||
|
<div class="login-form-item"> |
||||
|
<i class="icon-phone"></i> |
||||
|
<input placeholder="请输入手机号" v-model="state.accounts" type="text"/> |
||||
|
</div> |
||||
|
<div class="login-form-item"> |
||||
|
<i class="icon-code"></i> |
||||
|
<input placeholder="验证码" v-model="state.code" type="text"/> |
||||
|
<span @click="getCodeChange()">{{ state.codeText }}</span> |
||||
|
</div> |
||||
|
<van-button type="primary" block @click="loginSubmit()">登录</van-button> |
||||
|
<div class="login-form-label"> |
||||
|
<van-checkbox v-model="state.checked">我已阅读</van-checkbox> |
||||
|
<router-link to="/login/serviceAgree">《IT企业平台服务协议》</router-link>和 |
||||
|
<router-link to="/login/privacyPolicy">《隐私政策》</router-link> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
|
||||
|
|
||||
</script> |
|
||||
<style lang="" scoped> |
|
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.icon-left{ |
||||
|
font-size: 0.8rem; |
||||
|
margin: 0.67rem 0 0 0.67rem; |
||||
|
} |
||||
|
.login-form{ |
||||
|
padding: 0 1.07rem; |
||||
|
} |
||||
|
.login-form h3{ |
||||
|
font-size: 1.39rem; |
||||
|
line-height: 1.39rem; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
margin-top: 2.35rem; |
||||
|
margin-bottom: 4rem; |
||||
|
padding-left: 0.3rem; |
||||
|
} |
||||
|
.login-form-item{ |
||||
|
display: flex; |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 300; |
||||
|
color: #9FA7AD; |
||||
|
margin: 0 0.18rem 2rem; |
||||
|
padding: 0.5rem 0; |
||||
|
border-bottom: 1px solid #E7E7E7; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.icon-phone{ |
||||
|
background: url('@/assets/img/icon/icon-phone.png') no-repeat; |
||||
|
background-size: 100%; |
||||
|
width: 1.01rem; |
||||
|
height: 1.01rem; |
||||
|
} |
||||
|
.icon-code{ |
||||
|
background: url('@/assets/img/icon/icon-code.png') no-repeat; |
||||
|
background-size: 100%; |
||||
|
width: 1.01rem; |
||||
|
height: 1.01rem; |
||||
|
} |
||||
|
.login-form-item input{ |
||||
|
flex: 1; |
||||
|
margin-left: 0.48rem; |
||||
|
} |
||||
|
.login-form-item span{ |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 300; |
||||
|
color: #FE9527; |
||||
|
border-left: 1px solid #FE9527; |
||||
|
line-height: 0.75rem; |
||||
|
padding-left: 0.56rem; |
||||
|
} |
||||
|
.login-form-label{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 1.5rem; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
:deep .van-button--primary{ |
||||
|
background: linear-gradient(90deg, #FEA829, #FE8F27); |
||||
|
border-radius: 1.17rem; |
||||
|
border: 0px ; |
||||
|
|
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref,reactive } from "vue"; |
||||
|
import { getPolicy} from '@/api/user' |
||||
|
import { showToast } from 'vant' |
||||
|
const state:any=reactive({ |
||||
|
htmlText:'' |
||||
|
}) |
||||
|
const onClickLeft = () => history.back(); |
||||
|
const getPolicyChange= async ()=>{ |
||||
|
const res:any=await getPolicy({ |
||||
|
id:16, |
||||
|
}) |
||||
|
if(res){ |
||||
|
state.htmlText=res.records[0].content |
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
} |
||||
|
getPolicyChange() |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<van-nav-bar |
||||
|
title="隐私政策" |
||||
|
left-text="" |
||||
|
left-arrow |
||||
|
@click-left="onClickLeft" |
||||
|
/> |
||||
|
<div class="text-agree"> |
||||
|
<div v-html="state.htmlText"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.text-agree{ |
||||
|
padding: 0.5rem 0.7rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref,reactive } from "vue"; |
||||
|
import { getPolicy} from '@/api/user' |
||||
|
import { showToast } from 'vant' |
||||
|
const state:any=reactive({ |
||||
|
htmlText:'' |
||||
|
}) |
||||
|
const onClickLeft = () => history.back(); |
||||
|
const getPolicyChange= async ()=>{ |
||||
|
const res:any=await getPolicy({ |
||||
|
id:17, |
||||
|
}) |
||||
|
if(res){ |
||||
|
state.htmlText=res.records[0].content |
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
} |
||||
|
getPolicyChange() |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<van-nav-bar |
||||
|
title="服务协议" |
||||
|
left-text="" |
||||
|
left-arrow |
||||
|
@click-left="onClickLeft" |
||||
|
/> |
||||
|
<div class="text-agree"> |
||||
|
<div v-html="state.htmlText"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.text-agree{ |
||||
|
padding: 0.5rem 0.7rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,16 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import FooterTabbar from '@/components/FooterTabbar.vue' |
||||
|
import message from '@/components/list/message.vue' |
||||
|
import { reactive } from "vue"; |
||||
|
let messageList=reactive([{id:1},{id:2}]) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<message :messageList="messageList"></message> |
||||
|
<FooterTabbar></FooterTabbar> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import FooterTabbar from '@/components/FooterTabbar.vue' |
||||
|
import TalentList from '@/components/list/TalentList.vue' |
||||
|
import { reactive } from 'vue' |
||||
|
const talentList=reactive([ |
||||
|
{ |
||||
|
id:1 |
||||
|
}, |
||||
|
{ |
||||
|
id:2 |
||||
|
}, |
||||
|
]) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="talent-page"> |
||||
|
<TalentList :talentList="talentList"></TalentList> |
||||
|
<FooterTabbar></FooterTabbar> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.talent-page{ |
||||
|
background: #f9f9f9; |
||||
|
padding: 0 0.59rem 3rem; |
||||
|
min-height: calc(100vh - 3rem); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { inject } from 'vue'; |
||||
|
import { bannerList } from "../../../api/task"; |
||||
|
import { taskStore } from "../../../store/task"; |
||||
|
import { showToast } from 'vant' |
||||
|
|
||||
|
const store=taskStore() |
||||
|
const getBannerList=async ()=>{ |
||||
|
const res:any =await bannerList({type:2}) |
||||
|
console.log('city------',res); |
||||
|
if(res){ |
||||
|
store.setBannerList(res.list) |
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
} |
||||
|
if(store.bannerList.length<=0){ |
||||
|
getBannerList() |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<van-swipe :autoplay="3000" lazy-render> |
||||
|
<van-swipe-item v-for="(item,index) in store.bannerList" :key="index" > |
||||
|
<a :href="item.url" target="_blank" v-if="item.url"> |
||||
|
<img :src="item.picture" /> |
||||
|
</a> |
||||
|
<img v-else ="item.url" :src="item.picture" /> |
||||
|
</van-swipe-item> |
||||
|
</van-swipe> |
||||
|
|
||||
|
</template> |
||||
|
<style scoped> |
||||
|
>>> .van-swipe__track{ |
||||
|
height: 7.47rem; |
||||
|
} |
||||
|
.van-swipe__indicators{ |
||||
|
display: none; |
||||
|
} |
||||
|
>>> img{ |
||||
|
width: 100%; |
||||
|
height: 7.47rem; |
||||
|
border-radius: 0.5rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { inject } from 'vue'; |
||||
|
import { cityList } from "../../../api/task"; |
||||
|
import { taskStore } from "../../../store/task"; |
||||
|
import { showToast } from 'vant' |
||||
|
|
||||
|
const { closeCitySwitch }:any = inject('popup',) |
||||
|
const store=taskStore() |
||||
|
const leftBack = ()=>{ |
||||
|
closeCitySwitch() |
||||
|
} |
||||
|
const getCityList=async ()=>{ |
||||
|
const res:any =await cityList({}) |
||||
|
console.log('city------',res); |
||||
|
if(res){ |
||||
|
store.setCityList(res) |
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
} |
||||
|
if(store.cityList.length<=0){ |
||||
|
getCityList() |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
|
||||
|
<van-nav-bar title="城市切换" left-arrow @click-left="leftBack"/> |
||||
|
<div class="city-switch"> |
||||
|
<h3>当前城市</h3> |
||||
|
<div class="city-switch-text"> |
||||
|
<span>{{ store.cityValue }}</span> |
||||
|
</div> |
||||
|
<h3>切换城市</h3> |
||||
|
<div class="city-switch-text"> |
||||
|
<span v-for="(item,index) in store.cityList" :key="index" @click="closeCitySwitch(item.name)">{{ item.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.city-switch{ |
||||
|
padding: 0 0.7rem; |
||||
|
} |
||||
|
.city-switch h3{ |
||||
|
font-size: 0.8rem; |
||||
|
line-height: 0.8rem; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
margin: 0.7rem 0 0.96rem; |
||||
|
} |
||||
|
.city-switch-text span{ |
||||
|
width: 4.01rem; |
||||
|
height: 1.6rem; |
||||
|
line-height: 1.6rem; |
||||
|
background: #FFFFFF; |
||||
|
border: 1px solid #EBEBEB; |
||||
|
border-radius: 0.11rem; |
||||
|
font-size: 0.64rem; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
margin: 0 0.7rem 0.8rem 0; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.city-switch-text span:nth-child(4n){ |
||||
|
margin-right: 0px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { inject,reactive } from 'vue'; |
||||
|
import { positionTypeList } from "../../../api/task"; |
||||
|
import { taskStore } from "../../../store/task"; |
||||
|
import { showToast } from 'vant' |
||||
|
const state=reactive({ |
||||
|
typeKey:0 |
||||
|
}) |
||||
|
const { closePositionType }:any = inject('popup') |
||||
|
const store=taskStore() |
||||
|
const leftBack = ()=>{ |
||||
|
closePositionType() |
||||
|
} |
||||
|
const getPositionTypeList=async ()=>{ |
||||
|
const res:any =await positionTypeList({}) |
||||
|
console.log('getPositionTypeList------',res); |
||||
|
if(res){ |
||||
|
store.setPositionList(res) |
||||
|
}else{ |
||||
|
showToast(res.msg) |
||||
|
} |
||||
|
} |
||||
|
if(store.positionList.length<=0){ |
||||
|
getPositionTypeList() |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
|
||||
|
<van-nav-bar title="职位" left-arrow @click-left="leftBack"/> |
||||
|
<div class="position-type"> |
||||
|
<div class="position-type-left"> |
||||
|
<h5 :class="state.typeKey==index?'active':''" v-for="(item, index) in store.positionList" :key="index" >{{item.name}}</h5> |
||||
|
</div> |
||||
|
<div class="position-type-right"> |
||||
|
<span v-for="(item, index) in store.positionList[state.typeKey] && store.positionList[state.typeKey].children" :key="index">{{item.name}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.position-type{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.position-type-left{ |
||||
|
width: 4.77rem; |
||||
|
height: calc(100vh - 46px); |
||||
|
background: #F6F6F6; |
||||
|
} |
||||
|
.position-type-left h5{ |
||||
|
width: 4.77rem; |
||||
|
height: 2.4rem; |
||||
|
line-height: 2.4rem; |
||||
|
background: #F6F6F6; |
||||
|
border-bottom: 1px solid #ffffff; |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 300; |
||||
|
color: #333333; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.position-type-left h5.active{ |
||||
|
background: #EFEFEF; |
||||
|
} |
||||
|
.position-type-right{ |
||||
|
padding: 0.8rem 0 0 0.6rem; |
||||
|
} |
||||
|
.position-type-right span{ |
||||
|
width: 6.61rem; |
||||
|
height: 2.03rem; |
||||
|
line-height: 2.03rem; |
||||
|
background: #FFFFFF; |
||||
|
border: 1px solid #E9E9E9; |
||||
|
border-radius: 0.11rem; |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 300; |
||||
|
color: #666666; |
||||
|
text-align: center; |
||||
|
margin-right: 0.59rem; |
||||
|
margin-bottom: 0.64rem; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.position-type-right span:nth-child(2n){ |
||||
|
margin-right: 0px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue