discounts-minapp/study/studyGoodsDetail.vue

<template>
	<view class="studyGoodsDetail">
		<image class="banner" :src="info.studyItem" mode="aspectFill"></image>
		<view class="goods-info">
			<view class="goods-name">
				{{info.goodsName}}
			</view>
			<view class="price-box">
				<view class="left">
					<view class="price">
						￥{{info.price}}
					</view>
					/人起
				</view>
				<view class="right">
					{{info.reservationNum}}人已购
				</view>
			</view>
		</view>
		
		<view class="time-box">
			<view class="title">
				出发日期选择
			</view>
			<view class="choose-box">
				<view class="choose-item" :class="query.reservationTime == item.date?'active':''" v-for="item in dateList" :key="item.date" @click="handleTime(item)">
					<view class="time">
						{{item.date | filterDate}}
					</view>
					<view class="price">
						{{item.num+'人'}}
					</view>
				</view>
				
				<view class="more" @click="chooseTime">
					更多
				</view>
			</view>
			
			
		</view>
		
		<!-- 时间选择 -->
		<u-calendar 
		        startText="住店"
		        endText="离店"
				title="请选择出发日期"
		        :show="show" 
		        :mode="mode" 
				:defaultDate="query.reservationTime"
				:maxDate="maxDate"
		        @confirm="confirm"
				@close="close"
				closeOnClickOverlay
				:rowHeight="110"
				color="#3879F9"
				ref="calendar"
			>
		    </u-calendar>
		<rich-text :nodes="info.goodsDescribe"></rich-text>
		
		<view class="btn-box">
			<button class="subscribe-btn" type="default" @click="subscribe">预约</button>
			<button class="buy-btn" type="default" @click="buy">立即购买</button>
		</view>
		
	</view>
</template>

<script>
	import {studyGoodsDetail,subscribe} from '@/api/study.js'
	export default {
		data() {
			return {
				that:this,
				show: false,
				mode: 'single',
				maxDate:new Date().getTime()+1000*60*60*24*31,
				userId:'',
				dateList:[],
				query:{
				  "goodsId": "",
				  "id": 0,
				  "reservationTime": "",
				  "shopId": "",
				  "userId": ""
				},
				info:{
					day: 0,
					goodsDescribe: "",
					goodsImg: "",
					goodsName: "",
					price: 0,
					reservationNum: null,
					studyItem: "",
					useEndTime: null,
					useStartTime: null,
					useType: 1,
					statistics:null
				}
			}
		},
		filters: {
			filterDate: function(value) {
				let m = value.split('-')[1]
				let d = value.split('-')[2]
				let day = new Date(value).getDay()
				let w = day ? day: 7
				
				let zhArray = ['', '一', '二', '三', '四', '五', '六', '天']; // 数字对应中文
				let string = String(w)
				  .split('')
				  .reverse()
				  .map((item, index) => {
				    // 把数字切割成数组并倒序排列，然后进行遍历转成中文
				    // 如果当前位为0，直接输出数字， 否则输出 数字 + 进位填充字符
				    item = zhArray[Number(item)];
				    return item;
				  })
				  .reverse()
				  .join(''); // 倒叙回来数组，拼接成字符串
				return `${m}/${d} 周${string}` ;
				
			}
		},
		methods: {
			handleTime(item){
				this.query.reservationTime = item.date
			},
			chooseTime(){
				this.show = true
				this.$nextTick(()=>{
					// 如果需要兼容微信小程序的话，需要用此写法
					this.$refs.calendar.setFormatter(this.formatter)
				})
				
			},
			close(){
				this.show = false
			},
			confirm(e) {
				this.show = false
				console.log(e);
				this.query.reservationTime = e[0]
			},
			formatter(day,that) {
				var list = JSON.parse(uni.getStorageSync('list')) 
				if(list&&list.length){
					list.map(item=>{
						let month = Number(item.date.split('-')[1]) 
						let date = Number(item.date.split('-')[2]) 
						if(day.month == month && day.day == date)
						{
							day.bottomInfo = item.num + '人'
						}
					})
				}
				return day
			},
			subscribe(){
				if(!uni.getStorageSync('token')){
					return uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login'
								})
							}
						}
					})
				}else if(!this.query.reservationTime){
					uni.showToast({
						title:'请选择出发时间',
						icon:'none'
					})
				}else{
					let that = this
					uni.showModal({
						title:'预约确认',
						content:`确认预约${this.query.reservationTime}出发`,
						confirmText:'确认',
						success(res){
							if(res.confirm){
								that.query.shopId = that.info.shopId
								that.query.userId = JSON.parse(uni.getStorageSync('userInfo')).userId 
								subscribe(that.query).then(r=>{
									if(r.state == 'Success'){
										uni.showToast({
											title:'预约成功',
										})
									}
								})
							}
						}
					})
				}
			},
			buy(){
				
				if(!uni.getStorageSync('token')){
					return uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login'
								})
							}
						}
					})
				}else if(!this.query.reservationTime){
					uni.showToast({
						title:'请选择出发时间',
						icon:'none'
					})
				}else{
					let that = this
					uni.navigateTo({
						url:'/pay/pay',
						success: function(res) {
						  // 通过eventChannel向被打开页面传送数据
						  that.info.buyPrice = that.info.price
						  that.info.reservationTime = that.query.reservationTime
						  res.eventChannel.emit('pay', that.info)
						}
					})
				}
			},
			studyGoodsDetail(goodsId){
				studyGoodsDetail({goodsId,userId:this.userId}).then(res=>{
					if(res.state == 'Success'){
						this.info = res.content
						this.info.goodsId = goodsId
						uni.setStorageSync('list',JSON.stringify(res.content.statistics))
						this.dateList = res.content.statistics.splice(0,4)
						
					}
				})
			}
		},
		onLoad(options) {
			if(uni.getStorageSync('userInfo')){
				this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
			}
			this.studyGoodsDetail(options.id)
			this.query.goodsId = options.id
		},
		onReady() {
			// // 如果需要兼容微信小程序的话，需要用此写法
			// this.$refs.calendar.setFormatter(this.formatter)
		},
		beforeDestroy() {
			uni.removeStorageSync('list')
		}
	}
</script>

<style lang="scss" scoped>

.studyGoodsDetail{
	background: #F9F9F9;
	padding-bottom: 180rpx;
	.banner{
		width: 100%;
		height: 420rpx;
	}
	.goods-info{
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: -30rpx;
		position: relative;
		.goods-name{
			font-weight: bold;
			color: #222222;
		}
		.desc{
			font-size: 24rpx;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 36rpx;
		}
		.price-box{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin-top: 30rpx;
			.left{
				font-weight: 400;
				color: #AAAAAA;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				vertical-align: bottom;
				.price{
					font-size: 36rpx;
					font-weight: 800;
					color: #FF4C3A;
				}
			}
			.right{
				font-weight: 400;
				color: #AAAAAA;
				font-size: 24rpx;
			}
		}
	}
	
	.time-box{
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		.title{
			font-weight: bold;
			color: #222222;
			font-size: 28rpx;
			margin: 0 0 22rpx;
		}
		.choose-box{
			display: flex;
			justify-content: space-between;
			.choose-item.active{
				background: rgba(38,128,235,0.1);
				border: 1rpx solid #3879F9;
			}
			.choose-item{
				width: 136rpx;
				height: 84rpx;
				border-radius: 8rpx;
				background: #F6F6F6;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				.time{
					font-weight: bold;
					color: #222222;
					font-size: 22rpx;
					text-align: center;
				}
				.price{
					font-weight: 400;
					color: #FF4C3A;
					font-size: 22rpx;
					text-align: center;
				}
			}
			.more{
				width: 84rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 8rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #222222;
			}
		}
	}
	
	.goods-detail{
		width: 100%;
	}
	.btn-box{
		padding: 10rpx 20rpx 40rpx;
		background: #fff;
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		.subscribe-btn{
			width: 346rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #FFF;
			border-radius: 40rpx;
			border: 2rpx solid #3879F9;
			color: #3879F9;
			font-weight: bold;
		}
		.buy-btn{
			width: 346rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #3879F9;
			border-radius: 40rpx;
			font-weight: bold;
			color: #FFFFFF;
			
		}
	}
	
}
</style>