Skip to content

P
poc-fe
Commit 8132e6fb authored by tyyin lan's avatar tyyin lan
Browse files
Options

feat: 积分充值

parent 0fb7c270
Show whitespace changes
Inline Side-by-side
Showing with 356 additions and 161 deletions
src/apis/equity.ts
View file @ 8132e6fb
......@@ -15,3 +15,7 @@ export function fetchGetEquityPayQrCode<T>(payload: object) {
export function fetchGetPayStatus<T>(payOrderSn: string) {
return request.post<T>(`/payRest/orderStatus.json?payOrderSn=${payOrderSn}`)
}
export function fetchGetPointsGiftPackageList<T>() {
return request.post<T>('/equityRest/getPointPackageList.json')
}
src/locales/langs/en.yaml
View file @ 8132e6fb
......@@ -113,7 +113,7 @@ common_module:
year: ' Year'
month: ' Month'
alipay: 'Alipay'
weChat: 'WeChat'
wechat: 'WeChat'
analysis: 'Analysis'
last_week: 'Last week'
last_month: 'Last month'
......@@ -124,6 +124,8 @@ common_module:
as_needed: 'As needed'
support: 'Support'
unlimited_duration: 'Unlimited duration'
buy_now: 'Buy now'
payment_success: 'Payment success'
dialogue_module:
continue_question_message: 'You can keep asking questions'
......@@ -552,6 +554,9 @@ equity_module:
custom_digital_person: 'Custom digital person'
ai_training_tuning_service: 'AI training tuning service'
private_deployment: 'Private deployment'
point_recharge: 'Point recharge'
get_points_for_interacting_with_the_ai: 'Get {points} points for interacting with the AI'
no_time_limit_when_used_up: 'No time limit, when used up'
order_manage_module:
package_name: 'PackageName'
......
src/locales/langs/zh-cn.yaml
View file @ 8132e6fb
......@@ -112,7 +112,7 @@ common_module:
year: '年'
month: '个月'
alipay: '支付宝'
weChat: '微信'
wechat: '微信'
analysis: '分析'
last_week: '最近一周'
last_month: '最近一月'
......@@ -123,6 +123,8 @@ common_module:
as_needed: '按需'
support: '支持'
unlimited_duration: '无期限'
buy_now: '立即购买'
payment_success: '支付成功'
dialogue_module:
continue_question_message: '你可以继续提问'
......@@ -550,6 +552,9 @@ equity_module:
custom_digital_person: '定制数字人'
ai_training_tuning_service: 'AI训练调优服务'
private_deployment: '私有化部署'
point_recharge: '积分充值'
get_points_for_interacting_with_the_ai: '获得{points}积分，用于和AI互动行动'
no_time_limit_when_used_up: '无期限，用完即止'
order_manage_module:
package_name: '套餐名称'
......
src/locales/langs/zh-hk.yaml
View file @ 8132e6fb
......@@ -112,7 +112,7 @@ common_module:
year: '年'
month: '個月'
alipay: '支付寶'
weChat: '微信'
wechat: '微信'
analysis: '分析'
last_week: '最近一週'
last_month: '最近一月'
......@@ -123,6 +123,8 @@ common_module:
as_needed: '按需'
support: '支持'
unlimited_duration: '無期限'
buy_now: '立即購買'
payment_success: '支付成功'
dialogue_module:
continue_question_message: '你可以繼續提問'
......@@ -550,6 +552,9 @@ equity_module:
custom_digital_person: '定製數字人'
ai_training_tuning_service: 'AI訓練調優服務'
private_deployment: '私有化部署'
point_recharge: '积分充值'
get_points_for_interacting_with_the_ai: '獲得{points}積分，用於和AI互動行動'
no_time_limit_when_used_up: '無期限，用完即止'
order_manage_module:
package_name: '套餐名稱'
......
src/views/equity/components/gift-pack-list.vue
View file @ 8132e6fb
......@@ -30,7 +30,7 @@ function handleVersionSwitch(version: VersionName) {
<div
class="mt-[31px] grid grid-flow-row-dense gap-[29px]"
style="grid-template-columns: repeat(auto-fill, minmax(255px, 269px))"
style="grid-template-columns: repeat(auto-fill, minmax(255px, 1fr))"
>
<section class="relative h-[452px] rounded-[10px] border border-[#CFD3D4] bg-[#FBFCFF]">
<div
......@@ -108,10 +108,10 @@ function handleVersionSwitch(version: VersionName) {
</div>
<div class="font-600 mt-[18px] text-center text-[24px] text-[#482801]">
<span class="font-600 text-[24px]">19.9</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.month') }}</span>
<span class="text-[14px]">￥/{{ t('equity_module.month') }}</span>
<span class="font-600 ml-[10px] text-[24px]">199</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.year') }}</span>
<span class="text-[14px]">￥/{{ t('equity_module.year') }}</span>
</div>
<button
......@@ -182,10 +182,10 @@ function handleVersionSwitch(version: VersionName) {
</div>
<div class="font-600 mt-[18px] text-center text-[24px] text-[#482801]">
<span class="font-600 text-[24px]">29.9</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.month') }}</span>
<span class="text-[14px]">￥/{{ t('equity_module.month') }}</span>
<span class="font-600 ml-[10px] text-[24px]">299</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.year') }}</span>
<span class="text-[14px]">￥/{{ t('equity_module.year') }}</span>
</div>
<button
......@@ -268,7 +268,6 @@ function handleVersionSwitch(version: VersionName) {
{{ t('equity_module.consult_now') }}
</button>
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li
......
src/views/equity/components/pay-sidebar.vue
View file @ 8132e6fb
......@@ -37,6 +37,7 @@ const payInfo = ref({
payOrderSn: '',
})
const isPayQrcodeInvalid = ref(false)
const payStatusTimer = ref<NodeJS.Timeout | null>(null)
const isShowPayQrCode = computed(() => {
return !!(
......@@ -88,6 +89,7 @@ function clearPayInfo() {
}
function getEquityPayQrCode() {
clearPayStatusTimer()
clearPayInfo()
const payload = {
......@@ -155,24 +157,34 @@ function getEquityPayQrCode() {
}
function getPayStatus() {
function request() {
fetchGetPayStatus<{ payStatus: 'Paid' | 'NoPayment' | 'Cancel' }>(payInfo.value.payOrderSn).then((res) => {
if (res.code !== 0) return ''
if (res.data.payStatus === 'Paid') {
isPaymentSuccess.value = true
clearPayStatusTimer()
setTimeout(() => {
currentSelectVersion.value = null
userStore.fetchUpdateEquityInfo()
window.$message.success('支付成功')
window.$message.success(t('common_module.payment_success'))
}, 1400)
} else {
setTimeout(() => {
!isPayQrcodeInvalid.value && getPayStatus()
}, 1000)
}
})
}
payStatusTimer.value = setInterval(() => {
request()
}, 1000)
}
function clearPayStatusTimer() {
if (payStatusTimer.value) {
clearInterval(payStatusTimer.value)
payStatusTimer.value = null
}
}
function handlePaymentMethodSwitch(method: typeof currentPaymentMethod.value) {
......@@ -214,21 +226,21 @@ function handlePackageSwitch(packageKey: typeof currentSelectPackage.value, pric
</div>
<div class="font-600 mt-[20px] text-[20px] text-[#482801]">
{{ packageItem.currentPrice }}<span class="text-[14px]"> HK$/{{ t('equity_module.month') }}</span>
{{ packageItem.currentPrice }}<span class="text-[14px]"> CNY$/{{ t('equity_module.month') }}</span>
</div>
<div
v-show="currentSelectPackage === index"
class="mt-[6px] text-center text-[14px] text-[#482801] line-through"
>
{{ packageItem.originalPrice }} HK$
{{ packageItem.originalPrice }} CNY$
</div>
<div
v-show="currentSelectPackage !== index"
class="absolute bottom-0 w-full bg-[#ffebd2] py-[6px] text-center text-[12px] text-[#9A5705]"
>
{{ t('equity_module.discounted') }}{{ packageItem.discountedPrice }}HK$
{{ t('equity_module.discounted') }}{{ packageItem.discountedPrice }}CNY$
</div>
<div
......@@ -261,7 +273,7 @@ function handlePackageSwitch(packageKey: typeof currentSelectPackage.value, pric
@click="handlePaymentMethodSwitch('wechatpay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span>{{ t('common_module.weChat') }}</span>
<span>{{ t('common_module.wechat') }}</span>
</li>
</ul>
</div>
......@@ -304,15 +316,15 @@ function handlePackageSwitch(packageKey: typeof currentSelectPackage.value, pric
<span class="font-600 text-[16px]">
{{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment') }}
<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>HK$
>CNY$
</span>
</template>
<template v-else-if="currentPaymentMethod === 'wechatpay'">
<img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span class="font-600 text-[16px]">
{{ t('common_module.weChat') }} {{ t('equity_module.scan_code_payment') }}
{{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment') }}
<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>HK$
>CNY$
</span>
</template>
</div>
......
src/views/equity/components/point-recharge-modal.vue
View file @ 8132e6fb
<script setup lang="ts">
import { ref } from 'vue'
// import { useI18n } from 'vue-i18n'
import {
fetchCreateEquityOrder,
fetchGetEquityPayQrCode,
fetchGetPayStatus,
fetchGetPointsGiftPackageList,
} from '@/apis/equity'
import { useUserStore } from '@/store/modules/user'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false })
// const { t } = useI18n()
const { t } = useI18n()
const userStore = useUserStore()
const currentSelectPackage = ref<0 | 1 | 2>(0) // 1：100积分 2：350积分 3：600积分
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('alipay')
const isPaymentSuccess = ref(false)
const pointsGiftPackageListLoading = ref(false)
const pointsGiftPackageList = ref([
{
id: 0,
amount: 9.9,
points: 100,
},
{
id: 1,
amount: 29.9,
points: 350,
},
{
id: 2,
amount: 49.9,
points: 600,
},
])
const payInfo = ref({
url: '',
payOrderSn: '',
})
const isPayQrcodeInvalid = ref(false)
const payStatusTimer = ref<NodeJS.Timeout | null>(null)
const currentPayPrice = ref(0)
watch(isShowPointRechargeModal, (newVal) => {
if (newVal) {
getPointsGiftPackageList()
getEquityPayQrCode()
}
})
function getPointsGiftPackageList() {
pointsGiftPackageListLoading.value = true
fetchGetPointsGiftPackageList<{
normal: { amount: number; points: number }
professional: { amount: number; points: number }
ultimate: { amount: number; points: number }
}>().then((res) => {
if (res.code !== 0) return ''
if (res.data.normal) {
pointsGiftPackageList.value[0] = { id: 0, amount: res.data.normal.amount, points: res.data.normal.points }
}
if (res.data.professional) {
pointsGiftPackageList.value[1] = {
id: 0,
amount: res.data.professional.amount,
points: res.data.professional.points,
}
}
if (res.data.ultimate) {
pointsGiftPackageList.value[2] = { id: 0, amount: res.data.ultimate.amount, points: res.data.ultimate.points }
}
currentPayPrice.value = pointsGiftPackageList.value[0].amount
pointsGiftPackageListLoading.value = false
})
}
function getEquityPayQrCode() {
clearPayStatusTimer()
clearPayInfo()
const payload = {
type: '',
domain: 'point',
validityUnit: 'indefinite',
}
switch (currentSelectPackage.value) {
case 0:
payload.type = 'normal'
currentPayPrice.value = pointsGiftPackageList.value[0].amount
break
case 1:
payload.type = 'professional'
currentPayPrice.value = pointsGiftPackageList.value[1].amount
break
case 2:
payload.type = 'ultimate'
currentPayPrice.value = pointsGiftPackageList.value[2].amount
break
}
fetchCreateEquityOrder<string>(payload).then((orderRes) => {
if (orderRes.code !== 0) return ''
const payQrCodePayload = {
payChannel: '',
payOrderSn: orderRes.data,
}
switch (currentPaymentMethod.value) {
case 'alipay':
payQrCodePayload.payChannel = 'ALI_NATIVE'
break
case 'wechatpay':
payQrCodePayload.payChannel = 'WX_NATIVE'
break
}
fetchGetEquityPayQrCode<{ packageExtra: string; payOrderSn: string }>(payQrCodePayload).then((qrcodeRes) => {
if (orderRes.code !== 0) return ''
isPayQrcodeInvalid.value = false
payInfo.value = {
url: qrcodeRes.data.packageExtra.replace('code_url=', ''),
payOrderSn: qrcodeRes.data.payOrderSn,
}
/* 延迟自动取消支付查询 */
setTimeout(
() => {
isPayQrcodeInvalid.value = true
},
10 * 60 * 1000,
)
getPayStatus()
})
})
}
function getPayStatus() {
function request() {
fetchGetPayStatus<{ payStatus: 'Paid' | 'NoPayment' | 'Cancel' }>(payInfo.value.payOrderSn).then((res) => {
if (res.code !== 0) return ''
if (res.data.payStatus === 'Paid') {
isPaymentSuccess.value = true
clearPayStatusTimer()
setTimeout(() => {
userStore.fetchUpdateEquityInfo()
window.$message.success(t('common_module.payment_success'))
const currentSelectPackage = ref<1 | 2 | 3>(1) // 1：100积分 2：350积分 3：600积分
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('wechatpay')
const isPaymentSuccess = ref(true)
isShowPointRechargeModal.value = false
}, 1400)
}
})
}
const timerId = setInterval(() => {
if (!payInfo.value.payOrderSn) {
clearInterval(timerId)
payStatusTimer.value = null
return
}
request()
}, 1000)
payStatusTimer.value = timerId
}
function handlePaymentMethodSwitch(method: 'alipay' | 'wechatpay') {
currentPaymentMethod.value = method
getEquityPayQrCode()
}
function handlePackageSwitch(key: typeof currentSelectPackage.value) {
currentSelectPackage.value = key
getEquityPayQrCode()
}
</script>
<template>
<n-modal v-model:show="isShowPointRechargeModal" preset="card" title="积分充值" size="medium" class="!w-[850px]">
<div>
<ul class="mt-[10px] flex h-[255px]">
<li
class="mr-[19px] flex-1 rounded-[10px] border text-center transition last:mr-0"
:class="currentSelectPackage === 1 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
:style="
currentSelectPackage === 1
? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
: { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
"
>
<div class="font-600 mt-[32px] text-[16px] text-[#482801]">100积分</div>
<div class="font-600 mt-[10px] text-[24px] text-[#482801]">
9.9 <span class="text-[14px] text-[#482801]">HK$</span>
</div>
function clearPayInfo() {
payInfo.value = {
url: '',
payOrderSn: '',
}
<button
class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
:style="
currentSelectPackage === 1 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
"
@click="handlePackageSwitch(1)"
>
立即购买
</button>
isPayQrcodeInvalid.value = false
isPaymentSuccess.value = false
}
<!-- <ul class="ml-[20px] mt-[26px]">
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 1 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
>
获得100积分，用于和AI互动行动
</li>
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 1 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
>
无期限，用完即止
</li>
</ul> -->
</li>
function clearPayStatusTimer() {
if (payStatusTimer.value !== null) {
clearInterval(payStatusTimer.value)
payStatusTimer.value = null
}
}
<li
class="mr-[19px] flex-1 rounded-[10px] border border-[#F4DEC5] text-center last:mr-0"
:class="currentSelectPackage === 2 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
:style="
currentSelectPackage === 2
? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
: { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
"
>
<div class="font-600 mt-[32px] text-[16px] text-[#482801]">350积分</div>
<div class="font-600 mt-[10px] text-[24px] text-[#482801]">
29.9 <span class="text-[14px] text-[#482801]">HK$</span>
</div>
function onModalAfterLeave() {
currentSelectPackage.value = 0
currentPaymentMethod.value = 'alipay'
<button
class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
:style="
currentSelectPackage === 2 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
"
@click="handlePackageSwitch(2)"
>
立即购买
</button>
clearPayStatusTimer()
clearPayInfo()
}
</script>
<!-- <ul class="ml-[20px] mt-[26px]">
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 2 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
>
获得350积分，用于和AI互动行动
</li>
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 2 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
<template>
<n-modal
v-model:show="isShowPointRechargeModal"
preset="card"
:title="t('equity_module.point_recharge')"
size="medium"
class="!w-[850px]"
:on-after-leave="onModalAfterLeave"
>
无期限，用完即止
</li>
</ul> -->
</li>
<div v-if="!pointsGiftPackageListLoading">
<ul class="mt-[10px] flex h-[255px]">
<li
class="mr-[19px] flex-1 rounded-[10px] border border-[#F4DEC5] text-center last:mr-0"
:class="currentSelectPackage === 3 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
v-for="(packageItem, packageIndex) in pointsGiftPackageList"
:key="packageItem.id"
class="mr-[19px] max-w-[260px] flex-1 rounded-[10px] border text-center transition last:mr-0"
:class="currentSelectPackage === packageIndex ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
:style="
currentSelectPackage === 3
currentSelectPackage === packageIndex
? { backgroundImage: 'linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' }
: { backgroundImage: 'linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)' }
"
>
<div class="font-600 mt-[32px] text-[16px] text-[#482801]">600积分</div>
<div class="font-600 mt-[32px] text-[16px] text-[#482801]">
{{ packageItem.points }} {{ t('equity_module.points2') }}
</div>
<div class="font-600 mt-[10px] text-[24px] text-[#482801]">
49.9 <span class="text-[14px] text-[#482801]">HK$</span>
{{ packageItem.amount }} <span class="text-[14px] text-[#482801]">￥</span>
</div>
<button
class="flex-center mx-auto mt-[12px] flex h-[34px] w-[86px] rounded-[5px] bg-[#FDC386] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
:style="
currentSelectPackage === 3 ? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' } : {}
currentSelectPackage === packageIndex
? { backgroundImage: 'linear-gradient(to bottom, #FFF598, #FFAA00)' }
: {}
"
@click="handlePackageSwitch(3)"
@click="handlePackageSwitch(packageIndex as 0 | 1 | 2)"
>
立即购买
{{ t('common_module.buy_now') }}
</button>
<!-- <ul class="ml-[20px] mt-[26px]">
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 3 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
>
获得350积分，用于和AI互动行动
<ul class="ml-[20px] mt-[26px]">
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]">
<span
class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full"
:class="currentSelectPackage === packageIndex ? 'bg-[#FFEAC8]' : 'bg-[#EBD8BE]'"
></span>
{{ t('equity_module.get_points_for_interacting_with_the_ai', { points: packageItem.points }) }}
</li>
<li
class="mb-[8px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:content-['']"
:class="currentSelectPackage === 3 ? 'before:bg-[#FFEAC8]' : 'before:bg-[#EBD8BE]'"
>
无期限，用完即止
<li class="mb-[8px] flex items-center text-[14px] text-[#482801]">
<span
class="mr-[5px] inline-block h-[6px] w-[6px] rounded-full"
:class="currentSelectPackage === packageIndex ? 'bg-[#FFEAC8]' : 'bg-[#EBD8BE]'"
></span>
{{ t('equity_module.no_time_limit_when_used_up') }}
</li>
</ul> -->
</ul>
</li>
</ul>
<div class="mt-[28px] flex items-center justify-center">
<h4 class="mr-[14px] text-[14px]">选择充值方式：</h4>
<h4 class="mr-[14px] text-[14px]">{{ t('equity_module.payment_method') }}：</h4>
<ul class="flex select-none items-center">
<li
class="mr-[12px] flex cursor-pointer items-center rounded-[5px] border border-[#999999] px-[16px] py-[6px] text-[14px] transition"
......@@ -154,7 +284,7 @@ function handlePackageSwitch(key: typeof currentSelectPackage.value) {
@click="handlePaymentMethodSwitch('alipay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span>支付宝</span>
<span>{{ t('common_module.alipay') }}</span>
</li>
<li
class="mr-[12px] flex cursor-pointer items-center rounded-[5px] border border-[#999999] px-[16px] py-[6px] text-[14px] text-[#333] transition"
......@@ -162,14 +292,19 @@ function handlePackageSwitch(key: typeof currentSelectPackage.value) {
@click="handlePaymentMethodSwitch('wechatpay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span>微信</span>
<span>{{ t('common_module.wechat') }}</span>
</li>
</ul>
</div>
<div class="mt-[26px] flex justify-center">
<div class="relative">
<n-qr-code class="align-bottom" value="https://www.naiveui.com/" :size="120" :padding="0" />
<div v-if="payInfo.url" class="relative">
<n-qr-code
class="align-bottom"
:class="isPayQrcodeInvalid ? 'blur-sm' : ''"
:value="payInfo.url"
:size="140"
:padding="0"
/>
<Transition name="mask">
<div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
<div
......@@ -179,16 +314,41 @@ function handlePackageSwitch(key: typeof currentSelectPackage.value) {
</div>
</div>
</Transition>
<Transition name="mask">
<div v-show="isPayQrcodeInvalid" class="flex-center absolute inset-0 flex">
<div class="absolute inset-0 bg-[rgba(0,0,0,0.6)] blur-sm"></div>
<i class="iconfont icon-huanyihuan font-600 z-1 relative text-[30px] text-[#fff]"></i>
</div>
</Transition>
</div>
<div v-else class="flex-center flex h-[140px] w-[140px]">
<n-spin size="large" />
</div>
</div>
<div class="mt-[10px] flex items-center justify-center">
<!-- <img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span class="font-600 text-[16px]">支付宝扫码支付<span class="text-[24px] text-[#F25744]">9.9</span>HK$</span> -->
<template v-if="currentPaymentMethod === 'alipay'">
<img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span class="font-600 text-[16px]"
>{{ t('common_module.alipay') }} {{ t('equity_module.scan_code_payment')
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>￥</span
>
</template>
<template v-else-if="currentPaymentMethod === 'wechatpay'">
<img class="mr-[5px] mt-[6px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span class="font-600 text-[16px]">微信扫码支付<span class="text-[24px] text-[#F25744]">9.9</span>HK$</span>
<span class="font-600 text-[16px]"
>{{ t('common_module.wechat') }} {{ t('equity_module.scan_code_payment')
}}<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>￥</span
>
</template>
</div>
</div>
<div v-else class="flex-center flex h-[534px]">
<n-spin size="large" />
</div>
</n-modal>
</template>
......
src/views/equity/equity.vue
View file @ 8132e6fb
......@@ -20,11 +20,11 @@ const equityInfo = computed(() => {
return userStore.equityInfo
})
// function handlePointRecharge() {
// currentSelectVersion.value = null
function handlePointRecharge() {
currentSelectVersion.value = null
// isShowPointRechargeModal.value = true
// }
isShowPointRechargeModal.value = true
}
</script>
<template>
......@@ -76,13 +76,13 @@ const equityInfo = computed(() => {
</div>
</div>
<!-- <div
<div
class="flex cursor-pointer select-none items-center justify-end text-[15px] text-[#0B7DFF]"
@click="handlePointRecharge"
>
<span>{{ t('equity_module.top_up_immediately') }}</span>
<i class="iconfont icon-left ml-[2px] inline-block rotate-180 text-[12px]"></i>
</div> -->
</div>
</section>
<section
class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
......
src/views/order-manage/components/package-manage.vue
View file @ 8132e6fb
......@@ -121,7 +121,7 @@ function createPackageColumns(): DataTableColumns<OrderItem> {
title: t('order_manage_module.pay_method'),
key: 'payChannel',
render(row) {
return h('div', {}, row.payChannel === 'Wx' ? t('common_module.weChat') : t('common_module.alipay'))
return h('div', {}, row.payChannel === 'Wx' ? t('common_module.wechat') : t('common_module.alipay'))
},
},
{
......
src/views/order-manage/components/recharge-manage.vue
View file @ 8132e6fb
......@@ -84,7 +84,7 @@ function createRechargeColumns(): DataTableColumns<OrderItem> {
title: t('order_manage_module.pay_method'),
key: 'payChannel',
render(row) {
return h('div', {}, row.payChannel === 'Wx' ? t('common_module.weChat') : t('common_module.alipay'))
return h('div', {}, row.payChannel === 'Wx' ? t('common_module.wechat') : t('common_module.alipay'))
},
},
{
......
types/locales.d.ts
View file @ 8132e6fb
......@@ -113,7 +113,7 @@ declare namespace I18n {
year: string
month: string
alipay: string
weChat: string
wechat: string
analysis: string
last_week: string
last_month: string
......@@ -123,6 +123,8 @@ declare namespace I18n {
unlimited_amount: string
as_needed: string
support: string
buy_now: string
payment_success: string
dialogue_module: {
continue_question_message: string
......@@ -566,6 +568,9 @@ declare namespace I18n {
custom_digital_person: string
ai_training_tuning_service: string
private_deployment: string
point_recharge: string
get_points_for_interacting_with_the_ai: string
no_time_limit_when_used_up: string
}
order_manage_module: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment