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" focus="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" />
		<u-popup mode="bottom" v-model="show_s" :mask-close-able="false" :safe-area-inset-bottom="true">
			<view class="confrim-btn">
				<u-button @click="show_s = false;" style="float: left;border: none;" :hair-line="false" :plain="false">取消</u-button>
				<u-button @click="container" style="float: right;border: none;" :hair-line="false" :plain="false">确定</u-button>
			</view>
			<view class="content_s">
				<scroll-view scroll-y="true" style="height: 200rpx;">
					{{regular}}
				</scroll-view>
			</view>
		</u-popup>
		<u-popup mode="bottom" v-model="show_d" :mask-close-able="false" :safe-area-inset-bottom="true">
			<view class="confrim-btn">
				<u-button @click="show_d = false;" style="float: left;border: none;" :hair-line="false" :plain="false">取消</u-button>
				<u-button @click="container_s" style="float: right;border: none;" :hair-line="false" :plain="false">确定</u-button>
			</view>
			<view class="content_s">
				<scroll-view scroll-y="true" style="height: 200rpx;">
					{{regular}}
				</scroll-view>
			</view>
		</u-popup>
	</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: '',
				regular: '轮胎非正规是否入库',
				lisi: [],
				background: {
					backgroundColor: '#0094fe',
				},
				show: true,
				show_s: false,
				show_d: false,
				res: '',
			}
		},
		onBackPress(options) {
			console.log(options)
			if (options.from == 'backbutton') {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/home/index'
				})
			}
			return true;
		},
		onLaunch() {
			uni.$on('update', data => {
				this.lisi = data.lisi
				console.log(this.lisi)
			})
		},
		created() {
			uni.getNetworkType({
				success: function(res) {
					let none = res.networkType
					console.log(res.networkType);
					if (none == 'none') {
						uni.showToast({
							icon: 'none',
							title: '无网络，请连接网络后再试~',
							position: "bottom"
						})
					}
				}
			});
			uni.$on('data', res => {
				this.lisi = res.lisi
				console.log(res.lisi)
			})
			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)
						if (res.data.code == 500) {
							this.$refs.repeat.show({
								title: '请扫描或输入正确的胎号',
								type: 'default',
								position: 'bottom'
							})
							return
						}
						this.res = res
						console.log(res.data.data[0].isRegular)
						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
							}
						}
						if (res.data.data[0].isRegular == 1) {
							console.log(res.data.data[0].isRegular)
							// this.$refs.repeat.show({
							// 	title: '轮胎非正规',
							// 	type: 'default',
							// 	position: 'bottom'
							// })
							this.show_s = true
							return
						}
						this.container()
						console.log(this.lisi)
					}).catch(err => {
						this.$refs.repeat.show({
							title: "无网络，请连接网络后再试~",
							type: 'default',
							position: 'bottom'
						})
						console.log(err)
					})
					.finally(() => {
						// Loading.close()
					})
			},
			container() {
				this.$refs.repeat.show({
					title: '录入成功',
					type: 'success',
					position: 'bottom'
				})
				console.log(this.res.data.data[0].specs)
				this.show_s = false
				console.log(this.show_s)
				this.number_a = ''
				console.log("我成功啦.")
				this.lisi.push({
					specs: this.res.data.data[0].specs,
					flagRegular: this.res.data.data[0].isRegular,
					diameter: this.res.data.data[0].diameter,
					maktx: this.res.data.data[0].maktx,
					pattern: this.res.data.data[0].pattern,
					soldToPartyKunnr: this.res.data.data[0].soldToPartyKunnr,
					matnr: this.res.data.data[0].matnr,
					tireNumber: this.res.data.data[0].tirenumber,
					brand: this.res.data.data[0].brand,
					shippedDate: this.res.data.data[0].shippedDate,
					plyRating: this.res.data.data[0].plyRating,
					scanWay: '0'
				})
				console.log(this.lisi)
			},
			//获取扫码控件
			getScanCode(val) {
				uni.getNetworkType({
					success: function(res) {
						let none = res.networkType
						console.log(res.networkType);
						if (none == 'none') {
							uni.showToast({
								icon: 'none',
								title: '无网络，请连接网络后再试~',
								position: "bottom"
							})
						}
					}
				});
				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.res_s = 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: '请扫描或输入正确的胎号',
								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
						}
						if (res.data.data[0].isRegular == 1) {
							console.log(res.data.data[0].isRegular)
							// this.$refs.repeat.show({
							// 	title: '轮胎非正规',
							// 	type: 'default',
							// 	position: 'bottom'
							// })
							this.show_d = true
							return
						}
						this.container_s()
						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()
					})
			},
			container_s() {
				this.show_d = false
				console.log(this.show_s)
				console.log("什么？？？？")
				this.number_s = ''
				console.log("我成功啦")
				console.log(this.res_s)

				this.lisi.push({
					specs: this.res_s.data.data[0].specs,
					flagRegular: this.res_s.data.data[0].isRegular,
					diameter: this.res_s.data.data[0].diameter,
					maktx: this.res_s.data.data[0].maktx,
					pattern: this.res_s.data.data[0].pattern,
					soldToPartyKunnr: this.res_s.data.data[0].soldToPartyKunnr,
					matnr: this.res_s.data.data[0].matnr,
					tireNumber: this.res_s.data.data[0].tirenumber,
					brand: this.res_s.data.data[0].brand,
					shippedDate: this.res_s.data.data[0].shippedDate,
					plyRating: this.res_s.data.data[0].plyRating,
					scanWay: '1'
				})
				console.log(this.lisi)
				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'
				})
			},
			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
					})
				}
			},
			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;
	}

	.content_s {
		padding: 24rpx;
		text-align: center;
	}

	.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>