wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mrr.sj.front/pages/shop/pay.vue

603 lines
15 KiB
Vue
Raw Normal View History

多个bug修改
2026-04-09 16:10:17 +08:00
<template>
<view class="pay-page">
<!-- 自定义导航栏 -->
<custom-navbar title="支付订单" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>
<!-- 支付金额 -->
<view class="amount-section">
<image src="/static/images/shop/pay_icon.png" mode="aspectFit" class="pay_icon"></image>
<view class="amount">
<text class="symbol">¥</text>
<text class="value">{{ orderInfo.pay_money }}</text>
</view>
<view class="countdown" v-if="countdown">支付剩余时间:
<uv-count-down :time="countdown * 1000" format="mm:ss" @finish="finish"></uv-count-down>
</view>
</view>
<!-- 支付方式 -->
<view class="method-section">
<view class="section-title">选择支付方式</view>
<view class="method-list">
<view class="method-item" v-for="(item, index) in methodList" :key="index" @click="selectMethod(item)">
<view class="method-info">
<image :src="item.icon" mode="aspectFit" class="method-icon"></image>
<text class="method-name">{{ item.name }}</text>
</view>
主题色变更
2026-06-02 11:39:23 +08:00
<agree-radio :isAgree="item.selected" :yesImg="`/static/images/agree_y.png`"
多个bug修改
2026-04-09 16:10:17 +08:00
:radioSize="`40rpx`" :noImg="`/static/images/icons/no_icon.png`"></agree-radio>
</view>
</view>
</view>
<!-- 底部支付按钮 -->
<view class="footer">
<!-- <view class="total-amount">
<view class="amount-money">
<text class="symbol">¥</text>
<text class="amount">{{ orderInfo.pay_money }}</text>
</view>
<text class="amount-lable">应付金额</text>
</view> -->
<view class="pay-btn" @click="confirmPay">立即支付</view>
</view>
</view>
</template>
<script>
import customNavbar from "@/components/custom-navbar/custom-navbar.vue";
import {
debounce
} from "../../utils/debounce";
import request from "@/utils/request";
export default {
components: {
customNavbar,
},
data() {
return {
countdown: 0,
identity: 0, //身份，0为商家1为手艺人
interfaceList: [{
weChatPayFor: "/sj/workHourOrder/weChatPayFor",
weChatSearch: "/sj/workHourOrder/weChatSearch",
aliPayFor: "/sj/workHourOrder/aliPayFor",
aliSearch: "/sj/workHourOrder/aliSearch",
path: "/pages/shop/manHourDetail",
},
{
weChatPayFor: "/syr/workSeatOrder/weChatPayFor",
weChatSearch: "/syr/workSeatOrder/weChatSearch",
aliPayFor: "/syr/workSeatOrder/aliPayFor",
aliSearch: "/syr/workSeatOrder/aliSearch",
path: "/pages/shop/manHourDetail",
},
],
orderInfo: {
id: "",
pay_money: "",
number: "",
},
serverTitle: "",
// countdown: '00:29:58',
selectedPayment: "wechat",
balance: "98489.98",
timer: null,
isPay: false,
methodList: [{
id: 1,
name: "微信",
payment: "wechat",
icon: "/static/images/shop//wechat.png",
selected: true,
},
{
id: 2,
name: "支付宝",
payment: "alipay",
icon: "/static/images/shop/alipay.png",
selected: false,
},
// {
// id: 3,
// name: '账户余额',
// payment: 'balance',
// icon: '/static/images/bankcard.png',
// selected: false
// }
],
};
},
computed: {
identityinfo() {
return this.interfaceList[this.identity];
},
},
onLoad(options) {
// this.getUserInfo();
if (options.id) {
this.orderInfo.id = options.id;
this.orderInfo.number = options.number;
this.orderInfo.pay_money = options.money;
this.serverTitle = options.title;
this.identity = options.identity;
// this.startCountdown()
// this.getOrderInfo()
}
if (options.number) {
this.getOderPayCountdown(options.number)
// this.startCountdown()
}
},
onUnload() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
async getOderPayCountdown(number) {
await request.post('/user/getOderPayCountdown', {
number: number
}).then(result => {
if (result.code == 200) {
console.log(result[0].countdown)
this.countdown = result[0].countdown
}
})
},
getUserInfo() {
request.post("/user/getuser", {
type: 1
}).then((result) => {
this.address.name = result.data.username;
this.address.phone = result.data.account;
});
},
// 获取订单信息
async getOrderInfo() {
try {
const res = await request.post("/order/detail", {
id: this.orderInfo.id,
});
if (res.code === 0) {
this.orderInfo = res.data;
}
} catch (error) {
console.error("获取订单信息失败:", error);
}
},
// 选择支付方式
selectMethod(item) {
this.selectedPayment = item.payment;
this.methodList.forEach((method) => {
method.selected = method.id === item.id;
});
},
finish() {
uni.showToast({
title: '支付超时，请重新下单',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
},
// 开始倒计时
startCountdown() {
let time = 30 * 60; // 30分钟
this.timer = setInterval(() => {
time--;
if (time <= 0) {
clearInterval(this.timer);
this.timer = null;
uni.showToast({
title: "支付超时，请重新下单",
icon: "none",
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
return;
}
const minutes = Math.floor(time / 60);
const seconds = time % 60;
this.countdown = `${String(minutes).padStart(2, "0")}:${String(
seconds
).padStart(2, "0")}`;
}, 1000);
},
// 确认支付 debounce
async confirmPay() {
let that = this;
if (that.isPay) return;
try {
uni.showLoading({
title: "支付中...",
});
console.log(that.selectedPayment);
switch (that.selectedPayment) {
case "wechat":
// 调用微信支付
let wechatpayfor = await request.post(
that.interfaceList[that.identity].weChatPayFor,
that.orderInfo
);
console.log("wechatpayfor", wechatpayfor);
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === "ios") {
let appId = wechatpayfor.data.appId;
// delete wechatpayfor.data.appid;
wechatpayfor.data["appId"] = appId;
console.log("wechatpayfor2", wechatpayfor);
console.log(that.orderInfo, 'that.orderInfothat.orderInfo');
}
console.log("================================");
uni.hideLoading();
uni.requestPayment({
provider: "wxpay",
orderInfo: wechatpayfor.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
success: function(res) {
console.log("success:", res);
console.log(that.orderInfo.id, that.orderInfo.number);
// let rawdata = JSON.parse(res.rawdata);
request
.post(that.interfaceList[that.identity].weChatSearch, {
id: that.orderInfo.id,
number: that.orderInfo.number,
})
.then((orderRes) => {
// if(orderRes.trade_state == 'SUCCESS') {
that.paySuccess();
// }else if(orderRes.trade_state == 'NOTPAY') {
// uni.showModal({
// title: '提示',
// content: '该订单未成功支付',
// success: function (res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
// }
})
.catch((err) => {
console.log("查询状态", err);
});
},
主题色变更
2026-06-02 11:39:23 +08:00
fail: function(err) {
多个bug修改
2026-04-09 16:10:17 +08:00
console.log(err,'erererererer');
uni.showModal({
title: "提示",
content: "该订单未成功支付",
success: function(res) {
if (res.confirm) {
console.log("用户点击确定");
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
console.log("fail:", JSON.stringify(err));
},
});
break;
case "alipay":
// 调用支付宝支付
let orderInfo = {
...that.orderInfo
};
orderInfo.title = that.serverTitle;
let alipayfor = await request.post(
that.interfaceList[that.identity].aliPayFor,
orderInfo
);
console.log("alipayfor", alipayfor);
uni.hideLoading();
uni.requestPayment({
provider: "alipay",
orderInfo: alipayfor.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
success: function(res) {
console.log("success:", res);
console.log(
"id: ",
that.orderInfo.id,
"number: ",
that.orderInfo.number
);
console.log("ali支付成功了====================");
request
.post(that.interfaceList[that.identity].aliSearch, {
id: that.orderInfo.id,
number: that.orderInfo.number,
})
.then((orderRes) => {
console.log("orderRes", orderRes, orderRes.trade_status);
console.log("ali报错了】】】】】】】】】】】】】】");
// if(orderRes.trade_status == 'TRADE_SUCCESS') {
that.paySuccess();
// }else {
// uni.showModal({
// title: '提示',
// content: '该订单未成功支付',
// success: function (res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
// }
})
.catch((err) => {
console.log("ali报错了】】】】】】】】】】】】】】", err);
console.log("查询状态", err);
});
},
fail: function(err) {
uni.showModal({
title: "提示",
content: "该订单未成功支付",
success: function(res) {
if (res.confirm) {
console.log("用户点击确定");
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
console.log("fail:", JSON.stringify(err));
},
});
break;
case "balance":
// 余额支付直接成功
const res = await request.post(
"/user/balancepayfor",
that.orderInfo
);
console.log("余额支付结果", res);
uni.hideLoading();
if (res.state == 1) {
that.paySuccess();
} else if (res.state == 2) {
uni.showToast({
title: res.msg,
});
}
break;
}
} catch (error) {
uni.hideLoading();
console.error("支付失败:", error);
uni.showToast({
title: "支付失败，请重试",
icon: "none",
});
this.isPay = false;
}
},
// 支付成功
paySuccess() {
uni.showToast({
title: "支付成功",
icon: "success",
});
setTimeout(() => {
uni.redirectTo({
url: `/pages/shop/pay-success?orderId=${this.orderInfo.id}&path=${this.interfaceList[this.identity].path}&identity=${this.identity}`,
});
}, 50);
this.isPay = true;
},
},
};
</script>
<style lang="less">
.pay-page {
padding-bottom: env(safe-area-inset-bottom);
}
/* 金额展示 */
.amount-section {
background-color: transparent;
padding: 51rpx 32rpx 129rpx 32rpx;
text-align: center;
.pay_icon {
width: 199rpx;
height: 178rpx;
margin-bottom: 34rpx;
}
.amount {
margin-bottom: 24rpx;
.symbol {
font-family: DINPro, DINPro;
font-weight: bold;
font-size: 54rpx;
color: #333333;
line-height: 70rpx;
text-align: left;
font-style: normal;
}
.value {
font-family: DINPro, DINPro;
font-weight: bold;
font-size: 88rpx;
color: #333333;
line-height: 114rpx;
text-align: left;
font-style: normal;
}
.value2 {
font-family: DINPro, DINPro;
font-weight: bold;
font-size: 56rpx;
color: #333333;
line-height: 72rpx;
text-align: left;
font-style: normal;
}
}
.countdown {
font-weight: 400;
font-size: 26rpx;
color: #333333;
line-height: 37rpx;
text-align: center;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
::v-deep .uv-count-down__text {
font-weight: 400;
font-size: 26rpx;
color: #333333;
line-height: 37rpx;
text-align: center;
font-style: normal;
}
}
}
/* 支付方式 */
.method-section {
background-image: url("/static/images/shop/payBj.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
background-color: #fff;
margin: 0 20rpx;
padding: 22rpx 26rpx 62rpx 26rpx;
border-radius: 0rpx 0rpx 20rpx 20rpx;
}
.section-title {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-bottom: 23rpx;
}
.balance-amount {
font-size: 28rpx;
color: #999999;
margin-left: 16rpx;
}
/* 底部按钮 */
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 150rpx;
background-color: #ffffff;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 0 24rpx;
padding-bottom: env(safe-area-inset-bottom);
}
.total-amount {
flex: 1;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.total-amount .symbol {
font-size: 24rpx;
font-weight: 500;
主题色变更
2026-06-02 11:39:23 +08:00
color: #FF4767;
多个bug修改
2026-04-09 16:10:17 +08:00
}
.total-amount .amount {
font-size: 28rpx;
font-weight: 500;
主题色变更
2026-06-02 11:39:23 +08:00
color: #FF4767;
多个bug修改
2026-04-09 16:10:17 +08:00
}
.amount-lable {
font-size: 24rpx;
color: #999999;
}
.pay-btn {
width: 680rpx;
height: 88rpx;
主题色变更
2026-06-02 11:39:23 +08:00
background: linear-gradient(180deg, #F52540 0%, #FF4767 100%);
多个bug修改
2026-04-09 16:10:17 +08:00
border-radius: 43rpx;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
line-height: 42rpx;
text-align: left;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
}
.method-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 0;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.method-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.method-info {
display: flex;
align-items: center;
}
.method-icon {
width: 38rpx;
height: 38rpx;
margin-right: 20rpx;
}
.method-name {
font-weight: 500;
font-size: 30rpx;
color: #5B5B5B;
line-height: 42rpx;
text-align: left;
font-style: normal;
}
/* 多端适配 */
/* #ifdef H5 */
.footer {
padding-bottom: 0;
}
/* #endif */
初始化商家app代码
2026-03-24 11:45:13 +08:00
</style>