643 lines
21 KiB
Vue
643 lines
21 KiB
Vue
<script setup>
|
|
import { CheckmarkCircleSharp, Close } from "@vicons/ionicons5";
|
|
import { NConfigProvider, NMessageProvider } from "naive-ui";
|
|
const message = useMessage();
|
|
|
|
definePageMeta({
|
|
layout: "header",
|
|
});
|
|
|
|
// 订单
|
|
const needPayment = ref([
|
|
{
|
|
amount: "",
|
|
productId: "",
|
|
promotionId: "",
|
|
type: "member",
|
|
},
|
|
]);
|
|
const userStore = useUserStore();
|
|
const userInfo = userStore.userInfo;
|
|
// 显示支付弹框
|
|
// 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([]);
|
|
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(null);
|
|
function showPayment(info) {
|
|
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(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;
|
|
}
|
|
}
|
|
|
|
// 关闭充值金币弹框
|
|
const isShowGoldPayment = ref(false);
|
|
const goldPaymentRef = ref(null);
|
|
|
|
function closeGoldPayment() {
|
|
isShowGoldPayment.value = false;
|
|
if (goldPaymentRef.value) {
|
|
goldPaymentRef.value.isVisible = false;
|
|
}
|
|
}
|
|
|
|
// 支付成功后刷新会员信息
|
|
function paymentSuccess() {
|
|
getIsMember();
|
|
integralGold();
|
|
}
|
|
|
|
// 跳转到积分详情页
|
|
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");
|
|
}
|
|
|
|
// 跳转到金币详情
|
|
function toGoldDetail() {
|
|
const baseUrl = window.location.origin;
|
|
window.open(`${baseUrl}/gold-detail`, "_blank", "noopener,noreferrer");
|
|
}
|
|
|
|
// 显示充值金币的框
|
|
function showGoldPayment() {
|
|
isShowGoldPayment.value = true;
|
|
if (goldPaymentRef.value) {
|
|
goldPaymentRef.value.isVisible = true;
|
|
}
|
|
}
|
|
|
|
// 获取积分和金币余额
|
|
const integralGold = ref({});
|
|
async function getIntegralGold() {
|
|
try {
|
|
const res = await request.post("/personalCenter/getPointAndWallet");
|
|
if (res.code === 200) {
|
|
integralGold.value = res.data;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
getIntegralGold();
|
|
const isShowActivity = ref(true);
|
|
|
|
// 关闭活动的图标
|
|
function closeActivityIcon() {
|
|
isShowActivity.value = false;
|
|
}
|
|
|
|
// 活动列表
|
|
const activityList = ref([])
|
|
const isShowactivityList = ref(false);
|
|
async function showActivityList() {
|
|
try {
|
|
const res = await request.post("/promotion/promotionList", {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
});
|
|
if (res.code === 200) {
|
|
activityList.value = res.rows
|
|
isShowactivityList.value = true;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
|
|
// 参与活动
|
|
async function getActivity(item) {
|
|
if(item.isJoin === 1) return
|
|
try {
|
|
const res = await request.get(`/promotion/joinPromotion?promotionId=${item.id}`);
|
|
if (res.code === 200) {
|
|
message.success('领取成功')
|
|
item.isJoin = 1
|
|
}
|
|
} catch (err) {
|
|
if(err.code === 601){
|
|
message.warning(err.msg)
|
|
}
|
|
}
|
|
}
|
|
</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">{{ integralGold.point || 0 }}点</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"
|
|
>{{ integralGold.wallet || 0 }} 点</span
|
|
>
|
|
<button
|
|
class="text-[#c3986b] bg-inherit border-none cursor-pointer"
|
|
@click="showGoldPayment"
|
|
>
|
|
充值 >
|
|
</button>
|
|
</div>
|
|
<button
|
|
class="text-white bg-inherit border-none cursor-pointer p-0"
|
|
@click="toGoldDetail"
|
|
>
|
|
加速明细 >
|
|
</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"
|
|
/>
|
|
<GoldPayment
|
|
v-if="isShowGoldPayment"
|
|
ref="goldPaymentRef"
|
|
:is-member="isMember"
|
|
@payment-success="paymentSuccess"
|
|
@close-payment="closeGoldPayment"
|
|
/>
|
|
</NMessageProvider>
|
|
</NConfigProvider>
|
|
<div class="activity-box" v-if="isShowActivity">
|
|
<div class="absolute -top-6 -right-0 cursor-pointer">
|
|
<n-icon size="20" color="#bbb" @click="closeActivityIcon">
|
|
<Close />
|
|
</n-icon>
|
|
</div>
|
|
<img
|
|
class="cursor-pointer"
|
|
@click="showActivityList"
|
|
src="@/assets/img/activityIcon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<n-modal v-model:show="isShowactivityList" transform-origin="center">
|
|
<n-card
|
|
style="width: 350px; background: #e65e40"
|
|
:bordered="false"
|
|
size="huge"
|
|
:content-style="{ padding: 0 }"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="p-4 rounded-lg">
|
|
<div class="flex justify-end mb-4">
|
|
<n-icon
|
|
class="cursor-pointer"
|
|
@click="isShowactivityList = false"
|
|
size="20"
|
|
color="#bbb"
|
|
>
|
|
<Close />
|
|
</n-icon>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<div
|
|
class="px-2 py-4 bg-white h-20 w-full flex rounded-lg"
|
|
v-for="(item, index) in activityList"
|
|
:key="index"
|
|
>
|
|
<div class="w-[70%] flex flex-col justify-around">
|
|
<div>{{ item.activityName }}</div>
|
|
<div class="text-xs text-gray-500">有效期: {{item.startTime}}</div>
|
|
<div class="text-xs text-gray-500">失效期: {{item.endTime}}</div>
|
|
</div>
|
|
<div class="w-[30%] flex items-center justify-center">
|
|
<div
|
|
@click="getActivity(item)"
|
|
class="w-14 h-6 flex items-center justify-center cursor-pointer text-white text-xs bg-[#e9613f] rounded-full"
|
|
:style="{backgroundColor: item.isJoin === 0 ? '#e9613f' : '#ccc'}"
|
|
>
|
|
{{ item.isJoin === 0 ? '领取' : '已领取' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-card>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* .n-card__content{
|
|
padding:20px !important
|
|
} */
|
|
.activity-box {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
justify-content: space-around
|
|
}
|
|
.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>
|