|
|
@@ -0,0 +1,216 @@
|
|
|
+<!-- 支付组件 -->
|
|
|
+<template>
|
|
|
+ <div v-if="payType && payQrCodeTxt" class="code pa-5 resume-box">
|
|
|
+ <div class="resume-header">
|
|
|
+ <div class="resume-title">扫码支付</div>
|
|
|
+ </div>
|
|
|
+ <div class="d-flex align-end mt-3">
|
|
|
+ <div class="code-left">
|
|
|
+ <QrCode :text="payQrCodeTxt" :width="170" />
|
|
|
+ </div>
|
|
|
+ <div class="code-right ml-5">
|
|
|
+ <div class="price">
|
|
|
+ <span class="font-size-13">￥</span>
|
|
|
+ {{ payCalculation(props.info?.payPrice || 0, 'realPay') }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 d-flex align-center">
|
|
|
+ <span class="color-666 font-weight-bold mr-5">支付方式</span>
|
|
|
+ <!-- <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
|
|
|
+ <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
|
|
|
+ {{ k.label }}
|
|
|
+ <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
|
|
|
+ </v-chip>
|
|
|
+ </v-chip-group> -->
|
|
|
+ <v-chip-group v-model="payType" selected-class="text-primary" column mandatory @update:modelValue="payTypeChange">
|
|
|
+ <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
|
|
|
+ {{ k.name }}
|
|
|
+ <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
|
|
|
+ </v-chip>
|
|
|
+ </v-chip-group>
|
|
|
+ </div>
|
|
|
+ <div class="font-size-14 color-666 mt-3 cursor-pointer">
|
|
|
+ 服务协议
|
|
|
+ <span class="septal-line"></span>
|
|
|
+ 充值协议
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-5 ml-2" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({name: 'personalRecharge-initPay'})
|
|
|
+import QrCode from '@/components/QrCode'
|
|
|
+import { payCalculation } from '@/utils/position'
|
|
|
+import { definePayTypeList, qrCodePay, walletPay } from '@/utils/payType'
|
|
|
+import { getEnableCodeList, payOrderSubmit, getOrderPayStatus } from '@/api/common'
|
|
|
+import { setWalletRecharge } from '@/api/recruit/personal/myWallet.js'
|
|
|
+import { onUnmounted, ref, nextTick } from 'vue'
|
|
|
+const emit = defineEmits(['payTypeChange', 'paySuccess'])
|
|
|
+const props = defineProps({
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ appId: {
|
|
|
+ type: Number,
|
|
|
+ default: 11 // 10为一般情况下支付，11为充值支付
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+// 1.支付方式
|
|
|
+// 2.发起充值(创建钱包充值记录)
|
|
|
+// 2.发起充值(创建钱包充值记录)
|
|
|
+// 3. 如果是二维码类型支付（isQrCodePay=true）生成二维码（需要绑定支付订单的订单号）
|
|
|
+// 4.轮询用户是否支付成功
|
|
|
+
|
|
|
+// 更新账户余额信息
|
|
|
+import { useUserStore } from '@/store/user'; const store = useUserStore()
|
|
|
+const updateAccountInfo = async () => {
|
|
|
+ await store.getUserAccountBalance()
|
|
|
+ loading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { useRoute } from 'vue-router'; const route = useRoute()
|
|
|
+import { useRouter } from 'vue-router'; const router = useRouter()
|
|
|
+const payStatus = async () => {
|
|
|
+ // if (timer.value) clearInterval(timer.value); timer.value = null
|
|
|
+ // setTimeout(() => { // 测试代码
|
|
|
+ // }, 2000)
|
|
|
+ try {
|
|
|
+ const data = await getOrderPayStatus({ id: (props.appId - 0) === 11 ? payOrder.value.payOrderId : payOrder.value.id })
|
|
|
+ if ((data?.status - 0) === 10) {
|
|
|
+ // 支付成功
|
|
|
+ if (timer.value) clearInterval(timer.value); timer.value = null
|
|
|
+ setTimeout(() => {
|
|
|
+ // 更新点数(充值、发布职位)
|
|
|
+ updateAccountInfo()
|
|
|
+ // 支付成功
|
|
|
+ emit('paySuccess')
|
|
|
+ // 返回指定页面
|
|
|
+ if (route.fullPath === props.returnUrl) router.go(0)
|
|
|
+ else if (props.returnUrl) router.push(props.returnUrl)
|
|
|
+ Snackbar.success('支付成功')
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const timer = ref(null)
|
|
|
+const payQrCodeTxt = ref('')
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer.value) clearInterval(timer.value); timer.value = null
|
|
|
+})
|
|
|
+// 如果是点数支付的话走完payOrderSubmit之后即扣点数，如果是二维码支付的话只是生成二维码，这一步以后是轮询是否支付成功
|
|
|
+const paySubmit = async () => {
|
|
|
+ if (!payType.value) return
|
|
|
+ if (!payOrder.value?.payOrderId) return
|
|
|
+ try {
|
|
|
+ if (payOrder.value) {
|
|
|
+ // 提交支付订单
|
|
|
+ const params = {
|
|
|
+ id: payOrder.value.payOrderId, // 支付单编号
|
|
|
+ channelCode: payType.value, // 支付渠道
|
|
|
+ }
|
|
|
+ const res = await payOrderSubmit(params)
|
|
|
+ payQrCodeTxt.value = res?.displayContent || '二维码生成失败，请刷新再试。' // 生成二维码内容
|
|
|
+
|
|
|
+ if (timer.value) clearInterval(timer.value); timer.value = null
|
|
|
+ timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 2.发起充值
|
|
|
+const loading = ref(false); setTimeout(() => { loading.value = true }, 500);
|
|
|
+const payOrder = ref({})
|
|
|
+const getUnpaidOrderList = async () => {
|
|
|
+ try {
|
|
|
+ //* 充值
|
|
|
+ if (props.info.payPrice === undefined && props.info.packageId === undefined) return
|
|
|
+ const params = {
|
|
|
+ payPrice: (props.info.payPrice-0),
|
|
|
+ packageId: props.info.id,
|
|
|
+ }
|
|
|
+ const data = await setWalletRecharge(params)
|
|
|
+ payOrder.value = data || {}
|
|
|
+ if (isQrCodePay.value) paySubmit()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ } finally {
|
|
|
+ nextTick(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 1.支付方式
|
|
|
+const isWalletPay = ref(false)
|
|
|
+const isQrCodePay = ref(false)
|
|
|
+const tip = ref('')
|
|
|
+const payTypeChange = (value) => {
|
|
|
+ payType.value = value
|
|
|
+ tip.value = payTypeList.value.find(e => e.code === payType.value)?.tip || ''
|
|
|
+ isQrCodePay.value = qrCodePay.includes(payType.value)
|
|
|
+ isWalletPay.value = walletPay.includes(payType.value)
|
|
|
+ paySubmit()
|
|
|
+}
|
|
|
+// 1.支付方式
|
|
|
+const payType = ref('')
|
|
|
+const payTypeList = ref([])
|
|
|
+const codeList = ref([])
|
|
|
+const getCodeList = async () => {
|
|
|
+ try {
|
|
|
+ const list = await getEnableCodeList({appId: props.appId})
|
|
|
+ codeList.value = list || []
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ } finally {
|
|
|
+ if (definePayTypeList?.length && codeList.value?.length) {
|
|
|
+ codeList.value.forEach(code => {
|
|
|
+ const item = definePayTypeList.find(p => p.code === code)
|
|
|
+ if (item) {
|
|
|
+ if (!payType.value) {
|
|
|
+ tip.value = item.tip || ''
|
|
|
+ // payTypeChange(code) // 默认值赋值
|
|
|
+ // 默认值赋值(暂时只支持扫码)
|
|
|
+ const bool = qrCodePay.includes(code)
|
|
|
+ if (bool) payTypeChange(code)
|
|
|
+ }
|
|
|
+ payTypeList.value.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getUnpaidOrderList()
|
|
|
+ }
|
|
|
+}
|
|
|
+getCodeList()
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.code {
|
|
|
+ // max-width: 1100px;
|
|
|
+ // max-width: 600px;
|
|
|
+ border-radius: 6px;
|
|
|
+ // margin: 0 auto;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ &-left {
|
|
|
+ border: 1px solid #00897B;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ .price {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--v-error-base);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
