培训文档，文档资料代码优化

src/styles/docment.scss

@@ -0,0 +1,62 @@
+@import "@/styles/mixin.scss";
+.wrap{
+  @include wh(100%,100%);
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+.rightWrap {
+  @include flexCenter;
+  .img2 {
+    @include wh(17px, 17px);
+  }
+}
+.contentWrap{
+  @include sizingPadding(0,8px);
+  width: 100%;
+  margin-top: 20px;
+  .itemWrap{
+    margin-bottom: 16px;
+    @include wh(100%, 300px);
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+    @include sizingPadRadius(6px ,0,3px);
+    @include flexAround;
+    @include fontWeightSize(400, 12px);
+    .flexBetween{
+      @include flexColBet;
+    }
+    .common{
+      margin: 0 15px ;
+    }
+    .imgWrap{
+      @include wh(100%,200px);
+      position: relative;
+      img{
+        @include wh(100%,200px);
+      }
+      .name{
+        position: absolute;
+        left: 30px;
+        bottom: 30px;
+        @include fontWeightSize(bold,14px);
+        color: #FFFFFF;
+      }
+    }
+    .left{
+      color: red;
+      @include fontWeightSize(bold,15px);
+    }
+  }
+
+}
+.empty{
+  @include flexTwoCenter;
+  height:calc(100% - 86px);
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}

src/styles/mixin.scss

@@ -31,6 +31,10 @@
     @include flexColumn;
     justify-content: space-between;
 }
+@mixin flexAround(){
+    @include flexColumn;
+    justify-content: space-around;
+}
 @mixin flexColBet(){
     display: flex;
     justify-content: space-between;
@@ -42,4 +46,25 @@
 @mixin flexBetCen{
     @include flexColBet;
     align-items: center;
+}
+@mixin flexTwoCenter(){
+    @include flexCenter;
+    justify-content: center;
+}
+@mixin colorOpa($col,$alpha){
+    color: $col;
+    opacity: $alpha;
+}
+@mixin radiusSizing($rad){
+    border-radius: $rad;
+    box-sizing: border-box;
+}
+@mixin sizingPadding($tb,$lr){
+    box-sizing: border-box;
+    padding: $tb $lr;
+}
+@mixin sizingPadRadius( $tb,$lr,$rad){
+    box-sizing: border-box;
+    padding: $tb $lr;
+    border-radius: $rad;
 }

src/utils/myMixins.js

@@ -34,6 +34,21 @@ export const myMixins = {
         window.android.sendMessage("goBack");
       }
     },
+    goH5Detail(item){//h5传参到app文档资料，培训文档
+      let data = {
+        "action": "goTraining",
+        "params": {
+          "id": item.id,
+        }
+      };
+      let u = navigator.userAgent;
+      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isiOS){
+        window.webkit.messageHandlers.nativeObject.postMessage(data);
+      }else {
+        window.android.sendMessage("articleId=" + item.id);
+      }
+    },
     h5GoBack(){
       this.$router.back();
     },

src/views/documentView/docmentList.vue

@@ -50,8 +50,8 @@
       </div>
     </van-pull-refresh>
  </div>
-  <div class="empty" style="display: flex;justify-content: center;align-items: center;height:calc(100% - 86px);background-color: #FAFAFA" v-show="showEmpty">
+  <div class="empty"  v-show="showEmpty">
-    <img src="@/assets/empty.png"  style="width: 100%"/>
+    <img src="@/assets/empty.png"  />
   </div>
 </div>
 </template>
@@ -80,21 +80,6 @@ export default {
     this.getList()
   },
   methods:{
-    goH5Detail(item){
-      let data = {
-        "action": "goTraining",
-        "params": {
-          "id": item.id,
-        }
-      };
-      let u = navigator.userAgent;
-      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-      if(isiOS){
-        window.webkit.messageHandlers.nativeObject.postMessage(data);
-      }else {
-        window.android.sendMessage("articleId=" + item.id);
-      }
-    },
     onRefresh() {
       this.getList()
       setTimeout(() => {
@@ -138,28 +123,13 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
-.wrap{
+@import "@/styles/docment.scss";
-  width: 100%;
-  height: 100%;
-  background-color: #F4F5F7;
-  overflow-y: auto;
-}
-.navBar{
-  margin-bottom: 46px;
-}
-.rightWrap {
-  @include flexCenter;
-  .img2 {
-    @include wh(17px, 17px)
-  }
-}
 .tab_wrap {
   @include fontWeightSize(bolder, 15px);
   display: flex;
   justify-content: space-around;
   padding: 5px 0 5px 0;
-  color: #737373;
+  @include colorOpa(#737373,0.7);
-  opacity: .7;
   div {
     padding-top: 8px;
   }
@@ -167,12 +137,10 @@ export default {
     color: #3678FF;
     position: relative;
   }
-
   .active:after {
     content: '';
     display: block;
-    width: 50px;
+    @include wh(50px,3px);
-    height: 3px;
     background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
     border-radius: 2px;
     position: absolute;
@@ -181,53 +149,4 @@ export default {
     transform: translateX(-50%);
   }
 }
-
-.contentWrap{
-  padding: 0 8px;
-  width: 100%;
-  box-sizing: border-box;
-
-  .itemWrap{
-    margin-top: 16px;
-    @include wh(100%, 300px);
-    background: #FFFFFF;
-    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
-    border-radius: 3px;
-    box-sizing: border-box;
-    @include flexColumn;
-    justify-content: space-around;
-    padding: 6px 0;
-    @include fontWeightSize(400, 12px);
-    .flexBetween{
-      @include flexColBet;
-    }
-    .common{
-      margin: 0 15px ;
-    }
-    .imgWrap{
-      width: 100%;
-      height: 200px;
-      position: relative;
-      //background-color: #6C81CD;
-      img{
-        width: 100%;
-        height: 200px;
-      }
-      .name{
-        position: absolute;
-        left: 30px;
-        bottom: 30px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #FFFFFF;
-      }
-    }
-    .left{
-      color: red;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-
-}
 </style>

src/views/documentView/trainDocment.vue

@@ -44,8 +44,8 @@
       </div>
     </van-pull-refresh>
 </div>
-  <div class="empty" style="display: flex;justify-content: center;align-items: center;height:calc(100% - 46px);background-color: #FAFAFA" v-show="showEmpty">
+  <div class="empty" v-show="showEmpty">
-    <img src="@/assets/empty.png"  style="width: 100%"/>
+    <img src="@/assets/empty.png" />
   </div>
 </div>
 </template>
@@ -67,32 +67,12 @@ export default {
       show:false,
       showEmpty:false,
       isLoading:false,
-      userId:'',
-      supplierId:''
     }
   },
   mounted() {
-    const urlParams = new URLSearchParams(window.location.search);
-    this.supplierId = urlParams.get('supplierId');
-    this.userId = urlParams.get('userId');
     this.getList();
   },
   methods:{
-    goH5Detail(item){
-      let data = {
-        "action": "goTraining",
-        "params": {
-          "id": item.id,
-        }
-      };
-      let u = navigator.userAgent;
-      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-      if(isiOS){
-        window.webkit.messageHandlers.nativeObject.postMessage(data);
-      }else {
-        window.android.sendMessage("articleId=" + item.id);
-      }
-    },
     onRefresh() {
       this.getList()
       setTimeout(() => {
@@ -113,81 +93,16 @@ export default {
       }else {
         this.showEmpty = false
       }
-      console.log(res)
-
     },
     initShow(){
       this.keyword= '',
-          this.getList()
+      this.getList()
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
 @import "@/styles/common.scss";
 @import "@/styles/mixin.scss";
-.wrap{
+@import "@/styles/docment.scss";
-  width: 100%;
-  height: 100%;
-  background-color: #F4F5F7;
-  overflow-y: auto;
-}
-.navBar{
-  margin-bottom: 46px;
-}
-.rightWrap {
-  @include flexCenter;
-  .img2 {
-    @include wh(17px, 17px)
-  }
-}
-.contentWrap{
-  padding: 0 8px;
-  width: 100%;
-  box-sizing: border-box;
-  margin-top: 20px;
-  .itemWrap{
-    margin-bottom: 16px;
-    @include wh(100%, 300px);
-    background: #FFFFFF;
-    box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
-    border-radius: 3px;
-    box-sizing: border-box;
-    @include flexColumn;
-    justify-content: space-around;
-    padding: 6px 0;
-    @include fontWeightSize(400, 12px);
-    .flexBetween{
-      @include flexColBet;
-    }
-    .common{
-      margin: 0 15px ;
-    }
-    .imgWrap{
-      width: 100%;
-      height: 200px;
-      position: relative;
-      //background-color: #6C81CD;
-      img{
-        width: 100%;
-        height: 200px;
-      }
-      .name{
-        position: absolute;
-        left: 30px;
-        bottom: 30px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #FFFFFF;
-      }
-    }
-    .left{
-      color: red;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-
-}
 </style>