This commit is contained in:
287
src/pages/goods/pay/index.vue
Normal file
287
src/pages/goods/pay/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<view class="mt-6 text-[#8C8C8C] text-[25px]"
|
||||
>交易剩余时间：{{ tStr }}</view
|
||||
>
|
||||
<view class="flex items-center mt-5 mb-5">
|
||||
<nut-price :price="orderData.price" size="large" />
|
||||
<view class="line"></view>
|
||||
<nut-price
|
||||
:decimal-digits="0"
|
||||
position="after"
|
||||
symbol="积分"
|
||||
:price="orderData.exchange"
|
||||
size="large" />
|
||||
</view>
|
||||
<nut-radio-group class="w-[95%]" v-model="payVal">
|
||||
<nut-cell-group class="w-full">
|
||||
<nut-cell class="text-[#333333]" title="支付方式"></nut-cell>
|
||||
<nut-cell
|
||||
class="flex items-center"
|
||||
title="微信支付"
|
||||
@click="cellClick(1, false)">
|
||||
<template #icon>
|
||||
<IconFont size="30" :name="require('../../../static/wx.png')" />
|
||||
</template>
|
||||
<template #link>
|
||||
<nut-radio :label="1"></nut-radio>
|
||||
</template>
|
||||
</nut-cell>
|
||||
<nut-cell
|
||||
class="flex items-center"
|
||||
title="平台积分支付"
|
||||
:desc="`剩余积分:${orderData.User?.integral || 0}`"
|
||||
@click="cellClick(2, orderData.User?.integral === 0 ? true : false)">
|
||||
<template #icon>
|
||||
<IconFont size="30" :name="require('../../../static/pt.png')" />
|
||||
</template>
|
||||
<template #link>
|
||||
<nut-radio
|
||||
:disabled="orderData.User?.integral === 0"
|
||||
:label="2"></nut-radio>
|
||||
</template>
|
||||
</nut-cell>
|
||||
<nut-cell
|
||||
class="flex items-center"
|
||||
title="天才小猪积分支付"
|
||||
:desc="`剩余积分:${orderData.integral || 0}`"
|
||||
@click="cellClick(3, orderData.integral === 0 ? true : false)">
|
||||
<template #icon>
|
||||
<IconFont size="30" :name="require('../../../static/jh.png')" />
|
||||
</template>
|
||||
<template #link>
|
||||
<nut-radio
|
||||
:disabled="orderData.integral === 0"
|
||||
:label="3"></nut-radio>
|
||||
</template>
|
||||
</nut-cell>
|
||||
</nut-cell-group>
|
||||
</nut-radio-group>
|
||||
<view class="w-[90%] mt-[100px]">
|
||||
<nut-button
|
||||
shape="square"
|
||||
:loading="isLoading"
|
||||
type="primary"
|
||||
block
|
||||
@click="pay"
|
||||
>确认支付</nut-button
|
||||
>
|
||||
</view>
|
||||
|
||||
<nut-short-password
|
||||
title="请输入交易密码"
|
||||
tips=" "
|
||||
desc=" "
|
||||
:error-msg="error_msg"
|
||||
v-model="shortVal"
|
||||
v-model:visible="visible"
|
||||
:length="6"
|
||||
:close-on-click-overlay="false"
|
||||
@focus="showKeyboard = true"
|
||||
@complete="shortComplete"
|
||||
@close="shortClose">
|
||||
</nut-short-password>
|
||||
<nut-number-keyboard
|
||||
v-model="shortVal"
|
||||
v-model:visible="showKeyboard"
|
||||
@blur="showKeyboard = false">
|
||||
</nut-number-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Taro from '@tarojs/taro';
|
||||
import {IconFont} from '@nutui/icons-vue-taro';
|
||||
import {onUnmounted, ref} from 'vue';
|
||||
import {getActiveOrderDetail, checkTradePwd} from '@/api/goods';
|
||||
import {getUserPoint} from '@/api/admin';
|
||||
import {payOrder} from '@/api/order';
|
||||
import * as dayjs from 'dayjs';
|
||||
|
||||
const payVal = ref();
|
||||
|
||||
const t_id = ref();
|
||||
|
||||
const tStr = ref('00:00');
|
||||
|
||||
const error_msg = ref('');
|
||||
|
||||
const shortVal = ref('');
|
||||
|
||||
const orderData = ref<any>({});
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const showKeyboard = ref(false);
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const opt = ref<any>({});
|
||||
|
||||
Taro.useLoad(e => {
|
||||
const {oid, bid} = e;
|
||||
opt.value = e;
|
||||
getData(oid, bid);
|
||||
});
|
||||
|
||||
const getData = async (oid: string, bid: string) => {
|
||||
const user_info = Taro.getStorageSync('userInfo');
|
||||
const data = await getUserPoint({
|
||||
phone: user_info.data.phone,
|
||||
bid,
|
||||
});
|
||||
const res = await getActiveOrderDetail({
|
||||
oid,
|
||||
});
|
||||
|
||||
orderData.value = {
|
||||
...res.data.data,
|
||||
...data.data,
|
||||
};
|
||||
if (!orderData.value.oid)
|
||||
return Taro.showToast({
|
||||
title: '未获取到订单信息~',
|
||||
icon: 'none',
|
||||
});
|
||||
countdownTime();
|
||||
};
|
||||
|
||||
const pay = async () => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
if (!payVal.value)
|
||||
return Taro.showToast({title: '请选择支付方式', icon: 'none'});
|
||||
if (payVal.value !== 1) {
|
||||
visible.value = true;
|
||||
showKeyboard.value = true;
|
||||
} else {
|
||||
confirmPay();
|
||||
}
|
||||
} catch (error) {
|
||||
isLoading.value = false;
|
||||
Taro.showToast({
|
||||
title: error.msg,
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const shortComplete = async value => {
|
||||
try {
|
||||
await checkTradePwd({
|
||||
pay_password: value,
|
||||
});
|
||||
shortClose(false);
|
||||
confirmPay();
|
||||
} catch (error) {
|
||||
error_msg.value = error.msg;
|
||||
shortVal.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const confirmPay = async () => {
|
||||
try {
|
||||
const res = await payOrder({
|
||||
oid: opt.value.oid,
|
||||
OrderType: orderData.value.pay_type,
|
||||
PayType: payVal.value,
|
||||
});
|
||||
switch (payVal.value) {
|
||||
case 1:
|
||||
if (typeof res.data.data === 'object') {
|
||||
Taro.requestPayment({
|
||||
timeStamp: res.data.data.timeStamp,
|
||||
nonceStr: res.data.data.nonceStr,
|
||||
package: res.data.data.package,
|
||||
signType: res.data.data.signType,
|
||||
paySign: res.data.data.paySign,
|
||||
success: function () {
|
||||
Taro.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success',
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
Taro.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
complete: function () {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/users/order_list_detail/index?orderId=${opt.value.oid}`,
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '参数获取失败，请重试~',
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
});
|
||||
setTimeout(() => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/users/order_list_detail/index?orderId=${opt.value.oid}`,
|
||||
});
|
||||
}, 2000);
|
||||
break;
|
||||
}
|
||||
isLoading.value = false;
|
||||
} catch (err) {
|
||||
isLoading.value = false;
|
||||
Taro.showToast({
|
||||
title: err.msg,
|
||||
icon: 'none',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const shortClose = (isMsg: boolean = true) => {
|
||||
showKeyboard.value = false;
|
||||
visible.value = false;
|
||||
isLoading.value = false;
|
||||
shortVal.value = '';
|
||||
error_msg.value = '';
|
||||
if (isMsg) Taro.showToast({title: '支付取消', icon: 'none'});
|
||||
};
|
||||
|
||||
const cellClick = (val: number, isTrue: boolean) => {
|
||||
if (isTrue) {
|
||||
Taro.showToast({
|
||||
title: '该支付暂不可用！',
|
||||
icon: 'none',
|
||||
});
|
||||
payVal.value = undefined;
|
||||
} else {
|
||||
payVal.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
const countdownTime = () => {
|
||||
if (!orderData.value.expires) return;
|
||||
t_id.value = setInterval(() => {
|
||||
const nowTime = dayjs().valueOf();
|
||||
const endTime = orderData.value.expires * 1000;
|
||||
const time = endTime - nowTime;
|
||||
tStr.value = dayjs(time).format('mm:ss');
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
Taro.useDidHide(() => {
|
||||
clearInterval(t_id.value);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(t_id.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user