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

@@ -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>

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">