changshu_other/other/hotel-detail/components/ydmp-page.vue

<template>
	<view class="card-container">
		<view class="mstop-ss-time" @click="onShowDatePicker('range')">
			<view class="mstop-ss-time-rl">
				<view class="mstop-ss-time-txt">{{getWeek(1)}} 入住 </view>
				{{range[0]}}
			</view>
			<view class="wanshu">{{numwan}}晚</view>
			<view class="mstop-ss-time-rl">
				<view class="mstop-ss-time-txt">{{getWeek(2)}} 离店</view>
				{{range[1]}}
			</view>
		</view>
		<view class="card-item" v-for="item in roomList" :key="item">
			<view class="start">
				<image :src="item.icon"></image>
			</view>
			<view class="left">
				<view class="name">{{item.name}}</view>
				<view class="time">{{item.roomFacility}}</view>
			</view>
			<view class="right">
				<view class="oldPrice">￥{{item.price}}</view>
				<view class="jiage">
					<text class="cfj">政府错峰价</text>
					<text class="price">
						￥<text>{{item.sellPrice}}</text>
					</text>
				</view>
				<view class="yd-btn" @click="bookingTicket(item.id)">预定</view>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import {
		httpPost
	} from '@/components/utils/request.js';
	import util from '@/components/utils/date.js'
	import MxDatePicker from "../../components/mx-datepicker/mx-datepicker.vue";
	export default {
		props: ['roomId'],
		components:{MxDatePicker},
		data() {
			return {
				numwan: 1,
				startTime: '', //入住日期
				endTime: '', //离开日期
				showPicker: false,
				range: ['2019/09/01', '2019/09/06'],
				type: 'rangetime',
				value: '',
				roomList: []
			}
		},
		mounted() {
			var date = new Date();
			this.startTime = util.formatDate(date);
			this.endTime = util.adddate(date, 1);
			this.range[0] = this.startTime;
			this.range[1] = this.endTime;
			this.numwan = util.comparedate(this.startTime, this.endTime)
			this.getList();
		},
		methods: {
			getWeek(ind){
				let week=ind==1?util.getWeek(this.startTime):util.getWeek(this.endTime);
				return week;
			},
			getList() {
				let params = {
					startTime: this.startTime,
					endTime: this.endTime,
					roomId: this.roomId
				}
				httpPost(this, 'front/wares/api/type_list', params, res => {
					this.roomList = res.data.result.records;
					this.$emit('getRoom',this.roomList)
				})
			},
			bookingTicket(id) {
				uni.navigateTo({
					url:'/pagesBuy/booking-ticket/booking-room?id='+id
				})
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
				}
				this.startTime = e.value[0];
				this.endTime = e.value[1];
				this.numwan = util.comparedate(this.startTime, this.endTime)
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mstop-ss-time {
		width: 690rpx;
		height: 120rpx;
		background: #3D72F2;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-around;
		color: #fff;
		font-size: 29rpx;
		font-weight: 500;
		align-items: center;
		.wanshu {
			height: 45rpx;
			line-height: 31rpx;
			text-align: center;
			border: 1px solid rgba(255, 255, 255, 0.4);
			border-radius: 16rpx;
			font-size: 25rpx;
			padding: 5rpx 15rpx;
		}
		&-rl{
			text-align: center;
		}
		.mstop-ss-time-txt {
			font-size: 22rpx;
			margin-bottom: 10rpx;
		}
	}
	.card-container {
		margin-top: 35rpx;

		.start {
			width: 160rpx;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.card-item {
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.15);
			margin-top: 39rpx;
			height: 210rpx;
			background: #F5F6F7;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 24rpx;

			.left {
				width: 205rpx;
				margin: 0rpx 0rpx 0rpx 10rpx;
			}

			.name {
				font-size: 32rpx;
				color: #222222;
			}

			.time {
				color: #999;
				margin-top: 12rpx;
			}

			.right {
				text-align: center;
				overflow: hidden;

				.oldPrice {
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					text-decoration: line-through;
					color: #999999;
					text-align: right;
				}

				.jiage {
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.cfj {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.price {
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						color: #FF540B;

						text {
							font-size: 42rpx;
						}
					}
				}

				.yd-btn {
					width: 128rpx;
					height: 58rpx;
					background: #FF540B;
					border-radius: 29rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-left: 45rpx;
					float: right;
				}
			}
		}
	}
</style>