mirror of
https://github.com/certd/certd.git
synced 2026-07-11 07:38:56 +08:00
xiaojunnuo
383 lines
10 KiB
Vue
383 lines
10 KiB
Vue
<template>
|
||
<div class="mt-10 vip-active-modal">
|
||
<div v-if="productInfo.notice" class="mt-10">
|
||
<a-alert type="error" :message="productInfo.notice"></a-alert>
|
||
</div>
|
||
<div class="vip-type-vs mt-10">
|
||
<a-row :gutter="20">
|
||
<div v-for="(item, key) in vipTypeDefine" :key="key" class="w-full md:w-1/3 mb-4 p-5">
|
||
<div :class="`vip-block ${key === settingStore.plusInfo.vipType ? 'current' : ''}`">
|
||
<h3 class="block-header">
|
||
<span class="flex-o">{{ item.title }}</span>
|
||
<span v-if="item.trial" class="trial">
|
||
<a-tooltip :title="item.trial.message">
|
||
<a @click="item.trial.click">{{ item.trial.title }}</a>
|
||
</a-tooltip>
|
||
</span>
|
||
</h3>
|
||
<div style="color: green" class="flex-o">
|
||
<fs-icon :icon="item.icon" class="fs-16 flex-o" />
|
||
{{ item.desc }}
|
||
</div>
|
||
<ul class="flex-1 privilege">
|
||
<li v-for="p in item.privilege" :key="p" class="flex-baseline">
|
||
<fs-icon class="color-green" icon="ion:checkmark-sharp" />
|
||
{{ p }}
|
||
</li>
|
||
</ul>
|
||
<div class="footer flex-between flex-vc">
|
||
<div class="price-show">
|
||
<span v-if="item.priceText" class="flex">
|
||
<span class="-text">{{ item.priceText }}</span>
|
||
<a-tooltip class="ml-5" :title="item.discountText">
|
||
<fs-icon class="pointer color-red" icon="ic:outline-discount"></fs-icon>
|
||
</a-tooltip>
|
||
</span>
|
||
<span v-else>
|
||
<span class="price-text">{{ t("vip.freee") }}</span>
|
||
</span>
|
||
</div>
|
||
<div class="get-show">
|
||
<template v-if="item.type === 'plus'">
|
||
<span v-if="todayOrderCount.showVipTotal" class="mr-5">
|
||
已有
|
||
<span class="color-red"> {{ todayOrderCount.vipTotal }}</span>
|
||
位伙伴支持
|
||
</span>
|
||
<a-tooltip :title="t('vip.afdian_support_vip')">
|
||
<a-button size="small" type="primary" @click="goBuyPlusPage">
|
||
{{ t("vip.get_after_support") }}
|
||
</a-button>
|
||
</a-tooltip>
|
||
</template>
|
||
<template v-else-if="item.type === 'comm'">
|
||
<a-button size="small" type="primary" @click="goBuyCommPage">
|
||
{{ t("vip.buy") }}
|
||
</a-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-row>
|
||
</div>
|
||
<div>
|
||
<a href="https://certd.docmirror.cn/guide/donate/#相关问题" target="_blank">
|
||
{{ t("vip.question") }}
|
||
</a>
|
||
</div>
|
||
<div class="mt-10">
|
||
<div class="w-100 flex-col md:flex-row">
|
||
<span>{{ t("vip.site_id") }}：</span>
|
||
<fs-copyable v-model="computedSiteId" class="mr-2 inline-flex"></fs-copyable>
|
||
<a @click="goBindAccount">{{ t("vip.not_effective") }}</a>
|
||
</div>
|
||
</div>
|
||
<div v-if="isPlus" class="mt-10 flex flex-col md:flex-row">
|
||
<span class="mr-2"> {{ t("vip.current") }} {{ vipLabel }} {{ t("vip.activated_expire_time") }} {{ settingStore.expiresText }} </span>
|
||
<a href="https://app.handfree.work/subject/#/page/detail/1" target="_blank">
|
||
{{ t("vip.learn_more") }}
|
||
</a>
|
||
</div>
|
||
<div class="mt-10">
|
||
<span class="mr-2">{{ t("vip.have_activation_code") }}</span>
|
||
<span>
|
||
<a @click="showManualActivation">{{ t("vip.manual_activation") }}</a>
|
||
</span>
|
||
</div>
|
||
<div v-if="manualActiveFlag" class="mt-10">
|
||
<div class="mt-10">
|
||
<a-input-search v-model:value="formState.code" class="w-2/6" :placeholder="placeholder" :enter-button="t('vip.activate')" @search="doActive"></a-input-search>
|
||
</div>
|
||
<div class="mt-10">
|
||
{{ t("vip.activation_code_one_use") }}
|
||
<a @click="goAccount">{{ t("vip.bind_account") }}</a
|
||
>，{{ t("vip.transfer_vip") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { message, Modal } from "ant-design-vue";
|
||
import dayjs from "dayjs";
|
||
import { computed, nextTick, onMounted, onUnmounted, reactive, Ref, ref } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
import { useRouter } from "vue-router";
|
||
import * as api from "./api";
|
||
import { useSettingStore } from "/@/store/settings";
|
||
|
||
const { t } = useI18n();
|
||
const router = useRouter();
|
||
const settingStore = useSettingStore();
|
||
|
||
const props = defineProps<{
|
||
placeholder: string;
|
||
isPlus: boolean;
|
||
productInfo: any;
|
||
goBuyPlusPage: () => void;
|
||
goBuyCommPage: () => void;
|
||
openStarModal: (vipType: string) => void;
|
||
modalRef: any;
|
||
}>();
|
||
|
||
const formState = reactive({
|
||
code: "",
|
||
inviteCode: "",
|
||
});
|
||
|
||
async function doActive() {
|
||
if (!formState.code) {
|
||
message.error(t("vip.enterCode"));
|
||
throw new Error(t("vip.enterCode"));
|
||
}
|
||
const res = await api.doActive(formState);
|
||
if (res) {
|
||
await settingStore.init();
|
||
const vipLabel = settingStore.vipLabel;
|
||
Modal.success({
|
||
title: t("vip.successTitle"),
|
||
content: t("vip.successContent", {
|
||
vipLabel,
|
||
expireDate: dayjs(settingStore.plusInfo.expireTime).format("YYYY-MM-DD"),
|
||
}),
|
||
onOk() {
|
||
if (!(settingStore.installInfo.bindUserId > 0)) {
|
||
Modal.confirm({
|
||
title: t("vip.bindAccountTitle"),
|
||
content: t("vip.bindAccountContent"),
|
||
onOk() {
|
||
router.push("/sys/account");
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
const vipLabel = computed(() => settingStore.vipLabel);
|
||
const computedSiteId = computed(() => settingStore.installInfo?.siteId);
|
||
|
||
const manualActiveFlag = ref(false);
|
||
|
||
function showManualActivation() {
|
||
manualActiveFlag.value = true;
|
||
}
|
||
|
||
function goAccount() {
|
||
props.modalRef?.destroy();
|
||
router.push("/sys/account");
|
||
}
|
||
|
||
function goBindAccount() {
|
||
props.modalRef?.destroy();
|
||
router.push({
|
||
path: "/sys/account",
|
||
});
|
||
}
|
||
|
||
const vipTypeDefine: any = {
|
||
free: {
|
||
title: t("vip.basic_edition"),
|
||
desc: t("vip.community_free_version"),
|
||
type: "free",
|
||
icon: "lucide:package-open",
|
||
privilege: t("vip.free_privilege").split("\n"),
|
||
},
|
||
plus: {
|
||
title: t("vip.professional_edition"),
|
||
desc: t("vip.open_source_support"),
|
||
type: "plus",
|
||
privilege: t("vip.plus_privilege").split("\n"),
|
||
trial: {
|
||
title: t("vip.click_to_get_7_day_trial"),
|
||
click: () => {
|
||
props.openStarModal("plus");
|
||
},
|
||
},
|
||
icon: "stash:thumb-up",
|
||
priceText: props.productInfo.plus.priceText || `¥${props.productInfo.plus.price}/${t("vip.years")}`,
|
||
discountText: props.productInfo.plus.discountText || `¥${props.productInfo.plus.price3}/3${t("vip.years")}`,
|
||
tooltip: props.productInfo.plus.tooltip,
|
||
},
|
||
comm: {
|
||
title: t("vip.business_edition"),
|
||
desc: t("vip.commercial_license"),
|
||
type: "comm",
|
||
icon: "vaadin:handshake",
|
||
privilege: t("vip.comm_privilege").split("\n"),
|
||
priceText: props.productInfo.comm.priceText || `¥${props.productInfo.comm.price}/${t("vip.years")}`,
|
||
discountText: props.productInfo.comm.discountText || `¥${props.productInfo.comm.price3}/3${t("vip.years")}`,
|
||
tooltip: props.productInfo.comm.tooltip,
|
||
trial: {
|
||
title: t("vip.click_to_get_7_day_trial"),
|
||
click: () => {
|
||
props.openStarModal("comm");
|
||
},
|
||
},
|
||
},
|
||
};
|
||
|
||
const TodayVipOrderCountRef: Ref = ref({ enabled: false, current: 0, stages: [] });
|
||
|
||
async function getTodayVipOrderCount() {
|
||
try {
|
||
const res = await api.getTodayVipOrderCount();
|
||
if (res) {
|
||
TodayVipOrderCountRef.value = res;
|
||
TodayVipOrderCountRef.value.current = 0;
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
const todayOrderCount = computed(() => {
|
||
const countInfo = TodayVipOrderCountRef.value;
|
||
|
||
const vipTotal = countInfo?.vipTotal || 0;
|
||
const showVipTotal = countInfo?.showVipTotal || false;
|
||
const userTotal = countInfo?.userTotal || 0;
|
||
return {
|
||
showVipTotal: showVipTotal,
|
||
vipTotal: vipTotal,
|
||
userTotal: userTotal,
|
||
};
|
||
});
|
||
|
||
onMounted(async () => {
|
||
await getTodayVipOrderCount();
|
||
});
|
||
|
||
onUnmounted(() => {});
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.vip-active-modal {
|
||
.order-count {
|
||
height: 80px;
|
||
position: relative;
|
||
border: 1px solid #fee2c5;
|
||
border-radius: 5px;
|
||
|
||
.background {
|
||
border: 0px;
|
||
border-radius: 5px;
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.order-count-text {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
/* 左至右渐变*/
|
||
background: linear-gradient(to right, rgba(255, 217, 167, 0.5), rgba(255, 255, 255, 0));
|
||
|
||
.count-text {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #ff6600;
|
||
display: flex;
|
||
|
||
.count-number {
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.status-item {
|
||
opacity: 0;
|
||
transition: all 0.7s ease-in-out;
|
||
}
|
||
|
||
.status-show {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.vip-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
border: 1px solid #eee;
|
||
border-radius: 5px;
|
||
height: 275px;
|
||
line-height: 24px;
|
||
|
||
.privilege {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
&.current {
|
||
border-color: green;
|
||
}
|
||
|
||
.block-header {
|
||
padding: 0px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.trial {
|
||
font-size: 12px;
|
||
font-wight: 400;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
padding-top: 5px;
|
||
margin-top: 0px;
|
||
border-top: 1px solid #eee;
|
||
|
||
.price-text {
|
||
font-size: 18px;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
list-style-type: unset;
|
||
margin-left: 0px;
|
||
padding: 0;
|
||
}
|
||
|
||
.color-green {
|
||
color: green;
|
||
}
|
||
|
||
.vip-type-vs {
|
||
.privilege {
|
||
.fs-icon {
|
||
color: green;
|
||
}
|
||
}
|
||
|
||
.fs-icon {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|