Skip to content

P
poc-fe
Commit 5a1b8841 authored by tyyin lan's avatar tyyin lan
Browse files
Options

feat: 礼包充值

parent a83c15c1
Show whitespace changes
Inline Side-by-side
Showing with 1380 additions and 34 deletions
.vscode/settings.json
View file @ 5a1b8841
...@@ -15,6 +15,6 @@ ...@@ -15,6 +15,6 @@
"src/locales", "src/locales",
"src/locales/langs" "src/locales/langs"
], ],
"i18n-ally.sourceLanguage": "zh-cn", "i18n-ally.sourceLanguage": "en",
"i18n-ally.keystyle": "nested", "i18n-ally.keystyle": "nested",
} }
src/apis/equity.ts 0 → 100644
View file @ 5a1b8841
import { request } from '@/utils/request'
export function fetchUserEquityInfo<T>() {
return request.post<T>('/equityRest/getCurrentEquity.json')
}
export function fetchCreateEquityOrder<T>(payload: object) {
return request.post<T>('/equityOrderRest/createOrder.json', payload)
}
export function fetchGetEquityPayQrCode<T>(payload: object) {
return request.post<T>('/payRest/pay.json', null, { params: payload })
}
export function fetchGetPayStatus<T>(payOrderSn: string) {
return request.post<T>(`/payRest/orderStatus.json?payOrderSn=${payOrderSn}`)
}
src/layout/components/sidebar/sidebar.vue
View file @ 5a1b8841
...@@ -69,6 +69,13 @@ watchEffect(() => { ...@@ -69,6 +69,13 @@ watchEffect(() => {
currentMenuValue.value = (currentRoute.meta.belong as string) || '' currentMenuValue.value = (currentRoute.meta.belong as string) || ''
}) })
/* created */
;(function () {
if (userStore.isLogin) {
userStore.fetchUpdateEquityInfo()
}
})()
function handleToPersonAppSettingPage() { function handleToPersonAppSettingPage() {
router.push({ name: 'PersonalAppSetting' }) router.push({ name: 'PersonalAppSetting' })
} }
...@@ -94,10 +101,14 @@ function handleToLogin() { ...@@ -94,10 +101,14 @@ function handleToLogin() {
function handleMenuValueChange(key: string) { function handleMenuValueChange(key: string) {
router.push({ name: key }) router.push({ name: key })
} }
function handleNavigateToEquity() {
router.push({ name: 'Equity' })
}
</script> </script>
<template> <template>
<div class="flex h-full flex-col justify-between overflow-hidden"> <div class="flex h-full min-h-[300px] flex-col justify-between overflow-y-auto overflow-x-hidden">
<div class="flex flex-1 flex-col overflow-hidden"> <div class="flex flex-1 flex-col overflow-hidden">
<div class="bg-svg-page_logo mx-auto flex h-[50px] w-full shrink-0 bg-contain bg-center bg-no-repeat" /> <div class="bg-svg-page_logo mx-auto flex h-[50px] w-full shrink-0 bg-contain bg-center bg-no-repeat" />
...@@ -126,6 +137,49 @@ function handleMenuValueChange(key: string) { ...@@ -126,6 +137,49 @@ function handleMenuValueChange(key: string) {
</n-scrollbar> </n-scrollbar>
</div> </div>
<div>
<div v-if="userStore.isLogin" class="px-[12px]">
<div class="flex items-center justify-between">
<span class="flex-1 overflow-hidden text-nowrap text-[14px]">
<i class="iconfont icon-gift text-[14px] text-[#000dff]"></i>
<n-ellipsis>
<span class="ml-[5px] truncate">{{ userStore.equityInfo.points || '-' }}</span>
</n-ellipsis>
</span>
<span
class="flex cursor-pointer items-center text-[12px] text-[#0B7DFF] transition hover:text-[#085CBB]"
@click="handleNavigateToEquity"
>
<span class="mr-[5px]">
<n-ellipsis class="!max-w-[80px]"> {{ t('equity_module.more_rights_and_interests') }}</n-ellipsis></span
>
<i class="iconfont icon-left rotate-180 text-[12px]"></i>
</span>
</div>
<template v-if="userStore.equityInfo.equityLevel === 'normal'">
<div
class="mt-[15px] w-fit rounded-[5px] bg-gradient-to-b from-[#EBEBEB] to-[#CDCDCD] px-[8px] py-[4px] text-[14px] text-[#001C31]"
>
{{ userStore.equityLevelName }}
</div>
</template>
<template
v-else-if="
userStore.equityInfo.equityLevel === 'professional' || userStore.equityInfo.equityLevel === 'ultimate'
"
>
<div
class="mt-[15px] w-fit rounded-[5px] px-[8px] py-[4px] text-[14px] text-[#482801]"
style="background-image: linear-gradient(45deg, #ffdf97, #ffef9b, #ffd493)"
>
{{ userStore.equityLevelName }}
</div>
</template>
</div>
<div class="mb-[20px] mt-6"> <div class="mb-[20px] mt-6">
<div> <div>
<n-dropdown <n-dropdown
...@@ -160,6 +214,7 @@ function handleMenuValueChange(key: string) { ...@@ -160,6 +214,7 @@ function handleMenuValueChange(key: string) {
</div> --> </div> -->
</div> </div>
</div> </div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
......
src/layout/index.vue
View file @ 5a1b8841
...@@ -31,7 +31,7 @@ watchEffect(() => { ...@@ -31,7 +31,7 @@ watchEffect(() => {
<NLayoutContent class="bg-[#f3f6f9]! flex-1"> <NLayoutContent class="bg-[#f3f6f9]! flex-1">
<main <main
class="main-content-container m-auto box-border h-full max-w-[1669px] transition-[padding] duration-300 ease-in-out" class="main-content-container m-auto box-border h-full w-full overflow-x-auto transition-[padding] duration-300 ease-in-out"
:class="{ 'px-6': isShowMainContentContainerPadding, 'py-4': isShowMainContentContainerPadding }" :class="{ 'px-6': isShowMainContentContainerPadding, 'py-4': isShowMainContentContainerPadding }"
> >
<RouterView v-slot="{ Component }"> <RouterView v-slot="{ Component }">
......
src/locales/langs/en.yaml
View file @ 5a1b8841
...@@ -499,8 +499,34 @@ personal_settings_module: ...@@ -499,8 +499,34 @@ personal_settings_module:
file_type_restriction_doc: 'Only.pdf,.txt, .md, .doc, and.docx file types are supported' file_type_restriction_doc: 'Only.pdf,.txt, .md, .doc, and.docx file types are supported'
the_file_type_cannot_be_uploaded: 'The file type cannot be uploaded' the_file_type_cannot_be_uploaded: 'The file type cannot be uploaded'
equity_Module: equity_module:
file_empty_tip: 'The file content cannot be empty' file_empty_tip: 'The file content cannot be empty'
more_rights_and_interests: 'More rights and interests'
basic_version: 'Basic version'
professional_version: 'Professional version'
flagship_version: 'Flagship version'
enterprise_version: 'Enterprise version'
time_limit: 'Time limit'
integral_quantity: 'Integral quantity'
integral_quantity_doc: 'Running applications or using large models will result in integral consumption. The integral consumed by each run is calculated according to the actual model used, and the integral consumed by different models is different'
points: 'Points'
points2: 'Points'
top_up_immediately: 'Top up immediately'
number_of_applications: 'Number of applications'
number_of_applications_doc: 'Total number of applications created'
individual: 'Individual'
number_of_knowledge_base_files: 'umber of knowledge base files'
number_of_knowledge_base_files_doc: 'The total number of uploaded learning and training files'
gift_package_list_title: 'Choose from a selection of value packages'
current_version: 'Current version'
current_version_is_higher: 'Current version is higher'
free_use: 'Free use'
month: 'Month'
year: 'Year'
open_immediately: 'Open immediately'
consultation_for_details: 'Consultation for details'
consult_now: 'Consult now'
upper_application_limit: 'Upper application limit'
order_manage_module: order_manage_module:
package_name: 'PackageName' package_name: 'PackageName'
......
src/locales/langs/zh-cn.yaml
View file @ 5a1b8841
...@@ -497,8 +497,34 @@ personal_settings_module: ...@@ -497,8 +497,34 @@ personal_settings_module:
file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件类型' file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件类型'
the_file_type_cannot_be_uploaded: '暂不支持上传该文件类型' the_file_type_cannot_be_uploaded: '暂不支持上传该文件类型'
equity_Module: equity_module:
file_empty_tip: '文件内容不能为空' file_empty_tip: '文件内容不能为空'
more_rights_and_interests: '更多权益'
basic_version: '基础版'
professional_version: '专业版'
flagship_version: '旗舰版'
enterprise_version: '企业版'
time_limit: '期限'
integral_quantity: '积分数量'
integral_quantity_doc: '运行应用或者使用大模型会产生积分消耗，每次运行消耗的积分根据实际使用的模型计算，不同模型消耗的积分不一致不同'
points: '分'
points2: '积分'
top_up_immediately: '立即充值'
number_of_applications: '应用数量'
number_of_applications_doc: '创建应用的总数量'
individual: '个'
number_of_knowledge_base_files: '知识库文件数量'
number_of_knowledge_base_files_doc: '上传学习和训练文件的总数量'
gift_package_list_title: '精选超值礼包任选'
current_version: '当前版本'
current_version_is_higher: '当前版本较高'
free_use: '免费使用'
month: '月'
year: '年'
open_immediately: '立即开通'
consultation_for_details: '详情咨询'
consult_now: '立即咨询'
upper_application_limit: '应用上限'
order_manage_module: order_manage_module:
package_name: '套餐名称' package_name: '套餐名称'
......
src/locales/langs/zh-hk.yaml
View file @ 5a1b8841
...@@ -497,8 +497,35 @@ personal_settings_module: ...@@ -497,8 +497,35 @@ personal_settings_module:
file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件類型' file_type_restriction_doc: '只支持.pdf， .txt，.md，.doc，.docx文件類型'
the_file_type_cannot_be_uploaded: '暫不支持上傳該文件類型' the_file_type_cannot_be_uploaded: '暫不支持上傳該文件類型'
equity_Module: equity_module:
file_empty_tip: '文件內容不能為空' file_empty_tip: '文件內容不能為空'
more_rights_and_interests: '更多權益'
basic_version: '基礎版'
professional_version: '專業版'
flagship_version: '旗艦版'
enterprise_version: '企業版'
time_limit: '期限'
integral_quantity: '積分數量'
integral_quantity_doc: '運行應用或者使用大模型會產生積分消耗，每次運行消耗的積分根據實際使用的模型計算，不同模型消耗的積分不一致不同'
points: '分'
points2: '積分'
top_up_immediately: '立即充值'
number_of_applications: '應用數量'
number_of_applications_doc: '創建應用的總數量'
individual: '個'
number_of_knowledge_base_files: '知識庫文件數量'
number_of_knowledge_base_files_doc: '上傳學習和訓練文件的總數量'
gift_package_list_title: '精選超值禮包任選'
current_version: '當前版本'
current_version_is_higher: '當前版本較高'
free_use: '免費使用'
month: '月'
year: '年'
open_immediately: '立即開通'
consultation_for_details: '詳情咨詢'
consult_now: '立即咨詢'
upper_application_limit: '應用上限'
order_manage_module: order_manage_module:
package_name: '套餐名稱' package_name: '套餐名稱'
......
src/router/modules/equity.ts 0 → 100644
View file @ 5a1b8841
import { type RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/index.vue'
export default [
{
path: '/equity',
meta: {
rank: 1001,
title: '',
},
component: Layout,
children: [
{
path: '',
name: 'Equity',
meta: {
rank: 1001,
title: 'common_module.equity',
},
component: () => import('@/views/equity/equity.vue'),
},
],
},
] as RouteRecordRaw[]
src/store/modules/user.ts
View file @ 5a1b8841
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ss } from '@/utils/storage' import { ss } from '@/utils/storage'
import { type UserState, type UserInfo, UserStoreStorageKeyEnum } from '../types/user' import { type UserState, type UserInfo, UserStoreStorageKeyEnum, type EquityInfo } from '../types/user'
import { fetchUserDetailInfo } from '@/apis/user' import { fetchUserDetailInfo } from '@/apis/user'
import { fetchUserEquityInfo } from '@/apis/equity'
import { useI18n } from 'vue-i18n'
export function createDefaultUserInfoFactory(): UserInfo { export function createDefaultUserInfoFactory(): UserInfo {
return { return {
...@@ -19,7 +21,32 @@ export const useUserStore = defineStore('user-store', { ...@@ -19,7 +21,32 @@ export const useUserStore = defineStore('user-store', {
isLogin: ss.get(UserStoreStorageKeyEnum.isLogin), isLogin: ss.get(UserStoreStorageKeyEnum.isLogin),
token: ss.get(UserStoreStorageKeyEnum.token) || '', token: ss.get(UserStoreStorageKeyEnum.token) || '',
userInfo: ss.get(UserStoreStorageKeyEnum.userInfo) || createDefaultUserInfoFactory(), userInfo: ss.get(UserStoreStorageKeyEnum.userInfo) || createDefaultUserInfoFactory(),
equityInfo: {
usedAgentCount: 0,
maxAgentCount: 0,
usedKnowledgeCount: 0,
maxKnowledgeCount: 0,
points: 0,
equityLevel: 'normal',
expireTime: '',
},
}), }),
getters: {
equityLevelName(): string {
const { t } = useI18n()
switch (this.equityInfo.equityLevel) {
case 'normal':
return t('equity_module.basic_version')
case 'professional':
return t('equity_module.professional_version')
case 'ultimate':
return t('equity_module.flagship_version')
default:
return '-'
}
},
},
actions: { actions: {
async logout() { async logout() {
this.isLogin = false this.isLogin = false
...@@ -51,5 +78,10 @@ export const useUserStore = defineStore('user-store', { ...@@ -51,5 +78,10 @@ export const useUserStore = defineStore('user-store', {
this.userInfo = res.data this.userInfo = res.data
}) })
}, },
fetchUpdateEquityInfo() {
return fetchUserEquityInfo<EquityInfo>().then((res) => {
this.equityInfo = res.data
})
},
}, },
}) })
src/store/types/user.ts
View file @ 5a1b8841
...@@ -7,10 +7,21 @@ export interface UserInfo { ...@@ -7,10 +7,21 @@ export interface UserInfo {
email: string email: string
} }
export interface EquityInfo {
usedAgentCount: number
maxAgentCount: number
usedKnowledgeCount: number
maxKnowledgeCount: number
points: number
equityLevel: 'normal' | 'professional' | 'ultimate'
expireTime: string
}
export interface UserState { export interface UserState {
isLogin: boolean isLogin: boolean
token: string token: string
userInfo: UserInfo userInfo: UserInfo
equityInfo: EquityInfo
} }
export enum UserStoreStorageKeyEnum { export enum UserStoreStorageKeyEnum {
......
src/views/equity/components/gift-pack-list.vue 0 → 100644
View file @ 5a1b8841
<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { useI18n } from 'vue-i18n'
type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', { required: true })
const { t } = useI18n()
const userStore = useUserStore()
function handleVersionSwitch(version: VersionName) {
if (
userStore.equityInfo.equityLevel === 'ultimate' &&
version &&
['ProfessionalVersion', 'BasicVersion'].includes(version)
) {
window.$message.warning(t('equity_module.current_version_is_higher'))
return
}
currentSelectVersion.value = version
}
</script>
<template>
<div class="mt-[30px]">
<h2 class="font-600 text-[18px]">{{ t('equity_module.gift_package_list_title') }}</h2>
<div
class="mt-[31px] grid grid-flow-row-dense gap-[29px]"
style="grid-template-columns: repeat(auto-fill, minmax(255px, 269px))"
>
<section class="relative h-[452px] rounded-[10px] border border-[#CFD3D4] bg-[#FBFCFF]">
<div
v-if="userStore.equityInfo.equityLevel === 'normal'"
class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
>
{{ t('equity_module.current_version') }}
</div>
<div
class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#CFD3D4] text-center"
style="background-image: linear-gradient(45deg, #d5daf1, #fafafa, #bfc6e2)"
>
<div class="font-600 mt-[24px] text-center text-[16px] text-[#010448]">
{{ t('equity_module.basic_version') }}
</div>
<div class="font-600 mt-[18px] text-center text-[24px] text-[#010448]">{{ t('equity_module.free_use') }}</div>
<button
class="mx-auto mt-[24px] !cursor-not-allowed rounded-[5px] bg-[#A8B2FF] px-[10px] py-[6px] text-[14px] text-[#fff] transition"
>
{{ t('applications_square_module.immediate_use_btn_text') }}
</button>
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li
class="mb-[14px] flex items-center text-[14px] text-[#010448] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#D8D8D8] before:content-['']"
>
{{ t('equity_module.points2') }}：<span class="font-600">50</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#010448] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#D8D8D8] before:content-['']"
>
{{ t('equity_module.upper_application_limit') }}：
<span class="font-600">5{{ t('equity_module.individual') }}</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#010448] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#D8D8D8] before:content-['']"
>
知识库文件数量：<span class="font-600">5个</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#010448] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#D8D8D8] before:content-['']"
>
支持AI模型：<span class="font-600">全部</span>
</li>
</ul>
</div>
</section>
<section
class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB] transition-all"
:class="currentSelectVersion === 'ProfessionalVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : ''"
>
<div
v-if="userStore.equityInfo.equityLevel === 'professional'"
class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
>
{{ t('equity_module.current_version') }}
</div>
<div
class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-b-[#F4DEC5] text-center"
:class="currentSelectVersion === 'ProfessionalVersion' ? 'border-b-[#FFC07B]' : ''"
:style="
currentSelectVersion === 'ProfessionalVersion'
? 'background-image: linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)'
: 'background-image: linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)'
"
>
<div class="font-600 mt-[24px] text-center text-[16px] text-[#482801]">
{{ t('equity_module.professional_version') }}
</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="font-600 ml-[10px] text-[24px]">199</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.year') }}</span>
</div>
<button
class="mx-auto mt-[24px] rounded-[5px] bg-[#FFBD79] px-[10px] py-[6px] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
:style="
currentSelectVersion === 'ProfessionalVersion'
? 'background-image: linear-gradient(to bottom, #FFF598, #FFAA00)'
: ''
"
@click="handleVersionSwitch('ProfessionalVersion')"
>
{{ t('equity_module.open_immediately') }}
</button>
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
积分：<span class="font-600">月卡100/年卡1500</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
应用上限：<span class="font-600">30个</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
知识库文件数量：<span class="font-600">50个</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
支持AI模型：<span class="font-600">全部</span>
</li>
</ul>
</div>
</section>
<section
class="relative h-[452px] rounded-[10px] border border-[#F4DEC5] bg-[#FFFDFB]"
:class="currentSelectVersion === 'FlagshipVersion' ? 'border-[#FFC07B] !bg-[#FFF7ED]' : ''"
>
<div
v-if="userStore.equityInfo.equityLevel === 'ultimate'"
class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
>
{{ t('equity_module.current_version') }}
</div>
<div
class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#F4DEC5] text-center"
:class="currentSelectVersion === 'FlagshipVersion' ? 'border-b-[#FFC07B]' : ''"
:style="
currentSelectVersion === 'FlagshipVersion'
? 'background-image: linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)'
: 'background-image: linear-gradient(45deg, #ffe9cd, #fffbf2, #ffefd1)'
"
>
<div class="font-600 mt-[24px] text-center text-[16px] text-[#482801]">
{{ t('equity_module.flagship_version') }}
</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="font-600 ml-[10px] text-[24px]">299</span>
<span class="text-[14px]"> HK$/{{ t('equity_module.year') }}</span>
</div>
<button
class="mx-auto mt-[24px] rounded-[5px] bg-[#FFBD79] px-[10px] py-[6px] text-[14px] text-[#fff] transition hover:bg-[#F1B273]"
:style="
currentSelectVersion === 'FlagshipVersion'
? 'background-image: linear-gradient(to bottom, #FFF598, #FFAA00)'
: ''
"
@click="handleVersionSwitch('FlagshipVersion')"
>
{{ t('equity_module.open_immediately') }}
</button>
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
积分：<span class="font-600">月卡200/年卡3000</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
应用上限：<span class="font-600">不限量</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
知识库文件数量：<span class="font-600">100个</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#EBD8BE] before:content-['']"
>
支持AI模型：<span class="font-600">全部</span>
</li>
</ul>
</div>
</section>
<section
class="relative h-[452px] rounded-[10px] border border-[#D2D2D0] bg-[#F8F8F8]"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'border-[#000000] !bg-[#86785B]' : ''"
>
<!-- <div
v-if="userStore.equityInfo.equityLevel === 'ultimate'"
class="z-1 absolute left-[-1px] top-0 -translate-y-1/2 rounded-[2px_16px_2px_2px] px-[10px] py-[6px] text-[12px] text-white"
style="background-image: linear-gradient(45deg, #fa9079, #f25744)"
>
{{ t('equity_module.current_version') }}
</div> -->
<div
class="h-[190px] overflow-hidden rounded-[10px] border-b border-solid border-[#555554] text-center"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'border-b-[#000000]' : ''"
:style="
currentSelectVersion === 'EnterpriseVersion'
? 'background-image: linear-gradient(45deg, #3B3B3B, #655741, #000000)'
: 'background-image: linear-gradient(45deg, #6e6e6e, #4f4f4f)'
"
>
<div class="font-600 mt-[24px] text-center text-[16px] text-[#FFF0D4]">
{{ t('equity_module.enterprise_version') }}
</div>
<div class="font-600 mt-[18px] text-center text-[22px] text-[#FFF0D4]">
{{ t('equity_module.consultation_for_details') }}
</div>
<button
class="mx-auto mt-[24px] rounded-[5px] bg-[#F8E6C9] px-[10px] py-[6px] text-[14px] text-[#453A3A] transition hover:bg-[#E4D3B7]"
:style="
currentSelectVersion === 'EnterpriseVersion'
? 'background-image: linear-gradient(to bottom,#FFEE84, #FFAA00)'
: ''
"
@click="handleVersionSwitch('EnterpriseVersion')"
>
{{ t('equity_module.consult_now') }}
</button>
</div>
<div class="mt-[12px]">
<ul class="ml-[42px]">
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
积分：<span class="font-600 text-[#FFE0A0]">按需</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
应用上限：<span class="font-600 text-[#FFE0A0]">不限量</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
知识库文件数量：<span class="font-600 text-[#FFE0A0]">不限量</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
支持AI模型：<span class="font-600 text-[#FFE0A0]">全部</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
定制数字人：<span class="font-600 text-[#FFE0A0]">支持</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
AI训练调优服务：<span class="font-600 text-[#FFE0A0]">支持</span>
</li>
<li
class="mb-[14px] flex items-center text-[14px] text-[#482801] before:mr-[5px] before:inline-block before:h-[6px] before:w-[6px] before:rounded-full before:bg-[#C7C2AB] before:content-['']"
:class="currentSelectVersion === 'EnterpriseVersion' ? 'text-[#FFFAF6]' : ''"
>
私有化部署：<span class="font-600 text-[#FFE0A0]">支持</span>
</li>
</ul>
</div>
</section>
</div>
</div>
</template>
src/views/equity/components/pay-sidebar.vue 0 → 100644
View file @ 5a1b8841
<script setup lang="ts">
import { fetchCreateEquityOrder, fetchGetEquityPayQrCode, fetchGetPayStatus } from '@/apis/equity'
import { useUserStore } from '@/store/modules/user'
import { computed, onMounted, ref, watch, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
type VersionName = 'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
const currentSelectVersion = defineModel<VersionName>('currentSelectVersion', { required: true })
const { t } = useI18n()
const userStore = useUserStore()
const packageList = ref({
ProfessionalVersion: {
title: '专业版',
list: [
{ name: '月卡', currentPrice: 19.9, originalPrice: 29.9, discountedPrice: 10 },
{ name: '年卡', currentPrice: 199, originalPrice: 238.9, discountedPrice: 39.9 },
],
},
FlagshipVersion: {
title: '旗舰版',
list: [
{ name: '月卡', currentPrice: 29.9, originalPrice: 39.9, discountedPrice: 10 },
{ name: '年卡', currentPrice: 299, originalPrice: 238.9, discountedPrice: 59.9 },
],
},
})
const currentSelectPackage = ref<0 | 1>(0)
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('alipay')
const isPaymentSuccess = ref(false)
const currentPayPrice = ref(0)
const payInfo = ref({
url: '',
payOrderSn: '',
})
const isPayQrcodeInvalid = ref(false)
const isShowPayQrCode = computed(() => {
return !!(
currentSelectVersion.value && ['ProfessionalVersion', 'FlagshipVersion'].includes(currentSelectVersion.value)
)
})
const currentPackageInfo = computed(() => {
if (isShowPayQrCode.value) {
return packageList.value[currentSelectVersion.value as 'ProfessionalVersion' | 'FlagshipVersion']
}
return null
})
watch(currentSelectVersion, () => {
clearPayInfo()
currentSelectPackage.value = 0
currentPaymentMethod.value = 'alipay'
})
watch(currentPackageInfo, (info) => {
if (info) {
currentPayPrice.value = info.list[0].currentPrice
}
})
watchEffect(() => {
if (isShowPayQrCode.value) {
getEquityPayQrCode()
}
})
onMounted(() => {
if (currentPackageInfo.value) {
currentPayPrice.value = currentPackageInfo.value.list[0].currentPrice
}
})
function clearPayInfo() {
payInfo.value = {
url: '',
payOrderSn: '',
}
isPaymentSuccess.value = false
isPayQrcodeInvalid.value = true
}
function getEquityPayQrCode() {
clearPayInfo()
const payload = {
type: '',
domain: 'equity',
validityUnit: '',
}
switch (currentSelectVersion.value) {
case 'ProfessionalVersion':
payload.type = 'professional'
break
case 'FlagshipVersion':
payload.type = 'ultimate'
break
}
switch (currentSelectPackage.value) {
case 0:
payload.validityUnit = 'month'
break
case 1:
payload.validityUnit = 'year'
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() {
fetchGetPayStatus<{ payStatus: 'Paid' | 'NoPayment' | 'Cancel' }>(payInfo.value.payOrderSn).then((res) => {
if (res.code !== 0) return ''
if (res.data.payStatus === 'Paid') {
isPaymentSuccess.value = true
setTimeout(() => {
currentSelectVersion.value = null
userStore.fetchUpdateEquityInfo()
window.$message.success('支付成功')
}, 1400)
} else {
setTimeout(() => {
!isPayQrcodeInvalid.value && getPayStatus()
}, 1000)
}
})
}
function handlePaymentMethodSwitch(method: typeof currentPaymentMethod.value) {
currentPaymentMethod.value = method
getEquityPayQrCode()
}
function handlePackageSwitch(packageKey: typeof currentSelectPackage.value, price: number) {
currentSelectPackage.value = packageKey
currentPayPrice.value = price
getEquityPayQrCode()
}
</script>
<template>
<div v-if="isShowPayQrCode" class="px-[33px] pt-[33px]">
<div>
<h2 class="text-center text-[18px]">{{ currentPackageInfo?.title || '-' }}</h2>
<ul v-if="currentPackageInfo" class="mt-[29px] flex">
<li
v-for="(packageItem, index) in currentPackageInfo.list"
:key="packageItem.name"
class="relative mr-[18px] h-[169px] flex-1 cursor-pointer select-none overflow-hidden rounded-[8px] border border-[#F4DEC5] bg-[#fff3e4] text-center transition-all"
:class="currentSelectPackage === index ? 'border-[#FFC07B]' : ''"
:style="
currentSelectPackage === index ? 'background-image: linear-gradient(45deg, #FFD063, #FFF1D5, #FEBB57)' : ''
"
@click="handlePackageSwitch(index as 0 | 1, packageItem.currentPrice)"
>
<div
class="font-600 mt-[22px] text-[16px] text-[#999]"
:class="currentSelectPackage === index ? '!text-[#482801]' : ''"
>
{{ packageItem.name }}
</div>
<div class="font-600 mt-[20px] text-[20px] text-[#482801]">
{{ packageItem.currentPrice }}<span class="text-[14px]"> HK$/{{ 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$
</div>
<div
v-show="currentSelectPackage !== index"
class="absolute bottom-0 w-full bg-[#ffebd2] py-[6px] text-center text-[12px] text-[#9A5705]"
>
已优惠{{ packageItem.discountedPrice }}HK$
</div>
<div
v-show="currentSelectPackage === index"
class="translate-1/2 absolute bottom-0 right-0 h-[60px] w-[60px] rotate-45 bg-[#ffac51]"
>
<i
class="iconfont icon-queren absolute left-[2px] top-1/2 -translate-y-1/2 -rotate-45 text-[18px] text-white"
></i>
</div>
</li>
</ul>
</div>
<div class="mt-[29px]">
<div class="text-[14px]">支付方式：</div>
<ul class="mt-[12px] flex text-[14px]">
<li
class="mr-[12px] flex cursor-pointer items-center rounded-[5px] border border-[#999999] px-[16px] py-[6px] text-[14px] transition"
:class="currentPaymentMethod === 'alipay' ? '!border-[#000DFF]' : ''"
@click="handlePaymentMethodSwitch('alipay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span>支付宝</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"
:class="currentPaymentMethod === 'wechatpay' ? '!border-[#000DFF]' : ''"
@click="handlePaymentMethodSwitch('wechatpay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span>微信</span>
</li>
</ul>
</div>
<div class="mt-[26px] flex justify-center">
<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
class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
>
<i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
</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">
<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]"
>支付宝扫码支付<span class="text-[24px] text-[#F25744]">{{ currentPayPrice }}</span
>HK$</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]">{{ currentPayPrice }}</span
>HK$</span
>
</template>
</div>
</div>
<div v-if="currentSelectVersion === 'EnterpriseVersion'" class="flex-center flex h-full">
<div class="flex flex-col items-center">
<div class="flex">
<img
class="h-[42px] w-[42px] rounded-full object-cover"
src="@/assets/images/equity/user-avatar.png"
alt="Avatar"
/>
<div class="ml-[11px] flex flex-col justify-between">
<span class="font-600 text-[16px]">POC产品专业顾问</span>
<span class="font-600 text-[12px] text-[#999]">超联软件</span>
</div>
</div>
<div class="mt-[24px] text-center text-[14px] text-[#999]">详情请扫码添加企业微信</div>
<img
class="mt-[24px] h-[174px] w-[174px] object-cover"
src="@/assets/images/equity/contact-qrcode.png"
alt="QRcode"
/>
<div class="flex-center mt-[30px] flex">
<span class="inline-block w-[60px] border-t-[2px] border-dashed border-[#F5F5F5]"></span>
<span class="mx-[16px] text-[12px] text-[#999]">添加我可获得以下权益</span>
<span class="inline-block w-[60px] border-t-[2px] border-dashed border-[#F5F5F5]"></span>
</div>
<ul class="mt-[29px]">
<li class="flex items-center">
<div class="flex items-center">
<div class="flex-center flex h-[26px] w-[26px] rounded-full bg-[#F2F4F7]">
<img class="h-[16px] w-[16px] object-cover" src="@/assets/images/equity/consult.png" alt="consult" />
</div>
<span class="ml-[15px] text-[14px]">业务线上咨询</span>
</div>
<div class="ml-[25px] flex items-center">
<div class="flex-center flex h-[26px] w-[26px] rounded-full bg-[#F2F4F7]">
<img class="h-[16px] w-[16px] object-cover" src="@/assets/images/equity/programme.png" alt="programme" />
</div>
<span class="ml-[15px] text-[14px]">专属订制方案</span>
</div>
</li>
<li class="mt-[14px] flex items-center">
<div class="flex items-center">
<div class="flex-center flex h-[26px] w-[26px] rounded-full bg-[#F2F4F7]">
<img class="h-[16px] w-[16px] object-cover" src="@/assets/images/equity/equity.png" alt="equity" />
</div>
<span class="ml-[15px] text-[14px]">专属优惠权益</span>
</div>
<div class="ml-[25px] flex items-center">
<div class="flex-center flex h-[26px] w-[26px] rounded-full bg-[#F2F4F7]">
<img class="h-[16px] w-[16px] object-cover" src="@/assets/images/equity/gift2.png" alt="gift" />
</div>
<span class="ml-[15px] text-[14px]">福利优惠提醒</span>
</div>
</li>
</ul>
</div>
</div>
<div v-show="!currentSelectVersion" class="flex-center flex h-full flex-col">
<template v-if="userStore.equityInfo.equityLevel === 'normal'">
<img
class="h-[70px] w-[70px] object-contain"
src="@/assets/images/equity/basic-version.png"
alt="basic-version"
/>
<div class="mt-[20px] text-[14px] text-[#333]">当前版本为基础版</div>
<div class="mt-[10px] text-[14px] text-[#333]">更多权益可点击礼包升级</div>
</template>
<template
v-else-if="userStore.equityInfo.equityLevel === 'professional' || userStore.equityInfo.equityLevel === 'ultimate'"
>
<img
class="h-[70px] w-[70px] object-contain"
src="@/assets/images/equity/professional-version.png"
alt="basic-version"
/>
<div class="mt-[20px] text-[14px] text-[#333]">
{{ userStore.equityInfo.equityLevel === 'professional' ? '当前版本为专业版' : '当前版本为旗舰版' }}
</div>
<div class="mt-[10px] text-[14px] text-[#333]">更多权益可点击礼包升级</div>
</template>
</div>
</template>
src/views/equity/components/point-recharge-modal.vue 0 → 100644
View file @ 5a1b8841
<script setup lang="ts">
import { ref } from 'vue'
// import { useI18n } from 'vue-i18n'
const isShowPointRechargeModal = defineModel<boolean>('isShowPointRechargeModal', { default: false })
// const { t } = useI18n()
const currentSelectPackage = ref<1 | 2 | 3>(1) // 1：100积分 2：350积分 3：600积分
const currentPaymentMethod = ref<'alipay' | 'wechatpay'>('wechatpay')
const isPaymentSuccess = ref(true)
function handlePaymentMethodSwitch(method: 'alipay' | 'wechatpay') {
currentPaymentMethod.value = method
}
function handlePackageSwitch(key: typeof currentSelectPackage.value) {
currentSelectPackage.value = key
}
</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>
<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>
<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>
<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>
<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>
<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]'"
>
无期限，用完即止
</li>
</ul>
</li>
<li
class="mr-[19px] flex-1 rounded-[10px] border border-[#F4DEC5] text-center last:mr-0"
:class="currentSelectPackage === 3 ? 'border-[#FFC07B]' : 'border-[#F4DEC5]'"
:style="
currentSelectPackage === 3
? { 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-[10px] text-[24px] text-[#482801]">
49.9 <span class="text-[14px] text-[#482801]">HK$</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)' } : {}
"
@click="handlePackageSwitch(3)"
>
立即购买
</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互动行动
</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>
</ul>
</li>
</ul>
<div class="mt-[28px] flex items-center justify-center">
<h4 class="mr-[14px] text-[14px]">选择充值方式：</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"
:class="currentPaymentMethod === 'alipay' ? '!border-[#000DFF]' : ''"
@click="handlePaymentMethodSwitch('alipay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/alipay-icon.png" alt="alipay" />
<span>支付宝</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"
:class="currentPaymentMethod === 'wechatpay' ? '!border-[#000DFF]' : ''"
@click="handlePaymentMethodSwitch('wechatpay')"
>
<img class="mr-[5px] h-[16px] w-[16px]" src="@/assets/images/equity/wechat-icon.png" alt="alipay" />
<span>微信</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" />
<Transition name="mask">
<div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
<div
class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
>
<i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
</div>
</div>
</Transition>
</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> -->
<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>
</div>
</div>
</n-modal>
</template>
<style lang="scss" scoped>
.mask-enter-active,
.mask-leave-active {
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
transition-property: opacity;
}
.mask-enter-from,
.mask-leave-to {
opacity: 0;
}
</style>
src/views/equity/equity.vue 0 → 100644
View file @ 5a1b8841
<script setup lang="ts">
import { computed, ref } from 'vue'
import GiftPackList from './components/gift-pack-list.vue'
import PointRechargeModal from './components/point-recharge-modal.vue'
import PaySidebar from './components/pay-sidebar.vue'
import { useUserStore } from '@/store/modules/user'
import { formatDateTime } from '@/utils/date-formatter'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const userStore = useUserStore()
const isShowPointRechargeModal = ref(false)
const currentSelectVersion = ref<
'BasicVersion' | 'ProfessionalVersion' | 'FlagshipVersion' | 'EnterpriseVersion' | null
>(null)
const equityInfo = computed(() => {
return userStore.equityInfo
})
// function handlePointRecharge() {
// currentSelectVersion.value = null
// isShowPointRechargeModal.value = true
// }
</script>
<template>
<div class="flex h-full min-w-[1200px] overflow-x-auto">
<div class="relative mr-[28px] flex-1 overflow-hidden overflow-y-auto rounded-[20px] bg-white p-[38px] pr-0">
<n-scrollbar>
<div class="pr-[38px]">
<span
class="absolute right-[-30px] top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-[#f3f6f9]"
></span>
<div class="flex items-end">
<h2 class="font-600 mr-[10px] text-[18px]">{{ userStore.equityLevelName }}</h2>
<div class="text-[12px] text-[#999]">
{{ t('equity_module.time_limit') }}：<span class="text-[12px] text-[#333]">{{
formatDateTime(equityInfo.expireTime)
}}</span>
</div>
</div>
<div
class="mt-[20px] grid grid-flow-row-dense gap-[20px]"
style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"
>
<section
class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
>
<div>
<div class="flex">
<img class="h-[44px] w-[44px]" src="@/assets/images/equity/gift.png" alt="integral_quantity" />
<div class="font-600 ml-[14px] flex items-center">
<span class="text-[16px]">{{ t('equity_module.integral_quantity') }}</span>
<n-popover trigger="hover" :width="400">
<template #trigger>
<i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
</template>
<span>
{{ t('equity_module.integral_quantity_doc') }}
</span>
</n-popover>
</div>
</div>
<div class="ml-[58px] mt-[4px] flex items-end">
<div class="font-600 text-[24px]"><n-number-animation :from="0" :to="equityInfo.points" /></div>
<span class="font-600 mb-[3px] ml-[7px] text-[14px]">{{ t('equity_module.points') }}</span>
</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> -->
</section>
<section
class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
>
<div class="flex">
<img class="h-[44px] w-[44px]" src="@/assets/images/equity/applications.png" alt="applications" />
<div class="font-600 ml-[14px] flex items-center">
<span class="text-[16px]">{{ t('equity_module.number_of_applications') }}</span>
<n-popover trigger="hover">
<template #trigger>
<i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
</template>
<span>{{ t('equity_module.number_of_applications_doc') }}</span>
</n-popover>
</div>
</div>
<div>
<div class="mb-[13px] text-[14px]">
<n-number-animation :from="0" :to="equityInfo.usedAgentCount" />
<span>/{{ equityInfo.maxAgentCount }} {{ t('equity_module.individual') }}</span>
</div>
<div>
<n-progress
type="line"
:percentage="(equityInfo.usedAgentCount / equityInfo.maxAgentCount) * 100"
:show-indicator="false"
:height="6"
/>
</div>
</div>
</section>
<section
class="flex h-[170px] flex-1 flex-col justify-between rounded-[10px] bg-[#F8F9FB] px-[30px] py-[24px]"
>
<div class="flex">
<img class="h-[44px] w-[44px]" src="@/assets/images/equity/knowledge-base.png" alt="knowledge-base" />
<div class="font-600 ml-[14px] flex items-center">
<span class="text-[16px]">{{ t('equity_module.number_of_knowledge_base_files') }}</span>
<n-popover trigger="hover">
<template #trigger>
<i class="iconfont icon-yiwen-yuan ml-[5px] text-[14px] text-[#999]"></i>
</template>
<span>{{ t('equity_module.number_of_knowledge_base_files_doc') }}</span>
</n-popover>
</div>
</div>
<div>
<div class="mb-[13px] text-[14px]">
<n-number-animation :from="0" :to="equityInfo.usedKnowledgeCount" />
<span>/{{ equityInfo.maxKnowledgeCount }} {{ t('equity_module.individual') }}</span>
</div>
<div>
<n-progress
type="line"
:percentage="(equityInfo.usedKnowledgeCount / equityInfo.maxKnowledgeCount) * 100"
:show-indicator="false"
:height="6"
/>
</div>
</div>
</section>
</div>
<GiftPackList v-model:current-select-version="currentSelectVersion" />
</div>
</n-scrollbar>
</div>
<div class="relative w-[360px]">
<span
class="absolute left-0 top-1/2 inline-block h-[30px] w-[30px] -translate-x-1/3 -translate-y-1/2 rotate-45 rounded-[6px] bg-white"
></span>
<div class="absolute inset-0 rounded-[20px] bg-white">
<PaySidebar :current-select-version="currentSelectVersion" />
</div>
</div>
<PointRechargeModal v-model:is-show-point-recharge-modal="isShowPointRechargeModal" />
</div>
</template>
src/views/home/components/footer-operation.vue
View file @ 5a1b8841
...@@ -228,7 +228,7 @@ function handleFileUpload(e: Event) { ...@@ -228,7 +228,7 @@ function handleFileUpload(e: Event) {
} }
if (file.size === 0) { if (file.size === 0) {
window.$message.warning(t('equity_Module.file_empty_tip')) window.$message.warning(t('equity_module.file_empty_tip'))
return return
} else if (file.size > 1024 * 1024 * 10) { } else if (file.size > 1024 * 1024 * 10) {
window.$message.warning(t('common_module.file_size_limit', { size: '10MB' })) window.$message.warning(t('common_module.file_size_limit', { size: '10MB' }))
......
src/views/home/components/message-item.vue
View file @ 5a1b8841
...@@ -34,12 +34,12 @@ const name = computed(() => { ...@@ -34,12 +34,12 @@ const name = computed(() => {
<div class="flex"> <div class="flex">
<img class="h-[36px] w-[36px] rounded-[6px] object-cover" :src="avatarUrl" alt="Avatar" /> <img class="h-[36px] w-[36px] rounded-[6px] object-cover" :src="avatarUrl" alt="Avatar" />
<div class="ml-[11px]"> <div class="ml-[11px] overflow-hidden">
<div class="mb-[7px] text-[12px] text-[#999]"> <div class="mb-[7px] text-[12px] text-[#999]">
{{ name }} {{ name }}
</div> </div>
<div <div
class="box-content min-h-[21px] min-w-[10px] rounded-[10px] border border-[#9EA3FF] px-[15px] py-[14px] text-justify" class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] px-[15px] py-[14px] text-justify"
:class="{ :class="{
'bg-[#777EF9]': isAgentMessage, 'bg-[#777EF9]': isAgentMessage,
'text-[#fff]': isAgentMessage, 'text-[#fff]': isAgentMessage,
......
types/locales.d.ts
View file @ 5a1b8841
...@@ -514,8 +514,34 @@ declare namespace I18n { ...@@ -514,8 +514,34 @@ declare namespace I18n {
the_file_type_cannot_be_uploaded: string the_file_type_cannot_be_uploaded: string
} }
equity_Module: { equity_module: {
file_empty_tip: string file_empty_tip: string
more_rights_and_interests: string
basic_version: string
professional_version: string
flagship_version: string
enterprise_version: string
time_limit: string
integral_quantity: string
integral_quantity_doc: string
points: string
points2: string
top_up_immediately: string
number_of_applications: string
number_of_applications_doc: string
individual: string
number_of_knowledge_base_files: string
number_of_knowledge_base_files_doc: string
gift_package_list_title: string
current_version: string
current_version_is_higher: string
free_use: string
month: string
year: string
open_immediately: string
consultation_for_details: string
consult_now: string
upper_application_limit: string
} }
order_manage_module: { 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