appWareHouse/pages/outStock/palletizing.vue

<template>
	<view class="box-container">
		<image class="img-container" src="@/static/images/common/palletizing.png">
		</image>
		<u-navbar leftIconSize="25px" height="80px" leftIconColor="#fff" bgColor="#1A4F94" :autoBack="true">
		</u-navbar>
		<view class="entry-info">
			<view style="margin-bottom: 30rpx;font-size: 16px;font-weight: 600;">请录入</view>
			<u-form labelPosition="left" labelWidth="9px" :model="ruleForm" :rules="rules" ref="ruleFormRef">
				<u-form-item prop="orderNo">
					<u-search :customStyle="{backgroundColor: '#F5F5F5'}" @clickIcon="getSearchData"
						@search="getSearchData" @scanIcon="getScanData" clearable placeholder="请输入订单号"
						v-model="ruleForm.orderNo" shape="round" :showAction="false">
					</u-search>
				</u-form-item>
				<button type="primary" class="btn" @tap="submitData">提交打板</button>
			</u-form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import store from '@/store/index'
	import Api from '@/api/api.js'
	import {
		initScan,
		startScan,
		stopScan
	} from "@/libs/scan.js"
	export default {
		onLoad(op) { //option为object类型，会序列化上个页面传递的参数
			if (op.name) {
				this.$nextTick(() => {
					this.$refs.uToast.show({
						type: 'success',
						message: "提交材积成功",
					})
				})
			}
		},
		onShow() {
			initScan(this.scanSuccess);
			startScan();
		},

		onHide() {
			stopScan();
		},
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "2",
					location: "",
					number: "",
					userId: "",
				},
				rules: {
					orderNo: {
						required: true,
						message: '请输入订单号',
						trigger: ['blur', 'change']
					},

				},
			}
		},

		methods: {
			async scanSuccess(code) {
				this.ruleForm.orderNo = code.trim()
				this.queryData()
			},
			getSearchData() {
				this.queryData()
			},
			getScanData() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							this.ruleForm.orderNo = res.result.trim()
							this.queryData()
						}

					},
					fail: (err) => {

					},
					complete: () => {

					}
				})

			},
			submitData() {
				this.queryData()
			},
			queryData(val) {
				this.$refs.ruleFormRef.validate().then(valid => {
					Api.storge.tray(this.ruleForm).then(res => {
						this.ruleForm.orderNo = ""
						uni.navigateTo({
							url: "/pages/outStock/forkliftWarehousing?name=palletizing"
						})

					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {
		position: relative;

		.img-container {
			height: 684rpx;
			width: 100%;
			margin-top: 100rpx;
		}

		.entry-info {
			position: absolute;
			border-radius: 20px;
			top: 590rpx;
			width: 90%;
			left: 50%;
			transform: translate(-50%, 0);
			min-height: 430rpx;
			background-color: #fff;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			border: 2px solid #F7F9FF;

			.u-input__content {
				border: 1px solid #000 !important;
				background-color: #000 !important;
				border-radius: 100px;
				height: 60rpx;
			}

			.btn {
				border-radius: 12px;
				font-size: 28rpx;
				margin-top: 80rpx;
				background-color: #1A4F94;
			}
		}

	}
</style>