HDhotel/pages/writeoff/writeoffitem/writeoffitem.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 v-if="hd_type == 2" class="write-radius scan-hd">
				<view class="scan-hd-header">
					<view class="scan-hd-header-til">
						验证蝴蝶券 {{ticket.length}}/{{resdata.hd_count}}
					</view>
					<!-- <button class="scan-hd-header-btn" @click="scanCode" type="default"><i class="iconfont iconsaomiao"></i>扫码</button> -->
				</view>
				<view class="addhd">
					<input class="addhd-input" v-model="enterHDnumber" placeholder="请输入蝴蝶券号码" type="text" value="" />
					<button class="addhd-button" @click="enterHD" type="primary">添加</button>
				</view>
				<view class="scan-hd-list" v-for="(item,index) in ticket" :key="index">
					<view class="scan-hd-list-item">
						<view class="item-til">蝴蝶券{{index +1}}</view>
						<view class="item-con"><input type="text" :value="item" disabled /></view>
					</view>
				</view>
				<view class="scan-hd-tip">还差{{ resdata.hd_count - ticket.length }}张蝴蝶券</view>				
			</view>
			<!-- 验证蝴蝶券 实体券才有end -->
			
			<!-- 消费码蝴蝶券才有 -->
			<view v-if="hd_type == 1" class="write-radius consumer-code">
				<text class="consumer-code-text">消费码:</text>
				<input class="consumer-code-input" v-model="eticketno" type="text" value="" placeholder="请填写订单消费码" />
			</view>
			<!-- 消费码蝴蝶券才有 end -->
			
			<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">￥500</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">蝴蝶旅居</view>
				</view>
				<view class="contact-info-item contact-info-phone">
					<view class="contact-info-item-til">联系电话：</view>
					<view class="contact-info-item-con">13984111111</view>
				</view>				
			</view>
			<!-- contact-info end -->
			
		</view>
		<view class="bottom-btn-wrap">
			<button class="bottom-btn" @click="writeoff" type="primary">核销</button>
		</view>
	</view>
</template>
<script>
	// import $wxApi from "../../../wxapi.js";
	export default{
		components:{
			
		},
		props:{
			
		},
		data(){
			return{
				id:'',
				hd_type:'',//订单类别 1电子券，2实体券
				hotelname:'',
				roomname:'',
				breakfirst:'',
				roomstyle:'',
				roomwindow:'',
				orderId:'',//orderId 订单ID，与订单消费码必填其一  如果是电子券则等于 this.id
				eticketno:'',//订单消费码，与订单ID必填其一
				ticket:[],//蝴蝶券编号数组，实体券支付时必填
				enterHDnumber:'',
				writeoff_remark:'',//核销备注 
				resdata:{},
				params:{
					token:'',
				},
				writeoffparams:{
					token:'',
					
				},
				havenight:'',//共几晚			
				
			}
		},
		onLoad(option){
			//检查登录,获取token
			let loginRes = this.checkLogin('pages/index/index', '2');
			// console.log('loginRes',loginRes);
			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/writeoff/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/writeoff/writeoffitem/writeoffitem?id=${this.id}&backtype=2`,
						});							
					};
					this.hd_type = res.data.hd_type;
					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 => {
				
				});				
			},
			//添加蝴蝶券
			pushHD(hd){
				
				let self = this;
				Array.prototype.pushNoRepeat = function(){
					for(var i=0; i<arguments.length; i++){
						var ele = arguments[i];
						if(this.indexOf(ele) == -1){
							let codeparames ={
								token :self.params.token,
								code:ele
							};
							//验证蝴蝶券
							self.$api.http.post(self.config.apiBaseurl+'hotel/writeoff/verify',codeparames,{
								header: {
									Accept:'application/json',
									Authorization: 'Bearer '+ self.params.token, //注意Bearer后面有一空格
								}
							}).then(res =>{
								if(res.data.state == 'ok'){
									this.push(ele);
								}else{
									uni.showToast({
										icon:'none',
										title:res.data.message,
										duration: 2000
									});									
								}
								console.log(res)
							}).catch(err =>{
								console.log(err)
							});						
						}else{
							uni.showToast({
								icon:'none',
								title:'该券已经添加',
								duration: 2000
							});
						}
					}
				};
				this.ticket.pushNoRepeat(hd);
				
			},
			//手动输入蝴蝶券
			enterHD(){				
				this.pushHD(this.enterHDnumber)
			},
			//扫码蝴蝶券
			scanCode:function(){
				
				$wxApi.JSAPI().then(res =>{
					alert('555'+res)
				});
				// alert('1111'+hdcode);
				// document.write('1111'+hdcode);
				console.log('$wxApi',$wxApi);
				
				
				this.pushHD(res.resultStr);
				
				uni.showToast({
					icon:'none',
					title:'暂时无法使用3',
					duration: 2000
				});
				
				return;
				
				// wx.scanQRCode({
				//     needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				//     scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				//     success: function (res) {
				// 		var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				// 		console.log('scanQRCode',result);
				// 	}
				// });


				
				// uni.scanCode({
				//     onlyFromCamera: true,// 只允许通过相机扫码
				//     success: function (res) {
				//         console.log('条码类型：' + res.scanType);
				//         console.log('条码内容：' + res.result);
				//     }
				// });				
			},

			
			//提交
			writeoff:function(){
				console.log(this.hd_type);
				if(this.hd_type == 2){
					this.orderId = this.id;
					if(this.writeoffparams.ticket.length<this.resdata.hd_count){
							uni.showToast({
								icon:'none',
								title:'蝴蝶券不足',
								duration: 2000
							});
							return false;
					};
				};
				this.writeoffparams.token = this.params.token;
				this.writeoffparams = Object.assign(this.writeoffparams,{orderId:this.orderId,eticketno:this.eticketno,ticket:this.ticket});
				// console.log('this.writeoffparams',this.writeoffparams);
				this.$api.http.post(this.config.apiBaseurl+'hotel/writeoff/inspection', this.writeoffparams,{
					header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
					}
				} ).then(res => {
					
					uni.showToast({
						icon:'none',
						title:res.data.message,
						duration: 2000
					});
					
					console.log(res);
				
				}).catch(err => {
					console.log(err);
				
				});	
				
			},		
			
		}
	}
</script>

<style lang="scss" scoped>
page{background-color: $uni-bg-color-grey;}
@import url("/common/css/order.scss");
.addhd{margin: 40rpx 0;display: flex;justify-content: space-between;}
.addhd-input,
.addhd-button{height: 50rpx;line-height: 50rpx;font-size: 28rpx;}
.addhd-button{margin: 0;}
.addhd-input{border: 1px solid #4235B6;border-radius: 12rpx;flex: 1;margin-right: 15rpx;padding: 0 12rpx;}
</style>