tourist/pages/daoyou/index.vue

<template>
	<view class="bg">
		<view class="top-box">
			<view class="search">
				<image src="https://static.ticket.sz-trip.com/tourist/index/search.png" class="search-img"></image>
				<input type="text" v-model="keywords" placeholder="请输入导游姓名/产品名称" @confirm="onReload"/>
			</view>
			
			<view class="type-box flex-between">
				<view :class="['type-item', {'type-active': item.isSelect}]" v-for="(item,index) in typeList" :key="index" @click="selectConditions(item,index)" v-if="index != 2 && index != 3">
					{{item.title}}
					<view class="type-num flex-center" v-if="item.num > 0">{{item.num}}</view>
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/bottomIcon.png" class="type-icon" v-if="index > 1"></image>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view v-for="(item,index) in list" :key="index" class="item" @click="goDetail(item)">
			<view class="item-img">
				<image :src="showImg(item.image)" mode="aspectFill"></image>
			</view>
			
			<view class="item-content flex-column" v-if="item.guide_data">
				<view class="item-title text-overflow">
					{{item.guide_data.nickname}}
					<view>{{item.guide_data.group_data.name}}</view>
				</view>
				<view class="item-tags text-overflowRows">
					从业{{item.guide_data.duration}}年 丨
					{{item.guide_data.lingo_data.name}}
				</view>
				<view class="item-subtitle text-overflow">擅长{{item.guide_data.scenic_data.name}}等景区</view>
				<view class="item-subtitle text-overflow" v-if="item.guide_data.sparkle_text">
					<span v-for="(text,taxtIndex) in item.guide_data.sparkle_text" :key="taxtIndex">{{text.text}}&nbsp;</span>
				</view>
				<view class="item-subtitle text-overflow">{{item.guide_data.bio}}</view>
			</view>
			
			<view class="item-content" v-else>
				<view class="item-title text-overflow">
					{{item.title}}
				</view>
				<view class="item-tags text-overflow" style="margin: 10rpx 0 0;">
					{{item.goods_new_tag}}
				</view>
				<view class="item-subtitle text-overflowRows">{{item.subtitle}}</view>
			</view>
		</view>
		
		<!-- 性别弹框 -->
		<!-- <uni-popup type="bottom" ref="sexPopup" @change="changeTabBar">
			<view class="sex-box">
				<view v-for="(item,index) in typeList[2].list" :key="index" class="flex-center" @click="changeSex(item)">{{item.title}}</view>
			</view>
		</uni-popup> -->
		
		<!-- 擅长景区弹框 -->
		<!-- <uni-popup type="bottom" ref="scenicPopup" @change="changeTabBar" @maskClick="scenicConfirm(0)">
			<view class="scenic-box">
				<view class="scenic-top">
					<image src="https://static.ticket.sz-trip.com/tourist/daoyou/cha.png" class="cha-img" @click="scenicConfirm(0)"></image>
				</view>
				
				<view class="scenic-center">
					<view class="scenic-types">
						<view v-for="(item,index) in typeList[3].list" :key="index" @click="typeList[3].typeIndex = index"
						 :class="['scenic-type', {'scenic-typeActive': index == typeList[3].typeIndex}]">
							{{item.name}}
						</view>
					</view>
					
					<view class="scenic-items">
						<view v-for="(item,index) in typeList[3].list[typeList[3].typeIndex].arr" :key="index"
						 :class="['scenic-item', {'scenic-active': item.isSelect}]" @click="item.isSelect = !item.isSelect">
							{{item.name}}
							<image src="https://static.ticket.sz-trip.com/tourist/daoyou/selectImg.png" mode="" class="scenic-selectImg" v-if="item.isSelect"></image>
						</view>
					</view>
				</view>
				
				<view class="scenic-btn flex-center">
					<view class="flex-center" @click="scenicConfirm(1)">确定</view>
				</view>
			</view>
		</uni-popup> -->
		
		<!-- 时间段弹框 -->
		<uni-popup ref="calendarPopup" type="bottom" @change="changeTabBar">
			<view style="width: 100vw;height: 60vh;">
				<SelectCalendar :startDate="new Date(selectDate.startDay).Format('yyyy-MM-dd')" :endDate="new Date(selectDate.endDay).Format('yyyy-MM-dd')"></SelectCalendar>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SelectCalendar from '../../components/selectCalendar.vue';
	export default {
		components: {SelectCalendar},
		data() {
			return {
				keywords: '',
				typeList: [
					{
						title: '推荐',
						isSelect: false
					},
					{
						title: '只看有时间',
						isSelect: false
					},
					{
						title: '性别',
						isSelect: false,
						list: [
							// {
							// 	title: '全部',
							// 	id: ''
							// },
							// {
							// 	title: '男',
							// 	id: '1'
							// },
							// {
							// 	title: '女',
							// 	id: '2'
							// }
						]
					},
					{
						title: '擅长景区',
						isSelect: false,
						num: 0,
						list: [],
						typeIndex: 0
					},
					{
						title: '时间段',
						isSelect: false,
						num: 0
					}
				],
				list: [],
				selectDate: {
					startDay:new Date().Format('yyyy-MM-dd'),
					endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'),
					differDays: 1
				},
				finished: false,
			}
		},
		onLoad() {
			uni.$on('changeScenicDate', data => {
				if(data) {
					this.selectDate = data
					this.typeList[4].num = this.selectDate.differDays
					this.typeList[1].isSelect = false
					this.onReload()
				}
				this.$refs.calendarPopup.close();
			})
		},
		onUnload() {
			uni.$off('changeScenicDate')
		},
		onShow() {
			this.getList()
			// 获取导游景区列表
			// this.getScenicList()
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList();
			}, 1000);
		},
		methods: {
			onReload() {
				this.list = [];
				this.finished = false;
				this.getList();
			},
			// 获取列表
			getList() {
				this.Post({
					type_id: 2,
					offset: this.list.length,
					limit: 10,
					start_date: this.typeList[4].num > 0 ? this.selectDate.startDay : (this.typeList[1].isSelect ? new Date().Format('yyyy-MM-dd') : ''),
					end_date: this.typeList[4].num > 0 ? this.selectDate.endDay : (this.typeList[1].isSelect ? new Date().Format('yyyy-MM-dd') : ''),
					sort: this.typeList[0].isSelect ? 'sort' : '',
					order: this.typeList[0].isSelect ? 'desc' : '',
					title: this.keywords
				},'/api/goods/getGoodsByDateType').then(res => {
					this.list = [...this.list, ...res.data]
					if (res.data.length < 10) {
						this.finished = true;
					}
				})
			},
			// 去详情
			goDetail(item) {
				uni.navigateTo({
					url: '/subPackages/daoyou/detail?id=' + item.id
				})
			},
			// 获取导游景区列表
			getScenicList() {
				this.Post({
					
				},'/api/guide/getGuideScenicList').then(res => {
					res.data.forEach(item => {
						item.arr.forEach(items => {
							items.isSelect = false
						})
					})
					this.typeList[3].list = res.data
				})
			},
			// 选择条件
			selectConditions(item, index) {
				// 时间弹框开启时,上方不能点击
				if(this.isCanClick) return;
				// 0推荐 1是否有时间 2性别 3擅长景区 4时间段
				if(index != 4) {
					this.typeList[4].isSelect = false
					this.typeList[4].num = 0
					this.selectDate = {
						startDay:new Date().Format('yyyy-MM-dd'),
						endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'),
						differDays: 1
					}
				}
				
				if(index == 0 || index == 1) {
					item.isSelect = !item.isSelect
					this.onReload()
				}
				
				if(index == 2) {
					this.$refs.sexPopup.open()
				}
				
				if(index == 3) {
					this.$refs.scenicPopup.open()
				}
				
				if(index == 4) {
					this.$refs.calendarPopup.open()
				}
			},
			// 弹出层被底部栏挡到
			changeTabBar(e) {
				if(e.show) {
					uni.hideTabBar()
					this.isCanClick = true
				}else {
					uni.showTabBar()
					this.isCanClick = false
				}
			},
			// 性别选择
			changeSex(item) {
				if(!item.id) {
					this.typeList[2].title = '性别'
					this.typeList[2].isSelect = false
				}else {
					this.typeList[2].title = item.title
					this.typeList[2].isSelect = true
				}
				this.$refs.sexPopup.close()
			},
			// 擅长景区选择
			scenicConfirm(type) {
				if(type) {
					let num = 0
					this.typeList[3].list.forEach(item => {
						item.arr.forEach(items => {
							if(items.isSelect) num += 1
						})
					})
					this.typeList[3].num = num
				}else {
					this.typeList[3].list.forEach(item => {
						item.arr.forEach(items => {
							items.isSelect = false
						})
					})
				}
				this.$refs.scenicPopup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F9F5F0;
		padding: 200rpx 0;
	}
	
	.top-box {
		position: fixed;
		top: calc(44px + env(safe-area-inset-top));
		width: 750rpx;
		height: 180rpx;
		background: #FFFFFF;
		padding: 20rpx 26.67rpx 0;
		z-index: 999;
		
		.search {
			width: 697rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, .7);
			border: 1rpx solid #96684F;
			padding: 0 29rpx;
			display: flex;
			align-items: center;
			
			.search-img {
				width: 29rpx;
				height: 29rpx;
				margin-right: 21rpx;
			}
			
			input {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
		}
		
		.type-box {
			height: 40rpx;
			margin-top: 35rpx;
			
			.type-item {
				font-weight: 500;
				font-size: 27rpx;
				color: #333333;
				display: flex;
				align-items: center;
				
				.type-num {
					width: 27rpx;
					height: 27rpx;
					background: #DC2525;
					border-radius: 50%;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-left: 3rpx;
				}
				
				.type-icon {
					width: 15.33rpx;
					height: 8.67rpx;
					margin-left: 8rpx;
				}
			}
			// .type-item:nth-child(2) {
			// 	padding-right: 15rpx;
			// 	border-right: 1rpx solid #D8D8D8;
			// }
			
			.type-active {
				font-weight: bold;
				color: #96684F;
			}
		}
	}
	
	.item {
		margin: 26rpx auto;
		width: 697rpx;
		height: 273rpx;
		background: #FFFFFF;
		border-radius: 7rpx;
		background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/itemBg.png');
		background-size: 100% 100%;
		padding: 14rpx;
		display: flex;
		
		.item-img {
			width: 204rpx;
			height: 244rpx;
			border: 1rpx solid #96684F;
			background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/imgBg.png');
			background-size: 100% 100%;
			flex-shrink: 0;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.item-content {
			margin-left: 20rpx;
			padding: 5rpx 0 15rpx;
			justify-content: space-between;
			width: 420rpx;
			
			.item-title {
				font-weight: bold;
				font-size: 31rpx;
				color: #010101;
				display: flex;
				align-items: center;
				
				view {
					line-height: 30.67rpx;
					margin-left: 5rpx;
					background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/rankBg.png');
					background-size: 100% 100%;
					padding: 0 8rpx;
					font-weight: 500;
					font-size: 23rpx;
					color: #FFFFFF;
				}
			}
			
			.item-tags {
				font-weight: 500;
				font-size: 24rpx;
				color: #96684F;
				
				&>view:first-child::after {
					content: '丨';
					display: inline-block;
					margin: 0 5rpx;
				}
			}
			
			.item-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #888888;
			}
		}
	}
	
	// 性别弹框
	.sex-box {
		width: 750rpx;
		height: 333rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		
		view {
			height: 33.3%;
		}
		view:nth-child(2) {
			border-top: 1rpx solid #D8D8D8;
			border-bottom: 1rpx solid #D8D8D8;
		}
	}
	
	// 擅长景区弹框
	.scenic-box {
		width: 750rpx;
		height: 937rpx;
		background: #FFFFFF;
		padding-bottom: 155rpx;
		position: relative;
		
		.scenic-top {
			height: 100rpx;
			border-bottom: 1rpx solid #D8D8D8;
			padding: 26rpx 26rpx 0 0;
			
			.cha-img {
				display: block;
				width: 31.33rpx;
				height: 31.33rpx;
				margin-left: auto;
			}
		}
		
		.scenic-center {
			display: flex;
			
			.scenic-types {
				width: 147rpx;
				height: 680rpx;
				background: #F7F7F7;
				overflow-y: auto;
				
				.scenic-type {
					line-height: 107rpx;
					font-weight: 500;
					font-size: 25rpx;
					color: #111111;
					text-align: center;
				}
				.scenic-typeActive {
					background: #FFFFFF;
					color: #96684F;
				}
			}
			.scenic-type::-webkit-scrollbar {
				display: none;
			}
			
			.scenic-items {
				width: 603rpx;
				height: 680rpx;
				padding: 26rpx 0 0 20rpx;
				background: #FFFFFF;
				overflow-y: auto;
				
				.scenic-item {
					display: inline-block;
					// width: 173rpx;
					padding: 0 30rpx;
					line-height: 67rpx;
					text-align: center;
					border-radius: 7rpx;
					border: 1rpx solid #111111;
					margin-bottom: 26rpx;
					font-weight: 500;
					font-size: 25rpx;
					color: #111111;
					margin-right: 20rpx;
				}
				.scenic-active {
					position: relative;
					background: #F9F5F0;
					border: 1rpx solid #96684F;
					color: #96684F;
					
					.scenic-selectImg {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
			.scenic-items::-webkit-scrollbar {
				display: none;
			}
		}
		
		.scenic-btn {
			width: 750rpx;
			height: 153rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
			position: absolute;
			bottom: 0;
			
			view {
				width: 697rpx;
				height: 73rpx;
				background: #DC2525;
				border-radius: 11rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>