chuangte_bike_newxcx/page_fenbao/jiameng/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">{{item.type == 1 ? '加盟商' : '合伙人'}}</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>

			<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/jiameng/addjiam?item=' + JSON.stringify(item)
				})
			},
			btnadd() {
				uni.navigateTo({
					url: '/page_fenbao/jiameng/addjiam'
				})
			},
			getlist() {
				this.$u.get(`/bst/areaJoin/list?pageNum=1&pageSize=999&types=1,2&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;
				}
			}
		}
	}

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