Merge branch 'master' of http://192.168.3.207:10080/jianyu/jy-docs

jydocs-mobile/src/views/details/details.vue

@@ -285,7 +285,7 @@ export default class extends Vue {
       if (this.coins.balance < this.detailData.price) {
         ;(this.$refs.charge as any).show = true
       } else {
-        this.$router.replace('/purchase/' + this.detailData.docId)
+        this.$router.push('/purchase/' + this.detailData.docId)
       }
     }
   }

jydocs-mobile/src/views/purchase/purchase.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="purchase-page">
     <div class="j-main exchange_main">
-      <div class="docs_infor">
-        <div class="docs_left">
-          <img :src="response.previewImgId" class="docs_img" alt="">
-          <span class="icon_word"></span>
-        </div>
-        <div class="docs_right">
-          <div class="docs_title ellipsis-2">
-            {{response.docName}}
-          </div>
-          <div class="docs_other">
-            <!-- <div class="docs_auther">贡献者：张三</div> -->
-            <div class="docs_download">
-              <span>{{response.downTimes}}次下载</span> | 共{{response.docPageSize}}页 | {{response.docFileSize}}
-            </div>
-            <div class="docs_money"><span class="docs_num">{{response.price}}</span> 剑鱼币</div>
-          </div>
-        </div>
-      </div>
+      <Card
+        cardType="image"
+        :title="response.docName"
+        :desc="response.docSummary"
+        :imageSrc="response.previewImgId"
+        :docType="response.docFileType"
+        :subInfo="calcSubInfo(response)"
+      >
+        <template slot="price">
+          <span class="docs_money">
+            <span class="docs_num">{{ response.price }}</span>
+            <span> 剑鱼币</span>
+          </span>
+        </template>
+      </Card>
       <div class="rechargehave_pay_content">
         <div class="pay_title">
           支付方式
@@ -59,7 +56,7 @@
         </div>
       </div>
       <div class="readly">
-        <van-checkbox v-model="checked" checked-color="#2ABED1" @click="checkBtn()">我已阅读并同意<a href="javascript:;" class="clause" @click.stop="clause()">《剑鱼文库线上购买及服务条款》</a><a href="javascript:;" class="clause" @click.stop="clause2()">《剑鱼标讯产品与服务线上购买服务条款》</a></van-checkbox>
+        <van-checkbox v-model="checked" checked-color="#2ABED1" icon-size="20px" @click="checkBtn()">我已阅读并同意<a href="javascript:;" class="clause" @click.stop="clause()">《剑鱼文库线上购买及服务条款》</a><a href="javascript:;" class="clause" @click.stop="clause2()">《剑鱼标讯产品与服务线上购买服务条款》</a></van-checkbox>
       </div>
       <div class="apply_footer">
         <button class="apply_button" :disabled="!this.btnChecked" @click="exchange()">确定兑换</button>
@@ -70,8 +67,9 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Checkbox, CheckboxGroup, Field, CellGroup, Form } from 'vant'
+import { Checkbox, CheckboxGroup, Field, CellGroup, Form, Icon } from 'vant'
 import { mapActions } from 'vuex'
+import Card from '@/components/docs-card/Card.vue'
 import { formatSize } from '../../utils/globalFunctions'
 @Component({
   name: 'purchase-page',
@@ -80,7 +78,9 @@ import { formatSize } from '../../utils/globalFunctions'
     [CheckboxGroup.name]: CheckboxGroup,
     [Field.name]: Field,
     [Form.name]: Form,
-    [CellGroup.name]: CellGroup
+    [CellGroup.name]: CellGroup,
+    [Icon.name]: Icon,
+    Card
   },
   methods: {
     ...mapActions({
@@ -102,6 +102,7 @@ export default class extends Vue {
   regPhoneExg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
   $router: any
   $env: any
+
   response = {
     docName: '',
     price: '',
@@ -109,6 +110,7 @@ export default class extends Vue {
     docFileSize: '',
     docPageSize: '',
     previewImgId: '',
+    docFileType: '',
     balance: ''
   }
 
@@ -155,25 +157,34 @@ export default class extends Vue {
     }
   }
 
+  calcSubInfo (item: any) {
+    const { downTimes, docPageSize, docFileSize } = item
+    const subInfoArr = []
+    if (downTimes !== undefined) {
+      subInfoArr.push(`${downTimes}次下载`)
+    }
+    if (docPageSize !== undefined) {
+      subInfoArr.push(`共${docPageSize}页`)
+    }
+    if (docFileSize !== undefined) {
+      subInfoArr.push(formatSize(docFileSize))
+    }
+    return subInfoArr
+  }
+
   // 文档信息
   async getWordInfor () {
     this.getDetails({ docId: this.sessioninfor.query }).then((res: any) => {
       console.log(res)
       const item = res.data.detail
       if (res.error_code === 0) {
-        this.response.docName = item.docName
-        this.response.price = item.price
-        this.response.downTimes = item.downTimes
-        this.response.docFileSize = formatSize(item.docFileSize)
-        this.response.docPageSize = item.docPageSize
-        this.response.previewImgId = item.previewImgId
+        this.response = item
       }
     })
 
     this.getListDetail({ B: true }).then((res: any) => {
       console.log(res)
       if (res.error_code === 0) {
-        console.log(111)
         this.response.balance = res.data.points.balance
       }
     })
@@ -219,64 +230,19 @@ export default class extends Vue {
   .purchase-page{
     box-sizing: border-box;
     background: #F5F6F7;
+    .d-title {
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 20px;
+    }
     .exchange_main{
-      .docs_infor{
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        padding: 20px 16px;
-        background: #ffffff;
-        .docs_left{
-          position: relative;
-          width: 100px;
-          height: 124px;
-          border-radius: 4px;
-          border: 1px solid #000000;
-          .docs_img{
-            width: 100%;
-            height: 100%;
-          }
-          .icon_word{
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            display: flex;
-            width: 24px;
-            height: 24px;
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJASURBVHgB7Zm/TuQwEMY/J5x016B7gC2oqbju2muuuOoKClooqEGiodliGxokqLdYXoACWireACpqin0ARAMCEvONcXaXf+sQjTdI+CclTuKJM+NMnBkbSCQSiTYxdYS+79gFCh7wcInbT8TG4MhabN5um8uwaACv/BlmofhzrizwK2TEHAIYgz1YKm9wmN2hV2S4RkRMhg6LDT5v2b/1P9PkM4Sw+O/KEvuxlXePKzEsHtDzp0sh+bABEw1jRmTjjgq6bW0DPivJgLZJBrRN8D/wHibHZXVsCyygARptJBdqm2RA20QzwAVlOfosd/MS84hE41EoBKPYPotFCdjtN5YF/iECUd6A9LoV5T1yLNcQAXUDqKiL5V9XML6XOmVUDfDKj5Sk9wzY+4OxAOsyrEERtW+AMfxfO6E8FT/h3/UpMcmdO/2WQ34bXZ5fs+4QCqi8ASq+WJpnPj7M77FVnRT3WKdBFyN5oCv3QAEVA9j7fbpLNVQOqeHKZPopGZaxWHd1cK41L/dAAa1voONLp/xb6ae7JnUYGdaBAqofcVnSVabkzlLHbQWKqBnAiage3eQiJOdltqCEjgEG+5x2GdQVdyOQ3KNAcwMqBVjah48r4+6ZaAMNCU4t/tihc6B5xtSUKlu72TZTdUzhdNt8CQOuZBczKXmJn6GuRR0DzmVXzqH7kYab4juqCgqPQ/LBaJRD0Kpb4HiK8Zc5OkSlHLcvCxzB/CH4BmSFRFZKGG0eYTaI4qd1VmcSiUSifR4BOQuhbc3lgT4AAAAASUVORK5CYII=) no-repeat;
-            background-size: contain;
-          }
-        }
-        .docs_right{
-          flex: 1;
-          margin-left: 16px;
-          .docs_title{
-            color: #171826;
-            font-weight: bold;
-            font-size: 14px;
-            line-height: 20px;
-            letter-spacing: 0px;
-            text-align: left;
-          }
-          .docs_other{
-            margin-top: 22px;
-            color: #9B9CA3;
-            font-weight: medium;
-            font-size: 12px;
-            line-height: 18px;
-            letter-spacing: 0px;
-            text-align: left;
-            .docs_download{
-              line-height: 18px;
-            }
-            .docs_money{
-              margin-top: 2px;
-              line-height: 24px;
-              .docs_num{
-                font-size: 16px;
-              }
-            }
-          }
+      .docs_money{
+        margin-top: 2px;
+        line-height: 24px;
+        font-size: 14px;
+        color: #9B9CA3;
+        .docs_num{
+          font-size: 16px;
         }
       }
       .rechargehave_pay_content{
@@ -400,14 +366,11 @@ export default class extends Vue {
           display: flex;
           align-items: center;
           height: 32px;
-          font-size:18px;
+          // font-size:18px;
         }
         .van-checkbox__label{
           margin-left: 12px;
         }
-        .van-checkbox__icon--round .van-icon{
-          border-radius: 50%;
-        }
       }
     }
   }

jydocs-mobile/src/views/purchase/purchasesuccess.vue

@@ -42,9 +42,11 @@ import { mapMutations } from 'vuex'
 
 @Component({
   name: 'test',
-  ...mapMutations({
-    clearLibState: 'main/clearMyLibState'
-  })
+  methods: {
+    ...mapMutations({
+      clearLibState: 'main/clearMyLibState'
+    })
+  }
 })
 export default class extends Vue {
   clearLibState: any
@@ -60,6 +62,13 @@ export default class extends Vue {
     currency: 0
   }
 
+  beforeRouteLeave (to, from, next) {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+    next()
+  }
+
   created () {
     this.query = location.href.split('/')[location.href.split('/').length - 1] // 获取num
     this.setCountDown()
@@ -88,12 +97,7 @@ export default class extends Vue {
         } else {
           clearInterval(this.timer)
           this.timer = null
-          this.$router.replace({
-            name: 'details',
-            params: {
-              id: this.payinfor.docId
-            }
-          })
+          this.$router.back()
         }
       }, 1000)
     }

jydocs-pc/src/views/purchase/purchase.vue

@@ -17,7 +17,7 @@
           <div class="doc_content_infor">
             <div class="doc_c_left">
               <img :src="response.previewImgId" class="doc_c_img" alt="" />
-              <span class="icon_word"></span>
+              <span class="icon_word" :class="docTypeIcon"></span>
             </div>
             <div class="doc_c_right">
               <div class="doc_c_infor">
@@ -73,7 +73,7 @@
 <script>
 import { checkbox, input } from 'element-ui'
 import { getDocPays, getJYchannel, getDetails, getBindPhone } from '../../api/modules/purchase'
-import { formatSize } from '../../utils/globalFunctions'
+import { docTypeConvert, formatSize } from '@/utils/'
 
 export default {
   name: 'purchasePage',
@@ -96,7 +96,8 @@ export default {
         docPageSize: '',
         previewImgId: '',
         docSummary: '',
-        channel: ''
+        channel: '',
+        docFileType: ''
       },
       sessioninfor: {
         query: '',
@@ -111,6 +112,12 @@ export default {
     this.sessioninfor.query = location.href.split('/')[location.href.split('/').length - 1] // 获取id
     this.getWordDetail()
   },
+  computed: {
+    docTypeIcon () {
+      const t = docTypeConvert(this.response.docFileType)
+      return `el-icon-jy-${t}`
+    },
+  },
   methods: {
     // 文档信息
     async getWordDetail () {
@@ -126,6 +133,7 @@ export default {
           this.response.docPageSize = item.docPageSize
           this.response.previewImgId = item.previewImgId
           this.response.docSummary = item.docSummary
+          this.response.docFileType = item.docFileType
         }
       })
       getJYchannel({ B: true }).then((res) => {
@@ -189,12 +197,12 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .purchasePage{
-    // width: 100%;
-    // height: auto;
-    // background: #F5F5FB;
-    // overflow: hidden;
+    @include diy-icon("word");
+    @include diy-icon("excel");
+    @include diy-icon("ppt");
+    @include diy-icon("pdf");
     .icon_jianyu{
       display: flex;
       width: 24px;
@@ -254,6 +262,9 @@ export default {
               margin-right: 21px;
               width: 110px;
               height: 150px;
+              border-radius: 4px;
+              background: #FFFFFF;
+              border: 1px solid #ECECEC;
               .doc_c_img{
                 width: 100%;
                 height: 100%;
@@ -262,11 +273,6 @@ export default {
                 position: absolute;
                 right: 0;
                 bottom: 0;
-                display: flex;
-                width: 24px;
-                height: 24px;
-                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJASURBVHgB7Zm/TuQwEMY/J5x016B7gC2oqbju2muuuOoKClooqEGiodliGxokqLdYXoACWireACpqin0ARAMCEvONcXaXf+sQjTdI+CclTuKJM+NMnBkbSCQSiTYxdYS+79gFCh7wcInbT8TG4MhabN5um8uwaACv/BlmofhzrizwK2TEHAIYgz1YKm9wmN2hV2S4RkRMhg6LDT5v2b/1P9PkM4Sw+O/KEvuxlXePKzEsHtDzp0sh+bABEw1jRmTjjgq6bW0DPivJgLZJBrRN8D/wHibHZXVsCyygARptJBdqm2RA20QzwAVlOfosd/MS84hE41EoBKPYPotFCdjtN5YF/iECUd6A9LoV5T1yLNcQAXUDqKiL5V9XML6XOmVUDfDKj5Sk9wzY+4OxAOsyrEERtW+AMfxfO6E8FT/h3/UpMcmdO/2WQ34bXZ5fs+4QCqi8ASq+WJpnPj7M77FVnRT3WKdBFyN5oCv3QAEVA9j7fbpLNVQOqeHKZPopGZaxWHd1cK41L/dAAa1voONLp/xb6ae7JnUYGdaBAqofcVnSVabkzlLHbQWKqBnAiage3eQiJOdltqCEjgEG+5x2GdQVdyOQ3KNAcwMqBVjah48r4+6ZaAMNCU4t/tihc6B5xtSUKlu72TZTdUzhdNt8CQOuZBczKXmJn6GuRR0DzmVXzqH7kYab4juqCgqPQ/LBaJRD0Kpb4HiK8Zc5OkSlHLcvCxzB/CH4BmSFRFZKGG0eYTaI4qd1VmcSiUSifR4BOQuhbc3lgT4AAAAASUVORK5CYII=) no-repeat;
-                background-size: contain;
               }
             }
             .doc_c_right{