更新展会管理

src/layout/dock/applyForm.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="applyForm">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="申请人身份" prop="buyer">
+            <el-radio-group v-model="form.buyer">
+              <el-radio label="0">买家</el-radio>
+              <el-radio label="1">卖家</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <span v-if="form.buyer == '1'">
+            <el-form-item label="选择产品" prop="goodsList">
+              <el-select v-model="form.goodsList" placeholder="请选择选择产品">
+                <el-option v-for="(item, index) in goodsLists" :key="index" :label="item.name" :value="item.id"> </el-option>
+              </el-select>
+            </el-form-item>
+          </span>
+          <el-form-item label="联系人" prop="contact">
+            <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="contact_tel">
+            <el-input v-model="form.contact_tel" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item label="电子邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
+          </el-form-item>
+          <el-form-item label="单位名称" prop="company">
+            <el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
+          </el-form-item>
+          <el-row style="text-align:center">
+            <el-button type="primary" @click="onSubmit('form')">立即申请</el-button>
+            <el-button @click="restBtn('form')">取消</el-button>
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'applyForm',
+  props: {
+    form: null,
+  },
+  components: {},
+  data: function() {
+    return {
+      rules: {
+        buyer: [{ required: true, message: '请选择申请身份', trigger: 'blur' }],
+        goodsList: [{ required: false, message: '请选择产品', trigger: 'blur' }],
+        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+        contact_tel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+        email: [{ required: false, message: '请输入电子邮箱', trigger: 'blur' }],
+        company: [{ required: false, message: '请输入单位名称', trigger: 'blur' }],
+      },
+      goodsLists: [],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.form });
+    },
+    restBtn() {
+      this.$emit('restBtn', { data: this.form });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  padding: 0 10px;
+}
+</style>

src/router/index.js

@@ -86,6 +86,13 @@ const routes = [
     meta: { title: '展会管理', isleftarrow: true },
     component: () => import('../views/userCenter/dock/index.vue'),
   },
+  // 用户-申请对接会
+  {
+    path: '/userCenter/dock/apply',
+    name: 'dock_apply',
+    meta: { title: '申请对接会', isleftarrow: true },
+    component: () => import('../views/userCenter/dock/apply.vue'),
+  },
   // 用户-个人中心
   {
     path: '/userCenter/user/index',

src/views/userCenter/dock/apply.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <applyForm :form="form" @onSubmit="onSubmit" @restBtn="restBtn"></applyForm>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import applyForm from '@/layout/dock/applyForm.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+    applyForm, //申请
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+    // 申請
+    form: {},
+  }),
+  created() {},
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  methods: {
+    onSubmit({ data }) {
+      console.log(data);
+    },
+    restBtn() {
+      this.form = {};
+      this.$router.push({ path: '/userCenter/dock/index' });
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+</style>

src/views/userCenter/dock/index.vue

@@ -20,7 +20,7 @@
                   <van-icon name="live" />
                   <p>已往直播</p>
                 </template>
-                <alreadyList></alreadyList>
+                <alreadyList :alreadyLive="alreadyLive"></alreadyList>
               </van-tab>
             </van-tabs>
           </el-col>
@@ -55,6 +55,8 @@ export default {
     active: '1',
     // 下期直播
     nextLive: [],
+    // 已往直播
+    alreadyLive: [],
   }),
   created() {
     this.searchList();
@@ -67,6 +69,10 @@ export default {
       if (this.$checkRes(res)) {
         this.$set(this, `nextLive`, res.data);
       }
+      res = await this.dockQuery({ skip, limit, status: 2, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `alreadyLive`, res.data);
+      }
     },
   },
   mounted() {

src/views/userCenter/dock/parts/alreadyList.vue

@@ -1,6 +1,21 @@
 <template>
   <div id="alreadyList">
-    <p>以往直播</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(item, index) in alreadyLive" :key="index">
+          <el-col :span="4" class="left">
+            <i class="el-icon-video-camera-solid"></i>
+            <!-- <el-button type="primary" size="mini">申请</el-button> -->
+          </el-col>
+          <el-col :span="20" class="right">
+            <p>{{ item.title }}</p>
+            <p>开始时间：{{ item.start_time }}</p>
+            <p>报名截止时间：{{ item.join_end }}</p>
+            <p>简介：{{ item.desc }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -8,7 +23,9 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'alreadyList',
-  props: {},
+  props: {
+    alreadyLive: null,
+  },
   components: {},
   data: function() {
     return {};
@@ -27,4 +44,41 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.list {
+  padding: 0 15px 10px 15px;
+  background-color: #fff;
+  border-bottom: 1px solid red;
+  .left {
+    text-align: center;
+    i {
+      font-size: 30px;
+      padding: 15px 0;
+    }
+  }
+  .right {
+    font-size: 14px;
+    color: #666;
+    padding: 0 10px;
+    p:first-child {
+      padding: 5px 0;
+      color: #000;
+    }
+    p:nth-child(2) {
+      padding: 0 0 5px 0;
+    }
+    p:nth-child(3) {
+      padding: 0 0 5px 0;
+    }
+    p:nth-child(4) {
+      padding: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 3;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+</style>

src/views/userCenter/dock/parts/nextList.vue

@@ -5,12 +5,13 @@
         <el-col :span="24" class="list" v-for="(item, index) in nextLive" :key="index">
           <el-col :span="4" class="left">
             <i class="el-icon-video-camera-solid"></i>
+            <el-button type="primary" size="mini" @click="$router.push({ path: '/userCenter/dock/apply', query: { id: item.id } })">申请</el-button>
           </el-col>
           <el-col :span="20" class="right">
             <p>{{ item.title }}</p>
             <p>开始时间：{{ item.start_time }}</p>
             <p>报名截止时间：{{ item.join_end }}</p>
-            <p>{{ item.desc }}</p>
+            <p>简介：{{ item.desc }}</p>
           </el-col>
         </el-col>
       </el-col>
@@ -45,27 +46,38 @@ export default {
 
 <style lang="less" scoped>
 .list {
-  padding: 0 15px;
+  padding: 0 15px 10px 15px;
   background-color: #fff;
   border-bottom: 1px solid red;
   .left {
-    padding: 15px 0;
     text-align: center;
     i {
-      font-size: 18px;
+      font-size: 30px;
+      padding: 15px 0;
     }
   }
   .right {
     font-size: 14px;
     color: #666;
+    padding: 0 10px;
     p:first-child {
+      padding: 5px 0;
       color: #000;
     }
     p:nth-child(2) {
+      padding: 0 0 5px 0;
     }
     p:nth-child(3) {
+      padding: 0 0 5px 0;
     }
     p:nth-child(4) {
+      padding: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 3;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
     }
   }
 }