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 hover-class="app-tap-hover" class="list" v-for="(item,index) in wateringList" :key="index" @click="btnedit(item)">
				<!-- 顶部：名称 + 操作按钮 -->
				<view class="card-header">
					<view class="name">
						<text class="name-text">{{item.remark || '--'}}</text>
						<view class="type-tag realname-tag" :class="isRealNameVerified(item.userAuthTypes) ? 'realname-yes' : 'realname-no'">
							{{ isRealNameVerified(item.userAuthTypes) ? '已实名' : '未实名' }}
						</view>
					</view>
					<view class="type-tag" :class="item.type == 1 ? 'jiameng' : 'hehuo'">
						{{item.type == 1 ? '加盟商' : '合伙人'}}
					</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 hover-class="app-tap-hover" 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: {
			/** userAuthTypes 为数组，包含 1 或 3 视为已实名（兼容接口返回字符串数字） */
			isRealNameVerified(userAuthTypes) {
				if (!Array.isArray(userAuthTypes) || userAuthTypes.length === 0) return false
				return userAuthTypes.some((t) => t == 1 || t == 3)
			},
			// 点击跳转编辑合伙人
			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
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									
								}
							}
						})
					}
				})
			},

		}
	}
</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 {
				flex: 1;
				min-width: 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-right: 16rpx;

				.name-text {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					max-width: 100%;
				}
			}

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

				&.realname-tag {
					flex-shrink: 0;
					margin-left: 16rpx;

					&.realname-yes {
						background: #F6FFED;
						color: #52c41a;
					}

					&.realname-no {
						background: #F5F5F5;
						color: #8c8c8c;
					}
				}
			}
		}

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