gas-cylinder-h5/pages/index/codeTracing.vue

<template>
	<view class="card_code_tracing">
		<u-navbar border title="二维码溯源" autoBack placeholder></u-navbar>
		<view class="card_order_details">
			<view class="details_title">高频编码 <span class="line_title">*</span></view>
			<view class="card_search">
				<view class="card_sweep" @click="sweep">
					<u-icon name="scan" size="36"></u-icon>
					<view class="scan_title">扫一扫</view>
				</view>
				<view class="card_input">
					<u-input border="surround" v-model="frequencyCoding">
						<template slot="suffix">
							<u-icon name="search" size="26" @click="traceSource"></u-icon>
						</template>
					</u-input>
				</view>
			</view>
		</view>
		<view class="card_basic_information" v-if="gasCylinderList.pro_name">
			<view class="headline">基础信息</view>
			<view style="padding: 20rpx;">
				<view class="card_basics" v-for="(item,index) in basicsList" :key="index">
					<view class="basics_title basics_left">{{item.title}}:</view>
					<view class="basics_title1 basics_right"
						v-if="['fill_media','location','status'].includes(item.field)">
						{{initDictvalue(gasCylinderList,item.options,item.field)}}
					</view>
					<view class="basics_title1 basics_right" v-else>{{gasCylinderList[`${item.field}`]}}</view>
				</view>
			</view>
		</view>
		<view class="card_basic_information" v-if="operationLogList.length > 0">
			<view class="headline">物流信息</view>
			<view style="padding: 20rpx;">
				<step-bar :stepList="operationLogList" id="step"></step-bar>
			</view>
		</view>
		<view style="margin-top: 50rpx;" v-if="!gasCylinderList.pro_name && operationLogList.length === 0">
			<u-empty mode="search" text="没有搜索结果"></u-empty>
		</view>
		<view style="width: 100%; height: 50rpx;"></view>
	</view>
</template>

<script>
	import stepBar from '@/components/StepBar.vue'
	import {
		neurogen,
		attribution,
		cylinderCondition
	} from '@/static/js/blockSort.js'
	export default {
		components: {
			stepBar,
		},
		data() {
			return {
				frequencyCoding: '377825938847',
				gasCylinderList: {},
				operationLogList: [],
				basicsList: [{
					title: '设备品种',
					field: 'pro_variety',
				}, {
					title: '产品名称',
					field: 'pro_name',
				}, {
					title: '充装介质',
					field: 'fill_media',
					options: neurogen()
				}, {
					title: '制造单位',
					field: 'make_unit',
				}, {
					title: '下次检验日期',
					field: 'next_check_time',
				}, {
					title: '气瓶使用登记代码',
					field: 'chip_id',
				}, {
					title: '单位内编码',
					field: 'inner_code',
				}, {
					title: '归属地',
					field: 'location',
					options: attribution()
				}, {
					title: '气瓶状态',
					field: 'status',
					options: cylinderCondition()
				}, {
					title: '检测机构',
					field: 'check_organization',
				}, {
					title: '高频编码',
					field: 'uid',
				}, {
					title: '检测结果',
					field: 'result_code',
				}, {
					title: '使用年限',
					field: 'deadline_time',
				}, {
					title: '报废日期',
					field: 'scrap_time',
				}],
			}
		},
		onLoad(option) {
			console.log(option,265)
		},
		methods: {
			// 扫一扫
			sweep() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						// console.log(res);
						if (res.result) {
							let url = res.result;
							this.frequencyCoding = url
							this.traceSource()
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			// 扫码溯源
			traceSource() {
				if (this.frequencyCoding) {
					this.$api.get('/api/gas-cylinder/uid/' + this.frequencyCoding).then(res => {
						console.log(res, 24)
						if (res.code == 200) {
							this.gasCylinderList = res.data.gasCylinder
							this.operationLogList = res.data.operationLog
						}
					})
				} else {
					uni.$u.toast('请先完善信息')
				}
			},
			// 普通类型文字匹配
			initDictvalue(value, list, type) {
				let name = ''
				if (list) {
					list.forEach(item => {
						if (value[type] === item.value) {
							name = item.label
						}
					})
				}
				return name
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card_order_details {
		padding: 30rpx 40rpx 10rpx 40rpx;
		background-color: #fff;
	}

	.details_title {
		color: #333;
		font-size: 34rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.card_search {
		display: flex;
		align-items: center;
		margin: 20rpx 0rpx;
	}

	.scan_title {
		font-size: 20rpx;
	}

	.card_sweep {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: none;
	}

	.card_input {
		width: 100%;
		margin-left: 30rpx;
	}

	.line_title {
		color: red;
	}

	.card_basic_information {
		border-top: 10px solid #f5f5f5;
		padding: 20rpx;
	}

	.headline {
		font-size: 32rpx;
		color: #000;
		padding: 0rpx 10rpx 20rpx 10rpx;
		border-bottom: 1rpx solid #e7e6e4;
	}

	.card_basics {
		width: 100%;
		display: flex;
		margin-bottom: 14rpx;
	}

	.basics_title {
		color: #303133;
		font-size: 30rpx;
	}

	.basics_title1 {
		color: #606266;
		font-size: 30rpx;
	}

	.basics_left {
		width: 38%;
		text-align: right;
		font-size: 28rpx;
		color: #3eacef;
	}

	.basics_right {
		width: 62%;
		text-align: left;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
</style>