jsh_erp_app/pages/goods/detail.vue

<template>
	<view class="detail-page">
		<u-navbar height="40px" :title="navTitle" bgColor="#0256FF" :titleStyle="{color:'#fff'}" leftIconColor="#fff" autoBack
			placeholder>
		</u-navbar>
		<view class="container_main">
			<view class="info-box">
				<view class="info-line">
					<view class="info-line-label">
						<text>货物名称</text>
					</view>
					<view class="info-line-value">
						娃哈哈AD钙
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>货物条码</text>
					</view>
					<view class="info-line-value">
						9787540146481
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>货物图片</text>
					</view>
					<view class="info-line-value ss-p-y-24">
						<u-image src="" width="120rpx" height="120rpx"></u-image>
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>规格</text>
					</view>
					<view class="info-line-value">
						250ml
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>批次号</text>
					</view>
					<view class="info-line-value">
						12345678966
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>生产日期</text>
					</view>
					<view class="info-line-value">
						2025-04-03
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>库存</text>
					</view>
					<view class="info-line-value">
						20瓶
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>库位</text>
					</view>
					<view class="info-line-value">
						A区3-1-1
					</view>
				</view>
				<view class="info-line">
					<view class="info-line-label">
						<text>创建时间</text>
					</view>
					<view class="info-line-value">
						2025-04-03 16:44
					</view>
				</view>
			</view>
			<view class="crk-box" @click="crkShow = true">
				<u-image src="@/static/image/cgrk-icon.png" width="48rpx" height="48rpx"></u-image>
				<view class="crk-msg">
					<view class="crk-msg-name">出入库明细</view>
					<view>查看最近的出入库记录</view>
				</view>
				<u-icon name="arrow-right" color="rgba(173, 181, 189, 0.50)" size="14"></u-icon>
			</view>
		</view>
		<!-- 出入库明细 -->
		<u-popup :show="crkShow" @close="crkShow = false" round="18" closeable :closeOnClickOverlay="false">
			<view class="crk-cont">
				<view class="crk-cont-title">出入库明细</view>
				<view class="crk-cont-tab">
					<view class="tab-item" :class="currentCrkId == item.id ? 'tab-item-active' : ''" v-for="(item,i) in crkList" :key="i" @click="tabClick(item)">
						{{item.name}}
					</view>
				</view>
				<scroll-view scroll-y class="scroll-y">
					<view class="crk-item" v-for="item in 6" :key="item">
						<view class="crk-item-title">娃哈哈AD钙</view>
						<view class="crk-item-line">出库仓库：我的仓库</view>
						<view class="crk-item-line">货物规格：500ml</view>
						<view class="crk-item-line">出库时间：2025-04-03 16:44</view>
						<view class="crk-item-line">出库数量：25件</view>
						<view class="img-box">
							<u-image v-if="currentCrkId == 0" src="@/static/image/yck-img.png" width="132rpx" height="132rpx"></u-image>
							<u-image v-if="currentCrkId == 1" src="@/static/image/yrk-img.png" width="132rpx" height="132rpx"></u-image>
						</view>
					</view>
					<u-divider text="仅展示最近10条记录" :dashed="true"></u-divider>
					<view style="height: 40rpx;"></view>
				</scroll-view>
			
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				navTitle:'哇哈哈AD盖',
				crkShow: false,
				currentCrkId:0,
				crkList:[
					{
						name:'出库',
						id:0
					},
					{
						name:'入库',
						id:1
					}
				]
			}
		},
		methods:{
			tabClick(item) {
				this.currentCrkId = item.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-page {
		min-height: 100vh;
		background-color: #F0F6FB;
		padding: 24rpx;
		.container_main {
			.info-box {
				background-color: #fff;
				border-radius: 16rpx 16rpx 0 0;
				padding: 24rpx;
			
				.info-line {
					border-bottom: 1px solid #F4F4F4;
					min-height: 92rpx;
					color: #333;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					display: flex;
					align-items: center;
			
					&-label {
						width: 162rpx;
					}
			
					.must-box {
						color: #FF3B1D;
					}
				}
			}
			
			.crk-box {
				border-radius: 16rpx;
				background: #FFF;
				padding: 32rpx 24rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				.crk-msg {
					flex: 1;
					margin-left: 24rpx;
					color: #666;
					font-size: 28rpx;
					font-weight: 400;
					.crk-msg-name {
						color: #333;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}
		
		.crk-cont {
			height: 75vh;
			&-title {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #1F1F39;
				font-size: 36rpx;
				font-weight: bold;
			}
			&-tab {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.tab-item {
					width: 160rpx;
					height: 56rpx;
					border-radius: 40rpx;
					border: 1px solid rgba(173, 181, 189, 0.50);
					color: #666;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 56rpx;
					margin-right: 24rpx;
				}
				.tab-item-active {
					background: #0256FF;
					border: 1px solid #0256FF;
					color: #FFF;
				}
			}
			.scroll-y {
				height: calc(75vh - 80rpx - 100rpx);
				padding: 0 24rpx;
				.crk-item {
					border-radius: 16rpx;
					background: #F6F8FA;
					padding: 24rpx;
					font-family: "PingFang SC";
					margin-bottom: 24rpx;
					position: relative;
					&-title {
						color: #000;
						font-size: 28rpx;
						font-weight: 500;
						margin-bottom: 16rpx;
					}
					&-line {
						color: #666;
						font-size: 28rpx;
						font-weight: 400;
						margin-bottom: 8rpx;
					}
				
					.img-box {
						position: absolute;
						top: 24rpx;
						right: 24rpx;
					}
				}
			}
		}
	}
</style>