|
|
@@ -6,7 +6,7 @@
|
|
|
② 代码优化，补充注释，提升阅读性
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="msg-main">
|
|
|
+ <ContentWrap>
|
|
|
<div class="msg-div" :id="'msg-div' + nowStr">
|
|
|
<!-- 加载更多 -->
|
|
|
<div v-loading="loading"></div>
|
|
|
@@ -26,9 +26,9 @@
|
|
|
:src="item.sendFrom === 1 ? user.avatar : mp.avatar"
|
|
|
class="avue-comment__avatar"
|
|
|
/>
|
|
|
- <div class="avue-comment__author">{{
|
|
|
- item.sendFrom === 1 ? user.nickname : mp.nickname
|
|
|
- }}</div>
|
|
|
+ <div class="avue-comment__author"
|
|
|
+ >{{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="avue-comment__main">
|
|
|
<div class="avue-comment__header">
|
|
|
@@ -40,37 +40,41 @@
|
|
|
>
|
|
|
<!-- 【事件】区域 -->
|
|
|
<div v-if="item.type === 'event' && item.event === 'subscribe'">
|
|
|
- <el-tag type="success" size="mini">关注</el-tag>
|
|
|
+ <el-tag type="success">关注</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'unsubscribe'">
|
|
|
- <el-tag type="danger" size="mini">取消关注</el-tag>
|
|
|
+ <el-tag type="danger">取消关注</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'CLICK'">
|
|
|
- <el-tag size="mini">点击菜单</el-tag>【{{ item.eventKey }}】
|
|
|
+ <el-tag>点击菜单</el-tag>
|
|
|
+ 【{{ item.eventKey }}】
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'VIEW'">
|
|
|
- <el-tag size="mini">点击菜单链接</el-tag>【{{ item.eventKey }}】
|
|
|
+ <el-tag>点击菜单链接</el-tag>
|
|
|
+ 【{{ item.eventKey }}】
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'scancode_waitmsg'">
|
|
|
- <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
|
|
|
+ <el-tag>扫码结果</el-tag>
|
|
|
+ 【{{ item.eventKey }}】
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'scancode_push'">
|
|
|
- <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
|
|
|
+ <el-tag>扫码结果</el-tag>
|
|
|
+ 【{{ item.eventKey }}】
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'pic_sysphoto'">
|
|
|
- <el-tag size="mini">系统拍照发图</el-tag>
|
|
|
+ <el-tag>系统拍照发图</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'pic_photo_or_album'">
|
|
|
- <el-tag size="mini">拍照或者相册</el-tag>
|
|
|
+ <el-tag>拍照或者相册</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'pic_weixin'">
|
|
|
- <el-tag size="mini">微信相册</el-tag>
|
|
|
+ <el-tag>微信相册</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event' && item.event === 'location_select'">
|
|
|
- <el-tag size="mini">选择地理位置</el-tag>
|
|
|
+ <el-tag>选择地理位置</el-tag>
|
|
|
</div>
|
|
|
<div v-else-if="item.type === 'event'">
|
|
|
- <el-tag type="danger" size="mini">未知事件类型</el-tag>
|
|
|
+ <el-tag type="danger">未知事件类型</el-tag>
|
|
|
</div>
|
|
|
<!-- 【消息】区域 -->
|
|
|
<div v-else-if="item.type === 'text'">{{ item.content }}</div>
|
|
|
@@ -124,10 +128,10 @@
|
|
|
<wx-reply-select ref="replySelect" :objData="objData" />
|
|
|
<el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </ContentWrap>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script lang="ts" name="WxMsg">
|
|
|
import { getMessagePage, sendMessage } from '@/api/mp/message'
|
|
|
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
|
|
|
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
|
|
|
@@ -136,9 +140,14 @@ import WxNews from '@/views/mp/components/wx-news/main.vue'
|
|
|
import WxLocation from '@/views/mp/components/wx-location/main.vue'
|
|
|
import WxMusic from '@/views/mp/components/wx-music/main.vue'
|
|
|
import { getUser } from '@/api/mp/mpuser'
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+import profile from '@/assets/imgs/profile.jpg'
|
|
|
+import wechat from '@/assets/imgs/wechat.png'
|
|
|
+import { parseTime } from '@/utils/formatTime'
|
|
|
|
|
|
-export default {
|
|
|
- name: 'WxMsg',
|
|
|
+export default defineComponent({
|
|
|
components: {
|
|
|
WxReplySelect,
|
|
|
WxVideoPlayer,
|
|
|
@@ -153,160 +162,144 @@ export default {
|
|
|
required: true
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nowStr: new Date().getTime(), // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
|
|
|
- loading: false, // 消息列表是否正在加载中
|
|
|
- loadMore: true, // 是否可以加载更多
|
|
|
- list: [], // 消息列表
|
|
|
- queryParams: {
|
|
|
- pageNo: 1, // 当前页数
|
|
|
- pageSize: 14, // 每页显示多少条
|
|
|
- accountId: undefined
|
|
|
- },
|
|
|
- user: {
|
|
|
- // 由于微信不再提供昵称，直接使用“用户”展示
|
|
|
- nickname: '用户',
|
|
|
- avatar: require('@/assets/images/profile.jpg'),
|
|
|
- accountId: 0 // 公众号账号编号
|
|
|
- },
|
|
|
- mp: {
|
|
|
- nickname: '公众号',
|
|
|
- avatar: require('@/assets/images/wechat.png')
|
|
|
- },
|
|
|
-
|
|
|
- // ========= 消息发送 =========
|
|
|
- sendLoading: false, // 发送消息是否加载中
|
|
|
- objData: {
|
|
|
- // 微信发送消息
|
|
|
- type: 'text'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- // 获得用户信息
|
|
|
- getUser(this.userId).then((response) => {
|
|
|
- this.user.nickname =
|
|
|
- response.data.nickname && response.data.nickname.length > 0
|
|
|
- ? response.data.nickname
|
|
|
- : this.user.nickname
|
|
|
- this.user.avatar =
|
|
|
- response.data.avatar && this.user.avatar.length > 0
|
|
|
- ? response.data.avatar
|
|
|
- : this.user.avatar
|
|
|
- this.user.accountId = response.data.accountId
|
|
|
- // 设置公众号账号编号
|
|
|
- this.queryParams.accountId = response.data.accountId
|
|
|
- this.objData.accountId = response.data.accountId
|
|
|
+ setup(props) {
|
|
|
+ const nowStr = ref(new Date().getTime()) // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
|
|
|
+ const loading = ref(false) // 消息列表是否正在加载中
|
|
|
+ const loadMore = ref(true) // 是否可以加载更多
|
|
|
+ const list = ref<any[]>([]) // 消息列表
|
|
|
+ const queryParams = reactive({
|
|
|
+ pageNo: 1, // 当前页数
|
|
|
+ pageSize: 14, // 每页显示多少条
|
|
|
+ accountId: undefined
|
|
|
+ })
|
|
|
+ const user = reactive({
|
|
|
+ // 由于微信不再提供昵称，直接使用“用户”展示
|
|
|
+ nickname: '用户',
|
|
|
+ avatar: profile,
|
|
|
+ accountId: 0 // 公众号账号编号
|
|
|
+ })
|
|
|
+ const mp = reactive({
|
|
|
+ nickname: '公众号',
|
|
|
+ avatar: wechat
|
|
|
+ })
|
|
|
|
|
|
- // 加载消息
|
|
|
- console.log(this.queryParams)
|
|
|
- this.refreshChange()
|
|
|
+ // ========= 消息发送 =========
|
|
|
+ const sendLoading = ref(false) // 发送消息是否加载中
|
|
|
+ const objData = reactive({
|
|
|
+ // 微信发送消息
|
|
|
+ type: 'text',
|
|
|
+ accountId: null,
|
|
|
+ articles: []
|
|
|
})
|
|
|
- },
|
|
|
- methods: {
|
|
|
- sendMsg() {
|
|
|
- if (!this.objData) {
|
|
|
+
|
|
|
+ const replySelect = ref(null)
|
|
|
+ // 执行发送
|
|
|
+ const sendMsg = async () => {
|
|
|
+ if (!objData) {
|
|
|
return
|
|
|
}
|
|
|
- // 公众号限制：客服消息，公众号只允许发送一条
|
|
|
- if (this.objData.type === 'news' && this.objData.articles.length > 1) {
|
|
|
- this.objData.articles = [this.objData.articles[0]]
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: '图文消息条数限制在 1 条以内，已默认发送第一条',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
+ // // 公众号限制：客服消息，公众号只允许发送一条
|
|
|
+ if (objData.type === 'news' && objData.articles.length > 1) {
|
|
|
+ objData.articles = [objData.articles[0]]
|
|
|
+ message.success('图文消息条数限制在 1 条以内，已默认发送第一条')
|
|
|
}
|
|
|
-
|
|
|
- // 执行发送
|
|
|
- this.sendLoading = true
|
|
|
- sendMessage(
|
|
|
- Object.assign(
|
|
|
- {
|
|
|
- userId: this.userId
|
|
|
- },
|
|
|
- {
|
|
|
- ...this.objData
|
|
|
- }
|
|
|
- )
|
|
|
- )
|
|
|
- .then((response) => {
|
|
|
- this.sendLoading = false
|
|
|
- // 添加到消息列表，并滚动
|
|
|
- this.list = [...this.list, ...[response.data]]
|
|
|
- this.scrollToBottom()
|
|
|
- // 重置 objData 状态
|
|
|
- this.$refs['replySelect'].deleteObj() // 重置，避免 tab 的数据未清理
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.sendLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- loadingMore() {
|
|
|
- this.queryParams.pageNo++
|
|
|
- this.getPage(this.queryParams)
|
|
|
- },
|
|
|
- getPage(page, params) {
|
|
|
- this.loading = true
|
|
|
- getMessagePage(
|
|
|
+ let data = await sendMessage(Object.assign({ userId: props.userId }, { ...objData }))
|
|
|
+ sendLoading.value = false
|
|
|
+ list.value = [...list.value, ...[data]]
|
|
|
+ scrollToBottom()
|
|
|
+ //ts檢查的時候會判斷這個組件可能是空的，所以需要進行斷言。
|
|
|
+ //避免 tab 的数据未清理
|
|
|
+ const deleteObj = (replySelect.value as any).deleteObj
|
|
|
+ if (deleteObj) {
|
|
|
+ deleteObj()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const loadingMore = () => {
|
|
|
+ queryParams.pageNo++
|
|
|
+ getPage(queryParams, null)
|
|
|
+ }
|
|
|
+ const getPage = async (page, params) => {
|
|
|
+ loading.value = true
|
|
|
+ let dataTemp = await getMessagePage(
|
|
|
Object.assign(
|
|
|
{
|
|
|
pageNo: page.pageNo,
|
|
|
pageSize: page.pageSize,
|
|
|
- userId: this.userId,
|
|
|
+ userId: props.userId,
|
|
|
accountId: page.accountId
|
|
|
},
|
|
|
params
|
|
|
)
|
|
|
- ).then((response) => {
|
|
|
- // 计算当前的滚动高度
|
|
|
- const msgDiv = document.getElementById('msg-div' + this.nowStr)
|
|
|
- let scrollHeight = 0
|
|
|
- if (msgDiv) {
|
|
|
- scrollHeight = msgDiv.scrollHeight
|
|
|
- }
|
|
|
-
|
|
|
- // 处理数据
|
|
|
- const data = response.data.list.reverse()
|
|
|
- this.list = [...data, ...this.list]
|
|
|
- this.loading = false
|
|
|
- if (data.length < this.queryParams.pageSize || data.length === 0) {
|
|
|
- this.loadMore = false
|
|
|
- }
|
|
|
- this.queryParams.pageNo = page.pageNo
|
|
|
- this.queryParams.pageSize = page.pageSize
|
|
|
-
|
|
|
- // 滚动到原来的位置
|
|
|
- if (this.queryParams.pageNo === 1) {
|
|
|
- // 定位到消息底部
|
|
|
- this.scrollToBottom()
|
|
|
- } else if (data.length !== 0) {
|
|
|
- // 定位滚动条
|
|
|
- this.$nextTick(() => {
|
|
|
- if (scrollHeight !== 0) {
|
|
|
- msgDiv.scrollTop =
|
|
|
- document.getElementById('msg-div' + this.nowStr).scrollHeight - scrollHeight - 100
|
|
|
+ )
|
|
|
+ const msgDiv = document.getElementById('msg-div' + nowStr.value)
|
|
|
+ let scrollHeight = 0
|
|
|
+ if (msgDiv) {
|
|
|
+ scrollHeight = msgDiv.scrollHeight
|
|
|
+ }
|
|
|
+ // 处理数据
|
|
|
+ let data = dataTemp.list.reverse()
|
|
|
+ list.value = [...data, ...list.value]
|
|
|
+ loading.value = false
|
|
|
+ if (data.length < queryParams.pageSize || data.length === 0) {
|
|
|
+ loadMore.value = false
|
|
|
+ }
|
|
|
+ queryParams.pageNo = page.pageNo
|
|
|
+ queryParams.pageSize = page.pageSize
|
|
|
+ // 滚动到原来的位置
|
|
|
+ if (queryParams.pageNo === 1) {
|
|
|
+ // 定位到消息底部
|
|
|
+ scrollToBottom()
|
|
|
+ } else if (data.length !== 0) {
|
|
|
+ // 定位滚动条
|
|
|
+ await nextTick(() => {
|
|
|
+ if (scrollHeight !== 0) {
|
|
|
+ let div = document.getElementById('msg-div' + nowStr.value)
|
|
|
+ if (div && msgDiv) {
|
|
|
+ msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 刷新回调
|
|
|
- */
|
|
|
- refreshChange() {
|
|
|
- this.getPage(this.queryParams)
|
|
|
- },
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const refreshChange = () => {
|
|
|
+ getPage(queryParams, null)
|
|
|
+ }
|
|
|
/** 定位到消息底部 */
|
|
|
- scrollToBottom: function () {
|
|
|
- this.$nextTick(() => {
|
|
|
- let div = document.getElementById('msg-div' + this.nowStr)
|
|
|
- div.scrollTop = div.scrollHeight
|
|
|
+ const scrollToBottom = () => {
|
|
|
+ nextTick(() => {
|
|
|
+ let div = document.getElementById('msg-div' + nowStr.value)
|
|
|
+ if (div) {
|
|
|
+ div.scrollTop = div.scrollHeight
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ let data = await getUser(props.userId)
|
|
|
+ user.nickname = data.nickname && data.nickname.length > 0 ? data.nickname : user.nickname
|
|
|
+ user.avatar = data.avatar && user.avatar.length > 0 ? data.avatar : user.avatar
|
|
|
+ user.accountId = data.accountId
|
|
|
+ queryParams.accountId = data.accountId
|
|
|
+ objData.accountId = data.accountId
|
|
|
+ refreshChange()
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ sendMsg,
|
|
|
+ loadingMore,
|
|
|
+ parseTime,
|
|
|
+ scrollToBottom,
|
|
|
+ objData,
|
|
|
+ mp,
|
|
|
+ user,
|
|
|
+ queryParams,
|
|
|
+ list,
|
|
|
+ loadMore,
|
|
|
+ loading,
|
|
|
+ nowStr,
|
|
|
+ sendLoading
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
|
|
|
@@ -317,6 +310,7 @@ export default {
|
|
|
margin-top: -30px;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
+
|
|
|
.msg-div {
|
|
|
height: 50vh;
|
|
|
overflow: auto;
|
|
|
@@ -324,13 +318,16 @@ export default {
|
|
|
margin-left: 10px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.msg-send {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
+
|
|
|
.avatar-div {
|
|
|
text-align: center;
|
|
|
width: 80px;
|
|
|
}
|
|
|
+
|
|
|
.send-but {
|
|
|
float: right;
|
|
|
margin-top: 8px !important;
|
wuxiran
