feat: 优化

src/api/area.ts

@@ -1,23 +1,18 @@
+import { IPaging } from '@/interface';
+import { ILiveRoom } from '@/types/ILiveRoom';
 import request from '@/utils/request';
 
 export function fetchAreaList() {
-  return request.instance({
-    url: '/area/list',
-    method: 'get',
-  });
+  return request.get('/area/list');
 }
 export function fetchAreaLiveRoomList(params) {
-  return request.instance({
-    url: '/area/area_live_room_list',
-    method: 'get',
+  return request.get('/area/area_live_room_list', {
     params,
   });
 }
 
 export function fetchLiveRoomList(params) {
-  return request.instance({
-    url: '/area/live_room_list',
-    method: 'get',
+  return request.get<IPaging<ILiveRoom>>('/area/live_room_list', {
     params,
   });
 }

src/api/emailUser.ts

@@ -1,81 +1,66 @@
 import request from '@/utils/request';
 
 export function fetchEmailUserList(params) {
-  return request.instance({
-    url: '/email_user/list',
-    method: 'get',
+  return request.get('/email_user/list', {
     params,
   });
 }
 
 // 发送邮箱登录验证码登录
 export function fetchSendLoginCode(email) {
-  return request.instance({
-    url: '/email_user/send_login_code',
-    method: 'post',
-    data: { email },
+  return request.post('/email_user/send_login_code', {
+    email,
   });
 }
 
 // 邮箱验证码登录
 export function fetchEmailCodeLogin({ email, code }) {
-  return request.instance({
-    url: '/email_user/login',
-    method: 'post',
-    data: { email, code },
+  return request.post('/email_user/login', {
+    email,
+    code,
   });
 }
 
 // 发送邮箱注册验证码登录
 export function fetchSendRegisterCode(email) {
-  return request.instance({
-    url: '/email_user/send_register_code',
-    method: 'post',
-    data: { email },
+  return request.post('/email_user/send_register_code', {
+    email,
   });
 }
 
 /** 注册 */
 export function fetchRegister({ email, code }) {
-  return request.instance({
-    url: '/email_user/register',
-    method: 'post',
-    data: { email, code },
+  return request.post('/email_user/register', {
+    email,
+    code,
   });
 }
 
 // 绑定邮箱
 export function fetchBindEmail({ email, code }) {
-  return request.instance({
-    url: '/email_user/bind_email',
-    method: 'post',
-    data: { email, code },
+  return request.post('/email_user/bind_email', {
+    email,
+    code,
   });
 }
 
 // 发送绑定邮箱验证码
 export function fetchSendBindEmailCode(email) {
-  return request.instance({
-    url: '/email_user/send_bind_code',
-    method: 'post',
-    data: { email },
+  return request.post('/email_user/send_bind_code', {
+    email,
   });
 }
 
 // 取消绑定邮箱
 export function fetchCancelBindEmail(code) {
-  return request.instance({
-    url: '/email_user/cancel_bind_email',
-    method: 'post',
-    data: { code },
+  return request.post('/email_user/cancel_bind_email', {
+    code,
   });
 }
 
 // 发送取消绑定邮箱验证码
 export function fetchCancelSendBindEmailCode(email) {
-  return request.instance({
-    url: '/email_user/send_cancel_bind_code',
-    method: 'post',
-    data: { email },
+  return request.post('/email_user/send_cancel_bind_code', {
+    email,
   });
 }

src/api/live.ts

@@ -1,9 +1,8 @@
+import { ILive, IPaging } from '@/interface';
 import request from '@/utils/request';
 
 export function fetchLiveList(params) {
-  return request.instance({
-    url: '/live/list',
-    method: 'get',
+  return request.get<IPaging<ILive>>('/live/list', {
     params,
   });
 }

src/api/liveConfig.ts

@@ -14,11 +14,7 @@ export function fetchFindLiveConfigByKey(key: string) {
 }
 
 export function fetchCreateFrontend(data: ILiveConfig) {
-  return request.instance({
-    url: `/live_config/create`,
-    method: 'post',
-    data,
-  });
+  return request.post(`/live_config/create`, data);
 }
 
 export function fetchUpdateFrontend(data: ILiveConfig) {

src/api/livePlay.ts

@@ -6,9 +6,7 @@ export function fetchLivePlayList(params: {
   nowPage?: number;
   pageSize?: number;
 }) {
-  return request.instance({
-    url: '/live_play/list',
-    method: 'get',
+  return request.get('/live_play/list', {
     params,
   });
 }

src/api/liveRoom.ts

@@ -1,9 +1,9 @@
+import { IList, IPaging } from '@/interface';
+import { ILiveRoom } from '@/types/ILiveRoom';
 import request from '@/utils/request';
 
-export function fetchLiveRoomList(params) {
-  return request.instance({
-    url: '/live_room/list',
-    method: 'get',
+export function fetchLiveRoomList(params: IList<ILiveRoom>) {
+  return request.get<IPaging<ILiveRoom>>('/live_room/list', {
     params,
   });
 }
@@ -21,8 +21,5 @@ export function fetchUpdateLiveRoomKey() {
 }
 
 export function fetchFindLiveRoom(roomId: string) {
-  return request.instance({
-    url: `/live_room/find/${roomId}`,
-    method: 'get',
-  });
+  return request.get<ILiveRoom>(`/live_room/find/${roomId}`);
 }

src/api/order.ts

@@ -9,11 +9,7 @@ export function fetchAliPay(data: {
   liveRoomId: number;
   money?: number;
 }) {
-  return request.instance({
-    url: '/order/pay',
-    method: 'post',
-    data,
-  });
+  return request.post('/order/pay', data);
 }
 
 /**
@@ -22,21 +18,18 @@ export function fetchAliPay(data: {
  * @returns
  */
 export function fetchAliPayStatus(params: { out_trade_no: string }) {
-  return request.instance({
-    url: '/order/pay_status',
-    method: 'get',
+  return request.get('/order/pay_status', {
     params,
   });
 }
+
 /**
  * 支付列表（支付中和已支付）
  * @param out_trade_no 订单支付时传入的商户订单号
  * @returns
  */
 export function fetchOrderList(params: IList<IOrder>) {
-  return request.instance({
-    url: '/order/order_list',
-    method: 'get',
+  return request.get('/order/order_list', {
     params,
   });
 }

src/api/other.ts

@@ -4,8 +4,5 @@ import request from '@/utils/request';
  * 获取后端信息
  */
 export function fetchServerInfo() {
-  return request.instance({
-    url: '/other/server_info',
-    method: 'get',
-  });
+  return request.get('/other/server_info');
 }

src/api/qiniuData.ts

@@ -8,16 +8,12 @@ export interface IQiniuKey {
 }
 
 export function fetchQiniuDataList(params) {
-  return request.instance({
-    url: '/qiniu_data/list',
-    method: 'get',
+  return request.get('/qiniu_data/list', {
     params,
   });
 }
 export function fetchDiff(params) {
-  return request.instance({
-    url: '/qiniu_data/diff',
-    method: 'get',
+  return request.get('/qiniu_data/diff', {
     params,
   });
 }
@@ -66,11 +62,7 @@ export function fetchUploadProgress(params: IQiniuKey) {
 }
 
 export function fetchCreateLink(data: IQiniuData) {
-  return request.instance({
-    url: '/qiniu_data/create',
-    method: 'post',
-    data,
-  });
+  return request.post('/qiniu_data/create', data);
 }
 export function fetchUpdateQiniuData(data: IQiniuData) {
   return request.instance({

src/api/qqUser.ts

@@ -2,9 +2,8 @@ import request from '@/utils/request';
 
 // qq登录
 export function fetchQQLogin({ code, exp }) {
-  return request.instance({
-    url: `/qq_user/login`,
-    method: 'post',
-    data: { code, exp },
+  return request.post(`/qq_user/login`, {
+    code,
+    exp,
   });
 }

src/api/signin.ts

@@ -1,9 +1,14 @@
-import { ISignin } from '@/interface';
+import { IList, IPaging, ISignin } from '@/interface';
 import request from '@/utils/request';
 
+export function fetchSigninList(params: IList<ISignin>) {
+  return request.get<IPaging<ISignin>>('/signin/list', { params });
+}
+
 export function fetchCreateSignin(data: ISignin) {
   return request.post('/signin/create', data);
 }
+
 export function fetchTodayIsSignin({ liveRoomId }) {
   return request.get('/signin/today_is_signin', {
     params: {

src/api/srs.ts

@@ -7,12 +7,9 @@ export function fetchRtcV1Publish(data: {
   streamurl: string;
   tid: string;
 }) {
-  return request.instance({
-    url: `/srs/rtcV1Publish`,
-    method: 'post',
-    data,
-  });
+  return request.post(`/srs/rtcV1Publish`, data);
 }
+
 export function fetchRtcV1Play(data: {
   api: string;
   clientip: string | null;
@@ -20,9 +17,5 @@ export function fetchRtcV1Play(data: {
   streamurl: string;
   tid: string;
 }) {
-  return request.instance({
-    url: `/srs/rtcV1Play`,
-    method: 'post',
-    data,
-  });
+  return request.post(`/srs/rtcV1Play`, data);
 }

src/api/user.ts

@@ -30,10 +30,9 @@ export function fetchQrcodeLoginStatus({ platform, login_id }) {
 }
 
 export function fetchLogin({ id, password }) {
-  return request.instance({
-    url: '/user/login',
-    method: 'post',
-    data: { id, password },
+  return request.post('/user/login', {
+    id,
+    password,
   });
 }
 
@@ -41,10 +40,7 @@ export function fetchUserInfo() {
   return request.get<IUser>('/user/get_user_info');
 }
 export function fetchFindUser(userId: number) {
-  return request.instance({
-    url: `/user/find/${userId}`,
-    method: 'get',
-  });
+  return request.get(`/user/find/${userId}`);
 }
 
 export function fetchUserList(params: { orderName: string; orderBy: string }) {

src/api/userLiveRoom.ts

@@ -4,9 +4,7 @@ import request from '@/utils/request';
 export function fetchUserHasLiveRoom(userId: number) {
   return request.get<IUserLiveRoom>(`/user_live_room/find_by_userId/${userId}`);
 }
+
 export function fetchCreateUserLiveRoom() {
-  return request.instance({
-    url: `/user_live_room/create`,
-    method: 'post',
-  });
+  return request.post(`/user_live_room/create`);
 }

src/api/wallet.ts

@@ -1,8 +1,8 @@
-import { IWallet } from '@/interface';
+import { IPaging, IWallet } from '@/interface';
 import request from '@/utils/request';
 
 export function fetchWalletList(params) {
-  return request.get('/wallet/list', {
+  return request.get<IPaging<IWallet>>('/wallet/list', {
     params,
   });
 }

src/api/wechatUser.ts

@@ -7,9 +7,5 @@ export function fetchWechatLogin(data: {
   exp: number;
   login_id: string;
 }) {
-  return request.instance({
-    url: `/wechat_user/login`,
-    method: 'post',
-    data,
-  });
+  return request.post(`/wechat_user/login`, data);
 }

src/interface.ts

@@ -207,12 +207,16 @@ export enum RankTypeEnum {
   sponsors = 'sponsors',
   wallet = 'wallet',
   blog = 'blog',
+  signin = 'signin',
 }
 
 export interface IWallet {
   id?: number;
   user_id?: number;
   balance?: number;
+
+  user?: IUser;
+
   created_at?: string;
   updated_at?: string;
   deleted_at?: string;

src/types/ILiveRoom.ts

@@ -235,6 +235,8 @@ export interface ILiveRoom {
   live?: ILive;
   user_live_room?: IUserLiveRoom & { user: IUser };
 
+  hidden_cover_img?: boolean;
+
   created_at?: string;
   updated_at?: string;
   deleted_at?: string;

src/views/area/id/index.vue

@@ -48,11 +48,25 @@
         </div>
       </div>
     </div>
+    <div
+      class="paging-wrap"
+      v-if="pageParams.hasMore"
+    >
+      <n-pagination
+        v-model:page="pageParams.nowPage"
+        v-model:page-size="pageParams.pageSize"
+        :item-count="pageParams.total"
+        show-size-picker
+        :page-sizes="[30, 50, 100, 200]"
+        @update-page="getData"
+        @update-page-size="handleUpdatePageSize"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchLiveRoomList } from '@/api/area';
@@ -69,15 +83,28 @@ const liveRoomList = ref<ILiveRoom[]>([]);
 const route = useRoute();
 
 const loading = ref(false);
+const pageParams = reactive({
+  nowPage: 1,
+  pageSize: 30,
+  total: 0,
+  hasMore: false,
+});
 
 watch(
   () => route.params.id,
   (newVal) => {
     if (!newVal) return;
+    pageParams.nowPage = 1;
     getData();
   }
 );
 
+function handleUpdatePageSize(v) {
+  pageParams.nowPage = 1;
+  pageParams.pageSize = v;
+  getData();
+}
+
 function goRoom(item: ILiveRoom) {
   if (!item.live) {
     window.$message.info('该直播间没在直播~');
@@ -99,9 +126,13 @@ async function getData() {
     const res = await fetchLiveRoomList({
       id: Number(route.params.id),
       live_room_is_show: LiveRoomIsShowEnum.yes,
+      nowPage: pageParams.nowPage,
+      pageSize: pageParams.pageSize,
     });
     if (res.code === 200) {
       liveRoomList.value = res.data.rows;
+      pageParams.total = res.data.total;
+      pageParams.hasMore = res.data.hasMore;
     }
   } catch (error) {
     console.log(error);
@@ -195,5 +226,11 @@ async function getData() {
       }
     }
   }
+  .paging-wrap {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>

src/views/rank/index.vue

@@ -48,9 +48,18 @@
               直播中
             </div>
           </div>
-          <div v-if="item.balance && currRankType === RankTypeEnum.wallet">
+          <div
+            class="wallet"
+            v-if="currRankType === RankTypeEnum.wallet"
+          >
             钱包：{{ formatMoney(item.balance) }}元
           </div>
+          <div
+            class="signin"
+            v-if="currRankType === RankTypeEnum.signin"
+          >
+            连续签到：{{ item.signin_nums }}天
+          </div>
         </div>
       </div>
       <div class="top50-list">
@@ -78,10 +87,17 @@
               alt=""
             />
             <div class="username">{{ item.users[0]?.username }}</div>
-            <div class="wallet">
-              <div v-if="currRankType === RankTypeEnum.wallet">
-                （钱包：{{ formatMoney(item.balance) }}元）
-              </div>
+            <div
+              class="wallet"
+              v-if="currRankType === RankTypeEnum.wallet"
+            >
+              （钱包：{{ formatMoney(item.balance) }}元）
+            </div>
+            <div
+              class="signin"
+              v-if="currRankType === RankTypeEnum.signin"
+            >
+              （连续签到：{{ item.signin_nums }}天）
             </div>
             <div
               v-if="item.live?.live && currRankType === RankTypeEnum.liveRoom"
@@ -102,13 +118,13 @@
 import { onMounted, ref } from 'vue';
 
 import { fetchLiveRoomList } from '@/api/liveRoom';
+import { fetchSigninList } from '@/api/signin';
 import { fetchBlogUserList, fetchUserList } from '@/api/user';
 import { fetchWalletList } from '@/api/wallet';
 import { fullLoading } from '@/components/FullLoading';
 import { RankTypeEnum } from '@/interface';
 import router, { routerName } from '@/router';
 import { ILiveRoom, LiveRoomIsShowEnum } from '@/types/ILiveRoom';
-import { IUser } from '@/types/IUser';
 import { formatMoney } from '@/utils';
 
 export interface IRankType {
@@ -130,9 +146,13 @@ const rankTypeList = ref<IRankType[]>([
     label: '土豪榜',
   },
   {
-    type: RankTypeEnum.blog,
-    label: '博客用户',
+    type: RankTypeEnum.signin,
+    label: '签到榜',
   },
+  // {
+  //   type: RankTypeEnum.blog,
+  //   label: '博客用户',
+  // },
 ]);
 
 const mockDataNums = 4;
@@ -140,11 +160,12 @@ const mockDataNums = 4;
 const currRankType = ref(RankTypeEnum.liveRoom);
 
 const mockRank: {
-  users: IUser[];
+  users: { id; username; avatar }[];
   rank: number;
   level: number;
   score: number;
   balance: number;
+  signin_nums: number;
   live?: ILiveRoom;
 }[] = [
   {
@@ -158,7 +179,8 @@ const mockRank: {
     rank: 1,
     level: -1,
     score: -1,
-    balance: '0.00',
+    balance: 0,
+    signin_nums: 0,
     live: undefined,
   },
   {
@@ -172,7 +194,8 @@ const mockRank: {
     rank: 2,
     level: -1,
     score: -1,
-    balance: '0.00',
+    balance: 0,
+    signin_nums: 0,
     live: undefined,
   },
   {
@@ -186,7 +209,8 @@ const mockRank: {
     rank: 3,
     level: -1,
     score: -1,
-    balance: '0.00',
+    balance: 0,
+    signin_nums: 0,
     live: undefined,
   },
   {
@@ -200,7 +224,8 @@ const mockRank: {
     rank: 4,
     level: -1,
     score: -1,
-    balance: '0.00',
+    balance: 0,
+    signin_nums: 0,
     live: undefined,
   },
 ];
@@ -221,11 +246,18 @@ async function getWalletList() {
       const length = res.data.rows.length;
       rankList.value = res.data.rows.map((item, index) => {
         return {
-          users: [item.user],
+          users: [
+            {
+              id: item.user?.id,
+              username: item.user?.username,
+              avatar: item.user?.avatar,
+            },
+          ],
           rank: index + 1,
-          level: 1,
-          score: 1,
-          balance: item.balance,
+          level: 0,
+          score: 0,
+          balance: item.balance || 0,
+          signin_nums: 0,
         };
       });
       if (length < mockDataNums) {
@@ -243,6 +275,7 @@ async function getLiveRoomList() {
   try {
     fullLoading({ loading: true });
     const res = await fetchLiveRoomList({
+      hidden_cover_img: true,
       is_show: LiveRoomIsShowEnum.yes,
       orderName: 'updated_at',
       orderBy: 'desc',
@@ -251,11 +284,19 @@ async function getLiveRoomList() {
       const length = res.data.rows.length;
       rankList.value = res.data.rows.map((item, index) => {
         return {
-          users: item.users,
+          users: [
+            {
+              id: item.users?.[0].id,
+              username: item.users?.[0].username,
+              avatar: item.users?.[0].avatar,
+            },
+          ],
           live: item,
           rank: index + 1,
-          level: 1,
-          score: 1,
+          level: 0,
+          score: 0,
+          balance: 0,
+          signin_nums: 0,
         };
       });
       if (length < mockDataNums) {
@@ -282,15 +323,16 @@ async function getUserList() {
         return {
           users: [
             {
-              id: item.id!,
-              username: item.username!,
-              avatar: item.avatar!,
+              id: item.id,
+              username: item.username,
+              avatar: item.avatar,
             },
           ],
           rank: index + 1,
-          level: 1,
-          score: 1,
-          balance: '',
+          level: 0,
+          score: 0,
+          balance: 0,
+          signin_nums: 0,
         };
       });
       if (length < mockDataNums) {
@@ -303,6 +345,7 @@ async function getUserList() {
     fullLoading({ loading: false });
   }
 }
+
 async function getBlogUserList() {
   try {
     fullLoading({ loading: true });
@@ -316,15 +359,52 @@ async function getBlogUserList() {
         return {
           users: [
             {
-              id: item.id!,
-              username: item.username!,
-              avatar: item.avatar!,
+              id: item.id,
+              username: item.username,
+              avatar: item.avatar,
             },
           ],
           rank: index + 1,
-          level: 1,
-          score: 1,
-          balance: '',
+          level: 0,
+          score: 0,
+          balance: 0,
+          signin_nums: 0,
+        };
+      });
+      if (length < mockDataNums) {
+        rankList.value.push(...mockRank.slice(length));
+      }
+    }
+  } catch (error) {
+    console.log(error);
+  } finally {
+    fullLoading({ loading: false });
+  }
+}
+
+async function getSigninList() {
+  try {
+    fullLoading({ loading: true });
+    const res = await fetchSigninList({
+      orderName: 'nums',
+      orderBy: 'desc',
+    });
+    if (res.code === 200) {
+      const length = res.data.rows.length;
+      rankList.value = res.data.rows.map((item, index) => {
+        return {
+          users: [
+            {
+              id: item.user?.id,
+              username: item.user?.username,
+              avatar: item.user?.avatar,
+            },
+          ],
+          rank: index + 1,
+          level: 0,
+          score: 0,
+          balance: 0,
+          signin_nums: item.nums || 0,
         };
       });
       if (length < mockDataNums) {
@@ -350,6 +430,9 @@ function changeCurrRankType(type: RankTypeEnum) {
     case RankTypeEnum.blog:
       getBlogUserList();
       break;
+    case RankTypeEnum.signin:
+      getSigninList();
+      break;
     case RankTypeEnum.wallet:
       getWalletList();
       break;
@@ -484,6 +567,10 @@ onMounted(() => {
             @extend .living-tag;
           }
         }
+        .wallet,
+        .signin {
+          margin-top: 10px;
+        }
       }
     }
     .top50-list {
@@ -525,7 +612,8 @@ onMounted(() => {
 
             @extend %singleEllipsis;
           }
-          .wallet {
+          .wallet,
+          .signin {
             margin-left: 4px;
           }
         }