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

<template>
	<view class="card_code_tracing">
		<view class="details_title">二维码溯源</view>
		<view class="details_title1">钢瓶编号 <span class="line_title">*</span></view>
		<view class="card_search">
			<view class="card_input">
				<u-search :showAction="true" v-model="frequencyCoding" actionText="搜索" :animation="true"
					@custom="traceSource(frequencyCoding)"></u-search>
				<!-- <u-input border="surround" v-model="frequencyCoding"></u-input> -->
			</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: 200rpx;"></view>
		<view class="card_Booking center_in" @click="goBooking">订气</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: '',
				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) {
			if (option.code) {
				this.frequencyCoding = option.code
				this.traceSource(option.code)
			}
		},
		methods: {
			// 扫码溯源
			traceSource(code) {
				if (code) {
					this.$api.get('/api/gas-cylinder/uid/' + code).then(res => {
						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
			},
			// 去订气
			goBooking() {
				uni.redirectTo({
					url: '/pages/indexRouter'
				})
			}
		}
	}
</script>

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

	.details_title {
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color: #333;
		font-size: 34rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

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

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

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

	.line_title {
		color: red;
	}

	.card_basic_information {
		border-top: 6px 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;
	}

	.card_Booking {
		position: fixed;
		bottom: 50rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #fff;
		background-color: #5ac725;
		box-shadow: 0 2px 12px 0 rgba(90, 199, 37, 0.5)
	}
</style>