dnyAppTruck/pages/feedback/scanOrderCode.vue

<template>
	<view class="page-container">
		<view>
			<appScan ref="appScan" @scanHitERPCode="scanHitERPCode"></appScan>
		</view>

		<view class="codeList">
			<view class="codeItem" v-for="(item,index) in hitOrders" :title="item.orderCode" :index="index" :threshold="0">
				{{item.orderCode}}
			</view>

		</view>


		<view class="footer">
			<view>
				<view>
					<text>总数：18</text><br>
					<text>包数：26</text>
				</view>
			</view>
			<view @click="confirmOrderCodes">确认装车</view>
		</view>
	</view>
</template>

<script>
	import appScan from "../../components/app-continue-scancode/app-continue-scancode.vue"
	import request from '@/common/libs/request.js';
	export default {
		components: {
			appScan
		},
		data() {
			return {
				totalCount: 0,
				hitOrders: []
			}
		},
		methods: {
			scanHitERPCode(e) {
				let _that = this;
				console.log(e.code);
				if (e.code.match(new RegExp("^sendOrder.*$"))) {
					let ids = e.code.split("-");
					console.log(ids);
					if (!_that.checkCodeExists(ids[2])) {
						_that.hitOrders.push({
							id: ids[2],
							orderCode: ids[1]
						})
						console.log(ids)
						// this.totalCount++
					}
				}
			},
			checkCodeExists(id) {
				let _that = this;
				let code = _that.hitOrders.find(function(v) {
					return (v.id == id);
				})
				return ((code) && (code != null) && (code != undefined));
			},
			confirmOrderCodes() {
				let _that = this;
				if (_that.hitOrders.length > 0) {
					uni.$emit('confirmHitERPCode', {
						hits: _that.hitOrders
					})
					setTimeout(() => {
						uni.navigateBack({})
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-text{
		line-height: 18rpx;
	}
	.page-container {
		position: relative;
		height: 100%;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.6);

		.input {
			position: relative;
			z-index: 20;
			margin-top: 80rpx;
			height: 70rpx;
			padding: 0 80rpx;

			/deep/ .search-input {
				height: 70rpx;
				color: #fff;
				border-radius: 40rpx;
				border: 1px solid #FFD202;
			}
		}
	}

	.wx-scan-container {
		margin-top: 100rpx;
		height: 450rpx;

		.wx-tip {
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.codeList {
		position: absolute;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		top: 340px;
		bottom: 50px;
		z-index: 10;
		width: 100%;
		background: #FFFFFF;
		.codeItem {
			width: 48%;
			height: 30rpx;
			border: 0px;
			margin-top: 2rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-top: 1px solid #E8E8E8;

		>view {
			width: 50%;
			height: 100%;
			font-size: 34rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;

			&:active {
				opacity: 0.8;
			}

			.cart {
				width: 67rpx;
				height: 67rpx;
				margin-top: 10rpx;
				margin-right: 25rpx;
			}

			.amout {
				font-size: 34rpx;

				>text {
					font-size: 20rpx;
				}
			}

			.badge {
				position: relative;

				>text {
					position: absolute;
					top: 2rpx;
					right: 10rpx;
					z-index: 10;
					font-size: 22rpx;
					background: #FF3D00;
					border-radius: 50%;
					color: #fff;
					padding: 0 10rpx 2rpx;
				}
			}
		}

		>view:last-child {
			background: #FFD202;
		}
	}
</style>