ylrz_scrm_course_miniapp/components/descInfo.vue

<template>
	<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="/static/images/course_arrow_up_icon.png" v-show="isExpand"></image>
					<image src="/static/images/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="/static/images/course_arrow_up_icon.png" v-show="isExpand"></image>
				<image src="/static/images/course_arrow_down_icon.png" v-show="!isExpand"></image>
			</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 {
				// 是否展开
				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;
	}
	.descbox {
		padding: 0 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 {
			padding: 24rpx 0;
			font-weight: 500;
			font-size: 32rpx;
		}
	
		&-info {
			padding-top: 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;
			margin-top: 20rpx;
		}
	}
	.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>