Update token handling and user state management

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})
 }
 
 /**

api/personal-center/index.ts

@@ -92,7 +92,7 @@ export const signIn = () => {
  * 获得用户积分记录分页
  */
 export const getUserPointPage = (params: { pageNo: number; pageSize: number }) => {
-  return useFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', params)
+  return useFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', {query:params})
 }
 /**
  * 近期收益和近期活跃

components/kl-login/index.vue

@@ -90,7 +90,10 @@
   import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
   import useUserStore from '~/store/user'
   const app = useNuxtApp()
+  const token = useToken();
+
   const userStore = useUserStore()
+  const tokenCookie = useCookie<string | undefined>('token');
 
   const props = defineProps({
     visible: {
@@ -210,6 +213,10 @@
         const res = await login(loginForm)
         const { code, data, msg } = res
         if (code !== 0) return ElMessage.error(msg)
+        // 设置cookie
+        tokenCookie.value = data.accessToken;
+        // 更新state
+        token.value = data.accessToken;
         REFRESHTOKEN.setToken(data.accessToken, data.refreshToken)
         REFRESHTOKEN.setUserId(data.userId.toString())
         REFRESHTOKEN.setUserName(loginForm.mobile)

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 = () => {
@@ -87,7 +88,7 @@
       ElMessage.error('请先登录')
       return
     }
-    navigateTo('/sign-page')
+    navigateTo('/sign-content')
   }
 
   const readCount = ref(false)

composables/states.ts

@@ -2,7 +2,26 @@
 export const useToken = () =>
   useState<string>('token', () => {
     const token = useCookie<string | undefined>('token');
-    return token.value ? 'Bearer ' + token.value : '';
+    return token.value ? token.value : '';
+  });
+
+  type UserInfo = {
+    nickname: string,
+    avatar: string,
+    mobile: string,
+    id: number | undefined,
+    vipLevel: number | undefined,
+    sex: number | undefined,
+  }
+  export const useUserInfo = () => useState<UserInfo>('userInfo', () => {
+    return {
+      nickname: '',
+      avatar: '',
+      mobile: '',
+      id: undefined,
+      vipLevel: undefined,
+      sex: undefined,
+    }
   });
 
 /** 热门数据 */

composables/useFetchRequest.ts

@@ -6,7 +6,8 @@ const useServerRequest = async <T>(
   url: string,
   opts?: UseFetchOptions<T, unknown>
 ) => {
-  const token = useCookie<string | undefined>("token");
+  const token = useToken();
+  const user = useUserInfo();
   const runtimeConfig = useRuntimeConfig();
 
   const defaultOptions: UseFetchOptions<unknown> = {
@@ -14,9 +15,15 @@ const useServerRequest = async <T>(
     onRequest({ options }) {
       options.headers = options.headers || "application/json";
       if (token.value) {
+        console.log('user----', user.value);
+        
+        console.log('token----', "Bearer " + token.value)
         // @ts-ignore
         options.headers["authorization"] = "Bearer " + token.value;
       }
+
+      console.log(url +'-----' +'options----', options);
+      
     },
     onResponse({ response }) {
       if (+response.status === 200 && +response._data.code !== 0) {

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

pages/sign-content/index.vue

@@ -18,7 +18,7 @@
             <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
           </div>
 
-          <div class="sign-center ml-10px">
+          <div class="sign-center ml-[10px]">
             <el-button type="success" class="sign-btn" @click="handleClickSign"> 立即签到 </el-button>
           </div>
         </div>
@@ -40,7 +40,7 @@
         <div>积分</div>
         <div>发生时间</div>
       </div>
-      <div v-for="item in result.list" :key="item.id" class="table-row">
+      <div v-for="item in result?.list" :key="item.id" class="table-row">
         <!-- <div class="avatar"> -->
         <!-- <img :src="item.avatar" alt="avatar" /> -->
         <!-- <span>{{ item.nickname }}</span> -->
@@ -52,12 +52,12 @@
       </div>
     </div>
     <!-- 分页组件 -->
-    <div class="mt-10px flex justify-center">
+    <div class="mt-[10px] flex justify-center">
       <el-pagination
         v-model:current-page="query.pageNo"
         :page-size="query.pageSize"
         layout="prev, pager, next"
-        :total="result.total"
+        :total="result?.total"
         @current-change="handleCurrentChange"
       />
     </div>
@@ -72,18 +72,19 @@
   import useUserStore from '~/store/user'
   import dayjs from 'dayjs'
   const userStore = useUserStore()
+  const user = useUserInfo();
 
   const query = reactive({
     pageNo: 1,
     pageSize: 10,
-    userId: userStore.userId,
+    userId: user.value.id,
     title: '',
   })
 
-  const result = reactive<PageResultMemberPointRecordRespVO>({
+  // const result = reactive<PageResultMemberPointRecordRespVO>({
-    total: 0,
+  //   total: 0,
-    list: [],
+  //   list: [],
-  })
+  // })
   // const signList = ref([
   //   {
   //     avatar: 'https://dummyimage.com/40x40/ccc/fff.png&text=美',
@@ -115,14 +116,21 @@
     getUserPointPageList()
   }
 
-  const getUserPointPageList = async () => {
+  const {data: result, refresh: getUserPointPageList } = await useAsyncData('getUserPointPage', async () => {
     const res = await getUserPointPage(query)
-    if (res.code === 0) {
+    return res.data
-      result.list = res.data.list
+  }, {
-      result.total = res.data.total
+    immediate: true, // 立即请求
-    }
+  })
-  }
+
-  getUserPointPageList()
+  // const getUserPointPageList = async () => {
+  //   const res = await getUserPointPage(query)
+  //   if (res.code === 0) {
+  //     result.list = res.data.list
+  //     result.total = res.data.total
+  //   }
+  // }
+  // getUserPointPageList()
 
   const handleClickSign = async () => {
     const res = await signIn()

store/user.ts

@@ -38,10 +38,12 @@ export default defineStore("useUserStore", {
       }
     },
     async getUserInfo() {
+      const user = useUserInfo();
       const res = await getUserInfo();
       if (res.code === 0) {
         this.userInfoRes = res.data;
         refreshToken.setUserInfo(res.data);
+        user.value = res.data;
         // 建立连接mqtt
         this.connectMqtt();
       }

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"