503 lines
16 KiB
Vue
503 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { CheckmarkCircleSharp, Close } from '@vicons/ionicons5';
|
||
import { NConfigProvider, NMessageProvider } from 'naive-ui';
|
||
|
||
definePageMeta({
|
||
layout: 'header',
|
||
})
|
||
|
||
// 订单
|
||
const needPayment = ref([{
|
||
amount: '',
|
||
productId: '',
|
||
promotionId: '',
|
||
type: 'member',
|
||
}])
|
||
const userStore = useUserStore()
|
||
const userInfo = userStore.userInfo as UserInfoType
|
||
// 显示支付弹框
|
||
interface Payment {
|
||
isVisible: boolean
|
||
}
|
||
|
||
// 是否是会员
|
||
const isMember = ref(false)
|
||
async function getIsMember() {
|
||
try {
|
||
const res = await request.get('/member/isMember')
|
||
if (res.code === 200) {
|
||
isMember.value = res.data
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
getIsMember()
|
||
|
||
// 获取会员等级及权益列表
|
||
const MemberBenefitList = ref([])
|
||
async function getMemberBenefitList() {
|
||
try {
|
||
const res = await request.get('/memberLevel/getMemberBenefitList')
|
||
if (res.code === 200) {
|
||
MemberBenefitList.value = res.data
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
getMemberBenefitList()
|
||
|
||
// 获取会员等级列表
|
||
interface memberLevel {
|
||
memberName: string
|
||
unitPrice: number
|
||
originalPrice: number
|
||
subscriptionPeriod: number
|
||
}
|
||
const memberLevelList = ref<memberLevel[]>([])
|
||
async function getMemberLevelList() {
|
||
try {
|
||
const res = await request.get('/memberLevel/list')
|
||
if (res.code === 200) {
|
||
memberLevelList.value = res.data
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
getMemberLevelList()
|
||
|
||
// 显示会员支付的弹框
|
||
const isShowPayment = ref(false)
|
||
const PaymentRef = ref<Payment | null>(null)
|
||
function showPayment(info: any) {
|
||
if (info === 1) {
|
||
needPayment.value = memberLevelList.value
|
||
}
|
||
else {
|
||
needPayment.value = [info]
|
||
}
|
||
isShowPayment.value = true
|
||
if (PaymentRef.value) {
|
||
PaymentRef.value.isVisible = true
|
||
}
|
||
}
|
||
|
||
// 关闭开通会员弹框
|
||
function closePayment() {
|
||
isShowPayment.value = false
|
||
if (PaymentRef.value) {
|
||
PaymentRef.value.isVisible = false
|
||
}
|
||
}
|
||
// 显示积分的弹框
|
||
const isShowIntPayment = ref(false)
|
||
|
||
const IntPaymentRef = ref<Payment | null>(null)
|
||
function showIntPayment() {
|
||
isShowIntPayment.value = true
|
||
if (IntPaymentRef.value) {
|
||
IntPaymentRef.value.isVisible = true
|
||
}
|
||
}
|
||
|
||
// 关闭充值积分弹框
|
||
function closeIntPayment() {
|
||
isShowIntPayment.value = false
|
||
if (IntPaymentRef.value) {
|
||
IntPaymentRef.value.isVisible = false
|
||
}
|
||
}
|
||
|
||
// 支付成功后刷新会员信息
|
||
function paymentSuccess() {
|
||
getIsMember()
|
||
}
|
||
|
||
// 跳转到积分详情页
|
||
function toIntDetail() {
|
||
const baseUrl = window.location.origin
|
||
window.open(`${baseUrl}/int-detail`, '_blank', 'noopener,noreferrer')
|
||
}
|
||
|
||
function toOrderManage(){
|
||
const baseUrl = window.location.origin
|
||
window.open(`${baseUrl}/order-management`, '_blank', 'noopener,noreferrer')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="test bg-[#403833] flex justify-center items-center h-90">
|
||
<div class="flex gap-6 w-[1145px]">
|
||
<!-- 左侧用户信息 -->
|
||
<div class="w-60 bg-[#2b2421] rounded-lg p-6 my-3">
|
||
<!-- 右上角订阅管理 -->
|
||
<div class="text-right">
|
||
<button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer" @click="toOrderManage">
|
||
订阅管理 >
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 用户头像和信息 -->
|
||
<div class="flex flex-col items-center mt-2">
|
||
<client-only>
|
||
<img :src="userInfo.avatar" alt="头像" class="w-20 h-20 rounded-full mb-3">
|
||
<span class="text-white text-sm mb-2">{{ userInfo.nickName }}</span>
|
||
</client-only>
|
||
<div class="flex items-center text-[#8b8685] text-xs">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 mr-1"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
>
|
||
<path
|
||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||
/>
|
||
</svg>
|
||
{{ isMember.result === '1' ? `会员到期时间: ${isMember.endDate}` : '您还不是魔创未来的会员' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开通会员按钮 -->
|
||
<button
|
||
class="w-full bg-[#f2d5bc] text-[#6b4f3f] rounded-full py-2.5 mt-8 font-medium cursor-pointer"
|
||
@click="showPayment(1)"
|
||
>
|
||
开通会员
|
||
</button>
|
||
|
||
<!-- 兑换会员链接 -->
|
||
<div class="text-center mt-3">
|
||
<button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer">
|
||
兑换会员
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="flex-1 space-y-4">
|
||
<!-- 余额信息卡片 -->
|
||
<div class="bg-[#2b2421] rounded-lg p-6 mt-3">
|
||
<div class="grid grid-cols-3 gap-8">
|
||
<!-- 算力余额 -->
|
||
<div>
|
||
<h3 class="text-[#c3986b] mb-4">
|
||
算力余额
|
||
</h3>
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-[#c3986b] mr-2">300点</span>
|
||
<button class="text-[#c3986b] bg-inherit border-none cursor-pointer" @click="showIntPayment">
|
||
充值 >
|
||
</button>
|
||
</div>
|
||
<button class="text-white bg-inherit border-none cursor-pointer p-0" @click="toIntDetail">
|
||
算力明细 >
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 生图加速余额 -->
|
||
<div>
|
||
<h3 class="text-[#c3986b] mb-4">
|
||
生图加速余额
|
||
</h3>
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-[#c3986b] mr-2">0次</span>
|
||
<button class="text-[#c3986b] bg-inherit border-none cursor-pointer">
|
||
充值 >
|
||
</button>
|
||
</div>
|
||
<button class="text-white bg-inherit border-none cursor-pointer p-0">
|
||
加速明细 >
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 训练加速余额 -->
|
||
<div>
|
||
<h3 class="text-[#c3986b] mb-4">
|
||
训练加速余额
|
||
</h3>
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-[#c3986b]">0次</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 存储空间卡片 -->
|
||
<div class="bg-[#2b2421] rounded-lg p-6">
|
||
<div class="flex items-center gap-6 mb-6">
|
||
<span class="text-[#c3986b] text-lg">我的存储空间</span>
|
||
<button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
|
||
管理图库
|
||
</button>
|
||
<button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
|
||
管理训练
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 进度条 -->
|
||
<div class="relative">
|
||
<div class="h-1 bg-[#3a322e] rounded-full">
|
||
<div class="absolute right-0 -top-6 text-[#8b8685] text-sm">
|
||
0G/3G
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图例 -->
|
||
<div class="flex gap-4 mt-4">
|
||
<div class="flex items-center">
|
||
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2" />
|
||
<span class="text-[#8b8685] text-sm">生图</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-2 h-2 bg-purple-500 rounded-full mr-2" />
|
||
<span class="text-[#8b8685] text-sm">训练</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bg-gradient-to-b from-[#fdf6e3] to-[#ffffff] w-full flex justify-center py-8"
|
||
>
|
||
<div class="w-[1145px]">
|
||
<div class="grid grid-cols-5 gap-1">
|
||
<div
|
||
v-for="(item, index) in memberLevelList"
|
||
:key="index"
|
||
class="h-56 border-2 border-solid border-[#fff] rounded-lg bg-gradient-to-b from-[#f7e8d3] to-[#fef8ef] flex justify-between items-center flex-col p-4 box-border"
|
||
>
|
||
<div class="text-[#e08909] card-item">
|
||
{{ item.memberName }}
|
||
</div>
|
||
<div class="card-item">
|
||
<span class="text-[#814600] text-[20px] mr-2">¥</span>
|
||
<span class="text-[#814600] text-[40px] mr-2">{{ item.unitPrice }}</span>
|
||
<span class="text-gray-400 text-[20px] line-through">¥{{ item.originalPrice }}</span>
|
||
</div>
|
||
<div class="card-item text-[#e08909] w-7/10 text-center text-[12px]">
|
||
{{ item.subscriptionPeriod }}
|
||
</div>
|
||
<div class="card-item">
|
||
<button
|
||
class="bg-gradient-to-r from-[#fbdfa4] to-[#f3c180] text-[#4c3d33] w-40 h-10 rounded-full text-[12px] border-none cursor-pointer" @click="showPayment(item)"
|
||
>
|
||
立即开通
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="py-8">
|
||
<div class="flex justify-center mb-4">
|
||
<div class="text-xl font-bold">
|
||
会员权益
|
||
</div>
|
||
</div>
|
||
<!-- <div class="flex items-center">
|
||
<div v-for="(item, index) in MemberBenefitList" :key="index" class="w-1/4 w-full">
|
||
<div class="flex items-center justify-center">
|
||
{{ item.memberLevelName }}
|
||
</div>
|
||
<div v-for="(item2, index2) in item.memberBenefitList" :key="index2" class="flex w-full">
|
||
<div class="h-20 bg-[#f7f0ea] flex justify-center items-center w-full">
|
||
{{ item2.benefitName ? item2.benefitName : '无' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="text-[#525252]">
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#f7f0ea]">
|
||
会员权益
|
||
</div>
|
||
<div class="member-item bg-[#f5f5f5]">
|
||
用户免费
|
||
</div>
|
||
<div class="member-item bg-[#fdf6ea]">
|
||
基础版VIP
|
||
</div>
|
||
<div class="member-item bg-[#fce6bf]">
|
||
专业版VIP
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fff]">
|
||
算力
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
每天300点
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
每月15000点
|
||
</div>
|
||
<div class="member-item bg-[#fff]member-item">
|
||
每月35000点
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fafafa]">
|
||
云端存储空间
|
||
</div>
|
||
<div class="member-item bg-[#fafafa]">
|
||
3GB
|
||
</div>
|
||
<div class="member-item bg-[#fdf6ea]">
|
||
20GB
|
||
</div>
|
||
<div class="member-item bg-[#fce6bf]">
|
||
50GB
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fff]">
|
||
生图加速特权
|
||
</div>
|
||
<div class="member-item bg-[#fff]member-item">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
每月800次
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
每月5000次
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fafafa]">
|
||
会员专属模型
|
||
</div>
|
||
<div class="member-item bg-[#fafafa]">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fdf6ea]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fce6bf]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fff]">
|
||
生图高级功能
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fafafa]">
|
||
训练XL模型
|
||
</div>
|
||
<div class="member-item bg-[#fafafa]">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fdf6ea]">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fce6bf]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fff]">
|
||
图片去水印下载
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#ed7470">
|
||
<Close />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fff]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="member-item bg-[#fafafa]">
|
||
多任务并行生图
|
||
</div>
|
||
<div class="member-item bg-[#fafafa]">
|
||
<n-icon size="20" color="#58c08f">
|
||
<CheckmarkCircleSharp />
|
||
</n-icon>
|
||
</div>
|
||
<div class="member-item bg-[#fdf6ea]">
|
||
2个
|
||
</div>
|
||
<div class="member-item bg-[#fce6bf] ">
|
||
3个
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[#999] text-[12px]">
|
||
<div class="mt-1">
|
||
会员每月算力和加速特权按月下发，有效期31天，到期重置。会员模型下载次数上限为每月200次
|
||
</div>
|
||
<div class="mt-1">
|
||
发票或团队/企业定制需求，请点击立即咨询联系我们，企业合作需求也可直接联系xxxx
|
||
</div>
|
||
<div class="mt-1">
|
||
更多问题可见帮助中心
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<NConfigProvider>
|
||
<NMessageProvider>
|
||
<Payment v-if="isShowPayment" ref="PaymentRef" :info="needPayment" :is-member="isMember" @close-payment="closePayment" />
|
||
<IntPayment v-if="isShowIntPayment" ref="IntPaymentRef" :is-member="isMember" @payment-success="paymentSuccess" @close-payment="closeIntPayment" />
|
||
</NMessageProvider>
|
||
</NConfigProvider>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.card-item {
|
||
@apply flex items-center justify-center h-1/4;
|
||
}
|
||
.member-item {
|
||
@apply w-1/4 h-12 flex justify-center items-center;
|
||
}
|
||
</style>
|