222 lines
7.5 KiB
Vue
222 lines
7.5 KiB
Vue
<template>
|
|
<view>
|
|
<status-nav navBarTitle="服务范围" returnColor="#c2c2c2"></status-nav>
|
|
<container-subgroup>
|
|
<view slot="content" style="margin: 0rpx -30rpx 0rpx -30rpx;padding-bottom: 120rpx;" class="fon28 bacf">
|
|
<view class="bbot disac pad-sx30 pad-zy30">
|
|
<view class="mar-y30 flexs">人员状态 <text style="color: red;">*</text></view>
|
|
<view class="disac">
|
|
<view @tap="chooseStatus(index,0)" v-for="(item,index) in personnelStatus" :key="index" class="service-range-status mar-y10 pad-zy20 pad-sx6" :class="statusNum==index ? 'service-range-activeStatus' : ''">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="bbot disac pad-sx30 pad-zy30">
|
|
<view id="timeBox" class="mar-y30 flexs">工作时段 <text style="color: red;">*</text></view>
|
|
<view class="disac">
|
|
<view @tap="chooseStatus(index,1)" v-for="(item,index) in workingHours" :key="index" class="service-range-status mar-y10" style="padding: 6rpx 46rpx;" :class="hoursNum==index ? 'service-range-activeStatus' : ''">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="bbot disac pad-sx30 pad-zy30">
|
|
<view class="mar-y30 flexs disjbac" :style="{width: eareWidth + 'px'}">地 <view>区<text style="color: red;">*</text></view></view>
|
|
<view class="disjbac width100" @tap="openPicker">
|
|
<view>{{region}}</view>
|
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
|
</view>
|
|
</view>
|
|
<view class="bbot disac pad-sx30 pad-zy30">
|
|
<view class="mar-y30 flexs">详细地址 <text style="color: red;">*</text></view>
|
|
<input class="fon28 width100" type="text" v-model="detailed_address" placeholder="请输入详细地址" placeholder-style="font-size:28rpx;"/>
|
|
</view>
|
|
<view class="bbot disac pad-sx30 pad-zy30">
|
|
<view class="mar-y30 flexs">服务范围 <text style="color: red;">*</text></view>
|
|
<scroll-view scroll-x style="width: 76%;">
|
|
<view class="disac">
|
|
<view @tap="chooseStatus(index,2)" v-for="(item,index) in serviceRange" :key="index" class="service-range-status mar-y10 flexs pad-zy30 pad-sx6" :class="rangeNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="bbot disjcac fc pad-sx30 pad-zy30">
|
|
<textarea class="fon28" v-model="remarkText" maxlength="50" placeholder="特殊情况请备注" placeholder-style="font-size: 28rpx;color:#bbbbbb;" style="height: 160rpx;width: 100%;" />
|
|
<view class="col9">{{remarkText.length}}/50</view>
|
|
</view>
|
|
</view>
|
|
</container-subgroup>
|
|
<!-- 提交保存 -->
|
|
<view class="person-btn" @tap="submitData" style="margin-top: -60rpx;">提交保存</view>
|
|
<city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import city from '@/components/city/city.vue';
|
|
// import city from '@/components/city/city.js';
|
|
export default {
|
|
components:{
|
|
city
|
|
},
|
|
data() {
|
|
return {
|
|
personnelStatus:[{id:1,title:'工作状态'},{id:0,title:'休息状态'}],
|
|
statusNum:0,
|
|
workingHours:[{id:3,title:'不限'},{id:1,title:'白天'},{id:2,title:'晚上'}],
|
|
hoursNum:0,
|
|
serviceRange:['30KM','80KM','1500KM','其他','其他','其他','其他'],
|
|
rangeNum:0,
|
|
lotusAddressData:{
|
|
visible:false,
|
|
provinceName:'',
|
|
cityName:'',
|
|
townName:'',
|
|
},
|
|
region:'',//地区
|
|
newProvice:'',//省/市
|
|
newCity:'',//市/区
|
|
newDistrict:'',//区
|
|
detailed_address:'',//详细地址
|
|
remarkText:'',//备注
|
|
eareWidth:'',
|
|
flag:true
|
|
}
|
|
},
|
|
onReady() {
|
|
const query = wx.createSelectorQuery()
|
|
query.select('#timeBox').boundingClientRect((rect) => {
|
|
this.eareWidth = rect.width;
|
|
}).exec()
|
|
this.getDistrict();
|
|
this.getEar();
|
|
},
|
|
methods: {
|
|
// 地区接口
|
|
getEar() {
|
|
let params = {
|
|
pidkey:'',
|
|
pid:'',
|
|
all:1
|
|
}
|
|
this.$requst.get('/universal/api.other/city',params).then(res=>{
|
|
if(res.code) {
|
|
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
})
|
|
},
|
|
// 提交保存
|
|
submitData(){
|
|
if(this.checkEmpty()) {
|
|
if(this.flag) {
|
|
this.flag = false;
|
|
let params = {
|
|
is_working:this.personnelStatus[this.statusNum].id,//人员状态
|
|
working_hours:this.workingHours[this.hoursNum].id ,//工作时段
|
|
area_id:272,
|
|
area:this.region,//地区
|
|
address:this.detailed_address,//详细地址
|
|
service_distance: parseFloat(this.serviceRange[this.rangeNum]) || 0,//服务范围
|
|
remark:this.remarkText//备注
|
|
}
|
|
this.$requst.post('/universal/api.user/service_area',params).then(res=>{
|
|
if(res.code) {
|
|
this.$toolAll.tools.showToast('保存成功');
|
|
setTimeout(()=>{
|
|
uni.navigateBack({delta:1})
|
|
},1000)
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 判空事件
|
|
checkEmpty(){
|
|
let result = false;
|
|
if(!this.region) {
|
|
this.$toolAll.tools.showToast('请选择地区');
|
|
} else if(!this.detailed_address){
|
|
this.$toolAll.tools.showToast('请输入详细地址');
|
|
} else {
|
|
result = true;
|
|
}
|
|
return result;
|
|
},
|
|
getDistrict() {
|
|
let ya = this
|
|
uni.getLocation({
|
|
success:(res)=> {
|
|
uni.request({
|
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
|
header: {
|
|
'Content-Type':'application/json'
|
|
},
|
|
success:(res)=> {
|
|
// console.log('地址数据：',res)
|
|
let provinceStr = res.data.result.address_component.province;
|
|
if(provinceStr=='北京市') {
|
|
provinceStr = '北京';
|
|
} else if(provinceStr=='天津市') {
|
|
provinceStr = '天津';
|
|
} else if(provinceStr=='上海市') {
|
|
provinceStr = '上海';
|
|
} else if(provinceStr=='重庆市') {
|
|
provinceStr = '重庆';
|
|
}
|
|
ya.newProvice = provinceStr;
|
|
ya.newCity = res.data.result.address_component.city;
|
|
ya.newDistrict = res.data.result.address_component.district;
|
|
this.region = ya.newProvice + ya.newCity + ya.newDistrict;
|
|
}
|
|
})
|
|
},
|
|
})
|
|
},
|
|
//打开picker
|
|
openPicker() {
|
|
this.lotusAddressData.visible = true;
|
|
this.lotusAddressData.provinceName = this.newProvice;
|
|
this.lotusAddressData.cityName = this.newCity;
|
|
this.lotusAddressData.townName = this.newDistrict;
|
|
},
|
|
//回传已选的省市区的值
|
|
choseValue(res){
|
|
//res数据源包括已选省市区与省市区code
|
|
// console.log(res);
|
|
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
|
//res.isChose = 1省市区已选 res.isChose = 0;未选
|
|
if(res.isChose){
|
|
this.lotusAddressData.provinceName = res.province;//省
|
|
this.lotusAddressData.cityName = res.city;//市
|
|
this.lotusAddressData.townName = res.town;//区
|
|
this.region = `${res.province}${res.city}${res.town}`; //region为已选的省市区的值
|
|
this.regionObj = {
|
|
province:res.province,
|
|
provinceCode:res.provinceCode,
|
|
city:res.city,
|
|
cityCode:res.cityCode,
|
|
town:res.town,
|
|
townCode:res.townCode
|
|
}
|
|
}
|
|
},
|
|
// 人员状态选择
|
|
chooseStatus(index,num){
|
|
switch (num){
|
|
case 0:
|
|
this.statusNum = index;
|
|
break;
|
|
case 1:
|
|
this.hoursNum = index;
|
|
break;
|
|
case 2:
|
|
this.rangeNum = index;
|
|
break;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|