163 lines
3.7 KiB
Vue
163 lines
3.7 KiB
Vue
<template>
|
|
<div class="message-send">
|
|
<div class="msg-content">
|
|
<el-input
|
|
type="textarea"
|
|
v-model="content"
|
|
rows="5"
|
|
placeholder="文本输入区"
|
|
/>
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:headers="headers"
|
|
action="/admin/common/file/upload"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
<div class="msg-opt">
|
|
<el-checkbox v-model="isRecommend" :false-label="2" :true-label="1"
|
|
>设为精选</el-checkbox
|
|
>
|
|
<el-dropdown
|
|
split-button
|
|
type="primary"
|
|
@click="sendAdvisorMessage(1)"
|
|
:disabled="!content"
|
|
>
|
|
发送并推送
|
|
<!-- <el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>仅发送</el-dropdown-item>
|
|
<el-dropdown-item>定时发送</el-dropdown-item>
|
|
</el-dropdown-menu> -->
|
|
</el-dropdown>
|
|
<el-button
|
|
type="primary"
|
|
:disabled="!imageUrl"
|
|
@click="sendAdvisorMessage(2)"
|
|
>发送图片</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { sendAdvisorMessage } from "@/api/circle.js";
|
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
|
props: {
|
|
interactiveType: {
|
|
type: Number // 交互类型:1群聊;2私聊
|
|
},
|
|
groupId: {
|
|
type: Number
|
|
},
|
|
replyId: {
|
|
type: Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
headers: {
|
|
Authorization: "Bearer " + getToken(),
|
|
"X-File-Size": 0
|
|
},
|
|
imageUrl: "",
|
|
content: "",
|
|
isRecommend: 2
|
|
};
|
|
},
|
|
methods: {
|
|
handleAvatarSuccess(res, file) {
|
|
this.imageUrl = res.data.url;
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
if (file.type !== "image/jpeg" && file.type !== "image/png") {
|
|
this.$message.error("上传只支持jpeg格式和png格式!");
|
|
return false;
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
return flase;
|
|
}
|
|
return true;
|
|
},
|
|
async sendAdvisorMessage(contentType) {
|
|
let ret = await sendAdvisorMessage({
|
|
content: contentType === 1 ? this.content : this.imageUrl,
|
|
groupId: this.groupId,
|
|
isRecommend: this.isRecommend,
|
|
interactiveType: this.interactiveType,
|
|
replyId: this.replyId,
|
|
contentType
|
|
});
|
|
if (ret && ret.code === 0) {
|
|
this.$message({
|
|
message: "发送成功",
|
|
type: "success"
|
|
});
|
|
if (contentType === 1) {
|
|
this.content = "";
|
|
} else {
|
|
this.imageUrl = "";
|
|
}
|
|
this.$emit("sendCallBack", {});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.message-send {
|
|
padding-top: 10px;
|
|
}
|
|
.avatar-uploader ::v-deep .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 108px;
|
|
height: 108px;
|
|
line-height: 108px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 108px;
|
|
height: 108px;
|
|
display: block;
|
|
}
|
|
.msg-content {
|
|
display: flex;
|
|
::v-deep .el-upload--picture-card {
|
|
width: 108px;
|
|
height: 108px;
|
|
line-height: 108px;
|
|
}
|
|
}
|
|
.msg-opt {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
::v-deep .el-checkbox {
|
|
margin-right: 16px;
|
|
}
|
|
::v-deep .el-dropdown {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
</style>
|