jzmall_uni/pages/ucenter/appointOrder/appointOrder.vue

<template>
	<view class="container">
		<!-- 快速预约 -->
		<view v-if="fastAppointShow" class="fast-appoint">
			<view class="fast-line">
				<view class="fast-text">使用上次预约信息快速填写预约信息</view>
				<view class="fast-btn" @tap="fastInput">一键填写</view>
			</view>
			<image src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-delete.png" class="close-fast"
				@tap="closeFastAppoint"></image>
		</view>
		<!-- 步骤 -->
		<view class="step-block">
			<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-01.png" class="step-img">
			</image>
			<view class="step-right">
				<view class="step-title">填写上门信息</view>
				<view class="step-tips">服务所需的地址、电话等信息</view>
			</view>
		</view>
		<!-- 地址 -->
		<view class="order-address">
			<!-- 有地址，选择 -->
			<view  class="address-select" @tap="addressSelect">
				<!-- <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png" class="map-img"></image> -->

				<view class="address-main">
					<view class="customer-address">
						<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-map-yj.png"
							class="map-img"></image>
						<view>{{ checkedAddress.addressDetail }}</view>
					</view>
					<view class="main-line">
						<view>{{ checkedAddress.name }}</view>
						<view class="phone">{{ checkedAddress.tel }}</view>
					</view>

				</view>
				<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-arrow-blue.png"
					class="arrow-img"></image>
			</view>
			<!-- 没地址，输入 -->
	<!-- 		<view v-else class="address-input-module add-address">
				<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: 0 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="aspectFit" v-if="gender == 2"></image>
									<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png"
										mode="aspectFit" 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="aspectFit" v-if="gender == 1"></image>
									<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png"
										mode="aspectFit" 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="step-block">
			<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-02.png" class="step-img">
			</image>
			<view class="step-right">
				<view class="step-title">预约服务时间</view>
				<view class="step-tips">选择您想要的服务时间</view>
			</view>
		</view>
		<!-- <view style="color: red; font-size: 24rpx; margin-top: 20rpx">临近春节，服务力紧张，我们会尽量为您安排。如果不能准时服务，支持全额退款</view> -->
		<!-- 预约服务时间 -->
		<view class="appoint-main-module">
			<view class="appoint-block appoint-block-special" @tap="showAppoint">
				<view class="appoint-time" v-if="appointDate == ''">服务者将在该时段内上门</view>
				<view class="appoint-timed" v-else>{{ appointDate }}</view>
				<view v-if="appointDate!= ''&&futureDays>=1" class="future-days">
					距离今日 <text>{{futureDays}}</text> 天
				</view>

			</view>
			<image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-arrow-blue.png" mode="aspectFit" class="arrow-img">
			</image>

		</view>

		<!-- 步骤 -->
		<view class="step-block">
			<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-03.png" class="step-img">
			</image>
			<view class="step-right">
				<view class="step-title">填写备注</view>
				<view class="step-tips">请提前告知需要我们注意的信息</view>
			</view>
		</view>
		<view class="appoint-main-module">
			<view class="appoint-block" @tap="showRemarkSelect">
				<!-- <view class="title">选择备注</view> -->
				<view class="appoint-time" v-if="remark == ''">请选择备注</view>
				<view class="appoint-timed" v-else>{{ remark }}</view>
				<image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-arrow-blue.png" mode="aspectFit"
					class="arrow-img"></image>
			</view>
		</view>
		<view class="textarea-wrapper">


			<textarea placeholder="其他备注请填写" class="remark-extra" :value="message"
				placeholder-style="font-size:24rpx;color: #ACADB1;" @input="bindMessageInput" auto-height
				maxlength="200" />

		</view>


		<!-- 商品 -->
	<!-- 	 <view class="product-block">
            <view class="product-detail">
                <view class="profuct-info">
                    <image mode="aspectFit" class="product-img" :src="orderInfo.picUrl"></image>
                    <view class="info-right">
                        <view class="info-main">
                            <view class="product-name">{{ orderInfo.goodsName }}</view>
                            <view class="price">
                                ¥
                                <text style="font-size: 24rpx">{{ orderInfo.actualPrice }}</text>
                            </view>
                        </view>
                        <view class="sku-name">规格:{{ orderInfo.skuName }}</view>
                        <view class="other-info">服务{{ orderInfo.serviceTimes }}次</view>
                    </view>
                </view>
            </view>
        </view> -->
		<!-- 订单信息 -->
		<!-- <view class="order-info">
            <view class="order-top">
                <view class="topic">订单编号：</view>
                <view>
                    {{ dyOrderId }}
                </view>
                <image mode="aspectFit" class="copy-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" @tap="copyOrder"></image>
            </view>
            <view class="order-top">
                <view class="topic">抖音券号：</view>
                <view>
                    {{ certificateId }}
                </view>
            </view>
            <view class="order-top">
                <view class="topic">订单金额：</view>
                <view>¥{{ amount / 100 }}</view>
            </view>
        </view> -->
		<!-- 提交按钮 -->
		<!-- <view class="appoint-btn" bindtap="submitAll" wx:if="{{!isHide}}">
    立即预约
  </view> -->
		<view class="appoint-btn" @tap="submitAll">立即预约
			<label class="tooltip">家净心情爽 即刻预约</label>
			<label class="tooltip-triangle"></label>
		</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://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.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">{{ 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>

		<!-- 备注弹框 -->
		<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://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.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>
		<contact-mov :pageX="300" :pageY="360"></contact-mov>


	</view>
</template>

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

				addressId: '',

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

				addressList: [],
				addressShow: false,
				remark: '',
				remarkPopupShow: false,
				remarkList: ['上门前提前电话联系', '请准时到达', '请自带打扫工具', '主要打扫厨房&卫生间', '家里有宠物'],
				remarkActive: '',
				serviceId: '',
				message: '',
				remarkShow: false,
				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: '',
				voucherId: '',
				quickBookInfo: {
					bookTime: '',
					futureDays: '',
					quickBookDetailId: '',
					customerRemark: '',
				},
				fastAppointShow: false,

			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			console.log("options",options);
			if (options.serviceId) {
				this.setData({
					serviceId: options.serviceId
				});
			}
			if (options.orderId) {
				this.setData({
					orderId: options.orderId
				});
			}
			if (options.voucherId) {
				this.setData({
					voucherId: options.voucherId
				});
			}
			if (options.quickBookOrderId) {
				this.setData({
					orderId: options.quickBookOrderId,
					fastAppointShow: true
				});
				let quickBookInfo = app.globalData.quickBookInfo;
				this.setData({
					quickBookInfo: quickBookInfo,
					serviceId: quickBookInfo.quickBookDetailId,
					// appointDate:quickBookInfo.bookTime,
					// futureDays:quickBookInfo.futureDays,
					// message:quickBookInfo.customerRemark
				})

			}
			// this.getOrderDetail();
			// this.getServiceDetail();
			app.globalData.mapSelectFinish = false;
		},
		onShow: function() {
			util.addLog(1, 6, 1, {
				orderId: this.orderId
			});
			this.getOrderDetail();
			console.log(this.voucherId)
			if (this.voucherId && this.voucherId != "undefined" && this.voucherId != '') {
				this.getEncryptData();
			}
			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
				});

				console.log(this.address);
				this.getAreaCode();
			}
		},
		onHide: function() {
			util.addLog(2, 6, 2, {
				orderId: this.orderId
			});
		},
		methods: {
			setTimeshow(params){
				this.setData({
					choosePopup:false,
					appointDate:params.appointDate,
					futureDays:params.futureDays,
					appointmentTime:params.Time
				})
				console.log('params',params);
			},
			fastInput() {
				this.setData({
					appointDate: this.quickBookInfo.bookTime,
					futureDays: this.quickBookInfo.futureDays,
					message: this.quickBookInfo.customerRemark,
					fastAppointShow: false
				});
			},
			getEncryptData() {
				let orderId = this.orderId;
        // #ifdef MP-ALIPAY
				my.ap.prepareUseCertificate({
					certificateId: this.voucherId,
					success: function(res) {
						console.log(res);
						let encryptedCode = res.encryptedCode;
						util.request(api.alipayEncryptedCode, {
							orderId: orderId,
							encryptedCode: encryptedCode
						}, 'GET').then((res) => {
							console.log(res);
						})
					},
					fail: function(err) {
						console.log(err);
					}
				});
        // #endif
			},
			getOrderDetail: function() {
				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(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,
							// orderGoods: res.data.orderGoods,
							// handleOption: res.data.orderInfo.handleOption,
							// expressInfo: res.data.expressInfo
						});

						let that = this;
						if (res.data.dyDetails.length > 0) {
							let tempdetail = null;
							res.data.dyDetails.forEach(f => {
								if (f.id == that.serviceId) {
									tempdetail = f;
								}
							});

							console.log("tempdetail", tempdetail)
							if (tempdetail != null && tempdetail.bookTime != null) {
								console.log(tempdetail.bookTime.substring(0, 10));
								let futureDays = (((new Date(tempdetail.bookTime.substring(0, 10))).getTime() -
									(new Date()).getTime()) / (1000 * 24 * 3600));
								this.setData({
									appointDate: tempdetail.bookTime,
									futureDays: Math.ceil(futureDays)
								});
							}

						}

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

			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]
							});
						}
					}
				});
			},

			getServiceDetail: function() {
				util.request(api.ServiceDetail, {
					order_id: this.orderId
				}).then((res) => {
					if (res.errno === 0) {
						let jzOrderBookDetails = res.data.jzOrderBookDetails;
						let unusedSerList = jzOrderBookDetails.filter((item) => {
							return item.status === 0 || item.status == 1;
						});
						let usedSerList = jzOrderBookDetails.filter((item) => {
							return item.status == 3 || item.status == 4;
						});
						this.setData({
							aftersaleStatus: res.data.order ? res.data.order.aftersaleStatus : '',
							noAppoint: res.data.noAppoint,
							goods: res.data.goods,
							orderBook: res.data.orderBook,
							jzOrderBookDetails: jzOrderBookDetails,
							activeTab: 1,
							unusedSerList: unusedSerList,
							usedSerList: usedSerList,
							serList: unusedSerList,
							orderChannel: res.data.orderChannel,
							addressId: res.data.order.addressId,
							addressName: res.data.order.address,
							mobile: res.data.order.mobile,
							product: res.data.product
						});
					}
				});
			},

			showAppoint(e) {
				// let status = e.currentTarget.dataset.status;
				// if (status == 1) {
				//   let time = e.currentTarget.dataset.time;
				//   let str = time.substr(0, 16).replace(/-/g, '/');
				//   let isNear = new Date(str).getTime() - new Date().getTime() - 2 * 60 * 60 * 1000;
				//   console.log(isNear);
				//   if (isNear < 0) {
				//     wx.showToast({
				//       title: '服务时间小于2小时，不能修改预约',
				//       icon: 'none',
				//       duration: 2000
				//     });
				//     return false;
				//   }
				// }
				// if (this.data.order.aftersaleStatus == 1 || this.data.order.aftersaleStatus == 2) {
				//   util.showErrorToast("退款中，无法预约");
				//   return;
				// }
				//  console.info(this.data.addressName)
				// if (this.data.addressId == 0||this.data.addressName==null||this.data.addressName=='') {
				//   util.showErrorToast("请输入服务地址");
				//   return;
				// }
				if (this.appointDate != '' && this.dateList.length > 0) {
					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,
						goodsId: this.orderInfo.goodsId,
						serviceDuration: this.orderInfo.serviceDuration,
						addressId: this.addressId == 0 ? this.addressIdSave : this.checkedAddress.id,
						productId: this.orderInfo.productId,

					};
					// this.getDayTime(params);
					this.setData({
						timeParams:params
					})
					console.log('123456',this.timeParams);

				}

				// this.setData({
				//   choosePopup: true,

				//   noonType: 1,
				//   timeIndex: 0
				// });

				// if (this.data.dateList[this.data.dateIndex].name == '今天' ) {
				//   this.setData({
				//     noonType: 2,
				//   })
				// }
				// this.getTimeList();
			},

			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: ''
					});
				}
			},

			getDayStock() {
				if (this.dateIndex < 0) {
					return false;
				}
				let params = {
					day: this.dateList[this.dateIndex].date,
					goodsId: this.orderInfo.goodsId,
					addressId: this.addressId == 0 ? this.addressIdSave : this.checkedAddress.id,
					productId: this.orderInfo.productId,
					orderId: this.orderInfo.id,
					serviceDuration: this.orderInfo.serviceDuration
				};
				uni.showLoading({
					title: '加载中'
				});
				util.request(api.EveryDayStock, params, 'GET')
					.then((res) => {
						uni.hideLoading();
						if (res.errno == 0) {
							this.setData({
								timeList: res.data
							});
							let validList = this.timeList.filter((item) => {
								return item.stock > 0;
							});
							if (validList.length > 0) {
								this.setData({
									timeIndex: validList[0].id - 1
								});
							} else {
								this.setData({
									timeIndex: ''
								});
							}
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
							this.setData({
								timeList: [],
								timeIndex: ''
							});
						}
					})
					.catch((err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						});
						this.setData({
							timeList: [],
							timeIndex: ''
						});
					});
			},

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

			getDayTime(params) {
				uni.showLoading({
					title: '加载中'
				});
				util.request(api.everyDayTime, params, 'GET')
					.then((res) => {
						uni.hideLoading();
						if (res.errno == 0) {
							console.log("时间", res.data);
							this.setData({
								dateList: res.data,
								dateIndex: 0,
								timeIndex: -1,
								noonType: 1
							});
							let period = res.data[0].period;
							let list = period.filter((item) => {
								return item.ofTime == '上午';
							});
							this.setData({
								timeList: list
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
							this.setData({
								timeList: [],
								timeIndex: ''
							});
						}
					})
					.catch((err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						});
						this.setData({
							timeList: [],
							timeIndex: ''
						});
					});
			},

			dateCheck(e) {
				let index = e.currentTarget.dataset.index;
				let date = e.currentTarget.dataset.date;
				let week = e.currentTarget.dataset.week;
				let isbook = e.currentTarget.dataset.isbook;
				this.setData({
					dateIndex: index
				});
				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
				});
				let isNoTime = list.every((item) => {
					return item.timeMsg && item.timeMsg != null;
				});
				if (isNoTime) {
					this.setData({
						timeIndex: -1,
						selectTimeValue: ''
					});
				}
			},

			timeCheck(e) {
				let index = e.currentTarget.dataset.index;
				// if (e.currentTarget.dataset.stock == 0) {
				//   wx.showToast({
				//     title: '所选时间无库存，请选择其他时间',
				//     icon: 'none',
				//     duration: 2000
				//   });
				//   return;
				// }
				let msg = e.currentTarget.dataset.msg;
				if (msg == null || msg == '') {
					let time = this.timeList[index].begin.split(':')[0];
					this.setData({
						timeIndex: index,
						selectTimeValue: Number(time)
					});
				}
				// this.setData({
				//   timeIndex: index,
				//   selectTimeValue: this.data.timeList[index].value
				// });
			},

			submitBook() {

				//提交预约
				if (this.addressId == '' && this.addressIdSave == '') {
					util.showErrorToast('请输入服务地址');
					return;
				}
				if ((this.timeIndex === '' || this.timeIndex < 0) && (this.appointDate == null || this.appointDate.length <
						18)) {
					util.showErrorToast('请选择服务时间');
					return false;
				}
				util.addLog(1, 6, 21, {
					orderId: this.orderId
				});

				let params = {};
				if (this.timeIndex === '' || this.timeIndex < 0) {
					//没有修改预约时间，自动填充原时间
					params = {
						detail_id: this.serviceId ? this.serviceId : this.orderId,
						// bookId: this.data.bookId,
						date: this.appointDate.substring(0, 10),
						startTime: this.appointDate.substring(11, 16),
						endTime: this.appointDate.substring(17, 22),
						addressId: (this.addressId == null || this.addressId == 0) ? this.addressIdSave : this
							.checkedAddress.id,
						// orderId: this.data.orderId,
						remark: this.remark + this.message
					};
				} else {
					let date = this.appointmentTime.date;
					let week = this.appointmentTime.week;
					let time = this.appointmentTime.time;
					console.log(date, week, time);
					params = {
						detail_id: this.serviceId ? this.serviceId : this.orderId,
						// bookId: this.data.bookId,
						date: date,
						startTime: time.split('-')[0],
						endTime: time.split('-')[1],
						addressId: (this.addressId == null || this.addressId == 0) ? this.addressIdSave : this
							.checkedAddress.id,
						// orderId: this.data.orderId,
						remark: this.remark + this.message
					};
				}

				// if (this.data.mobile == null || this.data.mobile.length != 11) {
				//   util.showErrorToast("请填写手机号码");
				//   return;
				// }
				if (this.remark) {
					util.addLog(1, 6, 20, {
						orderId: this.orderId
					});

				}

				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'
						});
						// util.showErrorToast(res.errmsg);
					}
				});
			},

			confirmTime() {
				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;
				let futureDays = (((new Date(date)).getTime() - (new Date()).getTime()) / (1000 * 24 * 3600));

				futureDays = Math.ceil(futureDays);
				this.setData({
					choosePopup: false,
					appointDate: date + ' ' + week + ' ' + time,
					futureDays: futureDays
				});
				util.addLog(1, 6, 19, {
					orderId: this.orderId
				});
			},

			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() {
				console.log(this.addressId);
				console.log(this.addressIdSave);
				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 == 0) {
				//   util.showErrorToast('请选择服务地址');
				//   return false;
				// }
				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;
				}
				util.addLog(1, 6, 18, {
					orderId: this.orderId
				});
				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
					});
					setTimeout(() => {
						that.submitBook();
					}, 1000)

				} 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;
				// wx.navigateTo({
				//   url: '/pages/map/mapContent/mapContent',

				// });
				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;
				console.log("noon", noon);
				this.setData({
					timeIndex: -1,
					noonType: noon,
					selectTimeValue: ''
				});
				console.log("noon1", noon);
				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
				});
			},
			closeFastAppoint() {
				this.setData({
					fastAppointShow: false
				})
			},
		}
	};
</script>
<style>
	.container {
		padding: 0 0 180rpx;
		background: linear-gradient(180deg, rgb(240, 234, 226) 0%, rgb(239, 238, 237) 100%);
	}

	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: 24rpx;
		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 {
		height: 156rpx;
		border-radius: 14rpx;
		background: #ffffff;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 0 30rpx;
	}

	.textarea-wrapper {
		min-height: 156rpx;
		border-radius: 14rpx;
		background: #ffffff;
		padding: 10rpx 24rpx;
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 10rpx 30rpx;
	}

	.appoint-block {
		/* height: 74rpx; */
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* border-bottom: 2rpx solid #e0e0e0; */
	}

	.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: 26rpx;
	}

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

	.appoint-block.appoint-block-special {
		flex-direction: column;
		align-items: flex-start;
	}

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

	.future-days {
		height: 38rpx;
		font-size: 26rpx;
		color: #999;
		margin: 0 8rpx;
	}

	.future-days text {
		color: #09AFFF;
	}

	.remark-extra {
		width: 642rpx;
		font-size: 26rpx;
		/* height:130rpx; */
	}

	.appoint-btn {
		position: fixed;
		bottom: 56rpx;
		left: 40rpx;
		right: 40rpx;
		height: 90rpx;
		width: 670rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
		font-size: 30rpx;
	}

	.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;
	}

	.popup-title {
		/* height: 96rpx;
		line-height: 96rpx;
		text-align: center; */
		/* border-bottom: 1rpx solid #ddd; */
	}

	/*
	.popup-content {
		display: flex;
	} */
	.appointment-tips {
		display: flex;
		justify-content: space-between;
		width: 178px;
		/* margin: 170px auto 10px; */
		position: absolute;
		bottom: 40px;
		left: calc(50% - 89px);
	}

	.appointment-tips view span {
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background-color: #EDF8FD;
		display: inline-block;
		margin-right: 10rpx;
	}

	.appointment-tips view .selected {
		background-color: #00B4FE;
	}

	.appointment-tips view .no-appointment {
		background-color: #ccc;
	}

	.appointment-tips view text {
		color: #00B4FE;
		font-size: 24rpx;
	}

	.time-select-bottom {
		width: 100vw;
		background-color: #EDF8FD;
		height: 54rpx;
		font-size: 22rpx!important;
		color: #00b4fe!important;
		line-height: 54rpx;
		padding-left: 30rpx;
		position: absolute;
		bottom: 0;
	}

	.time-select-left {
		/* flex: 2; */
		border-right: 1rpx solid #ddd;
		padding: 0 8rpx 0 20rpx;
		width: 370rpx;
	}

	.time-select-right {
		flex: 1;
		/* padding: 0 8rpx; */
		height: 900rpx;
		overflow-y: hidden;
	}

	.scroll-view_H {
		white-space: nowrap;
		/* 确保子元素在同一行内显示 */
		overflow-x: scroll;
		/* 允许横向滚动 */
	}

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

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

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

	.time-select-left-item .date-msg1 {
		height: 36rpx;
		line-height: 36rpx;
		color: #292929;
		font-size: 22rpx;
		margin-top: 10rpx;

	}

	.time-select-left-item .date-msg.avail-date {
		color: #999 !important;
		font-weight: bold;
	}

	.time-select-left-item .date-msg1.avail-date {
		color: #999 !important;
		font-weight: bold;
	}

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

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

	/* 	.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: #09afff;
		height: 44rpx;
		line-height: 42rpx;
		width: 76rpx;
		border: 2rpx solid #09afff;
		border-radius: 44rpx;
		text-align: center;
		font-weight: normal;
		font-size: 22rpx;
		display: inline-block;
		margin-left: 8rpx;
	}

	view.popup-wrapper .full-time {
		color: #09afff;
		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: #09afff;
		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: 38rpx;
		/*  top: 0;
    right: 0; */
		background: #fff;
	}

	.popup-content-special {
		height: 900rpx;
		/* margin-top: 96rpx; */
		margin-top: 126rpx;
	}

	.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 {
		/* padding: 0 0 20rpx; */
		color: #333;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* height: 80%; */
		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: #09afff;
		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: #09afff;
		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 {
		/* width:80rpx; */
	}

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

	.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: 44rpx 24rpx 36rpx 26rpx;
		background: #ffffff;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		min-height: 132rpx;
		width: 690rpx;
		margin: 0 30rpx;
	}

	.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: 36rpx;
		line-height: 36rpx;
		margin-top: 16rpx;
		align-items: center;
		font-size: 26rpx;
	}

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

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

	.customer-address {
		color: #191919;
		line-height: 40rpx;
		display: flex;
		align-items: center;
	}

	.customer-address .map-img {
		width: 28rpx;
		height: 34rpx;
		margin-right: 24rpx;
	}

	.address-select .arrow-img {
		width: 24rpx;
		height: 24rpx;
		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;
		background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
		border-radius: 45rpx;
		font-size: 36rpx;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		line-height: 90rpx;
	}

	.address-item {
		width: 690rpx;
		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 #ff8219;
		text-align: center;
		font-size: 36rpx;
		color: #ff8219;
		margin: 0 auto;
		margin-top: 54rpx;
	}

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

	.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;
	}

	.time-select-middle {
		background-color: #FCFCFC;
		padding: 10rpx 0rpx;
		height: 800rpx;
		position: relative;
	}


	.popup-title-new view {
		color: #000;
		font-size: 40rpx;
		font-weight: bold;
	}

	.popup-title-new view.fee-tips {
		color: #ff5735;
		font-size: 22rpx;
	}

	.step-block {
		display: flex;
		align-items: center;
		height: 172rpx;
	}

	.step-block .step-img {
		width: 124rpx;
		height: 124rpx;
	}

	.step-right {
		padding-top: 20rpx;
	}

	.step-title {
		height: 46rpx;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		font-weight: 600;
		color: #191919;
		line-height: 46rpx;
	}

	.step-tips {
		height: 38rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #ACADB1;
		line-height: 38rpx;
	}

	.tooltip {
		position: absolute;
		background: #F6AB03;
		border-radius: 24rpx;
		font-size: 24rpx;
		height: 42rpx;
		line-height: 42rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		color: white;
		margin: -28rpx -96rpx;
	}

	.tooltip-triangle {
		position: absolute;
		top: 12rpx;
		left: 330rpx;
		border-width: 12rpx;
		border-color: #F6AB03 transparent transparent transparent;
		border-style: solid;
		width: 0rpx;
		height: 0rpx;

	}

	.fast-appoint {
		height: 162rpx;
		padding: 44rpx 32rpx 0;
		position: relative;
		margin-bottom: -20px;
	}

	.fast-line {
		width: 686rpx;
		height: 122rpx;
		background: url('https://jzmall.lifejingzhi.com/file/mall-uni/fast-appoint-top.png') no-repeat center center;
		background-size: 100% 100%;
		padding: 20rpx 56rpx 54rpx 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fast-line .fast-text {
		font-weight: 600;
		font-size: 26rpx;
		color: #FA6400;
		height: 38rpx;
		line-height: 38rpx;
	}

	.fast-line .fast-btn {
		width: 141rpx;
		height: 54rpx;
		background: #FA6400;
		border-radius: 8rpx;
		font-weight: 600;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
	}

	.close-fast {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		width: 30rpx;
		height: 30rpx;

	}
</style>