yicangzongtai_app_240321/pages/user/distribution/partner.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>

		<view class="partner">
			<image class="top-bg" :src="imgUrl+'/distribution-top-bg.png'"></image>
			<view class="userInfo">
				<view class="u-plr30">
					<view class="head u-flex-sb">
						<view class="u-flex">
							<image v-if="accountInfo.head_photo" v-else :src="accountInfo.head_photo"></image>
								<image v-else :src="imgUrl+'/head-on.png'" mode=""></image>

							<view class="u-ml30 u-mt10">
								<view class="u-font30 u-1A1A1A nickname u-text1" >{{accountInfo.nickname}}</view>
								<view class="u-mt5 u-02331F u-font24" v-if="accountInfo.role_name != null ">{{accountInfo.role_name}}</view>
							</view>
						</view>
						<view class="u-font24 u-999 u-mt10">直接伙伴：<text class="u-FF0000">{{num}}</text>人 </view>
					</view>
				</view>
				<view class="partner-list">
					<image class="partner-bg" :src="imgUrl+'/partner-bg.png'"></image>
					<view class="position-ab">
						<view v-if="partnerList.length>0">
						<view class="item u-plr30" v-for="(item,index) in partnerList" :key="item.id">
							<view class="u-flex-sb u-border-one-one pd44">
								<image class="u-avatar106" v-if="item.head_photo" :src="item.head_photo"></image>
								<image class="u-avatar106" v-else :src="imgUrl+'/head-on.png'"></image>
								<view class="u-font24 u-999">
									<view class="u-font28 u-1A1A1A ht36 u-text-width">{{item.nickname}}</view>
									<view>
									<rich-text :nodes="'*******'+$mUtil.cutOut(item.mobile)"></rich-text>
									</view>
									<view>绑定时间：{{item.register_time}}</view>
								</view>
								<view class="u-font24 u-FF0000">{{item.role_name}}</view>
							</view>
						</view>
					</view>
					<view class="nogoods u-mt30 u-flex-column-center" v-if="partnerList.length==0">
						<nodata  :config="{top:5,content:'暂无数据~'}"></nodata>
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '我的伙伴',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A'
				},
				num:0,
				partnerList:[],
				accountInfo:{},
				imgUrl: this.$mConfig.staticUrl
			}
		},
		onLoad() {
			//获取用户信息
			this.$http.get('/account/getAccountInfo',).then(res => {
				if(res&&res.code==200){
				this.accountInfo = res.data
				}
			})
			//获取伙伴列表
			this.$http.get('/account/myPartner',).then(res => {
				if(res&&res.code==200){
				this.num = res.num
				 this.partnerList=res.data
				}
			})
		},
		methods: {
		
		}
	}
</script>

<style lang="scss">
	.nickname{
		width: 300rpx;
	}
	.u-flex-sb {
		display: flex;
		justify-content: space-between;
	}
	.ht36{
		height: 36rpx;
		line-height: 36rpx;
	}
	.partner {
		position: relative;

		.top-bg {
			width: 100%;
			height: 238rpx;
		}

		.userInfo {
			position: absolute;
			top: 68rpx;
			width: 100%;

			.head {
				background-color: #FFFAEE;
				padding: 40rpx 30rpx 36rpx;
				border-radius: 20rpx;
				z-index: -1;

				image {
					width: 106rpx;
					height: 106rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
				}
			}
		}

		.partner-list {
			margin-top: -48rpx;
			position: relative;

			.partner-bg {
				height: 70vh;
				width: 100%;
			}

			.position-ab {
				position: absolute;
				top: 50rpx;
				width: 100%;
			}

			.pd44 {
				padding: 44rpx 0rpx;
			}
		}

	}
</style>