feat: 初始化

components/HomeSwiper/HomeSwiper.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="swipperWrapper" v-show="showSwiper && swiperItems.length">
+		<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="interval" :duration="duration">
+			<swiper-item v-for="item in swiperItems" :key="item.img_url">
+				<view class="swiperItem">
+					<image :src="item.img_url" mode="aspectFill" class="swiperItemImage" @click="toTarget(item)"></image>
+				</view>
+			</swiper-item>
+		</swiper>
+		<image src="/static/close.png" mode="aspectFit" class="closeIcon" @click="closeSwiper"></image>
+	</view>
+</template>
+
+<script>
+import { getSwiperList } from '@/services/home/home';
+export default {
+	name: 'HomeSwiper',
+	props: {
+		position: {
+			type: Number,
+			required: false,
+			default: 1 // 1 首页
+		}
+	},
+	data() {
+		return {
+			showSwiper: true,
+			autoplay: true,
+			interval: 2000,
+			duration: 500,
+			swiperItems: []
+		};
+	},
+	methods: {
+		async getSwiperData() {
+			const res = await getSwiperList(this.position);
+			if (res && res.code === 0) {
+				this.swiperItems = res.data;
+			}
+		},
+		toTarget(item) {
+			if (item.act_type == 1 || item.act_type == 2) {	
+				if (item.contentId) {
+					uni.navigateTo({ url: `/pages/activity/detail?contentId=${item.contentId}&contentType=${item.act_type}` });
+				}
+			} else if (item.act_type == 3) {
+				uni.navigateTo({ url: '/pages/activity/shop/index' });
+			}
+		},
+		closeSwiper() {
+			this.showSwiper = false;
+			uni.removeStorageSync('swiper');
+		}
+	},
+	created() {
+		this.getSwiperData();
+		this.showSwiper = uni.getStorageSync('swiper');
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

components/HomeSwiper/index.scss

@@ -0,0 +1,38 @@
+.swipperWrapper {
+	position: relative;
+	padding-bottom: 16px;
+	.closeIcon {
+		position: absolute;
+		top: 13px;
+		right: 9px;
+		width: 16px;
+		height: 16px;
+		cursor: pointer;
+	}
+	.swiper {
+		height: 120px;
+	}
+	::v-deep .uni-swiper-wrapper {
+		padding-bottom: 16px;
+	}
+	::v-deep .swiperItem {
+		display: flex;
+		justify-content: center;
+	}
+	::v-deep .uni-swiper-dots-horizontal {
+		bottom: 0px;
+	}
+	::v-deep .uni-swiper-dot {
+		width: 4px;
+		height: 4px;
+		background-color: transparent;
+		border: 1px solid rgba(229, 229, 229, 1);
+	}
+	::v-deep .uni-swiper-dot-active {
+		background-color: rgba(229, 229, 229, 1);
+	}
+	.swiperItemImage {
+		width: 100%;
+		height: 120px;
+	}
+}