|
@@ -2,38 +2,65 @@
|
|
|
<div id="chat">
|
|
|
<van-row>
|
|
|
<van-col span="24" class="main">
|
|
|
- <van-col span="24" class="one">
|
|
|
+ <van-col span="24" class="one" :style="{ height: client.height - 87 + 'px' }">
|
|
|
<template v-for="(i, index) in list">
|
|
|
<template v-if="isSender(i, index)">
|
|
|
<van-col span="24" class="senderTime" :key="`div${i.id}${index}`">
|
|
|
<span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
|
|
|
- <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
+ <span v-if="i.type == '1'" v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
+ <span v-else-if="i.type == '2'">
|
|
|
+ {{ getFile(i.file) }}<van-button type="info" size="mini" class="downBtn" @click="downFile(i.file)">下载</van-button>
|
|
|
+ </span>
|
|
|
</van-col>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<van-col span="24" class="receverTime" :key="`div${i.id}${index}`">
|
|
|
<span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
|
|
|
- <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
+ <span v-if="i.type == '1'" v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
+ <span v-else-if="i.type == '2'">
|
|
|
+ {{ getFile(i.file) }}<van-button type="info" size="mini" class="downBtn" @click="downFile(i.file)">下载</van-button>
|
|
|
+ </span>
|
|
|
</van-col>
|
|
|
</template>
|
|
|
</template>
|
|
|
</van-col>
|
|
|
<van-col span="24" class="two">
|
|
|
- <van-col span="20" class="cont">
|
|
|
+ <van-col span="17" class="cont">
|
|
|
<van-field v-model="content" placeholder="请输入内容" />
|
|
|
</van-col>
|
|
|
- <van-col span="4" class="btn">
|
|
|
+ <van-col span="7" class="btn">
|
|
|
<van-button type="info" size="small" @click="send">发送</van-button>
|
|
|
+ <van-button type="info" size="small" @click="other">其它</van-button>
|
|
|
</van-col>
|
|
|
</van-col>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
+ <van-dialog v-model="show" class="dialog" title="文件" :showConfirmButton="false" :showCancelButton="false" :closeOnClickOverlay="false">
|
|
|
+ <van-form>
|
|
|
+ <van-field name="file" label="文件">
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ :fileList="fileForm.file"
|
|
|
+ :max-count="1"
|
|
|
+ :after-read="(file) => toUpload(file, 'file')"
|
|
|
+ @delete="(file) => toDelete(file, 'file')"
|
|
|
+ accept="file"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <div class="btn">
|
|
|
+ <van-button type="danger" size="small" @click="twoClose">取消发送</van-button>
|
|
|
+ <van-button type="info" size="small" @click="twoSend">提交发送</van-button>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { Toast } from 'vant';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: upload } = createNamespacedHelpers('upload');
|
|
|
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
|
|
|
const { mapActions: patentchat } = createNamespacedHelpers('patentchat');
|
|
|
const _ = require('lodash');
|
|
@@ -47,6 +74,11 @@ export default {
|
|
|
content: '',
|
|
|
// 消息列表
|
|
|
list: [],
|
|
|
+ // 浏览器高度
|
|
|
+ client: {},
|
|
|
+ // 发送其他内容
|
|
|
+ show: false,
|
|
|
+ fileForm: {},
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -54,6 +86,7 @@ export default {
|
|
|
this.search();
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...upload(['upload']),
|
|
|
...adminLogin({ adminQuery: 'query' }),
|
|
|
...patentchat(['create', 'query']),
|
|
|
// 查询
|
|
@@ -63,17 +96,18 @@ export default {
|
|
|
this.$set(this, `list`, res.data);
|
|
|
}
|
|
|
},
|
|
|
- // 发言
|
|
|
+ // 发言,正常内容
|
|
|
async send() {
|
|
|
if (this.content) {
|
|
|
- let data = {
|
|
|
+ let arr = {
|
|
|
+ type: '1',
|
|
|
content: this.content,
|
|
|
sender_id: this.user._id,
|
|
|
sender_name: this.user.name,
|
|
|
receiver_id: this.adminInfo._id,
|
|
|
receiver_name: this.adminInfo.name,
|
|
|
};
|
|
|
- let res = await this.create(data);
|
|
|
+ let res = await this.create(arr);
|
|
|
if (this.$checkRes(res)) {
|
|
|
this.$toast({ type: `success`, message: `发言成功` });
|
|
|
this.content = '';
|
|
@@ -83,6 +117,64 @@ export default {
|
|
|
this.$toast({ type: `fail`, message: `缺少必要信息` });
|
|
|
}
|
|
|
},
|
|
|
+ // 发言,发送文件
|
|
|
+ other() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ // 提交发送
|
|
|
+ async twoSend() {
|
|
|
+ let data = this.fileForm;
|
|
|
+ if (data.file) {
|
|
|
+ let data = {
|
|
|
+ type: '2',
|
|
|
+ file: data.file,
|
|
|
+ sender_id: this.user._id,
|
|
|
+ sender_name: this.user.name,
|
|
|
+ receiver_id: this.adminInfo._id,
|
|
|
+ receiver_name: this.adminInfo.name,
|
|
|
+ };
|
|
|
+ let res = await this.create(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$toast({ type: `success`, message: `发言成功` });
|
|
|
+ this.fileForm = { file: [] };
|
|
|
+ this.twoClose();
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$toast({ type: `fail`, message: `缺少必要信息` });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消发送
|
|
|
+ twoClose() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ async toUpload({ file }, model) {
|
|
|
+ // 上传,赋值
|
|
|
+ const res = await this.upload({ file, dir: 'chat' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this.fileForm, model, [{ name: res.name, url: res.uri }]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toDelete(file, model) {
|
|
|
+ const index = this.fileForm[model].findIndex((f) => _.isEqual(f, file));
|
|
|
+ this.fileForm[model].splice(index, 1);
|
|
|
+ },
|
|
|
+ // 处理文件
|
|
|
+ getFile(data) {
|
|
|
+ if (data.length > 0) {
|
|
|
+ return data[0].name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 下载文件
|
|
|
+ downFile(data) {
|
|
|
+ if (data.length > 0) {
|
|
|
+ let url = data.map((i) => i.url);
|
|
|
+ window.location.href = `${process.env.VUE_APP_HOST}/${url[0]}`;
|
|
|
+ } else {
|
|
|
+ this.$toast({ type: `fail`, message: `非正常文件,无法下载` });
|
|
|
+ }
|
|
|
+ },
|
|
|
// 判断发言人
|
|
|
isSender(data) {
|
|
|
return this.user.id !== data.sender_id;
|
|
@@ -95,6 +187,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ let client = {
|
|
|
+ height: document.documentElement.clientHeight || document.body.clientHeight,
|
|
|
+ width: document.documentElement.clientWidth || document.body.clientWidth,
|
|
|
+ };
|
|
|
+ this.$set(this, `client`, client);
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
@@ -114,7 +213,6 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.main {
|
|
|
.one {
|
|
|
- height: 350px;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
padding: 10px 5px;
|
|
@@ -170,4 +268,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.dialog {
|
|
|
+ .btn {
|
|
|
+ text-align: center;
|
|
|
+ .van-button {
|
|
|
+ margin: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.downBtn {
|
|
|
+ margin: 0 0 0 8px;
|
|
|
+ /deep/.van-button__text {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|