|
|
|
@ -2,51 +2,64 @@ |
|
|
|
<view class="bg"> |
|
|
|
<view class="box"> |
|
|
|
<view class="info"> |
|
|
|
<image class="img" src="" mode=""></image> |
|
|
|
<image class="img" :src="showImg(info.image)" mode=""></image> |
|
|
|
<view class="main"> |
|
|
|
<view class="title text-overflowRows"> |
|
|
|
名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称 |
|
|
|
{{info.title}} |
|
|
|
</view> |
|
|
|
<view class="main-bottom"> |
|
|
|
<view class="price"> |
|
|
|
9.9 |
|
|
|
{{info.money/100}} |
|
|
|
</view> |
|
|
|
<view class="num-box"> |
|
|
|
<view class="del">-</view> |
|
|
|
<view class="num">1</view> |
|
|
|
<view class="add">+</view> |
|
|
|
<view class="del" @click="reduce">-</view> |
|
|
|
<view class="num">{{num}}</view> |
|
|
|
<view class="add" @click="plus">+</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="msg-box"> |
|
|
|
<view class="left-text"> |
|
|
|
优惠券 |
|
|
|
</view> |
|
|
|
<view class="coupon" v-if="!coupon"> |
|
|
|
暂无可用优惠券 |
|
|
|
<image class="rightIcon" :src="showImg('/uploads/20240827/96dee582e7ce3b8293e659bb1dc87433.png')" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 优惠券 --> |
|
|
|
<navigator :url="'/subPackages/order/OrderCoupon?allprice='+ allprice*100 + '&sku_ids='+ info.id" class="tickets-box flex-between msg-box"> |
|
|
|
<div class="order-title">优惠券</div> |
|
|
|
<div class="coupon-btn" v-if="coupon==''"> |
|
|
|
请选择 |
|
|
|
</div> |
|
|
|
<div class="coupon-price" v-else> |
|
|
|
<span v-if="coupon.percent == 0">-￥{{coupon.discounts/100}}</span> |
|
|
|
<span v-else>-{{coupon.percent}}%</span> |
|
|
|
<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span> |
|
|
|
</div> |
|
|
|
</navigator> |
|
|
|
<view class="name-box"> |
|
|
|
<view class="left-text"> |
|
|
|
联系人： |
|
|
|
</view> |
|
|
|
<input type="text" placeholder="输入您的名字" /> |
|
|
|
<input type="text" placeholder="输入您的名字" v-model="reserve_name" /> |
|
|
|
</view> |
|
|
|
<view class="phone-box"> |
|
|
|
<view class="" style="display: flex;"> |
|
|
|
<view class="left-text"> |
|
|
|
手机号： |
|
|
|
</view> |
|
|
|
<input type="number" /> |
|
|
|
<input type="number" v-model="reserve_phone" maxlength="11" /> |
|
|
|
</view> |
|
|
|
<image class="cha" :src="showImg('/uploads/20240827/5e5970926e92a2109da55bfe32a47e4b.png')" mode=""></image> |
|
|
|
<image class="cha" @click="cha" v-if="reserve_phone!= ''" :src="showImg('/uploads/20240827/5e5970926e92a2109da55bfe32a47e4b.png')" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom"> |
|
|
|
|
|
|
|
<view class="center"> |
|
|
|
<view class="totalText"> |
|
|
|
合计： |
|
|
|
</view> |
|
|
|
<view class="totalPrice"> |
|
|
|
￥{{ allprice }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="order" @click="order"> |
|
|
|
去支付 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -55,11 +68,131 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
coupon:null, |
|
|
|
coupon:"", |
|
|
|
reserve_name: '', |
|
|
|
reserve_phone: '', |
|
|
|
info:null, |
|
|
|
detail:null,//商品的信息 |
|
|
|
allprice: 0, |
|
|
|
num:0, |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.coupon = this.$store.state.user.coupon |
|
|
|
console.log('传过来的优惠券',this.coupon); |
|
|
|
this.total() |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
this.$store.commit("choseCoupon", ""); |
|
|
|
this.info = this.$store.state.user.foodInfo |
|
|
|
// this.info = JSON.parse(uni.getStorageSync('order')) |
|
|
|
// this.detail = JSON.parse(uni.getStorageSync('detail')); |
|
|
|
this.num = this.info.buyNum?this.info.buyNum:1 |
|
|
|
if (!this.info) { |
|
|
|
uni.navigateBack(); |
|
|
|
} |
|
|
|
console.log(this.info); |
|
|
|
this.total() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
cha() { |
|
|
|
this.reserve_phone = '' |
|
|
|
}, |
|
|
|
order() { |
|
|
|
if (!this.reserve_name) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请输入姓名', |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!this.reserve_phone) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请输入电话', |
|
|
|
icon: 'none' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
let goods = []; |
|
|
|
let goodsItem = { |
|
|
|
specifications_id: this.info.id, |
|
|
|
num: this.num, |
|
|
|
}; |
|
|
|
goods.push(goodsItem); |
|
|
|
let data = { |
|
|
|
goods: goods, |
|
|
|
coupon: this.coupon ? this.coupon.id : null, |
|
|
|
is_post: this.info.is_post, |
|
|
|
reserve_name: this.reserve_name, |
|
|
|
reserve_phone: this.reserve_phone |
|
|
|
}; |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
method: 'POST', |
|
|
|
data: JSON.stringify(data) |
|
|
|
}, |
|
|
|
'/api/order/place' |
|
|
|
).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
order_id: res.data.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' |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
plus() { |
|
|
|
this.num = Number(this.num); |
|
|
|
this.coupon = '' |
|
|
|
this.$nextTick(() => { |
|
|
|
this.num += 1; |
|
|
|
this.total() |
|
|
|
}); |
|
|
|
}, |
|
|
|
reduce() { |
|
|
|
this.num = Number(this.num); |
|
|
|
this.coupon = '' |
|
|
|
if (this.num > 1) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.num -= 1; |
|
|
|
this.total() |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 总价 |
|
|
|
total() { |
|
|
|
let price = 0 |
|
|
|
if (this.coupon) { |
|
|
|
if (this.coupon.percent == 0) { |
|
|
|
price = this.info.money * this.num - this.coupon.discounts |
|
|
|
} else{ |
|
|
|
price = this.info.money * this.num - ((this.info.money * this.num + this.post) * this.coupon.percent) |
|
|
|
} |
|
|
|
} else{ |
|
|
|
price = this.info.money * this.num |
|
|
|
} |
|
|
|
price < 0 ? 0 : price |
|
|
|
this.allprice = price / 100 |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -88,6 +221,8 @@ |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.img { |
|
|
|
@ -176,6 +311,7 @@ |
|
|
|
border-bottom: 1rpx solid #CCC; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.name-box { |
|
|
|
@ -220,5 +356,66 @@ |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.totalText { |
|
|
|
margin-right: 20rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 29rpx; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.totalPrice { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 36rpx; |
|
|
|
color: #F84A56; |
|
|
|
} |
|
|
|
|
|
|
|
.order { |
|
|
|
width: 267rpx; |
|
|
|
height: 87rpx; |
|
|
|
background: #F84A56; |
|
|
|
border-radius: 43rpx; |
|
|
|
font-family: PingFang; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 36rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 87rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.center { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.coupon-btn { |
|
|
|
width: 140rpx; |
|
|
|
height: 57rpx; |
|
|
|
border: 1px solid #333333; |
|
|
|
border-radius: 29rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: PingFangSC; |
|
|
|
font-weight: 400; |
|
|
|
color: #000000; |
|
|
|
text-align: center; |
|
|
|
line-height: 57rpx; |
|
|
|
|
|
|
|
.select { |
|
|
|
padding: 10rpx 18rpx; |
|
|
|
background: #ED9230; |
|
|
|
border-radius: 10rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.coupon-price { |
|
|
|
color:#DD0000; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
shaojing
1 year ago