hotelHomestayWx/pagesHouse/Verification/recordDetails.vue

<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="核销记录"></c-nav-bar>
		<view class="box ship_time">
			<view class="hx_title">
				发船时间：{{item.orderEntity.playDate}} {{item.orderEntity.playTime}}/{{orderType[item.orderEntity.orderType]}}/{{item.orderEntity.boatNo}}
			</view>
			<view class="st_info">
				<text>订单编号：{{item.orderEntity.orderCode}}</text>
				<view class="sti_xq" @tap="toOrderDetails(item.orderEntity.orderCode)">详情</view>
			</view>
			<view class="st_info">
				<text>出游时间：{{item.orderEntity.playLength}}小时</text>
			</view>
		</view>
		<view class="box person_info">
			<view class="hx_title">预约人员信息(<span v-if="item&&item.bookList">{{item.bookList.length}}</span>)</view>
			<block v-if="item&&item.bookList.length>0">
				<view class="hx_item" v-for="(book,index) in item.bookList" :key="index">
					<view class="hi_name">{{book.touristName}}</view>
					<view class="hi_idcard">身份证 {{book.touristCode}}</view>
					<view class="hi_btn" :class="classCfg[book.remark]">{{typeCfg[book.remark]}}</view>
				</view>
			</block>
		</view>
		<view class="box person_info">
			<view class="hx_title">实际上船人员信息(<span v-if="item&&item.boardingList">{{item.boardingList.length}}</span>)</view>
			<block v-if="item&&item.boardingList.length>0">
				<view class="hx_item" v-for="(board,index) in item.boardingList" :key="index">
					<view class="hi_name">{{board.touristName}}</view>
					<view class="hi_idcard">身份证 {{board.touristCode}}</view>
					<view class="hi_btn" :class="classCfg[board.remark]">{{typeCfg[board.remark]}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classCfg:{'book':'yd_btn','scene':'xz_btn'},
				typeCfg:{'book':'预订单','scene':'现场单'},
				orderType:{
					1:'特价',
					2:'包船',
					3:'拼船'
				},
				orderCode:'',
				item:null
			}
		},
		onLoad(option) {
			this.orderCode = option.orderCode;
			this.getDetails();
		},
		methods: {
			getDetails(){
				this.$api.get('/scenic/order/writeOffRecordInfo/'+this.orderCode).then(res=>{
					if(res.data.code===0){
						this.item = res.data.data;
						this.item.bookList.forEach(l=>{
							l.touristCode = l.touristCode.replace(/^(.{6})(?:\d+)(.{4})$/, '\$1******\$2');
						})
						this.item.boardingList.forEach(l=>{
							l.touristCode = l.touristCode.replace(/^(.{6})(?:\d+)(.{4})$/, '\$1******\$2');
						})
					}else this.$showToast(res.data.msg);
				})
			},
			toOrderDetails(id){
				uni.navigateTo({
					url:'/pagesHouse/Mine/ordersList/details/details?orderCode='+id
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding: 0 24rpx 40rpx;
		box-sizing: border-box;
		background: #F5F8FA;
		
		.box{
			width: 100%;
			background: #ffffff;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			border-radius: 16rpx;
		}
		
		.hx_title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 32rpx;
		}
		
		.ship_time{
			.st_info{
				margin-top: 25rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					line-height: 32rpx;
				}
				.sti_xq{
					width: 64rpx;
					height: 36rpx;
					border-radius: 18rpx;
					border: 1rpx solid #007A69;
					text-align: center;
					line-height: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #007A69;
				}
			}
		}
		
		.person_info{
			width: 100%;
			padding: 36rpx 24rpx 0;
			box-sizing: border-box;
			.hx_title{
				margin-bottom: 7rpx;
			}
			.hx_item{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 45rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				&:last-child{
					box-shadow: none;
				}
				.hi_name{
					width: calc(100% - 510rpx);
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.hi_idcard{
					width: 400rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: left;
				}
				.hi_btn{
					width: 110rpx;
					height: 48rpx;
					border-radius: 11rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}
		.yd_btn{
			background: #F0F8F6;
			color: #007A69;
		}
		.xz_btn{
			background: #E8EFFD;
			color: #326EE0;
		}
	}
</style>