gas-cylinder-app/pages/order/quickMark.vue

<template>
	<!-- 添加钢瓶扫描二维码 -->
	<view>
		<u-navbar :title="navTitle" autoBack placeholder></u-navbar>
		<view class="card_head_mark">
			<view class="card_sys" @click="sweep()">
				<u-icon name="scan" size="60" color="#18b566"></u-icon>
				<view class="sys_title">扫一扫</view>
			</view>
		</view>
		<view style="margin-top: 30rpx;" v-if="cylinderInformation.inner_code">
			<view class="card_quickmark" v-for="(item,index) in list" :key="index">
				<view class="quickmark_title width_quick">{{item.title}}</view>
				<view class="quickmark_title">{{cylinderInformation[`${item.key}`]}}</view>
			</view>
		</view>
		<view style="margin-top: 30rpx;" v-else>
			<u-empty mode="data" text="请先扫描钢瓶二维码"></u-empty>
		</view>
		<view class="card_btn">
			<u-button style="margin-bottom: 20rpx;" type="primary" @click="submit">添加钢瓶</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '',
				selectiveType: '',
				list: [{
					key: 'inner_code',
					title: '单位内编码:',
				}, {
					key: 'status',
					title: '气瓶状态:',
				}, {
					key: 'enterprise_name',
					title: '上次充装气站:',
				}, {
					key: 'fill_time',
					title: '上次充装时间:',
				}, {
					key: 'register_supervise_name',
					title: '使用登记审批单位:',
				}, {
					key: 'register_time',
					title: '使用登记日期:',
				}],
				cylinderInformation: {},
			}
		},
		onLoad(receive) {
			this.navTitle = receive.title
			this.selectiveType = receive.id
		},
		methods: {
			getList(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) {
							this.cylinderInformation = res.data.data
							uni.hideLoading();
						}
					}
				});
			},
			// 扫一扫
			sweep() {
				// const arr = 'http://qr.uinshine.com:9000/page/qrProduct.html?qr_id=1892e17a-1cfc-45c6-964e-41d1f1b9e42d'
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ['qrCode'],
					autoZoom: false,
					success: (res) => {
						// console.log(res, '--------');
						if (res.result) {
							let url = res.result;
							const arrf = url.split('=')
							this.getList(arrf[1])
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码1');
					}
				})
			},
			// 添加钢瓶
			submit() {
				if (this.cylinderInformation.inner_code) {
					this.$api.post('/api/gas-cylinder', {
						...this.cylinderInformation,
					}).then(res => {
						if (res.code == 200) {
							this.cylinderInformation = {}
							uni.$u.toast('添加成功')
						}
					})
				} else {
					uni.$u.toast('请先扫描钢瓶二维码')
				}
			}
		}
	}
</script>

<style lang="scss">
	.card_head_mark {
		display: flex;
		justify-content: center;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #e4e7ed;
	}

	.card_sys {
		cursor: pointer;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		background-color: #f4f4f5;
	}

	.sys_title {
		font-size: 32rpx;
		color: #18b566;
	}

	.card_quickmark {
		display: inline-flex !important;
		word-break: break-all;
		width: calc(100% - 40rpx);
		margin: 10rpx 20rpx;
	}

	.width_quick {
		flex: none;
	}

	.quickmark_title {
		color: #249acc;
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.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
	}
</style>