zc_saas_h5/pages2/learn/my_learn.vue

<template>
	<view class="safeArea">
		<view style="width: 100%;text-align: center;position: fixed;height: 96rpx;z-index: 999;">
			<u-tabs :list="list" sticky :current="current" @change="change" active-color="#333" inactive-color="#999"></u-tabs>
		</view>
		<view class="learnWrap">
			<template v-if="current === 0">
				<!-- <view class="noData">您暂无相关学时审核记录哦~</view> -->
				<view class="learnItem" v-for="(item, index) in listData" :key="index">
					<view class="title">{{ item.goodsName }}</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view
							class="val"
							:class="item.periodStatus === -1 || item.periodStatus === 3 ? 'red' : item.periodStatus === 1 ? 'green' : item.periodStatus === 2 ? 'blue' : ''"
						>
							{{
								item.periodStatus === -1
									? '不可审核'
									: item.periodStatus === 1
									? '机构审核通过'
									: item.periodStatus === 2
									? '等待审核'
									: item.periodStatus === 3
									? '机构审核不通过'
									: ''
							}}
						</view>
					</view>
					<view class="tip">
						<view class="label">审核提示：</view>
						<view class="val green">您的学时还未修完，请尽快完成课程学习</view>
					</view>
					<view v-if="item.periodStatus !== 2">
						<u-line color="#EEEEEE" />
					<!-- <view class="subTitle">这是一个考试标题</view> -->
						<view class="btnBox"><view class="btn">课程学习</view></view>
					</view>
				</view>
				<!-- <view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val blue">不可审核</view>
					</view>
					<view class="tip">
						<view class="label">审核提示：</view>
						<view class="val green">您的学时还未修完，请尽快完成课程学习</view>
					</view>
				</view>
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val green">机构审核完成</view>
					</view>
				</view>
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val green">机构审核完成</view>
					</view>
					<u-line color="#EEEEEE" />
					<view class="subTitle">这是一个考试标题</view>
					<view class="btnBox"><view class="btn">预约考试</view></view>
				</view>
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val green">机构审核完成</view>
					</view>
					<u-line color="#EEEEEE" />
					<view class="subTitle">这是一个考试标题</view>
					<view class="btnBox"><view class="btn">进入刷题</view></view>
				</view>
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val green">机构审核完成</view>
					</view>
					<view class="tip">
						<view class="label">审核提示：</view>
						<view class="val">
							机构已审核通过，需等待注册中心复审后即可获得继续教育学时。审核时间约15个工作日，届时请前往官网申请证书延期。
							<view class="link">复制官网链接</view>
						</view>
					</view>
					<u-line color="#EEEEEE" />
					<view class="btnBox"><view class="btn">课程学习</view></view>
				</view>
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="status">
						<view class="label">审核状态：</view>
						<view class="val red">
							机构审核不通过
							<view class="remark">
								有
								<text class="red">3节</text>
								需重修
							</view>
						</view>
					</view>
					<view class="tip">
						<view class="label">审核提示：</view>
						<view class="val">请查看需重学记录，并及时重学对应课程，以免延误学时审核进度。</view>
					</view>
					<u-line color="#EEEEEE" />
					<view class="btnBox"><view class="btn">课程学习</view></view>
				</view> -->
			</template>
			<template v-if="current === 1">
				<!-- <view class="noData">您暂无相关学习凭证记录哦~</view> -->
				<view class="learnItem">
					<view class="title">2020年二建建筑工程管理与实补这是商品名称</view>
					<view class="number">
						<text class="label">编号：</text>
						GZXY123456789
					</view>
					<view class="btnBox">
						<view class="btn">电子照片</view>
						<view class="btn">下载凭证</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			current: 0,
			list: [
				{
					name: '学时审核'
				},
				{
					name: '学习凭证'
				}
			],
			listData: []
		};
	},
	onLoad(option) {
		this.getInfos();
	},
	onShow() {},
	methods: {
		getInfos() {
			this.$api.getcourseperiodlistGoods().then(res => {
				if (res.data.code === 200) {
					this.listData = res.data.rows;
				}
			});
		},
		change(index) {
			this.current = index;
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scoped lang="scss">
.learnWrap {
	padding: 98rpx 8rpx 8rpx;
}
.noData {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	margin: 160rpx auto;
	text-align: center;
}
.learnItem {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx 32rpx 0;
	font-family: PingFang SC;
	margin-bottom: 16rpx;
	overflow: hidden;
	.red {
		color: #ff3b30 !important;
	}
	.blue {
		color: #007aff !important;
	}
	.green {
		color: #34c759 !important;
	}
	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 68rpx;
	}
	.status {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 26rpx;
		display: flex;
	}
	.number {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 26rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-family: PingFang SC;
		color: #333;
		.label {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	}
	.val {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		.remark {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.link {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-decoration: underline;
			color: #007aff;
			margin-top: 36rpx;
			text-decoration: underline;
		}
	}
	.tip {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin: 30rpx 0 27rpx;
		display: flex;
	}
	.label {
		width: 120rpx;
		flex-shrink: 0;
		margin-top: 5rpx;
	}
	.subTitle {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin: 15rpx 0 40rpx;
	}
	.btnBox {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.btn {
			width: 224rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #007aff;
			border-radius: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin-left: 16rpx;
		}
	}
}
</style>