template-project/pagesB/service-range/service-range.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>
		<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
	</view>
</template>

<script>
	import addressOne from '@/components/choose-address/address-one/address-one.vue';
	// import city from '@/components/city/city.js';
	export default {
		components:{
			addressOne
		},
		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>