feat: 优化分区

README.md

@@ -2,7 +2,7 @@
   <a href="https://live.hsslive.cn" target="_blank">
     <img
       width="200"
-      src="https://resource.hsslive.cn/image/1613141138717Billd.webp"
+      src="https://github.com/galaxy-s10/billd-live/blob/master/src/assets/img/logo-txt.svg"
       alt="Billd-Live logo"
     />
   </a>
@@ -27,13 +27,12 @@ billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://
 - [x] 原生 webrtc 推拉流
 - [x] srs webrtc 推流， `webrtc` 或 `http-flv` 或 `hls`拉流
 - [x] [obs](https://github.com/obsproject/obs-studio)推流
-- [x] 支付宝打赏
 - [x] 用户模块
+- [x] 支付模块（支付宝当面付）
 - [x] 订单模块
-- [ ] 礼物模块
+- [x] 商品模块
+- [x] 适配移动端
 - [ ] 在线后台
-- [ ] 适配移动端
-- [ ] 敬请期待！
 
 ## 预览
 

src/api/area.ts

@@ -10,3 +10,15 @@ export function fetchAreaLiveRoomList(params: {
     params,
   });
 }
+
+export function fetchLiveRoomList(params: {
+  pageSize?: string;
+  nowPage?: string;
+  id: number;
+}) {
+  return request.instance({
+    url: '/area/live_room_list',
+    method: 'get',
+    params,
+  });
+}

src/assets/constant.scss

@@ -15,4 +15,4 @@ $small-width: 800px;
 $large-left-width: 1100px;
 $medium-left-width: 900px;
 $small-left-width: 600px;
-$theme-color-gold: gold;
+$theme-color-gold: #ffd700;

src/hooks/use-play.ts

@@ -5,6 +5,7 @@ import Player from 'video.js/dist/types/player';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useAppStore } from '@/store/app';
+
 // @ts-ignore
 export const flvJs = window.flvjs;
 
@@ -14,9 +15,7 @@ export function useFlvPlay() {
   onMounted(() => {});
 
   onUnmounted(() => {
-    if (flvPlayer.value) {
-      flvPlayer.value.destroy();
-    }
+    destroyFlv();
   });
 
   function destroyFlv() {
@@ -29,9 +28,7 @@ export function useFlvPlay() {
     flvurl: string;
     videoEl: HTMLVideoElement;
   }) {
-    if (flvPlayer.value) {
-      flvPlayer.value.destroy();
-    }
+    destroyFlv();
     if (flvJs.isSupported()) {
       const player = flvJs.createPlayer({
         type: 'flv',
@@ -43,6 +40,7 @@ export function useFlvPlay() {
         await player.play();
         flvPlayer.value = player;
       } catch (err) {
+        console.error('flv播放失败');
         console.log(err);
       }
     } else {
@@ -81,17 +79,14 @@ export function useHlsPlay() {
   );
 
   function startHlsPlay(data: { hlsurl: string; videoEl: HTMLVideoElement }) {
-    console.log('startHlsPlay', data.hlsurl);
-    if (hlsPlayer.value) {
-      destroyHls();
-    }
+    destroyHls();
     const newVideo = document.createElement('video');
     newVideo.muted = true;
     newVideo.playsInline = true;
     newVideo.setAttribute('webkit-playsinline', 'true');
     videoEl.value = newVideo;
     data.videoEl.parentElement?.appendChild(newVideo);
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       hlsPlayer.value = videoJs(
         newVideo,
         {
@@ -106,9 +101,15 @@ export function useHlsPlay() {
         },
         function onPlayerReady() {
           console.log('Your player is ready!');
+
           // @ts-ignore
           this.play();
           resolve('ok');
+          setTimeout(() => {
+            newVideo.muted = false;
+            appStore.setMuted(false);
+          }, 0);
+
           // @ts-ignore
           this.on('ended', function () {
             console.log('Awww...over so soon?!');

src/layout/mobile/head/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="m-head-wrap">
+    <div class="logo-bar">
+      <div
+        class="logo"
+        @click="router.push({ name: mobileRouterName.h5 })"
+      ></div>
+    </div>
+    <nav class="nav-list">
+      <div
+        v-for="(item, index) in navList"
+        :key="index"
+        class="item"
+        :class="{ active: appStore.mobileNav.id === item.id }"
+        @click="appStore.setMobileNav(item)"
+      >
+        {{ item.name }}
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import router, { mobileRouterName } from '@/router';
+import { useAppStore } from '@/store/app';
+
+const appStore = useAppStore();
+const navList = ref([
+  { id: 1, name: '频道' },
+  { id: 2, name: '排行' },
+  { id: 3, name: '我的' },
+]);
+
+const currentNav = ref(navList.value[0]);
+</script>
+
+<style lang="scss" scoped>
+.m-head-wrap {
+  .logo-bar {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+    height: 40px;
+    border-bottom: 1px solid #e7e7e7;
+    background-color: white;
+    .logo {
+      width: 90px;
+      height: 36px;
+
+      @include setBackground('@/assets/img/logo-txt.png');
+    }
+  }
+  .nav-list {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    background-color: white;
+    line-height: 40px;
+    .item {
+      position: relative;
+      margin: 0 20px;
+      &.active {
+        &::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 100%;
+          height: 4px;
+          background-color: $theme-color-gold;
+          content: '';
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/mobile/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="layout">
+    <HeadCpt></HeadCpt>
+    <router-view v-slot="{ Component }">
+      <component :is="Component"></component>
+    </router-view>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import HeadCpt from './head/index.vue';
+</script>
+
+<style lang="scss" scoped></style>

src/router/index.ts

@@ -1,13 +1,15 @@
-import { isMobile } from 'billd-utils';
+import { isIPad, isMobile } from 'billd-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 
-import Layout from '@/layout/index.vue';
+import MobileLayout from '@/layout/mobile/index.vue';
+import PcLayout from '@/layout/pc/index.vue';
 
 import type { RouteRecordRaw } from 'vue-router';
 
 export const mobileRouterName = {
   h5: 'h5',
   h5Room: 'h5Room',
+  h5Area: 'h5Area',
 };
 
 export const routerName = {
@@ -36,9 +38,14 @@ export const routerName = {
 
 // 默认路由
 export const defaultRoutes: RouteRecordRaw[] = [
+  {
+    name: routerName.oauth,
+    path: '/oauth/:platform',
+    component: () => import('@/views/oauth/index.vue'),
+  },
   {
     path: '/',
-    component: Layout,
+    component: PcLayout,
     children: [
       {
         name: routerName.home,
@@ -126,20 +133,26 @@ export const defaultRoutes: RouteRecordRaw[] = [
     ],
   },
   {
-    name: mobileRouterName.h5,
     path: '/h5',
-    component: () => import('@/views/h5/index.vue'),
+    component: MobileLayout,
+    children: [
+      {
+        name: mobileRouterName.h5,
+        path: '',
+        component: () => import('@/views/h5/index.vue'),
+      },
+      {
+        name: mobileRouterName.h5Area,
+        path: 'area/:areaId',
+        component: () => import('@/views/h5/area/index.vue'),
+      },
+    ],
   },
   {
     name: mobileRouterName.h5Room,
     path: '/h5/:roomId',
     component: () => import('@/views/h5/room/index.vue'),
   },
-  {
-    name: routerName.oauth,
-    path: '/oauth/:platform',
-    component: () => import('@/views/oauth/index.vue'),
-  },
 ];
 const router = createRouter({
   routes: [
@@ -157,7 +170,7 @@ router.beforeEach((to, from, next) => {
   if (to.name === routerName.oauth) {
     return next();
   }
-  if (isMobile()) {
+  if (isMobile() && !isIPad()) {
     if (!Object.keys(mobileRouterName).includes(to.name as string)) {
       // 当前移动端，但是跳转了非移动端路由
       return next({ name: mobileRouterName.h5 });

src/store/app/index.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia';
 type AppRootState = {
   liveStatus: boolean;
   muted: boolean;
+  mobileNav: { id: number; name: string };
 };
 
 export const useAppStore = defineStore('app', {
@@ -10,6 +11,7 @@ export const useAppStore = defineStore('app', {
     return {
       liveStatus: false,
       muted: true,
+      mobileNav: { id: 1, name: '频道' },
     };
   },
   actions: {
@@ -19,5 +21,8 @@ export const useAppStore = defineStore('app', {
     setMuted(res: AppRootState['muted']) {
       this.muted = res;
     },
+    setMobileNav(res: AppRootState['mobileNav']) {
+      this.mobileNav = res;
+    },
   },
 });

src/views/about copy/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="about-wrap">
-    <h2>billd-live目前实现</h2>
-    <h3>1. 原生webrtc一对多直播（DONE）</h3>
-    <h3>2. srs-webrtc一对多直播（DONE）</h3>
-    <h3>3. 原生webrtc多对多直播（DONE）</h3>
-    <h1>PR</h1>
-    <h2>
-      billd-live目前只有作者一人开发，难免有不足的地方，欢迎大家共同开发。
-    </h2>
-    <h3>
-      ps：我希望的是强强联合，如果你啥都不会，欢迎
-      <a href="/support">付费</a>向我提问。
-    </h3>
-    <h1>微信交流群 & 我的微信</h1>
-    <img
-      src="@/assets/img/wechat-group.webp"
-      alt=""
-      class="wechat-group"
-    />
-    <img
-      src="@/assets/img/my-wechat.webp"
-      alt=""
-      class="my-wechat"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" scoped>
-.about-wrap {
-  text-align: center;
-  .wechat-group {
-    height: 500px;
-  }
-  .my-wechat {
-    height: 500px;
-  }
-}
-</style>

src/views/h5/area/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="m-area-wrap">
+    <div class="title">{{ route.query.name }}</div>
+    <div class="live-room-list">
+      <div
+        v-for="(iten, indey) in liveRoomList"
+        :key="indey"
+        class="live-room"
+        @click="goRoom(iten)"
+      >
+        <div
+          class="cover"
+          :style="{
+            backgroundImage: `url('${
+              iten?.cover_img || iten?.users?.[0].avatar
+            }')`,
+          }"
+        >
+          <div class="txt">{{ iten?.users?.[0].username }}</div>
+        </div>
+        <div class="desc">{{ iten?.name }}</div>
+      </div>
+      <div
+        v-if="!liveRoomList.length"
+        class="null"
+      >
+        暂无数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { fetchLiveRoomList } from '@/api/area';
+import { ILiveRoom, liveTypeEnum } from '@/interface';
+import router, { routerName } from '@/router';
+
+const liveRoomList = ref<ILiveRoom[]>([]);
+
+const route = useRoute();
+function goRoom(item: ILiveRoom) {
+  router.push({
+    name: routerName.h5Room,
+    params: { roomId: item.id },
+    query: {
+      liveType: liveTypeEnum.srsHlsPull,
+    },
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+
+async function getData() {
+  const res = await fetchLiveRoomList({
+    id: Number(route.params.areaId),
+  });
+  if (res.code === 200) {
+    console.log(2);
+    liveRoomList.value = res.data.rows;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.m-area-wrap {
+  padding: 10px 20px;
+  .title {
+    margin-bottom: 10px;
+  }
+  .live-room-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .live-room {
+      display: inline-block;
+      margin-bottom: 10px;
+      width: 48%;
+      .cover {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        height: 100px;
+        border-radius: 8px;
+        background-position: center center;
+        background-size: cover;
+
+        .txt {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          box-sizing: border-box;
+          padding: 4px 8px;
+          width: 100%;
+          border-radius: 0 0 4px 4px;
+          background-image: linear-gradient(
+            -180deg,
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.6)
+          );
+          color: white;
+          text-align: initial;
+          font-size: 13px;
+
+          @extend %singleEllipsis;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        margin-top: 4px;
+        @extend %singleEllipsis;
+      }
+    }
+  }
+}
+</style>

src/views/h5/index.vue

@@ -1,31 +1,32 @@
 <template>
   <div class="h5-wrap">
-    <div class="logo-bar">
-      <div class="logo"></div>
+    <div
+      class="swiper"
+      :style="{ backgroundColor: currentSwiper.bg }"
+    >
+      {{ currentSwiper.txt }}
     </div>
-    <nav class="nav-list">
-      <div
-        v-for="(item, index) in navList"
-        :key="index"
-        class="item"
-        :class="{ active: currentNav.id === item.id }"
-        @click="currentNav = item"
-      >
-        {{ item.name }}
-      </div>
-    </nav>
-    <div class="swiper">
-      <div class="item"></div>
-    </div>
-    <div class="type-list">
+
+    <div
+      v-if="currentNav.id === appStore.mobileNav?.id"
+      class="type-list"
+    >
       <div
         v-for="(item, index) in liveRoomList"
         :key="index"
         class="item"
       >
-        <div class="title">
+        <div
+          class="title"
+          @click.stop
+        >
           <div class="left">{{ item.name }}</div>
-          <div class="right">查看全部</div>
+          <div
+            class="right"
+            @click="showAll(item)"
+          >
+            查看全部
+          </div>
         </div>
         <div class="live-room-list">
           <div
@@ -55,6 +56,12 @@
         </div>
       </div>
     </div>
+    <div
+      v-else
+      class="null"
+    >
+      敬请期待~
+    </div>
   </div>
 </template>
 
@@ -63,7 +70,10 @@ import { onMounted, ref } from 'vue';
 
 import { fetchAreaLiveRoomList } from '@/api/area';
 import { IArea, IAreaLiveRoom, liveTypeEnum } from '@/interface';
-import router, { routerName } from '@/router';
+import router, { mobileRouterName, routerName } from '@/router';
+import { useAppStore } from '@/store/app';
+
+const appStore = useAppStore();
 
 const navList = ref([
   { id: 1, name: '频道' },
@@ -74,6 +84,14 @@ const navList = ref([
 const currentNav = ref(navList.value[0]);
 const liveRoomList = ref<IArea[]>([]);
 
+const swiperList = ref([
+  { id: 1, txt: '广告位1', bg: '#FFCC70', url: '' },
+  { id: 2, txt: '广告位2', bg: '#C850C0', url: '' },
+  { id: 3, txt: '广告位3', bg: '#4158D0', url: '' },
+]);
+const timer = ref();
+const currentSwiper = ref({ id: 1, txt: '广告位1', bg: '#FFCC70', url: '' });
+
 async function getLiveRoomList() {
   try {
     const res = await fetchAreaLiveRoomList({
@@ -88,6 +106,14 @@ async function getLiveRoomList() {
   }
 }
 
+function showAll(item: IArea) {
+  router.push({
+    name: mobileRouterName.h5Area,
+    params: { areaId: item.id },
+    query: { name: item.name },
+  });
+}
+
 function goRoom(item: IAreaLiveRoom) {
   router.push({
     name: routerName.h5Room,
@@ -100,6 +126,14 @@ function goRoom(item: IAreaLiveRoom) {
 
 onMounted(() => {
   getLiveRoomList();
+  let num = 0;
+  timer.value = setInterval(() => {
+    num += 1;
+    if (num > swiperList.value.length - 1) {
+      num = 0;
+    }
+    currentSwiper.value = swiperList.value[num];
+  }, 3000);
 });
 </script>
 
@@ -146,7 +180,11 @@ onMounted(() => {
   .swiper {
     width: 100%;
     height: 130px;
-    background: red;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    font-size: 30px;
   }
   .type-list {
     .item {

src/views/h5/room/index.vue

@@ -44,13 +44,16 @@
         :muted="appStore.muted"
       ></video>
       <div
-        v-if="showTip"
+        v-if="showPlayBtn"
         class="tip-btn"
         @click="startPull"
       >
         点击播放
       </div>
-      <div class="controls">
+      <div
+        v-if="!showPlayBtn"
+        class="controls"
+      >
         <VideoControls></VideoControls>
       </div>
     </div>
@@ -98,6 +101,7 @@
       <n-button
         type="info"
         size="small"
+        color="#ffd700"
         @click="sendDanmu"
       >
         发送
@@ -113,30 +117,20 @@ import { useRoute } from 'vue-router';
 import { fetchFindLiveRoom } from '@/api/liveRoom';
 import { useHlsPlay } from '@/hooks/use-play';
 import { usePull } from '@/hooks/use-pull';
-import { DanmuMsgTypeEnum, IGoods, ILiveRoom, liveTypeEnum } from '@/interface';
+import { DanmuMsgTypeEnum, ILiveRoom, liveTypeEnum } from '@/interface';
 import router, { mobileRouterName } from '@/router';
 import { useAppStore } from '@/store/app';
-import { useUserStore } from '@/store/user';
 
 const route = useRoute();
-const userStore = useUserStore();
 const appStore = useAppStore();
 
-const giftGoodsList = ref<IGoods[]>([]);
-const showControls = ref(false);
-const giftLoading = ref(false);
-const showRecharge = ref(false);
-const showJoin = ref(true);
-const showSidebar = ref(true);
-const topRef = ref<HTMLDivElement>();
 const bottomRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
 const remoteVideoRef = ref<HTMLVideoElement>();
 const localVideoRef = ref<HTMLVideoElement[]>([]);
-const showTip = ref(true);
-const clickShowTip = ref(false);
+const showPlayBtn = ref(true);
 
-const { startHlsPlay, destroyHls } = useHlsPlay();
+const { startHlsPlay } = useHlsPlay();
 
 const {
   initPull,
@@ -193,14 +187,14 @@ async function getLiveRoomInfo() {
 }
 
 async function startPull() {
-  showTip.value = false;
+  showPlayBtn.value = false;
   await startHlsPlay({
     hlsurl: liveRoomInfo.value!.hls_url!,
     videoEl: remoteVideoRef.value!,
   });
-  setTimeout(() => {
-    appStore.setMuted(false);
-  }, 0);
+  // setTimeout(() => {
+  //   appStore.setMuted(false);
+  // }, 0);
 }
 
 onMounted(() => {
@@ -294,9 +288,9 @@ onMounted(() => {
 
   .danmu-list {
     box-sizing: border-box;
+    padding: 0 15px;
     background-color: #0c1622;
     text-align: initial;
-    padding: 0 15px;
     .title {
       padding: 15px 0;
       color: #fff;
@@ -321,21 +315,20 @@ onMounted(() => {
     }
   }
   .send-msg {
-    background-color: #0c1622;
     position: fixed;
     bottom: 0;
     left: 0;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
     box-sizing: border-box;
     padding: 0 10px;
     width: 100%;
     height: 40px;
+    background-color: #0c1622;
     .ipt {
       display: block;
       box-sizing: border-box;
-      margin-right: 10px;
       padding: 10px;
       width: 80%;
       height: 30px;

src/views/home/index.vue

@@ -41,14 +41,6 @@
             <VideoControls></VideoControls>
           </div>
           <div
-            v-if="showTip && !clickShowTip"
-            class="tip-btn"
-            @click="handleTipBtn"
-          >
-            点击播放
-          </div>
-          <div
-            v-else
             class="join-btn"
             :style="{
               display: !isMobile() ? 'none' : showControls ? 'block' : 'none',
@@ -67,12 +59,7 @@
             </div>
             <div
               v-if="
-                !showTip &&
-                (currentLiveRoom.live_room?.type === LiveRoomTypeEnum.system ||
-                  currentLiveRoom.live_room?.type ===
-                    LiveRoomTypeEnum.user_obs ||
-                  currentLiveRoom?.live_room?.type ===
-                    LiveRoomTypeEnum.user_srs)
+                currentLiveRoom.live_room?.type !== LiveRoomTypeEnum.user_wertc
               "
               class="btn flv"
               @click="joinFlvRoom()"
@@ -81,9 +68,7 @@
             </div>
             <div
               v-if="
-                currentLiveRoom.live_room?.type === LiveRoomTypeEnum.system ||
-                currentLiveRoom.live_room?.type === LiveRoomTypeEnum.user_obs ||
-                currentLiveRoom?.live_room?.type === LiveRoomTypeEnum.user_srs
+                currentLiveRoom.live_room?.type !== LiveRoomTypeEnum.user_wertc
               "
               class="btn hls"
               @click="joinHlsRoom()"
@@ -152,8 +137,6 @@ import { useAppStore } from '@/store/app';
 
 const appStore = useAppStore();
 const router = useRouter();
-const showTip = ref(false);
-const clickShowTip = ref(false);
 const showControls = ref(false);
 const liveRoomList = ref<ILive[]>([]);
 const currentLiveRoom = ref<ILive>();
@@ -162,13 +145,8 @@ const localVideoRef = ref<HTMLVideoElement>();
 const { startFlvPlay, destroyFlv } = useFlvPlay();
 const { startHlsPlay, destroyHls } = useHlsPlay();
 
-if (!flvJs.isSupported()) {
-  showTip.value = true;
-}
-
 async function handleTipBtn() {
   if (currentLiveRoom.value) {
-    clickShowTip.value = true;
     await startHlsPlay({
       hlsurl: currentLiveRoom.value.live_room!.hls_url!,
       videoEl: localVideoRef.value!,
@@ -192,8 +170,6 @@ function changeLiveRoom(item: ILive) {
           videoEl: localVideoRef.value!,
         });
       } else {
-        // showTip.value = true;
-        // clickShowTip.value = false;
         destroyHls();
         await startHlsPlay({
           hlsurl: item.live_room.hls_url!,
@@ -283,6 +259,7 @@ function joinFlvRoom() {
     },
   });
 }
+
 function joinHlsRoom() {
   router.push({
     name: routerName.pull,
@@ -350,24 +327,6 @@ function joinHlsRoom() {
           display: block !important;
         }
       }
-      .tip-btn {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 1;
-        align-items: center;
-        padding: 12px 26px;
-        border: 2px solid rgba($color: papayawhip, $alpha: 0.5);
-        border-radius: 6px;
-        background-color: rgba(0, 0, 0, 0.3);
-        color: $theme-color-gold;
-        cursor: pointer;
-        transform: translate(-50%, -50%);
-        &:hover {
-          background-color: rgba($color: papayawhip, $alpha: 0.5);
-          color: white;
-        }
-      }
       .join-btn {
         position: absolute;
         top: 50%;

src/views/pull/index.vue

@@ -51,13 +51,6 @@
               :muted="appStore.muted"
               @click="showControls = !showControls"
             ></video>
-            <div
-              v-if="showTip && !clickShowTip"
-              class="tip-btn"
-              @click="handleTipBtn"
-            >
-              点击播放
-            </div>
             <div
               class="controls"
               :style="{
@@ -230,7 +223,6 @@ import { useRoute } from 'vue-router';
 
 import { fetchGoodsList } from '@/api/goods';
 import { loginTip } from '@/hooks/use-login';
-import { flvJs, useHlsPlay } from '@/hooks/use-play';
 import { usePull } from '@/hooks/use-pull';
 import {
   DanmuMsgTypeEnum,
@@ -259,10 +251,6 @@ const danmuListRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
 const remoteVideoRef = ref<HTMLVideoElement>();
 const localVideoRef = ref<HTMLVideoElement[]>([]);
-const showTip = ref(false);
-const clickShowTip = ref(false);
-
-const { startHlsPlay } = useHlsPlay();
 
 const {
   initPull,
@@ -298,20 +286,6 @@ const {
   isSRS: route.query.liveType === liveTypeEnum.srsWebrtcPull,
 });
 
-if (route.query.liveType === liveTypeEnum.srsHlsPull && !flvJs.isSupported()) {
-  showTip.value = true;
-}
-
-async function handleTipBtn() {
-  if (currentLiveRoom.value) {
-    clickShowTip.value = true;
-    await startHlsPlay({
-      hlsurl: currentLiveRoom.value.live_room!.hls_url!,
-      videoEl: localVideoRef.value!,
-    });
-  }
-}
-
 async function getGoodsList() {
   try {
     giftLoading.value = true;

src/views/shop/index.vue

@@ -219,7 +219,7 @@ function startPay(item: IGoods) {
           display: flex;
           align-items: center;
           .price {
-            color: gold;
+            color: $theme-color-gold;
             font-size: 22px;
           }
           .original-price {