TuBaoSoft-AP/pages/home/inventoryQuery/inventoryDetails.vue

<template>
	<view>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">提单号：{{item.fMblno}}</text>
				<view class="various" @click="viewDetails(item)">{{item.billTypeName}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>业务日期</view>
				<view>{{item.fBsdate}}</view>
			</view>
			<view class="basic">
				<view>件数</view>
				<view>{{item.fQty}}</view>
			</view>
			<view class="basic">
				<view>毛重</view>
				<view>{{item.fGrossweight}}</view>
			</view>
			<view class="basic">
				<view>净重</view>
				<view>{{item.fNetweight}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="view" @click="viewDetails(item)">
				<view>
					<text>查看详情</text>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				lisi: []
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.item)
			this.$u.get('/warehouse/app/whgenlegDetail', {
				id: this.form.fId
			}).then(res => {
				console.log(res)
				this.lisi = res.data
			})
		},
		methods: {
			viewDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: './detailedAttachment?item=' + JSON.stringify(item)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		padding: 0 20rpx 0 20rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #1669e6;
	}

	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.condition {
		background-color: #1669e6;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>