提交

jydocs-pc/src/api/mock/coin.json

@@ -0,0 +1,14 @@
+{
+    "error_code": 0,
+    "data": {
+        "code": 1,
+        "message": "积分明细查询成功",
+        "count": 42,
+        "data": {
+            "points": {
+                "balance": 200,
+                "expire": 0
+            }
+        }
+    }
+}

jydocs-pc/src/api/mock/detail.json

@@ -3,15 +3,18 @@
   "error_msg": "",
   "data": {
     "status": 1,
+    "docCang": 1,
     "detail": {
       "docId": "RJ82241sM3DyHwrupW7w",
       "docName": "软件单元、组装、确认测试系统-中标候选人公示",
       "price": 359,
       "docFileSize": 387,
       "docPageSize": 5,
-      "tags": "信息技术",
+      "tags": "法律法规,行政法规",
       "uploadDate": "2021-03-17 15:46:04",
-      "docFileType": 6,
+      "viewTimes": 55,
+      "downTimes": 6,
+      "docFileType": 1,
       "docSummary": "公告软件单元、组装、确认测试系统-中标候选人公示(招标编号：ZKX20210231A002)公示开始时间：2021年01月28日09时00分00秒公示结束时间：2021年02月01日23时59分59秒本软件单元、组装、确认测试系统（招标项目"
     }
   }

jydocs-pc/src/api/modules/detail.js

@@ -0,0 +1,53 @@
+import httpRequest from '@/api'
+import mockRequest from '@/api/mock'
+// import qs from 'qs'
+
+let request = httpRequest
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
+  // @ts-ignore
+  request = mockRequest
+}
+
+export function getDetails (data) {
+//   data = qs.stringify(data)
+  return request({
+    url: '/detail',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getAdverse (data) {
+  return request({
+    url: '/getAdvertisement',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getAdd (data) {
+  console.log(data)
+  return request({
+    url: '/userCollectAdd',
+    method: 'post',
+    data
+  })
+}
+
+export function getRemove (data) {
+  console.log(data)
+  return request({
+    url: '/userCollectRemove',
+    method: 'post',
+    data
+  })
+}
+
+export function getCoin (data) {
+  console.log(data)
+  return request({
+    url: '/coin',
+    method: 'post',
+    data
+  })
+}

jydocs-pc/src/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+// import Home from './views/Home.vue'
 
 Vue.use(Router)
 
@@ -8,10 +8,15 @@ export default new Router({
   mode: 'history',
   base: process.env.VUE_APP_BASE_URL,
   routes: [
+    // {
+    //   path: '/',
+    //   name: 'home',
+    //   component: Home
+    // },
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'content',
+      component: () => import('@/views/Content.vue')
     },
     {
       path: '/content/:id',

jydocs-pc/src/views/Content.vue

@@ -3,24 +3,25 @@
       <div class="d-left">
           <div class="tops">
               <h3>
-                  <i class="el-icon-jy-word"></i>
-                  优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料
+                  <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
+                  {{datas.docName}}
               </h3>
               <div class="tips">
                   <ul>
-                      <li class="tags" v-for="(item,index) in datas" :key="index">{{item.name}}</li>
-                      <li>11222次浏览<el-divider direction="vertical"></el-divider></li>
-                      <li>222次下载<el-divider direction="vertical"></el-divider></li>
-                      <li>共13页<el-divider direction="vertical"></el-divider></li>
-                      <li>22k<el-divider direction="vertical"></el-divider></li>
-                      <li class="no-line">2021-02-23上传</li>
+                      <li class="tags" v-for="item in datas.tags" :key="item">{{item}}</li>
+                      <li>{{datas.viewTimes}}次浏览<el-divider direction="vertical"></el-divider></li>
+                      <li>{{datas.downTimes}}次下载<el-divider direction="vertical"></el-divider></li>
+                      <li>共{{datas.docPageSize}}页<el-divider direction="vertical"></el-divider></li>
+                      <li>{{datas.docFileSize}}k<el-divider direction="vertical"></el-divider></li>
+                      <li class="no-line">{{datas.uploadDate | dateFormatter}}上传</li>
                   </ul>
-                  <div class="coin"><span>200</span>剑鱼币</div>
+                  <div class="coin"><i class="el-icon-jy-iconJianYu"></i><span>{{datas.price}}</span></div>
               </div>
               <div class="buyed" v-if="buyed">您已兑换过该文档，可直接下载</div>
-              <div class="buyed no-buyed" v-else>剑鱼币余额不足，现有 50 剑鱼币，还需 150 剑鱼币，请先充值</div>
+              <div class="buyed no-buyed" v-else-if="datas.price > coinNum && !buyed">剑鱼币余额不足，现有 {{coinNum}} 剑鱼币，还需 {{datas.price - coinNum}} 剑鱼币，请先充值</div>
+              <el-divider class="heng-line" v-else></el-divider>
               <div class="load-doc">
-                  <el-button type="primary">下载文档</el-button>
+                  <el-button type="primary">{{btnName}}</el-button>
                   <div class="icons">
                       <el-tooltip placement="bottom" effect="light" popper-class="f-share">
                           <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
@@ -29,7 +30,7 @@
                               <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
                           </div>
                       </el-tooltip>
-                      <span class="spa1 spa2" @click="collectd=!collectd"><i :class="collectd?'el-icon-jy-weiguanzhu':'el-icon-jy-guanzhu'"></i>收藏</span>
+                      <span class="spa1 spa2" @click="shoucang"><i :class="collectd==1?'el-icon-jy-guanzhu':'el-icon-jy-weiguanzhu'"></i>收藏</span>
                       <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
                           <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
                       </el-tooltip>
@@ -38,18 +39,19 @@
           </div>
           <div class="middles">
               <h3>摘要</h3>
-              <p>优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要。</p>
+              <p>{{datas.docSummary}}</p>
               <div class="continue" v-show="!buyed">全文共18页，<span @click="continued">继续阅读<i class="el-icon-arrow-down"></i></span></div>
           </div>
+          <div class="head-tip" id="fixedTop" :class="{'is-fixed':fixed}">
+                <h3 v-show="fixed">
+                <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
+                <span>{{datas.docName}}</span>
+                </h3>
+                <span><i>1</i> / {{datas.docPageSize}}</span>
+          </div>
           <div class="bottoms" id="colWidth" v-show="buyed">
               <div class="page">
-                  <div class="head-tip" id="fixedCard" :class="{'is-fixed':fixed}">
-                      <h3 v-show="fixed">
-                          <i class="el-icon-jy-word"></i>
-                          <span>优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料</span>
-                      </h3>
-                      <span><i>1</i> / 8</span>
-                  </div>
+                  
                   <div class="cont-p"></div>
               </div>
               <div class="foot-tip tops">
@@ -62,101 +64,168 @@
                                   <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
                               </div>
                           </el-tooltip>
-                          <span class="spa1 spa2" @click="collectd=!collectd"><i :class="collectd?'el-icon-jy-weiguanzhu':'el-icon-jy-guanzhu'"></i>收藏</span>
+                          <span class="spa1 spa2" @click="shoucang"><i :class="collectd==1?'el-icon-jy-guanzhu':'el-icon-jy-weiguanzhu'"></i>收藏</span>
                           <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
                               <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
                           </el-tooltip>
                       </div>
-                      <el-button type="primary">下载文档</el-button>
+                      <el-button type="primary">{{btnName}}</el-button>
                   </div>
               </div>
           </div>
       </div>
       <div class="d-right">
           <div class="r-tops">
-
-          </div>
-          <div class="r-bott">
-              <h3>相关推荐</h3>
-              <div class="docs">
-                  <div class="imgs">
-                      <img src="../assets/images/123.png" alt="">
-                      <i class="el-icon-jy-word"></i>
-                  </div>
-                  <div class="conts">
-                      <h5>优化招投标市场营商环境与国企采购人主体优化招投标市场营商环境与国企采购人主体</h5>
-                      <p>贡献者：刘梅里</p>
-                      <div class="d-tip">
-                          <p>2022次下载</p>
-                          <el-divider direction="vertical"></el-divider>
-                          <p>共18页</p>
-                          <el-divider direction="vertical"></el-divider>
-                          <p>220k</p>
-                      </div>
-                      <div class="r-coin">500剑鱼币</div>
-                  </div>
-              </div>
+              <router-link v-for="item in adsUrl" :key="item.s_pic" :to="item.s_link">
+                <img :src="item.s_pic">
+              </router-link>
           </div>
       </div>
   </div>
 </template>
 
 <script>
-import { Button, Tooltip, Divider } from 'element-ui'
+import { Button, Tooltip, Divider, Message } from 'element-ui'
+import { getDetails, getAdverse, getCoin, getAdd, getRemove } from '../api/modules/detail'
 export default {
   components: {
     [Button.name]: Button,
     [Tooltip.name]: Tooltip,
-    [Divider.name]: Divider
+    [Divider.name]: Divider,
+    [Message.name]: Message
   },
   data () {
     return {
-      datas: [{ name: '招标' }, { name: '培训' }],
-      buyed: true,
-      collectd: true,
+      datas: [],
+      adsUrl: [],
+      coinNum: 0,
+      btnName: '',
+      buyed: false,
+      collectd: 0,
       offsetTop: 0,
       offsetWidth: 0,
       colWidth: 0,
       fixed: false
     }
   },
+  created () {
+    this.details()
+    this.adverse()
+    this.setTop()
+  },
   mounted () {
     // 监听滚轮
     window.addEventListener('scroll', this.initHeight)
-    this.setTop()
+    
   },
   destroyed () { // 移除监听
     window.removeEventListener('scroll', this.initHeight)
   },
   methods: {
+    details () {
+      getDetails({ docId: '123132' }).then(res => {
+        console.log(res)
+        if (res.data.error_code === 0) {
+          this.datas = res.data.data.detail
+          this.datas.tags = this.datas.tags.split(',')
+          this.buyed = !!(res.data.data.status)
+          this.collectd = res.data.data.docCang
+        }
+      })
+      getCoin({L: true}).then(res => {
+        console.log(res)
+        if (res.data.error_code === 0) {
+          this.coinNum = res.data.data.data.points.balance
+          if (this.buyed) {
+           this.btnName = '下载文档'
+          } else {
+            if (this.coinNum < this.datas.price) {
+                this.btnName = '立即充值'
+            } else {
+                this.btnName = '立即兑换'
+            }
+          }
+        }
+      })
+      
+    },
+    adverse () {
+      getAdverse({ code: '1233456', num: 1 }).then(res => {
+        console.log(res)
+        this.adsUrl = res.data.data
+      })
+    },
     setTop () {
       this.$nextTick(() => {
         // 获取到达页面顶端的值
-        const height = document.getElementById('fixedCard')
-        this.offsetTop = height.offsetTop
+        const height = document.getElementById('fixedTop')
+        this.offsetTop = height.getBoundingClientRect().top
         console.log(this.offsetTop)
       })
     },
     initHeight () {
       // 获取页面滚动距离
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-      // 判断滚动距离是否大于元素到顶端距离
       this.fixed = !!(scrollTop > this.offsetTop && this.buyed)
     },
+    shoucang () {
+      if (this.collectd === 0) {
+        getAdd({ docId: '111' }).then(res => {
+          console.log(res)
+          if (res.data.error_code === 0) {
+            this.collectd = 1
+            Message({
+              message: '收藏成功',
+              type: 'success'
+            })
+          }
+        })
+      } else {
+        getRemove({ docId: '111' }).then(res => {
+          console.log(res)
+          if (res.data.error_code === 0) {
+            this.collectd = 0
+            Message({
+              message: '取消收藏',
+              type: 'warning'
+            })
+          }
+        })
+      }
+    },
     continued () {
       // this.buyed = !this.buyed;
       // this.setTop();
+    },
+    fileType (val) {
+      if (val === 1) {
+        return 'word'
+      } else if (val === 2) {
+        return 'pdf'
+      } else if (val === 3) {
+        return 'excel'
+      } else if (val === 4) {
+        return 'ppt'
+      } else if (val === 5) {
+        return 'txt'
+      } else {
+        return ''
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@include diy-icon('pdf', 24);
+@include diy-icon('word', 24);
+@include diy-icon('excel', 24);
+@include diy-icon('ppt', 24);
 @include diy-icon('share', 18);
 @include diy-icon('jubao', 18);
 @include diy-icon('weiguanzhu', 18);
 @include diy-icon('guanzhu', 18);
-@include diy-icon('word', 24);
+@include diy-icon('iconJianYu', 24);
 
 .c-details {
   width: 1200px;
@@ -193,11 +262,12 @@ export default {
                   flex-direction: initial;
                   align-items: center;
                   li {
+                      display: flex;
                       list-style-type: none;
+                      align-items: center;
                   }
                   .tags {
-                      width: 40px;
-                      height: 22px;
+                      padding: 2px 8px;
                       border-radius: 4px;
                       background: rgba(44, 167, 227, 0.08);
                       color: #2cb7ca;
@@ -216,13 +286,12 @@ export default {
                   }
               }
               .coin {
+                  display: flex;
+                  align-items: center;
                   span {
-                      font-size: 24px;
-                      margin-right: 4px;
+                      font-size: 20px;
+                      color: #FF3A20;
                   }
-                  color: rgba(44,183,202,1);
-                  font-size: 12px;
-                  line-height: 20px;
               }
           }
           .buyed {
@@ -239,6 +308,10 @@ export default {
               background: rgba(255,58,32,0.05)!important;
               color: rgb(255,58,32)!important;
           }
+          .heng-line {
+            margin: 8px 0;
+            background-color: #ECECEC;
+          }
           .load-doc {
               height: 52px;
               display: flex;
@@ -308,59 +381,59 @@ export default {
               }
           }
       }
+      .head-tip {
+            width: 920px;
+            height: 42px;
+            background: #fcfcfc;
+            // filter:alpha(opacity=80); //IE
+            // opacity: 0.8;   //Chrome
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 0 40px;
+            border-bottom: 1px solid #F2F2F4;
+            h3 {
+                display: flex;
+                align-items: center;
+                span {
+                    width: 700px;
+                    color: #686868;
+                    font-weight: 500;
+                    font-size: 16px;
+                    line-height: 24px;
+                    overflow: hidden;
+                    text-overflow:ellipsis;
+                    white-space: nowrap;
+                }
+                i {
+                    margin-right: 8px;
+                }
+            }
+            span {
+                color: #686868;
+                font-size: 14px;
+                i {
+                    display: inline-block;
+                    font-style: normal;
+                    width: 22px;
+                    height: 22px;
+                    line-height: 24px;
+                    text-align: center;
+                    border-radius: 2px;
+                    background: #FFFFFF;
+                    border: 1px solid #ECECEC;
+                }
+            }
+        }
+        .is-fixed {
+            position: fixed;
+            top: 0;
+            justify-content: space-between;
+        }
       .bottoms {
           display: flex;
           flex-direction: column;
           .page {
-              .head-tip {
-                  width: 920px;
-                  height: 42px;
-                  background: #fcfcfc;
-                  // filter:alpha(opacity=80); //IE
-                  // opacity: 0.8;   //Chrome
-                  display: flex;
-                  justify-content: flex-end;
-                  align-items: center;
-                  padding: 0 40px;
-                  border-bottom: 1px solid #F2F2F4;
-                  h3 {
-                      display: flex;
-                      align-items: center;
-                      span {
-                          width: 700px;
-                          color: #686868;
-                          font-weight: 500;
-                          font-size: 16px;
-                          line-height: 24px;
-                          overflow: hidden;
-                          text-overflow:ellipsis;
-                          white-space: nowrap;
-                      }
-                      i {
-                          margin-right: 8px;
-                      }
-                  }
-                  span {
-                      color: #686868;
-                      font-size: 14px;
-                      i {
-                          display: inline-block;
-                          font-style: normal;
-                          width: 22px;
-                          height: 22px;
-                          line-height: 24px;
-                          text-align: center;
-                          border-radius: 2px;
-                          background: #FFFFFF;
-                          border: 1px solid #ECECEC;
-                      }
-                  }
-              }
-              .is-fixed {
-                  position: fixed;
-                  top: 0;
-                  justify-content: space-between;
-              }
               .cont-p {
                   height: 1248px;
                   background: #fff;
@@ -389,76 +462,16 @@ export default {
       width: 264px;
       margin-left: 16px;
       .r-tops {
+          overflow: hidden;
           min-height: 456px;
           border-radius: 4px;
-          background: #c4c4c4;
-      }
-      .r-bott {
-          min-height: 448px;
-          border-radius: 4px;
-          background: #fff;
-          margin-top: 16px;
-          padding: 15px 12px;
-          h3 {
-              color: #686868;
-              font-size: 16px;
-              line-height: 24px;
-              font-weight: 500;
-              margin-bottom: 13px;
+        //   background: #c4c4c4;
+          img {
+              width: 100%;
+              cursor: pointer;
           }
-          .docs {
-              display: flex;
-              .imgs {
-                  position: relative;
-                  border-radius: 4px;
-                  border: 1px solid #ECECEC;
-                  img {
-                      width: 78px;
-                      height: 112px;
-                      border: 0;
-                  }
-                  i {
-                      position: absolute;
-                      right: 0;
-                      bottom: 0;
-                  }
-              }
-              .conts {
-                  margin-left: 8px;
-                  h5 {
-                      font-size: 14px;
-                      line-height: 24px;
-                      font-weight: 500;
-                      display: -webkit-box;
-                      -webkit-line-clamp:2;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      -webkit-box-orient: vertical;
-                  }
-                  p {
-                      color: #999999;
-                      font-size: 12px;
-                      line-height: 20px;
-                  }
-                  .d-tip {
-                      display: flex;
-                      flex-direction: initial;
-                      align-items: center;
-                      .el-divider--vertical {
-                          height: 0.8em;
-                          margin: 0 2px;
-                      }
-                      p {
-                          padding: 0 2px;
-                      }
-                  }
-                  .r-coin {
-                      color: #2CB7CA;
-                      font-size: 14px;
-                      line-height: 24px;
-                      margin-top: 2px;
-                  }
-              }
+          img:not(:last-child) {
+              margin-bottom: 5px;
           }
       }
   }