zc_saas_h5/pages2/learn/my_learn.vue

<template>
	<view class="safeArea">
		<nav-bar title="目录"></nav-bar>
		<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" v-if="listData.length == 0">您暂无相关学时审核记录哦~</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>
							<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,index)">课程学习</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,index)">预约考试</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,index)">进入刷题</view></view>
							</view>
						</view>

						<view v-if="item.periodStatus === 3 && item.rebuildStatus === 0">
							<view class="btnBox"><view class="btn" @click="jumpPage(item, 4,index)">查看详情</view></view>
						</view>
						<view v-if="item.periodStatus === 3 && item.rebuildStatus === 1">
							<view class="btnBox"><view class="btn" @click="jumpPage(item, 5,index)">重修目录</view></view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="current === 1">
				<view class="noData" v-if="listData.length == 0">您暂无相关学习凭证记录哦~</view>
				<view class="learnItem card" v-for="(item,index) in listData" :key="index">
					<view class="title">{{item.title}}</view>
					<view class="number">
						<text class="label">编号：</text>
						{{item.certificateCode}}
					</view>
					<view class="btnBox">
						<view class="btn" @click="showPhoto(item)">电子照片</view>
						<!-- <view class="btn" @click="downloadCard(item)">下载凭证</view> -->
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			loading:false,
			current: 0,
			list: [
				{
					name: '学时审核'
				},
				{
					name: '学习凭证'
				}
			],
			param:{
				pageNum:1,
				pageSize:10
			},
			total:0,
			itemIndex:'',
			listData: []
		};
	},
	onLoad(option) {
		this.getcourseperiodlistGoods();
	},
	onShow() {
		if(this.itemIndex !== '') {
			if(this.current == 0) {
				this.refreshByIndex();
			}
			
		}
	},
	onReachBottom() {
		if(this.listData.length < this.total) {
			this.param.pageNum++;
			if(this.current == 0) {
				this.getcourseperiodlistGoods();
			} else if(this.current == 1){
				this.getUserCertificateList();
			}
		}
	},
	methods: {
		refreshByIndex() {
			this.$api.getcourseperiodlistGoods({
				pageNum:this.itemIndex + 1,
				pageSize:1
			}).then(res => {
				if (res.data.code === 200) {
					this.$set(this.listData,this.itemIndex,res.data.rows[0])
				}
			});
		},
		copyText() {
			uni.setClipboardData({
				data: 'http://gdzczx.gdcic.net/',
				success: () => {
					//复制成功的回调函数
					uni.showToast({
						//提示
						title: '复制成功'
					});
				}
			});
		},
		jumpPage(v, int,index) {
			this.itemIndex = index;
			//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) {
				this.appBeforeAddress(v.goodsId)
			}
			if (int === 4) {
				this.$navTo.togo(`/pages2/learn/details?goodsId=${v.goodsId}&gradeId=${v.gradeId}`);
			}
			if (int === 5) {
				this.$navTo.togo(`/pages2/wd/course?id=${v.goodsId}&gid=${v.gradeId}`);
			}
		},
		getUserCertificateList() {
			this.loading = true;
			this.$api.getUserCertificateList(this.param).then(res => {
				this.loading = false;
				if (res.data.code === 200) {
					this.listData = [...this.listData,...res.data.rows];
					this.total = res.data.total;
				}
			}).catch(err => {
				this.loading = false;
			})
		},
		getcourseperiodlistGoods() {
			this.loading = true;
			this.$api.getcourseperiodlistGoods(this.param).then(res => {
				this.loading = false;
				if (res.data.code === 200) {
					this.listData = [...this.listData,...res.data.rows];
					this.total = res.data.total;
				}
			}).catch(err => {
				this.loading = false;
			})
		},
		appBeforeAddress(goodsId) {
			this.$api.appBeforeAddress({
				goodsId
			}).then(res => {
				if(res.data.code == 200) {
					uni.navigateToMiniProgram({
					  appId: res.data.data.url,
					  success(res) {
					    // 打开成功
					  }
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
					})
				}
			})
		},
		change(index) {
			if(this.loading) {
				return;
			}
			this.current = index;
			this.listData = [];
			this.total = 0;
			this.param = {
				pageNum:1,
				pageSize:10
			};
			if(this.current == 0) {
				this.getcourseperiodlistGoods();
			} else if(this.current == 1){
				this.getUserCertificateList();
			}
		},
		showPhoto(item) {
			
			// 预览图片
			uni.previewImage({
				urls: [this.$method.splitImgHost(item.certificatePath,true,1000)],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		downloadCard(item) {
			console.log(this.$method.splitImgHost(item.certificatePath,true))
			uni.downloadFile({
			  url: this.$method.splitImgHost(item.certificatePath,true),
			  success: function (res) {
				  console.log(res,'res')
			    var filePath = res.tempFilePath;
			    uni.openDocument({
			      filePath: filePath,
			      showMenu: true,
			      success: function (res) {
			        console.log(res,'打开文档成功');
			      },
				  fail:function(err) {
					  console.log(err)
				  }
			    });
			  }
			});
		}
	},
	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 {
	position: relative;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx 32rpx 0;
	font-family: PingFang SC;
	margin-bottom: 16rpx;
	overflow: hidden;
	
	&.card {
		
		&::before {
			content:'';
			width:20rpx;
			height:20rpx;
			position:absolute;
			background:#eaeef1;
			left:-10rpx;
			bottom:80rpx;
			border-radius: 50%;
		}
		
		&::after {
			content:'';
			width:20rpx;
			height:20rpx;
			position:absolute;
			background:#eaeef1;
			right:-10rpx;
			bottom:80rpx;
			border-radius: 50%;
		}
	}
	
	.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>