350 lines
12 KiB
Vue
350 lines
12 KiB
Vue
<script setup lang="ts">
|
||
definePageMeta({
|
||
layout: 'header',
|
||
})
|
||
|
||
const userStore = useUserStore()
|
||
const userInfo = userStore.userInfo as UserInfoType
|
||
// 显示支付弹框
|
||
interface Payment {
|
||
isVisible: boolean
|
||
}
|
||
const PaymentRef = ref<Payment | null>(null)
|
||
function showPayment() {
|
||
if (PaymentRef.value) {
|
||
PaymentRef.value.isVisible = true
|
||
}
|
||
}
|
||
|
||
// 是否是会员
|
||
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 points = ref(0)
|
||
async function getPoints() {
|
||
try {
|
||
const res = await request.get('/member/getPoints')
|
||
if (res.code === 200) {
|
||
points.value = res.data
|
||
}
|
||
}
|
||
catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
// getPoints()
|
||
|
||
// 获取会员等级及权益列表
|
||
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()
|
||
</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">
|
||
<!-- 右上角订阅管理 -->
|
||
<div class="text-right">
|
||
<button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer">
|
||
订阅管理 >
|
||
</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>
|
||
您还不是魔创未来的会员
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开通会员按钮 -->
|
||
<button
|
||
class="w-full bg-[#f2d5bc] text-[#6b4f3f] rounded-full py-2.5 mt-8 font-medium cursor-pointer"
|
||
@click="showPayment"
|
||
>
|
||
开通会员
|
||
</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">
|
||
<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">
|
||
充值 >
|
||
</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] 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-1 border-solid border-[#fff] rounded-lg bg-gradient-to-b from-[#fdf0dd] 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"
|
||
>
|
||
立即开通
|
||
</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 gap-2">
|
||
<div class="w-1/4 h-20 bg-[#f7f0ea] flex justify-center items-center">
|
||
会员权益
|
||
</div>
|
||
<div class="w-1/4 h-20 bg-[#f5f5f5] flex justify-center items-center">
|
||
用户免费
|
||
</div>
|
||
<div class="w-1/4 h-20 bg-[#fdf6ea] flex justify-center items-center">
|
||
基础版VIP
|
||
</div>
|
||
<div class="w-1/4 h-20 bg-[#fce6bf] flex justify-center items-center">
|
||
专业版VIP
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
算力
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每天300点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每月15000点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每月35000点
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="w-1/4 h-10 bg-[#f7f0ea] flex justify-center items-center">
|
||
算力
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#f5f5f5] flex justify-center items-center">
|
||
每天300点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fdf6ea] flex justify-center items-center">
|
||
每月15000点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fce6bf] flex justify-center items-center">
|
||
每月35000点
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
算力
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每天300点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每月15000点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
|
||
每月35000点
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<div class="w-1/4 h-10 bg-[#f7f0ea] flex justify-center items-center">
|
||
算力
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#f5f5f5] flex justify-center items-center">
|
||
每天300点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fdf6ea] flex justify-center items-center">
|
||
每月15000点
|
||
</div>
|
||
<div class="w-1/4 h-10 bg-[#fce6bf] flex justify-center items-center">
|
||
每月35000点
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[#999] text-[12px]">
|
||
<div class="mt-1">
|
||
会员每月算力和加速特权按月下发，有效期31天，到期重置。会员模型下载次数上限为每月200次
|
||
</div>
|
||
<div class="mt-1">
|
||
发票或团队/企业定制需求，请点击立即咨询联系我们，企业合作需求也可直接联系chujie@liblib.ai
|
||
</div>
|
||
<div class="mt-1">
|
||
更多问题可见帮助中心
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Payment ref="PaymentRef" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.card-item {
|
||
@apply flex items-center justify-center h-1/4;
|
||
}
|
||
</style>
|