1

src/views/train/index copy.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="common">
+            <el-col :span="8" class="one">
+              <el-col :span="24" class="image">
+                <el-image :src="xspxUrl"></el-image>
+              </el-col>
+              <el-col :span="24" class="info">
+                <p>线上培训</p>
+                <p>举办地点:<span>吉林省长春市</span></p>
+                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini">进人展会</el-button>
+              </el-col>
+            </el-col>
+            <el-col :span="8" class="one">
+              <el-col :span="24" class="image">
+                <el-image :src="xpfbUrl"></el-image>
+              </el-col>
+              <el-col :span="24" class="info">
+                <p>线上新品发布</p>
+                <p>举办地点:<span>吉林省长春市</span></p>
+                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini">进人展会</el-button>
+              </el-col>
+            </el-col>
+            <el-col :span="8" class="one">
+              <el-col :span="24" class="image">
+                <el-image :src="xszhUrl"></el-image>
+              </el-col>
+              <el-col :span="24" class="info">
+                <p>线上展会</p>
+                <p>举办地点:<span>吉林省长春市</span></p>
+                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini">进人展会</el-button>
+              </el-col>
+            </el-col>
+            <el-col :span="8" class="one">
+              <el-col :span="24" class="image">
+                <el-image :src="kjcpUrl"></el-image>
+              </el-col>
+              <el-col :span="24" class="info">
+                <p>线上科技产品宣传</p>
+                <p>举办地点:<span>吉林省长春市</span></p>
+                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini">进人展会</el-button>
+              </el-col>
+            </el-col>
+            <el-col :span="8" class="one">
+              <el-col :span="24" class="image">
+                <el-image :src="kpjyUrl"></el-image>
+              </el-col>
+              <el-col :span="24" class="info">
+                <p>线上科普教育</p>
+                <p>举办地点:<span>吉林省长春市</span></p>
+                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini">进人展会</el-button>
+              </el-col>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      xspxUrl: require('@a/xspx.jpg'),
+      xpfbUrl: require('@a/xpfb.jpg'),
+      xszhUrl: require('@a/xszh.jpg'),
+      kjcpUrl: require('@a/kjcp.jpg'),
+      kpjyUrl: require('@a/kpjy.jpg'),
+    };
+  },
+  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 {
+  min-height: 500px;
+  margin: 10px 0 0 0;
+  .common {
+    .one {
+      width: 32.7%;
+      height: 370px;
+      box-shadow: 0 0 5px #ccc;
+      border-radius: 5px;
+      margin: 0 10px 10px 0;
+      .image {
+        /deep/.el-image__inner {
+          width: 100%;
+          height: 225px;
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+        }
+      }
+      .info {
+        padding: 0 10px;
+        p {
+          font-size: 14px;
+          margin: 0 0 8px 0;
+        }
+        p:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .btn {
+        text-align: center;
+      }
+    }
+    .one:nth-child(3n) {
+      margin: 0 0 10px 0;
+    }
+  }
+}
+</style>

src/views/train/index.vue

@@ -4,66 +4,18 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="24" class="common">
-            <el-col :span="8" class="one">
+            <el-col :span="8" class="one" v-for="(item, index) in list" :key="index">
               <el-col :span="24" class="image">
-                <el-image :src="xspxUrl"></el-image>
+                <el-image :src="getImage(item.image)"></el-image>
               </el-col>
               <el-col :span="24" class="info">
-                <p>线上培训</p>
-                <p>举办地点:<span>吉林省长春市</span></p>
-                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
-              </el-col>
-              <el-col :span="24" class="btn">
-                <el-button type="primary" size="mini">进人展会</el-button>
-              </el-col>
-            </el-col>
-            <el-col :span="8" class="one">
-              <el-col :span="24" class="image">
-                <el-image :src="xpfbUrl"></el-image>
-              </el-col>
-              <el-col :span="24" class="info">
-                <p>线上新品发布</p>
-                <p>举办地点:<span>吉林省长春市</span></p>
-                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
-              </el-col>
-              <el-col :span="24" class="btn">
-                <el-button type="primary" size="mini">进人展会</el-button>
-              </el-col>
-            </el-col>
-            <el-col :span="8" class="one">
-              <el-col :span="24" class="image">
-                <el-image :src="xszhUrl"></el-image>
-              </el-col>
-              <el-col :span="24" class="info">
-                <p>线上展会</p>
-                <p>举办地点:<span>吉林省长春市</span></p>
-                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
-              </el-col>
-              <el-col :span="24" class="btn">
-                <el-button type="primary" size="mini">进人展会</el-button>
-              </el-col>
-            </el-col>
-            <el-col :span="8" class="one">
-              <el-col :span="24" class="image">
-                <el-image :src="kjcpUrl"></el-image>
-              </el-col>
-              <el-col :span="24" class="info">
-                <p>线上科技产品宣传</p>
-                <p>举办地点:<span>吉林省长春市</span></p>
-                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
-              </el-col>
-              <el-col :span="24" class="btn">
-                <el-button type="primary" size="mini">进人展会</el-button>
-              </el-col>
-            </el-col>
-            <el-col :span="8" class="one">
-              <el-col :span="24" class="image">
-                <el-image :src="kpjyUrl"></el-image>
-              </el-col>
-              <el-col :span="24" class="info">
-                <p>线上科普教育</p>
-                <p>举办地点:<span>吉林省长春市</span></p>
-                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
+                <p>{{ item.title }}</p>
+                <p>
+                  举办地点:<span>{{ item.province }}-{{ item.city }}</span>
+                </p>
+                <p>
+                  举办时间:<span>{{ item.start_time }}-{{ item.end_time }}</span>
+                </p>
               </el-col>
               <el-col :span="24" class="btn">
                 <el-button type="primary" size="mini">进人展会</el-button>
@@ -77,22 +29,54 @@
 </template>
 
 <script>
+const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: online } = createNamespacedHelpers('online');
+const { mapActions: code } = createNamespacedHelpers('code');
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function () {
     return {
-      xspxUrl: require('@a/xspx.jpg'),
-      xpfbUrl: require('@a/xpfb.jpg'),
-      xszhUrl: require('@a/xszh.jpg'),
-      kjcpUrl: require('@a/kjcp.jpg'),
-      kpjyUrl: require('@a/kpjy.jpg'),
+      list: [],
     };
   },
-  created() {},
-  methods: {},
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...online(['query']),
+    ...code(['xzqh']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        for (const val of res.data) this.searchXzqh(val);
+        this.$set(this, `list`, res.data);
+      }
+    },
+    // 切换图片
+    getImage(data) {
+      if (_.map(data, 'url')[0]) {
+        return _.map(data, 'url')[0];
+      }
+    },
+    // 查询省市
+    async searchXzqh(data) {
+      if (data.province) {
+        const res = await this.xzqh();
+        if (this.$checkRes(res)) {
+          data.province = res.data.find((i) => i.code == data.province).name;
+        }
+      }
+      if (data.city) {
+        const res = await this.xzqh({ code: data.city });
+        if (this.$checkRes(res)) {
+          data.city = res.data.find((i) => i.code == data.city).name;
+        }
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
   },