mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
This commit is contained in:
Yer11214
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="error-page">
|
||||
<u-navbar title="支付失败" :border="false" :fixed="true" :placeholder="true" :auto-back="true"></u-navbar>
|
||||
<view class="error-content">
|
||||
<u-icon name="close-circle-fill" color="#f56c6c" size="120"></u-icon>
|
||||
<text class="error-title">支付失败</text>
|
||||
<text class="error-desc">{{ errorMessage || '支付过程中出现错误，请重试' }}</text>
|
||||
<view class="btn-group">
|
||||
<u-button type="primary" text="返回订单" @click="goBack"></u-button>
|
||||
<u-button type="warning" text="去支付" @click="rePay"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const errorMessage = ref('')
|
||||
const orderSn = ref('')
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (options) {
|
||||
errorMessage.value = options.message || ''
|
||||
orderSn.value = options.orderSn || ''
|
||||
}
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({ url: '/pages/tabbar/user/my' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function rePay() {
|
||||
if (orderSn.value) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderSn=${orderSn.value}`
|
||||
})
|
||||
} else {
|
||||
goBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.error-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 40rpx;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 60rpx;
|
||||
width: 100%;
|
||||
|
||||
:deep(.u-button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -66,410 +66,264 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import {payCallback} from '@/api/members'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//路径传参
|
||||
routerVal: "",
|
||||
//收银台参数
|
||||
cashierParams: "",
|
||||
//支付方式集合
|
||||
payList: "",
|
||||
//支付sn
|
||||
sn: "",
|
||||
//订单类型
|
||||
orderType: "",
|
||||
//支付异常
|
||||
exception: {},
|
||||
//支付表单
|
||||
payForm: {},
|
||||
//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
|
||||
paymentType: "",
|
||||
// 支付客户端 APP/NATIVE/JSAPI/H5
|
||||
paymentClient: "",
|
||||
//余额
|
||||
walletValue: 0.0,
|
||||
// 支付倒计时（毫秒）
|
||||
autoCancelTime: 0,
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(val) {
|
||||
this.routerVal = val;
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||||
import { onLoad, onBackPress } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import * as API_Trade from '@/api/trade'
|
||||
import { payCallback } from '@/api/members'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
//初始化参数
|
||||
// #ifdef APP-PLUS
|
||||
this.paymentType = "APP";
|
||||
this.paymentClient = "APP";
|
||||
//#endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.paymentType = "WECHAT_MP";
|
||||
this.paymentClient = "MP";
|
||||
//#endif
|
||||
// #ifdef H5
|
||||
this.paymentType = "H5";
|
||||
//如果是微信浏览器，则使用公众号支付，否则使用h5，
|
||||
// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
|
||||
this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
|
||||
//#endif
|
||||
const store = useStore()
|
||||
const { proxy } = getCurrentInstance()!
|
||||
|
||||
const routerVal = ref<Record<string, string>>({})
|
||||
const cashierParams = ref<Record<string, any>>({ price: 0 })
|
||||
const payList = ref<string[]>([])
|
||||
const sn = ref('')
|
||||
const orderType = ref('')
|
||||
const paymentType = ref('')
|
||||
const paymentClient = ref('')
|
||||
const walletValue = ref(0)
|
||||
const autoCancelTime = ref(0)
|
||||
|
||||
onLoad((val) => {
|
||||
routerVal.value = val || {}
|
||||
// #ifdef APP-PLUS
|
||||
paymentType.value = 'APP'
|
||||
paymentClient.value = 'APP'
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
paymentType.value = 'WECHAT_MP'
|
||||
paymentClient.value = 'MP'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
paymentType.value = 'H5'
|
||||
paymentClient.value = isWeiXin() ? 'JSAPI' : 'H5'
|
||||
// #endif
|
||||
})
|
||||
|
||||
//
|
||||
},
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
if(this.routerVal.recharge_sn){
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/user/my'
|
||||
});
|
||||
}
|
||||
else{
|
||||
uni.navigateTo({
|
||||
url: "/pages/order/myOrder?status=0",
|
||||
});
|
||||
}
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cashierData();
|
||||
},
|
||||
methods: {
|
||||
onBackPress((e) => {
|
||||
if (e.from == 'backbutton') {
|
||||
if (routerVal.value.recharge_sn) {
|
||||
uni.switchTab({ url: '/pages/tabbar/user/my' })
|
||||
} else {
|
||||
uni.navigateTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
/**
|
||||
* 支付成功后跳转
|
||||
*/
|
||||
callback(paymentMethod){
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/success?paymentMethod=" +
|
||||
paymentMethod +
|
||||
"&payPrice=" +
|
||||
this.cashierParams.price+
|
||||
"&orderType="+this.orderType
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取收银详情
|
||||
*/
|
||||
cashierData() {
|
||||
let parms = {};
|
||||
onMounted(() => {
|
||||
cashierData()
|
||||
})
|
||||
|
||||
if (this.routerVal.recharge_sn) {
|
||||
// 判断当前是否是充值
|
||||
this.sn = this.routerVal.recharge_sn;
|
||||
this.orderType = "RECHARGE";
|
||||
|
||||
} else if (this.routerVal.trade_sn) {
|
||||
this.sn = this.routerVal.trade_sn;
|
||||
this.orderType = "TRADE";
|
||||
} else {
|
||||
this.sn = this.routerVal.order_sn;
|
||||
this.orderType = "ORDER";
|
||||
}
|
||||
parms.sn = this.sn;
|
||||
parms.orderType = this.orderType;
|
||||
parms.clientType = this.paymentType;
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
|
||||
if(res.data.success){
|
||||
this.cashierParams = res.data.result;
|
||||
function callback(paymentMethod: string) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/cart/payment/success?paymentMethod=' +
|
||||
paymentMethod +
|
||||
'&payPrice=' +
|
||||
cashierParams.value.price +
|
||||
'&orderType=' +
|
||||
orderType.value,
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// #endif
|
||||
function cashierData() {
|
||||
const parms: Record<string, string> = {}
|
||||
|
||||
|
||||
if(this.routerVal.recharge_sn){
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "WALLET";
|
||||
})
|
||||
}
|
||||
else{
|
||||
this.payList = res.data.result.support;
|
||||
}
|
||||
// #ifdef H5
|
||||
//判断是否微信浏览器
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item != "ALIPAY";
|
||||
});
|
||||
// 充值的话仅保留微信支付
|
||||
if(this.orderType == "RECHARGE"){
|
||||
this.payList = res.data.result.support.filter((item) => {
|
||||
return item == "WECHAT";
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
if (routerVal.value.recharge_sn) {
|
||||
sn.value = routerVal.value.recharge_sn
|
||||
orderType.value = 'RECHARGE'
|
||||
} else if (routerVal.value.trade_sn) {
|
||||
sn.value = routerVal.value.trade_sn
|
||||
orderType.value = 'TRADE'
|
||||
} else {
|
||||
sn.value = routerVal.value.order_sn
|
||||
orderType.value = 'ORDER'
|
||||
}
|
||||
parms.sn = sn.value
|
||||
parms.orderType = orderType.value
|
||||
parms.clientType = paymentType.value
|
||||
|
||||
this.walletValue = res.data.result.walletValue;
|
||||
const cancelAt = Number(res.data.result.autoCancel);
|
||||
this.autoCancelTime = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0;
|
||||
}
|
||||
else if(res.data.code == 32000){
|
||||
setTimeout(()=>{
|
||||
uni.redirectTo({
|
||||
url: `/pages/order/myOrder?status=0`
|
||||
});
|
||||
},500)
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
API_Trade.getCashierData(parms).then((res) => {
|
||||
if (res.data.success) {
|
||||
cashierParams.value = res.data.result
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
|
||||
// #endif
|
||||
|
||||
awaitPay(payment){
|
||||
this.$u.throttle(()=>{
|
||||
this.pay(payment)
|
||||
}, 2000)
|
||||
},
|
||||
if (routerVal.value.recharge_sn) {
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'WALLET')
|
||||
} else {
|
||||
payList.value = res.data.result.support
|
||||
}
|
||||
|
||||
padTime(val) {
|
||||
return String(val ?? 0).padStart(2, '0');
|
||||
},
|
||||
// #ifdef H5
|
||||
const ua = window.navigator.userAgent.toLowerCase()
|
||||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||
payList.value = res.data.result.support.filter((item: string) => item != 'ALIPAY')
|
||||
if (orderType.value == 'RECHARGE') {
|
||||
payList.value = res.data.result.support.filter((item: string) => item == 'WECHAT')
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
onPayTimeout() {
|
||||
uni.showToast({
|
||||
title: '支付超时，请重新下单',
|
||||
icon: 'none',
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/myOrder?status=0',
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
walletValue.value = res.data.result.walletValue
|
||||
const cancelAt = Number(res.data.result.autoCancel)
|
||||
autoCancelTime.value = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0
|
||||
} else if (res.data.code == 32000) {
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//订单支付
|
||||
async pay(payment) {
|
||||
|
||||
// 支付编号
|
||||
const sn = this.sn;
|
||||
// 交易类型【交易号|订单号】
|
||||
const orderType = this.orderType;
|
||||
function awaitPay(payment: string) {
|
||||
proxy.$u.throttle(() => {
|
||||
pay(payment)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const clientType = this.paymentType;
|
||||
let params = {
|
||||
sn,
|
||||
orderType,
|
||||
clientType,
|
||||
};
|
||||
function padTime(val: number) {
|
||||
return String(val ?? 0).padStart(2, '0')
|
||||
}
|
||||
|
||||
//支付方式 WECHAT/ALIPAY
|
||||
const paymentMethod = payment;
|
||||
// 客户端类型 APP/NATIVE/JSAPI/H5
|
||||
const paymentClient = this.paymentClient;
|
||||
|
||||
uni.showLoading({
|
||||
title: "正在唤起支付...",
|
||||
mask:true
|
||||
});
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
//APP pay
|
||||
// 初始化支付签名
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(signXml) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
//如果支付异常
|
||||
if (!signXml.data.success) {
|
||||
uni.showToast({
|
||||
title: signXml.data.message,
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let payForm = signXml.data.result;
|
||||
|
||||
let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
|
||||
|
||||
if(paymentMethod === "WALLET"){
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
}
|
||||
else{
|
||||
uni.requestPayment({
|
||||
provider: paymentType,
|
||||
orderInfo: payForm || '',
|
||||
success: (e) => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(this);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
//APP pay
|
||||
// #endif
|
||||
function onPayTimeout() {
|
||||
uni.showToast({ title: '支付超时，请重新下单', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/order/myOrder?status=0' })
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
//#ifdef H5
|
||||
//H5 pay
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data;
|
||||
//如果非支付宝支付才需要进行判定，因为支付宝h5支付是直接输出的，没有返回所谓的消息状态
|
||||
if(paymentMethod !== "ALIPAY"){
|
||||
//如果支付异常
|
||||
if (!response.success) {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
duration: 2000,
|
||||
icon:"none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (paymentMethod === "ALIPAY") {
|
||||
document.write(response);
|
||||
} else if (paymentMethod === "WECHAT") {
|
||||
if (this.isWeiXin()) {
|
||||
//微信公众号支付
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
response.result,
|
||||
(res) => {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
} else {
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url;
|
||||
const searchParams = {
|
||||
...params,
|
||||
price:this.cashierParams,
|
||||
}
|
||||
const timer = setInterval(()=>{
|
||||
payCallback(searchParams).then(res=>{
|
||||
if(res.data.result){
|
||||
clearTimeout(timer);
|
||||
uni.navigateTo({
|
||||
url:"/pages/order/myOrder"
|
||||
})
|
||||
}
|
||||
})
|
||||
},3000)
|
||||
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
}
|
||||
} else if (paymentMethod === "WALLET") {
|
||||
uni.showToast({
|
||||
title: response.message,
|
||||
icon: "none",
|
||||
});
|
||||
if (response.success) {
|
||||
this.callback(paymentMethod)
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
//H5pay
|
||||
// #endif
|
||||
function goPayError(message = '支付失败，如果您已支付，请勿反复支付') {
|
||||
const query = [`orderSn=${encodeURIComponent(sn.value)}`, `message=${encodeURIComponent(message)}`]
|
||||
uni.navigateTo({ url: `/pages/cart/payment/error?${query.join('&')}` })
|
||||
}
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
//微信小程序
|
||||
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
|
||||
(res) => {
|
||||
let response = res.data.result;
|
||||
//如果支付异常
|
||||
if (!res.data.success) {
|
||||
uni.showModal({
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (paymentMethod === "WECHAT") {
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
this.exception = e;
|
||||
uni.showModal({
|
||||
content: "支付失败,如果您已支付，请勿反复支付",
|
||||
showCancel: false,
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "支付成功!",
|
||||
});
|
||||
this.callback(paymentMethod)
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
},
|
||||
isWeiXin() {
|
||||
var ua = window.navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
async function pay(payment: string) {
|
||||
const params = {
|
||||
sn: sn.value,
|
||||
orderType: orderType.value,
|
||||
clientType: paymentType.value,
|
||||
}
|
||||
const paymentMethod = payment
|
||||
const client = paymentClient.value
|
||||
|
||||
uni.showLoading({ title: '正在唤起支付...', mask: true })
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((signXml) => {
|
||||
hideLoadingIfNeeded()
|
||||
if (!signXml.data.success) {
|
||||
uni.showToast({ title: signXml.data.message, duration: 2000 })
|
||||
return
|
||||
}
|
||||
const payForm = signXml.data.result
|
||||
const provider = paymentMethod === 'WECHAT' ? 'wxpay' : 'alipay'
|
||||
if (paymentMethod === 'WALLET') {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
} else {
|
||||
uni.requestPayment({
|
||||
provider,
|
||||
orderInfo: payForm || '',
|
||||
success: () => {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
},
|
||||
fail: () => {
|
||||
goPayError()
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
|
||||
const response = res.data
|
||||
if (paymentMethod !== 'ALIPAY' && !response.success) {
|
||||
uni.showToast({ title: response.message, duration: 2000, icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (paymentMethod === 'ALIPAY') {
|
||||
document.write(response)
|
||||
} else if (paymentMethod === 'WECHAT') {
|
||||
if (isWeiXin()) {
|
||||
WeixinJSBridge.invoke('getBrandWCPayRequest', response.result, (payRes: any) => {
|
||||
if (payRes.err_msg == 'get_brand_wcpay_request:ok') {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
} else {
|
||||
goPayError()
|
||||
}
|
||||
})
|
||||
hideLoadingIfNeeded()
|
||||
} else {
|
||||
window.location.href = JSON.parse(response.result).h5_url
|
||||
const searchParams = { ...params, price: cashierParams.value }
|
||||
const timer = setInterval(() => {
|
||||
payCallback(searchParams).then((cbRes) => {
|
||||
if (cbRes.data.result) {
|
||||
clearInterval(timer)
|
||||
uni.navigateTo({ url: '/pages/order/myOrder' })
|
||||
}
|
||||
})
|
||||
}, 3000)
|
||||
hideLoadingIfNeeded()
|
||||
}
|
||||
} else if (paymentMethod === 'WALLET') {
|
||||
uni.showToast({ title: response.message, icon: 'none' })
|
||||
if (response.success) callback(paymentMethod)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
await API_Trade.initiatePay(paymentMethod, client, params).then((res) => {
|
||||
const response = res.data.result
|
||||
if (!res.data.success) {
|
||||
uni.showModal({ content: res.data.message, showCancel: false })
|
||||
return
|
||||
}
|
||||
if (paymentMethod === 'WECHAT') {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
appid: response.appid,
|
||||
timeStamp: response.timeStamp,
|
||||
nonceStr: response.nonceStr,
|
||||
package: response.package,
|
||||
signType: response.signType,
|
||||
paySign: response.paySign,
|
||||
success: () => {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
},
|
||||
fail: () => {
|
||||
goPayError()
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ icon: 'none', title: '支付成功!' })
|
||||
callback(paymentMethod)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
function isWeiXin() {
|
||||
const ua = window.navigator.userAgent.toLowerCase()
|
||||
return ua.match(/MicroMessenger/i) == 'micromessenger'
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.method_icon {
|
||||
|
||||
@@ -49,7 +49,13 @@
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="count-down" v-if="!isOver && master.toBeGroupedNum">
|
||||
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
|
||||
<u-count-down
|
||||
v-if="timeStamp > 0"
|
||||
bgColor="#ededed"
|
||||
:time="timeStamp * 1000"
|
||||
format="HH:mm:ss"
|
||||
@finish="onCountDownEnd"
|
||||
></u-count-down>
|
||||
</div>
|
||||
|
||||
<div class="user-list" v-if="data.pintuanMemberVOS">
|
||||
@@ -59,173 +65,184 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
|
||||
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlag " />
|
||||
<popupGoods
|
||||
:addr="addr"
|
||||
ref="popupGoodsRef"
|
||||
:buyMask="maskFlag"
|
||||
@closeBuy="closePopupBuy"
|
||||
:goodsDetail="goodsDetail"
|
||||
:goodsSpec="goodsSpec"
|
||||
v-if="goodsDetail.id"
|
||||
@handleClickSku="getGoodsDetail"
|
||||
/>
|
||||
<shares
|
||||
@close="closeShare"
|
||||
:link="shareLink"
|
||||
type="pintuan"
|
||||
:thumbnail="data.promotionGoods.thumbnail"
|
||||
:goodsName="data.promotionGoods.goodsName"
|
||||
v-if="shareFlag"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoods } from "@/api/goods.js";
|
||||
import { getPinTuanShare } from "@/api/order";
|
||||
import shares from "@/components/m-share/index";
|
||||
import storage from "@/utils/storage.js";
|
||||
import popupGoods from "@/components/m-buy/goods"; //购物车商品的模块
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useStore } from '@/store'
|
||||
import { getGoods } from '@/api/goods.js'
|
||||
import { getPinTuanShare } from '@/api/order'
|
||||
import shares from '@/components/m-share/index'
|
||||
import storage from '@/utils/storage.js'
|
||||
import popupGoods from '@/components/m-buy/goods'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false, //判断接口是否正常请求
|
||||
addr: {
|
||||
id: "",
|
||||
},
|
||||
maskFlag: false, //商品弹框
|
||||
timeStamp: 0,
|
||||
shareFlag: false,
|
||||
data: "",
|
||||
isMaster: true,
|
||||
selectedGoods: "", //选择的商品规格昵称
|
||||
routers: "", //传参数据
|
||||
goodsDetail: "", //商品详情
|
||||
goodsSpec: "",
|
||||
master: "", // 团长
|
||||
PromotionList: "", //优惠集合
|
||||
isGroup: false, //是否拼团
|
||||
isOver: false, //是否结束活动
|
||||
isBuy: false, //当前用户是是否购买
|
||||
};
|
||||
},
|
||||
components: {
|
||||
shares,
|
||||
popupGoods,
|
||||
},
|
||||
watch: {
|
||||
isGroup(val) {
|
||||
if (val) {
|
||||
let timer = setInterval(() => {
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
clearInterval(timer);
|
||||
}, 100);
|
||||
} else {
|
||||
this.$refs.popupGoods.buyType = "";
|
||||
const store = useStore()
|
||||
|
||||
const popupGoodsRef = ref<any>(null)
|
||||
const flag = ref(false)
|
||||
const addr = ref({ id: '' })
|
||||
const maskFlag = ref(false)
|
||||
const timeStamp = ref(0)
|
||||
const shareFlag = ref(false)
|
||||
const data = ref<any>(null)
|
||||
const isMaster = ref(true)
|
||||
const selectedGoods = ref<any>(null)
|
||||
const routers = ref<Record<string, string>>({})
|
||||
const goodsDetail = ref<any>({})
|
||||
const goodsSpec = ref<any>(null)
|
||||
const master = ref<any>(null)
|
||||
const PromotionList = ref<any>(null)
|
||||
const isGroup = ref(false)
|
||||
const isOver = ref(false)
|
||||
const isBuy = ref(false)
|
||||
|
||||
const shareLink = computed(() => {
|
||||
const { sn, sku, goodsId } = routers.value
|
||||
return `/pages/cart/payment/shareOrderGoods?sn=${sn}&sku=${sku}&goodsId=${goodsId}`
|
||||
})
|
||||
|
||||
watch(isGroup, (val) => {
|
||||
if (val) {
|
||||
const timer = setInterval(() => {
|
||||
if (popupGoodsRef.value) {
|
||||
popupGoodsRef.value.buyType = 'PINTUAN'
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routers = options;
|
||||
},
|
||||
mounted() {
|
||||
this.init(this.routers.sn, this.routers.sku);
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.shareFlag = false;
|
||||
},
|
||||
// 这里的话得先跳到商品详情才能购买商品
|
||||
toBuy() {
|
||||
this.maskFlag = true;
|
||||
this.$refs.popupGoods.parentOrder = {
|
||||
...this.master,
|
||||
orderSn: this.routers.sn,
|
||||
};
|
||||
this.$refs.popupGoods.isMask = true;
|
||||
this.$refs.popupGoods.isClose = true;
|
||||
this.$refs.popupGoods.buyType = "PINTUAN";
|
||||
},
|
||||
// 分享
|
||||
share() {
|
||||
this.shareFlag = true;
|
||||
},
|
||||
closePopupBuy(val) {
|
||||
this.maskFlag = false;
|
||||
},
|
||||
// 实例化本页面
|
||||
async init(sn, sku) {
|
||||
let res = await getPinTuanShare(sn, sku);
|
||||
if (res.data.success && res.data.result.promotionGoods) {
|
||||
this.flag = true;
|
||||
this.data = res.data.result;
|
||||
this.selectedGoods = res.data.result.promotionGoods;
|
||||
let endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
|
||||
);
|
||||
// 获取当前剩余的拼团商品时间
|
||||
let timeStamp = Date.parse(new Date(endTime)) / 1000;
|
||||
clearInterval(timer)
|
||||
}, 100)
|
||||
} else if (popupGoodsRef.value) {
|
||||
popupGoodsRef.value.buyType = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 获取当前时间时间戳
|
||||
let dateTime = Date.parse(new Date()) / 1000;
|
||||
onLoad((options) => {
|
||||
routers.value = options || {}
|
||||
})
|
||||
|
||||
this.timeStamp = parseInt(timeStamp - dateTime);
|
||||
onMounted(() => {
|
||||
init(routers.value.sn, routers.value.sku)
|
||||
})
|
||||
|
||||
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
|
||||
function hideLoadingIfNeeded() {
|
||||
if (store.state.isShowToast) uni.hideLoading()
|
||||
}
|
||||
|
||||
// 获取剩余拼团人数
|
||||
this.master =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.orderSn == "";
|
||||
})[0];
|
||||
function closeShare() {
|
||||
shareFlag.value = false
|
||||
}
|
||||
|
||||
// 获取当前是否是拼团本人
|
||||
if (
|
||||
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
|
||||
this.master.memberId
|
||||
) {
|
||||
this.isMaster = true;
|
||||
} else {
|
||||
this.isMaster = false;
|
||||
// 获取商品详情
|
||||
this.getGoodsDetail({
|
||||
id: this.routers.sku,
|
||||
goodsId: this.routers.goodsId,
|
||||
});
|
||||
function onCountDownEnd() {
|
||||
isOver.value = true
|
||||
}
|
||||
|
||||
function toBuy() {
|
||||
maskFlag.value = true
|
||||
if (!popupGoodsRef.value) return
|
||||
popupGoodsRef.value.parentOrder = {
|
||||
...master.value,
|
||||
orderSn: routers.value.sn,
|
||||
}
|
||||
popupGoodsRef.value.isMask = true
|
||||
popupGoodsRef.value.isClose = true
|
||||
popupGoodsRef.value.buyType = 'PINTUAN'
|
||||
}
|
||||
|
||||
function share() {
|
||||
shareFlag.value = true
|
||||
}
|
||||
|
||||
function closePopupBuy() {
|
||||
maskFlag.value = false
|
||||
}
|
||||
|
||||
async function init(sn: string, sku: string) {
|
||||
const res = await getPinTuanShare(sn, sku)
|
||||
if (res.data.success && res.data.result.promotionGoods) {
|
||||
flag.value = true
|
||||
data.value = res.data.result
|
||||
selectedGoods.value = res.data.result.promotionGoods
|
||||
const endTime = Date.parse(
|
||||
res.data.result.promotionGoods.endTime.replace(/-/g, '/')
|
||||
)
|
||||
const endTimestamp = Date.parse(new Date(endTime) as any) / 1000
|
||||
const dateTime = Date.parse(new Date() as any) / 1000
|
||||
timeStamp.value = parseInt(String(endTimestamp - dateTime))
|
||||
isOver.value = timeStamp.value <= 0
|
||||
|
||||
master.value =
|
||||
res.data.result.pintuanMemberVOS.length != 0 &&
|
||||
res.data.result.pintuanMemberVOS.filter((item: any) => item.orderSn == '')[0]
|
||||
|
||||
if (
|
||||
storage.getUserInfo(routers.value.sku, routers.value.goodsId).id ==
|
||||
master.value.memberId
|
||||
) {
|
||||
isMaster.value = true
|
||||
} else {
|
||||
isMaster.value = false
|
||||
getGoodsDetail({
|
||||
id: routers.value.sku,
|
||||
goodsId: routers.value.goodsId,
|
||||
})
|
||||
}
|
||||
|
||||
if (storage.getUserInfo().id) {
|
||||
const bought = res.data.result.pintuanMemberVOS.filter(
|
||||
(item: any) => item.memberId == storage.getUserInfo().id
|
||||
)
|
||||
isBuy.value = bought.length != 0
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '当前拼团单有误！请联系管理员重试',
|
||||
duration: 2000,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getGoodsDetail(val: { id: string; goodsId: string }) {
|
||||
const { id, goodsId } = val
|
||||
uni.showLoading({ title: '加载中', mask: true })
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
goodsDetail.value = response.data.result.data
|
||||
selectedGoods.value = response.data.result.data
|
||||
goodsSpec.value = response.data.result.specs
|
||||
hideLoadingIfNeeded()
|
||||
PromotionList.value = response.data.result.promotionMap
|
||||
if (PromotionList.value) {
|
||||
Object.keys(PromotionList.value).forEach((item) => {
|
||||
if (item.indexOf('PINTUAN') == 0) {
|
||||
isGroup.value = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前商品是否已经购买
|
||||
if (storage.getUserInfo().id) {
|
||||
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
|
||||
return item.memberId == storage.getUserInfo().id;
|
||||
});
|
||||
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "当前拼团单有误！请联系管理员重试",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取商品详情
|
||||
getGoodsDetail(val) {
|
||||
let { id, goodsId } = val;
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
getGoods(id, goodsId).then((response) => {
|
||||
this.goodsDetail = response.data.result.data;
|
||||
this.selectedGoods = response.data.result.data;
|
||||
this.goodsSpec = response.data.result.specs;
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
this.PromotionList = response.data.result.promotionMap;
|
||||
|
||||
// 判断是否拼团活动 如果有则显示拼团活动信息
|
||||
this.PromotionList &&
|
||||
Object.keys(this.PromotionList).forEach((item) => {
|
||||
if (item.indexOf("PINTUAN") == 0) {
|
||||
this.isGroup = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
handleClickHome() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
function handleClickHome() {
|
||||
uni.switchTab({ url: '/pages/tabbar/home/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
￥{{unitPrice(Number(payPrice)) }}
|
||||
</div>
|
||||
<div class="pay-btns">
|
||||
<div v-show="!from" @click="checkOrder">查看{{ this.orderType == "RECHARGE" ? '余额' : '订单' }}</div>
|
||||
<div v-show="!from" @click="checkOrder">查看{{ orderType == "RECHARGE" ? '余额' : '订单' }}</div>
|
||||
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,73 +24,55 @@
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import goodsRecommend from "@/components/m-goods-recommend";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
paymentMethod: "",
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import goodsRecommend from '@/components/m-goods-recommend'
|
||||
import { unitPrice } from '@/utils/filters.js'
|
||||
|
||||
from: "",
|
||||
payPrice: 0,
|
||||
goodsList: [],
|
||||
activeColor: this.$mainColor,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
goodsRecommend,
|
||||
},
|
||||
onLoad(options) {
|
||||
this.paymentMethod = options.paymentMethod || "";
|
||||
this.from = options.from || "";
|
||||
this.payPrice = options.payPrice || 0;
|
||||
this.orderType = options.orderType;
|
||||
const paymentMethod = ref('')
|
||||
const from = ref('')
|
||||
const payPrice = ref<number | string>(0)
|
||||
const orderType = ref('')
|
||||
|
||||
},
|
||||
methods: {
|
||||
paymentTypeFilter(val) {
|
||||
switch (val) {
|
||||
case "WECHAT":
|
||||
return "微信";
|
||||
case "ALIPAY":
|
||||
return "支付宝";
|
||||
case "WALLET":
|
||||
return "余额支付";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
checkOrder() {
|
||||
/**
|
||||
* 查看订单
|
||||
* 1.充值跳转到明细里面
|
||||
* 2.支付跳转到订单详情
|
||||
*/
|
||||
if (this.orderType == "RECHARGE") {
|
||||
uni.reLaunch({
|
||||
url: `/pages/mine/deposit/operation`,
|
||||
});
|
||||
} else {
|
||||
this.navigateTo("/pages/order/myOrder?status=0");
|
||||
}
|
||||
},
|
||||
onLoad((options) => {
|
||||
paymentMethod.value = options.paymentMethod || ''
|
||||
from.value = options.from || ''
|
||||
payPrice.value = options.payPrice || 0
|
||||
orderType.value = options.orderType || ''
|
||||
})
|
||||
|
||||
navigateTo(url, type) {
|
||||
if (type === "switch") {
|
||||
uni.switchTab({
|
||||
url,
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
function paymentTypeFilter(val: string) {
|
||||
switch (val) {
|
||||
case 'WECHAT':
|
||||
return '微信'
|
||||
case 'ALIPAY':
|
||||
return '支付宝'
|
||||
case 'WALLET':
|
||||
return '余额支付'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function checkOrder() {
|
||||
if (orderType.value == 'RECHARGE') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/mine/deposit/operation',
|
||||
})
|
||||
} else {
|
||||
navigateTo('/pages/order/myOrder?status=0')
|
||||
}
|
||||
}
|
||||
|
||||
function navigateTo(url: string, type?: string) {
|
||||
if (type === 'switch') {
|
||||
uni.switchTab({ url })
|
||||
} else {
|
||||
uni.redirectTo({ url })
|
||||
}
|
||||
}
|
||||
</script><style scoped lang="scss">
|
||||
.subscribe {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user