fix(app/home): 首页视频

packages/app/src/components/tabbar-evo.vue

@@ -62,14 +62,14 @@ onMounted(async () => {
     <div>
       <div
         ref="tabbar"
-        :class="[fixed ? 'fixed bottom-0 left-0 right-0' : '']"
+        :class="[fixed ? 'fixed bottom-0 left-0 right-0 z-2' : '']"
         class="m-3.5 h-[60px] bg-white/70 rounded-[60px] border border-white backdrop-blur-[25px] flex items-center justify-around"
       >
         <template
           v-for="({ iconPath, selectedIconPath, title, hiddenTitle, path }, i) in items"
           :key="i"
         >
-          <div class="flex flex-col items-center justify-center" @click="handleClick(path)">
+          <div class="w-full flex flex-col items-center justify-center" @click="handleClick(path)">
             <wd-img
               round
               :height="hiddenTitle ? 40 : 22"

packages/app/src/core/libs/requests.ts

@@ -275,6 +275,19 @@ export const getCircleTags = (query) =>
       createTime: number
     }[]
   }>('/app-api/basicsetting/set-label/page', query)
+export const getSetIndexConfigs = (query = {}) =>
+  httpGet<{
+    list: {
+      id: number
+      name: string
+      indexPromotionalVideoImage: string
+      coverVideoImage: string
+      sort: number
+      playCount: number
+      status: number
+      createTime: string
+    }[]
+  }>('/app-api/basicsetting/set-index-config/page', query)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/app/src/layouts/tabbar.vue

@@ -81,7 +81,7 @@ const toPublishCase = () => {
     />
     <div
       v-if="publishState"
-      class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-1"
+      class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-2"
     >
       <div class="w-full h-full flex flex-col justify-around px-7 box-border">
         <div class="text-black/40 text-3xl font-normal font-['PingFang SC'] leading-[45px]">

packages/app/src/pages/home/index.vue

@@ -17,11 +17,12 @@ import useRequest from '../../hooks/useRequest'
 import dayjs from 'dayjs'
 import Menus from './components/menus.vue'
 import ScheduleCard from './components/schedule-card.vue'
-import { getCircles } from '../../core/libs/requests'
+import { getCircles, getSetIndexConfigs } from '../../core/libs/requests'
 
 defineOptions({
   name: 'Home',
 })
+const instance = getCurrentInstance()
 // 测试 uni API 自动引入
 const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
   initialData: {
@@ -94,29 +95,62 @@ const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IRes
   },
 })
 const { data: circlesData, run } = useRequest(() => getCircles({}), { initialData: { list: [] } })
-console.log(data.value)
+const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
+  () => getSetIndexConfigs(),
+  { initialData: { list: [] } },
+)
+const indexVideoContexts = ref([])
+
 onShow(async () => {
   await run()
   console.log(circlesData.value)
 })
-onLoad(() => {})
+onLoad(async () => {
+  await setIndexConfigsData()
+  console.log(indexConfigsData.value)
+  indexVideoContexts.value = indexConfigsData.value.list.map((it) =>
+    uni.createVideoContext(`video-${it.id}`, instance),
+  )
+  console.log(indexVideoContexts.value)
+})
 onShareAppMessage(() => ({}))
 </script>
 
 <template>
   <view class="">
-    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
-      <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
-      <div
-        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
-      >
-        <!-- <div class="w-[82px] h-[33px] rounded-[60px] border border-white"></div> -->
-        <view class="mx-7">
-          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
-            02:30
-          </wd-button>
-        </view>
-      </div>
+    <view class="bg-black w-full relative aspect-[1.26/1]">
+      <swiper>
+        <template
+          v-for="{ id, coverVideoImage, indexPromotionalVideoImage } of indexConfigsData.list"
+          :key="id"
+        >
+          <swiper-item>
+            <div class="w-full h-full relative">
+              <video
+                class="w-full h-full"
+                :id="`video-${id}`"
+                :src="indexPromotionalVideoImage"
+              ></video>
+              <div class="absolute left-0 top-0 w-full h-full bg-black">
+                <wd-img width="100%" height="100%" :src="coverVideoImage" />
+              </div>
+              <div
+                class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
+              >
+                <view class="mx-7">
+                  <wd-button
+                    plain
+                    custom-class="bg-transparent! border-white! text-white!"
+                    icon="play"
+                  >
+                    02:30
+                  </wd-button>
+                </view>
+              </div>
+            </div>
+          </swiper-item>
+        </template>
+      </swiper>
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
       <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>