wxThird/pages/user/expertServices.vue

<template>
	<view class="content">
		<!-- 我的服务顾问 -->
		<view class="ad-bg-box" v-if="users">
			<view class="ad-box">
				<view class="ad-sec-tit">
					我的服务顾问
				</view>
				<view class="ad-con-box">
					<image :src="usersAvatarStr" mode="aspectFit" class="ad-icon-mine"></image>
					<view class="ad-con-box-r">
						<view class="ad-name">{{users.name}}</view>
						<view class="ad-years">{{userYears}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 全部服务顾问横栏 -->
		<view class="mid-box">
			<view class="mid-v-line"></view>
			<view class="mid-sec-tit">全部服务顾问</view>
		</view>
		<!-- 服务顾问list -->
		<view class="ad-list" v-for="(item,index) in queryManagerList" :key="item.id" @click="goDetail(item)">
			<image :src="item.avatar ? item.avatar : '../../static/timg/pic_def_ava@2x.png'" class="ad-list-img"></image>
			<view class="ad-name ad-list-r">
				<text>{{item.name}}</text>
			</view>

			<view class="address-arrow">
				<image src="../../static/img/little_rightArrow.png" mode="aspectFit"></image>
			</view>

		</view>


		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow && (queryManagerList.length!=0)">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="queryManagerList.length==0"></nodata>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryManagerList: '',
				noMoreShow: false,
				users: ''
			}
		},
		onLoad() {
			this.getQueryManagerList()
		},
		computed: {
			usersAvatarStr() {
				return this.users.avatar ? this.users.avatar : '../../static/timg/pic_def_ava@2x.png'
			},
			userYears(){
				if (this.users.years) {
					return '从业年限：' + this.users.years + '年'
				}
				return '从业年限：未知'
			}
		},
		methods: {
			getQueryManagerList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openmy/queryManager', {}, 'GET').then(res => {
					uni.hideLoading();
					this.queryManagerList = res.data.userlist
					this.users = res.data.users
					
					console.log('服务顾问列表===', res);
				})
			},

			goDetail(item) {
				uni.navigateTo({
					url: '../index/personalCard?adInfo=' + JSON.stringify(item)
				})
			}
		},

		// 下拉刷新
		onPullDownRefresh() {

			this.getQueryManagerList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background-color: #F4F5F7;
		padding-bottom: 60rpx;
	}

	.ad-bg-box {
		background-color: #FF0000;
		padding: 20rpx 24rpx;
	}
	.ad-box {
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.ad-con-box {
		display: flex;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.ad-sec-tit {
		font-size: 24rpx;
		color: #666;
		padding-top: 30rpx;
		margin-left: 30rpx;
	}

	.ad-icon-mine {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.ad-con-box-r {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 30rpx;
	}

	.ad-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.ad-years {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}

	/* 全部服务顾问横栏 */
	.mid-v-line {
		background-color: #FF0000;
		width: 8rpx;
		height: 30rpx;
		border-radius: 4rpx;
		margin-left: 30rpx;
	}

	.mid-box {
		display: flex;
		height: 94rpx;
		align-items: center;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.mid-sec-tit {
		margin-left: 16rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	/* 顾问list */
	.ad-list {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		display: flex;
	}

	.ad-list-img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 42rpx;
	}

	.address-arrow {
		width: 30rpx;
	}

	.address-arrow image {
		width: 30rpx;
		height: 100%;
	}

	.ad-list-r {
		display: flex;
		flex: 1;		
	}
	.ad-list-r text{
		margin: auto 20rpx;
		/* background-color: green; */
	}
	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}

	/* .nodataImg {
		width: 400rpx;
		padding-top: 100rpx;
	}

	.noTxt {
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.nodataBox {
		text-align: center;
	} */
</style>