Update API requests and styling

api/channel/index.ts

@@ -93,7 +93,7 @@ export const sendKefuMessage = (params: SingleMessageVo) => {
  * 获得消息记录分页
  */
 export const getMessagePage = (params: { pageNo: number; pageSize: number; fromId?: number; msgType?: number; topic: string }) => {
-  return useFetchRequest.get<IResponse<PageResultMessageRespVO>>('/prod-api/app-api/mqtt/message/page', params)
+  return useDollarFetchRequest.get<IResponse<PageResultMessageRespVO>>('/prod-api/app-api/mqtt/message/page', {query:params})
 }
 
 /**

api/pay/index.ts

@@ -8,7 +8,7 @@ import type { AppPayWalletPackageRespVO, PayOrderSubmitReqVO, PayOrderRespVO, Pa
  * @returns
  */
 export const listVip = () => {
-  return useFetchRequest.get<IResponse<AppPayWalletPackageRespVO[]>>('/prod-api/app-api/pay/wallet-recharge-package/list-vip', {})
+  return useDollarFetchRequest.get<IResponse<AppPayWalletPackageRespVO[]>>('/prod-api/app-api/pay/wallet-recharge-package/list-vip', {})
 }
 
 /**
@@ -43,7 +43,7 @@ export const listWalletRechargePackage = () => {
  * 获取支付状态
  */
 export const getPayStatus = (params: { id: number }) => {
-  return useDollarFetchRequest.get<IResponse<PayOrderRespVO>>('/prod-api/app-api/pay/order/get', params)
+  return useDollarFetchRequest.get<IResponse<PayOrderRespVO>>('/prod-api/app-api/pay/order/get', {query:params})
 }
 
 /**

components/kl-quick-menu/components/kl-service.vue

@@ -28,10 +28,10 @@
               </div>
               <div class="message-content">
                 <div v-if="msg.msgType === 0" class="message-bubble whitespace-pre-wrap">{{ msg.content }}</div>
-                <div v-else-if="msg.msgType === 1" class="message-bubble max-w-50%">
+                <div v-else-if="msg.msgType === 1" class="message-bubble max-w-[50%]">
-                  <img :src="msg.content" alt="图片" class="w-100%" />
+                  <img :src="msg.content" alt="图片" class="w-[100%]" />
                 </div>
-                <div v-else class="message-bubble max-w-50%">
+                <div v-else class="message-bubble max-w-[50%]">
                   {{ msg.content.split('/').pop() }}
                 </div>
                 <div class="message-time">{{ dayjs(msg.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
@@ -299,6 +299,9 @@
             inputMessage.value = imageUrl
             handleSend(msgType)
           }
+          img.onerror = () => {
+            ElMessage.error('图片加载失败')
+          }
         } else {
           inputMessage.value = imageUrl
           handleSend(msgType)

components/kl-quick-menu/components/kl-vip.vue

@@ -5,7 +5,7 @@
     </template>
     <div v-loading="loading" class="vip-cards">
       <div v-for="item in viplist" :key="item.id" class="vip-card">
-        <div class="relative w-100% flex flex-col items-center">
+        <div class="relative! w-[100%] flex flex-col items-center">
           <div class="vip-card-header basic">
             <div class="vip-card-title">{{ item.name }}</div>
             <!-- <div class="vip-card-subtitle">中小微企业</div> -->
@@ -22,7 +22,7 @@
             >
           </ul>
           <div v-if="item.qrCodeUrl" class="vip-card-qrcode">
-            <el-icon class="absolute right-0px top-0px cursor-pointer" @click="item.qrCodeUrl = ''"><Close /></el-icon>
+            <el-icon class="absolute! right-[0px] top-[0px] cursor-pointer" @click="item.qrCodeUrl = ''"><Close /></el-icon>
             <qrcode-vue :value="item.qrCodeUrl" :size="150" level="H" />
             <div>请使用微信扫二维码</div>
           </div>
@@ -153,7 +153,7 @@
     border-radius: 12px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
     padding: 24px 32px;
-    width: 260px;
+    width: 290px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -231,5 +231,15 @@
     z-index: 1;
     text-align: center;
     background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.el-dialog__header) {
+    .el-dialog__close {
+      top: -10px !important
+    }
   }
 </style>

components/kl-quick-menu/index.vue

@@ -2,25 +2,25 @@
   <div class="fixed-button-group">
     <div class="button-item" @click="handleVip">
       <el-badge :is-dot="readCount" class="item">
-        <el-icon class="icon-item color-#10c55b!"><Trophy /></el-icon>
+        <el-icon class="icon-item color-[#10c55b!]"><Trophy /></el-icon>
       </el-badge>
       <span class="button-text">VIP</span>
     </div>
     <div class="button-item" @click="handleService">
       <el-badge :is-dot="readCount" class="item">
-        <el-icon class="icon-item color-#10c55b!"><Service /></el-icon>
+        <el-icon class="icon-item color-[#10c55b!]"><Service /></el-icon>
       </el-badge>
       <span class="button-text">客服</span>
     </div>
     <div class="button-item" @click="handleSign">
-      <el-icon class="icon-item color-#10c55b!"><Checked /></el-icon>
+      <el-icon class="icon-item color-[#10c55b!]"><Checked /></el-icon>
       <span class="button-text">签到</span>
     </div>
     <div class="button-item" @click="handlePublish">
-      <el-icon class="icon-item color-#C561F9!"><Promotion /></el-icon>
+      <el-icon class="icon-item color-[#C561F9!]"><Promotion /></el-icon>
       <span class="button-text">发布</span>
     </div>
-    <div class="button-item mt-10px" @click="scrollToTop">
+    <div class="button-item mt-[10px]" @click="scrollToTop">
       <el-icon class="icon-item"><Top /></el-icon>
       <span class="button-text">顶部</span>
     </div>
@@ -36,6 +36,7 @@
   import useUserStore from '~/store/user'
   import { Service, Top, Promotion, Checked, Trophy } from '@element-plus/icons-vue'
   import KlService from './components/kl-service.vue'
+  import KlVip from './components/kl-vip.vue'
 
   const showVip = ref(false)
   const handleVip = () => {

package.json

@@ -20,6 +20,7 @@
     "nuxt": "^3.18.1",
     "pdfjs-dist": "^5.4.54",
     "pinia": "^3.0.3",
+    "qrcode.vue": "^3.6.0",
     "tinymce": "^6.2.0",
     "vue": "^3.5.18",
     "vue-pdf-embed": "^2.1.3",

yarn.lock

@@ -5747,6 +5747,11 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+qrcode.vue@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/qrcode.vue/-/qrcode.vue-3.6.0.tgz#d940fe96712922232aa19892bdd68793e62c73e7"
+  integrity sha512-vQcl2fyHYHMjDO1GguCldJxepq2izQjBkDEEu9NENgfVKP6mv/e2SU62WbqYHGwTgWXLhxZ1NCD1dAZKHQq1fg==
+
 qs@^6.9.6:
   version "6.14.0"
   resolved "https://registry.npmmirror.com/qs/-/qs-6.14.0.tgz"