轮播图

pages/index/home.vue

@@ -1,16 +1,6 @@
 <template>
-	<swiper class="swiper" indicator-dots circular>
-		<swiper-item class="swiper-item" item-id="1">
-
-		</swiper-item>
-		<swiper-item class="swiper-item" item-id="2">
-
-		</swiper-item>
-		<swiper-item class="swiper-item" item-id="3">
-
-		</swiper-item>
-	</swiper>
-
+	<up-swiper height='115' :list="banner" indicator keyName="imageUrl" :autoplay="false" circular radius="0"
+		@click="onClickSwiper" />
 	<view class="main">
 		<view class="serve">
 			服务
@@ -36,8 +26,55 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
+import { ref, getCurrentInstance } from 'vue'
+import { onLoad } from '@dcloudio/uni-app';
+const { $Http } = getCurrentInstance().proxy;
+const banner = ref([])
+onLoad(() => {
+	$Http.basic({
+		"classname": "common.adspace.adspace",
+		"method": "query_adspacelist", //查询轮播图
+		content: {
+			nocache: true
+		}
+	}).then(res => {
+		if (res.code !== 0 && res.data.length) {
+			uni.removeStorageSync('banner')
+			uni.setStorageSync('banner', res.data);
+			banner.value = res.data.find(v => v.location == "index_top").ads.map(v => {
+				v.imageUrl = v.attinfos[0].url;
+				return v
+			}) || [];
+		} else {
+			const list = uni.getStorageSync('banner') || [];
+			if (list.length) banner.value = list.find(v => v.location == "index_top").ads.map(v => {
+				v.imageUrl = v.attinfos[0].url;
+				return v
+			}) || [];
+		}
+	})
+});
+
+function onClickSwiper(e) {
+	let item = banner.value[e]
+	if (item.hyperlink) {
+		uni.navigateTo({
+			url: item.hyperlink,
+			success: (result) => { },
+			fail: () => {
+				uni.previewImage({
+					current: 0, // 当前显示图片的http链接
+					urls: [item.imageUrl] // 需要预览的图片http链接列表
+				})
+			},
+		})
+	} else {
+		uni.previewImage({
+			current: 0, // 当前显示图片的http链接
+			urls: [item.imageUrl] // 需要预览的图片http链接列表
+		})
+	}
+}
 const showPage = ref('home');
 const itemList = ref([{
 	label: '待接单',
@@ -59,18 +96,6 @@ function change1(value) {
 </script>
 
 <style lang="scss" scoped>
-.swiper {
-	width: 750rpx;
-	height: 230rpx;
-	background: #FFFFFF;
-
-	.swiper-item {
-		width: 100%;
-		height: 100%;
-		background: red;
-	}
-}
-
 .main {
 	padding: 40rpx 30rpx;
 	box-sizing: border-box;