Update token handling and user state management

Update API request and navigation in sign page
Update API requests and styling
2025-08-25 22:51:06 +08:00 · 2025-08-25 22:09:48 +08:00 · 2025-08-25 22:04:25 +08:00
13 changed files with 97 additions and 34 deletions
--- a/api/channel/index.ts
+++ b/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})
 }

 /**
--- a/api/pay/index.ts
+++ b/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})
 }

 /**
--- a/api/personal-center/index.ts
+++ b/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})
 }
 /**
 * 近期收益和近期活跃
--- a/components/kl-login/index.vue
+++ b/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)
--- a/components/kl-quick-menu/components/kl-service.vue
+++ b/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%">
-                  <img :src="msg.content" alt="图片" class="w-100%" />
+                <div v-else-if="msg.msgType === 1" class="message-bubble max-w-[50%]">
+                  <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)
--- a/components/kl-quick-menu/components/kl-vip.vue
+++ b/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>
--- a/components/kl-quick-menu/index.vue
+++ b/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)
--- a/composables/states.ts
+++ b/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,
+    }
  });

 /** 热门数据 */
--- a/composables/useFetchRequest.ts
+++ b/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) {
--- a/package.json
+++ b/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",
--- a/pages/sign-content/index.vue
+++ b/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>({
-    total: 0,
-    list: [],
-  })
+  // const result = reactive<PageResultMemberPointRecordRespVO>({
+  //   total: 0,
+  //   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) {
-      result.list = res.data.list
-      result.total = res.data.total
-    }
-  }
-  getUserPointPageList()
+    return res.data
+  }, {
+    immediate: true, // 立即请求
+  })
+
+  // 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()
--- a/store/user.ts
+++ b/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();
      }
--- a/yarn.lock
+++ b/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"
Author	SHA1	Message	Date
wangqiao	7291768b03	Update token handling and user state management	2025-08-25 22:51:06 +08:00
wangqiao	63fa551041	Update API request and navigation in sign page	2025-08-25 22:09:48 +08:00
wangqiao	cdcb6e76c2	Update API requests and styling	2025-08-25 22:04:25 +08:00