603 lines
15 KiB
Vue
603 lines
15 KiB
Vue
<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>
|
||
<agree-radio :isAgree="item.selected" :yesImg="`/static/images/icons/yes_icon.png`"
|
||
: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);
|
||
});
|
||
},
|
||
fail: function(err) {
|
||
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;
|
||
color: #E8101E;
|
||
}
|
||
|
||
.total-amount .amount {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #E8101E;
|
||
}
|
||
|
||
.amount-lable {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.pay-btn {
|
||
width: 680rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(180deg, #F52540 0%, #E8101E 100%);
|
||
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 */
|
||
</style> |