yicangzongtai_app_240321/pages/operationCenter/myGroup.vue

<template>
	<view class="main">
		<view class="head">
			<navbar :config="config" backColor="#666"></navbar>
			<view class="mydata">
				<view class="mydata_l">
					<image :src="userInfo.head_photo" mode="" v-if="userInfo.head_photo"></image>
					<image :src="$mConfig.staticUrl+'/head-on.png'" mode="" v-else></image>
					<view>
						<view>{{userInfo.real_name}}</view>
						<view>
							<text v-if="userInfo.service_system_province==2">爱心小屋</text>
							<text v-if="userInfo.service_system_province==3">服务驿站</text>
							<text v-if="userInfo.service_system_province==4">服务中心</text>
							<text v-if="userInfo.service_system_province==5">市级</text>
							<text v-if="userInfo.service_system_province==6">省级公司</text>
							<text v-if="userInfo.service_system_province==7">大区公司</text>
						</view>
					</view>
				</view>
				<view class="mydata_r">合计：<text>{{num}}</text>人</view>
			</view>
			<view class="head_shade"></view>
		</view>
		<view class="listBox">
			<view class="item" v-for="(v,i) in list" :key="i">
				<view class="item_l">
					<image :src="v.head_photo" mode="" v-if="v.head_photo"></image>
					<image :src="$mConfig.staticUrl+'/head-on.png'" mode="" v-else></image>
					<view>
						<view class="item_l_name">{{v.real_name||'无'}}</view>
						<view class="item_l_tel">{{v.mobile}}</view>
						<view class="item_l_time">入驻时间:{{v.register_time}}</view>
					</view>
				</view>
				<view class="item_r">
					<text v-if="v.service_system_province==0">普通会员</text>
					<text v-if="v.service_system_province==1">创客</text>
					<text v-if="v.service_system_province==2">爱心小屋</text>
					<text v-if="v.service_system_province==3">服务驿站</text>
					<text v-if="v.service_system_province==4">服务中心</text>
					<text v-if="v.service_system_province==5">市级</text>
					<text v-if="v.service_system_province==6">省级公司</text>
					<text v-if="v.service_system_province==7">大区公司</text>
				</view>
			</view>
			<view>
				<noData v-if="list<=0"></noData>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	export default {
		components: {
			noData
		},
		data() {
			return {
				config: {
					back: true,
					title: '我的团队',
					color: '#1a1a1a',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black',
					// backgroundImg: "/static/operationCenter/headBg.png"
				},
				list: [],
				num: 0,
				userInfo: {}
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userInfo)
			this.getList()
		},
		methods: {
			// 获取列表
			getList() {
				let serviceSystem = 0
				this.$http.get(`/account/selectUserByServiceSystem`).then(res => {
					if (res && res.code == 200) {
						this.list = res.data;
						this.num = this.list.length
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.head {
			// background: linear-gradient(180deg, #2bba26 0%, #047753 100%);
			background: url('/static/convenienceService/detailsBg.png')0 0 no-repeat;
			background-size: 752rpx 510rpx;
			position: relative;

			/deep/ .hx-navbar__fixed {
				background: url('/static/convenienceService/detailsBg.png')0 0 no-repeat;
				background-size: 752rpx 510rpx;
			}

			.mydata {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 30rpx 80rpx 30rpx;

				.mydata_l {
					display: flex;
					align-items: center;

					image {
						width: 115rpx;
						height: 115rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					view {
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}

				.mydata_r {
					font-size: 28rpx;
					color: #FFFFFF;

					text {
						font-size: 36rpx;
					}
				}
			}

			.head_shade {
				width: 100%;
				height: 40rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0 0;
			}
		}

		.listBox {
			padding: 0 30rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E6E6E6;

				.item_l {
					display: flex;

					image {
						width: 106rpx;
						height: 106rpx;
						border-radius: 50%;
						margin-right: 50rpx;
					}

					>view {
						line-height: 34rpx;
					}

					.item_l_name {
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.item_l_tel,
					.item_l_time {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.item_r {
					text {
						font-size: 24rpx;
						color: #22A834;
					}
				}
			}
		}
	}
</style>