fbySrcm_uniapp/pages/courseManage/components/courseItem.vue

<template>
	<view class="courselist-item">
		<view class="courselist-con x-start">
			<view class="courselist-img">
				<!-- <view class="status">进行中</view> -->
				<image :src="info.thumbnail" mode="aspectFill"></image>
			</view>
			<view class="courselist-con-r">
				<view>
					<text class="more-t">{{info.title}}</text>
					<view class="btn_icon" style="margin-left: 5px;" @click="copyId">ID
						<image src="@/static/images/copy_icon.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="courselist-desc one-t" v-show="from != 'course'">{{info.courseName}}</view>
				<view :class="from == 'course' ? 'courselist-con-timebox ':'courselist-con-timebox x-f'">
					<view class="x-f acea-row"><u-icon class="icon" name="file-text" color="#999" size="20"></u-icon>{{info.createTime}}</view>
					<view class="x-f acea-row"><u-icon class="icon" name="clock" color="#999" size="16"></u-icon>{{$formatSeconds(info.duration,1)}}</view>
				</view>
			</view>
		</view>
		<view class="courselist-footer x-f">
			<view class="courselist-footer-item x-c" v-show="activeTab !=2" @click="handleShare"><u-icon name="share-square" color="#1677ff" size="18"></u-icon>分享课程</view>
			<view class="courselist-footer-item x-c shishi" v-show="activeTab == 1" @click="handleStatistics"><u-icon name="share-square" color="#1677ff" size="18"></u-icon>实时统计</view>
			<view class="courselist-footer-item x-c shuju" v-show="activeTab == 2" @click="handleStatistics"><u-icon name="share-square" color="#1677ff" size="18"></u-icon>数据统计</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" :closeOnClickOverlay="true" :round='20' @close="closeShare" @open="openShare">
			<view class="sharePop x-ac">
				<view class="sharePop-item y-f">
					<image src="@/static/images/poster_icon.png" mode="aspectFill"></image>
					<view style="font-weight: bold;margin-bottom: 4px;">生成海报</view>
					<view style="font-size: 12px;color: #888;">保存海报美观宣传</view>
				</view>
				<view class="sharePop-item y-f" @click="copyLink">
					<image src="@/static/images/link_icon.png" mode="aspectFill"></image>
					<view style="font-weight: bold;margin-bottom: 4px;">复制链接</view>
					<view style="font-size: 12px;color: #888;">生成链接一键复制</view>
				</view>
			</view>
		</u-popup>
		<!-- 设置链接有效时长弹窗 -->
		<u-modal :show="setTimeShow" content='content' class="model" @confirm="confirmTime">
			<view class="setTimebox">
				<view class="timetip">不传默认以系统参数为准</view>
				<view class="x-f">
					<text style="margin-right: 20px;">链接有效时长(分钟)</text>
					<u-input
						fontSize="14px"
						placeholder="链接有效时长"
						border="none"
						v-model="time"
						maxlength="5"
					  ></u-input>
				</view>
			</view>
		</u-modal>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	export default {
		props: {
			activeTab: {
				type: [Number,String],
				default: 0
			},
			// 来源
			from: {
				type: String,
				default: 'live'
			},
			info: {
				type: Object,
				default: ()=>{
					return {}
				}
			},
		},
		data() {
			return {
				showShare: false,
				setTimeShow: false,
				time: "",
			}
		},
		methods: {
			handleShare() {
				this.showShare = true
			},
			closeShare() {
				this.showShare = false
			  // console.log('open');
			},
			openShare() {
			  // this.showShare = false
			  // console.log('close');
			},
			copyLink(){
				this.setTimeShow = true
			},
			confirmTime() {
				this.setTimeShow = false
				this.showShare = false
			},
			handleStatistics() {
				const info = {
					courseId: this.info.courseId,
					title: this.info.title,
					thumbnail: this.info.thumbnail,
					createTime: this.info.createTime,
					duration: this.info.duration,
					fileId: this.info.fileId,
					courseName: this.info.courseName,
				}
				uni.navigateTo({
					url: '/pages/courseManage/statistics?info='+JSON.stringify(info)
				})
			},
			copyId() {
				uni.setClipboardData({
					data: this.info.fileId,
					success: ()=> {
						this.$refs.uNotify.show({
							top: 0,
							type: 'success',
							// color: '#000',
							// bgColor: '#e8e8e8',
							message: '复制课程ID成功',
							duration: 1000 * 2,
							fontSize: 20,
							safeAreaInsetTop:true
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.model .u-fade-enter-active {
			z-index: 10075 !important;
		}
	}
	.sharePop{
		background-color: #fff;
		padding: 50px 0;
		border-radius: 20px 20px 0 0;
		&-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			display: inline-flex !important;
			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}
	.setTimebox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
	}
	.timetip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #2979ff;
		text-align: center;
		margin-bottom: 5px;
	}
	.courselist{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		&-item {
			width: 100%;
			border-radius: 14px;
			background-color: #fff;
			overflow: hidden;
			margin-bottom: 10px;
		}
		&-con {
			padding: 10px 10px 5px 10px;
			font-size: 12px;
			color: #777;
		}
		&-con-r{
			flex: 1;
			overflow: hidden;
			.more-t {
				flex: 1;
				font-size: 14px;
				color: #222;
				display: inline;
			}
			image {
				width: 20px;
				height: 20px;
			}
			.btn_icon {
				font-size: 14px;
				color: #1677ff;
				display: inline-flex;
				align-items: center;
			}
		}
		&-img {
			width: 110px;
			height: 70px;
			border-radius: 10px;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 10px;
			position: relative;
			image {
				height: 100%;
				width: 100%;
			}
			.status {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				height: 21px;
				padding: 0 5px;
				box-sizing: border-box;
				line-height: 21px;
				border-radius: 10px 0 10px 0;
				text-align: center;
				color: #fff;
				background-color: #08ce36;
			}
		}
		&-desc {
			flex: 1;
			margin-top: 7px;
		}
		&-con-timebox {
			margin-top: 7px;
			flex-wrap: wrap;
			.acea-row {
				margin-right: 12px;
				margin-bottom: 5px;
				flex-wrap: nowrap;
			}
			.icon {
				margin-right: 5px;
			}
		}
		&-footer {
			padding: 5px;
			font-size: 14px;
			&-item {
				flex: 1;
				text-align: center;
				color: #1677ff;
				padding: 6px;
				box-sizing: border-box;
			}
			.shishi {
				border-left: 1px solid #f5f5f5;
			}
			.shuju {
				border-radius: 5px;
				border: 1px solid #1677ff;
			}
		}
	}
</style>