sports-miniapp/src/pages/index/instructorDetail/index.vue

<template>
	<zzx-navbar :scrollable="true" :back="true" title="详情"></zzx-navbar>
	<view class="detail-header" v-if="detailObj">
		<image class="header-bg":src="detailObj.backgroundImg" mode="aspectFill"></image>
		<view class="back-icon" :style="{ paddingTop: (statusBarHeight + 10) + 'px' }" @click="RouterUtils.back()">
			<zzx-icon name="back"></zzx-icon>
		</view>
		<view :style="{ height: (statusBarHeight + 100) + 'px' }"></view>
	</view>
	<view class="content" v-if="detailObj">
		<view class="i-info-card">
			<view class="i-userinfo">
				<view class="user-header">
					<image class="header-img" :src="detailObj.avatar" mode=""></image>
					<image class="header-badge" src="/src/static/badge.png" mode=""></image>
				</view>
				<view style="width: 220rpx;"></view>
				<view class="user-name">
					<view class="name-box">
						<view class="name">{{ detailObj.realname }}</view>
						<view class="type">{{ detailObj.trainingProgramsName }}</view>
					</view>
					<view class="sign" @click="to_certifying">
						<text class="textHidden">{{ detailObj.headDisplay }}</text>
						<zzx-icon name="ashRight" size="12"></zzx-icon>
					</view>
				</view>
			</view>
			<view class="i-sign">
				{{ detailObj.teachingPhilosophy }}
			</view>
			<view class="i-skill">
				{{ detailObj.excelMsg }}
			</view>
			<view class="i-data-card">
				<view class="item-data">
					<view class="text">好评率</view>
					<view class="num">{{ appraiseList.applauseRate||'--' }}%</view>
				</view>
				<view class="item-data">
					<view class="text">订单数</view>
					<view class="num">{{ detailObj.orderNumber }}</view>
				</view>
				<view class="item-data">
					<view class="text">授课人数</view>
					<view class="num">{{ detailObj.classesNumber || '0' }}</view>
				</view>
			</view>
		</view>
		<view class="i-course-list">
			<view class="i-title">课程</view>
			<view class="i-course-card">
				<view class="card-tips">
					<view class="tips-icon">!</view>
					<view class="tips-text">全平台每种类型的运动课程只可免费试听一次</view>
				</view>
				<view class="card-list" v-for="item in detailObj.courseInfoVOList" :key="item.id">
					<image class="card-img" :src="item.cover" mode=""></image>
					<view class="i-list">
						<view class="list-name">
							<view class="name textHidden">{{ item.name }}</view>
							<view class="num">年售{{ item.annualSalesNum }}</view>
						</view>
						<view class="address">上课地点：{{ item.address }} | {{ item.km }}km</view>
						<view class="list-price">
							<view class="left-price" v-if="item.sellingPrice">￥{{ item.sellingPrice.toFixed(2) }}</view>
							<view class="right-price" v-if="item.originalPrice">￥{{ item.originalPrice.toFixed(2) }}</view>
						</view>
						<view class="sale-data">已售{{ item.saleNum }} {{ item.goodRate }}%好评</view>
						<view class="course-num">
							<view class="number">{{ item.coursesNum }}课时 {{ item.startTime }}-{{ item.endTime }}</view>
							<view class="i-btn"
								@click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${item.id}&type=3`)">抢购
							</view>
						</view>
						<view style="height: 24rpx;"></view>
					</view>
				</view>
				<view class="not-data" v-if="detailObj.courseInfoVOList?.length < 1">暂无课程数据</view>
			</view>
		</view>
		<view class="appraise-card">
			<view class="appraise-title">
				<view class="title">评价</view>
				<view class="comments">
					<view class="a-star">
						<zzx-icon name="star" size="10"></zzx-icon>
						<text>{{ appraiseList.averageScore }}</text>
					</view>
					<view class="a-text">| {{ appraiseList.scoreNum }}人评论</view>
				</view>
			</view>
			<view class="appraise-info" v-for="item in appraiseList.records" :key="item.id">
				<view class="a-user-info">
					<view class="info">
						<image :src="item.avatar" mode=""></image>
						<view class="name">{{ item.username }}</view>
					</view>
					<view class="time">{{ DateUtils.formatDateToMMDD(item.createTime) }}</view>
				</view>
				<view class="a-score">
					<text>{{ item.score.toFixed(1) }}</text>
					<uni-rate :readonly="true" size="16" :value="item.score" />
				</view>
				<view class="a-content">
					{{ item.evaluateContent }}
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
					<view class="scroll-view-item_H uni-bg-red" v-for="(img, idx) in item.images.split(',')" :key="idx">
						<image @click="_previewImage(item.images.split(','), img)" :src="img" mode=""></image>
					</view>
				</scroll-view>
			</view>
			<view class="not-data" v-if="!appraiseList.records?.length">暂无评价数据</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { http } from '@/utils/http'
import { useCacheStore } from '@/stores/cache'
import { RouterUtils, _previewImage,DateUtils } from '@/utils/util';
import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
const cache = useCacheStore()
const statusBarHeight = ref(0);
onLoad((option) => {
	detailId.value = option.id
	appraiseFormData.value.instructorId = option.id
})
onReachBottom(() => {
	appraiseFormData.value.pageNo++
	getFindByOrderPage()
})
onMounted(() => {
	get_navheight()
	get_findByCoachId()
	getFindByOrderPage()
})
const get_navheight = () => {
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;
}

const to_certifying = () => {
	uni.navigateTo({
		url: `/pages/index/certifyingDetail/index?id=${detailId.value}`
	})
}

const detailId = ref()
const detailObj = ref()
const get_findByCoachId = () => {
	http.get('/coachC/findByCoachId', { data: { id: detailId.value, longitude: cache.get('LON'), latitude: cache.get('LAT') }, loading: true }).then((res) => {
		detailObj.value = res.result
	})
}

// 获取评价
const appraiseFormData = ref({
	instructorId: null,
	pageNo: 1,
	pageSize: 10
})
const appraiseList = ref([])
const getFindByOrderPage = () => {
	http.get('/my/evaluate/findByOrderPage', { data: appraiseFormData.value, loading: true }).then((res) => {
		if(appraiseFormData.value.pageNo == 1){
		appraiseList.value = res.result
		}else{
			appraiseList.value = [...appraiseList.value,...res.result]
		}
	})
}
</script>

<style lang="less" scoped>
.detail-header {
	position: relative;

	.header-bg {
		position: absolute;
		width: 100%;
		z-index: -100;
		max-height: 432rpx;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		z-index: 9999;
	}
}

.i-info-card {
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.i-userinfo {
		display: flex;
		align-items: center;

		.user-header {
			position: relative;

			.header-img {
				position: absolute;
				top: -110rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.header-badge {
				position: absolute;
				left: 120rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}

		.user-name {
			.name-box {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}

				.type {
					font-size: 28rpx;
					color: #AAAAAA;
				}
			}

			.sign {
				margin-top: 20rpx;
				width: 430rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
	}

	.i-sign {
		margin-top: 24rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.i-skill {
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #222222;
	}

	.i-data-card {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #F9F9F9;
		border-radius: 32rpx;
		margin-top: 20rpx;

		.item-data {
			.text {
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.num {
				margin-top: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}
		}
	}
}

.i-course-list {
	margin-top: 20rpx;

	.i-title {
		font-weight: 800;
		font-size: 32rpx;
		color: #222222;
	}

	.i-course-card {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.card-tips {
			display: flex;
			align-items: center;
			gap: 12rpx;
			font-size: 24rpx;
			color: #AAAAAA;

			.tips-icon {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #FFA347;
				font-size: 18rpx;
				color: #fff;
				text-align: center;
				line-height: 24rpx;
			}
		}

		.card-list {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;

			.card-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
			}

			.i-list {
				border-bottom: 1rpx solid #F0F0F0;

				.list-name {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						width: 360rpx;
						font-weight: 800;
						font-size: 32rpx;
						color: #222222;
					}

					.num {
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}

				.address {
					width: 440rpx;
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #AAAAAA;
				}

				.list-price {
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin-top: 10rpx;

					.left-price {
						font-weight: bold;
						font-size: 28rpx;
						color: #FB5B5B;
					}

					.right-price {
						font-size: 22rpx;
						color: #AAAAAA;
						text-decoration: line-through;
					}
				}

				.list-data {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.course-num {
					display: flex;
					align-items: center;
					justify-content: space-between;
			}

				.course-num {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.sale-data {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}

				.course-num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					.number {
						font-size: 24rpx;
						color: #AAAAAA;
					}

					.i-btn {
						width: 152rpx;
						height: 48rpx;
						background: #C8FF0C;
						border-radius: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
						line-height: 48rpx;
					}
				}
			}
		}
	}
}

.appraise-card {
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	margin-top: 20rpx;

	.appraise-title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-weight: 800;
			font-size: 32rpx;
			color: #222222;
		}

		.comments {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.a-star {
				font-size: 24rpx;
				color: #FDD143;
			}

			.a-text {
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
	}

	.appraise-info {
		margin-top: 20rpx;

		.a-user-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info {
				display: flex;
				align-items: center;
				gap: 20rpx;

				&>image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.name {
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
				}
			}

			.time {
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.a-score {
			font-size: 24rpx;
			color: #AAAAAA;
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;
		}

		.a-content {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #222222;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 220rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.scroll-view-item_H {
				display: inline-block;
				text-align: center;
				margin-right: 14rpx;

				&>image {
					width: 202rpx;
					height: 200rpx;
					background: #D8D8D8;
					border-radius: 32rpx;
				}
			}
		}
	}
}
</style>