HDhotel/pages/roomconfirm/roomconfirmitem/roomconfirmitem.vue

<template>
	<view class="pages writeoffitem">
		<view class="writeoffitem-number">
			<view class="number">订单编号：{{resdata.ordersn}}</view>
			<view class="time">预订时间：{{resdata.addDate}}</view>			
		</view>
		<view class="wrap">
			
			<view class="write-radius radio-select have-room">
				<radio-group @change="haveroomf">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(radio, index) in haveroom" :key="radio.value">
						<view>
							<radio :value="radio.value" :checked="index === haveroomcurrent" />
						</view>
						<view>{{radio.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="write-radius radio-select clear-room">
				<radio-group @change="clearroomf">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(radio, index) in clearroom" :key="radio.value">
						<view>
							<radio :value="radio.value" :checked="index ===clearroomcurrent" />
						</view>
						<view>{{radio.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="write-radius pay-way">
				<view class="pay-way-left">支付方式</view>
				<view class="pay-way-right">电子券支付</view>
			</view>
			<view class="write-radius hotel-info">
				<view class="hotel-info-room">
					<image class="room-image" :src="resdata.litpic" mode="scaleToFill"></image>
					<view class="hotel-info-text">
						<view class="hotel-info-text-item hotel-info-text-hotel">{{hotelname}}</view>
						<view class="hotel-info-text-item hotel-info-text-room">{{roomname}}</view>
						<view class="hotel-info-text-item hotel-info-text-service">
							<text class="hotel-info-text-service-item" v-if="breakfirst">{{breakfirst}}</text>
							<text class="hotel-info-text-service-item" v-if="roomwindow">{{roomwindow}}</text>
							<text class="hotel-info-text-service-item" v-if="roomstyle">{{roomstyle}}</text>
						</view>					
					</view>					
				</view>
				<view class="room-detail">
					<view class="room-detail-item room-detail-time">
						<view class="room-detail-time-data">
							入住：{{resdata.usedate}}    离店：{{resdata.departdate}}
						</view>
						<view class="room-detail-time-total">
							共{{havenight}}晚
						</view>
					</view>
					<!-- <view class="room-detail-item">
						<view class="room-list">
							<view class="room-list-item">
								<view class="room-list-item-date">2020-08-19</view>
								<view class="room-list-item-number">1间</view>
							</view>
							<view class="room-list-item">
								<view class="room-list-item-date">2020-08-19</view>
								<view class="room-list-item-number">1间</view>
							</view>								
						</view>
						<view class="room-list-total">							
						</view>
					</view> -->
					<view class="pay-total">
						<view class="pay-total-item pay-total-number">
							<view class="pay-total-til">总计</view>
							<view class="pay-total-con">￥{{resdata.price}}</view>
						</view>
						<view class="pay-total-item pay-total-way">
							<view class="pay-total-til">预订方式</view>
							<view class="pay-total-con">全款支付</view>
						</view>
					</view>
				</view>
				<!-- room-detail end -->
			</view>
			<!-- hotel-info end -->
			<view class="write-radius contact-info">
				<view class="contact-info-item contact-info-name">
					<view class="contact-info-item-til">联系人：</view>
					<view class="contact-info-item-con">{{resdata.linkman}}</view>
				</view>
				<view class="contact-info-item contact-info-phone">
					<view class="contact-info-item-til">联系电话：</view>
					<view class="contact-info-item-con">{{resdata.linktel}}</view>
				</view>				
			</view>
			<!-- contact-info end -->
			
		</view>
		<view class="bottom-btn-wrap">
			<button class="bottom-btn" @click="roomconfirm" type="primary">确认</button>
		</view>
	</view>
</template>

<script>
	export default{
		components:{
			
		},
		props:{
			
		},
		data(){
			return{
				id:'',
				haveroomcurrent:0,
				haveroom:[
					{value: '1',name: '有房'},
					{value: '2',name: '无房'},
				],
				haveroomvalue:1,
				clearroom:[
					{value: '1',name: '清空库存'},
					{value: '2',name: '不清空库存'},
				],
				clearroomvalue:1,
				clearroomcurrent:1,
				params:{
					token:'',
				},
				confirmparams:{
					token:'',
					
				},
				hotelname:'',
				roomname:'',
				resdata:{},
				breakfirst:'',
				roomstyle:'',
				roomwindow:'',
				havenight:'',//共几晚
				
			}
		},
		onLoad(option){
			//检查登录,获取token
			let loginRes = this.checkLogin('pages/index/index', '2');
			if(!loginRes){return false;}
			this.params.token=loginRes[0];
			this.id = option.id;
			this.params = Object.assign(this.params,{id:option.id});			
			this.getdetail();
		},
		methods:{
			
			//获取订单详情
			getdetail:function(){
				this.$api.http.post(this.config.apiBaseurl+'hotel/reserve/detail', this.params,{
					header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
					}
				} ).then(res => {
					if(res.data.code=='1001'){
						uni.redirectTo({
							url:`/pages/login/login?backpage=/pages/roomconfirm/roomconfirmitem/roomconfirmitem?id=${this.id}&backtype=2`,
						});							
					};
					this.resdata = res.data;
					this.hotelname = res.data.hotel.title;
					this.roomname = res.data.room.roomname;
					this.breakfirst = res.data.room.breakfirst;
					this.roomstyle = res.data.room.roomstyle;
					this.roomwindow = res.data.room.roomwindow;
					
					//计算几晚
					let day1 = Date.parse(new Date(res.data.usedate.replace(/-/g, '/'))) / 1000;
					let day2 = Date.parse(new Date(res.data.departdate.replace(/-/g, '/'))) / 1000;
					this.havenight = Math.abs((day1 - day2) / (3600 * 24));
					
					console.log(JSON.parse(JSON.stringify(res.data)));
				
				}).catch(err => {
				
				});				
			},
			
			//提交
			roomconfirm:function(){
				this.confirmparams.token = this.params.token;
				this.confirmparams = Object.assign(this.confirmparams,{orderId:this.id,has:this.haveroomvalue,is_clear:this.clearroomvalue});
				this.$api.http.post(this.config.apiBaseurl+'hotel/reserve/confirm', this.confirmparams,{
					header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
					}
				} ).then(res => {
					
					uni.showToast({
						icon:'none',
						title:res.data.message,
						duration: 2000
					});			
							
					//确认成功跳转到列表页
					if(res.data.state == 'ok'){
						setTimeout(()=>{
							uni.redirectTo({
								url:`/pages/roomconfirm/roomconfirm`,
								fail:function(e){
									console.log(e);
								}
							});
						},1000);						
					};
					
					
					console.log(res);
				
				}).catch(err => {
					console.log(err);
				
				});	
				
			},
			
			haveroomf: function(evt) {
				for (let i = 0; i < this.haveroom.length; i++) {
					if (this.haveroom[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				this.haveroomvalue = evt.target.value;
			},
			clearroomf: function(evt) {
				for (let i = 0; i < this.clearroom.length; i++) {
					if (this.clearroom[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				this.clearroomvalue = evt.target.value;
			},

			
		}
	}
</script>

<style lang="scss" scoped>
page{background-color: $uni-bg-color-grey;}
@import url("/common/css/order.scss");
</style>