1

src/store/index.js

@@ -27,6 +27,7 @@ import market from './market/market';
 import channel from './live/channel';
 import channelVideo from './live/channelVideo';
 import flower from './live/flower';
+import imgtxtdock from './live/imgtxtdock';
 // 专家
 import expertsuser from './market/exportuser';
 // 产品
@@ -80,6 +81,7 @@ export default new Vuex.Store({
     channel,
     channelVideo,
     flower,
+    imgtxtdock,
     // 专家
     expertsuser,
     // 产品

src/store/live/imgtxtdock.js

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

src/views/hall/parts/imagetxtList.vue

@@ -0,0 +1,213 @@
+<template>
+  <div id="imagetxtList">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="down" v-if="user.role == '3'">
+          <el-button type="primary" size="mini" @click="dialog = true">编辑图文</el-button>
+        </el-col>
+        <el-col :span="24" class="top" v-bind:style="{ height: user.role == '3' ? '370px' : '420px' }">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="title">
+              <i class="el-icon-s-custom"></i>
+              <span>{{ item.user_name }}</span>
+              <span>{{ getDate(item.meta.createdAt) }}</span>
+            </el-col>
+            <el-col :span="24" class="txt">
+              {{ item.brief }}
+            </el-col>
+            <el-col :span="24" class="image">
+              <el-image :src="tag.url" class="imagelist" v-for="(tag, tagindex) in item.image" :key="tagindex"></el-image>
+            </el-col>
+            <el-col :span="24" class="video" v-if="item.file_path">
+              <el-link :href="item.file_path" target="_blank" :underline="false">视频播放</el-link>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="信息管理" :visible.sync="dialog" @closed="handleClose" width="50%" :append-to-body="true">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="信息内容" prop="brief">
+          <el-input v-model="form.brief" type="textarea" placeholder="请输入信息内容"></el-input>
+        </el-form-item>
+        <el-form-item label="图片" prop="image">
+          <upload
+            :limit="6"
+            :data="form.image"
+            :uploadBtn="true"
+            type="image"
+            :url="`/files/image/upload`"
+            @upload="uploadSuccess"
+            @delete="uploadDelete"
+          ></upload>
+        </el-form-item>
+        <el-form-item label="视频文件" prop="file_path">
+          <uploadfile
+            :limit="1"
+            :data="form.file_path"
+            type="file_path"
+            listType=""
+            :url="'/files/imgpath/upload'"
+            @upload="sucfile"
+            @delete="delfile"
+          ></uploadfile>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="save">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload.vue';
+import uploadfile from '@/components/uploaddock.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: imgtxtdock } = createNamespacedHelpers('imgtxtdock');
+import moment from 'moment';
+export default {
+  name: 'imagetxtList',
+  props: {},
+  components: {
+    upload,
+    uploadfile,
+  },
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+      // 添加信息
+      dialog: false,
+      form: {},
+      rules: {},
+    };
+  },
+  async created() {
+    this.$set(this, `dock_id`, this.$route.query.id);
+    await this.search();
+  },
+  methods: {
+    ...imgtxtdock(['query', 'create']),
+    async search() {
+      // 图文直播
+      let res = await this.query({ dock_id: this.dock_id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    // 添加保存
+    async save() {
+      let data = this.form;
+      data.dock_id = this.dock_id;
+      data.user_name = this.user.adminuser;
+      console.log(data);
+      let res = await this.create(data);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '添加信息成功',
+          type: 'success',
+        });
+        this.handleClose();
+      }
+    },
+    // 取消添加
+    handleClose() {
+      this.form = {};
+      this.dialog = false;
+      this.search();
+    },
+    // 过滤时间
+    getDate(val) {
+      let newDate = moment(val).format('hh:mm');
+      if (newDate) return newDate;
+    },
+    // 图片
+    uploadSuccess({ type, data }) {
+      let arr = _.get(this.form, type);
+      if (_.isArray(arr)) {
+        let datas = { name: data.name, url: data.uri };
+        this.form[type].push({ name: data.name, url: data.uri });
+      } else {
+        let newArr = [{ name: data.name, url: data.uri }];
+        this.$set(this.form, `${type}`, newArr);
+      }
+    },
+    // 删除图片
+    uploadDelete(index) {
+      this.form.image.splice(index, 1);
+    },
+    // 视频文件
+    sucfile({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+    delfile(index) {
+      this.$set(this.form, `file_path`, '');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 10px;
+  .top {
+    overflow-y: auto;
+    .list {
+      border-bottom: 1px dashed #ff0000;
+      .title {
+        padding: 10px 0 5px 0;
+        i {
+          font-size: 25px;
+          color: #666;
+        }
+        span:nth-child(2) {
+          font-size: 18px;
+          font-weight: bold;
+          padding: 0 5px;
+        }
+        span:nth-child(3) {
+          font-size: 14px;
+          color: #666;
+        }
+      }
+      .txt {
+        font-size: 16px;
+        padding: 5px 0;
+        text-indent: 1rem;
+      }
+      .image {
+        .imagelist {
+          float: left;
+          margin: 0 10px 5px 0;
+          background-size: 100% 100%;
+        }
+        .imagelist:nth-child(2n) {
+          margin: 0 0 5px 0;
+        }
+      }
+      .video {
+        padding: 5px;
+        .el-link {
+          font-size: 16px;
+          color: #000;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .down {
+    height: 50px;
+    padding: 10px 0;
+    text-align: center;
+  }
+}
+/deep/.v-modal {
+  position: none;
+}
+</style>