byte-sailing-storage-android/pages/warehouse/reviewDtl-2.vue

<template>
	<view class="">
		<uni-nav-bar title="退仓复核-详情" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.back()">
				<span style="color: #FFFFFF;">返回</span> 
			</view>
		</uni-nav-bar>
		<ul>
			<li v-for="i in dtlData.checkDetailsInfoList" :key="i.materialId">
				<view class="title">
					物料名称:{{i.materialName}}
				</view>
				<view class="lists">
					<view class="list-box" v-for="(j,jindex) in i.stockBackDetailsList" :key="i.id">
						<view class="col">
							卷{{jindex + 1}}
						</view>
						<view class="col" style="padding: 0 10rpx;">
							{{j.materialMeters}}
						</view style="padding: 0 10rpx;">
						<view class="col" v-if="j.id">
							*{{j.id}}
						</view>
						<view class="col">
							<button>扫描</button>
						</view>
						<view class="col">
							<button>生成</button>
						</view>
					</view>
					<view class="footer-btn-warp" style="margin-top: 20rpx;">
						<button class="cancel" style="color:#333">删除</button>
						<button class="upload" style="color:#333" @click="pushList">修改</button>
					</view>
				</view> 
			</li>
		</ul>
		<view class="footer-btn-warp" style="margin-top: 20rpx;">
			<button class="cancel" style="background-color:red">取消</button>
			<button class="upload" style="background-color:blue" @click="pushList">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				dtlData:{},
			}
		},
		onLoad(option){
			console.log(option)
			this.getDtl(option.id)
		},
		methods:{
			pushList(){},
			getDtl(_id){
				console.log(_id)
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/checkDetails',
					method: 'POST',
					header:{
						'Content-Type' : 'application/json',
					},
					data: {
						stockBackId:_id
					},
					success: res => {
						this.dtlData = res.data.data
						console.log(this.dtlData)
					},
				});
			},
		},
	}
</script>

<style scoped lang="less">
	.footer-btn-warp{
		display: flex;
		padding: 20rpx;
		button{
			width: 48%;
			color: #fff;
		}
	}
	ul{
		padding: 0 20rpx; 
		li{
			background-color: #fff;
			border-radius: 6rpx;
			list-style: none;
			margin-top: 20rpx;
			.title{ 
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				border-bottom: 1px solid #dcdcdc;
				padding: 0 20rpx;
				overflow: hidden;
			}
			.lists{
				.list-box{
					overflow: hidden;
					line-height: 80rpx;
					.col{
						float: left;
						width: 20%;
						text-align: center;
						overflow: hidden;
						
						button{
							width: 80%;
							
						}
					}
				}
			}
		}
	}
</style>