From 692860faaeb1807197a91759b13babe375a2cc7d Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Tue, 3 Dec 2024 16:46:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                    |   8 +-
 pages/user/user.vue           |   4 +-
 static/js/request.js          |   1 +
 subPackages/daoyou/detail.vue |  51 ++++++-
 subPackages/daoyou/order.vue  | 275 ++++++++++++++++++++++++++++++++++
 5 files changed, 333 insertions(+), 6 deletions(-)
 create mode 100644 subPackages/daoyou/order.vue

diff --git a/pages.json b/pages.json
index ce61180..d584bec 100644
--- a/pages.json
+++ b/pages.json
@@ -38,7 +38,13 @@
 			{
 				"path": "daoyou/detail",
 				"style": {
-					"navigationBarTitleText": "导游详情-app"
+					"navigationBarTitleText": "导游详情"
+				}
+			},
+			{
+				"path": "daoyou/order",
+				"style": {
+					"navigationBarTitleText": "填写订单"
 				}
 			}
 		]
diff --git a/pages/user/user.vue b/pages/user/user.vue
index 4980566..d490d45 100644
--- a/pages/user/user.vue
+++ b/pages/user/user.vue
@@ -32,7 +32,7 @@
 		
 		<view class="box-bg">
 			<view class="box">
-				<view v-for="(item,index) in list" :key="index" class="flex-between">
+				<view v-for="(item,index) in list" :key="index" class="flex-between" @click="gotoPath(item.path)">
 					<view style="display: flex;align-items: center;">
 						<image :src="item.img" class="item-icon"></image>
 						{{item.text}}
@@ -74,7 +74,7 @@
 					{
 						img: 'https://static.ticket.sz-trip.com/tourist/user/cxrxx.png',
 						text: '出行人信息',
-						path: ''
+						path: '/subPackages/user/travelerList'
 					},
 					{
 						img: 'https://static.ticket.sz-trip.com/tourist/user/yhxy.png',
diff --git a/static/js/request.js b/static/js/request.js
index 7a6d719..763a55a 100644
--- a/static/js/request.js
+++ b/static/js/request.js
@@ -10,6 +10,7 @@ Vue.prototype.NEWAPIURL = NEWAPIURL
 Vue.prototype.Post = (params, apiurl) => {
     if (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo')).token) params.token = JSON.parse(uni.getStorageSync('userInfo')).token
 	else if (store.state.user.userInfo.token) params.token = store.state.user.userInfo.token
+	params.token = 'f15f0d69-53a5-4330-b327-664fba53258b'
 	return new Promise((resolve, reject) => {
 		uni.showLoading({
 			title: '加载中'
diff --git a/subPackages/daoyou/detail.vue b/subPackages/daoyou/detail.vue
index 823c29f..be93f9a 100644
--- a/subPackages/daoyou/detail.vue
+++ b/subPackages/daoyou/detail.vue
@@ -66,12 +66,12 @@
 		<!-- 规格 -->
 		<view class="sku-box">
 			<view class="sku-item flex-between" v-for="(item,index) in sku" :key="index">
-				<view>
+				<view class="text-overflow">
 					<view class="sku-title">{{item.title}}</view>
 					<view class="sku-subtitle">提前沟通讲解内容</view>
 				</view>
 				<view class="sku-price">{{item.price}}</view>
-				<view class="sku-btn">预订</view>
+				<view class="sku-btn" @click="order">预订</view>
 			</view>
 		</view>
 	</view>
@@ -135,6 +135,12 @@
 			this.getEveryDay(this.year + '/' + this.month + '/' + 1)
 		},
 		methods: {
+			// 预订
+			order() {
+				uni.navigateTo({
+					url: '/subPackages/daoyou/order'
+				})
+			},
 			//轮播图左右滑动
 			swiperChange(e) {
 				this.current = e.detail.current;
@@ -481,10 +487,49 @@
 	.sku-box {
 		border-radius: 13rpx;
 		background-color: #fff;
-		margin-top: 28rpx;
+		margin-top: 100rpx;
 		
 		.sku-item {
 			height: 132rpx;
+			padding: 0 26rpx 0 28rpx;
+			
+			&>view:first-child {
+				width: 375rpx;
+			}
+			
+			.sku-title {
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #111111;
+			}
+			
+			.sku-subtitle {
+				font-weight: 500;
+				font-size: 24rpx;
+				color: #888888;
+				margin-top: 10rpx;
+			}
+			
+			.sku-price {
+				font-weight: bold;
+				font-size: 34rpx;
+				color: #DC2525;
+			}
+			.sku-price::before {
+				font-size: 24rpx;
+				content: '￥';
+			}
+			
+			.sku-btn {
+				width: 133.33rpx;
+				line-height: 50.67rpx;
+				background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/btnBg.png');
+				background-size: 100% 100%;
+				text-align: center;
+				font-weight: 500;
+				font-size: 31rpx;
+				color: #FFFFFF;
+			}
 		}
 		.sku-item:nth-child(n+2) {
 			border-top: 1rpx solid #D8D8D8;
diff --git a/subPackages/daoyou/order.vue b/subPackages/daoyou/order.vue
new file mode 100644
index 0000000..4295c9c
--- /dev/null
+++ b/subPackages/daoyou/order.vue
@@ -0,0 +1,275 @@
+<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>
\ No newline at end of file