|
|
@@ -30,27 +30,128 @@
|
|
|
}
|
|
|
.page5 {
|
|
|
width: 100vw;
|
|
|
- height: 100vh;
|
|
|
+ height: calc(100vh - 63px);
|
|
|
box-sizing: border-box;
|
|
|
- padding: 0 15px;
|
|
|
+ padding: 18px 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ /* overflow-x: unset; */
|
|
|
}
|
|
|
.chat_list {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 15px 0;
|
|
|
+ }
|
|
|
+ .custom_msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .my_msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-bottom: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .customchat_box {
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ max-width: 227px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+ .mychat_box {
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #1677FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ max-width: 227px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+ .chatbox_left {
|
|
|
+ width: 6px;
|
|
|
+ height: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .chatbox_right {
|
|
|
+ width: 10px;
|
|
|
+ height: 12px;
|
|
|
+ margin-left: -5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .headImg {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .chat_img {
|
|
|
+ max-width: 200px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .input_style {
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 22px;
|
|
|
+ height: 43px;
|
|
|
+ padding-right: 60px;
|
|
|
+ }
|
|
|
+ .send_btn {
|
|
|
+ width: 50px;
|
|
|
+ height: 33px;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 15px;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
<div id="box" class="box">
|
|
|
<!-- 聊天页 -->
|
|
|
- <div class="page5">
|
|
|
- <div class="chat_list">
|
|
|
- <div class="custom_msg">
|
|
|
- <image class="headImg" src="./img/prize-bg.png"></image>
|
|
|
+ <div ref="messageContent" class="page5">
|
|
|
+ <div class="chat_list" v-for="(item, index) in chatList" :key="index">
|
|
|
+ <div class="my_msg" v-if="item.self">
|
|
|
+ <div class="mychat_box" v-if="item.contentType === 0" v-html="item.content"></div>
|
|
|
+ <image class="chat_img" mode="aspectFit" v-else-if="item.contentType === 1" :src="item.content"></image>
|
|
|
+ <div class="mychat_box" v-else-if="item.contentType === 5" v-html="JSON.parse(item.content).curl"></div>
|
|
|
+ <div class="mychat_box" v-else-if="item.contentType === 33">小程序信息（不支持查看）</div>
|
|
|
+ <div class="mychat_box" v-else-if="item.contentType === 51">视频号信息（不支持查看）</div>
|
|
|
+ <div class="mychat_box" v-else-if="item.contentType === 100">图片已过期（不支持查看）</div>
|
|
|
+ <div class="mychat_box" v-else v-html="item.content"></div>
|
|
|
+ <image class="chatbox_right" src="./img/chatbox_right.png"></image>
|
|
|
+ <image class="headImg" :src="item.sendUrl"></image>
|
|
|
+ </div>
|
|
|
+ <div class="custom_msg" v-else>
|
|
|
+ <image class="headImg" :src="item.sendUrl"></image>
|
|
|
+ <image class="chatbox_left" src="./img/chatbox_left.png"></image>
|
|
|
+ <div class="customchat_box" v-if="item.contentType === 0" v-html="item.content"></div>
|
|
|
+ <image class="chat_img" mode="aspectFit" v-else-if="item.contentType === 1" :src="item.content"></image>
|
|
|
+ <div class="customchat_box" v-else-if="item.contentType === 5" v-html="JSON.parse(item.content).curl"></div>
|
|
|
+ <div class="customchat_box" v-else-if="item.contentType === 33">小程序信息（不支持查看）</div>
|
|
|
+ <div class="customchat_box" v-else-if="item.contentType === 51">视频号信息（不支持查看）</div>
|
|
|
+ <div class="customchat_box" v-else-if="item.contentType === 100">图片已过期（不支持查看）</div>
|
|
|
+ <div class="customchat_box" v-else v-html="item.content"></div>
|
|
|
</div>
|
|
|
- <!-- <div class="my_msg"></div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="input_style">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="msgData">
|
|
|
+ </el-input>
|
|
|
+ <image class="send_btn" :src="msgData ? './img/send_btn.png' : './img/no_send_btn.png'" @click="sendMsg"></image>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script>
|
|
|
@@ -58,10 +159,26 @@
|
|
|
el: '#box',
|
|
|
data() {
|
|
|
return {
|
|
|
- chatList: []
|
|
|
+ httpUrl: '',
|
|
|
+ memberId: null,
|
|
|
+ corpId: null,
|
|
|
+ sessionId: null,
|
|
|
+ chatList: [],
|
|
|
+ msgData: '',
|
|
|
+ pollInterval: null,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ this.httpUrl = this.getQueryParam('httpUrl')
|
|
|
+ this.corpId = this.getQueryParam('corpId')
|
|
|
+ this.memberId = this.getQueryParam('memberId')
|
|
|
+ this.sessionId = this.getQueryParam('sessionId')
|
|
|
+ this.chatData()
|
|
|
+ this.startPolling()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 当组件销毁前停止轮询
|
|
|
+ this.stopPolling();
|
|
|
},
|
|
|
methods: {
|
|
|
// 截取url中的数据
|
|
|
@@ -73,6 +190,71 @@
|
|
|
// 返回指定参数的值，如果不存在则返回null
|
|
|
return urlParams.get(paramName);
|
|
|
},
|
|
|
+ startPolling() {
|
|
|
+ // 这里写你的轮询逻辑，比如发送API请求
|
|
|
+ this.intervalId = setInterval(() => {
|
|
|
+ this.chatData()
|
|
|
+ }, 5000); // 每5秒发起一次请求
|
|
|
+ },
|
|
|
+ chatData () {
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/messageListByPage', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ corpId: this.corpId,
|
|
|
+ memberId: this.memberId,
|
|
|
+ sessionId: this.sessionId,
|
|
|
+ page: 1,
|
|
|
+ pageCount: 1000,
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (data) {
|
|
|
+ this.chatList = data.records.reverse()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.messageContent.scrollTop = this.$refs.messageContent.scrollHeight
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ sendMsg () {
|
|
|
+ fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/sendMessage', {
|
|
|
+ method: 'post',
|
|
|
+ body: JSON.stringify({
|
|
|
+ corpId: this.corpId,
|
|
|
+ memberId: this.memberId,
|
|
|
+ sessionId: this.sessionId,
|
|
|
+ text: this.msgData,
|
|
|
+ type: 0
|
|
|
+ }),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ return res.json()
|
|
|
+ }).then(result => {
|
|
|
+ let { data, code, msg } = result
|
|
|
+ if (code === 1) {
|
|
|
+ this.msgData = ''
|
|
|
+ this.chatData()
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ stopPolling() {
|
|
|
+ // 清除定时器
|
|
|
+ if (this.pollInterval) {
|
|
|
+ clearInterval(this.pollInterval);
|
|
|
+ this.pollInterval = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
})
|
|
|
</script>
|
