FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/cylinderDetails.vue

<!-- 气瓶详情 -->
<template>
	<view id="gasCylinderDetails">
		<view class="text-max-big-box">
			<view class="for-title-box">
				<view>气瓶状态：</view>
				<view :class="newData.data7==1?'colorA':'colorB'">{{newData.data7==1?'已入库':'已出库'}}</view>
			</view>
		</view>
		<view class="title-p" v-if="newData.data7 == 1">气瓶信息</view>
		<view class="text-max-big-box">
			<view class="for-text-box" v-if="newData.data6 == 1">
				<view>气瓶编码：</view>
				<view>{{newData.data1}}</view>
			</view>
			<view class="for-text-box">
				<view>气体：</view>
				<view>{{newData.data2}}</view>
			</view>
			<view class="for-text-box">
				<view>气瓶规格：</view>
				<view>{{newData.data3}}</view>
			</view>
			<view class="for-text-box">
				<view>气体类别：</view>
				<view>{{newData.data4}}</view>
			</view>
			<view class="for-text-box">
				<view>纯度：</view>
				<view>{{newData.data5}}</view>
			</view>
			<view class="for-text-box" v-if="newData.data6 == 1">
				<view>压力：</view>
				<view>{{newData.data8}}</view>
			</view>
			<view class="for-text-box" v-if="newData.data7 == 2">
				<view>实验室名称：</view>
				<view>{{newData.data9}}</view>
			</view>
			<view class="for-text-box" v-if="newData.data7 == 2">
				<view>楼栋：</view>
				<view>{{newData.data10}}</view>
			</view>
			<view class="for-text-box" v-if="newData.data7 == 2">
				<view>楼层：</view>
				<view>{{newData.data11}}</view>
			</view>
			<view class="for-text-box" v-if="newData.data7 == 2">
				<view>房间：</view>
				<view>{{newData.data12}}</view>
			</view>
		</view>
		<view class="title-p" v-if="newData.data7 == 1">实验室信息</view>
		<view class="text-max-big-box" v-if="newData.data7 == 1">
			<view class="for-text-box">
				<view>实验室名称：</view>
				<view>{{newData.data9}}</view>
			</view>
			<view class="for-text-box">
				<view>楼栋：</view>
				<view>{{newData.data10}}</view>
			</view>
			<view class="for-text-box">
				<view>楼层：</view>
				<view>{{newData.data11}}</view>
			</view>
			<view class="for-text-box">
				<view>房间：</view>
				<view>{{newData.data12}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.data7 == 1">
			<view class="for-text-box">
				<view>签收人：</view>
				<view>{{newData.data13}}</view>
			</view>
		</view>
		<view class="text-max-big-box">
			<view class="for-border-box" v-if="newData.data7 == 2">
				<view>出库类型：</view>
				<view>{{newData.data14==1?'空瓶出库':'满瓶出库'}}</view>
			</view>
			<view class="for-text-box">
				<view>费用：</view>
				<view>{{newData.data15}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.data7 == 2">
			<view class="for-text-box">
				<view>签出人：</view>
				<view>{{newData.data21}}</view>
			</view>
		</view>
		<view class="text-max-big-box">
			<view class="for-img-box">
				<view>{{newData.data7==1?'入库单':'出库单'}}：</view>
				<img class="img-box" @click="previewSingleImage(baseUrl+item)" :src="baseUrl+newData.data16">
			</view>
			<view class="for-text-box">
				<view>{{newData.data7==1?'入库时间':'出库时间'}}：</view>
				<view>{{newData.data17}}</view>
			</view>
			<view class="for-text-box">
				<view>{{newData.data7==1?'入库人':'出库人'}}：</view>
				<view>{{newData.data18}}</view>
			</view>
			<view class="for-text-box">
				<view>联系电话</view>
				<view>{{newData.data19}}</view>
			</view>
		</view>
		<view class="text-max-big-box">
			<view class="for-text-one-box">
				<view>备注：</view>
				<view>{{newData.data20}}</view>
			</view>
		</view>
		<view v-if="newData.data7 == 1" class="bottom-button-box">
			<view @click="submitButton()">撤回入库</view>
			<view @click="goPage()">气瓶出库</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				newData: {
					data1: '1231315',
					data2: '氢气',
					data3: '8L',
					data4: '易燃气体',
					data5: '99%',
					data6: '1',
					data7: '1',
					data8: '15Mpa',
					data9: '实验室-11',
					data10: '名义楼',
					data11: '10层',
					data12: '302',
					data13: '张签收',
					data14: '1',
					data15: '5000',
					data16: 'statics/2026/08/24/b8877900-a4b7-44c3-949c-3d652d54063f.jpg',
					data17: '2022-0202 16:42',
					data18: '张出库',
					data19: '13333333333',
					data20: '我是备注信息,我是备注信息,我是备注信息,我是备注信息,我是备注信息,我是备注信息',
					data21: '张签出',
				}
			}
		},
		onLoad(options) {
			console.log(options.id)
		},
		onShow() {

		},

		methods: {
			//气瓶出库
			goPage(){
				let obj = {
					
				}
				uni.navigateTo({
					url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound?form='+encodeURIComponent(JSON.stringify(obj))+'&pageType=3'
				});
			},
			//撤回入库
			submitButton(){
				uni.showModal({
					title: '撤回入库',
					content: '撤回后，该气体气瓶的当前状态将被强制回退至待入库。',
					showCancel: true, 
					cancelText: '关闭',
					confirmText: '确认撤回',
					confirmColor:'#FF0000',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title:'入库完成',
								icon:"success",
								mask:true,
								duration: 2000
							});
							setTimeout(function(){
								uni.navigateBack();
							},2000);
						}
					}
				});
			},
			//预览图片
			previewSingleImage(imageUrl) {
				uni.previewImage({
					urls: [imageUrl] // 必须包裹成数组
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderDetails {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;
		overflow-y: scroll;

		.title-p{
			margin: 25rpx 25rpx 0 50rpx;
			font-size:28rpx;
		}
		.text-max-big-box {
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 25rpx 25rpx 0;

			.for-title-box {
				display: flex;
				view {
					line-height: 60rpx ;
					font-weight: 700;
				}

				view:nth-child(1) {}

				view:nth-child(2) {
					flex: 1;
					text-align: right;
				}

				.colorA {
					color: #FF6B00;
				}

				.colorB {
					color: #0075FF;
				}
			}
			.for-text-box{
				display: flex;
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				view:nth-child(1){
				}
				view:nth-child(2){
					flex:1;
					text-align: right;
				}
			}
			.for-border-box{
				
			}
			.for-img-box{
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				.img-box{
					width:160rpx;
					height:160rpx;
					border-radius:12rpx;
					margin:15rpx 0;
				}
			}
			.for-text-one-box{
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				view:nth-child(1){
				}
				view:nth-child(2){
					padding:10rpx 0 20rpx;
					font-size:24rpx;
					line-height:30rpx;
				}
			}
		}
		.bottom-button-box{
			display: flex;
			margin:40rpx 30rpx 60rpx;
			view:nth-child(1){
				border:1rpx solid #0183FA;
				color:#0183FA;
				text-align: center;
				border-radius:12rpx;
				line-height:80rpx;
				width:200rpx;
			}
			view:nth-child(2){
				margin-left:30rpx;
				border:1rpx solid #0183FA;
				color:#fff;
				background-color: #0183fa;
				text-align: center;
				border-radius:12rpx;
				line-height:80rpx;
				flex:1;
			}
		}
	}
</style>