zhgdyunapp_vue3/pages/projectEnd/smartBeamField/beamList.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				梁列表
				<view class="headerBack" @click="returnBack">
					<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
				</view>
			</view>
		</headers>
		<view class="list-search">
			<u-search v-model="beamNumSearch" input-align="left" height="70" :action-style="searchStyle"
				@custom="searchBeamSection" placeholder="搜索梁号名称"></u-search>
		</view>
		<view class="plan-list">
			<view class="list-item" v-for="item in planList" :key="item.id" @click="toMakeBeamProgress">
				<view class="item-detail">
					<view class="text-title">
						梁号：
					</view>
					<view class="text-detail">
						{{ item.beamNo }}
					</view>
				</view>
				<view class="item-detail">
					<view class="text-title">
						所属桥段:
					</view>
					<view class="text-detail">
						{{ item.bridgeSectionName }}
					</view>
				</view>
				<view class="item-detail">
					<view class="text-title">
						梁板类型:
					</view>
					<view class="text-detail">
						{{ item.beamAndPlateType }}
					</view>
				</view>
				<view class="open-detail">
					查看详情
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beamSectionId: "", // 桥段ID
				beamNumSearch: "",
				searchStyle: {
					position: "absolute",
					display: "flex",
					alignItems: "center",
					justifyContent: "center",
					right: "13%",
					width: "90rpx",
					height: "40rpx",
					color: "#fff",
					fontSize: "23rpx",
					background: "#5181F6",
					borderRadius: "70rpx 70rpx 70rpx 70rpx",
				},
				planList: [],
				saveBeamList: [],
				makeBeamList: [],
				projectDetail: {},
			};
		},
		onLoad(e) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			if (e) {
				console.log("跳转携带参数",e)
				this.beamSectionId = e.detailId
			}
			this.getSectionList()
		},
		methods: {
			toMakeBeamProgress() {
				uni.navigateTo({
					url: "/pages/projectEnd/smartBeamField/makeBeamProgressDetail"
				})
			},
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			searchBeamSection(e) {
				console.log("搜索梁号", e)
			},
			//获取计划列表
			getSectionList() {
				this.sendRequest({
					url: "xmgl/smartBeamFieldBeam/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						beamNo: this.beamNumSearch,
						smartBeamFieldBridgeSectionId: this.beamSectionId
					},
					method: "get",
					success: res => {
						console.log("获取梁列表", res, this.planList)
						this.planList = res.result
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.list-search {
		padding: 0 40rpx;
		margin-top: 30rpx;
	}

	.plan-list {
		.list-item {
			width: 688rpx;
			height: 240rpx;
			padding: 0rpx 22rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 0 19rpx 0px #E6E6E6;
			border-radius: 19rpx;
			position: relative;

			.item-detail {
				display: flex;
				padding-top: 30rpx;
				.text-title {
					width: 150rpx;
					font-size: 27rpx;
					font-family: Advent Pro, Advent Pro;
					color: #8C8C8C;
				}

				.text-detail {
					font-size: 27rpx;
					font-family: Advent Pro, Advent Pro;
					color: #595959;
				}
			}

			.diliver-line {
				margin-top: 20rpx;
				border-bottom: 4rpx solid #E7E7E7;
			}

			.item-tool {
				display: flex;
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;

				.edit-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 77rpx;
					height: 40rpx;
					cursor: pointer;
					color: #5680FA;
					font-size: 20rpx;
					background: rgba(86, 128, 250, 0.1);
					border-radius: 8rpx;
				}

				.delete-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 77rpx;
					height: 40rpx;
					cursor: pointer;
					color: #EA3941;
					font-size: 20rpx;
					margin-left: 24rpx;
					background: rgba(234, 57, 65, 0.1);
					border-radius: 8rpx;
				}
			}

			.item-state {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 110rpx;
				height: 40rpx;
				font-size: 20rpx;
				color: #F09657;
				background: #fef5ee;
				border-radius: 58rpx;
			}

			.open-detail {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 40rpx;
				font-family: Advent Pro, Advent Pro;
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				font-size: 20rpx;
				color: #fff;
				background: #5680FA;
				border-radius: 8rpx;
			}
		}
	}
</style>