tourist/subPackages/daoyou/detail.vue

<template>
	<view class="bg">
		<view class="kefu-box">
			<image src="https://static.ticket.sz-trip.com/tourist/daoyou/kefu.png" class="kefu-img"></image>
			客服
		</view>
		
		<!-- 导游 -->
		<view class="top-box" v-if="detail.guide_data">
			<view class="daoyou-detail">
				<swiper class="daoyou-imgs" :circular="true" :interval="6000" :current="current"  @change="swiperChange"
					:duration="800" :indicator-dots="false" :autoplay="true" v-if="detail.guide_data">
					<swiper-item v-for="(item, index) in detail.guide_data.video_list" :key="index + 'T'">
						<video :src="item" class="daoyou-img" preload="metadata" :poster="showImg(detail.image)"
						:controls="false" :show-progress="false" :show-fullscreen-btn="false"
						:show-play-btn="false" :show-center-play-btn="false" :show-loading="false"></video>
						<view class="daoyou-img" style="position: absolute;z-index: 5;top: 0;left: 0;">
							
						</view>
						<image src="https://static.ticket.sz-trip.com/tourist/daoyou/play.png" class="daoyou-play" @click="playVideo(item)"></image>
					</swiper-item>
					<swiper-item v-for="(item, index) in detail.guide_data.lingo_image_list" :key="index">
						<image class="daoyou-img" :src="showImg(item)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
				<view class="swiper-nums">
					<view :class="['swiper-num', {'swiper-active': item == current + 1}]" v-for="item in imgLength" :key="item"></view>
				</view>
			</view>
			
			<view class="top-content flex-column">
				<view class="top-title text-overflow">
					{{detail.guide_data.nickname}}
					<view>{{detail.guide_data.group_data.name}}</view>
				</view>
				<view class="top-tags text-overflow">
					从业{{detail.guide_data.duration}}年 丨
					{{detail.guide_data.lingo_data.name}}
				</view>
				<view class="top-subtitle text-overflow">{{detail.scenic}}</view>
				<view class="top-subtitle text-overflow" v-if="detail.guide_data.sparkle_text">{{detail.guide_data.sparkle_text[0].text}}</view>
				<view class="top-subtitle text-overflow">{{detail.guide_data.bio}}</view>
			</view>
		</view>
		
		<!-- 产品 -->
		<view class="top-box" v-else>
			<view class="daoyou-detail">
				<swiper class="daoyou-imgs" :circular="true" :interval="6000" :current="current"  @change="swiperChange"
					:duration="800" :indicator-dots="false" :autoplay="true" v-if="detail.list_images">
					<swiper-item v-for="(item, index) in detail.list_images" :key="index">
						<image class="daoyou-img" :src="showImg(item)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				
				<view class="swiper-nums">
					<view :class="['swiper-num', {'swiper-active': item == current + 1}]" v-for="item in imgLength" :key="item"></view>
				</view>
			</view>
			
			<view class="top-content">
				<view class="top-title text-overflow">
					{{detail.title}}
				</view>
				<view class="top-tags text-overflow" style="margin: 10rpx 0 0;">
					{{detail.goods_new_tag}}
				</view>
				<view class="top-subtitle text-overflowRows">{{detail.subtitle}}</view>
			</view>
		</view>
		
		<!-- 日历 -->
		<view class="calendar">
			<view class="calendar-top">
				<view @click="preNextDate(0)">
					<img src="https://static.ticket.sz-trip.com/tourist/daoyou/left.png" class="iconfont"/>
				</view>
				<view>{{year}}年{{month}}月</view>
				<view @click="preNextDate(1)">
					<img src="https://static.ticket.sz-trip.com/tourist/daoyou/right.png" class="iconfont"/>
				</view>
			</view>
					
			<view class="calendar-bottom">
				<view class="week-item" v-for="(item,index) in weekList" :key="item + index">
					{{item}}
				</view>
					
				<view v-for="(item, index) in everyDay" :key="item.day + index" class="day-box flex-center"
					:class="(nowDay > item.date) ? 'grayDate' : ''">
					<view :class="['day-item', selectDay == item.date ? 'daySelect' : '']"
						@click="changeDate(item.date,item.day)">
						{{ nowDay == item.date ? '今日' : item.day }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 规格 -->
		<view class="sku-box" v-if="skus && skus.length > 0">
			<view v-for="(item,index) in skus[selectIndex].info" :key="index">
				<view class="sku-item flex-between" v-if="item.store > 0">
					<view class="text-overflow">
						<view class="sku-title">{{item.sku_info.title}}</view>
						<view class="sku-subtitle">提前沟通讲解内容</view>
					</view>
					<view class="sku-price">{{item.money / 100}}</view>
					<view class="sku-btn" @click="order(item)">预订</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				imgLength: 0,
				detail: {},
				
				// 日历
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				year: 0,
				month: 0,
				day: 0,
				week: '',
				nowDay: '',
				selectDay: '',
				selectIndex: 0,
				everyDay: [],
				
				skus: [],
				type: '',
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4));
			this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7));
			this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10));
			this.nowDay = this.getNowTime(new Date())
			this.selectDay = this.getNowTime(new Date())
			this.getEveryDay(this.year + '/' + this.month + '/' + 1)
			
			this.getDetail()
		},
		methods: {
			// 预订
			order(item) {
				this.Post({}, '/api/user/getUserDetails').then(res => {
					if(res.data) {
						if (!this.selectDay) {
						    uni.showToast({
						        title: '请先选择日期',
						        icon: 'none'
						    });
						    return;
						}
						
						let data = {
							sku: item,
							selectDay: this.selectDay,
							guide_id: this.type == 'tourist' ? this.detail.guide_data.id : ''
						}
						this.$store.commit('changeTouristInfo',data)
						
						uni.navigateTo({
							url: '/subPackages/daoyou/order'
						})
					}
				})
			},
			// 获取商品详情
			getDetail(id) {
				this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => {
					if (res.data.flag == 0) {
						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
						setTimeout(() => {this.goBack()}, 2000)
					}
					
					// res.data.goods_new_tag = (res.data.goods_new_tag ? res.data.goods_new_tag.split(',') : []).splice(0, 3);
					
					if(res.data.guide_data) {
						// 导游
						this.type = 'tourist'
						res.data.guide_data.goods_new_tag = (res.data.guide_data.goods_new_tag ? res.data.guide_data.goods_new_tag.split(',') : []).splice(0, 3);
						res.data.guide_data.video_list = (res.data.guide_data.video_list ? res.data.guide_data.video_list.split(',') : []);
						res.data.guide_data.lingo_image_list = (res.data.guide_data.lingo_image_list ? res.data.guide_data.lingo_image_list.split(',') : []);
						
						this.imgLength = res.data.guide_data.video_list.length + res.data.guide_data.lingo_image_list.length
					}else {
						// 线路
						this.type = 'line'
						res.data.list_images = (res.data.list_images ? res.data.list_images.split(',') : []);
						
						this.imgLength = res.data.list_images.length
					}
					this.detail = res.data;
				});
			},
			// 选择日期
			changeDate(item,index) {
				// 只选择今日和之后的日期
				if(item >= this.nowDay) {
					this.selectDay = item
					this.selectIndex = index - 1
				}
			},
			// 根据日期判断库存
			getStoreByDate() {
				this.Post({
					goods_id: this.id,
					start_date: this.everyDay[0].date,
					end_date: this.everyDay[this.everyDay.length - 1].date
				},'/api/goods/get_product_sku_price_by_date').then(res => {
					this.skus = res.data
				})
			},
			// 播放视频
			playVideo(item) {
				uni.navigateTo({
					url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//轮播图左右滑动
			swiperChange(e) {
				this.current = e.detail.current;
			},
			// 获取当前日期
			getNowTime(time, type) {
				var date = time,
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				if (type == 1) {
					if (uni.getSystemInfoSync().platform == 'ios') {
						var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
					} else {
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
					}
				} else {
					var timer = year + '-' + month + '-' + day;
				}
			
				return timer;
			},
			// 遍历月份日期
			getEveryDay(data) {
				let date = new Date(data);
				let month = date.getMonth();
				//设置月份
				date.setMonth(month + 1);
				//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
				date.setDate(0);
				let dayArry = [];
				let day = date.getDate(); //获取当前月最后一天是几号
				for (let i = 1; i <= day; i++) {
					date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
					dayArry.push({
						day: i,
						week: this.getWeekday(date.getDay()),
						date: this.getNowTime(date),
						flag: 0
					}); //选中月份的每一天和当天是星期几
				}
			
				this.everyDay = dayArry;
				this.selectDay = this.everyDay[0].date
				this.selectIndex = this.everyDay[0].day - 1
				// 如果月份日期包含今天的，默认选择今天
				for (let i = 0; i < this.everyDay.length; i++) {
					if(this.everyDay[i].date == this.getNowTime(new Date())) {
						this.selectIndex = this.everyDay[i].day - 1
						this.selectDay = this.everyDay[i].date
						break;
					}
				}
				this.getStoreByDate();
				this.resetDay();
			},
			getWeekday(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},
			//重置日期与顶部周期相对应
			resetDay() {
				let arr = this.weekList;
				let w = this.everyDay[0].week;
				arr.forEach((v, index) => {
					if (v == w) {
						let id = index;
						if (id != 0) {
							for (let i = 0; i < id; i++) {
								this.everyDay.unshift({
									day: '',
									week: ''
								});
							}
						}
					}
				});
			},
			// 切换上一月、下一月
			preNextDate(e) {
				if (e) {
					// 下一月
					this.month += 1;
					if (this.month > 12) {
						this.year += 1;
						this.month = 1;
					}
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.getEveryDay(this.year + '/' + this.month + '/' + 1);
					} else {
						this.getEveryDay(this.year + '-' + this.month);
					}
				} else {
					// 上一月
					this.month -= 1;
					if (this.month == 0) {
						this.year -= 1;
						this.month = 12;
					}
					if (uni.getSystemInfoSync().platform == 'ios') {
						this.getEveryDay(this.year + '/' + this.month + '/' + 1);
					} else {
						this.getEveryDay(this.year + '-' + this.month);
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		padding: 30rpx 26.67rpx 100rpx;
		min-height: 100vh;
		background: #F9F5F0;
	}
	
	.kefu-box {
		font-weight: 500;
		font-size: 27rpx;
		color: #96684F;
		display: flex;
		align-items: center;
		display: flex;
		justify-content: flex-end;
		
		.kefu-img {
			width: 33.33rpx;
			height: 33.33rpx;
			margin-right: 7rpx;
		}
	}
	
	.top-box {
		height: 313rpx;
		background: #FFFFFF;
		border-radius: 7rpx;
		position: relative;
		margin-top: 18rpx;
		padding-left: 300rpx;
		
		.daoyou-detail {
			width: 265rpx;
			position: absolute;
			top: -53rpx;
			left: 13rpx;
			
			.daoyou-imgs {
				width: 265rpx;
				height: 332rpx;
				background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/dyImgBg.png');
				background-size: 100% 100%;
				padding: 6rpx;
				box-sizing: border-box;
				position: relative;
				
				.daoyou-img {
					width: 253rpx;
					height: 320rpx;
				}
				
				.daoyou-play {
					width: 49.33rpx;
					height: 49.33rpx;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					z-index: 6;
				}
			}
			
			.swiper-nums {
				display: flex;
				justify-content: center;
				margin-top: 10rpx;
				
				.swiper-num {
					width: 9rpx;
					height: 9rpx;
					background: rgba(150, 104, 79, .3);
					border-radius: 50%;
					margin: 0 3rpx;
				}
				
				.swiper-active {
					background: #96684F;
				}
			}
		}
		
		.top-content {
			width: 380rpx;
			height: 313rpx;
			padding: 25rpx 0 60rpx;
			justify-content: space-between;
			
			&>view {
				width: 380rpx;
			}
			
			.top-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;
				}
			}
			
			.top-tags {
				width: 380rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #96684F;
			}
			
			.top-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #888888;
			}
		}
	}
	
	.calendar {
		height: 668rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin-top: 28rpx;
		
		.calendar-top {
			padding: 32rpx 0 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
	
			view:nth-child(2) {
				font-weight: bold;
				font-size: 36rpx;
				color: #010101;
				margin: 0 50rpx;
			}
	
			.iconfont {
				width: 24rpx;
				height: 24rpx;
				display: block;
				margin-top: 3rpx;
			}
		}
	
		.calendar-bottom {
			display: flex;
			flex-wrap: wrap;
			padding: 33rpx 0 40rpx;
			width: 697rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
	
			.week-item {
				width: 14%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
	
			.day-box {
				width: 14%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.day-item {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					text-align: center;
					
					.day-lunar {
						font-weight: 500;
						font-size: 17rpx;
						color: #999999;
						text-align: center;
					}
					
					.day-point{
						width: 5rpx;
						height: 5rpx;
						background: #FF3615;
						border-radius: 50%;
						margin: 5rpx auto 0;
					}
				}
	
				.daySelect {
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					background: #96684F;
					border-radius: 27rpx;
					color: #fff;
					
					.day-lunar {
						color: #fff;
					}
				}
			}
	
			.grayDate {
				.day-item {
					color: #999999;
					
					.day-point{
						background: #CCCCCC;
					}
				}
			}
	
			.iconfont {
				width: 20rpx;
				height: 20rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
	
	.sku-box {
		border-radius: 13rpx;
		background-color: #fff;
		margin-top: 100rpx;
		
		.sku-item {
			height: 132rpx;
			padding: 0 26rpx 0 28rpx;
			
			&>view:first-child {
				width: 375rpx;
			}
			
			.sku-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
			}
			
			.sku-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #888888;
				margin-top: 10rpx;
			}
			
			.sku-price {
				font-weight: bold;
				font-size: 34rpx;
				color: #DC2525;
			}
			.sku-price::before {
				font-size: 24rpx;
				content: '￥';
			}
			
			.sku-btn {
				width: 133.33rpx;
				line-height: 50.67rpx;
				background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/btnBg.png');
				background-size: 100% 100%;
				text-align: center;
				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
			}
		}
		.sku-item:nth-child(n+2) {
			border-top: 1rpx solid #D8D8D8;
		}
	}
</style>