chuangte_bike_newxcx/page_fenbao/yunwei/index.vue

<template>
	<view class="page">
		<u-navbar title="运维人员列表" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000"
			title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="list" v-for="(item,index) in wateringList" :key="index" @click="btnedit(item)">
				<!-- 顶部：名称 + 操作按钮 -->
				<view class="card-header">
					<view class="name">
						{{item.remark || '--'}}
					</view>
					<view class="type-tag" v-if="item.type == 3">运维</view>
				</view>

				<!-- 电话 -->
				<view class="phone">{{item.userPhone || '--'}}</view>

				<!-- 数据区域 -->
				<view class="data-box">
					<view class="data-item">
						<view class="label">运营区</view>
						<view class="value">{{item.areaName || '--'}}</view>
					</view>
				</view>
				
				<!-- 创建时间 -->
				<!-- <view class="time">创建时间：{{item.createTime || '--'}}</view> -->
				</view>

			<view class="" style="width: 100%;text-align: center;margin-top: 50rpx;"
				v-if="wateringList.length == 0">
				<view class="" style="font-size: 28rpx;color: #ccc;">没有更多运维人员啦...</view>
				</view>
			
			<!-- 底部占位，防止被按钮遮挡 -->
			<view style="height: 150rpx;"></view>
			</view>
		
		<view class="xinjian" @click="btnadd">
			新建运维人员
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff"
                }, 
				wateringList: [],
				keyword: '',
				areaId: ''
			}
		},
		onLoad(option) {
			this.areaId = option.areaId
		},
		onShow() {
			this.getlist()
		},
		methods: {
			// 点击跳转编辑
			btnedit(item) {
				uni.navigateTo({
					url: '/page_fenbao/yunwei/addyunwei?item=' + JSON.stringify(item)
				})
		   },
			btnadd() {
			  uni.navigateTo({
					url: '/page_fenbao/yunwei/addyunwei'
			  })  
		   },
		   getlist() {
		   	    this.$u.get(`/bst/areaJoin/list?pageNum=1&pageSize=999&types=3&areaId=${this.areaId}`).then(res => {
		   	    	if (res.code == 200) {
		                this.wateringList = res.rows
		   	    	}
		   	    })
		   },
		   
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.page {
		width: 750rpx;
		min-height: 100vh;
		background: #F7F7F7;
	}

	.box {
		width: 750rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				display: flex;
				align-items: center;
			}

			.type-tag {
				font-size: 24rpx;
				font-weight: 500;
				padding: 6rpx 24rpx;
				border-radius: 30rpx;
				background: #EBF4FF;
				color: #4C97E7;
			}
		}

		.phone {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 24rpx;
		}

		.data-box {
			background: #F8F9FB;
			border-radius: 12rpx;
			padding: 24rpx 30rpx;
					display: flex;
					justify-content: space-between;
			align-items: center;
			
			.data-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
						text-align: center;

				.label {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;
				}

				.value {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
						}
					}
				}
		
		.time {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
			text-align: right;
				}
			}

	.xinjian {
		width: 690rpx;
		height: 88rpx;
		background: #4C97E7;
		border-radius: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 40rpx;
		box-shadow: 0 8rpx 20rpx rgba(76, 151, 231, 0.3);
		z-index: 10;

		&:active {
			opacity: 0.9;
		}
	}
</style>