17pdf_front_end/pages/members/me/vip.vue

<!--
 * @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: 'createDate', 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="createDate"></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) {
          const change = []
          res.result.setPricingList.forEach(item => {
            const totalPoints = item.setPricings.period.split(".")[0] + "个月"
            const price = "￥" + item.price + ".0"
            const id = ''
            const createDate = item.createDate
            const all = { totalPoints, price, id, createDate }
            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>