新增个人中心购买会员显示

components/BuyVip.vue

@@ -178,7 +178,7 @@ export default {
       this.$axios.get('members/getMemberInfo').then((res)=> {
         if(res.code === 200) {
           this.$store.commit('setUser',res.result.memberInfo)
-          this.$router.push('/members/me/expenses')
+          this.$router.push('/members/me/vip')
         }
       })
     },

layouts/userCenter.vue

@@ -54,15 +54,11 @@
           <li class="my_convert" :class="{active: $route.path === '/members/me/expenses'}">
             <nuxt-link to="/members/me/expenses" class='myexpenses'>我的转档</nuxt-link>
           </li>
+          <li class='my_pricing' :class="{active: $route.path === '/members/me/vip'}">
+            <nuxt-link to="/members/me/vip"> 会员购买</nuxt-link>
+          </li>
           <li class='my_pricing' :class="{active: $route.path === '/members/me/points'}">
-            <nuxt-link to="/members/me/points">消费记录</nuxt-link>
-            <ul :class="{active: $route.path === '/members/me/points'}">
-              <li >
-                <nuxt-link :class="{active: $route.path === '/members/me/points'}" to="/members/me/points" class='mypoints'> 
-                  转换券购买
-                </nuxt-link>
-              </li>
-            </ul>
+            <nuxt-link to="/members/me/points"> 转换券购买</nuxt-link>
           </li>
         </ul>
       </div>
@@ -200,18 +196,18 @@ export default {
       color: #ff4f4f;
     }
   }
-  &.active:hover{
+  &.active{
     background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
-    & > a{
-      color: rgb(51, 51, 51);
+    a{
+      color: rgb(255, 79, 79);
     }
   }
-  & > a{
-    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px;
-  }
-  &.active > a{
-    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px;
-  }
+  // & > a{
+  //   background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px;
+  // }
+  // &.active > a{
+  //   background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px;
+  // }
 }
 .my_convert{
   padding: 0px 32px;

pages/members/me/vip.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-02 10:18:11
+ * @LastEditTime: 2022-11-17 09:32:10
+-->
+<template>
+  <div>
+    <div>
+      <p class="py-15px text-20px leading-28px">会员购买记录</p>
+    </div>
+    <client-only>
+      <el-table :data="tableData" :default-sort="{ prop: 'startDate', order: 'descending' }">
+        <el-table-column label="类目" prop="totalPoints"></el-table-column>
+        <el-table-column label="金额" prop="price"></el-table-column>
+        <el-table-column label="订单编号"></el-table-column>
+        <el-table-column label="时间" prop="startDate"></el-table-column>
+        <!-- 表格无数据显示 -->
+        <div slot="empty">
+          <div class="table-empty"></div>
+          <p class="text-14px" style="color:rgba(0,0,0,0.54)">没有任何消费记录</p>
+          <p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
+        </div>
+      </el-table>
+    </client-only>
+  </div>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  layout: 'userCenter',
+  middleware: ['auth', 'user'],
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  head() {
+    return {
+      title: '17PDF Reader - 个人中心',
+      meta: [
+        {
+          name: 'keywords',
+          content: 'PDFReader,pdfreader,17PDF Reader,pdf软件,PDF阅读器,文件扫描'
+        },
+        {
+          hid: 'description',
+          content: '17PDF Reader是行走的PDF阅读器和文件扫描仪，并提供免费的PDF文件格式转换工具，支持pdf转word，pdf转doc，pdf转ppt，pdf转图片等。17PDF Reader被用户誉为“亚洲的Adobe”，拥有自主产权的PDF核心技术，为商务精英、教育族群及企业提供全方位的PDF文件解决方案。'
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      this.$axios.get("/members/getMemberInfo").then((res) => {
+        if (res.code === 200) {
+          console.log(res.result)
+          const change = []
+          res.result.setPricingList.forEach(item => {
+            // console.log("数据",item)
+            const totalPoints = item.setPricings.period.split(".")[0] + "个月"
+            const price = "￥" + item.price + ".0"
+            const id = ''
+            const startDate = item.startDate
+            const all = { totalPoints, price, id, startDate }
+            change.push(all)
+          });
+          this.tableData = change
+        }
+      })
+    }
+  },
+  computed: {
+    ...mapState([
+      "globalLoginVisiable",
+    ]),
+  },
+  watch:{
+    globalLoginVisiable(newValue){
+      if(!newValue){
+        this.getTableData()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-table {
+  th {
+    background-color: #f4f4f4 !important;
+    font-size: 16px;
+    color: #666666;
+    font-weight: normal;
+  }
+}
+
+.table-empty {
+  margin-top: 50px;
+  height: 200px;
+  background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
+}
+</style>