ylrz_his_scrm_company_qw/pages/course/urgeclassDetail.vue

<template>
	<view class="column hb">
		<view class="headerUser">
			<view class="justify-start">
				<view class="mr20">A0204杨茗兰</view>
				<u-icon name="account-fill" color="#21994d" size="16"></u-icon>
			</view>
		</view>
		<view class="u-border-top p20">
			<view class="justify-between align-center">
				<view>可用积分：0</view>
				<view class="justify-start align-center">
					<view class="base-color-6 fs24">(0个活动进行中)</view> 
					<view class="base-color">详情</view>
				</view>
			</view>
		</view>
		<view class="bgf p20">
			<view>会员资料</view>
			<view class="justify-start align-center fs24 mt20">
				<view class="base-color-6 mr40">昵称</view>
				<view>公众号用户d81c2d20</view>
			</view>
			<view class="justify-start align-center fs24 mt20">
				<view class="base-color-6 mr40">最近场次</view>
				<view>05.1007课:御医派治病养生效果最好的食疗方</view>
			</view>
			<view class="justify-start align-center fs24 mt20">
				<view class="base-color-6 mr40">最近访问时间</view>
				<view>05-10 11:25</view>
			</view>
			<view class="mtb20">关联直播间</view>
			<view class="justify-between align-center base-color-6 fs24 mtb20">
				<view>2.0五仙250504期(7+</view>
				<view>邀请人：03开心-伴学助</view>
			</view>
			<view class="justify-between align-center base-color-6 fs24">
				<view class="base-color-3">备注名:A0204杨茗兰</view>
				<view>2025-05-04 09:33:37</view>
			</view>
		</view>
		<view class="bgf pl20 pb20 base-color">观看数据</view>
		<view class="p20 bgf justify-between align-center base-color-6 fs24">
			<view @click="showtime=!showtime ">请选择时间</view>
			<view class="p10 u-border radius50 plr30">今天</view>
		</view>
		<view class="bgf">
			<u-tabs :list="list1" @click="clicktab" :activeStyle="{ color: '#3c9cff',fontWeight:'bold'}"></u-tabs>
		</view>
		<view class="column hb hidden " style="box-sizing: border-box;">
			<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnableds"
				 :refresher-triggered="triggereds"
				refresher-background="rgba(0,0,0,0)" @refresherrefresh="pullDownRefreshs"
				@refresherrestore="triggereds = false" :upper-threshold="100" :lower-threshold="100"
				@refresherabort="triggereds = false" @scrolltolower="reachBottoms">
				<view class="list-box" v-for="(item,index) in 4" :key="index">
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">日期</text>
						<text class="fs24 base">2025-05-10</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">观看等级</text>
						<text class="fs24">已完播</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">频道</text>
						<text class="fs24">2.0五仙250504期(7+1)</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">邀请人</text>
						<text class="fs24">03开心一伴学助手</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">首播时长</text>
						<text class="fs24">0.39'35"</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">回放时长</text>
						<text class="fs24">0:00'00"</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">首次进入</text>
						<text class="fs24">2025-05-10 10:12:54</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">最近在线</text>
						<text class="fs24">2025-05-10 11:25:57</text>
					</view>
					<view class="justify-start align-center mtb10 fs28">
						<text class="w180 base-color-6">答题</text>
						<text class="fs24">1/1</text>
					</view>
				</view>
				<u-loadmore :status="statusA" />
			</scroll-view>
		</view>
		<u-calendar :show="showtime" :maxDate='maxDate' :minDate='minDate' @confirm="confirmData"
			:closeOnClickOverlay='true' @close="closedata" :selected="info.selected"></u-calendar>
	</view>
</template>

<script>
	import {
		getdetails
	} from "@/api/user.js";
	export default {
		data() {
			return {
				showtime:false,
				maxDate: '',
				minDate: '',
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				list1: [{
					name: '未参与',
				}, {
					name: '未观看',
				}, {
					name: '未完播'
				}, {
					name: '已完播'
				}],
				//分页
				triggereds: false,
				isEnableds: true,
				statusA: 'nomore',
				pageNum: 1,
				pageSize: 8,
			}
		},
		mounted() {
			this.gettimeDate()
			this.getdetaila()
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.selected = [{
						date: getDate(new Date(),-3).fullDate,
						info: '打卡'
					},
					{
						date: getDate(new Date(),-2).fullDate,
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(),-1).fullDate,
						info: '已打卡'
					}
				]
			}, 2000)
		},
		methods: {
			getdetaila(){
				 const data={
					 qwExternalContactId:'50'
				 }
				getdetails(data).then(res=>{
					if(res.code==200){
						console.log(200)
					}
				})
			},
			 clicktab(item) {
				console.log('item', item);
			},
			reachBottoms() {
				// status这个是加载状态
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						// this.getCourselist() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//列表展示下拉
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					// this.getCourselist('refresh') //触底  不穿执行else
				}, 1000)
			},
			closedata() {
				this.showtime = !this.showtime
			},
			confirmData(e) {
				this.showtime = !this.showtime
				this.date = e[0]
				this.pageNum = 1
				// this.getCourselist()
			},
			gettimeDate() {
				// 获取当前时间
				const currentDate = new Date();
				// 获取一个月前的时间
				const oneMonthAgo = new Date(currentDate);
				oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 2);
				this.minDate = oneMonthAgo.getTime();
				// 获取一个月后的时间
				const oneMonthLater = new Date(currentDate);
				oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
				this.maxDate = oneMonthLater.getTime();
			},
		}
	}
</script>

<style scoped lang="scss">
.headerUser{
	background-color: #fff;
	margin-top: 20rpx;
	padding: 20rpx;
}
.list-box {
	background-color: #fff;
	padding: 28rpx;
	margin-bottom: 12rpx;
	margin:18rpx 20rpx;
	border-radius: 12rpx;
}
</style>