EpicSoul/subPackages/haveFeeling/shopDetail.vue

<template>
	<view class="bg">
		<headerVue></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>
			
			<view class="product">
				<view class="item" v-for="(item,i) in list" :key="item.goods.id">
					<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://des.dayunyuanjian.cn/epicSoul/readingBody/gwc.png" class="buy-cart"></image>
						</view>
					</view>
				</view>
			</view>
			
			<image style="margin: 53rpx 0 35rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image>
		
			<view class="img-container">
				<image v-for="i in 3" :key="i" src="https://cgc.js-dyyj.com/uploads/20250619/839df8a6ffaa539b213551577b6fc388.png?timestamp=1750841365993"></image>
			</view>
		</view>
		<CustomTabBar :currentTab="2" />
	</view>
</template>

<script>
	import headerVue from "@/components/header.vue"
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {CustomTabBar,headerVue},
		data() {
			return {
				topBanner: [],
				list: [],
				swiperIndex: 0,
			}
		},
		onLoad() {
			
		},
		onReady() {
			this.getProduct()
			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: 45,
					offset: 0,
					limit: 3,
				},'/api/tag/getGoodsByTagId').then(res => {
					this.list = res.data;
				})
			},
			
			getList() {
				// 大轮播
				this.Post({
					type_id: 3,
					position: 1,
				}, '/api/adv/getAdv').then(res => {
					if(res.data) {
						this.topBanner = res.data;
					}
				});
			},
			// 2是各种详情页，3是列表专题页面，4是小程序
			gotoUrlNew(item) {
				console.log(item);
				let that = this;
				let url = '';
				switch (item.jump_type) {
					case 0:
						break;
					case 2:
						uni.navigateTo({
							url: item.tdata
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/subPackages/webPage/webPage?url=' + item.tdata
						});
						break;
					case 4:
						uni.navigateToMiniProgram({
							appId: item.tdata.appid, // 此为appid
							path: item.tdata.page, // 此为首页路径
							envVersion: 'release',
							success: res => {
								// 打开成功
								console.log('打开成功', res);
							},
							fail: err => {
								console.log(err);
							}
						});
						break;
					default:
						break;
				}
			},
			
			
			
		}
	}
</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;
			}
			.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;
		}
	}
	
</style>