RedDragonfly/pages/bazaar/VaseYard/VaseYard.vue

<template>
	<view class="vase-yard">
		<!-- <view class="top" @click="$goBack(2,'/pages/bazaar/VaseYard/reportedRecord')">
			<text>我的上报</text>
		</view> -->
		<view class="bom">
			<view class="uni-input-wrapper">
				<input class="uni-input" placeholder="输入瓶码" v-model="id" />
				<view class="icon" @click="ScanCodes()">
					<uni-icons type="scan" size="30"></uni-icons>
				</view>
			</view>
			<view class="btn" @click="particulars(id)">
				开始稽查
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:''
			};
		},
		onLoad() {
			
		},
		methods:{
			// 扫码
			ScanCodes(){
				uni.scanCode({
					success: function (res) {
						if (res.result) {
							let data = res.result
							let index = data.lastIndexOf("/")
							data = data.substring(index+1,data.length)
							data = data.replace(/\s*/g,"")
							uni.navigateTo({
							    url: '/pages/bazaar/VaseYard/particulars?id=' + data
							});
						}
					}
				});
			},
			// 查询
			particulars(data){
				if(this.id) {
					uni.navigateTo({
					    url: '/pages/bazaar/VaseYard/particulars?id=' + data  
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.vase-yard {
		height: 100%;

		.top {
			text-align: right;
			background-color: #e40315;
			height: 100rpx;
			line-height: 100rpx;

			text {
				color: #eee;
				margin: 30rpx;
			}
		}

		.bom {
			height: calc(100% - 100rpx);
			background-color: #eeeeee;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 40rpx;
			.uni-input-wrapper{
				background-color: #fff;
				width: 100%;
				height: 80rpx;
				position: relative;
				border-radius: 8rpx;
				.uni-input{
					padding-left: 20rpx;
					height: 100%;
					border-radius: 8rpx;
				}
				.icon{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 20rpx;
					z-index: 2;
				}
			}
			.btn {
				margin-top: 40rpx;
				color: #5a9ede;
			}
		}
	}
</style>