taienTaike_PDA_mobile2/pages/processcode-scan/processcode-scan.vue

<template>
	<view class="bg-white page">
		<form @submit="onSubmit">
			<view class="border flex form-container ">
				<input v-if='showClear' type="text" v-model="form.barcode" name='barcode' disabled :placeholder="barcodekey"   class="width-100 form-item-input px-1"/>
				<scan-btn
					sourcename="form"
					:barcodekey="barcodekey"
					 keyname="barcode" 
					:scaning="scaning" 
					:show-clear="showClear" 
					@scan="onScan"
					 @clear="onClearValue"
					 @close="onCloseScanPage"
					 clearIconClass="form-item-icon"
					 :class="showClear ? '' : 'width-100'"
					 >
					<view class="flex">
					  <view class="form-item-input font-mmd flex-1 text-left pl-2">{{barcodekey}}</view>
						<view class="iconfont form-item-icon icon-ziyuan"></view>
					</view>
				</scan-btn>
			</view>
			<view class="px-5">
				<button type="primary" form-type="submit">确认</button>
			</view>
		</form>
	</view>
</template>

<script>
	import scanBtn from "@/components/common/scan-btn.vue"
	import {onErrorbarcodeKey} from "@/common/utils/common.js"
	import {onScanMixin} from "@/common/utils/mixins.js"
	
	const  graceChecker = require("../../common/utils/graceChecker.js");
	
	export default {
		mixins:[onScanMixin],
		components:{
			scanBtn
		},
		data () {
			return {
				barcodekey:null,  // 条形码关键字
				nextUrl:null,  
				form:{
					barcode:""
				},
			}
		},
		computed:{
			// 是否显示删除按钮
			showClear () {
				return Boolean(this.form.barcode)
			}
		},
		onLoad (e) {
			if (e.title) {
				uni.setNavigationBarTitle({
					title:e.title
				})
			}
			if (e.nextUrl) {
				this.nextUrl=e.nextUrl
			}
			this.barcodekey=e.barcodekey
		},
		onUnload () {
			this.removeListenerFn()
			this.onClearValue()
		},
		onShow () {
			this.addListenerFn()
		},
		onHide () {
			this.removeListenerFn()
			this.onClearValue()
		},
		methods:{
			// 清除数据
			onClearValue () {
				this.form.barcode=null
			},
			// 确认
			onSubmit (e) {
				const rules=[
					{name:"barcode",checkType:"notnull",errorMsg:"请填写条形码"},
				]
				const formData=e.detail.value
				const checkRes=graceChecker.check(formData,rules)
				if(checkRes){
					const nextUrl=this.nextUrl ? this.nextUrl : "index"
					
					uni.navigateTo({
						url:`/pages/${nextUrl}/${nextUrl}?barcode=${formData.barcode}`
					})
				}else{
					this.form={
						barcode:null
					}
				 return	uni.showToast({
						title:graceChecker.error,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.form-container{
		margin-top:100px;
		margin-bottom:80px ;
	}
	.form-item-icon{
		background-color: #eee;
	}
</style>