时味苏州
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.
 
 
 
 

797 lines
19 KiB

<template>
<view class="bg">
<view class="top-box" v-if="product">
<view class="product-title">{{ product.title }}</view>
<view class="product-date">{{ selectDate.date }}</view>
<view class="product-num">
<text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.sku_name }}x{{ item.num }}</text>
</view>
</view>
<view class="user-box">
<view class="user-box-title">出行人信息</view>
<view v-for="(skuItem, skuIndex) in sku" :key="skuIndex">
<view class="user-item" v-for="(item, index) in skuItem.num" :key="index">
<text class="user-item-text">{{ skuItem.sku_name }}</text>
<view v-if="linkmans[skuIndex][index]" class="user-info">
<text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text>
<text>{{ linkmans[skuIndex][index].tel }}</text>
</view>
<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" />
<view @tap="showLinkman(skuIndex)" v-else class="add-btn">
+ 添加
</view>
</view>
</view>
<!-- <view class="user-item">
<text class="user-item-text">姓名</text>
<input v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/>
</view> -->
<view class="user-item">
<text class="user-item-text">联系电话</text>
<input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/>
<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons>
</view>
<view class="user-item" style="border-bottom: none">
<text class="user-item-text">订单备注</text>
<input type="text" v-model="remark" placeholder="选填" class="user-input"/>
</view>
</view>
<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between">
<text>优惠券</text>
<view style="display: flex;align-items: center;">
<view class="add-btn" v-if="!coupon">选择优惠券</view>
<view style="display: flex;align-items: center;color: #6A8A2D;font-weight: bold;" v-if="coupon && coupon.activity">
<view v-if="coupon.activity.discount_type == 'pricebreak'">-¥{{coupon.activity.money/100}}</view>
<view v-else>{{coupon.activity.fold}}折</view>
</view>
<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon">
</view>
</navigator>
<!-- <view class="xy-box">
<view class="quan flex-center" @click="clickXy">
<view class="quan-seld" v-if="xySeld"></view>
</view>
<view style="margin-left: 20rpx;">
请您仔细阅读<span @click="openXz">线路标准退预定须知</span>,点击去支付即代表您已阅读条款内容
</view>
</view> -->
<view class="fixed-bottom">
<view class="order-all-price">
合计:
<text class="order-all-text">
¥{{ priceTotal() / 100 }}
</text>
</view>
<view class="order-btn" @tap="order">去支付</view>
</view>
<!-- 协议弹框 -->
<!-- <uni-popup ref="popup" type="bottom" :safe-area="false">
<view class="xzPopup">
<view v-html="formateRichText(product.reserve_content)"></view>
<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup">
</view>
</uni-popup> -->
<!-- 添加出行人弹窗 -->
<uni-popup ref="peoplePopup" type="bottom" backgroundColor="#F4F4F4">
<view class="people-popup">
<view class="popup-top">
<view class="top flex-between">
<text class="text-overflow" @click="changePeoplePopup('close')"></text>
<text class="confirm" @click="changePeoplePopup('')">确定</text>
</view>
</view>
<navigator url="/subPackages/user/myContactsAdd?type=add" class="button">添加出行人</navigator>
<view class="popup-list" v-if="peopleList.length>0">
<view :class="['popup-item', {'people-select': item.is_seld}]" v-for="(item,index) in peopleList" :key="index" @click="seldThisPeople(item, index)">
<view class="item-top flex-between">
<navigator :url="`/subPackages/user/myContactsAdd?type=edit&id=${item.id}`"><img
src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" class="editImg">
</navigator>
<view class="name">{{ item.name }}</view>
<view class="subtitle">
<view class="mobile">手机号 {{ item.tel }} <span v-if="item.is_default==1">默认</span></view>
<view class="idCard">{{ item.title }} {{ item.id_number }}</view>
</view>
<!-- <view class="status" :class="item.is_seld?'statuss':'noSelect'"
@click="seldThisPeople(item, index)">
<img src="https://static.ticket.sz-trip.com/taihu/images/user/dui.png"
v-if="item.is_seld" class="selectImg">
</view> -->
</view>
<!-- <view class="item-site" @click="changeDefaultPeople(item,index)">
<view class="flex-around" v-if="item.is_default==1">
<view></view>
</view>
<view v-else></view>
设为默认出行人
</view> -->
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
product: this.$store.state.user.lineInfo.product,
sku: this.$store.state.user.lineInfo.sku,
selectDate: this.$store.state.user.lineInfo.selectDate,
linkmans: [],
sku_ids: '',
price: this.$store.state.user.lineInfo.price,
skuIndex: null,
coupon: '',
reserve_name: '',
reserve_phone: '',
reserve_mobile: '',
remark: '',
peopleList: [],
linkmanList: [],
xySeld: false
}
},
onReady() {
console.log('product',this.product)
console.log('sku',this.sku)
console.log('selectDate',this.selectDate)
console.log('price',this.price)
// 清除优惠券
this.$store.commit("choseCoupon", "");
// 自动获取手机号
this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile || ''
this.initLinkmansAndSkuIds();
},
onShow() {
this.coupon = this.$store.state.user.coupon
console.log('传过来的优惠券',this.coupon);
this.getPeople()
},
methods: {
// 初始化出行人信息和商品规格 ID 数组
initLinkmansAndSkuIds() {
let linkmans = [];
let sku_ids = [];
this.sku.forEach((item) => {
const num = Number(item.num);
linkmans.push(new Array(num));
sku_ids.push(item.id);
});
this.linkmans = linkmans;
this.sku_ids = sku_ids;
},
// 协议
clickXy() {
this.xySeld = !this.xySeld
},
openXz() {
this.$refs.popup.open('bottom')
},
closePopup() {
this.$refs.popup.close()
},
// 去支付
order() {
let flag = true
let product_list = [];
this.sku.map((item, index) => {
if(item.num > 0) {
let linkmanArray = this.linkmans[index] || []
let linkman = linkmanArray.filter(i => i);
if(linkman.length < item.num) {
flag = false
uni.showToast({
title: '请选择对应的出行人',
icon: 'none'
});
return;
}
let pId = []
linkman.map(lItem => {
pId.push(lItem.id)
})
product_list.push({
type: 'line',
sku_id: item.id,
product_id: this.product.id,
product_num: item.num,
visitors: pId.toString(),
reserve_mobile: this.reserve_mobile,
use_date: this.selectDate.date
});
}
})
// if(!this.idChinaName(this.reserve_name)) {
// flag = false
// uni.showToast({
// title: '请输入联系人',
// icon: 'none'
// });
// return;
// }
if(!this.IsTel(this.reserve_phone)) {
flag = false
uni.showToast({
title: '请输入联系方式',
icon: 'none'
});
return;
}
// if(!this.xySeld) {
// flag = false
// uni.showToast({
// title: '请先同意预订须知内容',
// icon: 'none'
// });
// return;
// }
if(flag){
let data = {
product_list: product_list,
coupon_id: this.coupon ? this.coupon.id : null,
remark: this.remark
};
this.Post({
data: JSON.stringify(data),
method: 'POST',
},'/api/order/create').then(res => {
console.log(res)
return;
if(res.code == 1) {
let order_id = res.data.order_id
this.$store.commit("changeLineInfo", 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,
success: () => {
this.getSubscribeMessage()
},
fail() {
uni.navigateTo({
url: '/subPackages/order/trades'
})
}
})
}
})
}
})
}
},
// 总价
priceTotal() {
let price = 0
if(this.coupon) {
if (this.coupon.activity.discount_type == 'pricebreak') {
price = this.price - this.coupon.activity.money
} else{
price = this.price - (this.price * this.coupon.activity.fold/10)
}
}else {
price = this.price
}
return price < 0 ? 0 : price
},
// 获取出行人列表
getPeople() {
this.Post({
contactType: 'CONTACT',
offset: 0,
limit: 100
},'/api/uservice/user/getContactOrConsignee').then(res => {
this.peopleList = res.data
this.reserve_mobile = this.peopleList[0].tel
// 如果是添加或者修改完出行人后需要默认选中已选择的出行人
if (this.linkmanList.length > 0) {
this.linkmanList.forEach((linkman) => {
const foundIndex = this.peopleList.findIndex((people) => people.id === linkman.id);
if (foundIndex !== -1) {
this.linkmanList[foundIndex] = this.peopleList[foundIndex];
this.peopleList[foundIndex].is_seld = true;
this.linkmanList[foundIndex].is_seld = true;
}
});
this.$forceUpdate();
}
})
},
// 设置默认出行人
changeDefaultPeople(item, index) {
if (item.is_default == 1) {
return
}
this.Post({
contactId: item.id
},'/api/uservice/user/setDefaultContact').then(res => {
if(res.code == 200){
uni.showToast({
title: '设置成功',
icon: 'none'
});
for (let item of this.peopleList) item.is_default = 0
this.peopleList[index].is_default = 1
}
this.$forceUpdate()
})
},
// 选择出行人弹框
showLinkman(skuIndex) {
this.skuIndex = skuIndex
this.peopleList.map(item => {
if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) {
item.is_disable = true
}else {
item.is_disable = false
}
})
this.$refs.peoplePopup.open('bottom')
this.$forceUpdate()
},
// 选择出行人
seldThisPeople(item,index) {
let num = 0
let list = []
if(item.is_seld && item.is_disable) {
uni.showToast({
title: '该联系人已选择为其他规格',
icon: 'none'
});
return;
}
this.linkmans[this.skuIndex] = []
this.peopleList.map(items => {
if(items.id == item.id) {
items.is_seld = !items.is_seld
}
if(items.is_seld && !items.is_disable) {
num++;
items.is_sku = this.sku[this.skuIndex].id
this.linkmans[this.skuIndex].push(items)
}
if(items.is_seld) {
this.linkmanList.push(item)
}
})
if(num > this.sku[this.skuIndex].num) {
item.is_seld = false
this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1)
uni.showToast({
title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人',
icon: 'none'
});
return;
}
this.$forceUpdate()
console.log(this.peopleList,this.linkmans)
},
// 确定取消
changePeoplePopup(type,confirm) {
this.$refs.peoplePopup.close()
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" scoped>
.bg {
background: #f6f6f6;
padding-bottom: 200rpx;
min-height: 100vh;
}
.top-box {
padding: 30rpx 47rpx;
color: #333333;
font-size: 28rpx;
border-bottom: 1rpx solid #ccc;
.product-title {
color: #000000;
font-size: 33rpx;
line-height: 47rpx;
margin-bottom: 30rpx;
}
.product-num {
margin-top: 30rpx;
.product-text {
margin-right: 50rpx;
}
}
}
.user-box {
margin: 25rpx;
background: #ffffff;
border-radius: 9rpx;
.user-box-title {
// border-bottom: 1rpx solid #ccc;
line-height: 113rpx;
font-size: 33rpx;
color: #000;
font-weight: bold;
padding: 0 20rpx;
}
.user-item {
margin: 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 126rpx;
border-top: 1rpx solid #B8B8B8;
.user-item-text{
flex-shrink: 0;
font-size: 31rpx;
color: #000;
font-weight: bold;
margin-right: 20rpx;
}
.user-info {
font-size: 27rpx;
margin-right: 20rpx;
flex: 1;
text-align: left;
}
.icon-bianji1 {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
.add-btn {
display: flex;
width: 153rpx;
height: 57rpx;
border: 1rpx solid #333333;
border-radius: 29rpx;
box-sizing: border-box;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #000;
}
.user-input {
flex: 1;
font-size: 29rpx;
display: block;
text-align: right;
}
.icon-coupon{
width: 20rpx;
height: 20rpx;
margin-left: 15rpx;
}
}
}
.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: 30rpx;
font-weight: 400;
color: #000000;
}
.confirm {
font-weight: 400;
color: #000000;
}
}
}
.popup-list {
height: 666rpx;
overflow: scroll;
.popup-item {
border-radius: 12rpx;
padding: 10rpx 20rpx;
margin-top: 24rpx;
font-size: 24rpx;
color: #333333;
font-weight: 400;
background-color: #FFFFFF;
.item-top {
padding: 20rpx 12rpx;
img {
color: #666666;
width: 40rpx;
height: 40rpx;
}
.name {
font-size: 30rpx;
color: #000000;
margin: 0 20rpx;
overflow: hidden;
text {
color: #999999;
margin: 0 20rpx;
}
.tag {
border-radius: 8rpx;
text-align: center;
color: #333333;
font-size: 20rpx;
padding: 6rpx 15rpx;
background-color: #FFC825;
}
}
.com-flex-start {
margin: 0 0 30rpx;
}
.subtitle {
font-weight: 400;
flex: 1;
text-align: left;
.mobile {
margin-bottom: 36rpx;
span {
margin-left: 10rpx;
padding: 0 7rpx;
line-height: 31rpx;
background: #6A8A27;
border-radius: 7rpx;
text-align: center;
font-weight: 400;
font-size: 21rpx;
color: #FFFFFF;
}
}
}
.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;
}
}
}
}
.people-select {
border: 2rpx solid #6A8A27;
}
}
.button {
font-size: 30rpx;
font-weight: 400;
color: #000000;
text-align: center;
width: 100%;
height: 80rpx;
line-height: 80rpx;
background-color: #FFFFFF;
border-radius: 60rpx;
}
}
.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 113rpx;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 26rpx;
box-sizing: border-box;
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
z-index: 1;
.order-all-price {
flex: 1;
font-size: 29rpx;
color: #333;
font-weight: 500;
.order-all-text {
flex: 1;
font-size: 36rpx;
color: #6A8A2D;
font-weight: bold;
}
}
.order-btn {
width: 293rpx;
background: #6A8A2D;
border-radius: 43rpx;
text-align: center;
line-height: 87rpx;
color: #fff;
font-size: 36rpx;
font-weight: 500;
margin-left: 30rpx;
}
}
.xy-box {
width: 658rpx;
margin: 36rpx auto 0;
font-size: 27rpx;
font-family: PingFangSC;
font-weight: 400;
color: #999999;
display: flex;
span {
color: #FEB419;
}
.quan {
min-width: 23rpx;
min-height: 23rpx;
max-width: 23rpx;
max-height: 23rpx;
border: 1px solid #999999;
border-radius: 50%;
.quan-seld {
width: 12rpx;
height: 12rpx;
background: #FEB419;
border-radius: 50%;
}
}
}
.xzPopup {
width: 750rpx;
padding: 33rpx 26rpx 20rpx;
box-sizing: border-box;
background-color: #FFFFFF;
position: relative;
height: 1200rpx;
overflow-y: scroll;
view {
padding: 0 20rpx;
box-sizing: border-box;
margin-top: 35rpx;
}
img {
width: 32rpx;
height: 32rpx;
position: absolute;
top: 33rpx;
right: 27rpx;
}
}
.coupon-box {
height: 113rpx;
background: #FFFFFF;
border-radius: 13rpx;
font-weight: bold;
font-size: 31rpx;
color: #000000;
padding: 0 20rpx;
margin: 0 20rpx;
.add-btn {
width: 153rpx;
line-height: 40rpx;
background: #6A8A2D;
border-radius: 9rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
.icon-coupon{
width: 20rpx;
height: 20rpx;
margin-left: 15rpx;
}
}
</style>