yandu_WeChat/subPackages/ticketBooking/order.vue

<template>
	<view class="bg">
		<view class="top-box" >
			<view class="top-left">
				<view class="text-overflow">{{ pInfo.title }}</view>
				<view style="margin-top: 20rpx;">
					<view class="left-subtitle" v-if="allSeldDate.length > 0">{{allSeldDate[seldDateIndex].date}} {{ShowDateDay(new Date(allSeldDate[seldDateIndex].date).getDay())}}</view>
					<view class="left-subtitle"  v-if="timesArr.length > 0">{{ timesArr[seldTimeIndex].start_time }}-{{ timesArr[seldTimeIndex].end_time }} 入园</view>
				</view>
			</view>
			<view @click="showSkuPopup = true" v-if="this.sInfo.ticket_type != 2">修改 ></view>
		</view>
		
		 <view class="num-box" v-for="(skuItem,skuIndex) in pInfo.specifications" :key="skuIndex">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view class="left-title text-overflow">{{skuItem.title}}</view>
				<view class="left-price">{{skuItem.price / 100}}</view>
				<view class="num-right">
					<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="delNumber(skuItem)" :style="{color: skuItem.buyNum > 1 ? '#fff': '', backgroundColor: skuItem.buyNum > 1 ? '#0B898E' : ''}">-</view>
					<view class="num-span">{{ skuItem.buyNum }}</view>
					<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="addNumber(skuItem)" style="color: #fff;background: #0B898E;">+</view>
				</view>
			</view>
			<view class="num-subtitle text-overflow" v-if="skuItem.display_tags" @click="showNoticePopup = true">
				<view class="num-span" v-for="(tagSku,tagSkuIndex) in skuItem.display_tags.split(',').slice(0, 2)" :key="tagSkuIndex">{{ tagSku }} |</view>
				<view class="num-span">预订须知 ></view>
			</view>
		</view>
		
		<view class="people-box" >
			<view class="people-box-sku" v-for="(skuItem,skuIndex) in pInfo.specifications.filter(v=>v.buyNum>=1)" :key="skuIndex">
				<view>{{skuItem.title}}</view>
				<view v-for="(person,personIndex) in skuItem.selPeople" :key="personIndex" @click="person.id=1;showAddressPopUp(person)">
					<view v-if="person.id">123</view>
					<view v-else>点击添加出行人信息</view>
				</view>
				
			</view>
		</view>
		
		
		<!-- 选择出行人 -->
		<uni-popup ref="addressPopup" type="bottom" backgroundColor="#F4F4F4" >
			<view class="people-popup">
				<view class="top flex-between" style="padding-bottom: 14rpx;">
					<text></text>
					<!-- <text class="text-overflow" @click="changeAddressAddPopup('close')">取消</text> -->
					<!-- <text style="font-size: 35rpx;font-weight: 600;">添加收货地址</text> -->
					<text style="color: #71B580;" class="confirm" @click="changeAddressPopup('close',true)">保存</text>
				</view>
				<view class="button">添加出行人</view>
				<view class="popup-list" v-if="addressList.length > 0">
					<view :class="['popup-item',addressSelect.id==item.id?'active':'']" v-for="(item, index) in addressList" :key="index" @click="seldThisAddress(item)">
						<view class="item-top flex-between">
							<view style="padding-right: 71rpx;">
								<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 text-overflowRows">身份证 {{ item.id_number}}</view>
							</view>
							<view>
								<img :src="showImg('/uploads/20240827/337cf610ce5924c2a65b7a28b6a4891e.png')" alt="" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pInfo: {specifications: []}, // 当前商品
				sInfo: {sku_model: {}}, // 当前门票

				minSeldDate: new Date().Format('yyyy-MM-dd'),
				maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'),
				calendarParam: {
					stratDate:'',endDate: '', selected: []
				},
				allSeldDate: [],
				seldDateIndex: 0,
				timesArr: [],
				seldTimeIndex: 0,
				
				buyNum: 0,
				
				addressList: [],
				currentPerson: {},
				addressSelect: {},
				
			}
		},
		onLoad(options) {
			// this.getList();
			
			uni.$on("updateDataByConnect",this.getDataByConnect)
		},
		
		onShow() {
			this.getAddressList()
			this.handlePageData()
		},
		
		onUnload () {
			uni.$off("updateDataByConnect",this.getDataByConnect)
		},
		methods: {
			getDataByConnect(data) {
				if (data.msgType == "updateTicketBookingOrder") {
					uni.setStorageSync('tempData', JSON.stringify(data.data));
					
					// this.pInfo = data.data.pInfo
					// this.sInfo = data.data.sInfo
					// this.minSeldDate=data.data.minSeldDate
					// this.maxSeldDate = data.data.maxSeldDate
					// this.calendarParam = data.data.calendarParam
					// this.allSeldDate = data.data.allSeldDate
					// this.seldDateIndex = data.data.seldDateIndex
					// this.timesArr = data.data.timesArr
					// this.seldTimeIndex = data.data.seldTimeIndex 
				}
			},
			
			// 选择出行人
			showAddressPopUp (person) {
				person.id = 1
				this.currentPerson = person
				if (person.id) {
					this.addressSelect = person
				} else {
					this.addressSelect = {}
				}
				this.changeAddressPopup('open')
			},
			
			// 获取出行人信息
			getAddressList () {
				this.Post({},'/api/user/contactList').then((res)=> {
					this.addressList = res.data || []
				})
			},
			// 出行人弹窗
			changeAddressPopup(type, confirm) {
				if (confirm) {
					// 赋值
					this.currentPerson.id = this.addressSelect.id
					this.currentPerson.id_number = this.addressSelect.id_number
					this.currentPerson.tel = this.addressSelect.tel
					this.currentPerson.user_id = this.addressSelect.user_id
					this.currentPerson.age = this.addressSelect.age
					
					console.log(this.currentPerson, this.pInfo)
				}
				
				if (type == 'open') this.$refs.addressPopup.open('bottom');
				else this.$refs.addressPopup.close();
				this.$forceUpdate();
			},
			seldThisAddress(item){
				this.addressSelect = item
			},
			
			
			handlePageData () {
				let data = uni.getStorageSync('tempData');
				try{
					data = JSON.parse(data)
					this.pInfo = data.pInfo
					this.sInfo = data.sInfo
					this.minSeldDate=data.minSeldDate
					this.maxSeldDate = data.maxSeldDate
					this.calendarParam = data.calendarParam
					this.allSeldDate = data.allSeldDate
					this.seldDateIndex = data.seldDateIndex
					this.timesArr = data.timesArr
					this.seldTimeIndex = data.seldTimeIndex 
					
				} catch(e){
					console.log(e)
				}
			},
			
			
			// 减少数量
			delNumber(skuItem) {
				if (skuItem.buyNum <= 0) {
					return
				}
				// if(this.buyNum == this.seldPeople.length) {
				// 	this.allSeldPeople.forEach(item => {
				// 		if(item.id == this.seldPeople[this.seldPeople.length -1].id) {
				// 			item.is_seld = false
				// 			item.selected = false
				// 		}
				// 	})
				// 	this.seldPeople.pop()
				// }
				skuItem.buyNum -= 1
				skuItem.selPeople.pop()
				// this.removeSeldCoupon()
			},
			// 增加数量
			addNumber(skuItem) {
				skuItem.buyNum += 1
				// if(this.max_num && this.buyNum > this.max_num){
				// 	this.buyNum = this.max_num
				// 	this.$toast("本产品单笔限购"+this.max_num+"份")
				// }
				if (Array.isArray(skuItem.selPeople)) {
					skuItem.selPeople.push({})
				} else {
					skuItem.selPeople = [{}]
				}
			},
			
			// 选择时段
			changeTime(item, index) {
				if(item.stock_number > 0) {
					this.seldTimeIndex = index
				}
			},
			// 选择日期
			clickTab(item, index) {
				this.seldDateIndex = index
				this.getTimes()
			},
			confirmCalendar (val) {
				let index = this.allSeldDate.find(v=>v.date == val.fulldate)
				if (index) {
					this.clickTab({},index)
				}
			},
			// 获取价格日历
			getDays() {
				let that = this
				that.Post({
					url: '',
					start_date: that.minSeldDate,
					end_date: that.maxSeldDate,
					sku_id: that.skuInfo.id
				},'https://api.cloud.sz-trip.com/api/product/product_date_price').then(function (result) {
					let res = result.data
					if (res) {
						that.allSeldDate = res
						// 初始化选择项目
						for (let i = 0; i < that.allSeldDate.length; i++) {
							if (that.allSeldDate[i].stock > 0) {
								that.seldDateIndex = i
								break;
							}
							// that.allSeldDate[i].price = that.sInfo.price
						}
						that.openPop()
						that.getTimes()
					}
				})
			},
			getTimes() {
				let that = this
				// 判断是否是分时的，不是就不需要去请求了的
				if (!that.skuInfo.sku_model.is_time_stock) {
					return
				}
				if (that.seldDateIndex < 0) {
					return;
				}
				that.seldTimeIndex = -1
				that.Post({
					url: '',
					date: that.allSeldDate[that.seldDateIndex].date,
					sku_id: that.allSeldDate[that.seldDateIndex].sku_id ? that.allSeldDate[that.seldDateIndex].sku_id : that.skuInfo.id
				},'https://api.cloud.sz-trip.com/api/product/product_timestock_price').then(function (result) {
					let res = result.data
					if (res) {
						that.timesArr = res
						for (let i = 0; i < that.timesArr.length; i++) {
							if (that.timesArr[i].stock_number > 0) {
								that.seldTimeIndex = i
								break;
							}
						}
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		padding: 20rpx;
		background-color: rgb(247, 247, 247);
	}
	
	.top-box {
	    width: 100%;
	    background: #FFFFFF;
	    border-radius: 18rpx;
	    padding: 20rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-weight: 500;
	    font-size: 36rpx;
	    color: #0B898E;
	
	    .top-left {
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;
	        font-weight: bold;
	        font-size: 45rpx;
	        color: #000000;
	        flex: 1;
			width: 1rpx;
	
	        .left-subtitle {
	            font-weight: 400;
	            font-size: 36rpx;
	            color: #666666;
	        }
	    }
	}

.num-box {
    width: 100%;
    // height: 3.22rem;
    background: #FFFFFF;
    border-radius: 18rpx;
    display: flex;
    justify-content: space-between;
	flex-direction: column;
	margin: 20rpx 0;
	padding: 20rpx;

    .num-left {
        width: 100%;
        // padding: .5rem 0 .6rem .32rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-weight: 400;
        font-size: 27rpx;
        color: #666666;

        .left-title {
            font-weight: bold;
            font-size: 45rpx;
            color: #000000;
            width: 450rpx;
        }

        .left-price {
            font-weight: 500;
            font-size: 45rpx;
            color: #D62828;
        }
        .left-price::before {
            font-size: 27rpx;
            content: '￥';
        }


    }
	.num-subtitle {
	    font-weight: 400;
	    font-size: 27rpx;
	    color: #0B898E;
	    width: 100%;
		display: flex;
	}
    .num-right {
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
        display: flex;
        text-align: center;

        .num-span {
            width: 90rpx;
            line-height: 63rpx;
        }

        .btn-num {
            width: 63rpx;
            height: 63rpx;
            line-height: 63rpx;
            background: rgba(135,205,147,0);
            border-radius: 50%;
            border: 1px solid #999999;
            font-weight: 500;
            font-size: 45rpx;
            color: #999999;
        }
    }
}

.people-box{
	width: 100%;
	// height: 3.22rem;
	
	
	.people-box-sku{
		width: 100%;
		background: #FFFFFF;
		border-radius: 18rpx;
		// display: flex;
		// justify-content: space-between;
		margin: 20rpx 0;
		padding: 20rpx;
	}
}

.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: 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;
				
				img {
					color: #666666;
					width: 40rpx;
					height: 40rpx;
				}

				.name {
					overflow: hidden;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					display: flex;
					align-items: baseline;

					text {
						color: #666;
						font-size: 25rpx;
						padding: 0 24rpx;
					}

					.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: #71B580;

					}
				}

				.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{
			background-image: linear-gradient(135deg, #9EE4FE, #7FD491);
		}
	}

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

	}
}

</style>