17pdf_front_end/pages/members/me/points.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: '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>
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.$axios.get("/members/getMemberInfo").then((res) => {
      if (res.code === 200) {
        // console.log(res.result)
        const change = []
        res.result.pricingList.forEach(item => {
          // console.log("数据",item)
          const totalPoints = item.totalPoints + "张转换劵"
          const price="￥"+item.price+".0"
          const id= ''
          const startDate=item.startDate
          const all={totalPoints,price,id,startDate}
          change.push(all)
        });
        this.tableData=change
      }
    })
  },
}
</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>