delivery-depot-uniapp/pages/beixWarehouse/components/warehouseInfo/warehouseInfo - 副本.vue

<template>

<view class="content">
	<view class="base-info-box">
		<view class="info-tit">库区信息</view>
		<view class="base-info-content">
			<view class="info-item">
				<text class="label">库区名称:</text>
				<text class="value">{{warehouseData.name}}</text>
			</view>
			<view class="info-item">
				<text class="label">所属企业:</text>
				<text class="value">天津利达粮油有限公司</text>
			</view>
			<view class="info-item">
				<text class="label">统一社会信用代码:</text>
				<text class="value">522516416985</text>
			</view>
			<view class="info-item">
				<text class="label">库区性质:</text>
				<text class="value">民营企业</text>
			</view>
			<view v-show="direction === 1">
				<view class="info-item">
					<text class="label">库区地址:</text>
					<text class="value">天津市静海区</text>
				</view>
				<view class="info-item">
					<text class="label">库区负责人:</text>
					<text class="value">张三</text>
				</view>
				<view class="info-item">
					<text class="label">库区联系方式:</text>
					<text class="value">15139959459</text>
				</view>
				<view class="info-item">
					<text class="label">占地面积(m²):</text>
					<text class="value">15000</text>
				</view>
				<view class="info-item">
					<text class="label">经度:</text>
					<text class="value">43.2</text>
				</view>
				<view class="info-item">
					<text class="label">纬度:</text>
					<text class="value">25.5</text>
				</view>
				<view class="info-item">
					<text class="label">库区图:</text>
					<image class="kqt-image" src="@/static/tp.png"></image>
				</view>
			</view>
			<view class="switchButton" @click="switchBtn()">
				{{ buttonText }}
				<uni-icons custom-prefix="iconfont" :type="iconType" color="#1E5EDD" size="16"></uni-icons>
			</view>
		</view>
	</view>
	<view class="base-info-box">
		<view class="info-tit">财务信息</view>
		<view class="base-info-content">
			<view class="info-item">
				<text class="label">是否国有及国有投资:</text>
				<uni-data-checkbox v-model="warehouseData.ifTz" :localdata="ifTzList" />
			</view>
			<view class="info-item">
				<text class="label">上一年总资产（万元）:</text>
				<text class="value">100</text>
			</view>
			<view class="info-item">
				<text class="label">股东:</text>
				<text class="value">522516416985</text>
			</view>
			<view class="info-item">
				<text class="label">2024年营业收入（万元）:</text>
				<text class="value">100</text>
			</view>
			<view class="info-item">
				<text class="label">2024年净利润（万元）:</text>
				<text class="value">100</text>
			</view>
			<view class="info-item">
				<text class="label">2024年总负债（万元）:</text>
				<text class="value">100</text>
			</view>
			<view v-show="direction1 === 1">
				<view class="info-item">
					<text class="label">2023年营业收入（万元）:</text>
					<text class="value">100</text>
				</view>
				<view class="info-item">
					<text class="label">2023年净利润（万元）:</text>
					<text class="value">100</text>
				</view>
				<view class="info-item">
					<text class="label">2023年总负债（万元）:</text>
					<text class="value">100</text>
				</view>
				<view class="info-item">
					<text class="label">2022年营业收入（万元）:</text>
					<text class="value">100</text>
				</view>
				<view class="info-item">
					<text class="label">2022年净利润（万元）:</text>
					<text class="value">100</text>
				</view>
				<view class="info-item">
					<text class="label">2022年总负债（万元）:</text>
					<text class="value">100</text>
				</view>
			</view>
			<view class="switchButton" @click="switchBtn1()">
				{{ buttonText1 }}
				<uni-icons custom-prefix="iconfont" :type="iconType1" color="#1E5EDD" size="16"></uni-icons>
			</view>
		</view>
	</view>
</view>

</template>

<script setup>
	import { ref, computed } from 'vue';

	// 示例数据
	const warehouseData = {
		name: '天津利达粮油库区',
		ifTz: 0,
		creditCode: '522516416985',
		nature: '民营企业',
		address: '天津市静海区',
		contactPerson: '张三',
		contactNumber: '15139959459',
		area: '15000',
		longitude: '43.2',
		latitude: '25.5'
	};
	const ifTzList = ref([
	  { text: '是', value: 0 },
	  { text: '否', value: 1 }
	]);
	
	const direction = ref(0);
	
	// 计算属性用于动态生成按钮文本和图标类型
	const buttonText = computed(() => (direction.value === 0 ? '展开全部' : '收起'));
	const iconType = computed(() => (direction.value === 0 ? 'icon-down' : 'icon-up'));
	
	
	const switchBtn = () => {
	  // 切换方向值
	  direction.value = direction.value === 0 ? 1 : 0;
	};
	
	const direction1 = ref(0);
	
	// 计算属性用于动态生成按钮文本和图标类型
	const buttonText1 = computed(() => (direction1.value === 0 ? '展开全部' : '收起'));
	const iconType1 = computed(() => (direction1.value === 0 ? 'icon-down' : 'icon-up'));
	
	
	const switchBtn1 = () => {
	  // 切换方向值
	  direction1.value = direction1.value === 0 ? 1 : 0;
	};
	
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.title {
		font-size: 36rpx;
		margin-left: 20rpx;
	}

	.content {
		flex: 1;
		padding: 20rpx;
	}
	
	.info-tit{
		color: #1E5EDD;
		text-align: center;
		font-size: 44rpx;
		background: linear-gradient(to bottom, #FFFFFF, #E5F0FC);
		transition: background 0.3s ease;
		font-weight: bold;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;
	}
	
	.base-info-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.base-info-content{
		padding: 0px 20rpx 40rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e9ed;

		.kqt-image {
			max-width: 50%;
			height: 200rpx;
		}
	}

	.info-item:last-child {
		border: 0 none;
	}

	.label {
		font-weight: bold;
		color: #777777;
	}

	.value {
		flex: 1;
		text-align: right;
		color: #0f2239;
		font-weight: 600;
	}

	.image {
		width: 200rpx;
		height: 200rpx;
	}
	.switchButton{
		border: 0 none;
		height: 90rpx;
		line-height: 90rpx;
		background: #DFECFC;
		color: #1E5EDD;
		margin: 30rpx 0 0;
		text-align: center;
		border-radius: 15rpx;
	}
</style>
<style lang="scss">
	.info-item{
		radio-group label{
			padding-right: 0;
			padding-left: 20rpx;
			margin-right: 0 !important;
			margin-left: 20rpx !important;
		}
	}
</style>