chanyishenghuo-uniapp/pages/serviceTeacher/memberDetail.vue

<template>
	<view class="member-box">
		<view class="member-info-box acea-row row-middle row-between">
			<view class="info-l acea-row">
				<view><image :src="member.avatar"></image></view>
				<view class="name-box">
					<view class="acea-row row-middle mt26">
						<view class="name">{{member.realName}}</view>
						<view class="vip-box">{{member.level}}级会员</view>
					</view>
					<view class="acea-row">
						<!-- <view class="tips-box">湖北 武汉</view> -->
						<view class="tips-box">{{member.integral}}积分</view>
					</view>
				</view>
			</view>
			<view class="call-btn" @click="call">拨号</view>
		</view>
		<view class="tab-box acea-row row-around" :class="isFixedTop?'fixed':''">
			<view class="tab-item" :class="active == '0' ? 'tab-item-active' : ''" @click="handelScroll('0')">课程({{detail.courseDtos.length}})</view>
			<view class="tab-item" :class="active == '1' ? 'tab-item-active' : ''" @click="handelScroll('1')">打榜({{detail.studyListDtos.length}})</view>
		</view>
		<view class="content-box" v-if="active == 0">
			<view class="course-list-box">
				<view class="course-item" v-for="item in detail.courseDtos" :key="item" @click="toCourseDetail(item.id)">
					<view class="top-box acea-row row-between">
						<view class="top-l-box">
							<view class="name line1">{{item.courseName}}</view>
							<!-- <view class="time-box">时间：{{item.courseStartTime.split(' ')[0]}} 至 {{item.courseEndTime.split(' ')[0]}}</view> -->
							<view class="time-box">地点：{{item.coursePlace}}</view>
						</view>
						<view class="state-box" v-if="item.signState == 0">未签到</view>
						<view class="state-box" v-if="item.signState == 1">已签到</view>
						<view class="state-box" v-if="item.signState == 2">签到未开放</view>
						<view class="state-box" v-if="item.signState == 3">缺席</view>
						<view class="state-box" v-if="item.signState == 4">课程已取消</view>
					</view>
					<!-- <view class="btm-box">座位:{{item.seat || '暂未安排座位'}}</view> -->
				</view>
			</view>
		</view>
		<view class="dabang-list-box" v-else>
			<view class="dabang-item" v-for="(item,index) in detail.studyListDtos" @click="bangdanDetail(item.id)">
				<view class="dabang-info">
					<view class="bangdan-name line1">{{item.listName}}</view>
					<view class="time">{{item.listStartTime.split(' ')[0]}}-{{item.listEndTime.split(' ')[0]}}</view>
					<view class="time">{{item.integral}}积分</view>
				</view>
				<view class="dabang-btm colR acea-row row-between-wrapper" v-if="item.listState == 2">
					<view>{{item.signState == 2 ? '+' : '-'}} {{item.integral}}积分</view>
					<view v-if="item.signState == 2">打榜成功 {{item.signTimes}}/{{item.clockTimes}}</view>
					<view v-if="item.signState == 3">打榜失败 {{item.signTimes}}/{{item.clockTimes}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMemberDetail } from "@/api/serverTeacher"	
	export default{
		data(){
			return {
				active: 0,
				member:{},
				detail:{
					courseDtos: [],
					studyListDtos: []
				}
			}
		},
		onLoad() {
			this.member = JSON.parse(decodeURIComponent(this.$yroute.query.item));
			// this.uid = this.$yroute.query.uid;
			this.getDetail()
		},
		methods:{
			toCourseDetail(id){
				this.$yrouter.push({
					path: '/pages/serviceTeacher/courseDetail',
					query:{ id: id }
				})
			},
			getDetail(){
				uni.showLoading({
					title: '正在加载中...'
				})
				getMemberDetail({uid: this.member.uid}).then((res)=>{
					if(res.success){
						this.detail = res.data
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			bangdanDetail(id){
				this.$yrouter.push({
					path:'/pages/serviceTeacher/memberDabang',
					query: {
						studyId: id,
						memberId: this.member.uid
					}
				})
			},
			handelScroll(idx){
				this.active = idx
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: this.member.phone
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.member-box{
		.member-info-box{
			padding: 36rpx 30rpx 50rpx;
			background: #fff;
			.info-l{
				image{
					width: 124rpx;
					height: 124rpx;
					border-radius: 50px;
					margin-right: 30rpx;
				}
				.name-box{
					font-size: 24rpx;
					.mt26{
						margin-bottom: 26rpx;
					}
					.name{
						font-size: 36rpx;
						color: #222;
					}
					.vip-box{
						// width: 100rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						padding: 0 10rpx;
						color: #fff;
						background: linear-gradient(180deg, #FFCF61 0%, #FCA333 100%);
						box-shadow: 0px 4rpx 8rpx 0px rgba(253,169,57,0.19);
						border-radius: 20rpx 20rpx 20rpx 0px;
						margin-left: 10rpx;
					}
					.tips-box{
						padding: 4rpx 12rpx;
						height: 40rpx;
						background: #FFF5E6;
						border-radius: 23rpx;
						color: #FFA726;
						font-size: 24rpx;
						margin-right: 16rpx;
					}
				}
			}
			.call-btn{
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				background: #F4C076;
				border-radius: 30rpx;
			}
		}
		.tab-box{
			white-space: nowrap;
			width: 100%;
			background: #fff;
			padding: 18rpx 34rpx 0;
			.tab-item{
				width: 50%;
				text-align: center;
				display: inline-block;
				padding-bottom: 26rpx;
				font-size: 32rpx;
				color: #222;
			}
			.tab-item-active{
				font-weight: bold;
				border-bottom: 4rpx solid #EB5744;
			}
		}
		.content-box{
			padding: 30rpx;
			.course-list-box{
				.course-item{
					background: #fff;
					padding: 30rpx;
					color: #333;
					font-size: 24rpx;
					border-radius: 10px;
					margin-bottom: 30rpx;
					.name{
						width: 460rpx;
						font-size: 32rpx;
						margin-bottom: 20rpx;
					}
					.state-box{
						min-width: 152rpx;
						height: 52rpx;
						background: #FEF2D9;
						border-radius: 4rpx;
						border: 1px solid #D89200;
						text-align: center;
						line-height: 52rpx;
						color: #695121;
					}
					.btm-box{
						padding-top: 20rpx;
						border-top: 1px solid #ececec;
						margin-top: 20rpx;
					}
				}
			}
		}
		.dabang-list-box{
			width: 100%;
			padding: 0 32rpx;
			.dabang-item{
				width: 100%;
				background: #fff;
				color: #fff;
				margin-top: 28rpx;
				font-size: 28rpx;
				border-radius: 10rpx;
				overflow: hidden;
				.dabang-info{
					height: 200rpx;
					padding-left: 24rpx;
					padding-top: 24rpx;
					background: linear-gradient(148deg, #B4B6C4 0%, #C5CAD6 100%);
					.bangdan-name{
						font-size: 50rpx;
						line-height: 80rpx;
					}
				}
				.dabang-btm{
					padding: 0 56rpx 0 24rpx;
					height: 80rpx;
					color: #8FB85B;
				}
				.colR{
					color:#EB5744;
				}
			}
		}
	}
</style>