tourGuide/pages/verification/index.vue

<template>
	<view class="content">
		<view class="common-box">
			<view class="common-types">
				<view @click="setType(0)" :class="['common-type',type==0?'active':'']">扫码核销</view>
				<view @click="setType(1)" :class="['common-type',type==1?'active':'']">核销码核销</view>
				<view @click="setType(2)" :class="['common-type',type==2?'active':'']">手机号核销</view>
			</view>
		</view>
		
		<view class="content-area flex-1 h-1rpx">
			<template v-if="orderList.length<=0">
				<view class="type0-container" v-show="type==0">
					<image @click="scanCode" :src="showImg('/uploads/20241203/e114fd176d9ef85e81e57150274bcc4a.png')"></image>
					<view @click="scanCode">点击扫码核销</view>
				</view>
				<view class="type1-container" v-show="type==1">
					<view class="flex flex-items-center">
						<view class="hexiao-text">输入核销码</view>
						<input  v-model="HXCode" class="hexiao-code"  placeholder="请输入内容" />
					</view>
					<view class="hexiao-btn" @click="verifyByCode">立即核销</view>
				</view>
				<view class="type1-container" v-show="type==2">
					<view v-if="orderList.length<=0">
						<view class="flex flex-items-center">
							<view class="hexiao-text">输入手机号</view>
							<input  v-model="HXPhone" class="hexiao-code"  placeholder="请输入内容" />
						</view>
						<view class="tips">
							<view>注：仅支持查询当日订单 </view>
							<view>支持手机号模糊搜索（不少于4位）</view>
						</view>
						<view class="hexiao-btn" style="margin-top: 100rpx;" @click="searchByPhone">查询</view>
					</view>
				</view>
			</template>
			
			<view class="type1-container" v-else>
				<view class="order-list" >
					<view class="order-item" v-for="(item,i) in orderList" :key="i" @click="goOrderDetail(item)">
						<view class="title">订单详情</view>
							<view class="flex" >
								<view class="label">下单日期:</view>
								<view class="text">{{item.create_time}}</view>
							</view>
							<view class="flex">
								<view class="label">订单号:</view>
								<view class="text">{{item.child_id}}</view>
							</view>
							<view class="flex">
								<view class="label">订单名称:</view>
								<view class="text"> {{item.goods_title}}</view>
							</view>
							<view class="flex">
								<view class="label">订购数量:</view>
								<view class="text">{{item.num}}</view>
							</view>
							<view class="flex">
								<view class="label">出行人数:</view>
								<view class="text">{{item.contact_num}}</view>
							</view>
							<view class="flex">
								<view class="label">订单状态:</view>
								<view class="text">{{item.status_text}}</view>
							</view>
							<view class="flex">
								<view class="label">时段:</view>
								<view class="text">{{item.use_date}}</view>
							</view>
							<view class="flex">
								<view class="label">联系电话:</view>
								<view class="text">{{item.phone}}</view>
							</view>
							<!-- <view class="flex">
								<view class="label">出行人:</view>
								<view class="text">{{item.contact_name}}</view>
							</view>
							<view class="flex">
								<view class="label">出行人手机号:</view>
								<view class="text">{{item.contact_tel}}</view>
							</view>
							<view class="flex">
								<view class="label">出行人身份证:</view>
								<view class="text">{{item.id_number}}</view>
							</view> -->
						
						<view v-if="item.status=='SUCCESS'" class="hexiao-btn" @click="confirmVerify(item)">核销</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view v-if="showScan">
			<scanCodeVue ref="scanCodeVueRef" @success="getCode" @fail="scanFail"></scanCodeVue>
		</view>
		
	</view>
</template>

<script>
	import scanCodeVue from "../../components/scanCode.vue"
	export default {
		components:{scanCodeVue},
		data() {
			return {
				type: 1,
				HXCode: '', // 核销码
				HXPhone:"",
				orderList: [],
				
				showScan: false,
			};
		},
		onShow() {
			if (this.HXCode || this.HXPhone) {
				let param = {child_id: this.HXCode, mobile: this.HXPhone, noNeedDataTip: true}
				this.getOrderList(param)
			}
		},
		onLoad() {
			
		},
		methods: {
			scanCode () {
				this.showScan = true
			},
			getCode (res) {
				console.log(res)
				this.showScan = false
				
				if (res) {
					let param = {child_id: res}
					this.HXCode = res
					this.HXPhone = ""
					this.getOrderList(param)
				}
				
			},
			scanFail(res) {
				this.showScan = false
				uni.showToast({
					title: res,icon:"none"
				})
			},
			
			
			setType (type) {
				if (this.type != type) {
					this.orderList = []
				}
				this.type = type
			},
			// 查询订单
			getOrderList (param) {
				// this.orderList = []
				this.Post(param, '/api/Merchants/search').then(res=>{
					if (res && res.code == 1 && res.data) {
						this.orderList = res.data || []
						
						if (this.orderList.length<=0 && !param.noNeedDataTip) {
							uni.showToast({
								title:'未查询到需核销的订单',
								icon:"none"
							})
						}
					}
				})
			},
			
			// 核销搜索
			verifyByCode () {
				if (this.HXCode.trim() == '') {
					uni.showToast({title:'请输入核销码',icon:"none"})
					return
				}
				let param = {child_id: this.HXCode.trim()}
				this.HXPhone = ""
				this.getOrderList(param)
			},

			searchByPhone () {
				if (this.HXPhone.trim() == '') {
					uni.showToast({title:'请输入手机号',icon:"none"})
					return
				} else if (this.HXPhone.length < 4) {
					uni.showToast({title:'查询手机号最低4位',icon:"none"})
					return
				}
				let param = {mobile: this.HXPhone.trim()}
				this.HXCode = ""
				this.getOrderList(param)
			},
			// 核销
			confirmVerify (item) {
				let _this = this
				uni.showModal({
					title: '',
					content: '确认是否核销此订单',
					confirmColor: '#96684F',
					success: function (res) {
						if (res.confirm) {
							// todo
							_this.Post({child_id: item.child_id}, '/api/Merchants/dispose').then(res=>{
								uni.showToast({title:'核销成功',icon:'success'})
								let param = {child_id: _this.HXCode, mobile: _this.HXPhone, noNeedDataTip: true}
								_this.getOrderList(param)
							})
						}
					}
				});

			},
			
			goOrderDetail (item) {
				uni.navigateTo({
					url:`/subPackages/order/orderDetail?id=${item.child_id}`
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.content {
		height: calc(100vh - 44px - 50px);
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.common-box {
		height: 106rpx;
		width: 100%;
		flex-shrink: 0;
		
		.common-types {
			width: 100%;
			background: white;
			height: 106rpx;
			font-size: 31rpx;
			z-index: 10;
			color: #010101;
			font-weight: bold;
			overflow: hidden;
			padding: 0 88rpx;
			display: flex;
			justify-content: space-between;
		}
		
		.common-type {
			flex-shrink: 0;
			line-height: 106rpx;
			height: 106rpx;
			position: relative;
			width: 150rpx;
			text-align: center;
		}
		
		.common-type.active:after {
			display: block;
			width: 50%;
			font-size: 0;
			content: '1';
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1rpx;
			height: 6rpx;
			background: #96684F;
			border-radius: 6rpx;
		}
	}
	
	.content-area{
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	.type0-container{
		padding: 185rpx 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #707070;
		image{
			width: 176.67rpx;
			height: 176.67rpx;
			display: block;
			margin-bottom: 25rpx;
		}
	}
	
	.type1-container{
		padding: 39rpx 26rpx;
		.hexiao-text{
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
		.hexiao-code{
			margin-left: 22rpx;
			width: 537rpx;
			height: 107rpx;
			border-radius: 7rpx;
			border: 1px solid #666666;
			font-size: 28rpx;
			line-height: 107rpx;
			padding: 0 27rpx;
		}
		.hexiao-btn{
			width: 307rpx;
			height: 80rpx;
			background: #96684F;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			display: block;
			margin: 174rpx auto 0;
		}
		
		.tips{
			padding: 20rpx 0 0 180rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
		}
	}
	
	.order-item{
		width: 100%;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 30rpx;
		&>view{
			margin-bottom: 26rpx;
		}
		.title{
			font-size: 32rpx;
			text-align: center;
		}
		
		.label{
			width: 200rpx;
			flex-shrink: 0;
		}
		.text{
			flex: 1;
			width: 1rpx;
			color: #646464;;
		}
		
		.hexiao-btn{
			margin: 0;
			margin-left: auto;
			width: 200rpx;
			height: 66rpx;
			line-height: 66rpx;
			font-weight: 500;
			font-size: 28rpx;
		}
	}
</style>