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

src/layout/common/top.vue

@@ -76,6 +76,9 @@ export default {
     /deep/.van-nav-bar__content {
       height: 40px;
     }
+    /deep/.van-icon {
+      top: 2px;
+    }
   }
   .thr {
     .back {

src/router/index.js

@@ -70,6 +70,11 @@ const routes = [
     meta: { title: '咨询服务', isleftarrow: false },
     component: () => import('../views/service/index.vue'),
   },
+  {
+    path: '/service/detail',
+    meta: { title: '文章正文', isleftarrow: false },
+    component: () => import('../views/service/detail.vue'),
+  },
   // 引用管理员
   ...admin,
 ];

src/store/index.js

@@ -1,8 +1,9 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import refute from './refute';
 import login from './login';
 import upload from './upload';
+import refute from './refute';
+import topic from './topic';
 
 Vue.use(Vuex);
 
@@ -21,8 +22,9 @@ export default new Vuex.Store({
   },
   actions: {},
   modules: {
-    refute,
     login,
     upload,
+    refute,
+    topic,
   },
 });

src/store/topic.js

@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  topic: `/api/article/topic`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(api.topic, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.topic}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.topic}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.topic}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.topic}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/community/detail.vue

@@ -32,6 +32,7 @@ import info from './parts/info.vue';
 import comment from './parts/comment.vue';
 import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapTopic } = createNamespacedHelpers('topic');
 export default {
   name: 'detail',
   props: {},
@@ -44,19 +45,7 @@ export default {
     return {
       clientHeight: '',
       // 话题正文
-      detailInfo: {
-        content:
-          '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
-        origin: '文章来源',
-        renew_time: '2021-02-01 10:00:00',
-        type: '0',
-        imgUrl: [
-          { name: '图片名称', url: require('@a/news1.jpg') },
-          { name: '图片名称1', url: require('@a/news1.jpg') },
-          { name: '图片名称2', url: require('@a/news1.jpg') },
-        ],
-        fileUrl: require('@a/video1.mp4'),
-      },
+      detailInfo: {},
       // 评论
       active: 'first',
       // 用户评论列表
@@ -90,8 +79,14 @@ export default {
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {
-      console.log('');
+    ...mapTopic(['fetch']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `detailInfo`, res.data);
+        }
+      }
     },
     // 返回上一页
     upBack() {
@@ -100,6 +95,9 @@ export default {
   },
   computed: {
     ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };

src/views/community/index.vue

@@ -21,6 +21,7 @@ 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: mapTopic } = createNamespacedHelpers('topic');
 export default {
   name: 'index',
   props: {},
@@ -33,36 +34,6 @@ export default {
     return {
       clientHeight: '',
       communityList: [
-        {
-          content:
-            '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
-          origin: '文章来源',
-          renew_time: '2021-02-01 10:00:00',
-          type: '0',
-          imgUrl: [
-            { name: '图片名称', url: require('@a/news1.jpg') },
-            // { name: '图片名称1', url: require('@a/news1.jpg') },
-            // { name: '图片名称2', url: require('@a/news1.jpg') },
-          ],
-          fileUrl: require('@a/video1.mp4'),
-          website: 'http://broadcast.waityou24.cn/platlive/home.html',
-          read: 10,
-        },
-        {
-          content:
-            '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
-          origin: '文章来源',
-          renew_time: '2021-02-01 10:00:00',
-          type: '0',
-          imgUrl: [
-            { name: '图片名称', url: require('@a/news1.jpg') },
-            { name: '图片名称1', url: require('@a/news1.jpg') },
-            { name: '图片名称2', url: require('@a/news1.jpg') },
-          ],
-          fileUrl: require('@a/video1.mp4'),
-          website: 'http://broadcast.waityou24.cn/platlive/home.html',
-          read: 10,
-        },
         {
           content:
             '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容',
@@ -72,7 +43,6 @@ export default {
           imgUrl: [
             { name: '图片名称', url: require('@a/news1.jpg') },
             { name: '图片名称1', url: require('@a/news1.jpg') },
-            { name: '图片名称2', url: require('@a/news1.jpg') },
           ],
           fileUrl: require('@a/video1.mp4'),
           website: 'http://broadcast.waityou24.cn/platlive/home.html',
@@ -90,8 +60,14 @@ export default {
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {
-    search({ skip = 0, limit = 10, searchName, ...info } = {}) {
-      console.log(searchName);
+    ...mapTopic(['query']),
+    async search({ skip = 0, limit = 5, searchName, ...info } = {}) {
+      if (searchName) info.content = searchName;
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `communityList`, res.data);
+        this.$set(this, `total`, res.total);
+      }
     },
     // 话题正文
     detailBtn(data) {

src/views/refute/index.vue

@@ -22,7 +22,6 @@ import top from '@/layout/common/top.vue';
 import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapRefute } = createNamespacedHelpers('refute');
-
 export default {
   name: 'index',
   props: {},
@@ -34,62 +33,7 @@ export default {
   data: function() {
     return {
       clientHeight: '',
-      refuteList: [
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10000,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 100,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 1000,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-        {
-          imgUrl: require('@a/news1.jpg'),
-          title: '全球粮价波动将影响国内？商务部食用农产品间隔难以大幅度',
-          renew_time: '2021-03-25 21:12:44',
-          num: 10,
-        },
-      ],
+      refuteList: [],
       total: 0,
     };
   },

src/views/refute/parts/list.vue

@@ -71,12 +71,12 @@ export default {
     .image {
       .el-image {
         width: 100%;
-        height: 100%;
+        height: 90px;
         border-radius: 5px;
       }
       /deep/.image-slot img {
         width: 100%;
-        height: 100%;
+        height: 90px;
       }
     }
     .info {

src/views/service/detail.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @upBack="upBack"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-col :span="24" class="one">
+            <info :form="form"></info>
+          </el-col>
+          <el-col :span="24" class="two">
+            <contact :contactInfo="form.contactInfo"></contact>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import info from './parts/info.vue';
+import contact from './parts/contact.vue';
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    info,
+    contact,
+    top,
+  },
+  data: function() {
+    return {
+      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'),
+        contactInfo: {
+          name: '联系人',
+          phone: '17319450324',
+          email: 'guhongwei0324@163com',
+          address: '吉林省长春市朝阳区吉林省科技厅科研院1244号一号楼南小二楼',
+        },
+      },
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 40;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search() {
+      console.log();
+    },
+    // 返回
+    upBack() {
+      this.$router.push({ path: '/service/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/service/index.vue

@@ -8,16 +8,16 @@
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
           <van-tabs v-model="active">
             <van-tab title="文字">
-              <list type="1" :list="oneList"></list>
+              <list type="1" :list="oneList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="图片">
-              <list type="2" :list="twoList"></list>
+              <list type="2" :list="twoList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="科普视频">
-              <list type="3" :list="thrList"></list>
+              <list type="3" :list="thrList" @detailBtn="detailBtn"></list>
             </van-tab>
             <van-tab title="培训视频">
-              <list type="4" :list="fourList"></list>
+              <list type="4" :list="fourList" @detailBtn="detailBtn"></list>
             </van-tab>
           </van-tabs>
         </el-col>
@@ -111,6 +111,10 @@ export default {
     search({ skip = 0, limit = 10, searchName, ...info } = {}) {
       console.log();
     },
+    // 文章正文
+    detailBtn(data) {
+      this.$router.push({ path: '/service/detail', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/service/parts/contact.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="contact">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="title">
+          服务咨询联系方式：
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="name">
+            联系人：<span>{{ contactInfo.name }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            联系电话：<span>{{ contactInfo.phone }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            电子邮箱：<span>{{ contactInfo.email }}</span>
+          </el-col>
+          <el-col :span="24" class="name">
+            联系地址：<span>{{ contactInfo.address }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'contact',
+  props: {
+    contactInfo: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px 10px 10px;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0 0 5px 0;
+  }
+  .info {
+    .name {
+      font-size: 16px;
+      margin: 0 0 5px 0;
+      color: #666;
+      span {
+        color: #000;
+      }
+    }
+  }
+}
+</style>

src/views/service/parts/info.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="title">
+            {{ form.title }}
+          </el-col>
+          <el-col :span="12" class="origin textOver">
+            {{ form.origin || '系统管理员' }}
+          </el-col>
+          <el-col :span="12" class="origin date textOver">
+            {{ form.renew_time || '暂无时间' }}
+          </el-col>
+        </el-col>
+        <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>
+        <el-col :span="24" class="video" v-if="form.fileUrl">
+          <video
+            autoplay="autoplay"
+            controls="controls"
+            preload="meta"
+            x-webkit-airplay="true"
+            webkit-playsinline="true"
+            playsinline="true"
+            x5-video-player-type="h5"
+            x5-video-player-fullscreen="true"
+            controlsList="nodownload"
+            :src="form.fileUrl"
+            loop="loop"
+          >
+            <source src="movie.ogg" type="video/ogg" />
+            <source src="movie.mp4" type="video/mp4" />
+          </video>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 0 10px;
+  .one {
+    margin: 0 0 10px 0;
+    border-bottom: 1px solid #f1f1f1;
+    padding: 10px 0;
+    .title {
+      text-align: center;
+      font-size: 16px;
+      margin: 0 0 5px 0;
+    }
+    .origin {
+      font-size: 14px;
+      color: #666;
+      text-align: right;
+      padding: 0 5px;
+    }
+    .date {
+      text-align: left;
+      padding: 2px 0 0 0;
+    }
+  }
+  .two {
+    font-size: 16px;
+    margin: 0 0 10px 0;
+  }
+  .image {
+    margin: 0 0 5px 0;
+    .el-image {
+      width: 100%;
+      height: 100%;
+      margin: 0 0 5px 0;
+    }
+  }
+  .video {
+    margin: 0 0 10px 0;
+    video {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #f1f1f1;
+    }
+  }
+}
+</style>

src/views/service/parts/list.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one" v-if="type == '1'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -21,7 +21,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="two" v-else-if="type == '2'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="17" class="title">
               <el-col :span="24" class="text">
                 {{ item.title }}
@@ -43,7 +43,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="thr" v-else-if="type == '3'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -72,7 +72,7 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="thr" v-else-if="type == '4'">
-          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
             <el-col :span="24" class="title">
               {{ item.title }}
             </el-col>
@@ -120,7 +120,11 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    detailBtn(data) {
+      this.$emit('detailBtn', data);
+    },
+  },
   computed: {
     ...mapState(['user']),
   },