yinshu_ui/yinshuacx/pages/home/potho.vue

<template>
	<div>
		<div class="controls">
			<img src="../../static/icon_bgcx_bg.png" alt="" class="img">
			<span>请输入报告编号</span>
		</div>
		<div class="noticeTXT">
			<span>NO:ASJ(</span>
				<input type="number" v-for="(item, index) in code_len" :key="index" disabled @tap="onCode(index)"
					:value="code_val.length >= index + 1 ? code_val[index] : ''"
					class="code-input-item flex-default-center input_r" :maxlength="1"/>
			<span style="margin-left: 8upx;">)QG—</span>
				<input type="number" v-for="(item, index) in code_lena" :key="index" disabled @tap="onCode(index)"
					:value="code_vala.length >= index + 1 ? code_vala[index] : ''"
					class="code-input-item flex-default-center input_r" :maxlength="1"/>
			<span style="margin-left: 8upx;">)号</span>
			<!-- 实际监听 -->
			<input v-if="is_focus" @blur="blurCode" @input="setCode" type="number" class="code-input" v-model="code_vals"
				maxlength="7" :focus="true" />

			<!-- <span>NO:ASJ(</span>
			<input class="input_r" v-model="phonenum[0]" :maxlength="1">
			<input class="input_r" v-model="phonenum[1]" :maxlength="1">
			<input class="input_r" v-model="phonenum[2]" :maxlength="1">
			<input class="input_r" v-model="phonenum[3]" :maxlength="1" style="margin-right: 8upx;">
			<span>)QG—</span>
			<input class="input_r" v-model="phonenum[4]" :maxlength="1">
			<input class="input_r" v-model="phonenum[5]" :maxlength="1">
			<input class="input_r" v-model="phonenum[6]" :maxlength="1" style="margin-right: 8upx;">
			<span>)号</span> -->
		</div>
		<div class="snu">
			<button type="primary" @click="takePhoto">查询</button>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				device: true,
				productNameorCode: "",
				children_imgtwo: '',
				phonenum: ['', '', '', '', '', '', '', ], //编码展示,
				
				code_len: 4, // 验证码长度,
				code_lena:3,
				code_val: '', // 前面
				code_vala:'',//后面的
				code_vals:'',
				is_focus: false
			};
		},
		onLoad() {
			let token = uni.getStorageSync('phone')
			this.phonhe = token
			if(!token){
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return  false
			}
		},
		methods: {
			setCode(e) {
				var val=e.detail.value;
				if(val.length>3){
					this.code_val = val.slice(0,4);
					this.code_vala = val.slice(4);
				}else{
					this.code_val =val;
				}
				this.code_vals = e.detail.value;
			},
			onCode(e) {	e
				this.is_focus = true;
			},
			blurCode() {
				this.is_focus = false;
			},
			fanh() {
				this.device = !this.device
			},
			tipsFn(tit,icon){
				icon=icon||'none'
				uni.showToast({
					title:tit,
					icon:icon,
				})
			},
			takePhoto(){
				var that=this;
				if(that.code_vals.length!=7){
					that.tipsFn("请输入正确的报告编号");
					return
				}
				var a=that.code_vals.slice(0,4)
				var b=that.code_vals.slice(4);
				var reportNumber='NO:ASJ('+a+')QG —'+b+'号'
		
				var phone=uni.getStorageSync('phone')
				var params={
					reportNumber:reportNumber,
					queryPhone:phone
				}
				that.$http.posta('gateway/query/queryReportNum',params).then(res => {
					if(res.code == '200') {
						var astr=JSON.stringify(res.data);
						wx.redirectTo({
							url:'/pages/home/recordtwo?code='+astr
						})
					}else{
						that.tipsFn(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.font-26 {
		font-size: 26rpx;
	}
	.font-color-9b9ba5 {
		color: #9b9ba5;
	}
	.font-color-0078FF {
		color: #0078ff;
	}
	.login-container {
		padding: 0 30rpx;
	}
	.login-header {
		padding: 90rpx 0;
		.login-header-item {
			font-size: 42rpx;
			margin-bottom: 17rpx;
		}
	}
	.code-input {
		height: 0;
		width: 0;
	}
	.code-input-item {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #9b9ba5;
		justify-content: center;
		text-align: center;
	}

	
	.snu {
		// width: 100%;

		margin: 0 33upx;

		button {
			flex: 1;
			margin: 60upx 10upx;
			margin-bottom: 0;
			margin-top: 258upx;
			border-radius: 46upx;
		}
	}

	.controls {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 56upx;

		.img {
			width: 123upx !important;
			height: 123upx !important;
			margin-bottom: 20upx;
		}

		span {
			font-size: 29upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1E1E1E;
		}
	}

	.noticeTXT {
		padding: 0 44upx;
		font-size: 35upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #1E1E1E;
		display: flex;
		margin-top: 91upx;

		.input_r {
			border: 1px solid #969696;
			width: 42upx;
			height: 42upx;
			margin-left: 7upx;
			border-radius: 7px;
			text-align: center;
		}
	}

	.ines {
		padding: 0 33upx;
		box-sizing: border-box;
		width: 100%;
	}

	.po {
		font-size: 34upx;
		color: #333;
		text-align: center;
		margin-top: 20upx;
	}

	.potie {
		font-size: 28upx;
		color: #333;
		text-align: right;
		margin: 20upx 0;
	}

	.jhey {
		width: 100%;
		margin-top: 10upx;
		// height: 400upx !important;
	}
</style>