vip

src/pages/vip/vip.vue

@@ -14,6 +14,26 @@
       :src="userInfo.vip_img"
       mode="widthFix"
     ></image>
+    <view class="footer" v-if="!isVip">
+      <view class="footer-body">
+        <text class="bold">&yen;</text><text class="bold big">99</text>/年
+      </view>
+      <button
+        class="card-btn"
+        v-if="userInfo && userInfo.phone && !isVip"
+        @click="handlePay"
+      >
+        立即开通
+      </button>
+      <button
+        v-else-if="!(userInfo && userInfo.phone)"
+        class="card-btn"
+        open-type="getPhoneNumber"
+        @getphonenumber="handlePhoneLogin"
+      >
+        登录开通
+      </button>
+    </view>
   </view>
 </template>
 
@@ -58,20 +78,36 @@ export default {
     };
   },
 
+  computed: {
+    isVip() {
+      return this.userInfo && this.userInfo.type === "1";
+    },
+  },
+
   async onShow() {
     this.userInfo = await login.getUserInfo();
     if (this.userInfo && this.userInfo.session) {
       this.getUserInfo();
     }
   },
+
   methods: {
     async getUserInfo() {
       const res = await getUserInfo();
       this.userInfo = { ...this.userInfo, ...res.data };
     },
+
     handleLogin(userInfo) {
       this.userInfo = userInfo;
     },
+
+    handlePay() {
+      this.$refs.card.handlePay();
+    },
+
+    async handlePhoneLogin(e) {
+      this.$refs.card.handlePhoneLogin();
+    },
   },
 };
 </script>
@@ -122,4 +158,37 @@ page {
 .img {
   width: 100%;
 }
+.footer {
+  background-color: #fff;
+  box-sizing: border-box;
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 40rpx 40rpx 66rpx;
+  display: flex;
+  color: #000;
+  align-items: center;
+  .footer-body {
+    flex: 1;
+    .bold {
+      font-weight: bolder;
+    }
+    .big {
+      font-size: 2em;
+    }
+  }
+
+  .card-btn {
+    color: rgb(3, 3, 3);
+    background: rgb(251, 222, 190);
+    display: inline-block;
+    padding: 0 50rpx;
+    border-radius: 100rpx;
+    font-weight: bold;
+    &::after {
+      display: none;
+    }
+  }
+}
 </style>