249 lines
6.5 KiB
Vue
249 lines
6.5 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" width="800px" class="vip-dialog" align-center @close="handleClose">
|
|
<template #header>
|
|
<div class="vip-modal-title">钱包充值</div>
|
|
</template>
|
|
<div v-loading="loading" class="vip-cards">
|
|
<div v-for="item in viplist" :key="item.id" class="vip-card">
|
|
<div class="relative w-[100%] flex flex-col items-center">
|
|
<div class="vip-card-header basic">
|
|
<div class="vip-card-title">{{ item.name }}</div>
|
|
<!-- <div class="vip-card-subtitle">中小微企业</div> -->
|
|
</div>
|
|
<div class="vip-card-price">
|
|
<span class="price">￥{{ accDiv(item.payPrice || 0, 100) }}</span>
|
|
<!-- <span class="per">/1年</span> -->
|
|
</div>
|
|
<ul class="vip-card-features">
|
|
<li
|
|
>赠送<span class="color-red">￥{{ accDiv(item.bonusPrice || 0, 100) }}</span></li
|
|
>
|
|
<!-- <li>1. {{ item.profile }}</li>
|
|
<li
|
|
>2. 佣金比例<span class="color-red">{{ item.brokerageRate }}</span
|
|
>%</li
|
|
> -->
|
|
</ul>
|
|
<div v-if="item.qrCodeUrl" class="vip-card-qrcode">
|
|
<el-icon class="absolute! right-[-10px] top-[0px] cursor-pointer" @click="item.qrCodeUrl = ''"><Close /></el-icon>
|
|
<qrcode-vue :value="item.qrCodeUrl" :size="140" level="H" class="relative! left-[12px]" />
|
|
<div>请使用微信扫二维码</div>
|
|
</div>
|
|
</div>
|
|
<el-button class="vip-card-btn" :loading="item.btnloading" @click="pay(item)">立即充值</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import { listWalletRechargePackage, submitPayOrder, getPayStatus } from '~/api/pay/index'
|
|
import { accDiv } from '~/utils/utils'
|
|
import { Close } from '@element-plus/icons-vue'
|
|
import type { AppPayWalletPackageRespVO } from '~/api/pay/types'
|
|
// @ts-ignore
|
|
import QrcodeVue from 'qrcode.vue'
|
|
import useUserStore from '~/stores/user'
|
|
const userStore = useUserStore()
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'refresh'])
|
|
|
|
const visible = ref(props.modelValue)
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => (visible.value = val)
|
|
)
|
|
watch(visible, (val) => emit('update:modelValue', val))
|
|
|
|
const viplist = ref<AppPayWalletPackageRespVO[]>([])
|
|
const loading = ref(false)
|
|
const init = async () => {
|
|
try {
|
|
loading.value = true
|
|
const res = await listWalletRechargePackage()
|
|
viplist.value = res.data
|
|
} finally {
|
|
loading.value = false
|
|
console.log(viplist.value)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
|
|
const orderId = ref(0)
|
|
const pay = async (row: AppPayWalletPackageRespVO) => {
|
|
if (row.qrCodeUrl) return ElMessage.error('支付二维码已生成，请勿重复生成')
|
|
viplist.value.forEach((item) => {
|
|
if (item.id !== row.id) {
|
|
item.qrCodeUrl = ''
|
|
}
|
|
})
|
|
try {
|
|
row.btnloading = true
|
|
const res = await submitPayOrder({
|
|
id: row.id,
|
|
memberId: userStore.userId, // 用户id
|
|
channelCode: 'wx_native',
|
|
})
|
|
if (res.code === 0) {
|
|
row.qrCodeUrl = res.data.displayContent
|
|
orderId.value = res.data.orderId
|
|
// 打开轮询任务
|
|
createQueryInterval(row)
|
|
}
|
|
} finally {
|
|
row.btnloading = false
|
|
}
|
|
}
|
|
|
|
/** 轮询查询任务 */
|
|
const interval = ref()
|
|
const createQueryInterval = (row: AppPayWalletPackageRespVO) => {
|
|
if (interval.value) {
|
|
return
|
|
}
|
|
interval.value = setInterval(async () => {
|
|
const data = await getPayStatus({ id: orderId.value })
|
|
// 已支付
|
|
if (data.data.status === 10) {
|
|
clearQueryInterval(row)
|
|
ElMessage.success('支付成功！')
|
|
emit('refresh')
|
|
}
|
|
// 已取消
|
|
if (data.data.status === 20) {
|
|
clearQueryInterval(row)
|
|
ElMessage.error('支付已关闭！')
|
|
}
|
|
}, 1000 * 2)
|
|
}
|
|
|
|
/** 清空查询任务 */
|
|
const clearQueryInterval = (row: AppPayWalletPackageRespVO) => {
|
|
// 清空各种弹窗
|
|
row.qrCodeUrl = ''
|
|
// 清空任务
|
|
clearInterval(interval.value)
|
|
interval.value = undefined
|
|
}
|
|
|
|
/** 关闭弹窗 */
|
|
const handleClose = () => {
|
|
visible.value = false
|
|
// 清空任务
|
|
clearInterval(interval.value)
|
|
interval.value = undefined
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vip-modal-title {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 24px;
|
|
}
|
|
.vip-cards {
|
|
display: flex;
|
|
gap: 32px;
|
|
/* justify-content: center; */
|
|
margin: 24px 0;
|
|
overflow-x: auto;
|
|
padding: 10px;
|
|
}
|
|
.vip-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
padding: 24px 32px;
|
|
width: 260px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 70px;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
.vip-card-header {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-bottom: 12px;
|
|
border-radius: 8px 8px 0 0;
|
|
margin-bottom: 12px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.vip-card-header.basic {
|
|
background: linear-gradient(90deg, #f7b7a3, #e97c6a);
|
|
}
|
|
.vip-card-header.pro {
|
|
background: linear-gradient(90deg, #f7b7a3, #e97c6a);
|
|
}
|
|
.vip-card-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
.vip-card-subtitle {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
.vip-card-price {
|
|
margin: 12px 0;
|
|
font-size: 28px;
|
|
color: #e74c3c;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.vip-card-price .origin {
|
|
font-size: 16px;
|
|
color: #bbb;
|
|
text-decoration: line-through;
|
|
margin-left: 4px;
|
|
}
|
|
.vip-card-price .per {
|
|
font-size: 16px;
|
|
color: #888;
|
|
margin-left: 4px;
|
|
}
|
|
.vip-card-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 16px 0;
|
|
color: #444;
|
|
font-size: 15px;
|
|
}
|
|
.vip-card-features li {
|
|
margin-bottom: 6px;
|
|
}
|
|
.vip-card-features .highlight {
|
|
color: #e74c3c;
|
|
font-weight: bold;
|
|
}
|
|
.vip-card-btn {
|
|
width: 80%;
|
|
margin-top: 8px;
|
|
border-radius: 24px;
|
|
position: absolute;
|
|
bottom: 20px;
|
|
}
|
|
:deep(.vip-card-qrcode) {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
z-index: 1;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|