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

<template>
	<!-- 钢瓶详情 -->
	<view>
		<u-navbar title="钢瓶详情" autoBack placeholder></u-navbar>
		<view>
			<view class="card_quickmark" v-for="(item,index) in list" :key="index">
				<view class="quickmark_title width_quick">{{item.title}} {{cylinderInformation[`${item.key}`]}}</view>
				<!-- <view class="quickmark_title width_quick">{{item.title}}</view>
				<view class="quickmark_title">{{cylinderInformation[`${item.key}`]}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					key: 'inner_code',
					title: '单位内编码:',
				}, {
					key: 'uid',
					title: '高频编码:',
				}, {
					key: 'status',
					title: '钢瓶状态:',
				}, {
					key: 'pro_variety',
					title: '设备品种:',
				}, {
					key: 'pro_name',
					title: '产品名称:',
				}, {
					key: 'pro_no',
					title: '气瓶生产编号:',
				}, {
					key: 'fill_media',
					title: '充装介质:',
				}, {
					key: 'make_unit',
					title: '制造单位:',
				}, {
					key: 'make_time',
					title: '生产日期:',
				}, {
					key: 'work_pressure',
					title: '公称工作压口(MPa):',
				}, {
					key: 'volume',
					title: '容积(L):',
				}, {
					key: 'check_time',
					title: '最近一次检验日期:',
				}, {
					key: 'next_check_time',
					title: '下次检验日期:',
				}, {
					key: 'pro_uuid',
					title: '产品唯一性编码:',
				}],
				cylinderInformation: {},
			}
		},
		onLoad(opent) {
			this.getList(opent.inner_code)
		},
		mounted() {},
		methods: {
			getList(inner_code) {
				this.$api.get('/api/gas-cylinder/' + inner_code).then(res => {
					if(res.code == 200){
						this.cylinderInformation = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.card_quickmark {
		display: inline-flex !important;
		word-break: break-all;
		width: calc(100% - 40rpx);
		margin: 10rpx 20rpx;
	}

	.width_quick {
		flex: none;
	}

	.quickmark_title {
		width: 100%;
		word-wrap: break-word;
		color: #249acc;
		font-size: 30rpx;
		margin-right: 10rpx;
	}
</style>