feat:增加移动端付费精品、会员免费标签

jydocs-mobile/src/components/docs-card/Card.vue

@@ -41,7 +41,8 @@
           <span class="f-l-item subinfo-item card-time" :class="index === subInfo.length - 1 ? 'last' : ''"
             v-for="(item, index) in subInfo" :key="index">{{ item }}</span>
           <slot name="leftEnd">
-            <div class="jydocs_vip" v-if="isVip">会员免费</div>
+           <span class="type-tag"
+            :class="productType === 2 ? 'boutique' : 'free'">{{ productType === 2 ? '付费精品' : '会员免费' }}</span>
           </slot>
         </div>
         <div class="c-f-right flex-r-c">
@@ -76,6 +77,7 @@ export default class DocsCard extends Vue {
   @Prop({ default: '' }) uploader?: string | undefined;
   @Prop({ default: -1 }) price?: string | number;
   @Prop({ default: false }) isVip?: boolean;
+  @Prop({ default: 1 }) productType?: number;
   @Prop({
     type: Array,
     default () {
@@ -120,16 +122,20 @@ export default class DocsCard extends Vue {
   box-sizing: border-box;
   background-color: #fff;
 
-  .jydocs_vip {
-    background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
-    width: 50px;
-    height: 18px;
-    border-radius: 4px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
+  .type-tag {
+    padding: 4px 5px;
+    border-radius: 2px;
     font-size: 10px;
+    white-space: nowrap;
+
+    &.free {
+      background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
+      color: #fff;
+    }
+    &.boutique{
+      background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
+      color: #C26F33;
+    }
   }
 
   &.oneline {
@@ -184,7 +190,11 @@ export default class DocsCard extends Vue {
 
     .subinfo-item {
       position: relative;
-      margin-right: 14px;
+      margin-right: 16px;
+
+      &.last {
+        margin-right: 8px;
+      }
 
       &.noline:after,
       &.last:after {

jydocs-mobile/src/views/Home.vue

@@ -100,7 +100,10 @@
                 <div class="mini-img-group">
                   <img :src="item.previewImgId || mr_image" alt="">
                   <van-icon :name="docTypeIcon(item.docFileType)" />
-                  <div class="vip-ic" v-if="item.productType === 1">会员免费</div>
+                  <span class="type-tag"
+                        :class="item.productType === 2 ? 'boutique' : 'free'">
+                    {{ item.productType === 2 ? '付费精品' : '会员免费' }}
+                  </span>
                 </div>
                 <div class="flex-c-c">
                   <div class="flex">
@@ -625,19 +628,24 @@ export default class extends Vue {
             height: 100%;
           }
 
-          .vip-ic {
+          .type-tag {
             position: absolute;
             left: 0;
             top: 0;
-            background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
-            width: 50px;
-            height: 18px;
-            border-radius: 4px 0px 4px 0px;
-            color: #fff;
+            border-radius: 4px 0 4px 0;
             font-size: 10px;
+            height: 18px;
             display: flex;
-            justify-content: center;
             align-items: center;
+            padding: 0 5px;
+            &.free {
+              background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
+              color: #fff;
+            }
+            &.boutique{
+              background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
+              color: #C26F33;
+            }
           }
 
           i {

jydocs-mobile/src/views/Search.vue

@@ -45,7 +45,7 @@
         class="more-list calc-height-1px" ref="vanList">
         <div>
           <Card v-for="(item, index) in listState.list" :key="index" :title="item.docName" :desc="item.docSummary"
-            :docType="item.docFileType" :isVip="item.productType === 1" :subInfo="calcSubInfo(item)"
+            :docType="item.docFileType" :productType="item.productType" :subInfo="calcSubInfo(item)"
             @onClick="toDocDetail(item)" />
         </div>
         <Empty v-if="listState.list.length === 0 && listState.loaded && !listState.loading" style="background: #fff;">

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

@@ -4,7 +4,11 @@
       <div class="details-head">
         <div class="top-title-group flex-r-c">
           <van-icon :name="'diy-' + fileType(detailData.docFileType)"></van-icon>
-          <div class="flex">{{ detailData.docName }}</div>
+          <div class="flex">
+            <span class="docName">{{ detailData.docName}}</span>
+            <span class="type-tag"
+                  :class="detailData.productType === 2 ? 'boutique' : 'free'">{{ detailData.productType === 2 ? '付费精品' : '会员免费' }}</span>
+          </div>
         </div>
         <div class="details-tags">
           <div class="tag-item"><span>{{ detailData.viewTimes || 0 }}</span>次浏览</div>
@@ -917,10 +921,30 @@ export default class extends Vue {
     line-height: 24px;
     letter-spacing: 0px;
     text-align: left;
-
     .van-icon {
       margin-right: 8px;
     }
+    .docName {
+      margin-right:5px;
+    }
+    .type-tag {
+      box-sizing: border-box;
+      border-radius: 2px;
+      font-size: 10px;
+      white-space: nowrap;
+      padding: 4px 5px;
+      margin-bottom: 2px;
+      vertical-align: middle;
+
+      &.free {
+        background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
+        color: #fff;
+      }
+      &.boutique{
+        background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
+        color: #C26F33;
+      }
+    }
   }
 
   .details-tags {

jydocs-mobile/src/views/user/Library.vue

@@ -57,7 +57,7 @@
           :offset="myCollectionListState.offset" @load="onLoad" class="more-list" ref="vanList">
           <div>
             <Card v-for="(item, index) in myCollectionListState.list" :key="index" :title="item.DocName"
-              :desc="item.DocSummary" :docType="item.DocFileType" :isVip="item.productType === 1"
+              :desc="item.DocSummary" :docType="item.DocFileType" :productType="item.productType"
               :subInfo="calcSubInfoForColl(item)" @onClick="toDocDetail(item)">
             </Card>
           </div>