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.
421 lines
8.1 KiB
421 lines
8.1 KiB
<template>
|
|
<view class="bg">
|
|
<view class="box">
|
|
<view class="info">
|
|
<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">
|
|
{{info.money/100}}
|
|
</view>
|
|
<view class="num-box">
|
|
<view class="del" @click="reduce">-</view>
|
|
<view class="num">{{num}}</view>
|
|
<view class="add" @click="plus">+</view>
|
|
</view>
|
|
</view>
|
|
</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="输入您的名字" v-model="reserve_name" />
|
|
</view>
|
|
<view class="phone-box">
|
|
<view class="" style="display: flex;">
|
|
<view class="left-text">
|
|
手机号：
|
|
</view>
|
|
<input type="number" v-model="reserve_phone" maxlength="11" />
|
|
</view>
|
|
<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>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
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 == 1) {
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
background: #F7F7F7;
|
|
min-height: 100vh;
|
|
padding: 26rpx 25.33rpx 168rpx;
|
|
}
|
|
|
|
.box {
|
|
width: 699rpx;
|
|
// height: 553rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 13rpx;
|
|
padding: 28rpx 21.33rpx 0;
|
|
}
|
|
|
|
.bottom {
|
|
height: 148rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
|
|
padding: 20.67rpx 26.67rpx 40.67rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.img {
|
|
width: 167rpx;
|
|
height: 160rpx;
|
|
background: #666666;
|
|
border-radius: 7rpx;
|
|
margin-right: 29.33rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.main {
|
|
padding-top: 8.67rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
width: 429rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 33rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.main-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.num-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.price {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 33rpx;
|
|
color: #000000;
|
|
}
|
|
.price::before {
|
|
content: "￥";
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.del {
|
|
width: 47rpx;
|
|
height: 47rpx;
|
|
background: #E8E8E8;
|
|
border-radius: 50%;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
.add {
|
|
width: 47rpx;
|
|
height: 47rpx;
|
|
background: #71B580;
|
|
border-radius: 50%;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 34rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 47rpx;
|
|
}
|
|
|
|
.num {
|
|
margin: 0 29rpx;
|
|
}
|
|
|
|
.msg-box {
|
|
padding: 42rpx 0;
|
|
border-bottom: 1rpx solid #CCC;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.name-box {
|
|
padding: 42rpx 0;
|
|
display: flex;
|
|
border-bottom: 1rpx solid #CCC;
|
|
}
|
|
|
|
.phone-box {
|
|
padding: 42rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 10.67rpx;
|
|
height: 20rpx;
|
|
margin-left: 19.33rpx;
|
|
}
|
|
|
|
.left-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.coupon {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 27rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.cha {
|
|
width: 26rpx;
|
|
height: 25.33rpx;
|
|
}
|
|
|
|
input {
|
|
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>
|
|
|