feat: 积分充值

src/apis/equity.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 <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

@@ -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

@@ -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

@@ -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

@@ -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: {