sailun-tbr-web/pages/home/scancode/scancodeout.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" throttle-time="2000">确认录入</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()
	var QQMapWX = require('../../../components/mi-map/qqmap-wx-jssdk.min.js')
	var qqmapsdk = new QQMapWX({
		key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
	})
	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: '',
				position: '',
				point: '',
				coord: '',
				address: '',
				addd: ''
			}
		},
		onBackPress(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
				
			})
		},
		created() {
			uni.getNetworkType({
				success: function(res) {
					let none = res.networkType
					
					if (none == 'none') {
						uni.showToast({
							icon: 'none',
							title: '无网络，请连接网络后再试~',
							position: "bottom"
						})
					}
				}
			});
			uni.$on('data', res => {
				this.lisi = res.lisi
				
			})
			//开始扫码
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = '../../../static/mp3/start.mp3';
			innerAudioContext.onPlay(() => {
				
			});
			innerAudioContext.onError((res) => {
				
				
			});
			this.coord = ''
		},
		onShow() {
			this.mounteds()
		},
		methods: {
			mounteds() {
				let that = this
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					geocode: true,
					success: function(res) {
						
						that.tishi(res)
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~'
						})
					}
				})
			},
			async tishi(res) {
				
				let this_ = this
				this_.baidu = res
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success(res) {
						var newCity = ''
						// 取到用户的定位地址，赋值传递出去
						let aress = res.result.address_component.nation + res.result.address_component.province + res.result.address_component
							.city + res.result.formatted_addresses.recommend
						request({
							url: '/baseReq/getBaiDuMapMsg',
							method: 'get',
							params: {
								longitude: this_.baidu.longitude,
								latitude: this_.baidu.latitude
							}
						}).then(res => {
							
							
							if (res.data.code != 0) {
								uni.showToast({
									icon: 'none',
									title: '获取定位失败，请稍后再试~'
								})
							} else {
								this_.baidu = res.data.data.result
								this_.addreev(this_.baidu, aress)
							}
						}).catch(err => {
							
							uni.showToast({
								icon: 'none',
								title: '网络繁忙请稍后再试~'
							})
						}).finally(() => {
							// Loading.close()
						})
					}
				})
			},
			async addreev(res, x) {
				this.address = x
				this.degree = res
				
				
			},
			//手动录入调用
			manualentry() {
				if (this.number_a.length != 0) {
					
					if (this.degree == undefined) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~',
							position: "bottom"
						})
						return
					} else {
						request({
								url: '/storeScan/storeScanGetTyre',
								method: 'Post',
								data: {
									storeId: this.$store.state.storeInfo.storeId,
									userId: this.$store.state.storeInfo.userId,
									tyreNum: this.number_a,
									scanType: 2,
									scanWay: 0,
									longitude: this.degree.x,
									latitude: this.degree.y,
									scanAddress: this.address
								}
							}).then(res => {
								
								if (res.data.code == 513) {
									
									let name = 'regular'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 514) {
									
									let name = 'nonoperating'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 515) {
									
									let name = 'warehousing'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 517) {
									
									let name = 'atypism'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 518) {
									
									let name = 'gobeyond'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 519) {
									
									let name = 'notallow'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 500) {
									
									let name = 'error'
									this.tipss(res, name)
									return
								}
								if (res.data.code == 0) {
									
									this.res = res
									
									for (let i = 0; i < this.lisi.length; i++) {
										if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
											
											let err = {
												"data": {
													"msg": "请勿重复录入",
												}
											}
											
											let name = 'duplicateentry'
											this.tipss(err, name)
											return
										}
									}
									this.container()
								}
								
							}).catch(err => {
								// this.$refs.repeat.show({
								// 	title: "网络繁忙，请稍后再试",
								// 	type: 'default',
								// 	position: 'bottom'
								// })
								
							})
							.finally(() => {
								// Loading.close()
							})
					}
				} else {
					this.$refs.repeat.show({
						title: '请输入胎号',
						type: 'default',
						position: 'bottom'
					})
				}
			},
			tipss(res, name) {
				this.$refs.repeat.show({
					title: res.data.msg,
					type: 'default',
					position: 'bottom'
				})
				//提示语音
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../../static/mp3/' + name + '.mp3';
				innerAudioContext.onPlay(() => {
					
				});
				innerAudioContext.onError((res) => {
					
					
				});
			},
			container() {
				this.$refs.repeat.show({
					title: '录入成功',
					type: 'success',
					position: 'bottom'
				})
				//录入成功语音
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../../static/mp3/entered.mp3';
				innerAudioContext.onPlay(() => {
					
				});
				innerAudioContext.onError((res) => {
					
					
				});
				
				this.show_s = false
				
				this.number_a = ''
				
				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'
				})
				
			},

			//获取扫码控件
			getScanCode(val) {
				uni.getNetworkType({
					success: function(res) {
						let none = res.networkType
						
						if (none == 'none') {
							uni.showToast({
								icon: 'none',
								title: '无网络，请连接网络后再试',
								position: "bottom"
							})
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = '../../../static/mp3/failure.mp3';
							innerAudioContext.onPlay(() => {
								
							});
							innerAudioContext.onError((res) => {
								
								
							});
						}
					}
				});
				
				this.number = val
				this.number_s = val
				if (this.degree == undefined) {
					uni.showToast({
						icon: 'none',
						title: '获取地址失败, 请检查是否开启定位权限~~',
						position: "bottom"
					})
					return
				} else {
					request({
							url: '/storeScan/storeScanGetTyre',
							method: 'Post',
							data: {
								storeId: this.$store.state.storeInfo.storeId,
								userId: this.$store.state.storeInfo.userId,
								tyreNum: val,
								scanType: 2,
								scanWay: 1,
								longitude: this.degree.x,
								latitude: this.degree.y,
								scanAddress: this.address
							}
						}).then(res => {
							this.res_s = res
							this.tips = "胎号"
							if (res.data.code == 513) {
								
								let name = 'regular'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 514) {
								
								let name = 'nonoperating'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 515) {
								
								let name = 'warehousing'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 517) {
								
								let name = 'atypism'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 518) {
								
								let name = 'gobeyond'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 519) {
								
								let name = 'notallow'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 500) {
								
								let name = 'error'
								this.tipss(res, name)
								return
							}
							if (res.data.code == 0) {
								
								this.res = res
								
								for (let i = 0; i < this.lisi.length; i++) {
									if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
										
										let err = {
											"data": {
												"msg": "请勿重复扫码",
											}
										}
										
										let name = 'repeatcode'
										this.tipss(err, name)
										return
									}
								}
								this.container_s()
							}
							// 
						}).catch(err => {
							if (err.code == 400) { //谁给我删了......
								this.$refs.repeat.show({
									title: "无网络",
									type: 'default',
									position: 'bottom'
								})
							} else {
								this.$refs.repeat.show({
									title: "请重新扫码",
									type: 'default',
									position: 'bottom'
								})
								this.repeated()
							}
							
						})
						.finally(() => {
							// Loading.close()
						})
				}
			},
			container_s() {
				this.show_d = false
				
				
				this.number_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'
				})
				
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../../static/mp3/scansuccess.mp3';
				innerAudioContext.onPlay(() => {
					
				});
				innerAudioContext.onError((res) => {
					
					
				});
				this.$refs.repeat.show({
					title: '扫码成功',
					type: 'success',
					position: 'bottom'
				})
			},
			confirm(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-out/index'
					})
					uni.$emit('update', {
						materialList: this.lisi
					})
				}
			},
			repeated() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '../../../static/mp3/rescan.mp3';
				innerAudioContext.onPlay(() => {
					
				});
				innerAudioContext.onError((res) => {
					
					
				});
			}
		}
	}
</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>