240 lines
6.8 KiB
Vue
240 lines
6.8 KiB
Vue
<script setup lang="ts">
|
||
import { RotateCcw, X } from 'lucide-vue-next';
|
||
import type { FormInst } from 'naive-ui';
|
||
import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue';
|
||
|
||
const props = defineProps({
|
||
isMember: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
})
|
||
|
||
const emit = defineEmits(['closePayment', 'paymentSuccess'])
|
||
|
||
const message = useMessage()
|
||
|
||
let pollingTimer: ReturnType<typeof setInterval> | undefined
|
||
const formRef = ref<FormInst | null>(null)
|
||
// const isShowPayment = ref(false)
|
||
const userStore = useUserStore()
|
||
|
||
interface UserInfoType {
|
||
nickName: string
|
||
avatar: string
|
||
brief: string
|
||
userId: number | string
|
||
}
|
||
const userInfo = {
|
||
nickName: userStore.userInfo?.nickName ?? '',
|
||
avatar: userStore.userInfo?.avatar ?? '',
|
||
brief: userStore.userInfo?.brief ?? '',
|
||
userId: userStore.userInfo?.userId ?? '',
|
||
} as UserInfoType
|
||
|
||
function onCloseModel() {
|
||
emit('closePayment')
|
||
}
|
||
function onPaymentSuccess() {
|
||
emit('paymentSuccess')
|
||
}
|
||
const qrUrl = ref('')
|
||
|
||
// 初始化获取支付二维码
|
||
const paymentStatus = ref(1)
|
||
const amount = ref(10)
|
||
const paymentParams = ref({
|
||
amount: 10,
|
||
type: 'wallet',
|
||
})
|
||
|
||
async function getQrCode() {
|
||
try {
|
||
paymentParams.value.amount = amount.value
|
||
const res = await request.post(`/ali/pay/doPay`, paymentParams.value)
|
||
if (res.code === 200) {
|
||
paymentStatus.value = 1
|
||
qrUrl.value = res.data.url
|
||
pollingTimer && clearTimeout(pollingTimer)
|
||
pollingTimer = setInterval(async () => {
|
||
try {
|
||
const res2 = await request.get(`/order/queryTradeStatus?outTradeNo=${res.data.orderNo}`)
|
||
if (res2.data === 2) { // 1代支付 2支付成功 4超时
|
||
paymentStatus.value = 2
|
||
clearTimeout(pollingTimer)
|
||
onPaymentSuccess()
|
||
emit('closePayment')
|
||
message.success('支付成功!')
|
||
}
|
||
else if (res2.data === 4) {
|
||
paymentStatus.value = 4
|
||
clearTimeout(pollingTimer)
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log('object', err)
|
||
}
|
||
}, 2000)
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
|
||
// 二维码是否过去
|
||
const isVisible = ref(true)
|
||
|
||
// 获取积分余额和历史记录
|
||
// const points = ref(0)
|
||
// async function getPoints() {
|
||
// try {
|
||
// const res = await request.get('/member/getPoints')
|
||
// if (res.code === 200) {
|
||
// points.value = res.data.points
|
||
// }
|
||
// }
|
||
// catch (err) {
|
||
// console.log(err)
|
||
// }
|
||
// }
|
||
// getPoints()
|
||
|
||
// 是否是会员
|
||
// const isMember = ref(false)
|
||
// async function getIsMember() {
|
||
// try {
|
||
// const res = await request.get('/member/isMember')
|
||
// if (res.code === 200) {
|
||
// isMember.value = res.data
|
||
// }
|
||
// }
|
||
// catch (err) {
|
||
// console.log(err)
|
||
// }
|
||
// }
|
||
// getIsMember()
|
||
|
||
onBeforeMount (() => {
|
||
getQrCode()
|
||
})
|
||
defineExpose({
|
||
isVisible,
|
||
})
|
||
onBeforeUnmount(() => {
|
||
clearInterval(pollingTimer)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<n-modal
|
||
v-model:show="isVisible"
|
||
:preset="null"
|
||
:mask-closable="false"
|
||
transform-origin="center"
|
||
class="custom-modal"
|
||
>
|
||
<div class="bg-white rounded-xl w-200">
|
||
<div
|
||
class="p-4 flex justify-between rounded-t-xl bg-gradient-to-r from-[#fcf2da] to-[#f9db9f]"
|
||
>
|
||
<div class="flex items-center">
|
||
<div>
|
||
<img :src="userInfo.avatar" class="w-14 h-14 rounded-full mr-4">
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div class="text-[#814600] text-xl">
|
||
{{ userInfo.nickName }}
|
||
</div>
|
||
<div class="text-[#6a6a6a] text-xs mt-1">
|
||
{{ props.isMember.result === '1' ? `会员到期时间: ${props.isMember.endDate}` : '您还不是魔创未来的会员' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div @click="onCloseModel">
|
||
<component :is="X" class="h-[18px] w-[18px] text-[#61666d] cursor-pointer" />
|
||
</div>
|
||
</div>
|
||
<!-- <div class="p-4">
|
||
余额：{{ points }}积分
|
||
</div> -->
|
||
<div class="mb-4 mt-6 flex">
|
||
<n-form
|
||
ref="formRef"
|
||
:label-width="80"
|
||
:model="paymentParams"
|
||
size="large"
|
||
label-placement="left"
|
||
style="width: 240px"
|
||
>
|
||
<n-form-item label="输入积分" path="modelProduct.modelName">
|
||
<n-input v-model:value="amount" type="number" placeholder="输入积分" />
|
||
</n-form-item>
|
||
</n-form>
|
||
<!-- <div>
|
||
确定
|
||
</div> -->
|
||
<n-button type="primary" class="mt-1 ml-2" @click="getQrCode">
|
||
确定
|
||
</n-button>
|
||
</div>
|
||
<!-- <div v-for="(item, index) in activityList" :key="index">
|
||
{{ item.activityName }}
|
||
</div> -->
|
||
<div class="mt-1 text-[#9d8c75] text-[12px] w-[500px] px-3">
|
||
1000个算力约可生图1000张，或训练5次。按照生图默认参数、或训练基础参数预估（即训练图片张数20张*单张训练次数15*训练轮数10）。
|
||
您充值的算力永久有效
|
||
算力充值不退不换
|
||
</div>
|
||
<div class="flex justify-center items-center my-4">
|
||
<div class="w-30 h-30 flex justify-center items-center relative">
|
||
<n-qr-code :value="qrUrl" :size="90" style="padding: 0;" />
|
||
<div v-if="paymentStatus === 4" class="absolute top-0 left-0 w-full h-full flex cursor-pointer flex-col justify-center items-center bg-opacity-50 bg-black text-white" @click="getQrCode">
|
||
请点击刷新<RotateCcw />
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center ml-2 flex-col pb-[14px]">
|
||
<div class="flex items-baseline">
|
||
<div class="text-[#222] font-medium mr-1">
|
||
支付
|
||
</div>
|
||
<div class="text-[#814600] mr-1">
|
||
<span class="text-[16px] mr-1">¥</span>
|
||
<span class="text-[40px]">{{ paymentParams.amount }}</span>
|
||
</div>
|
||
<!-- <div class="px-2 bg-gradient-to-r from-[#ffa700] to-[#ff006b] text-[#814600] text-white rounded-[4px] ml-1 text-[12px">
|
||
已减¥11
|
||
</div> -->
|
||
</div>
|
||
<div class="flex items-center mb-1">
|
||
<img src="@/assets/img/alipay.png" class="mr-1"> 请扫码完成支付
|
||
</div>
|
||
<div class="text-[12px]">
|
||
<span class="text-[#999]">
|
||
开通即代表同意
|
||
</span>
|
||
<span class="text-[#814600]">
|
||
《魔创未来会员协议》
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.member-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 16.66%;
|
||
height: 40px;
|
||
border: 1px solid #f0f0f0;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
margin-right: -1px;
|
||
margin-bottom: -1px;
|
||
}
|
||
</style>
|