tourist/subPackages/line/orders.vue

<template>
	<view class="bg">
		<view class="top-box" v-if="product">
		    <view class="product-title">{{ product.title }}</view>
		    <view class="product-subtitle">出行日期：{{ selectDate.date }}</view>
		    <view class="product-subtitle">
		        已选：<text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.title }}x{{ item.num }}</text>
		    </view>
		</view>
		
		<view class="user-box">
			<view class="user-box-title">出行人信息</view>
			
			<view v-for="(skuItem, skuIndex) in sku" :key="skuIndex">
			    <view class="user-item" v-for="(item, index) in skuItem.num" :key="index">
					<text class="user-item-text">{{ skuItem.title }}</text>
			
			        <view v-if="linkmans[skuIndex][index]" class="user-info">
			            <text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text>
			            <text>{{ linkmans[skuIndex][index].tel }}</text>
			        </view>
			
					<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" />
					
			        <view @tap="showLinkman(skuIndex)" v-else class="add-btn">
			            + 添加
			        </view>
			    </view>
			</view>
			<!-- <view class="user-item">
			    <text class="user-item-text">姓名</text>
			    <input v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/>
			</view> -->
			<view class="user-item">
			    <text class="user-item-text">联系电话：</text>
			    <input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/>
				<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons>
			</view>
			<view class="user-item" style="border-bottom: none">
			    <text class="user-item-text">订单备注：</text>
			    <input type="text" v-model="remark" placeholder="选填"  class="user-input"/>
			</view>
		</view>
		
		<!-- <navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between">
		    <text>优惠券</text>
		    <view style="display: flex;align-items: center;">
				<view class="add-btn" v-if="!coupon">选择优惠券</view>
				<view style="display: flex;align-items: center;color: #C3282E;font-weight: bold;" v-if="coupon && coupon.CouponActivity">
					<view>-￥{{coupon.CouponActivity.discounts/100}}</view>
				</view>
				<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon">
			</view>
		</navigator> -->
		
		<!-- <view class="xy-box">
			<view class="quan flex-center" @click="clickXy">
				<view class="quan-seld" v-if="xySeld"></view>
			</view>
			<view style="margin-left: 20rpx;">
				请您仔细阅读<span @click="openXz">线路标准退预定须知</span>，点击去支付即代表您已阅读条款内容
			</view>
		</view> -->
		
		<view class="fixed-bottom">
		    <view class="order-all-price">
		        合计：
		        <text class="order-all-text">
					¥{{ priceTotal() / 100 }}
				</text>
		    </view>
		    <view class="order-btn" @tap="order">去支付</view>
		</view>
		
		<!-- 协议弹框 -->
		<!-- <uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="xzPopup">
				<view v-html="formateRichText(product.reserve_content)"></view>
				<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup">
			</view>
		</uni-popup> -->
		
		<!-- 选择出行人 -->
		<uni-popup ref="contactPopup" type="bottom" backgroundColor="#F4F4F4" >
			<view class="people-popup">
				<view class="ptop-box">
					<view class="top flex-between" style="padding-bottom: 14rpx;">
						<text class="text-overflow" @click="$refs.contactPopup.close()">取消</text>
						<text style="color: #96684F;" class="confirm" @click="$refs.contactPopup.close()">确定</text>
					</view>
				</view>
				
				<view class="button" @click="$refs.contactAddPopup.open()">添加出行人</view>
				<view class="popup-list" v-if="peopleList.length > 0">
					<view :class="['popup-item', item.is_seld ? 'active': '']"
						v-for="(item, index) in peopleList" :key="index" @click="seldThisPeople(item,index)">
						<view class="item-top flex flex-items-center">
							<image src="https://static.ticket.sz-trip.com/tourist/daoyou/edit.png" class="edit-img" @click.stop="changeContactAddPopup('open',item)"></image>
							<view class="name flex-shrink-0" style="padding-left: 32rpx;width: 180rpx;">{{item.name}}</view>
							<view class="flex-1 w-1rpx" style="padding-left: 20rpx;">
								<view class="name">
									<text>手机号 {{ item.tel }}</text>
									<text class="tag" v-if="item.is_default == 1">默认</text>
								</view>
								<view class="subtitle text-overflowRows">身份证 {{ item.id_number}}</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 新增编辑出行人弹窗 -->
		<uni-popup ref="contactAddPopup" type="bottom" backgroundColor="#F4F4F4" style="border-radius: 13rpx 13rpx 0 0;">
			<view class="people-popup" style="padding: 0;">
				<view class="ptop-box">
					<view class="top flex-between" style="height: fit-content;">
						<text class="text-overflow" @click="changeContactAddPopup('close')">取消</text>
						<text style="color: #96684F;" class="confirm" @click="saveContact">保存</text>
					</view>
				</view>
				
				<view class="add-edit-content">
					<contactAddVue ref="contactAddVueRef"></contactAddVue>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import contactAddVue from '@/components/contactAdd.vue';
	export default {
		components: {contactAddVue},
		data() {
			return {
				product: this.$store.state.user.lineInfo.product,
				sku: this.$store.state.user.lineInfo.sku,
				selectDate: this.$store.state.user.lineInfo.selectDate,
				linkmans: [],
				sku_ids: '',
				price: this.$store.state.user.lineInfo.price,
				skuIndex: null,
				coupon: '',
				reserve_name: '',
				reserve_phone: '',
				reserve_mobile: '',
				remark: '',
				peopleList: [],
				linkmanList: [],
				xySeld: false
			}
		},
		onReady() {
			// 清除优惠券
			this.$store.commit("choseCoupon", "");
			// 自动获取手机号
			// this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile
			this.Post({
				goods_id: this.sku[0].goods_id
			},'/api/goods/getGoodDetail').then(res => {
				this.product = res.data
			})
			
			let linkmans = [];
			let sku_ids = [];
			this.sku.map((item) => {
			    let num = Number(item.num);
			    linkmans.push(new Array(num));
			    sku_ids.push(item.id);
			});
			this.linkmans = linkmans
			this.sku_ids = sku_ids
			
			this.getPeople()
		},
		onShow() {
			this.coupon = this.$store.state.user.coupon
			console.log('传过来的优惠券',this.coupon);
		},
		methods: {
			// 协议
			clickXy() {
				this.xySeld = !this.xySeld
			},
			openXz() {
				this.$refs.popup.open('bottom')
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 去支付
			order() {
				let flag = true
				let product_list = [];
				this.sku.map((item, index) => {
					if(item.num > 0) {
						let linkman = this.linkmans[index].filter(i => i);
						if(linkman.length < item.num) {
							flag = false
							uni.showToast({
							    title: '请选择对应的出行人',
							    icon: 'none'
							});
							return;
						}
						let pId = []
						linkman.map(lItem => {
							pId.push(lItem.id)
						})
						product_list.push({
						    goods_id: this.product.id,
						    specifications_id: item.id,
						    num: item.num,
						    contact_id: pId,
						    date: this.selectDate.date
						});
					}
				})
				
				// if(!this.idChinaName(this.reserve_name)) {
				// 	flag = false
				// 	uni.showToast({
				// 	    title: '请输入联系人',
				// 	    icon: 'none'
				// 	});
				// 	return;
				// }
				
				if(!this.IsTel(this.reserve_phone)) {
					flag = false
					uni.showToast({
					    title: '请输入联系方式',
					    icon: 'none'
					});
					return;
				}
				
				// if(!this.xySeld) {
				// 	flag = false
				// 	uni.showToast({
				// 	    title: '请先同意预订须知内容',
				// 	    icon: 'none'
				// 	});
				// 	return;
				// }
				
				if(flag){
					let data = {
					    goods: product_list,
					    coupon: this.coupon ? this.coupon.id : null,
						remark: this.remark,
						reserve_phone: this.reserve_phone
					};
					
					this.Post({
						data: JSON.stringify(data),
						method: 'POST',
					},'/api/order/place').then(res => {
						console.log(res)
						if(res.code == 1) {
							let order_id = res.data.order_id
							this.$store.commit("changeLineInfo", null);
							this.$store.commit("choseCoupon", "");
							
							this.Post({
								order_id: order_id,
								type: "miniprogram",
								platform: 'miniprogram'
							}, '/api/pay/unify').then(res => {
								if (res.data) {
									let data = res.data
									WeixinJSBridge.invoke('getBrandWCPayRequest', {
										"appId": data.appId,     //公众号ID，由商户传入     
										"timeStamp": data.timeStamp,     //时间戳，自1970年以来的秒数     
										"nonceStr": data.nonceStr,      //随机串     
										"package": data.package,
										"signType": data.signType,     //微信签名方式：     
										"paySign": data.paySign //微信签名 
									},
									function(res) {
										// if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 	// 使用以上方式判断前端返回,微信团队郑重提示：
										// 	//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										// }
										uni.navigateTo({
											url: '/subPackages/order/orderResult'
										})
									});
								}
							})
						}
					})
				}
			},
			// 总价
			priceTotal() {
				let price = 0
				if(this.coupon) {
					if (this.coupon.percent == 0) {
						price = this.price - this.coupon.CouponActivity.discounts
					} else{
						price = this.price - (this.price * this.coupon.CouponActivity.percent/100)
					}
				}else {
					price = this.price
				}
				return price < 0 ? 0 : price
			},
			// 获取出行人列表
			getPeople() {
				this.Post({
					offset: 0,
					limit: 100
				},'/api/user/contactList').then(res => {
					this.peopleList = res.data
					this.reserve_mobile = this.peopleList[0].tel
					// 如果是添加或者修改完出行人后需要默认选中已选择的出行人
					if(this.linkmanList.length > 0){
						for (let i = 0; i < this.linkmanList.length; i++) {
							for (let j = 0; j < this.peopleList.length; j++) {
								if(this.peopleList[j].id == this.linkmanList[i].id){
									this.linkmanList[i] = this.peopleList[j]
									this.peopleList[j].is_seld = true
									this.linkmanList[i].is_seld = true
								}
							}
						}
						this.$forceUpdate()
					}
				})
			},
			// 保存出行人
			async saveContact () {
				let res = await this.$refs.contactAddVueRef.submit()
				if (res && res.code == 1) {
					this.getPeople();
					this.changeContactAddPopup('close')
					console.log('this.linkmanList3',this.linkmanList)
				}
			},
			// 选择出行人弹框
			showLinkman(skuIndex) {
				if(this.peopleList.length == 0) {
					this.$refs.contactAddPopup.open()
					return;
				}
				
				this.skuIndex = skuIndex
				
				this.peopleList.map(item => {
					if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) {
						item.is_disable = true
					}else {
						item.is_disable = false
					}
				})
				
				this.$refs.contactPopup.open('bottom')
				this.$forceUpdate()
			},
			// 出行人弹框
			changeContactAddPopup(type, item) {
				if(type == 'open') {
					// 如果没有出行人或编辑 打开新增编辑弹窗
					if (this.peopleList.length<=0 || item.id) {
						
						this.$refs.contactAddPopup.open()
						
						if(item.id) {
							this.$nextTick(()=>{
								this.$refs.contactAddVueRef.init(item)
							})
						}
						return;
					}
					this.$refs.contactPopup.open()
				}else {
					this.$refs.contactAddPopup.close()
				}
			},
			// 选择出行人
			seldThisPeople(item,index) {
				let num = 0
				let list = []
				
				if(item.is_seld && item.is_disable) {
					uni.showToast({
					    title: '该联系人已选择为其他规格',
					    icon: 'none'
					});
					return;
				}
				this.linkmans[this.skuIndex] = []
				this.peopleList.map(items => {
					if(items.id == item.id) {
						items.is_seld = !items.is_seld
					}
					if(items.is_seld && !items.is_disable) {
						num++;
						items.is_sku = this.sku[this.skuIndex].id
						this.linkmans[this.skuIndex].push(items)
					}
					if(items.is_seld) {
						this.linkmanList.push(item)
					}
				})
				if(num > this.sku[this.skuIndex].num) {
					item.is_seld = false
					this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1)
					uni.showToast({
					    title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人',
					    icon: 'none'
					});
					return;
				}
				this.$forceUpdate()
			},
			// 确定取消
			changePeoplePopup(type,confirm) {
				this.$refs.peoplePopup.close()
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #f6f6f6;
		min-height: 100vh;
		padding: 26.67rpx 26.67rpx 200rpx;
	}
	
	.top-box {
	    padding: 30rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		
		.product-title {
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
		}
		
		.product-subtitle {
		    font-weight: 500;
		    font-size: 27rpx;
		    color: #333333;
		    margin-top: 20rpx;
		}
	}
	
	.user-box {
	    margin-top: 25rpx;
	    background: #ffffff;
	    border-radius: 13rpx;
		
		.user-box-title {
		    // border-bottom: 1rpx solid #ccc;
		    line-height: 113rpx;
		    font-size: 33rpx;
		    color: #000;
		    font-weight: bold;
		    padding: 0 20rpx;
		}
		
		.user-item {
		    margin: 0 20rpx;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    height: 126rpx;
		    border-top: 1rpx solid rgba(184, 184, 184, .5);
			
			.user-item-text{
				flex-shrink: 0;
				font-size: 31rpx;
				color: #000;
				font-weight: bold;
				margin-right: 20rpx;
			}
			
			.user-info {
			    font-size: 27rpx;
			    margin-right: 20rpx;
			    flex: 1;
			    text-align: left;
			}
			
			.icon-bianji1 {
				width: 36rpx;
				height: 36rpx;
			    margin-right: 10rpx;
			}
			
			.add-btn {
			    display: flex;
			    width: 153rpx;
			    height: 57rpx;
			    border: 1rpx solid #333333;
			    border-radius: 29rpx;
			    box-sizing: border-box;
			    justify-content: center;
			    align-items: center;
			    font-size: 28rpx;
			    color: #000;
			}
			
			.user-input {
			    flex: 1;
			    font-size: 29rpx;
			    display: block;
				text-align: right;
			}
			
			.icon-coupon{
				width: 20rpx;
				height: 20rpx;
				margin-left: 15rpx;
			}
		}
	}
		
	.fixed-bottom {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 148rpx;
	    background: white;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 26rpx;
		box-sizing: border-box;
	    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
	    z-index: 1;
		
		.order-all-price {
		    flex: 1;
		    font-size: 29rpx;
		    color: #333;
		    font-weight: 500;
			
			.order-all-text {
			    flex: 1;
			    font-size: 36rpx;
			    color: #C3282E;
				font-weight: bold;
			}
		}
		
		.order-btn {
		    width: 233rpx;
		    text-align: center;
		    line-height: 73rpx;
		    background: #DC2525;
		    border-radius: 11rpx;
		    color: #fff;
		    font-weight: bold;
		    font-size: 32rpx;
		    margin-left: 30rpx;
		}
	}
	
	.xy-box {
		width: 658rpx;
		margin: 36rpx auto 0;
		font-size: 27rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #999999;
		display: flex;
		
		span {
			color: #FEB419;
		}
		
		.quan {
			min-width: 23rpx;
			min-height: 23rpx;
			max-width: 23rpx;
			max-height: 23rpx;
			border: 1px solid #999999;
			border-radius: 50%;
			
			.quan-seld {
				width: 12rpx;
				height: 12rpx;
				background: #FEB419;
				border-radius: 50%;
			}
		}
	}
	
	.xzPopup {
		width: 750rpx;
		padding: 33rpx 26rpx 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
		height: 1200rpx;
		overflow-y: scroll;
	
		view {
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 35rpx;
		}
	
		img {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 33rpx;
			right: 27rpx;
		}
	}
	
	.coupon-box {
		height: 113rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		padding: 0 20rpx;
		margin: 0 20rpx;
		
		.add-btn {
			width: 153rpx;
			line-height: 40rpx;
			background: #C3282E;
			border-radius: 9rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		
		.icon-coupon{
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
	}
	
	.people-popup {
		padding: 26rpx;
		height: 800rpx;
		background: #F7F7F7;
	
		.ptop-box {
			height: 100rpx;
			display: flex;
			align-items: center;
	
			.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: 35rpx;
					font-weight: 400;
					color: #000000;
				}
	
				.confirm {
					font-weight: 400;
					color: #000000;
				}
			}
		}
		
		.popup-list {
			height: 666rpx;
			overflow: scroll;
		
			.popup-item {
				border-radius: 12rpx;
				padding: 2rpx;
				margin-top: 24rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
				background-color: #ffffff;
		
				.item-top {
					border-radius: 12rpx;
					padding: 30rpx 40rpx;
					background-color: #ffffff;
					
					image {
						color: #666666;
						width: 40rpx;
						height: 40rpx;
					}
		
					.name {
						overflow: hidden;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
		
						text {
							color: #666;
							font-size: 25rpx;
						}
		
						.tag {
							padding: 0 8rpx;
							height: 32rpx;
							border-radius: 7rpx;
							line-height: 30rpx;
							text-align: center;
							font-size: 23rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							background: #96684F;
							margin-left: 10rpx;
						}
					}
		
					.com-flex-start {
						margin: 0 0 30rpx;
					}
		
					.subtitle {
						font-weight: 400;
						flex: 1;
						text-align: left;
						margin-top: 33rpx;
						color: #666666;
						font-size: 25rpx;
		
						.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;
						}
					}
				}
			}
			
			.popup-item.active{
				border: 2rpx solid #96684F;
			}
			.popup-item.disabled{
				.item-top {
					background-color: #CCC;
				}
			}
		}
		
		.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;
		}
		
		.add-edit-content{
			border-radius: 13rpx;
			min-height: 800rpx;
			margin: 0 22rpx;
		}
	}
</style>