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