盐都小程序
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.
 
 
 
 
 

766 lines
19 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" >
<!-- 按地址引用 不能用filter -->
<!-- <view class="people-box-sku" v-for="(skuItem,skuIndex) in pInfo.specifications.filter(v=>v.buyNum>=1)" :key="skuIndex"> -->
<view v-for="(skuItem,skuIndex) in pInfo.specifications" :key="skuIndex">
<view class="people-box-sku" v-if="skuItem.buyNum>=1">
<view>{{skuItem.title}}</view>
<view v-for="(person,personIndex) in skuItem.selPeople" :key="personIndex" @click="showAddressPopUp(person,skuItem.selPeople)">
<view v-if="person.id" class="flex">
<view>出行人1</view>
<view>{{person.name}}</view>
</view>
<view v-else>点击添加出行人信息</view>
</view>
</view>
</view>
</view>
<view class="btn-list">
<view class="price-box">
<view class="text">合计:</view>
<view class="price">{{ 10 }}</view>
<!-- <view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view> -->
</view>
<view class="btn" @click="order()">立即购买</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':'',currentPerson.id!=item.id&&currentPersonIds.includes(item.id)?'disabled':'']"
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: {}, // 列表当前要设置的出行人 用地址引用直接修改
currentPersonIds: [], // 当前门票的所有出行人
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,personList) {
this.currentPerson = person
this.currentPersonIds = []
personList.forEach(v=>{
if (v.id) {
this.currentPersonIds.push(v.id)
}
})
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.name = this.addressSelect.name
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){
if (this.addressSelect.id == item.id) {
this.addressSelect = {}
} else {
if (this.currentPersonIds.includes(item.id)&&item.id!=this.currentPerson.id) {
return
} else {
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({
id:null,id_number:null,name:null,
tel:null,user_id:null,age:null,
})
} else {
skuItem.selPeople = [{
id:null,id_number:null,name:null,
tel:null,user_id:null,age:null,
}]
}
},
// 选择时段
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;
}
}
}
})
},
order() {
let use_date = this.allSeldDate[this.seldDateIndex].date
let start_time =this.timesArr[this.seldTimeIndex].start_time
let end_time = this.timesArr[this.seldTimeIndex].end_time
let goods = []
// 设置参数
console.log(this.pInfo)
this.pInfo.specifications.forEach(sku=>{
if (sku.buyNum != sku.selPeople.length) {
uni.showToast({
title:'请选择出行人',
icon:'none'
})
}
if (sku.buyNum>=1) {
let param = {
specifications_id: sku.id,
num: sku.buyNum,
contact_id: sku.selPeople.filter(v=>v.id).map(v=>v.id),
date: use_date,
start_time: start_time,
end_time: end_time,
}
goods.push(param)
}
})
console.log(goods)
let data = {
goods: goods,
coupon: this.coupon ? this.coupon.id : "",
// reserve_name: this.reserve_name,
// reserve_phone: this.reserve_phone
// remark: this.remark
}
console.log('data数据',data);
this.Post({
method: 'POST',
data: JSON.stringify(data)
}, '/api/order/place').then(res => {
if (res.code == 200) {
console.log(res.data.order_id);
let order_id = res.data.order_id
this.$store.commit("changeOrderInfo", null);
this.$store.commit("choseCoupon", "");
this.Post({
order_id: order_id,
type: "miniprogram",
platform: 'miniprogram'
}, '/api/pay/unify').then(res => {
if (res.data) {
uni.requestPayment({
nonceStr: res.data.nonceStr,
package: res.data.package,
paySign: res.data.paySign,
signType: res.data.signType,
timeStamp: res.data.timeStamp,
complete() {
uni.navigateTo({
url: '/subPackages/order/trades'
})
}
})
}
})
}
})
}
}
}
</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);
}
.popup-item.disabled{
.item-top {
background-color: #999;
}
}
}
.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;
}
}
.btn-list {
width: 750rpx;
height: 166rpx;
background: #ffffff;
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
display: flex;
position: fixed;
bottom: 0;
padding: 20rpx 50rpx;
align-items: center;
justify-content: space-between;
.btn {
width: 294rpx;
height: 88rpx;
background: linear-gradient(90deg, #F84A56, #FF9834);
border-radius: 43rpx;
text-align: center;
line-height: 88rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.price-box {
display: flex;
align-items: center;
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #393b3e;
}
.price {
margin-left: 15rpx;
font-size: 48rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fc5109;
&:before {
content: '¥';
display: inline-block;
color: #fc5109;
font-size: 24rpx;
}
}
.post-text {
margin-left: 15rpx;
color: #fc5109;
font-size: 24rpx;
}
}
}
</style>