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">
				<!-- 顶部：名称 + 操作按钮 -->
				<view class="card-header">
					<view class="name">
						{{item.remark || '--'}}
						<text class="type-tag" v-if="item.type == 3">运维</text>
					</view>
					<view class="actions">
						<view class="action-btn edit" @click.stop="btnedit(item)">
							<u-icon name="edit-pen" color="#4C97E7" size="32"></u-icon>
					</view> 
						<view class="action-btn delete" @click.stop="btnshanchu(item)">
							<u-icon name="trash" color="#FF4D4F" size="32"></u-icon>
					</view>
					</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 class="data-item">
						<view class="label">分成比例</view>
						<view class="value">{{item.point == null ? '--' : item.point + '%'}}</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: {
			// 点击删除运维人员
			btnshanchu(item) {
				let that = this
				uni.showModal({
				    title: '温馨提示',
					content: '您确定要删除此运维人员吗？',
				    showCancel: true,
				    success: function(res) {
				        if (res.confirm) { 
				            that.$u.delete(`/bst/areaJoin/${item.id}`).then(res => {
				            	if (res.code == 200) {
									that.getlist()
				                    uni.showToast({
				                    	title: '删除成功',
				                    	icon: 'success',
				                    	duration: 2000
				                    })
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
				            })
				        } else if (res.cancel) {
				            
				        }
				    }
				})
			},
			// 点击跳转编辑
			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: 22rpx;
					font-weight: normal;
					background: #EBF4FF;
					color: #4C97E7;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					margin-left: 12rpx;
			}
		}

			.actions {
				display: flex;
				gap: 20rpx;

				.action-btn {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&.edit {
						background: #EBF4FF;
					}

					&.delete {
						background: #FFF1F0;
					}
				}
			}
		}

		.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>