update src/router

src/router/background_account.js

@@ -7,6 +7,7 @@ const Background = () => import('views/admin/Background')
 const MyProfile = () => import('views/my/MyProfile')
 const MyRecord = () => import('views/my/MyRecord')
 const MyMessage = () => import('views/my/MyMessage')
+const MyContact = () => import('views/my/MyContact')
 const MyOAuth = () => import('views/my/MyOAuth')
 
 export default {
@@ -42,6 +43,14 @@ export default {
       component: MyMessage,
       meta: { needAuth: true, roles: ['tnb_admin', 'tnb_user', 'tnb_disk'] }
     },
+    {
+      path: '/bg/account/contact',
+      name: 'MyContact',
+      title: '联系人',
+      icon: 'el-icon-user',
+      component: MyContact,
+      meta: { needAuth: true, roles: ['tnb_admin', 'tnb_user', 'tnb_disk'] }
+    },
     {
       path: '/bg/account/oauth',
       name: 'OAuth',

src/router/background_my.js

@@ -4,16 +4,13 @@ const Background = () => import('views/admin/Background')
 
 // ********************************************************************************************************************
 // 用户后台主页
-const MyContact = () => import('views/my/MyContact')
-const MyRcmd = () => import('views/my/MyRcmd')
-const MyVip = () => import('views/my/MyVip')
 const MyWallet = () => import('views/my/MyWallet')
-const MyDevice = () => import('views/my/MyDevice')
 
 // ********************************************************************************************************************
 // 稿件后台主页
 const History = () => import('views/post/History')
 const AlbumPost = () => import('views/post/AlbumPost')
+const MyRcmd = () => import('views/my/MyRcmd')
 
 export default {
   path: '/bg/my',
@@ -41,11 +38,11 @@ export default {
       meta: { needAuth: true, roles: ['tnb_user'] }
     },
     {
-      path: '/bg/my/vip',
-      name: 'MyVip',
-      title: '我的会员',
+      path: '/bg/my/rcmd',
+      name: 'Rcmd',
+      title: '我的推荐',
       icon: 'el-icon-user',
-      component: MyVip,
+      component: MyRcmd,
       meta: { needAuth: true, roles: ['tnb_user'] }
     },
     {
@@ -55,30 +52,6 @@ export default {
       icon: 'el-icon-user',
       component: MyWallet,
       meta: { needAuth: true, roles: ['tnb_user'] }
-    },
-    {
-      path: '/bg/my/rcmd',
-      name: 'Rcmd',
-      title: '推荐设置',
-      icon: 'el-icon-user',
-      component: MyRcmd,
-      meta: { needAuth: true, roles: ['tnb_user'] }
-    },
-    {
-      path: '/bg/my/contact',
-      name: 'MyContact',
-      title: '联系人',
-      icon: 'el-icon-user',
-      component: MyContact,
-      meta: { needAuth: true, roles: ['tnb_user'] }
-    },
-    {
-      path: '/bg/my/device',
-      name: 'MyDevice',
-      title: '我的设备',
-      icon: 'el-icon-user',
-      component: MyDevice,
-      meta: { needAuth: true, roles: ['tnb_user'] }
     }
   ]
 }

src/views/my/MyDevice.vue

@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <el-row class="movie-list">
-      <el-col :md="20">
-        <el-row>
-          <h2>我的设备</h2>
-        </el-row>
-        <el-card>
-          <el-table
-            :data="dataList"
-            :show-header="true"
-            border
-            style="width: 100%"
-          >
-            <el-table-column
-              prop="createAt"
-              label="时间"
-            />
-            <el-table-column
-              prop="title"
-              label="标题"
-            />
-            <el-table-column
-              label="操作"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  @click="view(scope.row)"
-                >查看</el-button>
-                <el-button
-                  size="mini"
-                  @click="delete(scope.row)"
-                >删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-dialog title="消息内容" :visible.sync="messageDialog" @close="onCloseDialog">
-      <span>{{ this.messageContent }}</span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getUnreadMessages, getMessageDetail } from '@/api/user'
-
-export default {
-  name: 'MyDevice',
-  data() {
-    return {
-      dataList: [],
-      messageDialog: false,
-      messageContent: ''
-    }
-  },
-  created() {
-    document.title = '我的消息'
-
-    getUnreadMessages(1).then(resp => {
-      if (resp.code === 0) {
-        this.dataList = resp.data
-      }
-    })
-  },
-  methods: {
-    view(row) {
-      getMessageDetail(row.messageId).then(resp => {
-        if (resp.code === 0) {
-          this.messageDialog = true
-          this.messageContent = resp.data.content
-        }
-      })
-    },
-    onCloseDialog() {
-      this.messageContent = ''
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-}
-
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-</style>

src/views/my/MyVip.vue

@@ -1,128 +0,0 @@
-<template>
-  <el-row>
-    <el-col :md="12">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>我的小会员</span>
-        </div>
-        <div v-if="myVip !== null" class="text item">
-          <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>
-    </el-col>
-    <el-col>
-      <div style="width: 500px; height: 100px; position: relative">
-        <StampBadge
-          size="small"
-          color="warning"
-          content="小会员"
-          :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="50%"
-      center
-    >
-      <el-form ref="form" :model="planForm">
-        <el-form-item>
-          <el-radio-group v-for="(item, index) in vipPlans" :key="index" v-model="planForm.planId">
-            <el-radio style="margin-right: 5px" :label="item.planId" border>
-              {{ item.name }} (<span style="color: red">¥{{ item.price }}</span> 元)
-            </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 { 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: {
-    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: '小会员已开通',
-            duration: 3000
-          })
-        } else {
-          this.$notify.error({
-            message: resp.msg,
-            duration: 3000
-          })
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/my/MyWallet.vue

@@ -1,7 +1,27 @@
 <template>
   <el-main>
     <el-row class="movie-list">
-      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>我的小会员</span>
+          </div>
+          <div v-if="myVip !== null" class="text item">
+            <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>
+      </el-col>
+      <el-col :md="6" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>我的钱包</span>
@@ -15,7 +35,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>我的账单</span>
@@ -116,11 +136,36 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+
+    <el-dialog
+      title="小会员计划"
+      append-to-body
+      :visible.sync="planDialog"
+      width="50%"
+      center
+    >
+      <el-form ref="form" :model="planForm">
+        <el-form-item>
+          <el-radio-group v-for="(item, index) in vipPlans" :key="index" v-model="planForm.planId">
+            <el-radio style="margin-right: 5px" :label="item.planId" border>
+              {{ item.name }} (<span style="color: red">¥{{ item.price }}</span> 元)
+            </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-main>
 </template>
 
 <script>
 import { chargeWallet, getWallet, getWalletBill } from '@/api/mall'
+import { getMyVip, getVipPlans, vip } from '@/api/account'
 
 export default {
   name: 'MyWallet',
@@ -144,7 +189,15 @@ export default {
       },
       wallet: {
         balance: '0.00'
-      }
+      },
+      // 小会员
+      planDialog: false,
+      vipPlans: [],
+      planForm: {
+        planId: null,
+        quantity: null
+      },
+      myVip: null
     }
   },
   created() {
@@ -155,6 +208,12 @@ export default {
       }
     })
 
+    getMyVip().then(resp => {
+      if (resp.code === 0) {
+        this.myVip = resp.data
+      }
+    })
+
     this.getBillRecord()
   },
   methods: {
@@ -209,6 +268,31 @@ export default {
     },
     handleDetail(index, row) {
       this.$message.info('账单详情')
+    },
+    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: '小会员已开通',
+            duration: 3000
+          })
+        } else {
+          this.$notify.error({
+            message: resp.msg,
+            duration: 3000
+          })
+        }
+      })
     }
   }
 }