zhibo/pages_course/components/descInfoNav.vue

<template>
	<view style="background-color: #fff;padding-bottom: 116rpx;">
		<view class="title-content" id="title-content">
			<!-- 答题时展示小节课程名，其他展示课程名 -->
			<!-- 小节课程名 -->
			<view class="subtitlebox" v-if="isLogin&&isAddKf==1">
				{{courseInfo.title|| ''}}
			</view>
			<!-- 课程名字 -->
			<view class="miantitlebox" v-else>
				{{courseInfo.courseName|| ''}}
			</view>
		</view>
		<view class="descbox" >
			<template v-if="!isLogin||isAddKf!=1">
				<view class="descbox-title">{{courseInfo.title|| ''}}</view>
				<view class="descbox-info">
					<!-- <view class="descbox-info-l">
						<view>{{courseInfo.views}}次播放</view>
						<view class="descbox-info-time">总时长：{{courseInfo.totalDuration}}</view>
					</view> -->
					<view class="descbox-info-r expand" v-if="textHeight > 21">
						<text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
						<image :src="baseUrl+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
						<image :src="baseUrl+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
					</view>
				</view>
			</template>
			<view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
				<text>{{courseInfo.description|| ''}}</text>
				<view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="isLogin&&isAddKf==1&&textHeight > 21">
					<text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
					<image :src="baseUrl+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
					<image :src="baseUrl+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isLogin: {
				type: Boolean,
				default: false,
			},
			isAddKf: {
				type: [String,Number],
				default: 0,
			},
			courseInfo: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				baseUrl:uni.getStorageSync('requestImagesPath'),
				// 是否展开
				isExpand: true,
				textHeight: 0, //文本高度
			}
		},
		methods: {
			// 展开简介
			handleExpand() {
				this.isExpand = !this.isExpand
			},
			getDescHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#descbox-desc")
						.boundingClientRect((data) => {
							if(data){
								this.textHeight = data.height
							}
						})
						.exec();
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.miantitlebox {
		padding: 30rpx 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
	}
	.subtitlebox {
		padding: 30rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
	}
	.title-content {
		padding: 0 32rpx;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 1.6;
	
		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #414858;
		}
	
		.time-or-subtitle {
			margin-top: 12rpx;
			color: #666666;
		}
	}
	.descbox {
		padding: 14rpx 32rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 42rpx;
		word-break: break-word;
	
		&-title {
			margin-bottom: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
		}
	
		&-info {
			margin-bottom: 24rpx;
			@include u-flex(row, center, space-between);
			font-size: 26rpx;
			color: #757575;
	
			&-l {
				flex: 1;
				@include u-flex(row, center, flex-start);
			}
	
			&-time {
				margin-left: 18rpx;
				padding-left: 18rpx;
				position: relative;
	
				&::after {
					content: "";
					width: 4rpx;
					height: 4rpx;
					background: #999999;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
	
			&-r {
				background: transparent;
			}
		}
	
		&-desc {
			overflow: hidden;
			position: relative;
		}
	}
	.expand {
		flex-shrink: 0;
		@include u-flex(row, center, flex-end);
		color: #FF5C03;
		font-weight: 400;
		font-size: 24rpx;
	
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.expand-ab {
		position: absolute;
		top: 0;
		right: 0;
		box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
		background-color: #fff;
	}
	
</style>