<template>
	<!-- 解决滚动穿透 -->
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="bg" v-if="info">
		<view class="sendwayArea">
			<view v-if="isPost==1||isPost==3" :class="['sendway-item',sendType==1?'active':'']"
			 @click="sendType=1" style="left: -2rpx;">邮寄配送</view>
			<!-- <view v-if="isPost==2||isPost==3" :class="['sendway-item',sendType==2?'active':'']" 
			@click="sendType=2" style="right: -2rpx;">到店自提</view> -->
			<view  :class="['sendway-item',sendType==2?'active':'']" 
			@click="sendType=2" style="right: -2rpx;">到店自提</view>
		</view>
		
		<!-- 邮寄 -->
		<view class="address" style="margin-bottom: 36rpx;" v-if="(info.is_post==1||info.is_post==3)&&sendType==1">
			<view class="a-title">
				<view>收货地址</view>
				<view>
					<image class="more-person" :src="showImg('/uploads/20240827/3420c39b08aef4b24b5c2ef624cc707d.png')"
					v-if="addressList.length>0" @click="changeAddressPopup('open', '', null)"></image>
				</view>
			</view>

			<view class="btn-box">
				<view class="contacts box" v-if="contacts && (info.is_post==1||info.is_post==3)">
					<view class="contacts-left">
						<view class="name-phone">
							<view class="name">{{ contacts.name }}</view>
							<view class="phone">{{ contacts.tel }}</view>
						</view>
						<view class="adds text-overflowRows">{{ contacts.province_text + contacts.city_text + contacts.district_text + contacts.detail_addr }}</view>
					</view>
					<image @click="changeAddressPopup('open', '', null)" src="https://tongli.sz-trip.com/uploads/20240827/337cf610ce5924c2a65b7a28b6a4891e.png" mode="aspectFill"></image>
				</view>
				<image v-else class="a-img" :src="showImg('/uploads/20240827/824efc9036387b3d7d4737254d6568d6.png')" 
					mode="aspectFill" @click.self="changeAddressAddPopup('open','',{})"></image>
			</view>
		</view>
		
		<!-- 自提 -->
		<!-- <view v-if="(info.is_post==2||info.is_post==3)&&sendType==2"> -->
		<view v-if="sendType==2">
			<view class="pickself" >
				<navigator :url="`/subPackages/techan/selfPickUpPoint?pickupId=${pickupAddress.id}&goodsId=${info.goods_id}`">
					<view class="pickpoint">
						<view class="flex-shrink-0">自提点</view>
						<view class="pickpointAddress">
							<view class="pointAddressText text-overflow">{{pickupAddress.extract_name||'选择提货地址'}}</view>
							<uni-icons style="height: 36rpx;" type="right" size="18"></uni-icons>
						</view>
					</view>
				</navigator>
			</view>
			
			<view class="pickup-person-area">
				<view class="pickpoint">
					<view>提货人信息</view>
					<view></view>
				</view>

				<view class="btn-box flex-column">
					<view class="p_name line flex-between w-full">
						<view class="left">姓名</view>
						<input class="input" type="text" placeholder="请输入提货人姓名" v-model="pickupPerson.name" />
					</view>
					<view class="p_tel flex-between w-full">
						<view class="left">手机号</view>
						<view class="flex flex-items-center">
							<input class="input" type="text" placeholder="请输入手机号" v-model="pickupPerson.phone" />
							<uni-icons v-if="pickupPerson.phone.length>0" style="margin-left: 30rpx;"
								type="closeempty" size="14" @click="pickupPerson.phone = ''"></uni-icons>
						</view>
						
					</view>
				</view>
			</view>
		</view>

		<view class="new-box">
			<view class="commodity box">
				<image class="img" :src="showImg(detail.image)" mode="aspectFill"></image>
				<view class="title flex-c">
					<view class="commodity-info">
						<view class="text-overflowRows">{{ detail.title }}</view>
						<view class="commodity-price">
							{{info.money/100}}
						</view>
					</view>
					<view class="commodity-info">
						<view class="text-overflowRows">{{ info.title }}</view>
						<view class="commodity-num">
							x{{info.buyNum}}
						</view>
					</view>
				</view>
			</view>
			<view class="commodity box sb" style="padding-left: 10rpx;">
				<view class="title" style="font-weight: bold;">
					购买数量
				</view>
				<view class="num-box">
					<!-- <image src="https://yjdtadmin.sz-trip.com/uploads/20231225/4b61998e657784d08c8dfdb08da84553.png" mode="aspectFill" class="ctrl" @click="reduce()"></image> -->
					<view :class="['ctrl',info.buyNum>1?'':'disabled']" @click="reduce()">-</view>
					<input class="num" type="text" v-model="info.buyNum" :disabled='true' />
					<view :class="['ctrl']" @click="plus()">+</view>
				</view>
				
			</view>
			<view class="post top-line flex-between" v-show="sendType!=2">
				<view class="">
					运费
				</view>
				<view style="font-weight: 500;" >
					{{post===0?'免邮':post/100}}
				</view>
			</view>
			<!-- 优惠券 -->
			<navigator :url="'/subPackages/order/OrderCoupon?allprice='+ allprice + '&sku_ids='+ info.id" class="tickets-box flex-between top-line">
			    <div class="order-title">优惠券</div>
			    <div class="coupon-btn" v-if="coupon==''">
					<span class="select">请选择</span>
				</div>
			    <div class="coupon-price" v-else>
					<span v-if="coupon.percent == 0">-￥{{coupon.discounts/100}}</span>
					<span v-else>-{{coupon.percent}}%</span>
					<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span>
				</div>
			 </navigator>
			
			<view class="remark top-line">
				<view class="remark-title" >订单备注:</view>
				<input style="z-index:0" type="text" placeholder="选填" v-model="remark" maxlength="50"/>
			</view>
		</view>


		
		<view class="btn-list">
			<view class="price-box">
				<view class="text">合计:</view>
				<view class="price">{{ total() }}</view>
				<view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view>
			</view>
			<view class="btn" @click="order()">立即购买</view>
		</view>

		<!-- 选择收货地址弹窗 -->
		<uni-popup ref="addressPopup" type="bottom" backgroundColor="#F4F4F4" @change="changPopShow">
			<view class="people-popup">
				<!-- <view class="top-box">
					<view class="top flex-between">
						<text class="text-overflow" @click="changeAddressPopup('close')">取消</text>
						<text class="confirm" @click="changeAddressPopup('close', 'confirm')">确定</text>
					</view>
				</view> -->
				<!-- <navigator url="/subPackages/user/myAddressAdd" class="button">添加收货地址</navigator> -->
				<view class="button" @click="changeAddressAddPopup('open','',{})">添加收货地址</view>
				<view class="popup-list" v-if="addressList.length > 0">
					<view class="popup-item" v-for="(item, index) in addressList" :key="index" @click="seldThisAddress(item)">
						<view class="item-top flex-between">
							<view>
								<view class="name flex-start">
									{{ item.name }}
									<text>{{ item.tel }}</text>
									<text class="tag" v-if="item.is_default == 1">默认</text>
								</view>
								<view class="subtitle">{{ item.address }}</view>
							</view>
							<navigator :url="`/subPackages/user/myAddressAdd?id=${item.id}`">
								<img src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" alt="" />
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 新增编辑收货地址弹窗 -->
		<uni-popup ref="addressAddPopup" type="bottom" backgroundColor="#F4F4F4" 
			@change="changPopShow" style="border-radius: 13rpx 13rpx 0 0;">
			<view class="people-popup">
				<view class="top-box">
					<view class="top flex-between" style="height: fit-content;">
						<text class="text-overflow" @click="changeAddressAddPopup('close')">取消</text>
						<text style="font-size: 35rpx;font-weight: 600;">添加收货地址</text>
						<text style="color: #71B580;" class="confirm" @click="saveAddress">保存</text>
					</view>
				</view>
				
				<view class="add-edit-content">
					<addressAddVue ref="addressAddVueRef"></addressAddVue>
				</view>
				
				
			</view>
		</uni-popup>
		
		

	</view>
</template>

<script>
import District from 'ydui-district/dist/jd_province_city_area_id';
import addressAddVue from '../../compoents/addressAdd.vue';
export default {
	components: {addressAddVue},
	data() {
		return {
			contacts: null,
			info: null,//规格的信息
			detail:null,//商品的信息
			post: 0,
			flag: true,
			addressList: [],
			reserve_name: '',
			reserve_idcard: '',
			reserve_phone: '',
			remark: '',
			coupon: "",
			allprice: 0,
			
			isPost: "1", //0=核销，1=邮寄，2=自取，3=邮寄/自提
			sendType: 1, // 0=核销，1=邮寄，2=自取，3=邮寄/自提
			pickupAddress: {id: null, address:''},
			pickupPerson: {name:'',phone:''},
			popShow: false, // 解决滚动穿透
			
			addressTitle: '添加收货地址'
			
		};
	},
	onLoad() {
		this.$store.commit("choseCoupon", "");
		this.info = JSON.parse(uni.getStorageSync('order'));
		this.detail = JSON.parse(uni.getStorageSync('info'));
		if (!this.info) {
			uni.navigateBack();
			return
		}
		console.log(this.info);
		
		// 根据规格信息 记录发货方式 is_post  ，使用方式：0=核销，1=邮寄，2=自取，3=邮寄/自提
		if (this.info) {
			this.isPost = this.info.is_post || "1"
			this.sendType = this.isPost==3?1:this.isPost
		}
		console.log(this.isPost, this.sendType)
	},
	onShow() {
		this.coupon = this.$store.state.user.coupon
		this.getAllAddressList();
		
		// 更新自提点
		uni.$on("updateDataByConnect",this.getDataByConnect)
	},
	onUnload(){
		uni.$off("updateDataByConnect",this.getDataByConnect)
	},
	methods: {
		getContacts() {
			if (this.info.is_post == 0) {
				return;
			}
			
			this.Post({}, '/api/user/getDefaultConsignee').then(res => {
				if (res) {
					this.contacts = res.data;
					this.getPost();
				}
			});
		},
		getPost() {
			if (this.info.is_post == 0 || !this.contacts) {
				return;
			}
			this.flag = false;
			let data = JSON.stringify([{ specifications_id: this.info.id, num: this.info.buyNum, consignee_id: this.contacts.id }]);
			console.log(data);
			this.Post({ data: data }, '/api/order/getNewPost').then(res => {
				if (res) {
					this.post = res.data[0].post_money;
					this.flag = true;
				}
			}).catch(err=>{
				console.log(err,'aaaaaaa');
				this.flag = true;
			});
		},
		rge(val) {
			this.$nextTick(() => {
				this.num = val.detail.value.replace(/^(0+)|[^\d]+/g, '');
			});
		},
		setV() {
			if (!this.num) {
				this.$nextTick(() => {
					this.num = 1;
					if (this.flag) {
						this.getPost();
					}
				});
			} else {
				if (this.flag) {
					this.getPost();
				}
			}
		},
		plus() {
			this.info.buyNum = Number(this.info.buyNum);
			this.$nextTick(() => {
				this.$store.commit("choseCoupon","");
				this.coupon = this.$store.state.user.coupon
				this.info.buyNum += 1;
				if (this.flag) {
					this.getPost();
				}
			});
		},
		reduce() {
			this.info.buyNum = Number(this.info.buyNum);
			if (this.info.buyNum > 1) {
				this.$store.commit("choseCoupon","");
				this.coupon = this.$store.state.user.coupon
				this.$nextTick(() => {
					this.info.buyNum -= 1;
					if (this.flag) {
						this.getPost();
					}
				});
			}
		},
		// 选择收货地址弹窗
		changeAddressPopup(type, confirm, index) {
			if (type == 'open') this.$refs.addressPopup.open('bottom');
			else this.$refs.addressPopup.close();
			this.$forceUpdate();
		},
		// 获取收货地址列表
		getAllAddressList() {
			this.Post({}, '/api/user/consigneeList').then(res => {
				let oldId = (this.contacts || {}).id
				if (res.code === 1) this.addressList = res.data || [];
				if (this.addressList.some(v=>v.id==oldId)) {
					this.contacts = this.addressList.find(v=>v.id==oldId)
					this.getPost();
				} else if (this.addressList.some(v=>v.is_default==1)) {
					this.contacts = this.addressList.find(v=>v.is_default==1)
					this.getPost();
				} else if (this.addressList.length>0) {
					this.contacts = this.addressList[0]
					this.getPost()
				}
			});
		},
		// 选择收货地址
		seldThisAddress(item) {
			if (!this.contacts) this.contacts = {};
			Object.assign(this.contacts, item);
			console.log(this.flag,1111111);
			if (this.flag) {
				this.getPost();
			}
			this.$refs.addressPopup.close();
			this.$forceUpdate();
		},
		// 收货地址新增弹窗
		changeAddressAddPopup(type, confirm, item) {
			if (type == 'open') {
				this.addressTitle = '新增收货地址'
				if (item.id) { this.addressTitle = '编辑收货地址' }
				// this.id = item.id

				this.$refs.addressAddPopup.open('bottom');
				
				this.$nextTick(()=>{
					this.$refs.addressAddVueRef.init(item)
				})
			}
			else {this.$refs.addressAddPopup.close();}
			this.$forceUpdate();
		},
		
		// 保存地址
		async saveAddress () {
			let res = await this.$refs.addressAddVueRef.postSave()
			if (res && res.code == 1) {
				this.contacts = res.data
				this.getAllAddressList();
				this.changeAddressAddPopup('close')
			}
		},



		// 总价
		total() {
			let price = 0
			let postPrice = this.sendType == 2?0:this.post
			this.allprice = this.info.money * this.info.buyNum + postPrice
			if (this.coupon) {
				if (this.coupon.percent == 0) {
					if (this.coupon.discounts>this.info.money*this.info.buyNum) {
						price =postPrice
					}else{
						price = (this.info.money) * this.info.buyNum + postPrice - (this.coupon.discounts)
					}
					
				} else{
					price = ((this.info.money) * this.info.buyNum + postPrice) - (((this.info.money) * this.info.buyNum + postPrice) * this.coupon.percent)
				}
			} else {
				price = (this.info.money) * this.info.buyNum + postPrice
			}
			return price < 0 ? 0 : price/100
		},
		// 预定
		order() {
			if (this.info.is_post == 1 || this.info.is_post == 3) {
				console.log(this.sendType)
				if (this.sendType == 1 && !this.contacts) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});
					return;
				}
				
				if (this.sendType == 2) {
					if (!this.pickupAddress.id) {
						uni.showToast({title: '请选择自提点',icon: 'none'});
						return;
					}

					if (this.pickupPerson.name.trim().length<0) {
						uni.showToast({
							title: '请输入自提人姓名',
							icon: 'none'
						});
						return;
					}
					if (!this.IsTel(this.pickupPerson)) {
						uni.showToast({
							title: '请输入自提人手机号',
							icon: 'none'
						});
						return;
					}
					

				}
			}

			let goods = [];
			let goodsItem = {
				specifications_id: this.info.id,
				num: this.info.buyNum,
				// consignee_id: this.info.is_post == 1 ? this.contacts.id : null
			};
			
			if (this.sendType == 2) {
				goodsItem.extract_id = this.pickupAddress.id;
				goodsItem.contact_id = this.pickupPerson.id;
			} else if (this.sendType == 1){
				goodsItem.consignee_id = this.contacts.id 
			}
			
			goods.push(goodsItem);
			let data = {
				goods: goods,
				coupon: this.coupon ? this.coupon.id : "",
				remark: this.remark,
				is_post: this.info.is_post,
				reserve_name: this.reserve_name,
				reserve_phone: this.reserve_phone,
				reserve_idcard: this.reserve_idcard
			};
			this.Post(
				{
					method: 'POST',
					data: JSON.stringify(data)
				},
				'/api/order/place'
			).then(res => {
				if (res.code == 1) {
					this.Post(
						{
							order_id: res.data.order_id,
							type: 'miniprogram',
							platform: 'miniprogram'
						},
						'/api/pay/unify'
					).then(res => {
						if (res.data) {
							uni.requestPayment({
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								paySign: res.data.paySign,
								signType: res.data.signType,
								timeStamp: res.data.timeStamp,
								complete() {
									uni.navigateTo({
										url: '/subPackages/order/trades'
									});
								}
							});
						}
					});
				}
			});
		},
		
		// ---------------自提-----------------------
		changPopShow (e) {
			this.popShow = e.show
		},
		
		getDataByConnect(data) {
			if (data.msgType == "updatePickUpPoint") {
				this.pickupAddress = data.data
			}
		},
		
		
		
	}
};
</script>

<style lang="scss" scoped>
.bg {
	min-height: 100vh;
	overflow-x: hidden;
	background: #f2f4f7;
	padding-bottom: 200rpx;
}
view {
	box-sizing: border-box;
}
.flex-shrink-0{
	flex-shrink: 0;
}
.box {
	width: 100%;
	min-height: 100rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 16rpx;
}
.address {
	width: 697rpx;
	height: 291rpx;
	background: #FFFFFF;
	border-radius: 13rpx;
	margin: 0 auto;
	margin-top: 26rpx;
	.a-title{
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 30rpx 18rpx;
		justify-content: space-between;
		align-items: center;
		display: flex;
		width: 100%;
		.more-person{
			width: 140rpx;
			height: 58rpx;
		}
	}
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: center;
		border-top:1rpx solid rgba(216, 216, 216, 1) ;
		height: 176rpx;
		.a-img{
			width: 220rpx;
			height: 74rpx;
		}
	}
}

.pickself{
	width: 697rpx;
	height: 120rpx;
	background: #FFFFFF;
	border-radius: 13rpx;
	margin: 0 auto;
	margin-top: 26rpx;
	.pickpoint{
		display: flex;
		width: 100%;
		font-size: 31rpx;
		font-weight: bold;
		padding: 40rpx 18rpx;
	}
	.pickpointAddress{
		display: flex;
		font-weight: 500;
		flex: 1;
		width: 10rpx;
		align-items: center;
		justify-content: flex-end;
	}
	.pickpointImg{
		width: 20rpx;
		height: 20rpx;
	}
	.pointAddressText{
		padding: 0 20rpx 0 40rpx;
		flex: 1;
		text-align: right;
		width: 10rpx;
	}

}

.pickup-person-area{
	width: 697rpx;
	background: #FFFFFF;
	border-radius: 13rpx;
	margin: 0 auto;
	margin-top: 26rpx;
	margin-bottom: 30rpx;
	.pickpoint{
		display: flex;
		width: 100%;
		font-size: 31rpx;
		font-weight: bold;
		padding: 40rpx 18rpx;
		justify-content: space-between;
		align-items: center;
	}
	.more-person{
		width: 140rpx;
		height: 58rpx;
	}
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: center;
		// height: 176rpx;
		padding: 0 20rpx;
		border-top:1rpx solid rgba(216, 216, 216, 1) ;
		.a-img{
			width: 220rpx;
			height: 74rpx;
		}
	}
	.pickup-person-list{
		border-top: 1rpx solid #d8d8d8;
		.person-list-area{
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx 21rpx;
			.person-item{
				width: 160rpx;
				height: 74rpx;
				line-height: 68rpx;
				background: rgba(153,153,153,0.1);
				border-radius: 11rpx;
				border: 1px solid #999999;
				position: relative;
				font-size: 29rpx;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
				text-align: center;
				padding:0 22rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-weight: bold;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
			}
			.person-item.active{
				background: rgba(254,180,25,0.1);
				border: 2px solid #FEB419;
			}
			.person-item-active-img{
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: #FEB419;
				color: white;
				font-size: 20rpx;
				line-height: 1.2;
				border-radius:  10rpx 0rpx 10rpx 0rpx;
			}
		}
		.current-person{
			display: flex;
			align-items: center;
			padding:0 44rpx 22rpx;
			image{
				width: 44rpx;
				height: 44rpx;
			}
			.name{
				 text{
					padding-left: 20rpx;
					font-size: 25rpx;
					color: #666666;
				}
			}
		}
	}
}

.pickup-popup.people-popup{
	.popup-item .item-top{
		padding-top: 55rpx;
		padding-bottom: 55rpx;
		.name{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			 text{
				padding-left: 20rpx;
				font-size: 25rpx;
				color: #000000;
			}
		}
		
	}
	.popup-item.active{
		border:1px solid #FEB419;
	}
	.set-pickup-default{
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		padding: 22rpx;
		border-top: 1px dashed #CACACA;
	}
	.yuan {
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 200, 37, 0);
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}
	.yuan-img{
		width: 40rpx;
		height: 40rpx;
	}
	.select-dot{
		width: 22rpx;
		height: 22rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		.dot{
			width: 9rpx;
			height: 9rpx;
			background: #000;
			border-radius: 50%;
		}
	}
}

.commodity {
	display: flex;
	// align-items: center;
	.img {
		width: 174rpx;
		height: 142rpx;
		background: #f2f4f7;
		border-radius: 10rpx;
		flex-shrink: 0;
	}
	.title {
		flex: 1;
		margin-left: 20rpx;
		font-size: 31rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;

		.price-list {
			display: flex;
			margin-top: 18rpx;
			align-items: center;
			.price-r {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #fc5109;
				&:before {
					content: '¥';
					display: inline-block;
					color: #fc5109;
					font-size: 24rpx;
				}
			}
			.price-g {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #b5bcc9;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
	}
	.num-box {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		width: 160rpx;
		justify-content: space-between;
		.num {
			text-align: center;
			width: 50rpx;
		}
		.ctrl {
			width: 47rpx;
			height: 47rpx;
			background: #71B580;
			border-radius: 50%;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
		}
		.ctrl.disabled{
			background: #E8E8E8;
			color: #999999;
		}
	}
}
.btn-list {
	width: 750rpx;
	height: 166rpx;
	background: #ffffff;
	box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
	display: flex;
	position: fixed;
	bottom: 0;
	padding: 20rpx 50rpx;
	align-items: center;
	justify-content: space-between;
	.btn {
			width: 294rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F84A56, #FF9834);
			border-radius: 43rpx;
			text-align: center;
			line-height: 88rpx;

			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
	
	}
	.price-box {
		display: flex;
		align-items: center;
		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #393b3e;
		}
		.price {
			margin-left: 15rpx;
			font-size: 48rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #fc5109;
			&:before {
				content: '¥';
				display: inline-block;
				color: #fc5109;
				font-size: 24rpx;
			}
		}
		.post-text {
			margin-left: 15rpx;
			color: #fc5109;
			font-size: 24rpx;
		}
	}
}
.contacts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	image {
		width: 36rpx;
		height: 36rpx;
	}
	.contacts-left {
		.name-phone {
			display: flex;
			align-items: baseline;
			.name {
				font-size: 32rpx;
				font-family:  PingFang SC;
				font-weight: 400;
				color: #222222;
			}
			.phone {
				margin-left: 27rpx;
				font-size: 25rpx;
				font-family:  PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
		.adds {
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000;
			margin-top: 20rpx;
			max-width: 500rpx;
		}
	}
}
.people-popup {
	padding: 26rpx;
	min-height: 800rpx;

	.top-box {
		height: 80rpx;

		.top {
			position: fixed;
			left: 0;
			right: 0;
			color: #000;
			height: 80rpx;
			font-size: 0;
			overflow: hidden;
			padding: 0 26rpx;

			text {
				text-align: left;
				font-size: 31rpx;
				font-weight: 400;
				color: #000000;
			}

			.confirm {
				font-weight: 400;
				color: #000000;
			}
		}
	}

	.popup-list {
		height: 666rpx;
		overflow: scroll;

		.popup-item {
			border-radius: 12rpx;
			padding: 0 20rpx;
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #333333;
			font-weight: 400;
			background-color: #ffffff;

			.item-top {
				padding: 32rpx;

				img {
					color: #666666;
					width: 40rpx;
					height: 40rpx;
				}

				.name {
					font-size: 30rpx;
					color: #000000;
					overflow: hidden;

					text {
						color: #999999;
					}

					.tag {
						width: 70rpx;
						height: 32rpx;
						background: #FEB419;
						border-radius: 7rpx;
						line-height: 32rpx;
						text-align: center;
						font-size: 21rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}

				.com-flex-start {
					margin: 0 0 30rpx;
				}

				.subtitle {
					font-weight: 400;
					flex: 1;
					text-align: left;
					margin-top: 33rpx;

					.mobile {
						margin-bottom: 36rpx;
					}
				}

				.status {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					text-align: center;
					box-sizing: border-box;

					img {
						width: 27rpx;
						height: 21rpx;
					}
				}
				.statuss {
					background: linear-gradient(90deg, #fa2b66, #ff9834);
					border: none;
				}
				.noSelect {
					border: 1rpx solid #999999;
				}
			}

			.item-site {
				color: #666666;
				display: flex;
				align-items: center;
				padding: 36rpx 0;

				view {
					width: 23rpx;
					height: 23rpx;
					margin-right: 10rpx;
					border: 1rpx solid #999999;
					border-radius: 50%;

					view {
						width: 8rpx;
						height: 8rpx;
						background: #000000;
						border-radius: 50%;
						margin: auto;
					}
				}
			}
		}
	}

	.button {

		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 33rpx;
		color: #000000;

	}
}

.person-info {
	padding: 30rpx 30rpx 15rpx 30rpx;
	background: #fff;
	margin-top: 30rpx;
	border-radius: 16rpx;
}
.person-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #000;
}
.line {
	border-bottom: 1px solid #e3e5e8;
}
.flex {
	display: flex;
	align-items: center;
}
.left {
	width: 140rpx;
	height: 104rpx;
	line-height: 104rpx;
	font-family: PingFang;
	font-weight: bold;
	font-size: 31rpx;
	color: #000000;
}
.input {
	font-size: 31rpx;
	font-weight: 400;
	text-align: right;
}
.remark {
	padding:30rpx;
	display: flex;
	align-items: center;
	width: 698rpx;
	min-height: 120rpx;
	background: #ffffff;
	margin: 0 auto;
	border-radius: 0 0 14rpx 14rpx;
	.remark-title{

		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		flex-shrink: 0;

	}
	input {
		margin-left: 64rpx;
		width: 500rpx;
		font-size: 31rpx;
	}
}
.sb{
	justify-content: space-between;
}
	.tag {
		margin-top: 10rpx;
		// display: flex;
		// align-items: center;
		.tag-item {
			background: rgba(252, 81, 9, .08);
			border-radius: 4rpx;
			padding: 2rpx 6rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(252, 81, 9, 1);
			margin-right: 18rpx;
		}
	}
	.flex-c{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.new-box{
		background: #fff;
		width: 698rpx;
		margin: 0 auto;
		border-radius: 14rpx;
	}
	
	.tickets-box {
		width: 697rpx;
		background: #fff;
		height: 120rpx;
		.order-title {
			margin: 31rpx 0 31rpx 30rpx;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
		
		.coupon-btn {
			color: #6C7A94;
			
			.select {
				display: block;
				width: 140rpx;
				height: 58rpx;
				border: 2rpx solid #333333;
				border-radius: 30rpx;
				text-align: center;
				line-height: 58rpx;
				
		
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				margin-right: 20rpx;
		
			}
		}
		
		.coupon-price {
			color:#DD0000;
			font-size: 30rpx;
			font-weight: 500;
		}
	}
	.commodity-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:last-child{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		.commodity-price{
			&:before{
				
				content:"￥";
				font-size: 24rpx;
			}
		}
	}
	.top-line{
		border-top:rgba(216, 216, 216, 1) solid 2rpx ;
	}
	.post{
		height: 120rpx;
		padding: 0 30rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;

	}

.sendwayArea{
	margin: 26rpx;
	display: flex;
	border: 1px solid #71B580;
	border-radius: 13rpx;
	width: fit-content;
	background-color: white;
	width: 340rpx;
	height: 94rpx;
	position: relative;
	.sendway-item{
		padding: 26rpx;
		width: 170rpx;
		font-size: 28rpx;
		border-radius: 13rpx;
		font-weight: 500;
		position: absolute;
		top: -2rpx;
		bottom: -2rpx;
	}
	.sendway-item.active{
		background-image: linear-gradient(135deg, #9EE4FE, #7FD491);
	}

}

.add-edit-content{
	background-color: white;
	padding: 0 20rpx;
	border-radius: 20rpx;
}

</style>