217 lines
7.1 KiB
Vue
217 lines
7.1 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" :class="statusNum==index ? 'service-range-activeStatus' : ''">{{item}}</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" :class="hoursNum==index ? 'service-range-activeStatus' : ''">{{item}}</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="chooseRegion"> -->
|
|
<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" :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:['工作状态','休息状态'],
|
|
statusNum:0,
|
|
workingHours:['不限','白天','晚上'],
|
|
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()
|
|
},
|
|
methods: {
|
|
// 提交保存
|
|
submitData(){
|
|
if(this.checkEmpty()) {
|
|
if(this.flag) {
|
|
this.flag = false;
|
|
let params = {
|
|
a:this.personnelStatus[this.statusNum],
|
|
b:this.workingHours[this.hoursNum],
|
|
c:this.region,
|
|
d:this.detailed_address,
|
|
f:this.serviceRange[this.rangeNum],
|
|
g:this.remarkText
|
|
}
|
|
console.log(params,87);
|
|
// this.$requst.post().then(res=>{
|
|
// if(res.code) {
|
|
// uni.navigateBack({delta:1})
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
},
|
|
// 判空事件
|
|
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;
|
|
},
|
|
// 选择地区
|
|
chooseRegion(){
|
|
uni.getLocation({
|
|
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
|
success: function (res) {
|
|
const latitude = res.latitude;
|
|
const longitude = res.longitude;
|
|
console.log(latitude,longitude,78);
|
|
uni.chooseLocation({
|
|
success: function (res) {
|
|
console.log(res,81);
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
}
|
|
});
|
|
// uni.openLocation({
|
|
// latitude: latitude,
|
|
// longitude: longitude,
|
|
// success: function () {
|
|
// console.log('success');
|
|
// }
|
|
// });
|
|
}
|
|
});
|
|
},
|
|
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:function(res) {
|
|
// console.log('地址数据：',res)
|
|
ya.newProvice = res.data.result.address_component.province
|
|
ya.newCity = res.data.result.address_component.city
|
|
ya.newDistrict = res.data.result.address_component.district
|
|
}
|
|
})
|
|
},
|
|
})
|
|
},
|
|
//打开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>
|