119 lines
4.1 KiB
Vue
119 lines
4.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>湖南省株洲市芦淞区</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>
|
|
<view class="disac">
|
|
<input class="fon28" type="text" placeholder="请输入详细地址" placeholder-style="font-size:28rpx;"/>
|
|
</view>
|
|
</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" style="margin-top: -60rpx;">提交保存</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
personnelStatus:['工作状态','休息状态'],
|
|
statusNum:0,
|
|
workingHours:['不限','白天','晚上'],
|
|
hoursNum:0,
|
|
serviceRange:['30KM','80KM','1500KM','其他','其他','其他','其他'],
|
|
rangeNum:0,
|
|
remarkText:'',
|
|
eareWidth:''
|
|
}
|
|
},
|
|
onReady() {
|
|
const query = wx.createSelectorQuery()
|
|
query.select('#timeBox').boundingClientRect((rect) => {
|
|
this.eareWidth = rect.width;
|
|
}).exec()
|
|
},
|
|
methods: {
|
|
// 选择地区
|
|
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');
|
|
// }
|
|
// });
|
|
}
|
|
});
|
|
},
|
|
// 人员状态选择
|
|
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>
|