gas-cylinder-app/pages/information/cylinder.vue

<template>
	<!-- 添加钢瓶 -->
	<view>
		<u-navbar :title="cylinderTitle" autoBack placeholder @leftClick="leftClick"></u-navbar>
		<view class="card_cylinder">
			<view class="title_index">单位内编号 <span class="line_title">*</span></view>
			<view style="display: flex;align-items: center;">
				<input class="card_top_input" ref="inputRef" placeholder="点击输入" v-model="frequencyCoding"
					:focus="firstFocus" @blur="blurInput"></input>
				<view class="btn_add_card">
					<u-button type="primary" text="添加" @click="addCode"></u-button>
				</view>
			</view>
			<view class="scan_card_code">
				<view style="display: flex;align-items: center;">
					<view style="display: flex;align-items: center;" @click="addLine">
						<u-icon name="scan" size="26"></u-icon>
						<view class="title_subhead">增加一条</view>
					</view>
					<view style="display: flex;align-items: center;margin-left: 30rpx;" @click="continuousAddition">
						<u-icon name="scan" size="26"></u-icon>
						<view class="title_subhead">连续扫码增加</view>
					</view>
				</view>
				<view class="card_bottle">已扫<span>{{codeList.length}}</span>瓶</view>
			</view>
			<view v-if="codeList.length > 0">
				<view class="space_between card_code_trac" v-for="(item,index) in codeList" :key="index">
					<view style="display: flex;align-items: center;">
						<view class="item_current">{{index + 1}}</view>
						<view class="item_title1">{{item}}</view>
					</view>
					<view class="item_title1 title_red" @click="delCode(index)">删除</view>
				</view>
			</view>
			<view style="margin-top: 20%;" v-else>
				<u-empty mode="list" text="请先扫描添加单位内编号"></u-empty>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="card_btn">
			<u-button style="margin-bottom: 20rpx;" type="primary" @click="submit">提交</u-button>
		</view>
		<u-popup :show="show" :round="10" :closeOnClickOverlay="false" mode="center" @close="close">
			<view class="card_coding_scan">
				<view class="title_coding">单位内编号</view>
				<view class="coding_title1">{{scanCoding}}</view>
				<view style="display: flex;align-items: center;">
					<u-icon color="#19be6b" size="30" name="checkmark-circle-fill"></u-icon>
					<view class="success_title">扫描成功</view>
				</view>
				<view class="title_coding">3秒后再次扫描</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				frequencyCoding: '',
				codeList: [],
				scanType: 1,
				show: false,
				scanCoding: '',
				bottleType: 1,
				cylinderTitle: '添加钢瓶',
				firstFocus: false,
				gradatimFlag: true,
				continuous: null,
				clearTime: null,
			}
		},
		onLoad(value) {
			this.bottleType = value.status
			this.cylinderTitle = value.title
		},
		methods: {
			// 返回
			leftClick() {
				uni.$emit('refresh');
			},
			// 添加钢瓶
			submit() {
				let arrList = []
				if (this.codeList.length == 0) {
					if (!this.frequencyCoding) {
						return uni.$u.toast('请先输入单位内编号')
					} else {
						arrList.push(this.frequencyCoding)
					}
				} else {
					arrList = this.codeList
				}
				this.$api.post('/api/gas-cylinder-status', {
					status: this.bottleType,
					innerCodeList: arrList
				}).then(res => {
					if (res.code == 200) {
						this.codeList = []
						this.frequencyCoding = ''
						uni.$u.toast(res.msg)
					} else {
						uni.$u.toast(res.data.msg)
					}
				})
			},
			// 删除录入钢瓶编号
			delCode(index) {
				this.codeList.splice(index, 1);
			},
			// 添加一条
			addLine() {
				this.scanType = 1
				this.sweep()
			},
			// 连续添加
			continuousAddition() {
				this.scanType = 2
				this.sweep()
			},
			// 扫一扫
			sweep() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ['qrCode'],
					autoZoom: false,
					success: (res) => {
						console.log(res, '--------');
						if (res.result) {
							let url = res.result;
							const arrf = url.split('=')
							this.unitCoding(arrf[1])
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码1');
					}
				})
			},
			// 单位内编码获取
			unitCoding(qrid) {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: 'http://qr.uinshine.com:9000/CommonAPI/product/getDetails', //仅为示例，并非真实接口地址。
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded', // 默认值
					},
					data: {
						qr_id: qrid,
					},
					success: (res) => {
						if (res.data.code == 0) {
							var arr = res.data.data
							if (this.scanType == 1) {
								if (this.gradatimFlag) {
									this.gradatimFlag = false
									this.fetchCylinder(arr.inner_code)
								}
								// this.codeList.push(arr.inner_code)
								// this.codeList = Array.from(new Set(this.codeList));
							} else {
								if (this.gradatimFlag) {
									this.gradatimFlag = false
									this.fetchCylinder(arr.inner_code, true)
								}
								// this.show = true
								// this.codeList.push(arr.inner_code)
								// this.codeList = Array.from(new Set(this.codeList));
								// this.scanCoding = arr.inner_code
								// 扫码间隔两秒
								// setTimeout(() => {
								// 	this.sweep()
								// 	this.show = false
								// }, 3000)
							}
						}
						uni.hideLoading();
					}
				});
			},
			// 输入钢瓶编号添加
			addCode() {
				const cnflag = hasChinese(this.frequencyCoding)
				if (cnflag) {
					uni.$u.toast('请输入正确单位内编号')
				} else {
					if (this.frequencyCoding) {
						if (this.gradatimFlag) {
							this.gradatimFlag = false
							this.fetchCylinder(this.frequencyCoding)
						}
					} else {
						uni.$u.toast('请先输入单位内编号')
					}
				}

				function hasChinese(text) {
					var pattern = /[\u4E00-\u9FA5]/; // Unicode编码范围包含中文字符
					return pattern.test(text);
				}
			},
			// 失去焦点
			blurInput(event, flag) {
				let arrEvent = event.detail.value
				this.firstFocus = false;
				const cnflag = hasChinese(arrEvent)
				if (cnflag) {
					uni.$u.toast('请输入正确单位内编号')
				} else {
					if (this.gradatimFlag && arrEvent) {
						if (this.clearTime) clearTimeout(this.clearTime)
						this.gradatimFlag = false
						this.fetchCylinder(arrEvent)
					}
				}

				function hasChinese(text) {
					var pattern = /[\u4E00-\u9FA5]/; // Unicode编码范围包含中文字符
					return pattern.test(text);
				}
			},
			fetchCylinder(event, flag) {
				this.$api.get('/api/gas-cylinder/' + event).then(res => {
					if (res.code == 200) {
						this.codeList.push(res.data.inner_code)
						this.codeList = Array.from(new Set(this.codeList));
						if (flag) {
							if (this.arrTime) clearTimeout(this.arrTime)
							this.show = true
							this.scanCoding = res.data.inner_code
							// 扫码间隔两秒
							this.arrTime = setTimeout(() => {
								this.show = false
								this.sweep()
							}, 3000)
							this.gradatimFlag = true
							return
						}
						this.clearTime = setTimeout(async () => {
							this.frequencyCoding = ''
							this.firstFocus = true;
						}, 100)
					} else if (res.data.code == 400) {
						this.clearTime = setTimeout(async () => {
							this.frequencyCoding = ''
						}, 100)
						uni.$u.toast(res.data.msg)
					}
					this.gradatimFlag = true
				})
			},
			// 弹窗关闭
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.title_index {
		margin-bottom: 10rpx;
		font-size: 34rpx;
	}

	.line_title {
		color: red;
	}

	.btn_add_card {
		margin-left: 20rpx;
	}

	.card_cylinder {
		padding: 30rpx;
	}

	.title_subhead {
		margin-left: 6rpx;
		font-size: 34rpx;
		font-weight: 600;
	}

	.scan_card_code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e4e7ed;
	}

	.card_bottle {
		font-size: 30rpx;

		span {
			margin: 0rpx 5rpx;
			color: red;
		}
	}

	.card_code_trac {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e4e7ed;
	}

	.item_current {
		width: 40rpx;
		color: #82848a;
	}

	.item_title1 {
		margin-left: 10rpx;
	}

	.title_red {
		color: #fa3534;
	}

	.card_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}

	.card_coding_scan {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 400rpx;
		padding: 30rpx;
	}

	.title_coding {
		font-size: 32rpx;
		margin: 20rpx;
	}

	.success_title {
		font-size: 40rpx;
		margin-left: 10rpx;
	}

	.coding_title1 {
		font-size: 60rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
	}

	.card_top_input {
		width: 100%;
		font-size: 14px;
		color: #303133;
		padding: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #dadbde;
	}
</style>