Update API request formatting and routing structure
This commit is contained in:
wangqiao
237
pages/personal-Center/index/components/pay.vue
Normal file
237
pages/personal-Center/index/components/pay.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" width="800px" class="vip-dialog" align-center>
|
||||
<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
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user