EpicSoul/pages/index/sensoryStore.vue

<template>
	<view class="bg">
		<BackButton />
		<!-- <headerVue :type="'goods'"></headerVue> -->
		<view class="banner-content">
			
			<swiper class="top-banner" :circular="true" :interval="6000" :duration="800"
				:indicator-dots="false" :autoplay="true" @change="swiperChange" >
				<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
					<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			
			<view class="dot-container">
				<view :class="['dot-line',index==swiperIndex?'active':'']" v-for="(item, index) in topBanner" :key="index"></view>
			</view>
			
		</view>
		
		<view class="product-content">
			<image  class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image>
			
			<scroll-view style="width: 100%;" scroll-x>
				<view class="product">
					<view class="item" v-for="(item,i) in list" :key="item.goods.id" @click="goDetailByType(item)">
						<image class="item-img" :src="showImg(item.goods.image)"></image>
						<view class="content">
							<view class="title text-overflow">{{item.goods.title}}</view>
							<view class="bottom">
								<view class="price">￥{{item.goods.money/100}}</view>
								<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/gwc.png" class="buy-cart"></image>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
			
			<image style="margin: 53rpx 0 35rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250627/73153098ff5c115e02afb0328ade1e29.png"></image>
		
			<view class="img-container">
				<image v-for="(type,i) in typeList" :key="i" :src="showImg(type.img)"
				@click="gotoPath(`/subPackages/haveFeeling/detailXiang?id=${type.id}`)"></image>
			</view>
		</view>
		<!-- <CustomTabBar :currentTab="2" /> -->
		<MusicControl />
	</view>
</template>

<script>
	import headerVue from "@/components/header.vue"
	import CustomTabBar from '@/components/CustomTabBar.vue';
	import MusicControl from '@/components/MusicControl.vue';
	import BackButton from "@/components/BackButton.vue";
	export default {
		components: {CustomTabBar,headerVue,MusicControl,BackButton},
		data() {
			return {
				topBanner: [],
				list: [],
				swiperIndex: 0,
				typeList: [],
			}
		},
		onLoad() {
			
		},
		onReady() {
			this.getProduct()
			this.getTypes()
			this.getList()
		},
		onReachBottom() {
			
		},
		methods: {
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			
			viewDetail(item) {
				if (item.url) {
					uni.navigateTo({
						url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url)
					})
					return
				}
				uni.navigateTo({
					url:'/subPackages/letter/detail?id='+item.id
				})
			},
			
			getProduct () {
				this.Post({
					tag_id: 40,
					offset: 0,
				},'/api/tag/getGoodsByTagId').then(res => {
					this.list = res.data;
				})
			},
			
			
			getList() {
				// 大轮播
				this.Post({
					type_id: 3,
					position: 18,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.topBanner = res.data;
					}
				});
			},
			
			// 获取分类图片
			getTypes () {
				this.Post({
					parent_id: 0,
				}, '/api/goods/type').then(res => {
					if(res.data) {
						this.typeList = res.data;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>

	.bg {
		min-height: 100vh;
		background: #FFFFFF;
		padding-bottom: 200rpx;
	}
	.banner-content{
		width: 100%;
		height: 496.4rpx;
		position: relative;
		.top-banner {
			width: 100%;
			height: 100%;
		}
		.dot-container{
			position: absolute;
			bottom: 43rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			left: 0;
			.dot-line{
				width: 52rpx;
				height: 4rpx;
				margin: 0 8rpx;
				background: RGBA(189, 170, 173, 0.8);
				&.active{
					background: RGBA(255, 255, 255, 0.8);
				}
			}
		}
	}
	
	.head-img{
		width: 697.24rpx;
		height: 42.57rpx;
		margin: 0 auto;
		display: block;
	}
	.product-content{
		padding: 63rpx 26rpx 0;
		.product{
			padding: 36rpx 0 0;
			display: flex;
			flex-wrap: nowrap;
			// justify-content: space-between;
			.item{
				width: 214.69rpx;
				margin-right: 20rpx;
			}
			.item-img{
				width: 214.69rpx;
				height: 286.33rpx;
			}
			.content{
				height: 80rpx;
				padding: 0rpx 4rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			.bottom{
				display: flex;
				padding-top: 13rpx;
				justify-content: space-between;
				align-items: center;
			}
			.buy-cart{
				width: 28rpx;
				height: 24rpx;
			}
		}
	}
	
	.img-container{
		width: 100%;
		image{
			display: block;
			width: 100%;
			height: 314rpx;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
		}
	}
	.line{
		width: 220rpx;
		height: 1rpx;
		background: #E4E4E4;
		flex-shrink: 0;
	}
	.head-img-yougan{
		width: 183.45rpx;
		height: 42.57rpx;
	}
</style>