RedDragonfly/pages/bazaar/SecurityCode.vue

<template>
	<view class="SecurityCode">
		<view class="top">
			<input class="uni-input" v-model="keyword" placeholder="请输入"/>
			<view class="btn">搜索</view>
		</view>
		<view class="bom" v-if="data">
			<view class="box">
				瓶码: {{data.bottleId}}
			</view>
			<view class="box">
				箱码: {{data.boxId}}
			</view>
			<view class="box">
				配送单号: {{data.sendId}}
			</view>
		</view>
	</view>
</template>

<script>
	import {verify} from '../../api/bazaar.js'
	export default {
		data() {
			return {
				keyword: '',
				data: ''
			};
		},
		created() {
			
		},
		methods:{
			async getData(){
				if(this.keyword){
					const res = await verify({
						verifyCode: this.keyword
					})
					console.log(res);
					this.data = res.data.list
				}
			}
		}
	}
</script>

<style lang="scss">
.SecurityCode{
	height: 100%;
	.top {
		height: 100rpx;
		display: flex;
		padding: 10rpx;
		border-bottom: 1rpx solid #dfdfdf;
		.uni-input{
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
		}
		.btn{
			width: 20%;
			height: 100%;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			background-color: #f4f4f4;
		}
	}
	.bom{
		height: calc(100% - 100rpx);
		padding: 20rpx;
		.box{
			padding: 10rpx 0;
			border-bottom: 1rpx solid #dfdfdf;
			&:last-child{
				border-bottom: 0;
			}
		}
	}
}
</style>