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

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-11-01 19:27:42
 * @LastEditTime: 2022-11-11 17:41:37
-->
<template>
  <div>
    <div class="expenses-date-tips flex content-center py-6px ">
      <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
      <div class="text-container">
        <span class="text">
          转档后的文件支持在云端保留24小时，<span v-show="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
        </span>
        <span v-show="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
          <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
          <div class="tip-text">
            若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
          </div>
        </span>
      </div>
    </div>

    <div class="py-15px">
      <p class="text-[20px] leading-28px text-[#333]">我的转档</p>
      <div class="mt-10px mb-16px">
        <button class="btn btn-download">下载</button>
        <button class="btn btn-delete">删除</button>
      </div>
    </div>
    <client-only>
      <el-table :data="tableData">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="格式转换" ></el-table-column>
        <el-table-column label="目标文件" ></el-table-column>
        <el-table-column label="文件大小" ></el-table-column>
        <el-table-column label="消耗券数" ></el-table-column>
        <el-table-column label="状态" ></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:[]
    }
  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
}
</script>

<style lang="scss">
.expenses-date-tips {
  display: flex;
  align-items: center;
  padding: 12px;
  background: linear-gradient(90deg, #FFFAFA 10.37%, rgba(255, 243, 243, 0) 91.75%), linear-gradient(90deg, #FFF2F6 2.26%, rgba(255, 242, 246, 0.21) 101.41%);
  border: 1px solid rgba(255, 79, 79, 0.2);
  border-radius: 12px;
  .text-container {
    display: flex;
    align-items: center;
    margin-left: 16px;
    img {
      margin-left: 8px;
    }
  }
  span {
    font-size: 14px;
    line-height: 24px;
    vertical-align: middle;
  }
  .text {
    display: inline-flex;
    align-items: center;
  }
  .tip {
    position: relative;
    font-size: 0;
    .tip-text {
      display: none;
      position: absolute;
      left: -3px;
      width: 258px;
      padding: 15px 14px 10px 10px;
      background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg') left top no-repeat;
      background-size: auto 100%;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
      border-radius: 4px;
    }
    &:hover .tip-text {
      display: block;
    }
  }
}
.btn {
  height: 30px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 2px;
  display: inline-block;
  padding: 0px 9px 0px 33px;
  &-download {
    color: #fff;
    background: #FF4F4F url(http://cn-file.17pdf.com/website/members/ic_download.svg) no-repeat 8px center;
    margin-right: 7px;
    &_disabled {
      background-color: #FFA7A7;
    }
  }
  &-delete {
    border: 1px solid #d8d8d9;
    color: #666;
    background: url(http://cn-file.17pdf.com/website/members/ic_delete_normal.png) no-repeat 8px 5px;
    &_disabled {
      color: #ccc;
      border-color: #ccc;
    }
  }
}
.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>