1

src/views/live/parts/dockchat.vue

@@ -23,6 +23,25 @@
         </el-col>
       </el-col>
     </el-row>
+    <el-col :span="24" class="sendtxt">
+      <van-button icon="chat" type="info" round @click="show = true" />
+    </el-col>
+    <van-popup v-model="show" position="bottom" class="popup">
+      <van-col span="24" class="one">
+        <p>快捷发言</p>
+        <p>
+          <span v-for="(i, index) in kjfyList" :key="index" @click="changekjfy(i.name)">{{ i.name }}</span>
+        </p>
+      </van-col>
+      <van-col span="24" class="two">
+        <van-col span="20">
+          <van-field v-model="text" placeholder="请输入内容" />
+        </van-col>
+        <van-col span="4">
+          <van-button round type="info" @click="send()">发言</van-button>
+        </van-col>
+      </van-col>
+    </van-popup>
   </div>
 </template>
 
@@ -43,6 +62,11 @@ export default {
       // 展会id
       dock_id: '',
       list: [],
+      // 发言
+      show: false,
+      text: '',
+      // 快捷发言列表
+      kjfyList: [{ name: '欢迎欢迎' }, { name: '科技创新' }, { name: '大咖云集' }],
     };
   },
   async created() {
@@ -56,7 +80,7 @@ export default {
     ...chat(['query', 'create']),
     async search() {
       const res = await this.query({ skip: 0, dock_id: this.dock_id });
-      if (this.$checkRes(res)) this.$set(this, `list`, _.reverse(res.data));
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
     },
     isEmotion(word) {
       return word.startsWith('<img');
@@ -74,6 +98,26 @@ export default {
         this.list.push(body);
         this.text = '';
       }
+      this.search();
+    },
+    // 发言
+    async send() {
+      if (this.text != '') {
+        let object = { sender_name: this.user.name ? this.user.name : '游客', content: this.text, dock_id: this.dock_id };
+        if (this.user.uid) {
+          object.sender_id = this.user.uid;
+          object.role = this.user.role;
+        }
+        let res = await this.create(object);
+        this.text = '';
+        this.show = false;
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+      } else this.$message.error('请输入信息后发送');
+    },
+    // 选择快捷发言
+    changekjfy(data) {
+      this.$set(this, `text`, data);
+      this.send();
     },
   },
   filters: {
@@ -152,4 +196,59 @@ export default {
     }
   }
 }
+// 发言
+.sendtxt {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 100%;
+  z-index: 999;
+  text-align: right;
+}
+.popup {
+  .one {
+    color: #fff;
+    p:nth-child(1) {
+      text-align: center;
+      padding: 25px 0;
+      font-size: 20px;
+    }
+    p:nth-child(2) {
+      padding: 0 10px;
+      text-align: center;
+      span {
+        background-color: #409eff9f;
+        display: inline-block;
+        border-radius: 25px;
+        margin: 0 10px 10px 0;
+        font-size: 15px;
+        padding: 5px 10px;
+      }
+      span:nth-child(4n) {
+        margin: 0 0 10px 0;
+      }
+    }
+  }
+  .two {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 5px 5px;
+    height: 40px;
+    /deep/.van-cell {
+      padding: 3px 5px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      width: 98%;
+    }
+    /deep/.van-button {
+      height: 31px;
+    }
+  }
+}
+/deep/.van-popup {
+  height: 30%;
+  background-color: #0000005f;
+}
 </style>