mobile_uniapp_mmhy/pageA/customized/customized.vue

<template>
	<view class="cooperation">
		<u-toast ref="uToast" />
		<view class="formBgc">
			<view class="msg">
				因政策原因
				  <text v-for="(item,index) in configAll.disable_send_province" :key="index">
				  	{{item.name | areaName}}
				  </text>不发货 
			</view>
			<view class="form">
				<view class="formInput">
					<u-form :model="form"  label-width="280">
						<u-form-item label="预定号码" >
							<u-input v-model="form.no" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入预定号码"/>
						</u-form-item>
						<u-form-item label="可接受最低价格" class="remark">
							<u-input v-model="form.price_min" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入最低价格"/>
						</u-form-item>
						<u-form-item label="可接受最高价格" class="remark">
							<u-input v-model="form.price_max" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入最高价格"/>
						</u-form-item>
						<u-form-item label="备注信息" class="remark">
							<u-input v-model="form.remark" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入备注信息"/>
						</u-form-item>
						<u-form-item label="姓名" >
							<u-input v-model="form.name" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入真实姓名"/>
						</u-form-item>
						<u-form-item label="联系电话" >
								<u-input v-model="form.phone" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入手机号"/>
						</u-form-item>
						<u-form-item label="城市" >
							<!-- <u-input v-model="" /> -->
							<view class="county" @tap="countyHide=!countyHide">
								{{countyName}}
							</view>
							<!-- 快手小程序 出现异常抖动更换 -->
														<!-- <u-select v-model="countyHide" :defaultValue='countyIndex' mode="mutil-column-auto" lchild-name="children" :list="selector" @confirm="confirm"></u-select> -->
							<w-picker
								:visible.sync="countyHide"
								mode="region"
								:value="countyIndex"
								default-type="value"
								:hide-area="false"
								@confirm="onConfirm($event,'region')"
								@cancel="onCancel"
								ref="region" 
							></w-picker>
						</u-form-item>
						<u-form-item label="详细地址" >
							<u-input v-model="form.address" placeholder-style="font-size:26rpx;" :clearable="false" placeholder="请输入街道/镇+村/小区+门牌号  "/>
						</u-form-item>
					</u-form>
					<view class="btn" @tap="order_no()">
						立即预定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
export default {
	data() {
		return {
			countyName:'城市名称',
			countyHide:false,
			countyIndex:[1], //城市弹窗下标
			selector: [],
			form: {
				no:'',
				price_min:'',
				price_max:'',
				remark:'',
				name:'', //姓名
				phone:'', //手机号
				county:'', //城市ID,区县id
				address:'', //详细地址
				
			},
		};
	},
	components:{
				wPicker
			},
	onLoad() {
		this.area_tree()
	},
	filters:{
			areaName(val){
				return val.replace('省','').replace('特别行政区','').replace('壮族自治区','').replace('回族自治区','').replace('维吾尔自治区','').replace('自治区','')
			}
		},
	methods: {
		onConfirm(res){
			console.log(res)
			this.form.county=res.value[2]
			this.countyName=res.result
			this.countyIndex=res.value
		},
		onCancel(){
			
		},
		// 预定号码
		order_no(){
			if(this.form.no==''){
				this.$refs.uToast.show({
					title: '请输入预定手机号',
					type: 'error ',
				})
				return;
			}if(this.form.name==''){
				this.$refs.uToast.show({
					title: '请输入姓名',
					type: 'error ',
				})
				return;
			}
			if(!this.$check.checkName(this.form.name)){
				this.$refs.uToast.show({
					title: '请输入正确的格式',
					type: 'error ',
				})
				return;
			}
			if(this.form.phone==''){
				this.$refs.uToast.show({
					title: '请输入手机号',
					type: 'error ',
				})
				return;
			}
			if(!this.$check.checkMobile(this.form.phone)){
				this.$refs.uToast.show({
					title: '请输入正确手机号的格式',
					type: 'error ',
				})
				return;
			}
			if(this.form.address==''){
				this.$refs.uToast.show({
					title: '请输入地址',
					type: 'error ',
				})
				return;
			}
			this.$http.order_no(this.form)
			.then(res=>{
				console.log(res)
				if(res.data.code==1){
					this.$refs.uToast.show({
						title: '预定完成',
						type: 'success',
					})
					uni.reLaunch({
					  url: '/pages/index/index',
					})
				}else{
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'error ',
					})
				}
			})
		},
		// 区域内容
		area_tree(){
			this.$http.area_tree().then(res => {
				if(res.data.code===1){
					this.selector=res.data.data
					console.log(this.selector)
					this.loca()
				}
			});
		},

		// 获取本地经纬度
		loca(){
			let this_=this;
			if(this_.mixin_type!='TOUTIAO' && this_.mixin_type!='H5'){
				ks.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							//提前向用户发起授权请求
							uni.getLocation({
								type: 'wgs84',
								success: function (res) {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									this_.loAcquire(res.longitude,res.latitude)
								}
							});
						}
					},
				});
			}else if( this_.mixin_type=='H5'){
					this_.jsonp('https://apis.map.qq.com/ws/location/v1/ip',{
						key: "O7NBZ-PTTCG-OEPQF-I6MTS-YEKCJ-OCFVO",
						output: "jsonp"  
					})
					.then(res=>{
						console.log(res.result.ad_info);
						let adInfo=res.result.ad_info
						this_.cityId(adInfo.province,adInfo.city,adInfo.district)
					})

			}else{
				uni.getLocation({
					type: 'wgs84',
					highAccuracyExpireTime:100,
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this_.loAcquire(res.longitude,res.latitude)
					}
				});
			}
		},
		// 根据经纬度查询城市
		loAcquire(longitude,latitude){ 
			let this_=this;
		        this.myAmapFun.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: function(res) {
						console.log("解析地址成功");
						console.log(res);
						// 根据名称筛选id
						this_.cityId(res.result.address_component.province,res.result.address_component.city,res.result.address_component.district)
					},
					fail: function(res) {
						uni.showToast({
							title: '定位失败',
							duration: 2000,
							icon: "none"
						})
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					}
				})
		    },
			// 城市选择id锁定
			confirm(e){
				console.log(e)
				this.form.county=e[2].value
				this.countyName=e[0].label+e[1].label+e[2].label
			},
			// 根据名称筛选id
			cityId(province,city,district){
				this.selector.forEach((val,i)=>{
					if(val.label.slice(0,2)==province.slice(0,2)||val.label==province){
						console.log(val.label)
						console.log(val.value)
						val.children.forEach((item,l)=>{
							if(item.label.slice(0,2)==city.slice(0,2)||item.label==city){
								console.log(item.label)
								console.log(item.value)
								item.children.forEach((con,y)=>{
									if(con.label.slice(0,2)==district.slice(0,2)||con.label==district){
										console.log(con.label)
										console.log(con.value)
										this.countyIndex=[i,l,y]
										this.countyName=val.label+item.label+con.label
										this.form.county=con.value
										}
								})
							}
						})
						
					}
				})
			},
	}
};
</script>

<style lang="scss">
	.cooperation{
		width: 100%;
		.formBgc{
			// border-top: 1rpx solid #fff;	
			width: 100%;
			height: 725rpx;
			background: linear-gradient(rgb(213, 46, 76), #fff);
			
			padding-top: 60rpx;
			.msg{
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				margin-bottom: 30rpx;
			}
			.form {
			  width: 703rpx;
			  box-sizing: border-box;
			  padding: 30rpx;
			  position: relative;
			  margin: 20rpx auto 10rpx;	  
			  background-color: #fff;
			  border-radius: 20rpx;
			  .btn{
				  width: 569rpx;
				  height: 77rpx;
				  line-height: 77rpx;
				  background: #D52E4C;
				  border-radius: 39rpx;
				  margin: 20rpx auto;
				  text-align: center;
				  color: #fff;
				  font-size: 32rpx;
			  }
			  .orderTit{
				  text{
					margin-left: 30rpx;  
					color: dimgray;
				  }
			  }
			  .formInput{
				  .u-form-item{
					  /deep/ .u-form-item--left__content__label{
						  position: relative;
						  padding-left: 30rpx;
					  }
					  /deep/.u-form-item--left__content__label::after{
						  content: '*';
						  position: absolute;
						  left: 18rpx;
						  top: 0;
						color: red;
					  }
				  }
				  .remark{
					  /deep/.u-form-item--left__content__label::after{
					  	display: none;
					  }
				  }
			  }
			}
		}
	}
</style>