feat(订单): 添加支付功能并调整订单详情显示逻辑

- 在订单页面添加支付按钮,并实现支付逻辑
- 根据订单支付状态调整订单详情页面的显示内容
- 修复购物车栏底部位置,提升用户体验
This commit is contained in:
yindongqi 2025-04-11 14:46:07 +08:00
parent 846b3f1660
commit 363b620a08
3 changed files with 78 additions and 11 deletions

View File

@ -24,11 +24,14 @@
<!-- store info end -->
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<view class="d-flex align-items-center just-content-center">
<view v-if="order.paid == 0" class="d-flex align-items-center just-content-center mb-40">
<view class="font-size-lg text-color-error">订单未支付</view>
</view>
<view v-if="order.paid > 0" class="d-flex align-items-center just-content-center">
<view class="sort-num">{{ order.numberId }}</view>
</view>
<!-- steps begin -->
<view class="d-flex just-content-center">
<view v-if="order.paid > 0" class="d-flex just-content-center">
<view class="steps d-flex flex-column w-80">
<view class="steps__img-column">
<view class="steps__img-column-item">

View File

@ -1194,7 +1194,7 @@
.cart-bar {
position: fixed;
bottom: 140rpx;
bottom: 30rpx;
left: 0;
width: calc(100% - 80rpx);
height: 100rpx;

View File

@ -74,7 +74,15 @@
</view>
<!-- 操作按钮 -->
<!-- 支付按钮 -->
<view class="group_4 flex-row">
<view
v-if="item.statusDto.type === '0'"
class="text-wrapper_6 flex-col action-button"
@tap.stop="handlePay(item)"
>
<text class="text_11">支付</text>
</view>
<!-- 发票按钮 -->
<view
v-if="item.statusDto.type === '4'"
@ -124,6 +132,11 @@ import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { formatDateTime, kmUnit } from "@/utils/util";
import { orderGetOrders, orderReceive } from "@/api/order";
import { applyInvoice } from "@/api/order";
// payUnify
import { payUnify } from '@/api/order';
import { isWeixin } from '@/utils/util';
const main = useMainStore();
const { isLogin } = storeToRefs(main);
const title = ref("我的订单");
@ -179,8 +192,8 @@ onReachBottom(() => {
// tab
const change = (e) => {
console.log('e;',e.type)
console.log('e.index;',e.index)
console.log("e;", e.type);
console.log("e.index;", e.index);
type.value = e.type;
getOrders(true);
current.value = e.index;
@ -213,6 +226,56 @@ const detail = (id) => {
});
};
const handlePay = async (item) => {
// uni.showLoading({ title: "" });
try {
//
let from = "routine";
// #ifdef H5
from = "h5";
if (isWeixin()) {
from = "wechat";
}
// #endif
let data = await payUnify({
uni: item.orderId,
from: from,
paytype: "weixin",
});
if (!data) {
// uni.hideLoading();
return;
}
if (data.trade_type === "JSAPI") {
// #ifdef MP-WEIXIN
uni.requestPayment({
provider: "wxpay",
timeStamp: data.data.timeStamp,
nonceStr: data.data.nonceStr,
package: data.data.package,
signType: "MD5",
paySign: data.data.paySign,
success: function () {
uni.showToast({ title: "支付成功" });
getOrders(true); //
},
fail: function (err) {
console.log("支付失败:", err);
// uni.hideLoading();
},
});
// #endif
}
} catch (error) {
console.error("支付异常:", error);
// uni.hideLoading();
}
};
const handleInvoice = async (item) => {
if (item.invoiceStatus === "UNREQUESTED") {
//
@ -226,8 +289,8 @@ const handleInvoice = async (item) => {
//
if (item.invoiceAddress) {
uni.showLoading({
title: '加载中',
mask: true
title: "加载中",
mask: true,
});
uni.downloadFile({
url: item.invoiceAddress,
@ -244,11 +307,11 @@ const handleInvoice = async (item) => {
fail: (err) => {
uni.hideLoading();
uni.showToast({
title: '发票下载失败',
icon: 'none'
title: "发票下载失败",
icon: "none",
});
console.error('下载发票失败:', err);
}
console.error("下载发票失败:", err);
},
});
}
}
@ -435,6 +498,7 @@ const receive = async (order) => {
font-weight: 600;
text-align: right;
white-space: nowrap;
padding-right: 20rpx;
/* line-height: 194rpx; */
}