feat: 新增PC端附件下载包列表页面

src/web/staticres/frontRouter/pc/seeBuyerHistory/js/index-pc.js

@@ -29,6 +29,31 @@ function getShortName (comName) {
   }
   return shortname
 }
+function debounce(func, wait) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = Array.prototype.slice.call(arguments);
+    if (timeout) clearTimeout(timeout);
+    var callNow = !timeout;
+    timeout = setTimeout(function () {
+      timeout = null;
+    }, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+function downFile (src, name) {
+  var a = document.createElement('a')
+  var event = new MouseEvent('click')
+  a.download = name || '附件名称'
+  a.href = src
+  a.dispatchEvent(event)
+}
+
+var downFileOfURL = debounce(function (src , name) {
+  return downFile(src, name)
+}, 1500)
+
 var vm = new Vue({
   el: '.see-container',
   delimiters: ['{', '}'],
@@ -69,6 +94,18 @@ var vm = new Vue({
     this.subRecord()
   },
   methods: {
+    cellClick (row, column, cell, event) {
+      console.log(row, column, cell, event)
+      if (column.label === '附件') {
+        return downFileOfURL(row.s_downUrl, row.s_fileName);
+      }
+      if (column.label === '公告来源') {
+        location.href = row.articleUrl
+      }
+    },
+    indexMethod (index) {
+      return ((this.seeList.pageNum - 1) * this.seeList.pageSize) + index + 1
+    },
     showTip () {
       this.tipDialog = true
     },
@@ -84,34 +121,50 @@ var vm = new Vue({
     subPoint () {
       var _this = this
       $.ajax({
-        url: '/bigmember/portrait/subVipPortrait/usage?p_type=1',
+        url: '/jypay/resourcePack/account',
         type: 'POST',
         contentType: 'application/x-www-form-urlencoded',
-        data: '',
+        data: {
+          product: 'attachmentDownPack'
+        },
         dataType: 'json'
       }).done(res => {
-        if (res.error_code == 0) {
-          _this.points = res.data
-          if (res.data.total == res.data.usage) {
-            _this.tipDialog = true
+          if (res.error_msg === '' && res.data && res.data.data) {
+            this.points = {
+              total: '',
+              usage: ''
+            }
+            try {
+              var tempInfo = res.data.data[0]
+              this.points = {
+                total: tempInfo.number,
+                usage: tempInfo.number
+              }
+              if (this.points.usage > tempInfo.thirtyNum) {
+                this.points.usage = tempInfo.thirtyNum
+              }
+            } catch (e) {
+              console.warn(e)
           }
+          } else {
+            this.$toast(res.error_msg || '请稍后重试')
         }
       })
     },
     getDatas () {
       return {
-        year: this.years,
-        month: this.months,
+        queryTime: new Date(this.years, this.months - 1, 1).pattern('yyyy-MM'),
+        platform: 'PC',
+        productName: '附件下载包',
         pageSize: this.seeList.pageSize,
-        pageNum: this.seeList.pageNum - 1,
-        p_type: 1
+        pageNum: this.seeList.pageNum
       }
     },
     subRecord () {
       this.working = true
       this.empty = false
       $.ajax({
-        url: '/bigmember/portrait/subVipPortrait/record',
+       url: '/jypay/resourcePack/recordList',
         type: 'POST',
         contentType: 'application/x-www-form-urlencoded',
         data: this.getDatas(),
@@ -128,15 +181,7 @@ var vm = new Vue({
             res.data.list = []
             return
           }
-          this.seeList.list = this.seeList.list.concat(res.data.list.map(function (v) {
-            return {
-              name: v.name,
-              province: v.province,
-              city: v.city,
-              buyerclass: v.buyerclass,
-              checked: false
-            }
-          }))
+          this.seeList.list = this.seeList.list.concat(res.data.list)
         }
       })
     },

src/web/templates/frontRouter/pc/fileHistory/sess/index.html

@@ -19,6 +19,103 @@
   <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/css/ele-reset.css?v={{Msg "seo" "version"}}'>
   <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/css/selector/selector.css?v={{Msg "seo" "version"}}'>
   <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/frontRouter/pc/seeBuyerHistory/css/index-pc.css?v={{Msg "seo" "version"}}'>
+  <style>
+    .w1080 {
+      width: 1080px;
+      margin: 0 auto;
+    }
+    .show-total-info-group button {
+      width: 132px;
+      height: 36px;
+      background: #FFFFFF;
+      border-radius: 6px 6px 6px 6px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #2CB7CA;
+    }
+    .show-total-info-group {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 24px;
+      width: 1080px;
+      min-height: 122px;
+      background: linear-gradient(315deg, #14A7D6 0%, #1EC2DB 99%);
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.9);
+      line-height: 22px;
+      padding: 28px 32px;
+      box-sizing: border-box;
+      border-radius: 6px;
+    }
+    .show-total-info-item > span {
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.9);
+      line-height: 22px;
+    }
+    .show-total-info-item {
+      font-size: 16px;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: 24px;
+      margin-bottom: 8px;
+    }
+    .show-total-info-item .file-pack-total {
+      font-size: 36px;
+      line-height: 36px;
+      padding: 0 8px;
+    }
+    .el-table th.el-table__cell>.cell {
+      font-size: 14px;
+      font-weight: bold;
+      color: #1D1D1D;
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+    .el-table .cell {
+      padding: 4px 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #1D1D1D;
+    }
+    .el-table .el-table__cell.text-center {
+      text-align: center;
+    }
+
+    .el-table td.el-table__cell.file-name .cell {
+      font-size: 14px;
+      font-weight: 400;
+      color: #2CB7CA;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    .el-table td.el-table__cell.title-name .cell {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      cursor: pointer;
+    }
+    .el-table .el-table__cell.first-index {
+      padding-left: 6px;
+    }
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom-color: transparent;
+    }
+    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+      background: #F5F5FB;
+    }
+    .tab-title {
+      font-size: 18px;
+      font-weight: 400;
+      color: #1D1D1D;
+      line-height: 28px;
+    }
+  </style>
 </head>
 
 <body>
@@ -26,17 +123,20 @@
 
   <section class="see-container" v-cloak>
     <div class="see-header flex w">
-      <div class="l-tabs flex">
+      <div class="w1080">
         <h3 class="tab-title">线上自助充值帐户</h3>
+        <div class="show-total-info-group">
+          <div class="show-total-info-item">
+            <div>附件下载包帐户余额<span class="file-pack-total">{points.total?points.total:0}</span>个</div>
+            <span>注：超级订阅用户每月享有下载10个附件的权限，也可充值附件下载包增加当月附件下载个数；每月1号上月附件下载余额清零重新计算。</span>
+          </div>
+          <button>立即充值</button>
+        </div>
       </div>
     </div>
-    <div class="see-header flex w">
+    <div class="see-header flex w w1080" style=" margin-bottom: 30px;">
       <div class="l-tabs flex">
-        <h3 class="tab-title">使用记录</h3>
-        <div class="tips">
-          当月已使用：<span>{points.usage?points.usage:0}</span>/{points.total?points.total:0}
-        </div>
-        <div class="tip" style="cursor: pointer;" @click="helpDialog = true"></div>
+        <h3 class="tab-title">使用记录（当月已使用{points.usage?points.usage:0}个）</h3>
       </div>
       <div class="l-tabs r-tabs">
         <span class="r-word">选择月份</span>
@@ -46,21 +146,37 @@
         <i class="el-icon-arrow-down r-icons" ></i>
       </div>
     </div>
-    <div class="see-content w" v-show="seeList.list.length !== 0 && empty">
-      <div class="lists flex" v-for="item in seeList.list" :key="item._id">
-        <div class="r-conts flex">
-          <h3 class="flex" @click="detailed(item.name)">{item.name}<span v-show="item.status >= 0"
-              :class="'status-' + item.status">{item.statusWord}</span></h3>
-          <div class="line">
-            <div class="cont-tips address"><i class="addr">所在地：</i>
-              <span v-if="item.province">{item.province}</span>
-              <span v-if="item.city">{item.city}</span>
-              <span v-if="!(item.province && item.city)">--</span>
-            </div>
-            <div class="cont-tips buyerclass"><i class="buyer">采购单位类型：</i><span>{item.buyerclass || '--'}</span></div>
-          </div>
-        </div>
-      </div>
+    <div class="see-content w w1080" v-show="seeList.list.length !== 0 && empty">
+      <el-table
+              :data="seeList.list"
+              @cell-click="cellClick"
+              style="width: 100%">
+        <el-table-column
+                width="94"
+                type="index"
+                class-name="first-index"
+                label="序号"
+                :index="indexMethod">
+        </el-table-column>
+        <el-table-column
+                prop="s_fileName"
+                class-name="file-name"
+                label="附件"
+                width="384">
+        </el-table-column>
+        <el-table-column
+                prop="s_title"
+                width="384"
+                class-name="title-name ex-line2"
+                label="公告来源">
+        </el-table-column>
+        <el-table-column
+                prop="l_date"
+                width="218"
+                class-name="text-center"
+                label="下载时间">
+        </el-table-column>
+      </el-table>
       <div class="el-pagination-container" v-show="seeList.total">
         <el-pagination background layout="prev, pager, next, ->" :hide-on-single-page="true"
           :current-page="seeList.pageNum" :page-size="seeList.pageSize" :total="seeList.total"