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

<!-- 入库扫码 -->
<template>
	<view class="content">
		<view class="text-area">
			<scan @getCode="getScanCode" />
		</view>
		<view class="stripe"></view>
		<view class="roll">
			<view>
				<view @click="show =! show">
					<u-icon name="edit-pen"></u-icon>手动录入
				</view>
				<view class="lnput" v-if="show==false">
					<input type="text" v-model="number_a" :placeholder="content" clearable="true" />
					<u-button type="primary" size="medium" @click="manualentry">确认录入</u-button>
				</view>
				<view class="" v-else>
					<view>{{tips}}：{{number}}</view>
				</view>
			</view>
			<view>
				<view></view>
				<view></view>
				<view style="width: 94%;height: 20px;background-color: #FFFFFF;margin: 0 auto;margin-top: -3rpx;border-radius: 0;">
					<image src="../../../static/sailun/line.png" style="width: 96%;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" v-for="(item, index) in lisi" :key="index">
						<u-td class="u-td" width="30%">{{item.tireNumber}}</u-td>
						<u-td class="u-td">{{item.maktx}}</u-td>
						<u-td class="u-td" width="15%"><text @click="confirm(index)" style="color: #FA3534;">删除</text></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" shape="circle" @click="scancodein">扫码确认</u-button>
		</view>
		<view>
		</view>
		<u-toast ref="repeat" position="bottom" />
	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				tips: '提示',
				number: '请扫码入库',
				nbTitle: '扫码标题',
				content: '请输入轮胎胎号',
				number_s: '',
				number_a: '',
				lisi: [],
				background: {
					backgroundColor: '#0094fe',
				},
				show: true,
			}
		},
		created() {
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = '../../../static/mp3/startscan.mp3';
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			innerAudioContext.onError((res) => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
		},
		methods: {
			//手动录入调用
			manualentry() {
				request({
						url: '/storeScan/storeScanGetTyre',
						method: 'Post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							userId: this.$store.state.storeInfo.userId,
							tyreNum: this.number_a
						}
					}).then(res => {
						console.log(res.data.code)
						for (let i = 0; i < this.lisi.length; i++) {
							if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
								this.$refs.repeat.show({
									title: '请勿重复录入',
									type: 'default',
									position: 'bottom'
								})
								return
							} else if (res.data.data[0].flagRegular == 1) {
								this.$refs.repeat.show({
									title: '轮胎非正规',
									type: 'default',
									position: 'bottom'
								})
								return
							}
						}
						if (res.data.code == 500) {
							this.$refs.repeat.show({
								title: res.data.msg,
								type: 'default',
								position: 'bottom'
							})
							return
						}

						this.$refs.repeat.show({
							title: '录入成功',
							type: 'success',
							position: 'bottom'
						})
						this.number_a = ""
						console.log("我成功啦")
						console.log(res)
						this.lisi.push({
							specs: res.data.data[0].specs,
							flagRegular: res.data.data[0].isRegular,
							diameter: res.data.data[0].diameter,
							maktx: res.data.data[0].maktx,
							pattern: res.data.data[0].pattern,
							soldToPartyKunnr: res.data.data[0].soldToPartyKunnr,
							matnr: res.data.data[0].matnr,
							tireNumber: res.data.data[0].tirenumber,
							brand: res.data.data[0].brand,
							shippedDate: res.data.data[0].shippedDate,
							scanWay: '0'
						})
						console.log(this.lisi)
					}).catch(err => {
						this.$refs.repeat.show({
							title: "网络连接失败",
							type: 'default',
							position: 'bottom'
						})
						console.log(err)
					})
					.finally(() => {
						// Loading.close()
					})
			},
			//获取扫码控件
			getScanCode(val) {
				console.log(val)
				this.number = val
				this.number_s = val
				request({
						url: '/storeScan/storeScanGetTyre',
						method: 'Post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							userId: this.$store.state.storeInfo.userId,
							tyreNum: this.number_s
						}
					}).then(res => {
						this.tips = "胎号"
						for (let i = 0; i < this.lisi.length; i++) {
							if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
								this.$refs.repeat.show({
									title: '请勿重复扫码',
									type: 'default',
									position: 'bottom'
								})
								this.repeated()
								return
							}
						}
						if (res.data.code == 500) {
							this.$refs.repeat.show({
								title: res.data.msg,
								type: 'default',
								position: 'bottom'
							})
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = '../../../static/mp3/scanfailed.mp3';
							innerAudioContext.onPlay(() => {
								console.log('开始播放');
							});
							innerAudioContext.onError((res) => {
								console.log(res.errMsg);
								console.log(res.errCode);
							});
							return
						}
						this.number_s = ""
						console.log("我成功啦")
						console.log(res)

						this.lisi.push({
							specs: res.data.data[0].specs,
							flagRegular: res.data.data[0].isRegular,
							diameter: res.data.data[0].diameter,
							maktx: res.data.data[0].maktx,
							pattern: res.data.data[0].pattern,
							soldToPartyKunnr: res.data.data[0].soldToPartyKunnr,
							matnr: res.data.data[0].matnr,
							tireNumber: res.data.data[0].tirenumber,
							brand: res.data.data[0].brand,
							shippedDate: res.data.data[0].shippedDate,
							plyRating: res.data.data[0].plyRating,
							scanWay: '1'
						})
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = true;
						innerAudioContext.src = '../../../static/mp3/scansuccess.mp3';
						innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});
						innerAudioContext.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
						});
						this.$refs.repeat.show({
							title: '扫码成功',
							type: 'success',
							position: 'bottom'
						})
						console.log(this.lisi)
					}).catch(err => {
						if (code == 400) {
							this.$refs.repeat.show({
								title: "无网络",
								type: 'default',
								position: 'bottom'
							})
						} else {
							this.$refs.repeat.show({
								title: "请重新扫码",
								type: 'default',
								position: 'bottom'
							})
							this.repeated()
						}
						console.log(err)
					})
					.finally(() => {
						// Loading.close()
					})
			},
			confirm(index) {
				console.log(index + "什么情况")
				this.lisi.splice(index, 1)
			},
			scancodein() {
				if (this.lisi == '') {
					this.$refs.repeat.show({
						title: '请扫码或录入后再点击!',
						type: 'default',
						position: 'bottom'
					})
				} else {
					this.$u.route({
						type: 'redirectTo',
						url: 'pages/home/Scan-code-in/index'
					})
					uni.$emit('update', {
						materialList: this.lisi
					})
					this.lisi = []
				}
			},
			repeated() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../../static/mp3/rescan.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lnput>input {
		background-color: none;
		width: 60%;
		font-size: 42rpx;
		float: left;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.generate {
		width: 98%;
		height: 300rpx;
		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;
		// background-color: #F29100;
		padding-top: 400px;
	}

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

	.stripe {
		width: 740rpx;
		height: 30rpx;
		background-color: #00A0EA;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: -100rpx;
	}

	.text-area {
		width: 100%;
		display: flex;
		background-color: #000000;
		position: static;
		justify-content: center;
		padding-top: 180rpx;
	}

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

	.roll {
		width: 710rpx;
		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: 40rpx;
		height: 40rpx;
		background-color: #F4F4F4;
		border-radius: 100%;
		float: right;
		margin-right: -20rpx;
	}

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

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