Merge branch 'master' of http://git.cc-lotus.info/article-system/article-mobile

src/views/service/detail.vue

@@ -23,6 +23,7 @@ import info from './parts/info.vue';
 import contact from './parts/contact.vue';
 import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapService } = createNamespacedHelpers('service');
 export default {
   name: 'index',
   props: {},
@@ -36,31 +37,7 @@ export default {
       clientHeight: '',
       // 信息详情
       form: {
-        title: '测试信息',
-        origin: '信息来源',
-        renew_time: '2021-03-31 10:00:00',
-        content: '信息内容',
-        imgUrl: [
-          {
-            name: '第一张',
-            url: require('@a/news1.jpg'),
-          },
-          {
-            name: '第一张',
-            url: require('@a/news1.jpg'),
-          },
-          {
-            name: '第一张',
-            url: require('@a/news1.jpg'),
-          },
-        ],
-        fileUrl: require('@a/video1.mp4'),
-        contact: {
-          name: '联系人',
-          phone: '17319450324',
-          email: 'guhongwei0324@163com',
-          address: '吉林省长春市朝阳区吉林省科技厅科研院1244号一号楼南小二楼',
-        },
+        contact: {},
       },
     };
   },
@@ -72,8 +49,14 @@ export default {
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search() {
-      console.log();
+    ...mapService(['fetch']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `form`, res.data);
+        }
+      }
     },
     // 返回
     upBack() {

src/views/service/index.vue

@@ -6,7 +6,7 @@
           <top topType="1" @search="search"></top>
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
-          <van-tabs v-model="active">
+          <van-tabs v-model="active" @click="changeActive">
             <van-tab title="文字">
               <list type="1" :list="oneList" @detailBtn="detailBtn"></list>
             </van-tab>
@@ -34,6 +34,8 @@ import list from './parts/list.vue';
 import top from '@/layout/common/top.vue';
 import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapService } = createNamespacedHelpers('service');
+
 export default {
   name: 'index',
   props: {},
@@ -47,69 +49,50 @@ export default {
       clientHeight: '',
       // 文章菜单
       active: 0,
+      type: 0,
       // 文字
-      oneList: [
-        {
-          title: '信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题信息标题',
-          origin: '信息来源',
-          renew_time: '2021-03-30 10:00:00',
-          read: 10000,
-        },
-        {
-          title: '信息标题',
-          origin: '信息来源',
-          renew_time: '2021-03-30 10:00:00',
-          read: 10,
-        },
-      ],
+      oneList: [],
       // 图片
-      twoList: [
-        {
-          title: '信息标题',
-          origin: '信息来源',
-          read: 10,
-          imgUrl: require('@a/news1.jpg'),
-        },
-        {
-          title: '信息标题',
-          origin: '信息来源',
-          read: 10,
-        },
-      ],
+      twoList: [],
       // 科普
-      thrList: [
-        {
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          fileUrl: require('@a/video1.mp4'),
-          origin: '不知道',
-          renew_time: '2021-03-25 21:12:44',
-          read: 10000,
-        },
-      ],
+      thrList: [],
       // 培训
-      fourList: [
-        {
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          fileUrl: require('@a/video1.mp4'),
-          origin: '不知道',
-          renew_time: '2021-03-25 21:12:44',
-          read: 10000,
-        },
-      ],
+      fourList: [],
       // 总数
       total: 0,
     };
   },
   async created() {
-    await this.search();
+    await this.changeActive();
   },
   mounted() {
     let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search({ skip = 0, limit = 10, searchName, ...info } = {}) {
-      console.log();
+    ...mapService(['query']),
+    async search({ skip = 0, limit = 5, searchName, ...info } = {}) {
+      if (searchName) info.title = searchName;
+      let res = await this.query({ skip, limit, type: this.type, ...info });
+      if (this.$checkRes(res)) {
+        if (this.type == '0') {
+          this.$set(this, `oneList`, res.data);
+          this.$set(this, `total`, res.total);
+        } else if (this.type == '1') {
+          this.$set(this, `twoList`, res.data);
+          this.$set(this, `total`, res.total);
+        } else if (this.type == '2') {
+          this.$set(this, `thrList`, res.data);
+          this.$set(this, `total`, res.total);
+        } else if (this.type == '3') {
+          this.$set(this, `fourList`, res.data);
+          this.$set(this, `total`, res.total);
+        }
+      }
+    },
+    changeActive(name) {
+      this.$set(this, `type`, name || 0);
+      this.search();
     },
     // 文章正文
     detailBtn(data) {

src/views/service/parts/contact.vue

@@ -7,16 +7,16 @@
         </el-col>
         <el-col :span="24" class="info">
           <el-col :span="24" class="name">
-            联系人：<span>{{ contactInfo.name }}</span>
+            联系人：<span>{{ contactInfo.name || '暂无' }}</span>
           </el-col>
           <el-col :span="24" class="name">
-            联系电话：<span>{{ contactInfo.phone }}</span>
+            联系电话：<span>{{ contactInfo.phone || '暂无' }}</span>
           </el-col>
           <el-col :span="24" class="name">
-            电子邮箱：<span>{{ contactInfo.email }}</span>
+            电子邮箱：<span>{{ contactInfo.email || '暂无' }}</span>
           </el-col>
           <el-col :span="24" class="name">
-            联系地址：<span>{{ contactInfo.address }}</span>
+            联系地址：<span>{{ contactInfo.address || '暂无' }}</span>
           </el-col>
         </el-col>
       </el-col>

src/views/service/parts/info.vue

@@ -16,10 +16,14 @@
         <el-col :span="24" class="two">
           {{ form.content }}
         </el-col>
-        <el-col :span="24" class="image" v-if="form.imgUrl.length > 0">
-          <el-image :src="item.url" v-for="(item, index) in form.imgUrl" :key="index"></el-image>
+        <el-col :span="24" class="image" v-if="form.imgUrl && form.imgUrl.length > 0">
+          <el-image :src="item.url" v-for="(item, index) in form.imgUrl" :key="index">
+            <div slot="error" class="image-slot">
+              <img :src="noImg" alt="" />
+            </div>
+          </el-image>
         </el-col>
-        <el-col :span="24" class="video" v-if="form.fileUrl">
+        <el-col :span="24" class="video" v-if="form.fileUrl && form.fileUrl.length > 0">
           <video
             controls="controls"
             preload="meta"
@@ -29,7 +33,7 @@
             x5-video-player-type="h5"
             x5-video-player-fullscreen="true"
             controlsList="nodownload"
-            :src="form.fileUrl"
+            :src="form.fileUrl[0].url"
             loop="loop"
           >
             <source src="movie.ogg" type="video/ogg" />
@@ -50,7 +54,7 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return { noImg: require('@a/noImg.jpg') };
   },
   created() {},
   methods: {},
@@ -98,6 +102,11 @@ export default {
       height: 100%;
       margin: 0 0 5px 0;
     }
+    /deep/.image-slot img {
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+    }
   }
   .video {
     margin: 0 0 10px 0;

src/views/service/parts/list.vue

@@ -13,7 +13,7 @@
               </el-col>
               <el-col :span="24" class="date">
                 <el-col :span="20" class="left">
-                  更新时间:<span>{{ item.renew_time || '暂无时间' }}</span>
+                  更新时间:<span>{{ item.create_time || item.renew_time || '暂无时间' }}</span>
                 </el-col>
                 <el-col :span="4" class="right"> <i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }} </el-col>
               </el-col>
@@ -34,7 +34,7 @@
               </el-col>
             </el-col>
             <el-col :span="7" class="image">
-              <el-image :src="item.imgUrl">
+              <el-image :src="item.imgUrl[0].url">
                 <div slot="error" class="image-slot">
                   <img :src="noImg" alt="" />
                 </div>
@@ -57,7 +57,7 @@
                 x5-video-player-type="h5"
                 x5-video-player-fullscreen="true"
                 controlsList="nodownload"
-                :src="item.fileUrl"
+                :src="item.fileUrl[0].url"
                 loop="loop"
               >
                 <source src="movie.ogg" type="video/ogg" />
@@ -85,7 +85,7 @@
                 x5-video-player-type="h5"
                 x5-video-player-fullscreen="true"
                 controlsList="nodownload"
-                :src="item.fileUrl"
+                :src="item.fileUrl[0].url"
                 loop="loop"
               >
                 <source src="movie.ogg" type="video/ogg" />
@@ -93,7 +93,7 @@
               </video>
             </el-col>
             <el-col :span="24" class="other">
-              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.renew_time || '暂无时间' }}</el-col>
+              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.create_time || item.renew_time || '暂无时间' }}</el-col>
               <el-col :span="4" class="right"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
             </el-col>
           </el-col>