feat: 全面优化

src/api/wallet.ts

@@ -1,8 +1,9 @@
 import request from '@/utils/request';
 
-export function fetchWalletList() {
+export function fetchWalletList(params) {
   return request.instance({
     url: '/wallet/list',
     method: 'get',
+    params,
   });
 }

src/interface.ts

@@ -202,10 +202,15 @@ export interface IQqUser {
 
 export interface ILive {
   id?: number;
+  /** 1:系统直播;2:用户直播 */
   system?: number;
+  /** 用户信息 */
+  user?: IUser;
+  /** 直播间信息 */
+  live_room?: ILiveRoom;
   socketId?: string;
-  roomId?: string;
-  roomName?: string;
+  user_id?: number;
+  live_room_id?: number;
   track_video?: boolean;
   track_audio?: boolean;
   coverImg?: string;

src/views/home/index.vue

@@ -53,21 +53,25 @@
         <div
           v-for="(item, index) in liveRoomList"
           :key="index"
-          :class="{ item: 1, active: item.roomId === currentLiveRoom?.roomId }"
+          :class="{
+            item: 1,
+            active: item.live_room_id === currentLiveRoom?.live_room_id,
+          }"
           :style="{ backgroundImage: `url(${item.coverImg})` }"
           @click="changeLiveRoom(item)"
         >
           <div
             class="border"
             :style="{
-              opacity: item.roomId === currentLiveRoom?.roomId ? 1 : 0,
+              opacity:
+                item.live_room_id === currentLiveRoom?.live_room_id ? 1 : 0,
             }"
           ></div>
           <div
-            v-if="item.roomId === currentLiveRoom?.roomId"
+            v-if="item.live_room_id === currentLiveRoom?.live_room_id"
             class="triangle"
           ></div>
-          <div class="txt">{{ item.roomName }}</div>
+          <div class="txt">{{ item.live_room?.roomName }}</div>
         </div>
       </div>
       <div
@@ -136,7 +140,7 @@ function joinRoom() {
     router.push({
       name: routerName.pull,
       params: {
-        roomId: currentLiveRoom.value.roomId,
+        roomId: currentLiveRoom.value.live_room_id,
       },
       query: {
         liveType: liveTypeEnum.srsWebrtcPull,
@@ -146,7 +150,7 @@ function joinRoom() {
     router.push({
       name: routerName.pull,
       params: {
-        roomId: currentLiveRoom.value?.roomId,
+        roomId: currentLiveRoom.value?.live_room_id,
       },
       query: {
         liveType: liveTypeEnum.webrtcPull,
@@ -158,7 +162,7 @@ function joinRoom() {
 function joinFlvRoom() {
   router.push({
     name: routerName.pull,
-    params: { roomId: currentLiveRoom.value?.roomId },
+    params: { roomId: currentLiveRoom.value?.live_room_id },
     query: {
       liveType: liveTypeEnum.srsFlvPull,
     },

src/views/order copy/index.vue

@@ -1,222 +0,0 @@
-<template>
-  <div class="sponsors-wrap">
-    <h1 class="txt">
-      截止至{{ onMountedTime }}，已收到：{{ receiveMoney / 100 }}元赞助~
-    </h1>
-    <div class="pay-list">
-      <div class="head-wrap">
-        <div
-          v-for="(item, index) in headList"
-          :key="index"
-          class="head"
-        >
-          <div>{{ item.label }}</div>
-        </div>
-      </div>
-
-      <div
-        v-for="(item, index) in payList"
-        :key="index"
-        class="item"
-      >
-        <div class="time">{{ item.created_at }}</div>
-        <div class="user">
-          <template v-if="item.user">
-            <img
-              :src="item.user.avatar"
-              class="avatar"
-              alt=""
-            />
-            <span class="username">{{ item.user.username }}</span>
-          </template>
-          <span v-else>游客</span>
-        </div>
-
-        <div class="account">{{ item.buyer_logon_id }}</div>
-        <div class="gift">{{ item.subject }}</div>
-        <div class="gift">{{ item.total_amount }}元</div>
-        <div class="status">
-          {{
-            item.trade_status === PayStatusEnum.WAIT_BUYER_PAY
-              ? '支付中'
-              : '已支付'
-          }}
-        </div>
-        <div class="time">{{ item.send_pay_date || '-' }}</div>
-      </div>
-    </div>
-    <h2>开始赞助（支付宝）</h2>
-    <div class="goods-list">
-      <div
-        v-for="(item, index) in sponsorsGoodsList"
-        :key="index"
-        class="item"
-        @click="startPay(item)"
-      >
-        {{ item.name }}（{{ item.price }}元）
-      </div>
-    </div>
-    <QrPayCpt
-      v-if="showQrPay"
-      :money="goodsInfo.money"
-      :goods-id="goodsInfo.goodsId"
-      :live-room-id="goodsInfo.liveRoomId"
-    ></QrPayCpt>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-
-import { fetchGoodsList } from '@/api/goods';
-import { fetchOrderList } from '@/api/order';
-import QrPayCpt from '@/components/QrPay/index.vue';
-import { GoodsTypeEnum, IGoods, IOrder, PayStatusEnum } from '@/interface';
-
-const onMountedTime = ref('');
-const payStatusTimer = ref();
-const downTimer = ref();
-const receiveMoney = ref(0);
-const showQrPay = ref(false);
-const goodsInfo = reactive({
-  money: '0.00',
-  goodsId: -1,
-  liveRoomId: -1,
-});
-
-const payList = ref<IOrder[]>([]);
-const sponsorsGoodsList = ref<IGoods[]>([]);
-
-const headList = ref([
-  {
-    label: '创建时间',
-    key: 'created_at',
-  },
-  {
-    label: '用户',
-    key: 'avatar',
-  },
-  {
-    label: '支付宝账号',
-    key: 'buyer_logon_id',
-  },
-  {
-    label: '商品',
-    key: 'subject',
-  },
-  {
-    label: '价格',
-    key: 'total_amount',
-  },
-  {
-    label: '状态',
-    key: 'trade_status',
-  },
-  {
-    label: '完成时间',
-    key: 'send_pay_date',
-  },
-]);
-
-onUnmounted(() => {
-  clearInterval(payStatusTimer.value);
-  clearInterval(downTimer.value);
-});
-
-onMounted(() => {
-  onMountedTime.value = new Date().toLocaleString();
-  getPayList();
-  getGoodsList();
-});
-
-async function getGoodsList() {
-  const res = await fetchGoodsList({
-    type: GoodsTypeEnum.sponsors,
-    orderName: 'created_at',
-    orderBy: 'desc',
-  });
-  if (res.code === 200) {
-    sponsorsGoodsList.value = res.data.rows;
-  }
-}
-
-async function getPayList() {
-  try {
-    const res = await fetchOrderList({
-      trade_status: PayStatusEnum.TRADE_SUCCESS,
-    });
-    if (res.code === 200) {
-      payList.value = res.data.rows;
-      receiveMoney.value = payList.value.reduce(
-        (pre, item) => pre + Number(item.total_amount) * 100,
-        0
-      );
-    }
-  } catch (error) {
-    console.log(error);
-  }
-}
-
-function startPay(item: IGoods) {
-  showQrPay.value = false;
-  nextTick(() => {
-    goodsInfo.money = item.price!;
-    goodsInfo.goodsId = item.id!;
-    showQrPay.value = true;
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.sponsors-wrap {
-  text-align: center;
-  .pay-list {
-    .head-wrap {
-      display: flex;
-      align-items: center;
-      .head {
-        flex: 1;
-        box-sizing: border-box;
-        margin-bottom: 5px;
-      }
-    }
-    .item {
-      display: flex;
-      align-items: center;
-      height: 40px;
-      color: #666;
-      > div {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        justify-content: center;
-      }
-      &:nth-child(2n) {
-        background-color: #fafbfc;
-      }
-      .time {
-      }
-      .user {
-        .avatar {
-          width: 30px;
-          height: 30px;
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-  .goods-list {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: center;
-    .item {
-      margin: 5px;
-      padding: 5px 10px;
-      border-radius: 4px;
-      background-color: skyblue;
-      cursor: pointer;
-    }
-  }
-}
-</style>

src/views/push/index.vue

@@ -344,7 +344,6 @@ onMounted(() => {
           width: 64px;
           height: 64px;
           border-radius: 50%;
-          background-color: skyblue;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
@@ -383,7 +382,6 @@ onMounted(() => {
               width: 10px;
               height: 10px;
               border-radius: 50%;
-              background-color: skyblue;
             }
           }
         }

src/views/rank/index.vue

@@ -21,8 +21,9 @@
           :key="index"
           :class="{ item: 1, [`rank-${item.rank}`]: 1 }"
         >
-          <div class="avatar">
+          <div class="avatar-wrap">
             <img
+              class="avatar"
               :src="item.avatar"
               alt=""
             />
@@ -31,8 +32,27 @@
           <div class="username">{{ item.username }}</div>
           <div class="rank">
             <i>0{{ item.rank }}</i>
+            <div
+              v-if="item.live && currRankType === RankTypeEnum.liveRoom"
+              class="living"
+              @click="
+                router.push({
+                  name: routerName.pull,
+                  params: { roomId: item.live.live_room_id },
+                  query: {
+                    liveType: item.live.flvurl
+                      ? liveTypeEnum.srsFlvPull
+                      : liveTypeEnum.webrtcPull,
+                  },
+                })
+              "
+            >
+              直播中
+            </div>
+          </div>
+          <div v-if="item.balance && currRankType === RankTypeEnum.wallet">
+            钱包：{{ item.balance }}
           </div>
-          <div v-if="item.balance">余额：{{ item.balance }}</div>
         </div>
       </div>
       <div class="top50-list">
@@ -51,6 +71,28 @@
               alt=""
             />
             <div class="username">{{ item.username }}</div>
+            <div class="wallet">
+              <div v-if="item.balance && currRankType === RankTypeEnum.wallet">
+                （钱包：{{ item.balance }}）
+              </div>
+            </div>
+            <div
+              v-if="item.live && currRankType === RankTypeEnum.liveRoom"
+              class="living-tag"
+              @click="
+                router.push({
+                  name: routerName.pull,
+                  params: { roomId: item.live.live_room_id },
+                  query: {
+                    liveType: item.live.flvurl
+                      ? liveTypeEnum.srsFlvPull
+                      : liveTypeEnum.webrtcPull,
+                  },
+                })
+              "
+            >
+              直播中
+            </div>
           </div>
           <div class="right"></div>
         </div>
@@ -66,7 +108,8 @@ import { fetchLiveRoomList } from '@/api/liveRoom';
 import { fetchUserList } from '@/api/user';
 import { fetchWalletList } from '@/api/wallet';
 import { fullLoading } from '@/components/FullLoading';
-import { RankTypeEnum } from '@/interface';
+import { ILive, RankTypeEnum, liveTypeEnum } from '@/interface';
+import router, { routerName } from '@/router';
 
 export interface IRankType {
   type: RankTypeEnum;
@@ -76,7 +119,7 @@ export interface IRankType {
 const rankTypeList = ref<IRankType[]>([
   {
     type: RankTypeEnum.liveRoom,
-    label: '主播榜',
+    label: '直播榜',
   },
   {
     type: RankTypeEnum.user,
@@ -88,15 +131,27 @@ const rankTypeList = ref<IRankType[]>([
   },
 ]);
 
+const mockDataNums = 4;
+
 const currRankType = ref(RankTypeEnum.liveRoom);
 
-const mockRank = [
+const mockRank: {
+  username: string;
+  avatar: string;
+  rank: number;
+  level: number;
+  score: number;
+  balance: string;
+  live?: ILive;
+}[] = [
   {
     username: '待上榜',
     avatar: '',
     rank: 1,
     level: -1,
     score: -1,
+    balance: '0.00',
+    live: undefined,
   },
   {
     username: '待上榜',
@@ -104,6 +159,8 @@ const mockRank = [
     rank: 2,
     level: -1,
     score: -1,
+    balance: '0.00',
+    live: undefined,
   },
   {
     username: '待上榜',
@@ -111,6 +168,17 @@ const mockRank = [
     rank: 3,
     level: -1,
     score: -1,
+    balance: '0.00',
+    live: undefined,
+  },
+  {
+    username: '待上榜',
+    avatar: '',
+    rank: 4,
+    level: -1,
+    score: -1,
+    balance: '0.00',
+    live: undefined,
   },
 ];
 const rankList = ref(mockRank);
@@ -118,7 +186,7 @@ const rankList = ref(mockRank);
 async function getWalletList() {
   try {
     fullLoading({ loading: true });
-    const res = await fetchWalletList();
+    const res = await fetchWalletList({});
     if (res.code === 200) {
       const length = res.data.rows.length;
       rankList.value = res.data.rows.map((item, index) => {
@@ -131,7 +199,7 @@ async function getWalletList() {
           balance: item.balance,
         };
       });
-      if (length < 3) {
+      if (length < mockDataNums) {
         rankList.value.push(...mockRank.slice(length));
       }
     }
@@ -141,6 +209,7 @@ async function getWalletList() {
     fullLoading({ loading: false });
   }
 }
+
 async function getLiveRoomList() {
   try {
     fullLoading({ loading: true });
@@ -157,9 +226,10 @@ async function getLiveRoomList() {
           rank: index + 1,
           level: 1,
           score: 1,
+          live: item.live,
         };
       });
-      if (length < 3) {
+      if (length < mockDataNums) {
         rankList.value.push(...mockRank.slice(length));
       }
     }
@@ -207,9 +277,10 @@ async function getUserList() {
           rank: index + 1,
           level: 1,
           score: 1,
+          balance: '',
         };
       });
-      if (length < 3) {
+      if (length < mockDataNums) {
         rankList.value.push(...mockRank.slice(length));
       }
     }
@@ -254,6 +325,20 @@ async function getUserList() {
   .rank-list {
     width: 100%;
 
+    .living-tag {
+      display: inline-block;
+      margin: 0 auto;
+      padding: 2px 5px;
+      width: 40px;
+      border: 1px solid $theme-color-gold;
+      border-radius: 10px;
+      color: $theme-color-gold;
+      text-align: center;
+      font-size: 12px;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+
     .top {
       display: flex;
       align-items: flex-end;
@@ -268,6 +353,7 @@ async function getUserList() {
         border-radius: 15px;
         background-color: white;
         text-align: center;
+
         &.rank-1 {
           height: 200px;
           border-color: #ff6744;
@@ -275,17 +361,32 @@ async function getUserList() {
           .rank {
             margin-top: 20px;
           }
+          .avatar-wrap {
+            .avatar {
+              border: 2px solid #ff6744;
+            }
+          }
         }
         &.rank-2 {
           border-color: #44d6ff;
           color: #44d6ff;
+          .avatar-wrap {
+            .avatar {
+              border: 2px solid #44d6ff;
+            }
+          }
         }
         &.rank-3 {
           border-color: #ffb200;
           color: #ffb200;
+          .avatar-wrap {
+            .avatar {
+              border: 2px solid #ffb200;
+            }
+          }
         }
 
-        .avatar {
+        .avatar-wrap {
           position: relative;
           margin-top: -50px;
           img {
@@ -294,20 +395,28 @@ async function getUserList() {
             width: 100px;
             height: 100px;
             border-radius: 50%;
-            background-color: pink;
           }
         }
-
         .username {
           margin-bottom: 10px;
           font-size: 22px;
         }
+
         .rank {
+          position: relative;
           display: inline-block;
           padding: 0px 20px;
           border: 1px solid;
           border-radius: 20px;
           font-size: 20px;
+          .living {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 130%);
+
+            @extend .living-tag;
+          }
         }
       }
     }
@@ -325,27 +434,33 @@ async function getUserList() {
           background-color: #fafbfc;
         }
         .rank {
-          width: 80px;
           box-sizing: border-box;
           margin-right: 20px;
+          width: 80px;
           border-radius: 40px;
-          text-align: center;
           background-color: #84f9da;
           color: white;
+          text-align: center;
           font-size: 20px;
         }
         .left {
           display: flex;
           align-items: center;
+          font-size: 12px;
+
           .avatar {
             margin-right: 10px;
             width: 28px;
             height: 28px;
             border-radius: 50%;
-            background-color: pink;
           }
           .username {
-            font-size: 12px;
+            width: 100px;
+
+            @extend %singleEllipsis;
+          }
+          .wallet {
+            margin-left: 4px;
           }
         }
       }