tourist/pages/index/index.vue

<template>
	<view class="bg">
		<view class="search-box flex-between">
			<view class="search">
				<image src="https://static.ticket.sz-trip.com/tourist/index/search.png" class="search-img"></image>
				请输入导游姓名/产品名称
			</view>
			<view class="kefu">
				<image src="https://static.ticket.sz-trip.com/tourist/index/kefu.png" class="kefu-img"></image>
				客服
			</view>
		</view>
		
		<swiper class="top-banner" :circular="true" :interval="6000" :current="current" indicator-active-color="#fff"
			:duration="800" :indicator-dots="true" :autoplay="true" v-if="topBanner">
			<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="title-box flex-between">
			<image src="https://static.ticket.sz-trip.com/tourist/index/title1.png" class="title-img"></image>
			<view class="title-btn flex-around">
				探索更多
				<image src="https://static.ticket.sz-trip.com/tourist/index/rightIcon.png" class="rightIcon"></image>
			</view>
		</view>
		
		<view class="type-box">
			<view v-for="(item,index) in typeList" :key="index" :class="['type-item', {'type-active': index == typeIndex}]" @click="typeIndex = index">
				{{item.title}}
			</view>
		</view>
		
		<view class="tour-box">
			<view v-for="(item,index) in tourList" :key="index" class="tour-item">
				<image :src="showImg(item.img)" mode="aspectFill" class="tour-img"></image>
				<image src="https://static.ticket.sz-trip.com/tourist/index/play.png" class="playImg"></image>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
		
		<!-- 精选线路 -->
		<view class="title-box flex-between">
			<image src="https://static.ticket.sz-trip.com/tourist/index/title2.png" class="title-img"></image>
			<view class="title-btn flex-around">
				探索更多
				<image src="https://static.ticket.sz-trip.com/tourist/index/rightIcon.png" class="rightIcon"></image>
			</view>
		</view>
		
		<view class="line-box">
			<view v-for="(item,index) in lineList" :key="index" class="line-item">
				<image :src="showImg(item.img)" mode="aspectFill" class="line-img"></image>
				<view class="line-content">
					<view class="line-title text-overflowRows">{{item.title}}</view>
					<view class="line-price">{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBanner: [
					{
						head_img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png'
					},
					{
						head_img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png'
					}
				],
				typeList: [
					{
						title: '品牌导游',
						id: ''
					},
					{
						title: '选项2',
						id: ''
					}
				],
				typeIndex: 0,
				tourList: [
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						time: '0:30'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						time: '0:30'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						time: '0:30'
					}
				],
				lineList: [
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '1“水陆游太湖”',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '2“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '3“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '4“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '5“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '6“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					},
					{
						img: 'https://static.ticket.sz-trip.com/uploads/20241126/50d406ead15c861f76b8df7dab401802.png',
						title: '6“水陆游太湖”+导游讲解导游讲解 导游讲解导游讲解导游讲解',
						price: '210'
					}
				]
			}
		},
		onReady() {
			
		},
		methods: {
			// 2是各种详情页，3是列表专题页面，4是小程序
			gotoUrlNew(item) {
				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: url('https://static.ticket.sz-trip.com/tourist/index/topBg.png') no-repeat;
		background-size: 100% auto;
		background-color: #F9F5F0;
		padding-bottom: 150rpx;
	}
	
	.search-box {
		padding: 20rpx 26.67rpx;
		
		.search {
			width: 573rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, .7);
			border: 1px solid #96684F;
			padding: 0 29rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			display: flex;
			align-items: center;
			
			.search-img {
				width: 29.33rpx;
				height: 29.33rpx;
				margin-right: 20rpx;
			}
		}
		
		.kefu {
			font-weight: 500;
			font-size: 27rpx;
			color: #96684F;
			display: flex;
			align-items: center;
			
			.kefu-img {
				width: 33.33rpx;
				height: 33.33rpx;
				margin-right: 7rpx;
			}
		}
	}
	
	.top-banner {
		width: 697rpx;
		height: 341rpx;
		margin: auto;
	}
	
	.title-box {
		margin: 47rpx 26.67rpx 0;
		
		.title-img {
			width: 248rpx;
			height: 77.33rpx;
		}
		
		.title-btn {
			width: 140rpx;
			height: 47rpx;
			border-radius: 7rpx;
			border: 1px solid #BFBFBF;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			
			.rightIcon {
				width: 11.33rpx;
				height: 20rpx;
			}
		}
	}
	
	.type-box {
		display: flex;
		padding: 34rpx 26.67rpx 29rpx;
		overflow-x: auto;
		
		.type-item {
			width: 166.67rpx;
			line-height: 53.33rpx;
			text-align: center;
			background-image: url('https://static.ticket.sz-trip.com/tourist/index/typeBg.png');
			background-size: 100% 100%;
			font-weight: 500;
			font-size: 29rpx;
			color: #96684F;
			margin-right: 10rpx;
		}
		.type-active {
			background-image: url('https://static.ticket.sz-trip.com/tourist/index/typeBgs.png');
			background-size: 100% 100%;
			color: #F9F5F0;
		}
	}
	.type-box::-webkit-scrollbar {
		display: none;
	}
	
	.tour-box {
		overflow-x: auto;
		padding-left: 26.67rpx;
		display: flex;
		
		.tour-item {
			background-image: url('https://static.ticket.sz-trip.com/tourist/index/tourBg.png');
			background-size: 100% 100%;
			margin-right: 20rpx;
			position: relative;
			width: 266.73rpx;
			height: 333.4rpx;
			padding: 6rpx;
			
			.tour-img {
				width: 253rpx;
				height: 320rpx;
			}
			
			.playImg {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			
			.time {
				position: absolute;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				right: 19rpx;
				bottom: 30rpx;
			}
		}
	}
	.tour-box::-webkit-scrollbar {
		display: none;
	}
	
	.line-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow-x: auto;
		height: 820rpx;
		margin: 26rpx 0 0 26.67rpx;
		
		.line-item {
			width: 467rpx;
			height: 400rpx;
			border: 1rpx solid #96684F;
			margin-right: 13rpx;
			padding: 22rpx;
			
			.line-img {
				width: 423rpx;
				height: 233rpx;
			}
			
			.line-content {
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.line-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 36rpx;
				}
				
				.line-price {
					font-weight: bold;
					font-size: 29rpx;
					color: #DC2525;
				}
				.line-price::before {
					font-size: 23rpx;
					content: '￥';
				}
				.line-price::after {
					font-size: 23rpx;
					content: '起';
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
	.line-box::-webkit-scrollbar {
		display: none;
	}
</style>