添加开通会员的界面

This commit is contained in:
fofolee 2022-04-20 00:44:00 +08:00
parent 338ee9a953
commit 82646538c2
2 changed files with 96 additions and 4 deletions

View File

@ -1,7 +1,7 @@
<template>
<q-menu
max-height="480px"
max-width="290px"
max-width="300px"
transition-show="jump-up"
transition-hide="jump-down"
>

View File

@ -2,13 +2,33 @@
<div class="row no-wrap q-pa-md">
<div class="column items-center">
<q-avatar size="48px">
<img :src="userInfo.avatar" />
<q-badge v-if="isVIP" floating color="deep-orange" label="v" rounded />
<q-img :src="userInfo.avatar" />
<q-badge
v-if="isVIP"
floating
color="deep-orange"
:label="isDoubleVIP ? 'V²' : 'V'"
rounded
></q-badge>
</q-avatar>
<div
class="text-subtitle1 q-mt-md q-mb-xs"
class="text-subtitle1"
:class="{
'text-deep-orange': isPluginVIP,
'q-mt-md': isPluginVIP,
'q-md-xs': isPluginVIP,
}"
style="width: 64px; text-align: center"
v-html="userInfo.nickname"
></div>
<q-btn
v-if="!isPluginVIP"
outline
size="xs"
label="插件会员"
@click="showPayPage = true"
><q-tooltip>2元解锁本插件所有会员特权</q-tooltip></q-btn
>
</div>
<q-separator vertical inset class="q-mx-lg" />
<div class="column items-start q-gutter-xs">
@ -45,6 +65,51 @@
></q-linear-progress
>
</div>
<q-dialog
v-model="showPayPage"
transition-show="flip-up"
transition-hide="flip-down"
>
<q-card>
<q-card-section class="text-h5 text-deep-orange"
><q-icon color="deep-orange" name="flash_on"></q-icon> 开通插件会员
</q-card-section>
<q-separator inset />
<q-card-section class="q-gutter-sm">
<div>uTools 会员插件会员均可享受本插件的会员功能</div>
<div class="text-weight-bolder">
本插件会员仅需 {{ memberPrice }} 买断制uTools 会员享 85 折优惠
</div>
<div>
会员功能将在保障用户完整的插件功能体验的前提下提供以下个性化功能
</div>
<div class="row items-center">
<q-icon size="sm" name="color_lens" class="q-mr-sm"></q-icon>
设置插件的主题色
</div>
<div class="row items-center q-mr-lg">
<q-icon size="sm" name="image" class="q-mr-sm"></q-icon>
为面板视图设置背景图片
</div>
<div>走过路过不要错过~</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
label="思考3秒"
color="positive"
icon="hourglass_bottom"
v-close-popup
@click="thinkOver"
/>
<q-btn
label="赏了!"
color="red"
icon="local_fire_department"
@click="payForMember"
/>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
@ -63,10 +128,20 @@ export default {
nickname: "",
},
levelDetail: levelDetail,
showPayPage: false,
memberPrice: 2,
isPluginVIP: false,
goodsId: "3LHZ9WdXnUnBSgGRzr2c7bDOyGJBzUyD",
};
},
computed: {
isDoubleVIP() {
return this.isUtoolsVIP && this.isPluginVIP;
},
isVIP() {
return this.isUtoolsVIP || this.isPluginVIP;
},
isUtoolsVIP() {
return this.userInfo.type === "member";
},
},
@ -98,6 +173,23 @@ export default {
).toFixed(2)
)
: 1;
this.$root.utools.whole.fetchUserPayments().then((ret) => {
console.log(ret);
!ret.filter((x) => x.goods_id === this.goodsId).length ||
(this.isPluginVIP = true);
});
},
thinkOver() {
let that = this;
setTimeout(() => {
that.showPayPage = true;
}, 3000);
},
payForMember() {
this.$root.utools.whole.openPayment({ goodsId: this.goodsId }, () => {
this.isPluginVIP = true;
this.showPayPage = false;
});
},
},
};