feat(home): 添加轮播图功能

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

@@ -12,6 +12,7 @@ import {
   Comment,
   Activity,
   BannerMode,
+  Banner,
 } from '../models/moment'
 import dayjs from 'dayjs'
 
@@ -361,7 +362,7 @@ export const getActivitySignups = (query: { activityId: string }) =>
  * 获取Banner列表
  */
 export const getBanners = (query: { mode: BannerMode }) =>
-  httpGet('/app-api/member/banner/get-by-mode', query)
+  httpGet<Banner[]>('/app-api/member/banner/get-by-mode', query)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/app/src/core/models/moment.ts

@@ -255,6 +255,44 @@ export interface Activity {
   viewCount: number
   createTime: string
 }
+export interface Banner {
+  id: number
+  name: string
+  modeType: BannerMode
+  /**
+   * 轮播图图片
+   */
+  bannerImgUrl: string
+  /**
+   * 轮播图详情类型
+   */
+  bannerDetailsType: string
+  /**
+   * 轮播图链接
+   */
+  bannerLinkUrl: string
+  /**
+   * 轮播图详情内容
+   */
+  bannerDetailsContent: any
+  /**
+   * 状态 - 0: 正常, 1: 停用
+   */
+  status: number
+  /**
+   * 浏览量
+   */
+  viewCount: any
+  /**
+   * 设计游学年份
+   */
+  designStudyAbroadYear: any
+  /**
+   * 设计游学描述
+   */
+  designDesc: any
+  createTime: number
+}
 export enum DictType {
   /**
    *  擅长空间类型

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

@@ -12,8 +12,9 @@ import TiltedButton from '@/components/tilted-button.vue'
 import Product from './components/product.vue'
 import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
 import { useRouter } from '../../../core/utils/router'
-import { getProductCategories, getProducts } from '../../../core/libs/requests'
+import { getBanners, getProductCategories, getProducts } from '../../../core/libs/requests'
 import PageHelper from '@/components/page-helper.vue'
+import { BannerMode } from '../../../core/models/moment'
 
 const router = useRouter()
 
@@ -21,18 +22,39 @@ const { data: productCategories, run: setProductCategories } = useRequest(
   () => getProductCategories(),
   { initialData: [] },
 )
+const { data: banners, run: setBanners } = useRequest(() => getBanners({ mode: BannerMode.Mall }), {
+  initialData: [],
+})
+const current = ref<number>(0)
+const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
 const categories = computed(() => productCategories.value.find(({ id }) => id === 1)?.children)
 const category = ref()
-const data = ref(['https://via.placeholder.com/347x128'])
+function handleClick(e) {
+  console.log(e)
+}
+function onChange(e) {
+  console.log(e)
+}
 onMounted(async () => {
   await setProductCategories()
+  await setBanners()
   category.value = categories.value[0]
 })
 </script>
 
 <template>
   <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
-    <wd-swiper :list="data" autoplay height="128px"></wd-swiper>
+    <wd-swiper
+      custom-class="rounded-2xl overflow-hidden aspect-[2.71/1]"
+      width="100%"
+      height="100%"
+      :list="swiperList"
+      autoplay
+      v-model:current="current"
+      :indicator="{ type: 'dots-bar' } as any"
+      @click="handleClick"
+      @change="onChange"
+    ></wd-swiper>
     <!-- <div class="bg-black rounded-2xl pt-11">
       <div class="bg-white rounded-2xl shadow p-3.5"></div>
     </div> -->

packages/app/src/pages/home/spread/design-awards/index.vue

@@ -10,10 +10,10 @@
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
 import ElegantInfoCard from '../../components/elegant-info-card.vue'
-import { getContents } from '../../../../core/libs/requests'
+import { getBanners, getContents } from '../../../../core/libs/requests'
 import { NetImages } from '../../../../core/libs/net-images'
+import { BannerMode } from '../../../../core/models/moment'
 
-const data1 = ref(['https://via.placeholder.com/347x128'])
 const { data, run: setData } = useRequest(
   () =>
     getContents({
@@ -24,21 +24,44 @@ const { data, run: setData } = useRequest(
     initialData: { list: [] },
   },
 )
+const { data: banners, run: setBanners } = useRequest(
+  () => getBanners({ mode: BannerMode.DesignAwards }),
+  { initialData: [] },
+)
+const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
+const current = ref<number>(0)
 const products = ref([{}, {}, {}])
+function handleClick(e) {
+  console.log(e)
+}
+function onChange(e) {
+  console.log(e)
+}
 onMounted(async () => {
   await setData()
+  await setBanners()
 })
 </script>
 
 <template>
   <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
-    <wd-swiper :list="data1" autoplay height="128px"></wd-swiper>
+    <wd-swiper
+      custom-class="rounded-2xl overflow-hidden aspect-[2.71/1]"
+      width="100%"
+      height="100%"
+      :list="swiperList"
+      autoplay
+      v-model:current="current"
+      :indicator="{ type: 'dots-bar' } as any"
+      @click="handleClick"
+      @change="onChange"
+    ></wd-swiper>
     <SectionHeading title="筑巢奖"></SectionHeading>
     <template v-for="(it, i) in data.list" :key="i">
       <ElegantInfoCard :options="it"></ElegantInfoCard>
     </template>
     <wd-status-tip
-      v-if="!data.list.length"
+      v-if="!data.list?.length"
       :image="NetImages.NotContent"
       tip="暂无内容"
     ></wd-status-tip>

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

@@ -9,8 +9,9 @@ import InfoCard from '../components/info-card.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import ElegantInfoCard from '../components/elegant-info-card.vue'
 import { useRouter } from '../../../core/utils/router'
-import { getContents } from '../../../core/libs/requests'
+import { getBanners, getContents } from '../../../core/libs/requests'
 import { NetImages } from '../../../core/libs/net-images'
+import { BannerMode } from '../../../core/models/moment'
 
 const router = useRouter()
 const current = ref<number>(0)
@@ -23,14 +24,12 @@ const { data, run: setData } = useRequest(
     initialData: { list: [] },
   },
 )
+const { data: banners, run: setBanners } = useRequest(
+  () => getBanners({ mode: BannerMode.Spread }),
+  { initialData: [] },
+)
 
-const swiperList = ref([
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
-  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
-])
+const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
 const menus = ref([
   {
     title: '微信代运营',
@@ -59,16 +58,20 @@ function onChange(e) {
 }
 onMounted(async () => {
   await setData()
+  await setBanners()
 })
 </script>
 
 <template>
-  <view class="px-3.5">
+  <view class="px-3.5 py-5.5">
     <wd-swiper
-      custom-class="my-6 h-32 rounded-2xl overflow-hidden"
+      custom-class="rounded-2xl overflow-hidden aspect-[2.71/1]"
+      width="100%"
+      height="100%"
       :list="swiperList"
       autoplay
       v-model:current="current"
+      :indicator="{ type: 'dots-bar' } as any"
       @click="handleClick"
       @change="onChange"
     ></wd-swiper>

packages/app/src/pages/home/study-tour/index.vue

@@ -15,7 +15,9 @@ import TimeLine from './components/time-line.vue'
 import { getBanners, getCircles, getContents } from '../../../core/libs/requests'
 import { NetImages } from '../../../core/libs/net-images'
 import { BannerMode } from '../../../core/models/moment'
+import { useRouter } from '../../../core/utils/router'
 
+const router = useRouter()
 const { data: studyTours, run: setStudyTours } = useRequest(() => getContents({ contentType: '1' }))
 const { data: classmates, run: setClassmates } = useRequest(
   () => getContents({ contentType: '1', contentCategory: '101', pageSize: '2' }),
@@ -24,8 +26,9 @@ const { data: classmates, run: setClassmates } = useRequest(
 const { data: circles, run: setCircles } = useRequest(() => getCircles({ tagName: '' }), {
   initialData: { list: [] },
 })
-const { data: banners, run: setBanners } = useRequest(() =>
-  getBanners({ mode: BannerMode.StudyTour }),
+const { data: banners, run: setBanners } = useRequest(
+  () => getBanners({ mode: BannerMode.StudyTour }),
+  { initialData: [] },
 )
 onMounted(async () => {
   await setStudyTours()
@@ -36,8 +39,17 @@ onMounted(async () => {
 </script>
 <template>
   <view class="flex-grow flex flex-col gap-6 p-3.5">
-    <div class="mx--2.5 mb--2.5">
-      <TimeLine></TimeLine>
+    <div class="">
+      <!-- <TimeLine></TimeLine> -->
+      <template v-if="banners.length">
+        <wd-img
+          width="100%"
+          height="100%"
+          custom-class="aspect-[1.73/1]"
+          :src="banners[0].bannerImgUrl"
+          @click="router.push(`/pages/home/study-tour/list`)"
+        ></wd-img>
+      </template>
     </div>
     <!-- <card custom-class="p-0!">
       <view class="relative">

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

@@ -6,9 +6,9 @@
 import Card from '@/components/card.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import { abc, calculator } from '../../core/libs/pngs'
-import { getAppMaterials, getByDictType } from '../../core/libs/requests'
+import { getAppMaterials, getBanners, getByDictType } from '../../core/libs/requests'
 import { materialDealers, close, phone } from '../../core/libs/svgs'
-import { DictType, MaterialDealer, MaterialsList } from '../../core/models/moment'
+import { BannerMode, DictType, MaterialDealer, MaterialsList } from '../../core/models/moment'
 import router from '@designer-hub/assets/src/assets/svgs/router'
 
 const { data: materialDealerData, run: setMaterialDealerData } = useRequest(
@@ -24,6 +24,10 @@ const { data: materialBrandTypes, run: setMaterialBrandTypes } = useRequest(
   () => getByDictType(DictType.memberMaterialsBrandType),
   { initialData: [] },
 )
+const { data: banners, run: setBanners } = useRequest(
+  () => getBanners({ mode: BannerMode.Material }),
+  { initialData: [] },
+)
 const dealerPanelState = ref(false)
 const currentDeraler = ref<MaterialsList>()
 const pieces = ref([
@@ -50,6 +54,8 @@ const pieces = ref([
     path: '/pages/material/recommend/index',
   },
 ])
+const current = ref<number>(0)
+const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
 const materialsByBrandLevel = ref<{ list: MaterialDealer[] }[]>([])
 const handleMenuItemClick = ({ path }: any) => {
   uni.navigateTo({ url: path })
@@ -62,10 +68,16 @@ const toDetail = (id: number) => {
 const handleCall = (phone: string) => {
   uni.makePhoneCall({ phoneNumber: phone })
 }
+function handleClick(e) {
+  console.log(e)
+}
+function onChange(e) {
+  console.log(e)
+}
 onMounted(async () => {
   await run()
   await setMaterialDealerData()
-  await Promise.all([setMaterialBrandTypes(), setMaterialOperationTypes()])
+  await Promise.all([setMaterialBrandTypes(), setMaterialOperationTypes(), setBanners()])
   // const reqs = data.value.map((it) =>
   //   getMaterials({ brandLevel: it.value }).then(({ data }) => data),
   // )
@@ -78,11 +90,22 @@ onMounted(async () => {
 <template>
   <view class="">
     <view class="bg-black w-full pos-relative aspect-[1.26/1]">
-      <wd-img
+      <!-- <wd-img
         width="100%"
         height="100%"
         src="https://image.zhuchaohui.com/zhucaohui/f866f4f72392e8f4627d8f5d6628739ad7f0907d3703139e7cdbcb999b803dfe.jpg"
-      />
+      /> -->
+      <wd-swiper
+        custom-class="rounded-2xl overflow-hidden aspect-[1.26/1]"
+        width="100%"
+        height="100%"
+        :list="swiperList"
+        autoplay
+        v-model:current="current"
+        :indicator="{ type: 'dots-bar' } as any"
+        @click="handleClick"
+        @change="onChange"
+      ></wd-swiper>
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
       <div class="my-6 grid grid-cols-2 grid-gap-3.5 mx-3.5">