add:新增轮播图展示

src/model/carousals.ts

@@ -0,0 +1,6 @@
+export interface CreateCarousalsRequest {
+  imageUrl: string
+  targetType: string
+  targetUrl?: string
+  targetId?: string
+}

src/pages.json

@@ -37,6 +37,5 @@
     "navigationBarTitleText": "Vitesse-Uni",
     "navigationStyle": "custom"
   },
-  "__esModule": true,
   "subPackages": []
 }

src/pages/pet-manual/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { CreateCarousalsRequest } from '@/model/carousals'
 import carousalApi from '@/api/carousal'
 import CardList from '@/pages/pet-manual/components/CardList.vue'
 // const searchValue = ref('')
@@ -13,9 +14,9 @@ interface ListItem {
   desc: string
   time: string
 }
-interface Item {
-  content: string
-}
+// interface Item {
+//   content: string
+// }
 interface DotStyle {
   backgroundColor: string
   selectedBackgroundColor: string
@@ -74,10 +75,13 @@ const listModel = ref<ListItem[]>([
 const safeHeight = ToolApi.getSafeHeight()
 const searchValue = ref<string>('')
 
-const info = ref<Item[]>([
-  { content: '内容 A' },
-  { content: '内容 B' },
-  { content: '内容 C' },
+const info = ref<CreateCarousalsRequest[] | null>([
+  {
+    imageUrl: '',
+    targetId: '',
+    targetType: '',
+    targetUrl: '',
+  },
 ])
 
 const current = ref<number>(0)
@@ -121,8 +125,16 @@ const findList = ref<{ name: string }[]>([
   { name: '宠物吃饭慢' },
   { name: '猫咪尿闭怎么办' },
 ])
-function onLoad() {
-  carousalApi.getCarousalList()
+async function onLoad() {
+  const getCarousalListApi = await carousalApi.getCarousalList()
+  info.value = getCarousalListApi
+}
+function handleJumpUrl(item: CreateCarousalsRequest) {
+  if (item.targetType === 'url') {
+    uni.navigateTo({
+      url: item.targetUrl,
+    })
+  }
 }
 onLoad()
 </script>
@@ -176,9 +188,9 @@ onLoad()
       <view class="mx-4 mt-4">
         <uni-swiper-dot :info="info" :current="current" field="content" mode="dot" :dots-styles="dotStyle">
           <swiper class="swiper-box" @change="change">
-            <swiper-item v-for="(item, index) in info" :key="index" style="background: rgba(0, 0, 0, 0.20)">
-              <view class="swiper-item">
-                {{ item.content }}
+            <swiper-item v-for="(item, index) in info" :key="index">
+              <view class="swiper-item w-full h-full flex items-center justify-center">
+                <image :src="item.imageUrl" mode="heightFix" class="w-full h-full" @tap="handleJumpUrl(item)" />
               </view>
             </swiper-item>
           </swiper>