转换记录菜单开发

pages/members/me/expenses.vue

@@ -0,0 +1,151 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 19:27:42
+ * @LastEditTime: 2022-11-02 13:47:12
+-->
+<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-if="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
+        </span>
+        <span v-if="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>
+
+    <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>
+  </div>
+</template>
+
+<script> 
+import { mapState } from 'vuex' 
+export default {
+  layout: 'userCenter',
+  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>