feat(mp): 优化微信相关组件和页面

- 更新服务端地址使用环境变量
- 增加扫码事件处理
- 优化用户头像显示
- 适配图文消息缩略图
- 完善消息类型展示

src/views/mp/account/index.vue

@@ -37,7 +37,7 @@
       <el-table-column label="appId" align="center" prop="appId" width="180" />
       <el-table-column label="服务器地址(URL)" align="center" prop="appId" width="360">
         <template #default="scope">
-          {{ 'http://服务端地址/admin-api/mp/open/' + scope.row.appId }}
+          {{ `${serverUrl}/admin-api/mp/open/${scope.row.appId}` }}
         </template>
       </el-table-column>
       <el-table-column label="二维码" align="center" prop="qrCodeUrl">
@@ -120,7 +120,7 @@ const queryParams = reactive({
   appId: null
 })
 const queryFormRef = ref() // 搜索的表单
-
+const serverUrl = import.meta.env.VITE_BASE_URL
 /** 查询列表 */
 const getList = async () => {
   loading.value = true

src/views/mp/components/wx-msg/components/MsgEvent.vue

@@ -34,6 +34,9 @@
     <div v-else-if="item.event === 'location_select'">
       <el-tag>选择地理位置</el-tag>
     </div>
+    <div v-else-if="item.event === 'SCAN'">
+      <el-tag>扫码</el-tag>
+    </div>
     <div v-else>
       <el-tag type="danger">未知事件类型</el-tag>
     </div>

src/views/mp/components/wx-msg/main.vue

@@ -31,12 +31,12 @@
 </template>
 
 <script lang="ts" setup>
-import WxReplySelect, { Reply, ReplyType } from '@/views/mp/components/wx-reply'
+import WxReplySelect, {Reply, ReplyType} from '@/views/mp/components/wx-reply'
 import MsgList from './components/MsgList.vue'
-import { getMessagePage, sendMessage } from '@/api/mp/message'
-import { getUser } from '@/api/mp/user'
+import {getMessagePage, sendMessage} from '@/api/mp/message'
+import {getUser} from '@/api/mp/user'
 import profile from '@/assets/imgs/profile.jpg'
-import { User } from './types'
+import {User} from './types'
 
 defineOptions({ name: 'WxMsg' })
 
@@ -82,7 +82,7 @@ const msgDivRef = ref<HTMLDivElement | null>(null) // 消息显示窗口ref，
 onMounted(async () => {
   const data = await getUser(props.userId)
   user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname
-  user.avatar = user.avatar?.length > 0 ? data.avatar : user.avatar
+  user.avatar = data.headImageUrl?.length > 0 ? data.headImageUrl : user.avatar
   accountId.value = data.accountId
   reply.value.accountId = data.accountId
 

src/views/mp/components/wx-news/main.vue

@@ -13,7 +13,7 @@
         <div class="news-main">
           <div class="news-content">
             <el-image
-              :src="article.picUrl"
+                :src="article.picUrl||article.thumbUrl"
               class="material-img"
               style="width: 100%; height: 120px"
             />
@@ -29,7 +29,7 @@
           <div class="news-content-item">
             <div class="news-content-item-title">{{ article.title }}</div>
             <div class="news-content-item-img">
-              <img :src="article.picUrl" class="material-img" height="100%" />
+              <img :src="article.picUrl||article.thumbUrl" class="material-img" height="100%"/>
             </div>
           </div>
         </div>

src/views/mp/message/MessageTable.vue

@@ -59,6 +59,9 @@
           >
             <el-tag>选择地理位置</el-tag>
           </div>
+          <div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'SCAN'">
+            <el-tag type="success">扫码</el-tag>
+          </div>
           <div v-else-if="scope.row.type === MsgType.Event">
             <el-tag type="danger">未知事件类型</el-tag>
           </div>
@@ -127,8 +130,8 @@ import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
 import WxLocation from '@/views/mp/components/wx-location'
 import WxMusic from '@/views/mp/components/wx-music'
 import WxNews from '@/views/mp/components/wx-news'
-import { dateFormatter } from '@/utils/formatTime'
-import { MsgType } from '@/views/mp/components/wx-msg/types'
+import {dateFormatter} from '@/utils/formatTime'
+import {MsgType} from '@/views/mp/components/wx-msg/types'
 
 const props = defineProps({
   list: {

src/views/mp/user/index.vue

@@ -52,6 +52,11 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="用户标识" align="center" prop="openid" width="260" />
+      <el-table-column label="用户头像" min-width="80px" prop="headImageUrl">
+        <template #default="scope">
+          <el-avatar :src="scope.row.headImageUrl"/>
+        </template>
+      </el-table-column>
       <el-table-column label="昵称" align="center" prop="nickname" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="标签" align="center" prop="tagIds" width="200">
@@ -100,11 +105,11 @@
   <UserForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" setup>
-import { dateFormatter } from '@/utils/formatTime'
+import {dateFormatter} from '@/utils/formatTime'
 import * as MpUserApi from '@/api/mp/user'
 import * as MpTagApi from '@/api/mp/tag'
 import WxAccountSelect from '@/views/mp/components/wx-account-select'
-import type { FormInstance } from 'element-plus'
+import type {FormInstance} from 'element-plus'
 import UserForm from './UserForm.vue'
 
 defineOptions({ name: 'MpUser' })