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: []
    }
  },
  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>