更新 MyVip.vue

src/api/account.js

@@ -13,9 +13,12 @@ const accountApi = {
   forgotApi: '/api/auth/forgot',
   loginApi: '/api/auth/signin',
   logoutApi: '/api/auth/signout',
-  accountVipApi: '/api/account/vip/basic',
   resetPasswordApi: '/api/account/user/reset',
-  updateAvatarApi: '/api/account/profile/avatar'
+  updateAvatarApi: '/api/account/profile/avatar',
+
+  accountMyVipApi: '/api/user/vip/my',
+  accountVipPlanApi: '/api/user/vip/plan',
+  accountVipApi: '/api/user/vip/buy'
 }
 
 export function isUsernameExist(username) {
@@ -67,11 +70,19 @@ export function logout() {
   return get(accountApi.logoutApi)
 }
 
+export function updateAvatar(userAvatar) {
+  return post(accountApi.updateAvatarApi, userAvatar)
+}
+
 // VIP
-export function vip() {
-  return post(accountApi.accountVipApi)
+export function getMyVip() {
+  return get(accountApi.accountMyVipApi)
 }
 
-export function updateAvatar(userAvatar) {
-  return post(accountApi.updateAvatarApi, userAvatar)
+export function getVipPlans() {
+  return get(accountApi.accountVipPlanApi)
+}
+
+export function vip(data) {
+  return post(accountApi.accountVipApi, data)
 }

src/api/mall.js

@@ -7,11 +7,11 @@ const mallApi = {
   orderApi: '/api/mall/order',
   payApi: '/api/mall/pay',
   payOrderApi: '/api/mall/pay/order',
-  walletApi: '/api/mall/wallet',
-  chargeWalletApi: '/api/mall/wallet/charge',
-  payWalletApi: '/api/mall/wallet/pay',
-  walletBillApi: '/api/mall/wallet/bill',
+  payWalletApi: '/api/mall/pay',
   deliveryApi: '/api/mall/delivery',
+  walletApi: '/api/user/wallet',
+  chargeWalletApi: '/api/user/wallet/charge',
+  walletBillApi: '/api/user/wallet/bill'
 }
 
 export function addProduct(data) {

src/views/my/MyVip.vue

@@ -3,22 +3,19 @@
     <el-col :md="12">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <h3>我的小会员</h3>
+          <span>我的小会员</span>
         </div>
-        <div class="text item">
-          <el-row>
-            <StampBadge
-              style="position: absolute; top: 0; right: 0"
-              size="middle"
-              color="success"
-              content="已支付"
-              :rotate="45"
-            />
-            <el-button
-              size="medium"
-              type="success"
-              @click="handleVip"
-            >开通 VIP</el-button>
+        <div class="text item" v-if="myVip !== null">
+          <el-row v-if="!myVip.isVip">
+            您当前还不是小会员, <el-button type="text" @click="showPlanDialog">成为小会员</el-button>
+          </el-row>
+          <el-row v-else>
+            <el-row v-if="myVip.expired">
+              您的小会员已过期, <el-button type="text" @click="showPlanDialog">续费小会员</el-button>
+            </el-row>
+            <el-row v-else>
+              您的小会员还有 <span style="color: red">{{myVip.expireIn}}</span> 天到期, <el-button type="text" @click="showPlanDialog">续费小会员</el-button>
+            </el-row>
           </el-row>
         </div>
       </el-card>
@@ -32,32 +29,87 @@
           :rotate="0"
         />
       </div>
+      <div style="width: 500px; height: 100px; position: relative">
+        <StampBadge
+          style="position: absolute; top: 0; right: 0"
+          size="middle"
+          color="success"
+          content="已支付"
+          :rotate="45"
+        />
+      </div>
     </el-col>
+
+    <el-dialog
+      title="小会员计划"
+      append-to-body
+      :visible.sync="planDialog"
+      width="70%"
+      center
+    >
+      <el-form ref="form" :model="planForm">
+        <el-form-item>
+          <el-radio-group v-model="planForm.planId">
+            <el-radio label="1" border>月度会员(9.9 元每月)</el-radio>
+            <el-radio label="2" border>季度会员(28.9 元每季度)</el-radio>
+            <el-radio label="3" border>年度会员(99.9 元每年)</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="buy"
+          >购买</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
 import StampBadge from '@/components/StampBadge'
-import { vip } from '@/api/account'
+import {getMyVip, getVipPlans, vip} from '@/api/account'
 
 export default {
   name: 'MyVip',
   components: { StampBadge },
   data() {
     return {
+      planDialog: false,
+      vipPlans: [],
+      planForm: {
+        planId: null,
+        quantity: null
+      },
+      myVip: null
     }
   },
   created() {
     document.title = '我的小会员'
+    getMyVip().then(resp => {
+      if (resp.code === 0) {
+        this.myVip = resp.data
+      }
+    })
   },
   mounted() {
   },
   methods: {
-    handleVip() {
-      vip().then(resp => {
+    showPlanDialog() {
+      this.planDialog = true
+      getVipPlans().then(resp => {
+        if (resp.code === 0) {
+          this.vipPlans = resp.data
+          console.log(this.vipPlans)
+        }
+      })
+    },
+    buy() {
+      this.planDialog = false
+      vip(this.planForm).then(resp => {
         if (resp.code === 0) {
           this.$notify.info({
-            message: 'VIP 已开通',
+            message: '小会员已开通',
             duration: 3000
           })
         }