|
@@ -43,7 +43,14 @@
|
|
<!-- 二维码支付 -->
|
|
<!-- 二维码支付 -->
|
|
<div v-if="isQrCodePay" style="text-align: center;">
|
|
<div v-if="isQrCodePay" style="text-align: center;">
|
|
<QrCode :text="payQrCodeTxt" :width="170" style="margin: 0 auto;" />
|
|
<QrCode :text="payQrCodeTxt" :width="170" style="margin: 0 auto;" />
|
|
- <div class="mb-5" v-if="payQrCodeTxt" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-if="payQrCodeTxt"
|
|
|
|
+ class="mb-5"
|
|
|
|
+ style="color: var(--v-error-base);"
|
|
|
|
+ >
|
|
|
|
+ 扫码支付时请勿离开
|
|
|
|
+ <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<!-- 钱包支付确认按钮 -->
|
|
<!-- 钱包支付确认按钮 -->
|
|
<div v-if="isWalletPay && !notEnoughMoney" class="mt-2" style="text-align: center;">
|
|
<div v-if="isWalletPay && !notEnoughMoney" class="mt-2" style="text-align: center;">
|
|
@@ -76,7 +83,7 @@ import { rechargeOrderCreate } from '@/api/recruit/enterprise/member/points'
|
|
// import { payCalculation } from '@/utils/position'
|
|
// import { payCalculation } from '@/utils/position'
|
|
import Recharge from '@/views/recruit/enterprise/memberCenter/myMembers/components/pointsAndBalance.vue'
|
|
import Recharge from '@/views/recruit/enterprise/memberCenter/myMembers/components/pointsAndBalance.vue'
|
|
|
|
|
|
-const emit = defineEmits(['payTypeChange', 'paySuccess'])
|
|
|
|
|
|
+const emit = defineEmits(['payTypeChange', 'paySuccess', 'stopInterval'])
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
params: {
|
|
params: {
|
|
type: Object,
|
|
type: Object,
|
|
@@ -159,6 +166,8 @@ const paySubmit = async () => {
|
|
}
|
|
}
|
|
const res = await payOrderSubmit(params)
|
|
const res = await payOrderSubmit(params)
|
|
payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
|
|
payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
|
|
|
|
+
|
|
|
|
+ initIntervalFun()
|
|
|
|
|
|
if (timer.value) clearInterval(timer.value); timer.value = null
|
|
if (timer.value) clearInterval(timer.value); timer.value = null
|
|
timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
|
|
timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
|
|
@@ -321,6 +330,47 @@ const updateAccountInfo = async (init = false) => {
|
|
}
|
|
}
|
|
if ((props.appId - 0) !== 11) updateAccountInfo(true) // 点数发生支付时点充值-充值不查余额
|
|
if ((props.appId - 0) !== 11) updateAccountInfo(true) // 点数发生支付时点充值-充值不查余额
|
|
|
|
|
|
|
|
+
|
|
|
|
+// 倒计时
|
|
|
|
+
|
|
|
|
+const countdownTime = 60000*5 // 倒计时五分钟
|
|
|
|
+let remainder = 0 // number
|
|
|
|
+const remainderZhShow = ref('') // 倒计时展示
|
|
|
|
+
|
|
|
|
+const remainderTimer = ref(null)
|
|
|
|
+// 初始化倒计时
|
|
|
|
+const initIntervalFun = () => {
|
|
|
|
+ remainder = countdownTime // 初始倒计时时间
|
|
|
|
+ if (remainderTimer.value) clearInterval(remainderTimer.value); remainderTimer.value = null // 每一次点击都清除上一个轮询
|
|
|
|
+ // 倒计时计算
|
|
|
|
+ remainderCalc()
|
|
|
|
+ remainderTimer.value = setInterval(() => { remainderCalc() }, 1000)
|
|
|
|
+
|
|
|
|
+ if (timer.value) clearInterval(timer.value); timer.value = null
|
|
|
|
+ timer.value = setInterval(() => { payStatus() }, 2000) // 轮巡查询用户是否支付
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const remainderCalc = () => {
|
|
|
|
+ remainder -= 1000
|
|
|
|
+ remainderZhShow.value = formatDuration(remainder)
|
|
|
|
+ if (remainder <= 0) {
|
|
|
|
+ emit('stopInterval') // 倒计时结束,关闭倒计时弹窗
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const formatDuration = (remainder) => {
|
|
|
|
+ // 将毫秒转换为秒
|
|
|
|
+ var seconds = Math.floor(remainder / 1000)
|
|
|
|
+ // 计算分钟和剩余的秒数
|
|
|
|
+ var minutes = Math.floor(seconds / 60)
|
|
|
|
+ var remainingSeconds = seconds % 60
|
|
|
|
+ // 格式化分钟和秒数,确保秒数为两位数(如果小于10,则前面补0)
|
|
|
|
+ minutes = minutes.toString().padStart(2, '0')
|
|
|
|
+ remainingSeconds = remainingSeconds.toString().padStart(2, '0')
|
|
|
|
+ // 返回格式化的字符串
|
|
|
|
+ return `${minutes}分${remainingSeconds}秒`
|
|
|
|
+}
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.font-size-30 { font-size: 30px; }
|
|
.font-size-30 { font-size: 30px; }
|