You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
595 lines
14 KiB
595 lines
14 KiB
<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>
|
|
|