添加开通会员的界面

src/components/ConfigurationMenu.vue

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

src/components/popup/UserInfo.vue

@@ -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;
+      });
     },
   },
 };