update

src/router/index.js

@@ -56,6 +56,12 @@ const web = [
     meta: { title: '政策解读' },
     component: () => import('../views/service/unscramble.vue'),
   },
+  {
+    path: '/service/unscramble/detail',
+    name: 'service_unscramble_detail',
+    meta: { title: '政策解读' },
+    component: () => import('../views/service/unscramble-detail.vue'),
+  },
   {
     path: '/service/mechanism',
     name: 'service_mechanism',

src/store/index.js

@@ -11,6 +11,7 @@ import couponsApply from './live/couponsApply';
 import declare from './live/declare';
 import reward from './live/reward';
 import cashing from './live/cashing';
+import news from '@common/src/store/news';
 
 Vue.use(Vuex);
 
@@ -28,5 +29,6 @@ export default new Vuex.Store({
     declare,
     reward,
     cashing,
+    news,
   },
 });

src/views/service/parts/u-list.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="uList">
+    <el-row class="list" @click.native="toDetail">
+      <el-col :span="24" class="title">
+        {{ data.title }}
+      </el-col>
+      <el-col :span="24" class="other">
+        <p>
+          <span>{{ data.origin || '暂无' }}</span>
+          <span>{{ data.publish_time || '暂无' }}</span>
+        </p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'uList',
+  props: { data: { type: Object, default: () => {} } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    toDetail() {
+      this.$router.push({ path: '/service/unscramble/detail', query: { id: this.data._id } });
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.list {
+  padding: 10px 5px;
+  background: #fff;
+  margin: 0 0 5px 0;
+  border-radius: 5px;
+  .title {
+    font-size: 15px;
+    font-weight: bold;
+    margin: 0 0 5px 0;
+  }
+  .other {
+    p {
+      span {
+        display: inline-block;
+        width: 50%;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/service/unscramble-detail.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="unscramble-detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" @back="$router.go(-1)" />
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <el-row>
+            <el-col :span="24" style="text-align: center">
+              <h2>{{ d.title }}</h2>
+            </el-col>
+          </el-row>
+          <el-row type="flex" align="middle" justify="space-between">
+            <el-col :span="12">
+              <span style="font-size: 14px; color: #666">发布时间:{{ d.publish_time }}</span>
+            </el-col>
+            <el-col :span="12" style="text-align: right">
+              <span style="font-size: 14px; color: #666">信息来源:{{ d.origin }}</span>
+            </el-col>
+          </el-row>
+          <el-row style="margin-top: 20px">
+            <el-col :span="24" v-if="d.picture">
+              <el-image :src="d.picture" style="height: 200px" />
+            </el-col>
+            <el-col :span="24" v-if="d.video">
+              <video :src="d.video" />
+            </el-col>
+            <el-col :span="24" class="content" v-html="d.content"></el-col>
+          </el-row>
+          <el-row style="margin-top: 20px" v-if="d.filepath">
+            <el-col :span="24">
+              <el-link :href="d.filepath" type="primary">点击下载附件</el-link>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/common/top.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'unscramble-detail',
+  props: {},
+  components: {
+    top,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+      d: {},
+    };
+  },
+  async created() {
+    this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 50;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `d`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f9f9f9;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 10px;
+    margin-bottom: 20px;
+  }
+  .foot {
+    height: 50px;
+    overflow: hidden;
+    border-top: 1px solid #f9f9f9;
+  }
+  h2 {
+    font-size: 18px;
+    margin: 10px 0;
+  }
+  /deep/.content {
+    table {
+      float: left;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/service/unscramble.vue

@@ -5,7 +5,10 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 政策解读 </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <model v-for="(i, index) in list" :key="`mod-${index}`" :data="i" />
+        </el-col>
+        <page :limit="limit" :total="total" @search="search" />
         <el-col :span="24" class="foot">
           <foot :type="2"></foot>
         </el-col>
@@ -15,27 +18,46 @@
 </template>
 
 <script>
+import model from './parts/u-list.vue';
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
 export default {
   name: 'unscramble',
   props: {},
   components: {
     top,
     foot,
+    model,
+    page,
   },
   data: function () {
     return {
       clientHeight: '',
+      list: [],
+      total: 0,
+      limit: '10',
     };
   },
-  async created() {},
+  async created() {
+    this.search();
+  },
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 135;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+  methods: {
+    ...news(['query']),
+    async search({ skip = 0, limit = this.limit, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, column_id: '609b2e5c0d3a9a3b3cd21dfd' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
   },