jzhw_uni/pages/ucenter/appointOrder/appointOrder.vue

<template>
	<view class="container">
		<!-- 地址 -->
		<view class="step1" style="display: flex;margin-left: 10rpx;margin-top: 31rpx;">
			<view class="step1-left" style="color: #D77958; margin-right: 20rpx;">
				<text style="font-size: 29rpx;color: #D77958; ">STEP</text>
				<view class="step1-number" style="font-size: 80rpx;color: #D77958; text-align: center;">
					1
				</view>
			</view>
			<view class="step1-right">
				<text
					style="display: block;font-size: 40rpx;color: #000;font-weight: bold;margin-bottom: 10rpx;">填写上门信息</text>
				<text style="display: block;font-size: 29;color: #999;">服务所需的地址、电话等信息</text>
			</view>
		</view>
		<view class="order-address">
			<!-- 有地址，选择 -->
			<view v-if="addressId > 0" class="address-select" @tap="addressSelect">
				<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dw.png" class="map-img"></image>

				<view class="address-main">
					<view class="main-line">
						<view>{{ checkedAddress.name }}</view>
						<view class="phone">{{ checkedAddress.tel }}</view>
					</view>
					<view class="customer-address" v-if="checkedAddress.addressName">
						{{ checkedAddress.addressName }}{{ checkedAddress.detail }}
					</view>
					<view class="customer-address" v-else-if="">{{ checkedAddress.addressDetail }}</view>
				</view>
				<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/wx-dy/arrow-grey.png"
					class="arrow-img"></image>
			</view>
			<!-- 没地址，输入 -->
			<view class="address-input-module add-address" v-else>
				<view class="add-form">
					<view class="form-item" @tap="goMap" style="height: auto; min-height: 78rpx">
						<view class="label">
							<text>*</text>
							服务地址
						</view>
						<view class="content" style="height: auto; min-height: 78rpx">
							<view v-if="address.addressname == ''" style="color: #acadb1; font-size: 24rpx"
								class="input">选择省、市、县（区）、乡（镇）</view>
							<view v-else class="input">{{ address.addressname }}</view>
							<image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-address-map.png"
								style="width: 28rpx; height: 28rpx; margin: 28rpx 0 0 10rpx"></image>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							<text>*</text>
							小区门牌
						</view>
						<view class="content">
							<input class="input" @input="bindinputAddress" :value="address.detail"
								placeholder="详细地址，例xx小区x号楼x单元xx室"
								placeholder-style="color: #ACADB1;;font-size:24rpx;" />
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							<text>*</text>
							联系人
						</view>
						<view class="content special-content">
							<input class="input" @input="bindinputName" placeholder="姓名" :value="address.name"
								auto-focus placeholder-style="color: #ACADB1;;font-size:24rpx;" />
							<view class="gender-wrapper">
								<view class="female" @tap="femaleSelect">
									<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-select-popup.png"
										mode="asceptFit" v-if="gender == 2"></image>
									<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png"
										mode="asceptFit" v-else></image>
									<text>女士</text>
								</view>
								<view class="male" @tap="maleSelect">
									<image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png"
										mode="asceptFit" v-if="gender == 1"></image>
									<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png"
										mode="asceptFit" v-else></image>
									<text>先生</text>
								</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							<text>*</text>
							联系电话
						</view>
						<view class="content">
							<input class="input" @input="bindinputMobile" :value="address.tel" type="number"
								placeholder="手机号码" maxlength="11"
								placeholder-style="color: #ACADB1;;font-size:24rpx;" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="step1" style="display: flex;margin-left: 10rpx;margin-top: 31rpx;">
			<view class="step1-left" style="color: #D77958; margin-right: 20rpx;">
				<text style="font-size: 29rpx;color: #D77958; ">STEP</text>
				<view class="step1-number" style="font-size: 80rpx;color: #D77958; text-align: center;">
					2
				</view>
			</view>
			<view class="step1-right">
				<text
					style="display: block;font-size: 40rpx;color: #000;font-weight: bold;margin-bottom: 10rpx;">预约服务时间</text>
				<text style="display: block;font-size: 29;color: #999;">选择您想选择的服务时间</text>
			</view>
		</view>
		
		
		
		
		
		<view class="appoint-server"   v-if="showLastServiceBtn&&addressId&&addressId!='undefined'&&addressId!='null'" @tap="chooseLastOrder"
			>
			<view class="server-tip" >优先匹配上一单的服务者</view>
			
			<image mode="aspectFit"
				src="https://mall.zhaijieshi.cc/file/wx-huawang/dian2.png" class="radio-img" v-if="isPreOrder" 
				></image>
			
			<image mode="aspectFit"
				src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" v-else
				class="radio-img" ></image>
		</view>
		<!-- 预约服务时间 -->
		<view class="appoint-main-module">
			<view class="appoint-block" @tap="showAppoint" style="height: 132rpx;line-height: 132rpx;">
				<view class="appoint-time" v-if="appointDate == ''" style="font-size: 29rpx;">服务者将在该时段内上门</view>
				<view class="appoint-timed" v-else style="font-size: 29rpx; color: #D77958;">{{ appointDate }}</view>
				<image src="../../../static/jiantou.png" mode="aspectFit" class="arrow-img"></image>
			</view>
		</view>



		<view class="step1" style="display: flex;margin-left: 10rpx;margin-top: 31rpx;">
			<view class="step1-left" style="color: #D77958; margin-right: 20rpx;">
				<text style="font-size: 29rpx;color: #D77958; ">STEP</text>
				<view class="step1-number" style="font-size: 80rpx;color: #D77958; text-align: center;">
					3
				</view>
			</view>
			<view class="step1-right">
				<text
					style="display: block;font-size: 40rpx;color: #000;font-weight: bold;margin-bottom: 10rpx;">填写备注</text>
				<text style="display: block;font-size: 29;color: #999;">请提前告知我们需要注意的信息</text>
			</view>
		</view>
		<view class="appoint-main-module">

			<view class="appoint-block" @tap="showRemarkSelect">
				<view class="appoint-time" v-if="remark == ''">请选择备注</view>
				<view class="appoint-timed" v-else>{{ remark }}</view>
				<image src="../../../static/jiantou.png" mode="aspectFit" class="arrow-img"></image>
			</view>
			<view class="appoint-block">

				<input placeholder="请输入补充信息" class="appoint-timed" :value="message"
					placeholder-style="font-size:24rpx;color: #ACADB1;" @input="bindMessageInput" />
				<!-- <image src="../../../static/jiantou.png" mode="aspectFit" class="arrow-img"></image> -->
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="appoint-btn" @tap="submitAll" v-if="!isHide">立即预约</view>

		<!-- 备注弹框 -->
		<view class="appoint-overlay-wrapper" v-if="remarkShow" @tap="onRemarkClose"></view>
		<view class="remark-popup" v-if="remarkShow">
			<view class="title">订单备注</view>
			<textarea @input="bindMessageInput" placeholder="请输入订单备注信息" :value="message"
				placeholder-style="font-size:26rpx;color:#666;" maxlength="200" class="remark-textarea"></textarea>
			<view class="btn" @tap="confirmRemark">确定</view>
		</view>

		<view class="appoint-overlay-wrapper" v-if="choosePopup" @tap="onClose"></view>
			<timeSelect v-if="choosePopup" :timeParams='timeParams' @timeShow='setTimeshow'/>

		<!-- 地址弹框 -->
		<view class="appoint-overlay-wrapper address-overlay" v-if="addressShow" @tap="onAddressClose">
			<view class="address-popup" cantap="onAddressClick">
				<view class="title">选择地址</view>
				<view class="address-list">
					<view class="address-item" :data-address="item" @tap="addressConfirm"
						v-for="(item, index) in addressList" :key="index">
						<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dw.png" class="map-img">
						</image>

						<view class="address-main">
							<view class="main-line">
								<view>{{ item.name }}</view>
								<view class="phone">{{ item.tel }}</view>
							</view>
							<view class="customer-address" v-if="item.addressName">
								{{ item.addressName }}{{ item.detail }}
							</view>
							<view class="customer-address" v-else-if="">{{ item.addressDetail }}</view>
						</view>

						<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/wx-dy/arrow-grey.png"
							class="arrow-img"></image>
					</view>
				</view>
				<view class="add-address-btn" @tap="goAddAddress">添加其他地址</view>
			</view>
		</view>
		<!-- 预约失败弹框 -->
		<van-overlay :show="showOverLay" @click="onClickHide" z-index=999 root-portal='true'>
			<view class="wrapper"
				style="width: 652rpx;height: 627rpx;background-color:#fff;position: absolute;top: 400rpx;left: 49rpx;border-radius: 16rpx;">
				<view class="title-icon"
					style="padding: 60rpx 260rpx;   height: 255rpx; background: #d77958; border-radius: 16rpx 16rpx 0 0;     background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png') no-repeat ;background-size: cover;">
					<image src="https://mall.zhaijieshi.cc/file/wx-huawang/cc.png" mode=""
						style="height:161rpx;width: 161rpx;"></image>
				</view>
				<text class="tips-content" style="font-weight: bold;font-size: 33rpx;display: block;width: 574rpx;text-align: center;margin: 58rpx 0 30rpx 30rpx;
			">
					{{showErrorMsg}}
				</text>
				<view class="btn-service" @tap="toService">
					在线客服
				</view>
			</view>
		</van-overlay>
	


		<!-- 备注弹框 -->
		<view class="appoint-overlay-wrapper remark-overlay" v-if="remarkPopupShow" @tap="onRemarkPopupClose">
			<view class="remark-select" @tap.stop.prevent="onRemarkClick">
				<view class="title">选择备注</view>
				<view class="remark-list">
					<view class="remark-item" :data-remark="item" @tap.stop.prevent="remarkItemSelect"
						v-for="(item, index) in remarkList" :key="index">
						<view class="remark-value">{{ item }}</view>

						<image mode="aspectFit"
							src="https://mall.zhaijieshi.cc/file/wx-huawang/dian2.png" class="radio-img"
							v-if="remarkActive == item"></image>

						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
							class="radio-img" v-else></image>
					</view>
				</view>
				<view class="remark-conf-btn" @tap.stop.prevent="remarkItemConfirm">提交备注</view>
			</view>
		</view>
	</view>
</template>

<script>
	//获取应用实例
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var check = require('../../../utils/check.js');
	import timeSelect from '@/components/time-select.vue'
	var app = getApp();
	export default {
		components: {
		
			timeSelect
		},
		data() {
			return {
				appointmentTime:{},
				timeParams:{},
				gender: '2',

				address: {
					id: 0,
					areaCode: 0,
					address: '',
					name: '',
					tel: '',
					isDefault: 0,
					province: '',
					city: '',
					county: '',
					latitude: '',
					longitude: '',
					addressDetail: '',
					detail: '',
					addressname: ''
				},

				addressIdSave: '',

				//新增地址保存
				orderInfo: {
					picUrl: '',
					goodsName: '',
					actualPrice: '',
					increaseSumPrice: '',
					unitDescribe: '',
					unitIncreaseNumber: '',
					skuName: '',
					serviceTimes: '',
					orderSn: '',
					createTime: '',
					payChannel: '',
					orderPrice: '',
					discountPrice: ''
				},

			

				checkedAddress: {
					name: '',
					tel: '',
					addressName: '',
					detail: '',
					addressDetail: ''
				},

				addressList: [],
				addressShow: false,
				remark: '',
				remarkPopupShow: false,
				remarkList: ['上门前提前电话联系', '请准时到达', '请自带打扫工具', '主要打扫厨房&卫生间', '家里有宠物'],
				remarkActive: '',
				serviceId: '',
				message: '',
				remarkShow: false,
				addressId: '',
				addressName: '',
				noAppoint: '',
				aftersaleStatus: '',
				orderId: '',
				order: '',
				bookId: '',
				bookCount: 0,
				orderStatusText: '订单服务中',
				activeTab: 1,

				orderBook: {
					status: ''
				},

				orderChannel: 0,
				jzOrderBookDetails: [],
				unusedSerList: [],
				usedSerList: [],
				serList: [],
				choosePopup: false,
				timeList: [],

				// dateList: util.getDateList(new Date(new Date().getTime() + 60 * 60 * 1000 * 24 * 0), 1, 30),
				dateList: [],

				timeIndex: '',

				//选中的时间段
				dateIndex: 0,

				//选中的日期
				appointDate: '',

				//显示信息
				isHide: false,

				product: {
					serviceTimes: '',
					price: ''
				},

				noonType: 1,
				selectTimeValue: '',

				goodsTip: {
					remark: null,
					title: ''
				},

				dyDetails: '',
				afterSale: '',
				payOverTime: '',
				remainTimes: '',
				goods: '',
				mobile: '',
				showOverLay: false,
				showErrorMsg: '',
				isPreOrder:false,
				showLastServiceBtn:false,
				
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			console.log(options);
			if (options.serviceId) {
				this.setData({
					serviceId: options.serviceId
				});
			}
			if (options.orderId) {
				this.setData({
					orderId: options.orderId
				});
			}
			app.globalData.mapSelectFinish = false;
		},
		onShow() {
			this.getOrderDetail();
			if (app.globalData.mapSelectFinish) {
				let poi = app.globalData.mapSelectPoi;
				let location = poi.location;
				let address = this.address;
				address.lng = location.split(',')[0];
				address.lat = location.split(',')[1];
				address.addressname = poi.address;
				this.setData({
					address: address
					// selectAddress:poi.address
				});

				console.log(this.address);
				this.getAreaCode();
			}
		
		},
		methods: {
			//优先选择上一单服务者
			chooseLastOrder(){
				this.setData({
					isPreOrder:!this.isPreOrder
				})
				console.log("isProOrder",this.isPreOrder);
			},
			setTimeshow(params){
				this.setData({
					choosePopup:false,
					appointDate:params.appointDate,
					futureDays:params.futureDays,
					appointmentTime:params.Time
				})
				console.log('params',params);
			},
			getOrderDetail() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				util.request(api.OrderDetail, {
					orderId: this.orderId
				}).then((res) => {
					if (res.errno === 0) {
						uni.hideLoading();
						console.log("orderInfo", res.data);
						this.setData({
							orderInfo: res.data,
							goodsTip: res.data.goodsTip,
							addressId: res.data.addressId,
							dyDetails: res.data.dyDetails,
							afterSale: res.data.afterSale,
							payOverTime: res.data.payOverTime,
							remainTimes: res.data.serviceTimes - res.data.servedTimes,
							showLastServiceBtn:res.data.showLastServiceBtn
						});

						if (res.data.addressId) {
							this.getAddressList();
						}
							console.log("addressId",this.addressId);
					}
				});
			},

			getAddressList() {
				util.request(api.AddressList).then((res) => {
					if (res.errno === 0) {
						this.setData({
							addressList: res.data.list
						});
						let current = this.addressList.filter((item) => {
							return item.id == this.addressId;
						});
						if (current.length > 0) {
							this.setData({
								checkedAddress: current[0]
							});
						}
					}
				});
			},

			

			showAppoint(e) {
				if (this.appointDate != '') {
					this.setData({
						choosePopup: true
					});
					return false;
				} else {
					this.setData({
						choosePopup: true,
						noonType: 1,
						timeIndex: 0
					});
					let params = {
						days: 30,
						// orderBookId:this.data.bookId,
						bookId: this.serviceId,
						productId: this.orderInfo.productId,
						serviceDuration: this.orderInfo.serviceDuration,
						isPreOrder:this.isPreOrder,
						addressId:this.addressId
					};
					this.setData({
						timeParams:params
					})
					console.log('123456',this.timeParams);
					// this.getDayTime(params);
				}
			},

			getTimeList() {
				let timeList = util.getBeginTimeList(this.orderInfo.serviceDuration, this.noonType, this.dateList[this
					.dateIndex].name);
				this.setData({
					timeList: timeList,
					selectTimeValue: timeList.length == 0 ? '' : timeList[0].value
				});
				if (this.timeList.length == 0) {
					this.setData({
						timeIndex: ''
					});
				}
			},

			onClose() {
				this.setData({
					choosePopup: false
				});
			},

		

			

			submitBook() {
				//提交预约
				if (this.addressId == '' && this.addressIdSave == '') {
					util.showErrorToast('请输入服务地址');
					return;
				}
				if (this.timeIndex === '' || this.timeIndex < 0) {
					util.showErrorToast('请选择服务时间');
					return false;
				}

				// let date = this.dateList[this.dateIndex].bookdate;
				// let week = this.dateList[this.dateIndex].weekOfDay;
				// let time = this.timeList[this.timeIndex].begin + '-' + this.timeList[this.timeIndex].end;
				// console.log(date, week, time);
				console.log("appointmentTime",this.appointmentTime);
				let params = {
					detail_id: this.serviceId == null || this.serviceId == 'undefined' || this.serviceId == '' ? this
						.orderId : this.serviceId,
					date: this.appointmentTime.date,
					startTime: this.appointmentTime.time.split('-')[0],
					endTime: this.appointmentTime.time.split('-')[1],
					addressId: this.addressId == 0 || this.addressId == null ? this.addressIdSave : this.checkedAddress
						.id,
					// orderId: this.data.orderId,
					remark: this.remark + this.message
				};
				console.info(params);
				uni.showLoading({
					title: '加载中...'
				});
				util.request(api.ServiceOrderBookV2, params, 'GET').then((res) => {
					if (res.errno == 0) {
						uni.hideLoading();
						this.setData({
							isHide: true
						});
						uni.showToast({
							title: '预约成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/ucenter/orderDetail/orderDetail?id=' + this.orderId
							});
						}, 2000);
					} else {
						//               uni.showToast({
						//                   title: res.errmsg,
						//                   icon: 'none',
						// duration:2000
						//               });
						uni.hideLoading();
						this.setData({
							showErrorMsg: res.errmsg,
							showOverLay: true
						})
					}
				});
			},

		
			selectAddress() {
				//已经输入过地址的订单 不允许再次选择地址
				if (this.order.addressId > 0) {
					return;
				}
				uni.navigateTo({
					url: '/pages/ucenter/address/address'
				});
			},

			showRemark() {
				this.setData({
					remarkShow: true
				});
			},

			onRemarkClose() {
				this.setData({
					remarkShow: false
				});
			},

			confirmRemark() {
				this.setData({
					remarkShow: false
				});
			},

			bindMessageInput: function(e) {
				this.setData({
					message: e.detail.value
				});
			},

			bindPhone(e) {
				this.setData({
					mobile: e.detail.value
				});
			},

			copyOrder() {
				uni.setClipboardData({
					data: this.orderInfo.orderSn,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '订单编号复制成功',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},

			onAddressClose() {
				this.setData({
					addressShow: false
				});
			},

			onAddressClick() {
				//阻止事件冒泡，不要删
			},

			addressConfirm(e) {
				let address = e.currentTarget.dataset.address;
				this.setData({
					checkedAddress: address,
					addressShow: false
				});
			},

			addressSelect() {
				this.setData({
					addressShow: true
				});
			},

			showRemarkSelect() {
				this.setData({
					remarkPopupShow: true
				});
			},

			onRemarkPopupClose() {
				this.setData({
					remarkPopupShow: false
				});
			},

			onRemarkClick() {
				//阻止事件冒泡，不要删
			},

			remarkItemSelect(e) {
				let remark = e.currentTarget.dataset.remark;
				this.setData({
					remark: remark,
					remarkActive: remark
				});
			},

			remarkItemConfirm() {
				if (this.remarkActive === '') {
					util.showErrorToast('请选择备注');
					return false;
				}
				this.setData({
					remarkPopupShow: false
				});
			},

			bindinputMobile(event) {
				let address = this.address;
				address.tel = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputName(event) {
				let address = this.address;
				address.name = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputAddress(event) {
				let address = this.address;
				address.detail = event.detail.value.replace(/[,，]/g, '');
				this.setData({
					address: address
				});
				// return value.replace(/[,，]/g,'');
			},

			bindAddressDetail(event) {
				let address = this.address;
				address.addressname = event.detail.value.replace(/[,，]/g, '');
				this.setData({
					address: address
				});
			},

			submitAll() {
				if ((this.addressId == '' || this.addressId == null) && this.addressIdSave == '') {
					this.saveAddress();
				} else {
					this.submitBook();
				}
			},

			async saveAddress() {
				console.log(this.address);
				let address = this.address;
				if (address.addressname == '') {
					util.showErrorToast('请选择服务地址');
					return false;
				}
				if (address.name == '') {
					util.showErrorToast('请输入姓名');
					return false;
				}
				if (address.detail == '') {
					util.showErrorToast('请输入门牌号');
					return false;
				}
				if (this.gender == null || this.gender == '') {
					util.showErrorToast('请选择性别');
					return false;
				}
				if (address.tel == '') {
					util.showErrorToast('请输入手机号码');
					return false;
				}
				if (!check.isValidPhone(address.tel)) {
					util.showErrorToast('手机号不正确');
					return false;
				}
				let that = this;
				let addressString = address.detail == '' ? address.addressname : address.addressname + ',' + address
					.detail;
				uni.showLoading({
					title: '加载中...'
				});
				let res = await util.request(
					api.AddressSave, {
						gender: this.gender,
						id: address.id,
						name: address.name,
						tel: address.tel,
						province: address.province,
						city: address.city,
						county: address.county,
						areaCode: address.areaCode,
						addressDetail: addressString,
						isDefault: address.isDefault,
						lat: Number(address.lat).toFixed(5),
						lng: Number(address.lng).toFixed(5)
					},
					'POST'
				);
				uni.hideLoading();
				if (res.errno === 0) {
					that.setData({
						addressIdSave: res.data.id
					});
					that.submitBook();
				} else {
					uni.showModal({
						title: '提醒',
						showCancel: false,
						content: res.errmsg
					});
				}
			},

			goMap() {
				// const key = "JA2BZ-XGOEU-UNZVD-46G64-S6MYJ-6BBF4";
				//使用在腾讯位置服务申请的key
				// const key = '6TRBZ-XXC6F-BWWJB-N75ME-BQNOF-YKFQY';
				// const referer = '鲸致生活LifePlus';

				// const category = '小区,生活服务,娱乐休闲';
				// wx.navigateTo({
				//   url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category
				// });
				let that = this;
				// wx.authorize({
				//   scope: "scope.userLocation",
				//   success: (res) => {
				//     console.log("authorize", res);
				uni.chooseLocation({
					success: (location) => {
						console.log('chooseLocation success: ', location);
						console.log(`经度${location.longitude}，维度${location.latitude}`);
						console.log(location);
						if (location != null) {
							let address = that.address;
							address.lat = location.latitude;
							address.lng = location.longitude;
							address.addressname = location.address;
							that.setData({
								address: address
								// selectAddress:location.address
							});

							console.log(that.address);
							that.getAreaCode();
						}
					},
					fail: (err) => {
						console.log('chooseLocation fail: ' + err.errMsg);
					}
				});
				//   },
				//   fail: () => {
				//     wx.openSetting({});
				//   },
				// });
			},

			goMap() {
				console.log('gomap');
				app.globalData.mapSelectFinish = false;
				if (this.address.lng && this.address.lat) {
					let city = this.address.city == '市辖区' ? this.address.province : this.address.city;
					uni.navigateTo({
						url: '/pages/map/mapContent/mapContent?lng=' + this.address.lng + '&lat=' + this.address
							.lat + '&addressname=' + this.address.addressname + '&city=' + city
					});
				} else {
					uni.navigateTo({
						url: '/pages/map/mapContent/mapContent'
					});
				}
			},

			maleSelect() {
				this.setData({
					gender: 1
				});
			},

			femaleSelect() {
				this.setData({
					gender: 2
				});
			},

			getAreaCode() {
				let param = {
					location: this.address.lng + ',' + this.address.lat,
					extensions: 'all',
					key: api.gdKey,
					radius: 3000
				};
				uni.request({
					url: api.gdUrl,
					data: param,
					method: 'GET',
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log(res);
						if (res.data.infocode == '10000') {
							if (res.data.info == 'OK') {
								// let ad_info = res.data.result.ad_info;
								// let areaCode = res.data.result.ad_info.adcode;
								let regeocode = res.data.regeocode.addressComponent;
								let cityName = regeocode.city == null || regeocode.city.length == 0 ? regeocode
									.province : regeocode.city;
								let district = regeocode.district == null || regeocode.district.length == 0 ?
									'' : regeocode.district;
								this.setData({
									['address.areaCode']: regeocode.adcode,
									['address.province']: regeocode.province,
									['address.city']: cityName,
									['address.county']: district
									// ['address.addressname']:res.data.result.address
								});
							} else {
								uni.showToast({
									title: '获取地区码失败',
									icon: 'none',
									duration: 3000
								});
							}
						} else {
							uni.showToast({
								title: '获取地区码失败',
								icon: 'none',
								duration: 3000
							});
						}
					},
					fail: function(err) {
						reject(err);
					}
				});
			},

			goAddAddress() {
				uni.navigateTo({
					url: '/pages/ucenter/addressAdd/addressAdd?id=0'
				});
			},

			noonTab(e) {
				let noon = e.currentTarget.dataset.noon;
				this.setData({
					timeIndex: -1,
					noonType: noon,
					selectTimeValue: ''
				});
				let period = this.dateList[this.dateIndex].period;
				let current = this.noonType == 1 ? '上午' : '下午';
				let list = period.filter((item) => {
					return item.ofTime == current;
				});
				this.setData({
					timeList: list
				});
			},
			onClickHide() {
				this.setData({
					showOverLay: false
				})
			},
			toService(){
				uni.navigateTo({
					url:"/pages/im/im"
				})
			}
		}
	};
</script>
<style>
	.container {
		padding: 30rpx 24rpx 180rpx;
	}

	view,
	text {
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	.address-block {
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.address-wrapper {
		width: 610rpx;
		height: 90rpx;
	}

	.address-block .tips {
		display: flex;
		align-items: center;
		height: 30rpx;
	}

	.tips image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.tips view {
		line-height: 30rpx;
		font-size: 30rpx;
	}

	.address-block .detail {
		padding-left: 38rpx;
		margin-top: 18rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		overflow: hidden;
		height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.arrow-img {
		width: 14rpx;
		height: 24rpx;
	}

	.product-block {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin: 24rpx 0;
	}

	.product-block .title {
		height: 88rpx;
		line-height: 78rpx;
	}

	.profuct-info {
		height: 190rpx;
		display: flex;
		align-items: flex-start;
	}

	.product-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.info-right {
		/* padding-top: 10rpx; */
		flex: 1;
	}

	.info-main {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
		/* margin-bottom: 58rpx; */
	}

	.info-right .sku-name {
		color: #666666;
		font-size: 24rpx;
		margin: 10rpx 0;
		height: 34rpx;
		line-height: 34rpx;
		display: flex;
		justify-content: space-between;
	}

	.product-name {
		line-height: 40rpx;
		font-size: 28rpx;
		/* padding-left: 20rpx;
    text-indent: -16rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 328rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.info-main .price {
		color: rgba(0, 0, 0, 0.9);
		font-size: 18rpx;
		font-weight: bold;
	}

	.info-right .other-info {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 34rpx;
	}

	.appoint-main-module {
		margin-top: 24rpx;
	}

	.appoint-block {
		height: 132rpx;
		line-height: 132rpx;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 0rpx 24rpx 0rpx;
	}

	.appoint-block .title {
		width: 136rpx;
		border-bottom: 2rpx solid #fff;
		font-size: 26rpx;
		font-weight: bold;
		z-index: 9;
		height: 72rpx;
		line-height: 72rpx;
	}

	.appoint-block .title text {
		color: #f00;
	}

	.appoint-time {
		flex: 1;
		color: #acadb1;
		padding-left: 4rpx;
		font-size: 24rpx;
	}

	.appoint-timed {
		flex: 1;
		padding-left: 4rpx;
		color: #333;
		font-size: 26rpx;
	}

	.appoint-block .arrow-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
	}

	.appoint-btn {
		position: fixed;
		bottom: 56rpx;
		left: 50rpx;
		right: 50rpx;
		height: 90rpx;
		width: 690rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background: #d77958;
		font-size: 36rpx;
	}

	.appoint-overlay-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

	.remark-text {
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 486rpx;
		padding-left: 40rpx;
		margin: 0 10rpx 0 20rpx;
		text-align: right;
	}

	.remark-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 860rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 40rpx 30rpx 50rpx;
		z-index: 9999;
	}

	.remark-popup .title {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.remark-textarea {
		width: 690rpx;
		height: 240rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx 36rpx 36rpx 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		margin: 30rpx 0 330rpx;
		box-sizing: border-box;
	}

	.remark-popup .btn {
		width: 690rpx;
		height: 100rpx;
		background: #00b9ff;
		border-radius: 50rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}

	.address-item {
		display: flex;
		min-height: 136rpx;
		background: #fff;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.address-item.address-empty {
		line-height: 75rpx;
		text-align: center;
	}

	.address-item .map-icon {
		width: 28rpx;
		height: 30rpx;
		margin: 6rpx 10rpx 0 0;
	}

	.address-box .l {
		width: 125rpx;
		height: 100%;
	}

	.address-box .l .name {
		margin-left: 6.25rpx;
		margin-top: -7.25rpx;
		display: block;
		width: 125rpx;
		height: 43rpx;
		line-height: 43rpx;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.address-box .l .default {
		margin-left: 6.25rpx;
		display: block;
		width: 62rpx;
		height: 33rpx;
		border-radius: 5rpx;
		border: 1px solid #b4282d;
		font-size: 20.5rpx;
		text-align: center;
		line-height: 29rpx;
		color: #b4282d;
	}

	.address-box .m {
		flex: 1;
	}

	.address-box .mobile {
		display: block;
		height: 29rpx;
		line-height: 29rpx;
		margin-bottom: 6.25rpx;
		font-size: 26rpx;
	}

	.address-box .address {
		display: block;
		/* height: 30rpx; */
		line-height: 32rpx;
		font-size: 30rpx;
		margin: 0 0 16rpx 0;
	}

	.address-bottom {
		color: #999;
		line-height: 28rpx;
		height: 28rpx;
		font-size: 26rpx;
	}

	.address-bottom .user-name {
		margin: 0 32rpx 0 0;
	}

	.address-box .r {
		width: 30rpx;
		height: 90rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.address-box .r image {
		width: 14rpx;
		height: 24rpx;
	}

	.popup-wrapper view {
		color: #888;
		font-size: 30rpx;
	}

	.popup-content {
		flex: 1;
	}


	.time-select-right {
		flex: 1;
		height: 900rpx;
		overflow-y: hidden;
	}

	.time-select-left-item {
		height: 108rpx;
		display: flex;
		flex-direction: column;
		padding: 4rpx 0;
	}

	.date-line-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.time-select-left-item .date-msg {
		height: 36rpx;
		line-height: 36rpx;
		color: #888;
		font-size: 24rpx;
	}

	.time-select-left-item .date-msg.avail-date {
		color: #3fa10d;
		font-weight: bold;
	}

	.popup-wrapper .popup-content .current-date {
		color: #d77958;
		font-weight: bold;
	}

	view.popup-wrapper .time-select-right-item {
		line-height: 104rpx;
		height: 104rpx;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		padding: 0 24rpx;
		justify-content: center;
	}

	.time-select-right-item view {
		color: #6d7278;
	}

	view.popup-btn-wrapper {
		margin: 20rpx 0 0;
		padding: 0 24rpx 20rpx;
	}

	view.popup-btn-wrapper button>view {
		color: #fff;
	}

	view.popup-wrapper .date-tag {
		color: #d77958;
		height: 44rpx;
		line-height: 42rpx;
		width: 76rpx;
		border: 2rpx solid #d77958;
		border-radius: 44rpx;
		text-align: center;
		font-weight: normal;
		font-size: 22rpx;
		display: inline-block;
		margin-left: 8rpx;
	}

	view.popup-wrapper .full-time {
		color: #d77958;
		font-size: 24rpx;
		margin: 0 0 0 20rpx;
		height: 44rpx;
		line-height: 44rpx;
		float: right;
		padding-right: 40rpx;
	}

	.first-appoint-date-item {
		height: 108rpx;
		display: flex;
		align-items: center;
		padding: 0 0 0 240rpx;
	}

	.first-time-selected {
		margin: 0 0 0 60rpx;
	}

	.select-week-times {
		border-top: 1rpx solid #ddd;
	}

	.week-select-left {
		flex: 1.2;
	}

	.week-select-left>view.time-select-left-item {
		padding: 0 0 0 60rpx;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: row;
		padding: 10rpx 0 0 60rpx;
	}

	.week-select-left>view.time-select-left-item .week-str {
		padding: 12rpx 0 0 0;
	}

	view.popup-wrapper view.select-num-tag {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #d77958;
		border-radius: 34rpx;
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		margin: 0 0 0 6rpx;
	}

	.popup-content-special {
		position: relative;
	}

	.popup-title-special {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		background: #fff;
	}

	.popup-content-special {
		height: 900rpx;
		margin-top: 116rpx;
	}

	.popup-content-special .time-select-left {
		height: 900rpx;
		overflow-y: scroll;
	}

	.stock-text {
		font-size: 20rpx;
		font-weight: normal;
		color: #888;
	}

	.zero-stock {
		color: #ccc;
	}

	.appoint-overlay-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

	
	view.popup-wrapper {
		
		color: #333;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9999;
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		overflow: hidden;
	}

	/* view.popup-wrapper view.confirm-btn {
		background: #d77958;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 88rpx;
		text-align: center;
		color: #fff;
	} */

	.go-pay-wrapper {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.go-pay-wrapper view {
		background: #d77958;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 88rpx;
		text-align: center;
		color: #fff;
	}

	.appoint-tabs-wrapper {
		height: 88rpx;
		display: flex;
		align-items: center;
		line-height: 88rpx;
		justify-content: space-around;
		background: #fff;
	}

	.appoint-tab-item.active {
		color: #d77958;
		border-bottom: 4rpx solid #d77958;
	}

	.order-info {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 20rpx 24rpx;
	}

	.order-info .order-top {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 6rpx;
	}

	.order-top view {
		font-size: 26rpx;
		color: #333;
	}

	.order-top view.topic {
		color: #666;
		margin-right: 16rpx;
	}

	.order-top .copy-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}

	.order-bottom {
		border-top: 2rpx solid #e0e0e0;
		margin-top: 14rpx;
		padding-top: 16rpx;
	}

	.order-price,
	.coupon-price {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 6rpx;
		justify-content: space-between;
	}

	.order-price view,
	.coupon-price view {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.9);
		font-weight: bold;
	}

	.order-price view.topic,
	.coupon-price view.topic {
		color: #666;
		margin-right: 16rpx;
		font-weight: normal;
	}

	.order-bottom .real-price {
		display: flex;
		align-items: center;
		height: 36rpx;
		justify-content: flex-end;
		font-size: 26rpx;
		font-weight: bold;
	}

	.order-bottom .real-price text {
		color: #ff004e;
		font-size: 26rpx;
	}

	/* 顶部地址 */
	.address-select {
		padding: 22rpx 24rpx 22rpx 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		min-height: 132rpx;
	}

	.address-select .map-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.address-main {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-main .main-line {
		display: flex;
		height: 44rpx;
		margin-bottom: 4rpx;
		align-items: center;
	}

	.main-line view {
		color: #333333;
		font-size: 32rpx;
	}

	.main-line view.phone {
		color: #999999;
		font-size: 24rpx;
		margin-left: 14rpx;
	}

	.customer-info .customer-address {
		color: #666666;
		line-height: 40rpx;
	}

	.address-select .arrow-img {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
	}

	/* 地址选择 */
	.appoint-overlay-wrapper.address-overlay {
		display: flex;
		align-items: flex-end;
	}

	.address-popup {
		width: 750rpx;
		padding: 0 24rpx 0rpx;
		background: #ffffff;
		border-radius: 56rpx 56rpx 0 0;
	}

	.address-popup .title {
		font-weight: 600;
		color: #191919;
		font-size: 28rpx;
		height: 122rpx;
		line-height: 122rpx;
		text-align: center;
	}

	.address-list {
		height: 720rpx;
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.address-popup .add-address-btn {
		width: 654rpx;
		margin: 40rpx 24rpx 40rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border: #d77958 1rpx solid;
		font-size: 36rpx;
		text-align: center;
		color: #d77958;
		line-height: 90rpx;
	}

	.address-item {
		width: 702rpx;
		display: flex;
		align-items: center;
		min-height: 132rpx;
		border-radius: 24rpx;
		border: 2rpx solid #e3e3e3;
		margin-bottom: 30rpx;
	}

	.address-item .arrow-img {
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
	}

	.address-item .map-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	/* 选择备注 */
	.appoint-overlay-wrapper.remark-overlay {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.remark-select {
		width: 750rpx;
		padding: 0 24rpx 56rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.remark-select .title {
		font-weight: 600;
		color: #191919;
		font-size: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.remark-item .remark-value {
		color: #191919;
		font-size: 26rpx;
		font-weight: bold;
		flex: 1;
		text-align: left;
	}

	.remark-list .remark-item {
		height: 84rpx;
		display: flex;
		border-bottom: 2rpx solid #e0e0e0;
		align-items: center;
	}

	.remark-item .radio-img {
		width: 26rpx;
		height: 26rpx;
	}

	.remark-conf-btn {
		width: 652rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 90rpx;
		border: 4rpx solid #d77958;
		text-align: center;
		font-size: 36rpx;
		color: #d77958;
		margin: 0 auto;
		margin-top: 54rpx;
	}

	/* 地址输入 */
	.add-address .add-form {
		background: #fff;
		width: 702rpx;
		border-radius: 25rpx;
		padding: 4rpx 24rpx 24rpx;
	}

	.add-address .form-item {
		height: 78rpx;
		display: flex;
		align-items: center;
	}

	.add-address .input {
		flex: 1;
		/* height: 78rpx; */
		/* overflow: hidden; */
		font-size: 26rpx;
		color: #333;
		padding-top: 24rpx;
	}

	.add-address .label {
		font-size: 26rpx;
		font-weight: bold;
		width: 160rpx;
		text-align: left;
		color: rgba(0, 0, 0, 0.9);
	}

	.add-address .label text {
		color: #ff0000;
	}

	.add-address .content {
		border-bottom: 2rpx solid #e0e0e0;
		/* height: 88rpx; */
		align-content: center;
		flex: 1;
		display: flex;
		align-items: center;
		padding-bottom: 8rpx;
		height: 78rpx;
	}

	.gender-wrapper image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.gender-wrapper {
		display: flex;
		/* align-items: center;
     */

		height: 78rpx;
		justify-content: space-between;
		width: 220rpx;
	}

	.male,
	.female {
		display: flex;
		align-items: center;
		height: 78rpx;
		padding-top: 24rpx;
	}

	.male text,
	.female text {
		color: #acadb1;
		font-size: 24rpx;
	}

	.notice-block {
		background: #fff;
		border-radius: 24rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 24rpx;
	}

	.notice-title {
		font-weight: bold;
		font-size: 26rpx;
		line-height: 60rpx;
	}

	.notice-item {
		display: flex;
		align-items: flex-start;
	}

	.notice-index {
		width: 36rpx;
	}

	.notice-item view {
		font-size: 26rpx;
		line-height: 40rpx;
		color: #666;
	}

	.notice-item view:last-child {
		flex: 1;
		text-align: justify;
	}

	.btn-service {
		margin-left: 105rpx;
		border-radius: 55rpx;
		color: #d77958;
		border: #d77958 1rpx solid;
		width: 438rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		font-size: 29rpx;
	}
	.appoint-server{
			border-radius: 18rpx;
			    background-color: #fff;
			    height: 80rpx;
			    line-height: 80rpx;
			    padding: 0 24rpx;
			    color: #999;
			    display: flex;
			    margin-top: 28rpx;
			    justify-content: space-between;
				align-items: center;
		}
	.appoint-server .server-tip{
		color: #999;
			font-size: 26rpx;
			flex: 1;
			text-align: left;
	}
	.appoint-server .radio-img{
		width: 26rpx;
		height: 26rpx;
	}
</style>