chenkainan
11 months ago
5 changed files with 333 additions and 6 deletions
@ -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> |
||||
Loading…
Reference in new issue