437 lines
10 KiB
Vue
437 lines
10 KiB
Vue
<template>
|
||
<scroll-view scroll-y>
|
||
<view class='content'>
|
||
<view class='countdown c-flex-row' v-if='isPending(orderBean?.order)'>
|
||
<image :src='assetsUrl("ic_order.png")' />
|
||
<view class='c-flex-column'>
|
||
<text>
|
||
待支付
|
||
</text>
|
||
<view class='c-flex-row'>
|
||
<image :src='assetsUrl("ic_time.png")' />
|
||
<text>支付剩余时间
|
||
<text style='color: #F32B2B'>{{ dayjs.unix(orderBean?.order?.countdown || 0).format('mm:ss') }}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='address-view c-flex-column' v-if='orderBean?.order?.address'>
|
||
<view class='user-info c-flex-row'>
|
||
<text v-if='orderBean.order.address.defaultstatus==1'>默认</text>
|
||
<text>{{ orderBean?.order?.address.name }}</text>
|
||
<text>{{ orderBean?.order?.address.mobile }}</text>
|
||
<view style='flex: 1' />
|
||
<text style='color: #5B96FB'>复制</text>
|
||
</view>
|
||
|
||
<view class='addr c-flex-row'>
|
||
<image :src='assetsUrl("ic_location.png")' />
|
||
<text>{{ orderBean?.order?.address.addr }}</text>
|
||
</view>
|
||
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
|
||
</view>
|
||
|
||
<view class='goods-info-view c-flex-column'>
|
||
<view class='c-flex-row' style='margin-bottom: 20rpx' v-for='(item,index) in orderBean?.order.orderGoods'
|
||
:key='index'>
|
||
<image class='goods-image' :src='item.stockStock.images' />
|
||
<view class='c-flex-column' style='flex: 1;'>
|
||
<view class='c-flex-row'>
|
||
<text class='goods-name'>{{ item.goodsName }}</text>
|
||
</view>
|
||
<text style='color: #999999;margin-top: 30rpx'>
|
||
{{ item.goodsCode }}
|
||
</text>
|
||
<view class='bottom-view c-flex-row'>
|
||
<text>
|
||
{{ item.stockStock.colorName }}，{{ item.stockStock.sizeName }} x{{ item.goodsNum }}
|
||
</text>
|
||
<text>{{ item.consumePrice }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='divider' />
|
||
|
||
<view class='remark-view c-flex-row'>
|
||
<text style='flex: 1'>备注</text>
|
||
<text>{{ orderBean?.order?.remark || '无备注' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='card-view'>
|
||
<view class='c-flex-row'>
|
||
<text class='card-view-title'>商品总价</text>
|
||
<text class='card-view-value'>￥{{ orderBean?.order?.totalPrice }}</text>
|
||
</view>
|
||
<view class='c-flex-row'>
|
||
<text class='card-view-title'>运费</text>
|
||
<text class='card-view-value'>￥0</text>
|
||
</view>
|
||
<view class='c-flex-row'>
|
||
<text class='card-view-title'>优惠券
|
||
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
|
||
</text>
|
||
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ orderBean?.order?.reducePrice }}
|
||
</text>
|
||
</view>
|
||
<view class='divider' />
|
||
<view class='c-flex-row'>
|
||
<view style='flex: 1' />
|
||
<view class='c-flex-row'>
|
||
<text class='card-view-value'>共{{ orderBean?.order?.itemNum }}件商品 合计：
|
||
<text style='font-size: 34rpx;color:#F32B2B'>¥{{ orderBean?.order?.totalPrice }}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='order-no c-flex-column'>
|
||
<text>订单编号：{{ orderBean?.order?.id }}
|
||
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
|
||
</text>
|
||
<text>下单时间：{{ orderBean?.order?.createTime }}</text>
|
||
</view>
|
||
|
||
<view class='bottom-action-view c-flex-row' v-if='isPending(orderBean?.order)'>
|
||
<text @click.stop='cancel' style='display: none'>取消订单</text>
|
||
<sqb-pay @navigateTo='navigateTo'
|
||
:return_url='buildSqbParams.return_url'
|
||
:total_amount='buildSqbParams.total_amount'
|
||
:terminal_sn='buildSqbParams.terminal_sn'
|
||
:client_sn='buildSqbParams.client_sn'
|
||
:subject='buildSqbParams.subject'
|
||
:merchant_name='buildSqbParams.merchant_name'
|
||
:notify_url='buildSqbParams.notify_url'
|
||
:sign='buildSqbParams.sign'>
|
||
<button @click='payment'>立即支付</button>
|
||
</sqb-pay>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script lang='ts' setup>
|
||
import { assetsUrl } from '@/utils/assets';
|
||
import { getOrderDetail } from '@/api/order';
|
||
import { OrderBean } from '@/api/order/types';
|
||
import { parseParameter, sortASCII } from '@/utils';
|
||
import { hexMD5 } from '@/utils/common/md5';
|
||
import { useUserStore } from '@/store';
|
||
import { handlePayResult, isPending } from '@/utils/order';
|
||
import dayjs from 'dayjs';
|
||
import { pay } from '@/api/groupbuy';
|
||
|
||
const userState = useUserStore();
|
||
const { terminalInfo } = storeToRefs(userState);
|
||
|
||
const orderBean = ref<{
|
||
order: OrderBean,
|
||
stock: any[],
|
||
paymentList: []
|
||
}>();
|
||
|
||
let currentInterval = 0;
|
||
|
||
onLoad(async (e: any) => {
|
||
await uni.showLoading();
|
||
orderBean.value = await getOrderDetail(e.orderId);
|
||
handleCountdown();
|
||
uni.hideLoading();
|
||
});
|
||
|
||
onUnload(() => {
|
||
clearInterval(currentInterval);
|
||
});
|
||
|
||
const buildSqbParams = computed(() => {
|
||
const params = sortASCII({
|
||
client_sn: orderBean.value?.order?.id || '',
|
||
return_url: '/pages/common/payresult/index',
|
||
total_amount: ((orderBean.value?.order?.totalPrice || 0) * 100).toString(),
|
||
terminal_sn: terminalInfo.value.terminalSn,
|
||
subject: '商品支付',
|
||
merchant_name: terminalInfo.value.companyName,
|
||
notify_url: 'https://www.baidu.com'
|
||
}, true);
|
||
return {
|
||
...params,
|
||
sign: hexMD5(parseParameter(params) + '&key=' + terminalInfo.value.terminalKey).toUpperCase()
|
||
};
|
||
});
|
||
|
||
const navigateTo = (e: any) => {
|
||
console.log('--------------_>>>>>>navigateTo ', e);
|
||
handlePayResult(orderBean.value?.order.id, e, {
|
||
onSuccess: () => {
|
||
// pay({
|
||
// 'orderId': orderBean.value?.order.id,
|
||
// 'result': 'xxx'
|
||
// });
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleCountdown = () => {
|
||
clearInterval(currentInterval);
|
||
let second = 30 * 60;
|
||
currentInterval = setInterval(() => {
|
||
if(isPending(orderBean.value?.order)) {
|
||
orderBean.value!.order!.countdown = second;
|
||
if(orderBean.value!.order!.countdown <= 0) {
|
||
orderBean.value!.order!.countdown = 0;
|
||
} else {
|
||
uni.navigateBack();
|
||
}
|
||
second--;
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const cancel = () => {
|
||
};
|
||
const payment = () => {
|
||
console.log(buildSqbParams.value);
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.content {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.countdown {
|
||
padding: 10rpx 30rpx 30rpx 30rpx;
|
||
|
||
image:nth-of-type(1) {
|
||
width: 60rpx;
|
||
height: 74rpx;
|
||
}
|
||
|
||
view:not(.c-flex-row):nth-of-type(1) {
|
||
margin-left: 23rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
view:nth-of-type(1) {
|
||
margin-top: 5rpx;
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.address-view {
|
||
padding-top: 30rpx;
|
||
background: #FFFFFF;
|
||
|
||
.user-info {
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
padding: 2rpx 10rpx;
|
||
font-size: 24rpx;
|
||
color: #F32B2B;
|
||
border-radius: 5rpx;
|
||
border: 1rpx solid #F32B2B;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
text:nth-of-type(n+2) {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
image {
|
||
width: 8rpx;
|
||
height: 16rpx;
|
||
}
|
||
}
|
||
|
||
.addr {
|
||
margin-top: 15rpx;
|
||
margin-left: 20rpx;
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 37rpx;
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.dashed-line {
|
||
width: 100%;
|
||
height: 8rpx;
|
||
margin-top: 37rpx;
|
||
}
|
||
}
|
||
|
||
.goods-info-view {
|
||
display: flex;
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
padding: 30rpx 20rpx;
|
||
|
||
.goods-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-name {
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
-webkit-line-clamp: 2;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-right: 20rpx;
|
||
color: #333333;
|
||
flex: 1;
|
||
}
|
||
|
||
.bottom-view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
flex: 1;
|
||
color: #999999;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
text:nth-of-type(2):before {
|
||
content: '￥';
|
||
}
|
||
|
||
text:nth-of-type(3) {
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
margin: 30rpx 0;
|
||
}
|
||
|
||
.remark-view {
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-view {
|
||
margin-top: 20rpx;
|
||
padding: 0 25rpx 0 23rpx;
|
||
|
||
view:not(.divider):nth-of-type(n+1) {
|
||
margin: 20rpx 0;
|
||
|
||
.card-view-title {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
flex: 1;
|
||
}
|
||
|
||
.card-view-value {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
|
||
image {
|
||
width: 8rpx;
|
||
height: 16rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-no {
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
padding: 22rpx 23rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 200rpx;
|
||
|
||
text:nth-of-type(n+1) {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
text:nth-of-type(1) {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
}
|
||
|
||
.bottom-action-view {
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
height: 80rpx;
|
||
justify-content: flex-end;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 12rpx 30rpx 78rpx 30rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
border-radius: 50rpx;
|
||
padding: 17rpx 45rpx;
|
||
border: 1rpx solid #707070;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
sqb-pay button {
|
||
padding: 0 45rpx;
|
||
border-radius: 50rpx;
|
||
border: 1rpx solid #F32B2B;
|
||
font-weight: bold;
|
||
background: #FFFFFF;
|
||
font-size: 30rpx;
|
||
color: #F32B2B;
|
||
}
|
||
}
|
||
</style>
|