判断文件类型

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">
           支付方式
@@ -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 rgba($color: #000000, $alpha: 0.1);
-          .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,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALUSURBVHgB7ZmvcxpBFMff2+XC1GT6B5yojkocAlMTXYHAtqKazkRUVaAqmCk6IrEViNRGVUTEtQodwR/AoMrAvdf39g5COxP2cixLZ3qf4dhd2GH2u7xfewdQU1NTc0iwzCTufXwF1l4zwKmMXsKekUXd/Mrow4vh54cSc7eji2drf8RY+F9M5xmd+UQ0wIc1X4rFjxYN26clzWCPNAyllrAn3U7T4rW0r7fNN+BBzOaNtpnh4b4XryzJTBZk+/kIT33zvQI2fxgiQWa9UV6zLS3gX6UWcGiiCDBkjpvAX+V6kOvuCLgDgYgiIDHZJ2laxTCV5DMIJSKSCeFJ0VlHMnwUtBORBLAKmM0B21CIYOYgYTmmE88Sdrue6oAsjCAAsQRoYkoN8qAYj0Ilxlg+sFqs7v5EayoIRCwfGOcNzKSm6oasqaImMkLohq6p9iqgSGBq9y7ms+Hg1az/PLCFRMIjEpwAcgqME0axdeTZAnDcyKSut3wp0zSE6q6nhuBc2isISGUBR0w9RDl4uP8Qixe775osO23cYe8Y8gh0L1cHAYMLqGxCbvE5E2LsSmIaPn4pC0dQx9WdVxGrsqGlZgUB2cUHxkXr4vuGoHsVJFlXr7b25TNNWs55E7scqHlBICoLIICL1aLEcnRX1wtfoDMZh/blswsVw4xX4ivn1uKdOncIIZV9QB1VmrYewteh0XOPY8lmmGD2rhh2REgLGfsL5FuoyM5h9DlxXc+6G77iTNAgXSbsnLsS0U9kS25oFHK1EeTRSUUMoCLRBei/IL7yHv6MTpUT3EHOxOrYxEZFTLQ+kuwxhIrslIl3IXdcvC13d/Zp6rsSh+Z/EIBTNzFwDbON52ToEgLop77rvZ2QNcxT6EZJhs7rKqZvvvneKIQZv2Vr9AGHpv6OLUrmvWGyVW86J+h5p/smoDwhwSw7k+4NxEFMFr+XeTpTU1NTc3h+Az+LEb50vZWiAAAAAElFTkSuQmCC) 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{

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;
@@ -265,11 +273,6 @@ export default {
                 position: absolute;
                 right: 0;
                 bottom: 0;
-                display: flex;
-                width: 24px;
-                height: 24px;
-                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALUSURBVHgB7ZmvcxpBFMff2+XC1GT6B5yojkocAlMTXYHAtqKazkRUVaAqmCk6IrEViNRGVUTEtQodwR/AoMrAvdf39g5COxP2cixLZ3qf4dhd2GH2u7xfewdQU1NTc0iwzCTufXwF1l4zwKmMXsKekUXd/Mrow4vh54cSc7eji2drf8RY+F9M5xmd+UQ0wIc1X4rFjxYN26clzWCPNAyllrAn3U7T4rW0r7fNN+BBzOaNtpnh4b4XryzJTBZk+/kIT33zvQI2fxgiQWa9UV6zLS3gX6UWcGiiCDBkjpvAX+V6kOvuCLgDgYgiIDHZJ2laxTCV5DMIJSKSCeFJ0VlHMnwUtBORBLAKmM0B21CIYOYgYTmmE88Sdrue6oAsjCAAsQRoYkoN8qAYj0Ilxlg+sFqs7v5EayoIRCwfGOcNzKSm6oasqaImMkLohq6p9iqgSGBq9y7ms+Hg1az/PLCFRMIjEpwAcgqME0axdeTZAnDcyKSut3wp0zSE6q6nhuBc2isISGUBR0w9RDl4uP8Qixe775osO23cYe8Y8gh0L1cHAYMLqGxCbvE5E2LsSmIaPn4pC0dQx9WdVxGrsqGlZgUB2cUHxkXr4vuGoHsVJFlXr7b25TNNWs55E7scqHlBICoLIICL1aLEcnRX1wtfoDMZh/blswsVw4xX4ivn1uKdOncIIZV9QB1VmrYewteh0XOPY8lmmGD2rhh2REgLGfsL5FuoyM5h9DlxXc+6G77iTNAgXSbsnLsS0U9kS25oFHK1EeTRSUUMoCLRBei/IL7yHv6MTpUT3EHOxOrYxEZFTLQ+kuwxhIrslIl3IXdcvC13d/Zp6rsSh+Z/EIBTNzFwDbON52ToEgLop77rvZ2QNcxT6EZJhs7rKqZvvvneKIQZv2Vr9AGHpv6OLUrmvWGyVW86J+h5p/smoDwhwSw7k+4NxEFMFr+XeTpTU1NTc3h+Az+LEb50vZWiAAAAAElFTkSuQmCC) no-repeat;
-                background-size: contain;
               }
             }
             .doc_c_right{