Merge branch 'master' of http://git.cc-lotus.info/live/web-live

src/router/index.js

@@ -102,36 +102,36 @@ const live = [
     meta: { title: '直播大厅-展会详情', subSite: true },
     component: () => import('../views/achieveLive/detail.vue'),
   },
-  {
-    path: '/achieveLive/expert/index',
-    name: 'achieveLive_expert',
-    meta: { title: '直播大厅-参展专家', subSite: true },
-    component: () => import('../views/achieveLive/expert/index.vue'),
-  },
-  {
-    path: '/achieveLive/expert/detail',
-    name: 'achieveLive_detail',
-    meta: { title: '直播大厅-对接专家', subSite: true },
-    component: () => import('../views/achieveLive/expert/detail.vue'),
-  },
-  {
-    path: '/achieveLive/product/index',
-    name: 'achieveLive_product',
-    meta: { title: '直播大厅-参展项目', subSite: true },
-    component: () => import('../views/achieveLive/product/index.vue'),
-  },
-  {
-    path: '/achieveLive/product/detail',
-    name: 'achieveLive_detail',
-    meta: { title: '直播大厅-对接项目', subSite: true },
-    component: () => import('../views/achieveLive/product/detail.vue'),
-  },
-  {
-    path: '/achieveLive/guestRoad/index',
-    name: 'achieveLive_guestRoad',
-    meta: { title: '直播大厅-嘉宾访谈，项目路演', subSite: true },
-    component: () => import('../views/achieveLive/guestRoad/index.vue'),
-  },
+  // {
+  //   path: '/achieveLive/expert/index',
+  //   name: 'achieveLive_expert',
+  //   meta: { title: '直播大厅-参展专家', subSite: true },
+  //   component: () => import('../views/achieveLive/expert/index.vue'),
+  // },
+  // {
+  //   path: '/achieveLive/expert/detail',
+  //   name: 'achieveLive_detail',
+  //   meta: { title: '直播大厅-对接专家', subSite: true },
+  //   component: () => import('../views/achieveLive/expert/detail.vue'),
+  // },
+  // {
+  //   path: '/achieveLive/product/index',
+  //   name: 'achieveLive_product',
+  //   meta: { title: '直播大厅-参展项目', subSite: true },
+  //   component: () => import('../views/achieveLive/product/index.vue'),
+  // },
+  // {
+  //   path: '/achieveLive/product/detail',
+  //   name: 'achieveLive_detail',
+  //   meta: { title: '直播大厅-对接项目', subSite: true },
+  //   component: () => import('../views/achieveLive/product/detail.vue'),
+  // },
+  // {
+  //   path: '/achieveLive/guestRoad/index',
+  //   name: 'achieveLive_guestRoad',
+  //   meta: { title: '直播大厅-嘉宾访谈，项目路演', subSite: true },
+  //   component: () => import('../views/achieveLive/guestRoad/index.vue'),
+  // },
 
   {
     path: '/website',

src/views/achieveLive - 副本/apply.vue

@@ -0,0 +1,154 @@
+<template>
+  <div id="apply">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="3">
+              <el-image :src="img_path" style="width:105px;height:105px;"></el-image>
+            </el-col>
+            <el-col :span="20">
+              <p>温馨提示：</p>
+              <p>1、为了保证您的信息能顺利通过我们的审核，请将信息的真实情况尽可能全面的发布出来！</p>
+              <p>2、根据我们的长期跟踪统计，信息完整度越高，越容易获得目标客户的关注！</p>
+              <p>3、信息完整度越高，将在我们的平台搜索结果排序靠前、获得推荐机会，以及享受增值服务试用机会！</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+              <el-form-item label="用户名称" prop="name">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话" prop="phone">
+                <el-input v-model="form.phone"></el-input>
+              </el-form-item>
+              <el-form-item label="申请时间" prop="create_time">
+                <el-date-picker v-model="form.create_time" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"> </el-date-picker>
+              </el-form-item>
+              <el-form-item label="参展项目" prop="productList">
+                <el-select v-model="form.productList" value-key="id" clearable filterable multiple collapse-tags placeholder="请选择选择产品">
+                  <el-option v-for="(item, index) in goodsList" :key="index" :label="`${item.name}（${getType(item.type)}）`" :value="item"> </el-option>
+                </el-select>
+              </el-form-item>
+              <el-col :span="24" class="btn">
+                <el-button type="danger" size="mini" @click="resetBtn">取消申请</el-button>
+                <el-button type="success" size="mini" @click="onSubmit('form')">提交申请</el-button>
+              </el-col>
+            </el-form>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('product');
+const { mapActions: dockUser } = createNamespacedHelpers('dockUser');
+
+export default {
+  name: 'apply',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      img_path: require('@common/src/assets/product.png'),
+      form: {},
+      rules: {
+        productList: [],
+      },
+      // 企业成果
+      goodsList: [],
+    };
+  },
+  created() {
+    if (this.user) this.search();
+  },
+  methods: {
+    ...product(['query']),
+    ...dockUser(['create']),
+    async search() {
+      let data = { name: this.user.name, phone: this.user.phone, user_id: this.user.id, dock_id: this.dock_id };
+      this.$set(this, `form`, data);
+      let res = await this.query({ user_id: this.user.id, status: '2' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `goodsList`, res.data);
+      }
+    },
+
+    // 提交申请
+    onSubmit(formName) {
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          let data = this.form;
+          let res = await this.create(data);
+          if (this.$checkRes(res)) {
+            this.$message({
+              message: '申请参展成功!',
+              type: 'success',
+            });
+            this.resetBtn();
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 整理类型
+    getType(type) {
+      if (type == '0') return '科技需求';
+      else if (type == '1') return '技术成果';
+      else if (type == '2') return '商务服务';
+    },
+    // 取消申请
+    resetBtn() {
+      this.$router.push({ path: '/live/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    dock_id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  min-height: 557px;
+  padding: 15px 0;
+  .one {
+    background: #f3faff;
+    padding: 15px;
+    border: 1px solid #ccc;
+    margin: 0 0 15px 0;
+    p {
+      font-size: 16px;
+    }
+  }
+  .two {
+    .el-date-editor {
+      width: 100%;
+    }
+    .el-select {
+      width: 100%;
+    }
+    .btn {
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/achieveLive - 副本/before.vue

@@ -0,0 +1,129 @@
+<template>
+  <div id="before">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <el-col :span="24" class="left">
+            中科在线（长春）
+          </el-col>
+          <el-col :span="24" class="right">
+            直播大厅
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="24" class="title">{{ dockInfo.title }}</el-col>
+            <el-col :span="24" class="txt">主办方：{{ dockInfo.sponsor }}</el-col>
+            <el-col :span="24" class="txt">承办方：{{ dockInfo.organizer }}</el-col>
+            <el-col :span="24" class="txt">技术支持：长春市福瑞科技有限公司</el-col>
+            <el-col :span="24" class="btn">
+              <el-button @click="dockBtn(dockInfo)">进入活动现场<i class="iconfont icon-bofang"></i></el-button>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  name: 'before',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      dockInfo: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...dock(['fetch']),
+    async search() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `dockInfo`, res.data);
+      }
+    },
+    dockBtn(data) {
+      if (data.room_id == '1007') {
+        this.$router.push({ path: '/halltwo/directTwo', query: { id: data.id } });
+      } else {
+        this.$router.push({ path: '/achieveLive/detail', query: { id: data.id } });
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.style {
+  background-image: url('~@common/src/assets/directBack.png');
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .top {
+    .left {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 15px;
+      font-size: 20px;
+      color: #fffa93;
+    }
+    .right {
+      text-align: center;
+      color: #fffa93;
+      font-size: 50px;
+      text-shadow: 2px 2px 5px #000;
+    }
+  }
+  .main {
+    text-align: center;
+    margin: 100px 0 0 0;
+    .title {
+      font-size: 40px;
+      color: #fffa93;
+      font-weight: bold;
+      font-family: monospace;
+      padding: 0 0 20px 0;
+      height: 100px;
+    }
+    .txt {
+      font-size: 25px;
+      color: #fffa93;
+      padding: 0 0 10px 0;
+    }
+    /deep/.btn {
+      margin: 50px 0 0 0;
+      .el-button {
+        background: linear-gradient(to bottom, #ffbd00 0%, #fd5a00 100%);
+        color: #fff;
+        border: none;
+        border-radius: 25px;
+        padding: 15px 40px;
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/achieveLive - 副本/detail.vue

@@ -0,0 +1,182 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <div class="w_1200">
+            <topInfo :info="liveInfo"></topInfo>
+          </div>
+        </el-col>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="one">
+              <el-col :span="12" class="left">
+                <videoData :info="liveInfo"></videoData>
+              </el-col>
+              <el-col :span="12" class="right">
+                <imgtxtData></imgtxtData>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="two">
+              <productData></productData>
+            </el-col>
+            <el-col :span="24" class="thr">
+              <expertData></expertData>
+            </el-col>
+            <el-col :span="24" class="four">
+              <el-image :src="fourImg"> </el-image>
+            </el-col>
+            <el-col :span="24" class="five">
+              <el-col :span="8" class="left">
+                <guestData></guestData>
+              </el-col>
+              <el-col :span="8" class="cen">
+                <projectData></projectData>
+              </el-col>
+              <el-col :span="8" class="right">
+                <chatData></chatData>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <foot></foot>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import foot from '@common/src/components/common/foot.vue';
+import topInfo from './detail/topInfo.vue';
+import videoData from './detail/videoData.vue';
+import imgtxtData from './detail/imgtxtData.vue';
+import productData from './detail/productData.vue';
+import expertData from './detail/expertData.vue';
+import guestData from './detail/guestData.vue';
+import projectData from './detail/projectData.vue';
+import chatData from './detail/chatData.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: { foot, topInfo, videoData, imgtxtData, productData, expertData, guestData, projectData, chatData },
+  data: function() {
+    return {
+      // 展会详情
+      liveInfo: {},
+      // 第四部分
+      fourImg: require('@common/src/assets/live/top_bg.png'),
+    };
+  },
+  async created() {
+    await this.searchInfo();
+  },
+  methods: {
+    ...dock(['fetch']),
+    async searchInfo() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `liveInfo`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    background: url('~@common/src/assets/live/dock_top.png');
+    height: 480px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .info {
+    min-height: 500px;
+    background: #fcfcfd;
+    .one {
+      height: 480px;
+      background-color: #fff;
+      margin: 0 0 15px 0;
+      .left {
+        width: 49%;
+        height: 480px;
+        margin: 0 15px 0 0;
+        border: 4px solid #000;
+      }
+      .right {
+        width: 49.5%;
+        height: 480px;
+        box-shadow: 0 0 5px #ccc;
+        border-radius: 5px;
+      }
+    }
+    .two {
+      height: 620px;
+      background-color: #fff;
+      box-shadow: 0 0 5px #ccc;
+      border-radius: 5px;
+      margin: 0 0 15px 0;
+    }
+    .thr {
+      height: 560px;
+      background-color: #fff;
+      box-shadow: 0 0 5px #ccc;
+      border-radius: 5px;
+      margin: 0 0 15px 0;
+    }
+    .four {
+      height: 120px;
+      box-shadow: 0 0 5px #ccc;
+      border-radius: 5px;
+      margin: 0 0 15px 0;
+      .el-image {
+        height: 120px;
+        overflow: hidden;
+        border-radius: 5px;
+      }
+    }
+    .five {
+      height: 510px;
+      background-color: #fff;
+      margin: 0 0 15px 0;
+      .left {
+        width: 33%;
+        height: 510px;
+        overflow: hidden;
+        box-shadow: 0 0 5px #ccc;
+        border-radius: 5px;
+        margin: 0 10px 0 0;
+      }
+      .cen {
+        width: 33%;
+        height: 510px;
+        overflow: hidden;
+        box-shadow: 0 0 5px #ccc;
+        border-radius: 5px;
+        margin: 0 10px 0 0;
+      }
+      .right {
+        width: 32.3%;
+        height: 510px;
+        overflow: hidden;
+        box-shadow: 0 0 5px #ccc;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/achieveLive - 副本/detail/productData.vue

@@ -0,0 +1,234 @@
+<template>
+  <div id="productData">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-tabs v-model="active" type="card">
+          <el-tab-pane label="技术成果" name="first">
+            <el-col :span="24" class="first">
+              <el-col :span="5" class="achieveList" v-for="(item, index) in achieveList" :key="index">
+                <el-col :span="24" class="top">
+                  <p class="textOver">{{ item.name || '暂无' }}</p>
+                  <p>{{ item.achievebrief || '暂无' }}</p>
+                  <p class="textOver">领域：{{ item.field || '暂无' }}</p>
+                  <p class="textOver">联系人{{ item.contacts || '暂无' }}</p>
+                </el-col>
+                <el-col :span="24" class="down">
+                  <el-button size="mini" type="primary" @click="detail(item, '1')">详情</el-button>
+                  <el-button size="mini" type="success" @click="trans(item, '1')">对接</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" size="mini" @click="moreBtn('1')">查看更多项目</el-button>
+            </el-col>
+          </el-tab-pane>
+          <el-tab-pane label="科技需求" name="second">
+            <el-col :span="24" class="second">
+              <el-col :span="5" class="techolList" v-for="(item, index) in techolList" :key="index">
+                <el-col :span="24" class="top">
+                  <p>{{ item.name || '暂无' }}</p>
+                  <p class="textOver">领域：{{ item.field || '暂无' }}</p>
+                </el-col>
+                <el-col :span="24" class="down">
+                  <el-button size="mini" type="primary" @click="detail(item, '0')">详情</el-button>
+                  <el-button size="mini" type="success" @click="trans(item, '0')">对接</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" size="mini" @click="moreBtn('0')">查看更多项目</el-button>
+            </el-col>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+    <el-dialog title="技术成果详情" :visible.sync="dialog" width="50%" :before-close="handleClose">
+      <achieveInfo :form="info" :showBtn="false"></achieveInfo>
+    </el-dialog>
+    <el-dialog title="科技需求详情" :visible.sync="twoDialog" width="50%" :before-close="handleClose">
+      <techolInfo :form="info" :showBtn="false"></techolInfo>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import achieveInfo from '../product/achieveInfo.vue';
+import techolInfo from '../product/techolInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: dockUser } = createNamespacedHelpers('dockUser');
+export default {
+  name: 'productData',
+  props: {},
+  components: {
+    achieveInfo,
+    techolInfo,
+  },
+  data: function() {
+    return {
+      active: 'first',
+      achieveList: [],
+      techolList: [
+        {
+          name: '科技需求',
+          field: '所属领域',
+        },
+      ],
+      // 技术成果详情
+      dialog: false,
+      info: {},
+      // 科技需求详情
+      twoDialog: false,
+      twoinfo: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...dock(['productQuery']),
+    ...dockUser(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      info.dock_id = this.id;
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        for (const val of res.data) {
+          // 成果
+          let achieve = val.goodsList.filter(i => i.type == '1');
+          if (achieve) this.$set(this, `achieveList`, achieve);
+          // 需求
+          let techol = val.goodsList.filter(i => i.type == '0');
+          if (techol) this.$set(this, `techolList`, techol);
+        }
+      }
+    },
+    // 查看更多项目
+    moreBtn(type) {
+      this.$router.push({ path: '/achieveLive/product/index', query: { dock_id: this.id, type } });
+    },
+    // 详情
+    detail(data, type) {
+      this.$set(this, `info`, data);
+      // 科技需求
+      if (type == '0') this.twoDialog = true;
+      // 技术成果
+      else if (type == '1') this.dialog = true;
+    },
+    // 对接
+    trans(data, type) {
+      this.$router.push({ path: '/achieveLive/product/detail', query: { dock_id: this.id, id: data.id, type: data.type } });
+    },
+    // 取消查看
+    handleClose() {
+      this.dialog = false;
+      this.twoDialog = false;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  .btn {
+    text-align: center;
+  }
+  .first {
+    padding: 0 10px;
+    height: 530px;
+    overflow: hidden;
+    .achieveList {
+      width: 18.9%;
+      height: 250px;
+      background: url('~@common/src/assets/achieve.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin: 0 15px 15px 0;
+      padding: 22px 22px 8px 22px;
+      .top {
+        height: 190px;
+        overflow: hidden;
+        p:nth-child(1) {
+          font-size: 18px;
+          font-weight: bold;
+          padding: 5px 0;
+        }
+        p:nth-child(2) {
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 6;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          padding: 0 5px;
+          height: 105px;
+          line-height: 17px;
+        }
+        p:nth-child(3) {
+          font-size: 14px;
+          padding: 4px 0 0 0;
+        }
+        p:nth-child(4) {
+          font-size: 14px;
+          padding: 4px 0 0 0;
+        }
+      }
+      .down {
+        text-align: center;
+      }
+    }
+    .achieveList:nth-child(5n) {
+      margin: 0 0 15px 0;
+    }
+  }
+  .second {
+    padding: 0 10px;
+    height: 530px;
+    overflow: hidden;
+    .techolList {
+      width: 18.9%;
+      height: 250px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      margin: 0 15px 15px 0;
+      padding: 22px 22px 8px 22px;
+      .top {
+        height: 190px;
+        overflow: hidden;
+        p:nth-child(1) {
+          height: 145px;
+          text-align: center;
+          font-size: 18px;
+          margin: 0 0 10px 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 6;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+        p:nth-child(2) {
+          text-align: center;
+          font-size: 16px;
+        }
+      }
+      .down {
+        text-align: center;
+      }
+    }
+    .techolList:nth-child(5n) {
+      margin: 0 0 15px 0;
+    }
+  }
+  /deep/.el-tabs__header {
+    margin: 0 0 10px 0;
+  }
+}
+</style>

src/views/achieveLive - 副本/detail/videoData.vue

@@ -0,0 +1,166 @@
+<template>
+  <div id="videoData">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <el-col :span="4" class="txt">
+            <span style="color:#FF8400;">视频</span>
+            <span>直播</span>
+          </el-col>
+          <el-col :span="20" class="title textOver">
+            {{ info.title }}
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="video">
+          <video :src="videoPath" controls autoplay loop v-if="videoList != ''">
+            <source src="movie.mp4" type="video/mp4" />
+            <source src="movie.ogg" type="video/ogg" />
+          </video>
+          <div class="videointro" v-else>
+            <p>{{ info.title }}</p>
+          </div>
+        </el-col>
+        <el-col :span="24" class="list">
+          <swiper :list="videoList" :options="options">
+            <template v-slot="{ index, item }">
+              <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">{{ item.videointro }}</p>
+            </template>
+          </swiper>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import swiper from '@c/frame/swiper-frame.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  name: 'videoData',
+  props: {
+    info: { type: Object },
+  },
+  components: { swiper },
+  data: function() {
+    return {
+      // 视频路径
+      videoPath: '',
+      // 视频列表
+      videoList: [],
+      menuIndex: '0',
+      options: {
+        slidesPerView: 5,
+        spaceBetween: 10,
+        // 分页
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      },
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...dock(['fetch']),
+    async search() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `videoList`, res.data.videodata);
+        this.changeMenu('0', this.videoList[0]);
+      }
+    },
+    changeMenu(index, item) {
+      if (item) {
+        this.menuIndex = index;
+        this.$set(this, `videoPath`, item.file_path);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  .top {
+    height: 60px;
+    overflow: hidden;
+    .txt {
+      height: 60px;
+      line-height: 40px;
+      font-size: 20px;
+      font-weight: 700;
+      text-align: center;
+    }
+    .title {
+      height: 60px;
+      line-height: 65px;
+      font-weight: bolder;
+      -webkit-text-stroke: 1px #6e042c;
+      -webkit-text-fill-color: #fff;
+      letter-spacing: 3px;
+      font-size: 20px;
+    }
+  }
+  .video {
+    height: 365px;
+    overflow: hidden;
+    video {
+      width: 100%;
+      height: 365px;
+      background: #000;
+      object-fit: fill;
+    }
+    .videointro {
+      height: 365px;
+      text-align: center;
+      background-image: url('~@common/src/assets/directBack.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      p {
+        text-align: center;
+        font-size: 30px;
+        padding: 60px 15px;
+        color: #fff;
+      }
+    }
+  }
+  .list {
+    height: 45px;
+    overflow: hidden;
+    .videodata {
+      border-radius: 10px;
+      background: #cccccc8f;
+      height: 39px;
+      line-height: 39px;
+      text-align: center;
+      margin: 2px 0 0 0;
+      font-weight: bold;
+    }
+    .videodata:hover {
+      cursor: pointer;
+      color: #fff;
+      background: #409eff;
+    }
+    .indexClass {
+      border-radius: 10px;
+      height: 39px;
+      line-height: 39px;
+      text-align: center;
+      margin: 2px 0 0 0;
+      font-weight: bold;
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+</style>

src/views/achieveLive/apply.vue

@@ -71,7 +71,7 @@ export default {
     async search() {
       let data = { name: this.user.name, phone: this.user.phone, user_id: this.user.id, dock_id: this.dock_id };
       this.$set(this, `form`, data);
-      let res = await this.query({ user_id: this.user.id, stauts: '2' });
+      let res = await this.query({ user_id: this.user.id, status: '2' });
       if (this.$checkRes(res)) {
         this.$set(this, `goodsList`, res.data);
       }

src/views/achieveLive/detail.vue

@@ -2,39 +2,37 @@
   <div id="detail">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="top">
-          <div class="w_1200">
-            <topInfo :info="liveInfo"></topInfo>
-          </div>
+        <el-col :span="24" class="one">
+          <top :info="info"></top>
         </el-col>
-        <el-col :span="24" class="info">
+        <el-col :span="24" class="two">
           <div class="w_1200">
-            <el-col :span="24" class="one">
+            <el-col :span="24" class="two_1">
               <el-col :span="12" class="left">
-                <videoData :info="liveInfo"></videoData>
+                <video-data :info="info"></video-data>
               </el-col>
               <el-col :span="12" class="right">
-                <imgtxtData></imgtxtData>
+                <imgtext-data></imgtext-data>
               </el-col>
             </el-col>
-            <el-col :span="24" class="two">
-              <productData></productData>
+            <el-col :span="24" class="two_2">
+              <product-data></product-data>
             </el-col>
-            <el-col :span="24" class="thr">
-              <expertData></expertData>
+            <el-col :span="24" class="two_3">
+              专家
             </el-col>
-            <el-col :span="24" class="four">
+            <!-- <el-col :span="24" class="two_4">
               <el-image :src="fourImg"> </el-image>
-            </el-col>
-            <el-col :span="24" class="five">
+            </el-col> -->
+            <el-col :span="24" class="two_5">
               <el-col :span="8" class="left">
-                <guestData></guestData>
+                嘉宾
               </el-col>
-              <el-col :span="8" class="cen">
-                <projectData></projectData>
+              <el-col :span="8" class="center">
+                项目
               </el-col>
               <el-col :span="8" class="right">
-                <chatData></chatData>
+                公共
               </el-col>
             </el-col>
           </div>
@@ -49,40 +47,37 @@
 
 <script>
 import foot from '@common/src/components/common/foot.vue';
-import topInfo from './detail/topInfo.vue';
+import top from './detail/top.vue';
 import videoData from './detail/videoData.vue';
-import imgtxtData from './detail/imgtxtData.vue';
+import imgtextData from './detail/imgtextData.vue';
 import productData from './detail/productData.vue';
-import expertData from './detail/expertData.vue';
-import guestData from './detail/guestData.vue';
-import projectData from './detail/projectData.vue';
-import chatData from './detail/chatData.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
   name: 'detail',
   props: {},
-  components: { foot, topInfo, videoData, imgtxtData, productData, expertData, guestData, projectData, chatData },
+  components: {
+    foot,
+    top,
+    videoData,
+    imgtextData,
+    productData,
+  },
   data: function() {
     return {
-      // 展会详情
-      liveInfo: {},
-      // 第四部分
       fourImg: require('@common/src/assets/live/top_bg.png'),
+      info: {},
     };
   },
-  async created() {
-    await this.searchInfo();
+  created() {
+    if (this.id) this.search();
   },
   methods: {
     ...dock(['fetch']),
-    async searchInfo() {
+    async search() {
       let res = await this.fetch(this.id);
       if (this.$checkRes(res)) {
-        this.$set(this, `liveInfo`, res.data);
+        this.$set(this, `info`, res.data);
       }
     },
   },
@@ -92,22 +87,23 @@ export default {
       return this.$route.query.id;
     },
   },
-  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .main {
-  .top {
-    background: url('~@common/src/assets/live/dock_top.png');
-    height: 480px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .info {
-    min-height: 500px;
-    background: #fcfcfd;
-    .one {
+  .two {
+    .two_1 {
       height: 480px;
       background-color: #fff;
       margin: 0 0 15px 0;
@@ -115,7 +111,9 @@ export default {
         width: 49%;
         height: 480px;
         margin: 0 15px 0 0;
-        border: 4px solid #000;
+        // border: 4px solid #000;
+        box-shadow: 0 0 5px #ccc;
+        border-radius: 5px;
       }
       .right {
         width: 49.5%;
@@ -124,21 +122,21 @@ export default {
         border-radius: 5px;
       }
     }
-    .two {
+    .two_2 {
       height: 620px;
       background-color: #fff;
       box-shadow: 0 0 5px #ccc;
       border-radius: 5px;
       margin: 0 0 15px 0;
     }
-    .thr {
+    .two_3 {
       height: 560px;
       background-color: #fff;
       box-shadow: 0 0 5px #ccc;
       border-radius: 5px;
       margin: 0 0 15px 0;
     }
-    .four {
+    .two_4 {
       height: 120px;
       box-shadow: 0 0 5px #ccc;
       border-radius: 5px;
@@ -149,7 +147,7 @@ export default {
         border-radius: 5px;
       }
     }
-    .five {
+    .two_5 {
       height: 510px;
       background-color: #fff;
       margin: 0 0 15px 0;
@@ -161,7 +159,7 @@ export default {
         border-radius: 5px;
         margin: 0 10px 0 0;
       }
-      .cen {
+      .center {
         width: 33%;
         height: 510px;
         overflow: hidden;

src/views/achieveLive/detail/imgtextData.vue

@@ -0,0 +1,192 @@
+<template>
+  <div id="imgtextData">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-tabs v-model="activeName" type="card">
+            <el-tab-pane label="图文直播" name="first">
+              <el-col :span="24" class="first">
+                <el-col :span="24" class="imgList" v-for="(item, index) in imgList" :key="index">
+                  <el-col :span="24" class="user">
+                    <span>[{{ getDate(item.meta) }}]</span>
+                    <span>展会负责人</span>
+                    <span>
+                      <el-link v-if="item.file_url" :href="item.file_url" target="_blank" :underline="false" class="videoPlay">视频播放</el-link>
+                    </span>
+                  </el-col>
+                  <el-col :span="24" class="content">
+                    {{ item.content }}
+                  </el-col>
+                  <el-col :span="24" class="image">
+                    <!-- <el-image :src="tag.img_url" v-for="(tag, tagindex) in item.url" :key="tagindex"></el-image> -->
+                    <el-image :src="item.img_url">
+                      <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline"></i>
+                      </div>
+                    </el-image>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="洽谈合作" name="second">
+              <el-col :span="24" class="second">
+                <el-col :span="24" class="secondList" v-for="(item, index) in secondList" :key="index">
+                  <span>[{{ getDate(item.meta) }}]</span>
+                  <span class="textOver">{{ item.d_name }}</span>
+                  <span>与</span>
+                  <span class="textOver">{{ item.s_name }}</span>
+                  <span>{{ getStatus(item.status) }}</span>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="达成意向" name="third">
+              <el-col :span="24" class="second">
+                <el-col :span="24" class="secondList" v-for="(item, index) in thirdList" :key="index">
+                  <span>[{{ getDate(item.meta) }}]</span>
+                  <span class="textOver">{{ item.d_name }}</span>
+                  <span>与</span>
+                  <span class="textOver">{{ item.s_name }}</span>
+                  <span>{{ getStatus(item.status) }}</span>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+            <el-tab-pane label="交易完成" name="fourth">
+              <el-col :span="24" class="second">
+                <el-col :span="24" class="secondList" v-for="(item, index) in fourthList" :key="index">
+                  <span>[{{ getDate(item.meta) }}]</span>
+                  <span class="textOver">{{ item.d_name }}</span>
+                  <span>与</span>
+                  <span class="textOver">{{ item.s_name }}</span>
+                  <span>{{ getStatus(item.status) }}</span>
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dockImgtxt } = createNamespacedHelpers('dockImgtxt');
+const { mapActions: dockTranscation } = createNamespacedHelpers('dockTranscation');
+var moment = require('moment');
+export default {
+  name: 'imgtextData',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      activeName: 'first',
+      // 图文列表
+      imgList: [],
+      // 正在洽谈
+      secondList: [],
+      // 达成意向
+      thirdList: [],
+      // 交易完成
+      fourthList: [],
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...dockImgtxt(['query']),
+    ...dockTranscation({ transQuery: 'query' }),
+    async search() {
+      // 查询图文
+      let res = await this.query({ dock_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `imgList`, res.data);
+      }
+      res = await this.transQuery({ dock_id: this.id });
+      if (this.$checkRes(res)) {
+        let second = res.data.filter(i => i.status == '0');
+        if (second) this.$set(this, `secondList`, second);
+        let third = res.data.filter(i => i.status == '1');
+        if (third) this.$set(this, `thirdList`, third);
+        let fourth = res.data.filter(i => i.status == '3');
+        if (fourth) this.$set(this, `fourthList`, fourth);
+      }
+    },
+    getDate(val) {
+      let newDate = moment(val.createdAt).format('hh:mm:ss');
+      if (newDate) return newDate;
+    },
+    getStatus(val) {
+      if (val == '0') return '正在洽谈';
+      else if (val == '1') return '达成意向';
+      else if (val == '2') return '交易备案';
+      else if (val == '3') return '交易完成';
+      else if (val == '4') return '交易失败';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    /deep/.el-tabs__header {
+      margin: 0 0 10px 0;
+    }
+    .first {
+      padding: 0 10px;
+      height: 415px;
+      overflow-y: auto;
+      .imgList {
+        padding: 10px 0 0 0;
+        border-bottom: 1px dashed #ff0000;
+        .user {
+          margin: 0 0 5px 0;
+          span {
+            font-size: 16px;
+          }
+          span:nth-child(2) {
+            padding: 0 0 0 10px;
+            font-weight: bold;
+          }
+          span:nth-child(3) {
+            padding: 0 0 0 20px;
+            .el-link {
+              font-weight: bold;
+              font-size: 16px;
+              top: -3px;
+            }
+          }
+        }
+        .content {
+          padding: 0 0 10px 0;
+          text-indent: 2rem;
+        }
+        .image {
+          .el-image {
+            width: 100%;
+            height: 250px;
+            margin: 0 0 10px 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/achieveLive/detail/productData.vue

@@ -1,234 +1,48 @@
 <template>
   <div id="productData">
     <el-row>
-      <el-col :span="24" class="style">
-        <el-tabs v-model="active" type="card">
-          <el-tab-pane label="技术成果" name="first">
-            <el-col :span="24" class="first">
-              <el-col :span="5" class="achieveList" v-for="(item, index) in achieveList" :key="index">
-                <el-col :span="24" class="top">
-                  <p class="textOver">{{ item.name || '暂无' }}</p>
-                  <p>{{ item.achievebrief || '暂无' }}</p>
-                  <p class="textOver">领域：{{ item.field || '暂无' }}</p>
-                  <p class="textOver">联系人{{ item.contacts || '暂无' }}</p>
-                </el-col>
-                <el-col :span="24" class="down">
-                  <el-button size="mini" type="primary" @click="detail(item, '1')">详情</el-button>
-                  <el-button size="mini" type="success" @click="trans(item, '1')">对接</el-button>
-                </el-col>
-              </el-col>
-            </el-col>
-            <el-col :span="24" class="btn">
-              <el-button type="primary" size="mini" @click="moreBtn('1')">查看更多项目</el-button>
-            </el-col>
-          </el-tab-pane>
-          <el-tab-pane label="科技需求" name="second">
-            <el-col :span="24" class="second">
-              <el-col :span="5" class="techolList" v-for="(item, index) in techolList" :key="index">
-                <el-col :span="24" class="top">
-                  <p>{{ item.name || '暂无' }}</p>
-                  <p class="textOver">领域：{{ item.field || '暂无' }}</p>
-                </el-col>
-                <el-col :span="24" class="down">
-                  <el-button size="mini" type="primary" @click="detail(item, '0')">详情</el-button>
-                  <el-button size="mini" type="success" @click="trans(item, '0')">对接</el-button>
-                </el-col>
-              </el-col>
-            </el-col>
-            <el-col :span="24" class="btn">
-              <el-button type="primary" size="mini" @click="moreBtn('0')">查看更多项目</el-button>
-            </el-col>
-          </el-tab-pane>
-        </el-tabs>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-tabs v-model="activeName" type="card">
+            <el-tab-pane label="技术成果" name="first">技术成果</el-tab-pane>
+            <el-tab-pane label="科技需求" name="second">科技需求</el-tab-pane>
+          </el-tabs>
+        </el-col>
       </el-col>
     </el-row>
-    <el-dialog title="技术成果详情" :visible.sync="dialog" width="50%" :before-close="handleClose">
-      <achieveInfo :form="info" :showBtn="false"></achieveInfo>
-    </el-dialog>
-    <el-dialog title="科技需求详情" :visible.sync="twoDialog" width="50%" :before-close="handleClose">
-      <techolInfo :form="info" :showBtn="false"></techolInfo>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import achieveInfo from '../product/achieveInfo.vue';
-import techolInfo from '../product/techolInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: dock } = createNamespacedHelpers('dock');
-const { mapActions: dockUser } = createNamespacedHelpers('dockUser');
 export default {
   name: 'productData',
   props: {},
-  components: {
-    achieveInfo,
-    techolInfo,
-  },
+  components: {},
   data: function() {
     return {
-      active: 'first',
-      achieveList: [],
-      techolList: [
-        {
-          name: '科技需求',
-          field: '所属领域',
-        },
-      ],
-      // 技术成果详情
-      dialog: false,
-      info: {},
-      // 科技需求详情
-      twoDialog: false,
-      twoinfo: {},
+      activeName: 'first',
     };
   },
-  async created() {
-    await this.search();
-  },
-  methods: {
-    ...dock(['productQuery']),
-    ...dockUser(['query']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      info.dock_id = this.id;
-      const res = await this.query({ skip, limit, ...info });
-      if (this.$checkRes(res)) {
-        for (const val of res.data) {
-          // 成果
-          let achieve = val.goodsList.filter(i => i.type == '1');
-          if (achieve) this.$set(this, `achieveList`, achieve);
-          // 需求
-          let techol = val.goodsList.filter(i => i.type == '0');
-          if (techol) this.$set(this, `techolList`, techol);
-        }
-      }
-    },
-    // 查看更多项目
-    moreBtn(type) {
-      this.$router.push({ path: '/achieveLive/product/index', query: { dock_id: this.id, type } });
-    },
-    // 详情
-    detail(data, type) {
-      this.$set(this, `info`, data);
-      // 科技需求
-      if (type == '0') this.twoDialog = true;
-      // 技术成果
-      else if (type == '1') this.dialog = true;
-    },
-    // 对接
-    trans(data, type) {
-      this.$router.push({ path: '/achieveLive/product/detail', query: { dock_id: this.id, id: data.id, type: data.type } });
-    },
-    // 取消查看
-    handleClose() {
-      this.dialog = false;
-      this.twoDialog = false;
-    },
-  },
+  created() {},
+  methods: {},
   computed: {
     ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
   },
-  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped>
-.style {
-  .btn {
-    text-align: center;
-  }
-  .first {
-    padding: 0 10px;
-    height: 530px;
-    overflow: hidden;
-    .achieveList {
-      width: 18.9%;
-      height: 250px;
-      background: url('~@common/src/assets/achieve.png');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      margin: 0 15px 15px 0;
-      padding: 22px 22px 8px 22px;
-      .top {
-        height: 190px;
-        overflow: hidden;
-        p:nth-child(1) {
-          font-size: 18px;
-          font-weight: bold;
-          padding: 5px 0;
-        }
-        p:nth-child(2) {
-          font-size: 12px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 6;
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          padding: 0 5px;
-          height: 105px;
-          line-height: 17px;
-        }
-        p:nth-child(3) {
-          font-size: 14px;
-          padding: 4px 0 0 0;
-        }
-        p:nth-child(4) {
-          font-size: 14px;
-          padding: 4px 0 0 0;
-        }
-      }
-      .down {
-        text-align: center;
-      }
-    }
-    .achieveList:nth-child(5n) {
-      margin: 0 0 15px 0;
-    }
-  }
-  .second {
-    padding: 0 10px;
-    height: 530px;
-    overflow: hidden;
-    .techolList {
-      width: 18.9%;
-      height: 250px;
-      border: 1px solid #ccc;
-      border-radius: 5px;
-      margin: 0 15px 15px 0;
-      padding: 22px 22px 8px 22px;
-      .top {
-        height: 190px;
-        overflow: hidden;
-        p:nth-child(1) {
-          height: 145px;
-          text-align: center;
-          font-size: 18px;
-          margin: 0 0 10px 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 6;
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-        }
-        p:nth-child(2) {
-          text-align: center;
-          font-size: 16px;
-        }
-      }
-      .down {
-        text-align: center;
-      }
-    }
-    .techolList:nth-child(5n) {
-      margin: 0 0 15px 0;
-    }
-  }
-  /deep/.el-tabs__header {
-    margin: 0 0 10px 0;
-  }
-}
-</style>
+<style lang="less" scoped></style>

src/views/achieveLive/detail/top.vue

@@ -0,0 +1,163 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <div class="w_1200">
+            <el-col :span="24" class="one_1">
+              {{ info.title }}
+            </el-col>
+            <el-col :span="24" class="one_2">
+              主办方：<span>{{ info.sponsor }}</span>
+            </el-col>
+            <el-col :span="24" class="one_3">
+              <p v-for="(item, index) in list" :key="index">
+                <span>{{ item.name }}</span>
+                <span>{{ item.num || 0 }}{{ item.unit }}</span>
+              </p>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: statistics } = createNamespacedHelpers('statistics');
+export default {
+  name: 'top',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          name: '同时在线',
+          num: '252',
+          unit: '人',
+        },
+        {
+          name: '特邀嘉宾',
+          num: 198,
+          unit: '人',
+        },
+        {
+          name: '洽谈合作',
+          num: 0,
+          unit: '项',
+        },
+        {
+          name: '达成意向',
+          num: 0,
+          unit: '项',
+        },
+        {
+          name: '交易完成',
+          num: 0,
+          unit: '项',
+        },
+        {
+          name: '参展项目',
+          num: 13,
+          unit: '项',
+        },
+      ],
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...statistics(['dockQuery']),
+    async search() {
+      // res = await this.dockQuery({ dock_id: this.id });
+      // if (this.$checkRes(res)) {
+      //   console.log(res);
+      //   this.$set(this, `list`, res.data);
+      // }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    background: url('~@common/src/assets/live/dock_top.png');
+    height: 480px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .one_1 {
+      text-align: center;
+      font-size: 40px;
+      color: #fff;
+      padding: 6% 8% 0 10%;
+      height: 185px;
+      margin: 0 0 40px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+    }
+    .one_2 {
+      text-align: center;
+      font-size: 30px;
+      color: #fff;
+      margin: 0 0 50px 0;
+    }
+    .one_3 {
+      p {
+        float: left;
+        width: 15%;
+        background: #fff;
+        margin: 0 10px 0 10px !important;
+        color: #000;
+        height: 50px;
+        line-height: 50px;
+        border-radius: 30px;
+        span:first-child {
+          display: inline-block;
+          width: 56%;
+          text-align: center;
+          height: 50px;
+          line-height: 50px;
+          font-size: 16px;
+          background: red;
+          border-radius: 30px;
+          color: #fff;
+          font-weight: 700;
+        }
+        span:last-child {
+          display: inline-block;
+          width: 42%;
+          text-align: center;
+          font-size: 15px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/achieveLive/detail/videoData.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="videoData">
     <el-row>
-      <el-col :span="24" class="style">
+      <el-col :span="24" class="main">
         <el-col :span="24" class="top">
           <el-col :span="4" class="txt">
             <span style="color:#FF8400;">视频</span>
@@ -23,7 +23,7 @@
         <el-col :span="24" class="list">
           <swiper :list="videoList" :options="options">
             <template v-slot="{ index, item }">
-              <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">{{ item.videointro }}</p>
+              <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">{{ item.brief }}</p>
             </template>
           </swiper>
         </el-col>
@@ -35,13 +35,15 @@
 <script>
 import swiper from '@c/frame/swiper-frame.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: dockVideo } = createNamespacedHelpers('dockVideo');
 export default {
   name: 'videoData',
   props: {
     info: { type: Object },
   },
-  components: { swiper },
+  components: {
+    swiper,
+  },
   data: function() {
     return {
       // 视频路径
@@ -64,18 +66,18 @@ export default {
     await this.search();
   },
   methods: {
-    ...dock(['fetch']),
+    ...dockVideo(['query']),
     async search() {
-      let res = await this.fetch(this.id);
+      let res = await this.query({ dock_id: this.id });
       if (this.$checkRes(res)) {
-        this.$set(this, `videoList`, res.data.videodata);
+        this.$set(this, `videoList`, res.data);
         this.changeMenu('0', this.videoList[0]);
       }
     },
     changeMenu(index, item) {
       if (item) {
         this.menuIndex = index;
-        this.$set(this, `videoPath`, item.file_path);
+        this.$set(this, `videoPath`, item.file_url);
       }
     },
   },
@@ -85,12 +87,21 @@ export default {
       return this.$route.query.id;
     },
   },
-  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.style {
+.main {
   .top {
     height: 60px;
     overflow: hidden;
@@ -112,16 +123,16 @@ export default {
     }
   }
   .video {
-    height: 365px;
+    height: 370px;
     overflow: hidden;
     video {
       width: 100%;
-      height: 365px;
+      height: 370px;
       background: #000;
       object-fit: fill;
     }
     .videointro {
-      height: 365px;
+      height: 370px;
       text-align: center;
       background-image: url('~@common/src/assets/directBack.png');
       background-size: 100% 100%;
@@ -137,6 +148,7 @@ export default {
   .list {
     height: 45px;
     overflow: hidden;
+    padding: 5px;
     .videodata {
       border-radius: 10px;
       background: #cccccc8f;

src/views/live/parts/achieveLive.vue

@@ -31,7 +31,7 @@ export default {
   },
   data: function() {
     return {
-      active: '2',
+      active: '1',
       // 正在直播
       oneList: [],
       // 下期预告