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' : ''"
						>
							<text>
								{{
									item.periodStatus === -1
										? '不可审核'
										: item.periodStatus === 1
										? '机构审核通过'
										: item.periodStatus === 2
										? '等待审核'
										: item.periodStatus === 3
										? '机构审核不通过'
										: ''
								}}
							</text>
							\n
							<view v-if="item.periodStatus === 3" style="font-size: 24rpx;color:#666;">
								有
								<text style="color:#FF3B30;">{{ item.rebuild }}节</text>
								需要重修
							</view>
						</view>
					</view>

					<view class="tip" v-if="item.periodStatus === 1">
						<view class="label">审核提示：</view>
						<view>
							机构已审核通过，需等待注册中心复审后即可获得继续教育学时。审核时间约15个工作日，届时请前往官网申请证书延期。
							<view class="copySty" @tap="copyText">复制官网链接</view>
						</view>
					</view>
					<view class="tip" v-else>
						<view class="label">审核提示：</view>
						<view class="val color666" v-if="item.periodStatus === -1">您的学时还未修完，请尽快完成课程学习</view>
						<view class="val color666" v-if="item.periodStatus === 2">学习完成后7-15个工作日完成学时审核。</view>
						<view class="val color666" v-if="item.periodStatus === 3">请查看需重学记录，并及时重学对应课程，以免延误学时审核进度。</view>
					</view>
					<view v-if="item.periodStatus !== 2">
						<u-line color="#EEEEEE" />
						<view v-if="item.periodStatus === -1">
							<view class="btnBox"><view class="btn" @click="jumpPage(item, 1)">课程学习</view></view>
						</view>
						<view>
							<view v-if="item.periodStatus === 1 && item.applyStatus === 1">
								<view class="subTitle">{{ item.applyName }}</view>
								<view class="btnBox"><view class="btn" @click="jumpPage(item, 2)">预约考试</view></view>
							</view>
							<u-line color="#EEEEEE" v-if="item.periodStatus === 1 && item.applyStatus === 1" />
							<view v-if="item.periodStatus === 1 && item.beforeStatus === 1">
								<view class="subTitle">{{ item.beforeName }}</view>
								<view class="btnBox"><view class="btn" @click="jumpPage(item, 3)">进入刷题</view></view>
							</view>
						</view>

						<view v-if="item.periodStatus === 3 && item.rebuildStatus === 0">
							<view class="btnBox"><view class="btn" @click="jumpPage(item, 4)">查看详情</view></view>
						</view>
						<view v-if="item.periodStatus === 3 && item.rebuildStatus === 1">
							<view class="btnBox"><view class="btn" @click="jumpPage(item, 5)">重修目录</view></view>
						</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) {},
	onShow() {
		this.getInfos();
	},
	methods: {
		copyText() {
			uni.setClipboardData({
				data: 'http://gdzczx.gdcic.net/',
				success: () => {
					//复制成功的回调函数
					uni.showToast({
						//提示
						title: '复制成功'
					});
				}
			});
		},
		jumpPage(v, int) {
			//int 1.课程学习 2.预约考试 3.进入刷题 4.查看详情 5.重修目录
			if (int === 1) {
				this.$navTo.togo(`/pages2/wd/course?id=${v.goodsId}&gid=${v.gradeId}`);
			}
			if (int === 2) {
				this.$navTo.togo(`/pages2/appointment/index?goodsId=${v.goodsId}&gradeId=${v.gradeId}`);
			}
			if (int === 3) {
				uni.showModal({
					content: '待开发',
					showCancel: false
				});
			}
			if (int === 4) {
				this.$navTo.togo(`/pages2/learn/details?goodsId=${v.goodsId}&gradeId=${v.gradeId}`);
			}
			if (int === 5) {
				this.$navTo.togo('/pages2/course/detail?id=' + v.goodsId);
			}
		},
		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">
.copySty {
	color: #007aff;
	text-decoration: underline;
}
.color666 {
	color: #666;
}
.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>