tourist/subPackages/daoyou/order.vue

<template>
	<view class="bg">
		<view class="top-box">
			<view class="top-title">xxx大师级导游讲解xxx大师级导游讲解xxx大 师级导游讲解</view>
			<view class="top-subtitle">出行日期：2024年9月17日</view>
			<view class="top-subtitle">已选：上午场  09:30-12:00</view>
		</view>
		
		<!-- 出行人数 -->
		<view class="num-box flex-column">
			<view class="flex-between">
				<view>出行人数 <span>请如实填写，必填</span></view>
				<view style="display: flex;align-items: center;">
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/numDel.png" @click="changeNum(0)"></image>
					<view class="num">{{buyNum}}</view>
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/numAdd.png" @click="changeNum(1)"></image>
				</view>
			</view>
			<view>注：若超过最大出行人数，请预约多名导游</view>
		</view>
		
		<!-- 出行信息 -->
		<view class="people-box">
			<view>{{skuInfo.is_card ? '需填'+buyNum+'位出行人' : '无需填写出行人'}}</view>
			
			<!-- is_card是否实名 -->
			<view v-if="skuInfo.is_card">
				<view class="people-list">
				    <view class="people-item flex-between" v-for="(item,index) in seldPeople" :key="item.id">
						<image src="https://static.ticket.sz-trip.com/tourist/daoyou/del.png" class="del-img" @click="removeSeldPeople(item, index)"></image>
				        <view class="item-peopleNum">
				            出行人{{index + 1}}
				        </view>
				        <view class="item-text">
				            <view class="name text-overflow">{{ item.name }}</view>
				            <view class="subtitle">手机号 {{ item.tel }}</view>
				            <view class="subtitle">{{ item.title }} {{ item.id_number }}</view>
				        </view>
						<image src="https://static.ticket.sz-trip.com/tourist/daoyou/edit.png" class="edit-img" @click="gotoEditContacts(item)"></image>
				    </view>
				</view>
				<view class="people-add" v-for="(item,index) in buyNum" :key="index">
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/add.png" class="add-img"></image>
					<view>出行人{{index + 1}}  点击填写1位出行人信息</view>
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/peopleRight.png" class="right-img"></image>
				</view>
			</view>
			<view class="flex-between">
				联系电话
				<input type="number" maxlength="11" v-model="phone" placeholder="请填写联系手机号"/>
				<image src="https://static.ticket.sz-trip.com/tourist/daoyou/phoneClear.png" v-if="phone.length > 0" @click="phone = ''"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buyNum: 1,
				skuInfo: {is_card: 1},
				phone: '',
				seldPeople: [
					{
						name: '张三',
						tel: '13888888888',
						title: '身份证',
						id_number: '123************123',
						id: 1
					}
				]
			}
		},
		methods: {
			// 取消选中出行人
			removeSeldPeople(item,index) {
				for (let i = 0; i < this.seldPeople.length; i++) {
				    if (this.seldPeople[i].id == item.id) {
				        this.seldPeople.splice(i, 1)
				    }
				}
			},
			// 选择数量
			changeNum(type) {
				if(type) {
					// 增加数量
					this.buyNum += 1
				}else {
					// 减少数量
					if (this.buyNum <= 1) {
					    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()
					// }
					this.buyNum -= 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F7F7F7;
		min-height: 100vh;
		padding: 26.67rpx 26.67rpx 200rpx;
	}
	
	.top-box {
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 30rpx 36rpx 30rpx 19rpx;
		
		.top-title {
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			line-height: 40rpx;
		}
		
		.top-subtitle {
			margin-top: 15rpx;
			font-weight: 500;
			font-size: 27rpx;
			color: #333333;
		}
	}
	
	.num-box {
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin-top: 26.67rpx;
		padding: 20rpx 22rpx;
		justify-content: space-around;
		
		&>view:first-child {
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			
			span {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-left: 18rpx;
			}
		}
		
		&>view:last-child {
			font-weight: 500;
			font-size: 24rpx;
			color: #DC2525;
		}
		
		image {
			width: 46.67rpx;
			height: 46.67rpx;
		}
		
		.num {
			width: 67rpx;
			text-align: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
		}
	}
	
	.people-box {
		margin-top: 27.33rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		
		&>view {
			padding: 40rpx 20rpx;
		}
		
		&>view:nth-child(n+2) {
			border-top: 1rpx solid rgba(204, 204, 204, .5);
		}
		
		&>view:last-child {
			input {
				font-weight: 500;
				font-size: 31rpx;
				color: #999999;
				flex: 1;
				margin: 0 40rpx;
			}
			
			image {
				width: 20rpx;
				height: 20rpx;
			}
		}
		
		.people-list {
			.people-item {
				padding: 0 20rpx;
				
				.del-img {
					width: 45.33rpx;
					height: 45.33rpx;
				}
				
				.item-peopleNum {
					font-weight: 400;
					font-size: 27rpx;
					color: #000000;
				}
				
				.item-text {
					.name {
						font-weight: 400;
						font-size: 31rpx;
						color: #000000;
					}
					
					.subtitle {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
				
				.edit-img {
					width: 32.67rpx;
					height: 32.67rpx;
				}
			}
			.people-item:nth-child(n+2) {
				margin-top: 20rpx;
			}
		}
		
		.people-add {
			height: 80rpx;
			background: #F9F5F0;
			border-radius: 13rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 27rpx;
			color: #96684F;
			padding: 0 20rpx;
			
			.add-img {
				width: 45.33rpx;
				height: 45.33rpx;
				margin-right: 28rpx;
			}
			
			.right-img {
				width: 20rpx;
				height: 20rpx;
				margin-left: auto;
			}
		}
		.people-add:not(:first-child) {
			margin-top: 26rpx;
		}
	}
</style>