sailun-tbr-web/pages/home/scancode/index.vue

<template>

	<view class="content">
		<!-- <u-navbar :title="nbTitle" back-icon-color="#ffffff" title-color="#ffffff" :background="background" :border-bottom="false" :is-fixed="true" :immersive="false"></u-navbar> -->
		
		<view class="text-area">
			<view class="white_b">
				<scan @getCode="getScanCode"/>
			</view>
		</view>
		<view class="stripe"></view>
		<view class="roll">
			<view>
				<view @click="show = true">
					<u-icon name="edit-pen"></u-icon>手动录入
				</view>
				<view>{{tips}}：{{number}}</view>
			</view>
			<view>
				<view></view>
				<view></view>
				<view style="width: 94%;height: 20px;background-color: rgb(0,0,0,0);margin: 0 auto;margin-top: -1rpx;border-radius: 0;">
					<image src="../../../static/sailun/line.png" style="width: 100%;height: 1rpx;" mode=""></image>
				</view>
			</view>
			<view class="generate">
				<u-table font-size="24" border-color="#ffffff" bg-color="#fff">
					<u-tr class="u-tr">
						<u-th class="u-th" width="30%">胎号</u-th>
						<u-th class="u-th">规格</u-th>
						<u-th class="u-th" width="15%"></u-th>
					</u-tr>
					<u-tr class="u-tr" :key="index" v-for="(item, index) in lisi">
						<u-td class="u-td" width="30%">{{item.name}}</u-td>
						<u-td class="u-td">{{item.Specifications}}</u-td>
						<u-td class="u-td" width="15%">删除</u-td>
					</u-tr>
				</u-table>
				<u-divider color="rgb(144, 147, 153)" half-width="200" border-color="rgb(144, 147, 153)" margin-top="40">没有更多了</u-divider>
			</view>
		</view>
		<view class="determine">
			<u-button type="primary" :ripple="true" shape="circle" @click="scancodein">扫码确认</u-button>
		</view>
		<view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '提示',
				number: '请扫码入库',
				nbTitle: '扫码标题',
				i: 1,
				lisi: [{
					name: '123456789154Sad',
					Specifications: '175/70R14 88T XL BH15 BGBL'
				}],
				background: {
					backgroundColor: '#0094fe',
				}
			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			bug() {
				console.log("成功")
				this.i++
				this.lisi.push({
					name: this.i,
					Specifications: this.i
				})
			},
			//获取扫码控件
			getScanCode(val) {
				console.log(val)
				this.number = val
				this.tips = "胎号"
				this.bug()
			},
			scancodein() {
				this.$u.route({
					url: 'pages/home/Scan-code-in/index'
				})
			}
		}
	}
</script>

<style scoped>
	.generate {
		width: 98%;
		height: 420rpx;
		overflow:auto;
		margin: 0 auto;
		margin-top: 120rpx;
	}

	.determine {
		width: 690rpx;
		margin-top: 30rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.stripe {
		width: 720rpx;
		height: 30rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: -100rpx;
	}

	.text-area {
		width: 100%;
		height: 850rpx;
		background-color: #0094fe;
		display: flex;
		justify-content: center;
		padding-top: 180rpx;
	}

	.white_b {
		width: 83%;
		height: 540rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	page {
		/* background-color: #000; */
	}

	.roll {
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: -15rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(101, 176, 249, 0.3);
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.roll>view:nth-child(1)>view:nth-child(2) {
		font-size: 42rpx;
		font-weight: bold;
		color: #0192FD;
		text-align: center;
		margin-bottom: 50rpx;
	}

	.roll>view:nth-child(1)>view:nth-child(1) {
		width: 200rpx;
		color: #0094FE;
		position: relative;
		top: -40rpx;
		left: 500rpx;
		font-size: 32rpx;
		text-align: center;
	}

	.roll>view:nth-child(2)>view {
		width: 50rpx;
		height: 50rpx;
		background-color: #F4F4F4;
		border-radius: 100%;
		float: right;
		margin-right: -30rpx;
	}

	.roll>view:nth-child(2)>view:nth-child(1) {
		float: left;
		margin-left: -30rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #0095FF;
	}
</style>