<template>
	<!-- <page-meta :page-style="'overflow:'+(showinfo?'hidden':'visible')"></page-meta> -->
	<view class="cotainer">

		<!-- <date-picker ref="datePickers" @refresh="backDate" :data="listDates" :express="listExpress"></date-picker> -->
		<date-picker ref="datePickers" @refresh="backDate" :data="listDates"></date-picker>



		<view class="orderForm">
			<u-form :model="form" label-width="180" ref="uForm" :error-type="['toast']">
				<view class="orderInfo">
					<view class="orderInfo-title">
						<view>{{cardInfo.sku?cardInfo.sku.name:''}}</view>
					</view>
					<view class="orderInfo-info">
						<block v-if="cardInfo.sku">
							<image
								:style="cardInfo.sku.image_url?'width:200rpx;height:120rpx':'width:150rpx;height:150rpx'"
								:src="cardInfo.sku.image_url?cardInfo.sku.image_url:require('@/static/logo-xietaitai.png')">
							</image>
						</block>
						<block v-else>
							<image style="width:150rpx;height:150rpx" :src="require('@/static/logo-xietaitai.png')">
							</image>
						</block>
						<!-- <image
							:src="cardInfo.sku?(cardInfo.sku.image_url?cardInfo.sku.image_url:require('@/static/logo-xietaitai.png')):require('@/static/logo-xietaitai.png')">
						</image> -->
						<view>
							<view>
								{{cardInfo.sku?cardInfo.sku.specs:''}}
							</view>
							<!-- <view>
								<view>今日剩余可提货量</view>
								<view>99</view>
							</view> -->
							<view>
								<view>卡券状态</view>
								<view class="status"
									v-html="type=='edit'?cardInfo.first_card.status_label:cardInfo.status_label"></view>
							</view>

						</view>
					</view>
					<view class="orderInfo-status">
						<u-form-item label="发货时间" :label-style="{'display':'none','width':0,'flex':0}"
							:border-bottom="false" style="width:100%" prop="send_date" label-position="left">
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view>
									<view>发货时间</view>
								</view>
								<view class="hh" @click="openDatePicker">
									<view class="" v-if="form.send_date">
										<!-- <view>{{form.express}}</view> -->
										<view>{{form.ymd}} <text
												style="color:#b62828;margin:0 10rpx">[{{form.week}}]</text>
											<!-- {{form.hh}} -->
										</view>
									</view>
									<view v-else>
										<view>选择发货时间</view>
									</view>
									<view>
										<u-icon name="arrow-down-fill" color="#ccc" size='28'></u-icon>
									</view>
								</view>
							</view>
							<view style="color:#b62828;font-size:24rpx">非到货时间，预计发货后48小时左右可到货（江浙沪24小时内到货，请合理安排发货时间）。</view>

						</u-form-item>

					</view>
				</view>
				<view class="orderForm-wrap">
					<view class="orderForm-wx" @click="getWxAddress">
						<u-icon name="weixin-circle-fill" color="#3fc14d" size="40"></u-icon>
						<view>获取微信地址</view>
						<u-icon name="arrow-right" size="28"></u-icon>

					</view>
					<u-form-item label="收货人" prop="contact" label-position="left">
						<u-input v-model="form.contact" placeholder="请填写收货人姓名" />
					</u-form-item>
					<u-form-item label="手机号码" prop="mobile" label-position="left">
						<u-input type="number" :maxlength="11" v-model="form.mobile" placeholder="请填写手机号码" />
					</u-form-item>
					<u-form-item label="备用号码" prop="mobile2" label-position="left">
						<u-input v-model="form.mobile2" type="number" :maxlength="11" placeholder="请填写备用号码" />
					</u-form-item>
					<u-form-item label="所在地区" prop="area" label-position="left">
						<u-input type="select" v-model="form.area" placeholder="请选择所在地区" @click="openArea" />
					</u-form-item>
					<u-form-item label="详细地址" prop="address" label-position="left">
						<u-input type="textarea" v-model="form.address" placeholder="请填写详细地址" />
						<view slot="right" class="arearight" @click="changeLocation">
							<u-icon name="map"></u-icon>
							定位
						</view>
					</u-form-item>
					<u-form-item label="设置默认地址" :border-bottom="false" prop="defalut" label-position="left">
						<u-switch slot="right" v-model="form.defalut" active-color="#ba8b45" inactive-color="#adadac"
							size="40"></u-switch>
					</u-form-item>
					<u-form-item label="备注" prop="remark" label-position="top">
						<u-input v-model="form.remark" placeholder="请填写备注" />
					</u-form-item>
				</view>
				<view class="orderForm-wrap">
					<u-form-item label="是否本人收货" prop="myself" label-position="left">
						<u-input v-model="myself" placeholder="选填" @click="showIsMySelf = true" type="select" />
					</u-form-item>
					<u-form-item label="购卡人姓名" prop="buy_name" label-position="left">
						<u-input v-model="form.buy_name" placeholder="选填" />
					</u-form-item>
					<u-form-item label="购卡人电话" :border-bottom="false" prop="buy_mobile" label-position="left">
						<u-input v-model="form.buy_mobile" type="number" :maxlength="11" placeholder="选填" />
					</u-form-item>
				</view>

			</u-form>
			<view class="orderForm-btn">
				<view @click="openShowInfo">{{type=='edit'?'点击修改':'点击提货'}}</view>
			</view>
		</view>
		<aui-picker ref="pickers" :title="'地区选择'" :data="listArea" @callback="changeArea"></aui-picker>


		<u-select @confirm="changeIsMySelf" v-model="showIsMySelf" :list="listIsMySelf"></u-select>

		<!-- 免责协议 -->
		<view class="agreeinfo" v-if="showagree">
			<view class="agreeinfo-wrap">
				<view class="agreeinfo-title">温馨提示</view>
				<view class="agreeinfo-content">
					<view v-html="tips"></view>
				</view>
				<view class="agreeinfo-btn">
					<view @click="closeAgree" :class="isAgree?'canAgree':''">我已阅读并知晓<text
							v-if="isAgreeTime>0">({{isAgreeTime}})</text></view>
				</view>
			</view>
		</view>
		<!-- 确认信息 -->
		<view class="ordercontainer" v-if="showinfo">
			<view class="confirmbox">
				<view class="confirmpicinfo">
					<view class="imgbox">
						<block v-if="cardInfo.sku">
							<image
								:style="cardInfo.sku.image_url?'width:200rpx;height:120rpx':'width:150rpx;height:150rpx'"
								:src="cardInfo.sku.image_url?cardInfo.sku.image_url:require('@/static/logo-xietaitai.png')">
							</image>
						</block>
						<block v-else>
							<image :style="'width:150rpx;height:150rpx'" :src="require('@/static/logo-xietaitai.png')">
							</image>
						</block>

					</view>
					<view class="pictitle">{{cardInfo.sku?cardInfo.sku.name:''}}</view>
					<text>{{cardInfo.sku?cardInfo.sku.specs:''}}</text>
				</view>
			</view>
			<view class="confirmlist index0">
				<view class="iconimg">
					<image src="../../static/icon1.png" mode="widthFix"></image>
				</view>
				<view class="confirmright">
					<text class="confirmmarker">发货时间</text>
					<view class="flex-li confirmdate">
						<text>{{form.ymd}}
							<text class="smallfont" style="color:#b62828">[{{form.week}}]</text>
						</text>
						<text class="smallfont">{{form.lunarData}}</text>
					</view>
					<view class="flex-li confirmdate">
						<!-- <text>{{form.hh}}</text> -->

					</view>
				</view>
			</view>
			<view class="confirmlist index1">
				<view class="iconimg">
					<image src="../../static/icon2.png" mode="widthFix"></image>
				</view>
				<view class="confirmright">
					<text class="confirmmarker">收货地址</text>
					<view class="flex-li confirmaddress">
						<text>{{form.area}}{{form.address}}</text>
					</view>
				</view>
			</view>
			<view class="confirmlist index2">
				<view class="iconimg">
					<image src="../../static/icon3.png" mode="widthFix"></image>
				</view>
				<view class="confirmright">
					<text class="confirmmarker">收货人</text>
					<view class="flex-li confirmcontact">
						<text>{{form.contact}}</text>
						<text>{{form.mobile}}</text>
					</view>
				</view>
			</view>
			<view class="confirmbtn">
				<text class="edit" @click="backShow">返回修改</text>
				<text class="confirmtab" @click="submit">{{type=='edit'?'确认修改':'确认提货'}}</text>
			</view>
		</view>

		<!-- 选择地址 -->
		<view class="addressinfo" v-if="showAddress">
			<u-popup v-model="showAddress" mode="bottom">
				<view class="content">
					<view class="content-title">
						选择地址
					</view>
					<view class="content-wrap">
						<u-radio-group v-model="addressInfo" @change="changeAddress">
							<u-radio v-for="(item, index) in listAddress" :key="index" :name="item.id">
								<view class="content-contact">{{item.contact}} {{item.mobile}}</view>
								<view class="content-address">{{item.area}}{{item.address}}</view>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		isMobile,
		isNull,
		parseAddress
	} from '@/common/util.js'
	import solarLunar from '@/node_modules/solarlunar';
	import auiPicker from '@/components/aui-picker.vue';
	import datePicker from '@/components/date-picker/date-picker.vue'
	export default {
		components: {
			auiPicker,
			datePicker
		},
		data() {
			return {
				isLocked:false,
				showinfo: false,
				showagree: false,
				isAgree: false,
				isAgreeTime: 10,
				agreeTimer: null,
				showAddress: false,
				listAddress: [],
				addressInfo: '',
				cardInfo: {},
				tips: '',
				type: '',
				form: {
					card_number: '',
					password: '',

					send_date: '',
					ymd: '',
					lunarData: '',
					// express: '',
					// hh: '',
					week: '',

					area: '',
					address: '',
					province_id: '',
					city_id: '',
					district_id: '',
					contact: '',
					mobile: '',
					mobile2: '',
					defalut: false,
					myself: 1,
					buy_name: '',
					buy_mobile: ''
				},
				// listExpress: [{
				// 	id: 0,
				// 	value: '顺丰快递'
				// }, {
				// 	id: 1,
				// 	value: '中通快递'
				// }],
				listDates: [],
				date: '',
				listArea: [],
				showArea: false,
				showIsMySelf: false,
				myself: '是',
				listIsMySelf: [{
					value: 1,
					label: '是'
				}, {
					value: 0,
					label: '否'
				}],
				rules: {
					send_date: [{
						required: true,
						message: '请选择发货时间',
						trigger: ['change', 'blur'],
					}],
					area: [{
						required: true,
						message: '请选择所在地区',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请填写详细地址',
						trigger: ['blur'],
					}],
					contact: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['blur'],
					}],
					mobile: [{
						required: true,
						message: '请填写收货人电话',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		onUnload() {
			if (this.agreeTimer) {
				clearInterval(this.agreeTimer)
				this.agreeTimer = null
			}
		},
		onLoad(option) {
			let that = this
			if (option.hasCard) {
				if (option.type == 'edit') {
					this.type = 'edit'
					this.form = uni.getStorageSync("vuex_update_card") ? uni.getStorageSync("vuex_update_card") : {},
						this.cardInfo = uni.getStorageSync("vuex_update_card") ? uni.getStorageSync("vuex_update_card") :
						{},
						this.form.ymd = this.momentDay(this.form.send_date).ymd
						this.form.week = this.getWeek(this.form.send_date)
					uni.removeStorageSync("vuex_update_card")
					uni.setNavigationBarTitle({
						title: '修改订单',
						success: function() {
							console.log('标题设置成功');
							that.showinfo = false
						},
						fail: function(err) {
							console.error('标题设置失败', err);
						}
					});
					// uni.removeStorageSync("vuex_update_card")
				} else {
					this.cardInfo = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card : {}
					this.form.card_number = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card_number :
						''
					this.form.password = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").password : ''
					// uni.removeStorageSync("vuex_card")
				}

				this.getAddress()
				this.getDates()
				// this.getExpress()
				this.getArea()
			} else {
				toast("未查询到卡券信息")
				uni.removeStorageSync("vuex_card")
				// uni.redirectTo({
				// 	url: '/packages/change/change'
				// })
			}
		},
		methods: {
			getWeek(date){
				const weeks = ["周日", '周一', '周二', '周三', '周四', '周五', '周六', ]
				let week = weeks[this.$moment(date).day()]
				return week
			},
			async getAddress() {
				const res = await this.$u.api.getUserAddress()
				this.listAddress = res.address
				console.log("this.type", this.type)
				if (!(this.type == 'edit')) {
					this.showAddress = this.listAddress.length > 0 ? true : false
				}
				console.log("this.type", this.type, this.showAddress)
			},
			getWxAddress(e) {
				let _this = this
				uni.authorize({
					scope: 'scope.address',
					success: (res) => {
						console.log("authorize", res)
						uni.chooseAddress({
							success(res) {
								console.log(res)
								_this.form.contact = res.userName
								_this.form.mobile = res.telNumber
								_this.form.area = res.provinceName + res.cityName + res.countyName
								_this.form.address = res.detailInfo
								_this.$u.api.matchRegion({
									province: res.provinceName,
									city: res.cityName,
									district: res.countyName
								}).then(res1 => {
									_this.form.province_id = res1.province_id ? res1
										.province_id.id : ''
									_this.form.city_id = res1.city_id ? res1.city_id.id : ''
									_this.form.district_id = res1.district_id ? res1
										.district_id.id : ''
									if (isNull(_this.form.province_id) || isNull(_this.form
											.city_id) ||
										isNull(_this.form.district_id)) {
										uni.showToast({
											title: '未能匹配到所在地区，请手动选择',
											icon: 'none'
										})
										_this.form.area = ""
										_this.form.province_id = ''
										_this.form.city_id = ''
										_this.form.district_id = ''
									}
								})
								console.log("_this", _this.form)
							},
							fail(res) {
								console.log(res)
							}
						})
					},
					fail(res) {
						console.log("authorize-fail", res)
					}
				})

			},
			// async getExpress() {
			// 	const res = await this.$u.api.getExpress()
			// 	this.listExpress = res
			// },
			changeAddress(e) {
				if (e) {
					this.listAddress.map(item => {
						if (item.id == e) {
							this.form.address_id = item.id
							this.form.area = item.area
							this.form.address = item.address
							this.form.province_id = item.province_id
							this.form.city_id = item.city_id
							this.form.district_id = item.district_id
							this.form.contact = item.contact
							this.form.mobile = item.mobile
							this.showAddress = false
						}
					})
				}
			},

			async getDates() {
				await this.$u.api.getDates({
					card_number: this.form.card_number
				}).then(res => {
					let data = res.card
					if (data.open_dates && data.open_dates.length === 0) {
						toast("当前无可提货时间")
						return
					}
					if (data.open_dates) {

						for (var k in data.open_dates) {
							// 去除 没有可提货数量的
							if (data.open_dates[k]['quantity'] - data.open_dates[k]['booked'] > 0) {
								// 修改的只可以 选择两天之后的日期
								if (this.type === 'edit') {
									if (this.isAfterTwoDays(k)) {
										let _k = this.momentDay(k)
										this.listDates.push({
											canUse: data.open_dates[k],
											..._k
										})
									}
								} else {
									//正常提货 当天12点前可提当天，过12点 不可提当天
									let _k = this.momentDay(k)
									this.listDates.push({
										canUse: data.open_dates[k],
										..._k
									})
									// if(this.isBeforeNoon(k)){

									// }
								}

							}
						}
					}

					// 温馨提示
					let product = res.product
					if (!isNull(res.product.tip)) {
						this.tips = res.product.tip
					} else {
						const configs = uni.getStorageSync("configs")
						configs.map(item => {
							if (item.key === 'tips') {
								this.tips = item.value
							}
						})
					}

				}).then(res => {

				})
			},
			// 是否是 两天之后的日期
			isAfterTwoDays(open_dates) {
				const dateToCheck = this.$moment(open_dates, 'YYYY-MM-DD');
				const today = this.$moment();
				const twoDaysAfterToday = today.add(2, 'days');

				return dateToCheck >= twoDaysAfterToday;
			},
			// 判断 是否大于等于今天 等于今天是否在12点之前
			isBeforeNoon(a) {
				// 将给定的日期转换为Moment对象
				console.log("a", a)
				const dateA = this.$moment(a, 'YYYY-MM-DD');

				// 获取今天的日期
				const today = this.$moment();
				if (dateA.isAfter(today)) {
					return true
				}
				// 判断给定的日期是否为今天
				if (dateA.isSame(today, 'day')) {
					// 获取当前的时间
					const now = this.$moment();
					// 检查当前时间是否小于12点
					if (now.hour() < 12) {
						return true; // 当前时间小于12点
					}
				}

				return false; // 不满足条件
			},

			momentDay(date) {
				if (date) {
					const weeks = ["周日", '周一', '周二', '周三', '周四', '周五', '周六', ]
					let dateArr = date.split("-")
					let ymd = this.$moment(date).format("M月DD日")
					let week = weeks[this.$moment(date).day()]
					const solar2lunarData = solarLunar.solar2lunar(dateArr[0], dateArr[1], dateArr[2]);

					return {
						date: date,
						ymd: ymd,
						week: week,
						lunarData: `农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`,
					}
				}

			},
			backDate(e) {
				if (e) {
					this.form.send_date = e.date
					this.form.ymd = e.ymd
					// this.form.express = e.expressname
					// this.form.express_type_id = e.expressid
					// this.form.hh = e.hhtime
					this.form.week = e.week
					this.form.lunarData = e.lunarData
				}
			},
			openDatePicker() {
				this.$refs.datePickers.show = true
			},
			async getArea() {
				const res = await this.$u.api.getRegion()
				this.listArea = res.regions
			},
			openArea() {
				uni.hideKeyboard()
				this.$refs.pickers.open().then(function() {
					console.log('picker打开');
				});
			},
			changeArea(e) {
				// return
				if (e) {
					console.log("e", e)
					let data = e.data
					let _this = this
					_this.form.area = ''
					data.forEach(function(item, index) {
						_this.form.area += item.value + '   ';
					});
					this.form.province_id = data[0] ? data[0].id : ''
					this.form.city_id = data[1] ? data[1].id : ''
					this.form.district_id = data[2] ? data[2].id : ''
				}
			},
			changeIsMySelf(e) {
				if (e) {
					this.myself = e[0].label
					this.form.myself = e[0].value
				}
			},
			changeLocation() {
				let _this = this
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						console.log("authorize", res)
						uni.chooseLocation({
							success(res) {
								console.log("res", res)
								// _this.form.area = res.address
								_this.form.address = res.name
								// 根据地址匹配 省市区
								let pca = parseAddress(res.address)
								console.log("pca",pca)
								if (pca.length > 0) {
									_this.form.area = pca.join('')
									_this.$u.api.matchRegion({
										province: pca[0],
										city: pca[1],
										district: pca[2]
									}).then(res => {
										_this.form.province_id = res.province_id ? res
											.province_id.id : ''
										_this.form.city_id = res.city_id ? res.city_id.id : ''
										_this.form.district_id = res.district_id ? res
											.district_id.id : ''
										if (isNull(_this.form.province_id) || isNull(_this.form
												.city_id) ||
											isNull(_this.form.district_id)) {
											uni.showToast({
												title: '未能匹配到所在省市区，请手动选择',
												icon: 'none'
											})
											_this.form.area = ""
											_this.form.province_id = ''
											_this.form.city_id = ''
											_this.form.district_id = ''
										}
									})
								} else {
									uni.showToast({
										title: '未能匹配到所在省市区，请手动选择',
										icon: 'none'
									})
									_this.form.area = ""
									_this.form.province_id = ''
									_this.form.city_id = ''
									_this.form.district_id = ''
									
								}
							},
							fail(res) {
								console.log("fail", res)

							}
						})
					},
					fail(res) {
						console.log("authorize-fail", res)
					}
				})
			},
			backShow() {
				let that = this
				that.showinfo = false
			},
			saveDefalutAddress() {
				if (this.form.defalut) {
					this.$u.api.saveUserAddress({
						id: this.form.address_id ? this.form.address_id : '',
						area: this.form.area,
						address: this.form.address,
						contact: this.form.contact,
						mobile: this.form.mobile,
						province_id: this.form.province_id,
						city_id: this.form.city_id,
						district_id: this.form.district_id,
						defalut: 1
					}).then(res => {
						if (this.type == 'edit') {
							uni.redirectTo({
								url: '/packages/myorder/myorder'
							})
						} else {
							uni.redirectTo({
								url: '/packages/product/public'
							})
						}

					}).then(res => {
						if (this.type == 'edit') {
							uni.redirectTo({
								url: '/packages/myorder/myorder'
							})
						} else {
							uni.redirectTo({
								url: '/packages/product/public'
							})
						}
					})
				} else {
					if (this.type == 'edit') {
						uni.redirectTo({
							url: '/packages/myorder/myorder'
						})
					} else {
						uni.redirectTo({
							url: '/packages/product/public'
						})
					}
				}

			},
			openShowInfo() {
				let that = this
				if (!isNull(this.form.mobile2) && this.form.mobile2.length > 0) {
					if (!isMobile(this.form.mobile2)) {
						toast('备用电话不正确')
						return
					}
				}
				if (!isNull(this.form.buy_mobile) && this.form.buy_mobile.length > 0) {
					if (!isMobile(this.form.buy_mobile)) {
						toast('购买人电话不正确')
						return
					}
				}
				this.$refs.uForm.validate(valid => {
					// console.log('验证通过');
					if (valid) {
						if (!this.showinfo) {
							uni.setNavigationBarTitle({
								title: '信息确认',
								success: function() {
									console.log('标题设置成功');
									that.showinfo = true
								},
								fail: function(err) {
									console.error('标题设置失败', err);
								}
							});
						}
					} else {
						console.log('验证失败');
						// toast('请填写完整信息')
					}
				});
			},
			closeAgree() {
				if (this.isAgreeTime > 0) {
					return
				} else {
					this.isAgree = true
					this.showagree = false
				}
			},
			reduceAgreeTime() {
				let that = this
				if (that.isAgreeTime > 0) {
					this.agreeTimer = setInterval(function() {
						that.isAgreeTime--
						if (that.isAgreeTime === 0) {
							that.isAgree = true
							that.isAgreeTime = 0
							clearInterval(that.agreeTimer)
							that.agreeTimer = null
						}
					}, 1000)
				}

			},
			submit() {
				let that = this
				if (!this.isAgree) {
					this.showagree = true
					this.isAgreeTime = 10
					this.reduceAgreeTime()
				} else {
					if (this.isAgree) {
						this.form.show = 0
						if (this.type == 'edit') {
							console.log("this.form", this.form)
							if(this.isLocked){
								return
							}
							this.isLocked = true
							this.$u.api.saveUserOrder(this.form).then(res => {
								uni.removeStorageSync('vuex_update_card')
								toast(res.msg, 1000, function() {
									setTimeout(function() {
										that.saveDefalutAddress()
									}, 500)
								})

							}).catch(res => {
								this.isLocked = false
								console.log('res1', res)

							})
						} else {
							console.log("this.form", this.form)
							// return
							if(this.isLocked){
								return
							}
							this.isLocked = true
							this.$u.api.addUserOrder(this.form).then(res => {
								console.log("res", res)
								uni.removeStorageSync('vuex_card')
								toast(res.msg, 1000, function() {
									setTimeout(function() {
										that.saveDefalutAddress()
									}, 500)
								})
							}).catch(res => {
								this.isLocked = false
								console.log('res1', res)

							})
						}

					}

				}
			}
		}

	}
</script>

<style lang="scss">
	.cotainer {
		padding: 30rpx;
		background-color: #f0efed;
		padding-bottom: 200rpx;

		.addressinfo {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
			z-index: 9999999;
			display: flex;
			align-items: center;
			justify-content: center;

			.content {
				width: 100%;
				height: 800rpx;
				// overflow: scroll;
				position: relative;

				&-wrap {
					box-sizing: border-box;
					background: #fff;
					border-radius: 20rpx;
					overflow: scroll;
					width: 100%;
					height: 650rpx;
					padding: 40rpx;
					padding-top: 0;
				}

				&-title {
					text-align: center;
					padding: 30rpx;
					font-size: 32rpx;

				}

				.u-radio {
					align-items: baseline;
					margin-bottom: 20rpx;
				}

				&-contact {}

				&-address {
					color: #ccc;
					line-height: 1.2;
					font-size: 28rpx;
				}
			}
		}


		.orderInfo {
			padding: 40rpx 24rpx;
			border-radius: 10rpx;
			background-color: #fff;
			font-size: 24rpx;
			color: #000;

			&-title {

				>view {
					font-size: 24rpx;
					font-weight: bolder;
					margin-bottom: 20rpx;
				}
			}

			&-info {
				display: flex;

				font-weight: normal;
				margin-bottom: 40rpx;

				image {
					width: 200rpx;
					height: 120rpx;
					border: 1px solid #ba8b45;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				>view {
					&:last-child {
						width: calc(100% - 170rpx);

						>view {
							display: flex;
							justify-content: space-between;
							margin-bottom: 20rpx;

							.status {
								background-color: #ba8b45;
								color: #fff;
								padding: 5rpx 20rpx;
								border-radius: 10rpx;
							}

						}
					}

				}
			}

			&-status {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.u-form-item {
					padding: 0;

					.u-form-item__body {
						align-items: baseline;

						.u-form-item--left {
							width: 0 !important;
							flex: 0 !important;
						}
					}
				}

				.hh {
					&:last-child {
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						>view {
							&:first-child {
								view {
									height: 50rpx;
									line-height: 50rpx;

									&:last-child {
										margin-bottom: 0rpx
									}
								}
							}

							&:last-child {
								margin-left: 20rpx
							}
						}
					}
				}
			}
		}

		.orderForm {
			&-wx {
				color: #000;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				>view {
					margin: 0 20rpx;
				}
			}

			&-wrap {
				padding: 40rpx 24rpx;
				border-radius: 10rpx;
				background-color: #fff;
				font-size: 24rpx;
				color: #000;
				margin-top: 24rpx;

				.u-form-item {
					padding-bottom: 0
				}

				.arearight {
					color: #000
				}
			}

			&-address {
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 72rpx;
				padding-top: 20rpx;
				position: relative;

				text {
					text {
						position: absolute;
						left: -16rpx;
						vertical-align: middle;
						color: #fa3534;
						padding-top: 6rpx;
					}
				}
			}

			&-btn {
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 40rpx;
				z-index: 9;

				>view {
					background-color: #ba8b45;
					color: #fff;
					border-radius: 40rpx;
					width: 60%;
					margin: 0 auto;
					height: 75rpx;
					text-align: center;
					line-height: 75rpx;
				}
			}
		}

		.ordercontainer {
			background: #f0efed;
			width: 100%;
			height: 100vh;
			padding: 42rpx 50rpx 300rpx;
			overflow-y: scroll;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 99;
		}

		.confirmbox {
			width: 100%;
			padding-top: 22rpx;
			padding-bottom: 35rpx;
			background: url(../../static/confirmbg1.jpg) no-repeat center top;
			background-size: cover;
			border-radius: 10rpx;
			box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, .47);

		}

		.confirmpicinfo {
			text-align: center;
			font-size: 24rpx;
			color: #d5c7b5;
			line-height: 42rpx;
		}

		.imgbox {
			width: 200rpx;
			// height: 120rpx;
			margin: 0 auto;
			// border-radius: 10rpx;
			// border: 1px solid #ba8b45;
			// overflow: hidden;
			margin-bottom: 14rpx;
		}

		.imgbox image {
			width: 200rpx;
			height: 120rpx;
			vertical-align: middle;
			border-radius: 10rpx;
			border: 1px solid #ba8b45;
		}

		.confirmpicinfo .pictitle {
			color: #ba8b45;
		}

		.confirmlist {
			margin-top: 30rpx;
			border-radius: 10rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-repeat: no-repeat;
			background-position: center top;
			background-size: cover;
			box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, .47);
			padding: 10rpx 10rpx 10rpx 20rpx;
		}

		.confirmlist.index0 {
			background-image: url(../../static/confirmbg2.jpg);
		}

		.confirmlist.index1 {
			background-image: url(../../static/confirmbg3.jpg);
		}

		.confirmlist.index2 {
			background-image: url(../../static/confirmbg4.jpg);
		}

		.confirmlist image {
			width: 62rpx;
			height: auto;
		}

		.confirmlist .confirmright {
			width: 550rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 45rpx 20rpx 25rpx;
		}

		.confirmmarker {
			display: block;
			font-size: 32rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 8rpx;
			text-align: center;
		}

		.flex-li {
			display: flex;
			justify-content: space-between;
			color: #000;
			font-size: 30rpx;
			line-height: 60rpx;
		}

		.confirmdate text.smallfont {
			font-size: 24rpx;
		}

		.confirmbtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 115rpx;

			display: flex;
			padding: 40rpx 0rpx;
			justify-content: space-between;
			background: #fff;
			align-items: center;
		}

		.confirmbtn text {
			display: inline-block;
			width: 284rpx;
			line-height: 74rpx;
			height: 74rpx;
			text-align: center;
			border-radius: 74rpx;
			border: 1rpx solid #d1d1d0;
			margin: 0 38rpx;
			font-size: 29rpx;
			color: #000;
		}

		.confirmbtn text.confirmtab {
			color: #fff;
			border: 1rpx solid #ba8b45;
			background: #ba8b45;
		}

		.agreeinfo {
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
			width: 100vw;
			height: 100vh;
			z-index: 999;
			padding: 0 50rpx;

			&-wrap {
				background: #fff;
				padding: 60rpx 40rpx;
				border-radius: 20rpx;
			}

			&-title {
				font-size: 32rpx;
				margin-bottom: 30rpx;
				color: #b62828;
				text-align: center;
			}

			&-content {
				line-height: 1.8;
				font-size: 30rpx;
				height: 300rpx;
				overflow: scroll;
			}

			&-btn {

				>view {
					background-color: rgba(0, 0, 0, 0.5);
					color: #fff;
					border-radius: 40rpx;
					width: 60%;
					margin: 0 auto;
					height: 75rpx;
					text-align: center;
					line-height: 75rpx;
					margin: 20rpx auto;
				}

				.canAgree {
					background-color: #ba8b45;
				}
			}
		}
	}
</style>