套餐问题修复
This commit is contained in:
356
userPackage/confirm-order/confirm-order.vue
Normal file
356
userPackage/confirm-order/confirm-order.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28 color-333 u-p-30">
|
||||
<view class="info">
|
||||
<view class="goods u-flex u-col-center u-p-t-22 u-p-b-22 ">
|
||||
<view class="img-box">
|
||||
<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
|
||||
<view class="tag" v-if="item.tieredDiscount&&item.tieredDiscount.length>0">阶梯优惠</view>
|
||||
</view>
|
||||
<view class=" u-flex-1 u-p-l-16 u-flex u-row-between u-col-center">
|
||||
<view>
|
||||
<view class="font-bold u-line-2 u-font-32">{{item.packageName}}</view>
|
||||
<view style="max-width: 336rpx;" class="u-line-1 u-m-t-10 color-666">{{item.description}}</view>
|
||||
|
||||
</view>
|
||||
<view class="u-p-l-10 ">
|
||||
<!-- <view class="color-333 no-wrap">
|
||||
数量：{{item.number}}
|
||||
</view> -->
|
||||
<view class=" font-bold price ">
|
||||
<text class="u-font-26"> ¥</text>
|
||||
<text class="u-font-40">{{item.price}}</text>
|
||||
</view>
|
||||
<view class=" old-price">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="shop ">
|
||||
<view class="u-flex">
|
||||
<text style="min-width: 180rpx;" class="color-666">可核销门店：</text>
|
||||
<text>{{item.shopName}}</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-flex">
|
||||
<text style="min-width: 180rpx;" class="color-666">门店地址：</text>
|
||||
<text>{{item.shopAddress}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 up-border-top u-p-t-28 u-p-b-28">
|
||||
|
||||
<view class="u-flex u-row-between u-p-t-16 u-p-b-16">
|
||||
<text class="u-font-32 font-bold">支付方式</text>
|
||||
<text class="">微信支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="desc" v-if="item.tieredDiscount&&item.tieredDiscount.length>0">
|
||||
|
||||
<view class="u-flex u-row-between ">
|
||||
<view class="name">分享说明</view>
|
||||
<view class="u-flex color-666" @click="showDesc=!showDesc" style="align-items: baseline;">
|
||||
<text class="u-m-r-18">{{showDesc?'收起':'展开'}}</text>
|
||||
<view class="guodu" :class="{rotate:!showDesc}">
|
||||
<up-icon name="arrow-down" bold></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<template v-if="showDesc">
|
||||
<view class="u-m-t-26 text-center table" v-if="item.tieredDiscount">
|
||||
<view class="u-flex header color-666">
|
||||
<view class="u-flex-1 u-p-t-32 u-p-b-32">分享人数</view>
|
||||
<view class="u-flex-1 u-p-t-32 u-p-b-32">购买价格（元）</view>
|
||||
</view>
|
||||
<view class="u-flex row" v-for="(step,index) in item.tieredDiscount" :key="index">
|
||||
<view class="u-flex-1 u-p-t-32 u-p-b-32">{{step.peopleNum}}</view>
|
||||
<view class="u-flex-1 u-p-t-32 u-p-b-32">¥{{step.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-26">
|
||||
<view>
|
||||
分享期限（小时）：{{item.expireHours}}
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
规定期限内的助力才会被计入
|
||||
</view>
|
||||
<view class="u-m-t-40">
|
||||
如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view style="height: 100px;"></view>
|
||||
<view class="u-flex bottom">
|
||||
<view>
|
||||
<text class="color-666">实付：</text>
|
||||
<text class="price">¥{{totalPayPrice}}</text>
|
||||
</view>
|
||||
<view class="btn" @click="payExchange">去支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as Api from '@/common/api/market/package.js'
|
||||
import {
|
||||
pay
|
||||
} from '@/utils/pay.js'
|
||||
import {
|
||||
getOpenId
|
||||
} from '@/utils/uniapp.js'
|
||||
|
||||
const imgs = {
|
||||
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
|
||||
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png'
|
||||
}
|
||||
|
||||
const showDesc = ref(true)
|
||||
|
||||
const item = reactive({})
|
||||
onShow(() => {
|
||||
const data = uni.getStorageSync('group_buying_order')
|
||||
data.goodsImg = data.images[0]
|
||||
Object.assign(item, data)
|
||||
console.log(item)
|
||||
})
|
||||
|
||||
function dingyue() {
|
||||
return new Promise((revlove, reject) => {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['JGPAGmqcPEgWB6mvAl0SC5cMqr5H5Qjcim8JCpHAZd0',
|
||||
'F4OyUhe_ZQ9BR731jlkaN2QXAUaA3HBZuUeVPfraSz0'
|
||||
],
|
||||
success(res) {},
|
||||
complete() {
|
||||
revlove()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
async function payExchange() {
|
||||
// await dingyue();
|
||||
uni.showLoading({
|
||||
title: '支付中……'
|
||||
})
|
||||
let paramId = item.paramId
|
||||
if (!paramId) {
|
||||
paramId = await Api.createOrder({
|
||||
packageId: item.id,
|
||||
shopId: item.shopId,
|
||||
})
|
||||
}
|
||||
if (!paramId) {
|
||||
return uni.showToast({
|
||||
title: '创建订单失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
const openId = await getOpenId()
|
||||
uni.hideLoading()
|
||||
if (openId) {
|
||||
Api.ppOrderPay({
|
||||
paramId,
|
||||
shopId: item.shopId,
|
||||
number: item.number,
|
||||
openId
|
||||
}).then(orderRes => {
|
||||
pay(orderRes.payInfo).then(res => {
|
||||
console.log(res)
|
||||
|
||||
if (res) {
|
||||
uni.redirectTo({
|
||||
url: '/userPackage/order/detail?orderId=' + paramId + '&shopId=' +
|
||||
item.shopId
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '购买失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '鉴权失败，开团失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
import {
|
||||
BigNumber
|
||||
} from "bignumber.js";
|
||||
const totalPrice = computed(() => {
|
||||
if (!item.groupPrice) {
|
||||
return 0;
|
||||
}
|
||||
return BigNumber(item.number).times(item.originalPrice).toNumber()
|
||||
})
|
||||
|
||||
const totalPayPrice = computed(() => {
|
||||
if (!item.price) {
|
||||
return 0;
|
||||
}
|
||||
return BigNumber(item.number).times(item.price).toNumber()
|
||||
})
|
||||
|
||||
|
||||
let shareItem = null
|
||||
|
||||
function share(item) {
|
||||
shareItem = item
|
||||
}
|
||||
onShareAppMessage(() => {
|
||||
console.log('onShareAppMessage')
|
||||
console.log(shareItem)
|
||||
const query = `groupOrderNo=${shareItem.groupOrderNo}&shopId=${shareItem.shopId}`
|
||||
return wxShare({
|
||||
title: shareItem.wareJson.wareName,
|
||||
imageUrl: shareItem.goodsImg,
|
||||
path: '/groupBuying/detail/index' + '?' + query,
|
||||
query,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.goods {
|
||||
background-color: #fff;
|
||||
padding: 22rpx 0;
|
||||
|
||||
.pin {
|
||||
width: 60rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.tuan-members {
|
||||
padding: 0 16rpx 0 0;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
background: #4C2828;
|
||||
color: #f5d9ad;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ed5a2e;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
color: #666666;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.u-font-48 {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.shop {
|
||||
padding: 16rpx 34rpx;
|
||||
margin: 32rpx 30rpx;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 42rpx 28rpx 60rpx 28rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
.price {
|
||||
color: #ed5a2e;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 14rpx 70rpx;
|
||||
border-radius: 200rpx;
|
||||
background: #E8AD7B;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #4C2828;
|
||||
border-radius: 12rpx 0 16rpx 0;
|
||||
color: #faeac6;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
padding: 4rpx 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 32rpx 46rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.name {
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.table {
|
||||
border: 2rpx solid #EDEDED;
|
||||
border-radius: 8rpx;
|
||||
margin: 0 52rpx;
|
||||
|
||||
.header {
|
||||
background: #f8f8f88f;
|
||||
}
|
||||
|
||||
.row {
|
||||
border-top: 2rpx solid #EDEDED;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rotate {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user