feat: 附件下载包新增说明卡片

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

@@ -54,11 +54,34 @@ var downFileOfURL = debounce(function (src , name) {
   return downFile(src, name)
 }, 1500)
 
-var vm = new Vue({
+var fileRecorder = new Vue({
   el: '.see-container',
   delimiters: ['{', '}'],
   data () {
     return {
+      userPower: {
+        // 免费用户
+        isFree: false,
+        // 超级订阅(超级订阅默认一定有附件下载权益)
+        vipStatus: 0,
+        // 大会员
+        memberStatus: 0,
+        // 大会员power包含3， 则表示大会员有附件下载权益
+        power: []
+      },
+      // 附件下载相关权益信息
+      accountInfo: {
+        // 权益剩余总数量
+        number: 0,
+        // 剩余购买数量（充值）
+        purchaseNum: 0,
+        // 剩余兑换数量
+        exchangeNum: 0,
+        // 剩余定期投放数量（超级订阅剩余权益个数）
+        grantNum: 0,
+        // 剩余留资数量（免费用户权益个数）
+        freeNum: 0
+      },
       working: false,
       empty: false,
       dateVal: '',
@@ -78,6 +101,32 @@ var vm = new Vue({
     }
   },
   computed: {
+    bigmember () {
+      return this.userPower.memberStatus > 0
+    },
+    bigmemberNoPower () {
+      return this.userPower.power.indexOf(3) === -1 && this.bigmember
+    },
+    // 大会员有附件下载包权益
+    bigmemberHasPower () {
+      return this.userPower.power.indexOf(3) > -1 && this.bigmember
+    },
+    // 免费用户或者老超级订阅
+    freeUser () {
+      var oldVip = this.userPower.vipStatus > 0 && !this.userPower.viper
+      return this.userPower.isFree || oldVip
+    },
+    // 超级订阅用户
+    vipUser () {
+      return this.userPower.vipStatus > 0 && this.userPower.viper
+    },
+    showHeaderCard () {
+      // 大会员有附件下载包权益，不显示卡片
+      return !this.bigmemberHasPower
+    },
+    showFreeTip () {
+      return this.accountInfo.freeNum > 0
+    },
     dialogBtnText: function() {
       if (this.points.provin == -1) {
         return '联系客服'
@@ -90,10 +139,25 @@ var vm = new Vue({
     this.years = new Date().getFullYear()
     this.months = parseInt(new Date().getMonth() + 1)
     this.dateVal = new Date()
+    this.getUserPower()
     this.subPoint()
     this.subRecord()
   },
   methods: {
+    getUserPower () {
+      var _this = this
+      $.ajax({
+        type: 'post',
+        url: '/bigmember/use/isAdd',
+        success: function (res) {
+          if (res && res.data) {
+            for (var key in res.data) {
+              _this.$set(_this.userPower, key, res.data[key])
+            }
+          }
+        }
+      })
+    },
     cellClick (row, column, cell, event) {
       console.log(row, column, cell, event)
       if (column.label === '附件') {
@@ -148,18 +212,10 @@ var vm = new Vue({
         dataType: 'json'
       }).done(res => {
           if (res.error_msg === '' && res.data && res.data.data) {
-            this.points = {
-              total: 0,
-              usage: 0
-            }
             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
+              for (var key in tempInfo) {
+                _this.$set(_this.accountInfo, key, tempInfo[key])
               }
             } catch (e) {
               console.warn(e)
@@ -214,6 +270,18 @@ var vm = new Vue({
       this.seeList.list = []
       this.subRecord()
     },
+    rechargeFilePack: function () {
+      window.open('/swordfish/page_big_pc/free/filePack/buy')
+    },
+    toBuyWithPoint () {
+      console.log('兑换附件下载，跳转工作桌面兑换')
+    },
+    doLeaveInfo: function () {
+      vm.isNeedSubmit('pc_mine_member_attach_learnmore',function(){
+        // vm.showSuccess = true
+      })
+    },
+    concatKf () {},
     detailed (ids) {
       window.open('/swordfish/page_big_pc/unit_portrayal/' + ids, '_blank')
     }

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

@@ -2,6 +2,43 @@
     display: flex;
     align-items: center;
 }
+
+/* in-iframe */
+.in-iframe .see-container {
+    padding: 26px 24px;
+    min-height: unset;
+}
+.in-iframe .see-header {
+    margin-top: 0;
+}
+.in-iframe .see-header .w1080,
+.in-iframe .see-header .show-total-info-group {
+    width: 100%;
+}
+.in-iframe .see-content table {
+    width: 100%!important;
+}
+.in-iframe .no-data {
+    margin-top: 0;
+    padding: 100px 0;
+    background-color: #fff;
+}
+
+
+.pointer {
+    cursor: pointer;
+}
+
+.j-f-button {
+    padding: 4px 22px;
+    color: #fff;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    background-color: #2ABED1;
+    border-radius: 4px;
+}
+
 .see-container {
     line-height: 1;
     padding-top: 64px;
@@ -258,3 +295,83 @@
 .custom-dialog .el-dialog__footer{
   padding-bottom: 32px;
 }
+
+.show-total-info-group {
+    margin-top: 24px;
+    position: relative;
+    padding: 4px;
+    color: #fff;
+    border-radius: 8px;
+    background: linear-gradient(281deg, #14A7D6 3.53%, #1EC2DB 98.32%);
+}
+.show-total-info-group-hd {
+    position: relative;
+    padding: 16px 28px;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+}
+.file-pack-total {
+    font-size: 36px;
+    line-height: 36px;
+}
+.file-unit {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+}
+
+.show-total-info-group-bd {
+    position: relative;
+    color: #1D1D1D;
+    padding: 16px 28px 24px;
+    border-radius: 8px;
+    background: linear-gradient(90deg, #F3FEFF 0%, #DEFBFF 100%);
+    z-index: 2;
+}
+.hd-right-bg {
+    position: absolute;
+    right: -4px;
+    top: -4px;
+    bottom: 0;
+    width: 320px;
+    height: 76px;
+    overflow: hidden;
+    z-index: 1;
+}
+.hd-right-bg img {
+    display: block;
+    width: 100%;
+}
+.content-info-hd {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    color: #686868;
+    font-size: 14px;
+    line-height: 22px;
+    border-bottom: 1px dashed #E0E0E0;
+}
+.content-info-hd .strong {
+    color: #1D1D1D;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 28px;
+}
+
+.content-info-bd {
+    font-size: 14px;
+    line-height: 22px
+}
+.content-info-bd .desc-title {
+    color: #1D1D1D;
+}
+.content-info-bd .desc-text {
+    color: #686868;
+    line-height: 30px;
+}
+.content-info-bd .desc-row.desc-title {
+    margin-bottom: 8px;
+}
+.content-info-bd .j-f-button {
+    margin-left: 16px;
+}

src/web/staticres/js/pc-collect-user-info.js

@@ -202,6 +202,7 @@ function debounce(fn, delay) {
     }, delay)
   }
 }
+
 var vm = new Vue({
   el: '#vue-collect-user-info',
   delimiters: ['@@', '@@'],
@@ -402,6 +403,7 @@ var vm = new Vue({
         'activity_free_plan': '请完善信息，免费获取200剑鱼币',
         super_membership_day: '请留下联系方式，我们会尽快联系您体验大会员全部功能！',
         peugeot_supplier_regist:'请完善您的个人信息，抢先对接采购单位',
+        pc_mine_member_attach_learnmore: '请留下联系方式，我们会尽快联系您！部分招标公告信息等相关文件资料自主下载，帮助企业投标，客户分析、市场挖掘更高效。',
         peugeot_view_infor: '请留下联系方式，我们会尽快联系您体验大会员全部功能！'
       },
       isRefresh: false, // 留完资是否需要刷新页面

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

@@ -18,58 +18,13 @@
   <link href="//cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/theme-chalk/index.css" rel="stylesheet" />
   <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 href='{{Msg "seo" "cdn"}}/css/collect-user-info.css?v={{Msg "seo" "version"}}' rel="stylesheet">
   <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 {
-      display: inline-block;
-      margin-top: 8px;
-      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;
@@ -122,17 +77,80 @@
 
 <body>
   {{include "/common/pchead.html"}}
-
+  <div id="vue-collect-user-info"></div>
   <section class="see-container" v-cloak>
     <div class="see-header flex w">
       <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>
+        <h3 class="tab-title">附件下载</h3>
+        <!-- 大会员且有附件下载权益不展示头部 -->
+        <div class="show-total-info-group" v-show="showHeaderCard">
+          <div class="show-total-info-group-hd">
+            <span class="show-total-info-title">
+              <span>当月附件下载余额</span>
+              <span class="file-pack-total">{ accountInfo.number || 0 }</span>
+              <span class="file-unit">个</span>
+            </span>
+            <div class="hd-right-bg">
+              <img src="/vipsubscribe/image/file-download-overview-bg@2x.png" alt="">
+            </div>
+          </div>
+          <div class="show-total-info-group-bd">
+            <!-- 超级订阅 -->
+            <div class="show-total-info-group-bd-content" v-if="vipUser">
+              <div class="content-info-hd">
+                <span class="strong">您当前是超级订阅用户</span>
+                <span>，您每月享有10个附件下载权益。每月1号上余额清零重新计算。本月剩余{ accountInfo.grantNum || 0 }个权益。</span>
+              </div>
+              <div class="content-info-bd">
+                <p class="desc-row desc-title">不够用这么办？你有以下三种途径补充余额</p>
+                <div class="desc-row">
+                  <p class="desc-title">1. 服务升级</p>
+                  <p class="desc-text">您可购买大会员，获得每个月不限量附件下载。<span class="highlight-text pointer" @click="doLeaveInfo">了解详情></span></p>
+                </div>
+                <div class="desc-row">
+                  <p class="desc-title">2. 充值</p>
+                  <p class="desc-text" v-if="accountInfo.purchaseNum > 0">您购买了附加下载包，当月有效。本月剩余权益{ accountInfo.purchaseNum }个权益。<button class="j-f-button" @click="rechargeFilePack">去充值</button></p>
+                  <p class="desc-text" v-else>您可充值附件下载包增加当月附件下载个数，当月有效。<button class="j-f-button" @click="rechargeFilePack">去充值</button></p>
+                </div>
+                <div class="desc-row">
+                  <p class="desc-title">3. 兑换</p>
+                  <p class="desc-text">您当月剩余剑鱼币兑换附件下载权益{ accountInfo.exchangeNum }个。350剑鱼币可兑换查看一个附件下载权益。兑换后30天内有效。<span class="highlight-text pointer" @click="toBuyWithPoint">去兑换></span></p>
+                </div>
+              </div>
+            </div>
+            <!-- 无权限大会员 -->
+            <div class="show-total-info-group-bd-content" v-if="bigmemberNoPower">
+              <div class="content-info-bd">
+                <p class="desc-row desc-title">不够用这么办？你有以下两种途径补充余额</p>
+                <div class="desc-row">
+                  <p class="desc-title">1. 服务升级</p>
+                  <p class="desc-text">您当前是大会员用户，目前不享有附件下载权益。您可以联系客服进行服务升级后获得。<span class="highlight-text pointer" @click="concatKf">联系客服></span></p>
+                </div>
+                <div class="desc-row">
+                  <p class="desc-title">2. 兑换</p>
+                  <p class="desc-text">您当月剩余剑鱼币兑换附件下载权益{ accountInfo.exchangeNum }个。350剑鱼币可兑换查看一个附件下载权益。兑换后30天内有效。<span class="highlight-text pointer" @click="toBuyWithPoint">去兑换></span></p>
+                </div>
+              </div>
+            </div>
+            <!-- 免费用户 -->
+            <div class="show-total-info-group-bd-content" v-if="freeUser">
+              <div class="content-info-hd" v-show="showFreeTip">
+                <span class="strong">您当前是免费用户</span>
+                <span>，可免费下载附件 <span class="highlight-text">{ accountInfo.freeNum }</span> 次</span>
+              </div>
+              <div class="content-info-bd">
+                <p class="desc-row desc-title">不够用这么办？你有以下两种途径补充余额</p>
+                <div class="desc-row">
+                  <p class="desc-title">1. 充值</p>
+                  <p class="desc-text">超级订阅用户每月享有下载10个附件的权限，也可充值附件下载包增加。当月附件下载个数，每月1号上余额清零重新计算。<button class="j-f-button" @click="rechargeFilePack">去充值</button></p>
+                </div>
+                <div class="desc-row">
+                  <p class="desc-title">2. 兑换</p>
+                  <p class="desc-text">您当月剩余剑鱼币兑换附件下载权益{ accountInfo.exchangeNum }个。350剑鱼币可兑换查看一个附件下载权益。兑换后30天内有效。<span class="highlight-text pointer" @click="toBuyWithPoint">去兑换></span></p>
+                </div>
+              </div>
+            </div>
           </div>
-          <button onclick="location.href = '/swordfish/page_big_pc/free/filePack/buy'">立即充值</button>
         </div>
       </div>
     </div>
@@ -246,6 +264,8 @@
   <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
   <script src="//cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/index.js"></script>
   <script src='{{Msg "seo" "cdn"}}/common-module/public/js/china-map-data.js?v={{Msg "seo" "version"}}'></script>
+  <script src='{{Msg "seo" "cdn"}}/common-module/selector/js/static-data.js?v={{Msg "seo" "version"}}'></script>
+  <script src='{{Msg "seo" "cdn"}}/js/pc-collect-user-info.js?v={{Msg "seo" "version"}}'></script>
   <script>
     function closeDialog() {
       $(".dialog").css("display", "none")