添加证书

pages/certificate/certificate.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="page">
+		<z-nav-bar title="我的证书"></z-nav-bar>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="list" v-if="certificateList.length > 0">
+			<view class="item" v-for="(item,index) in certificateList" :key="index">
+				<view class="flex_box">
+					<h3>编号：{{item.certificateNo}}</h3>					
+				</view>
+				<view class="imgBox flex_box flex_between" >
+					<view class="img" v-for="(item1,index1) in item.certificateUrlList" :key="index1">
+						<image @click="preveImg(item1)" :src="item1" mode="widthFix"></image>
+					</view>		
+					<view class="info flex_box align-items_box">
+						<text class="small_btn border_radius_10 moreBtn" @click="showMore(item)">详细信息</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="" v-else>
+			<u-divider text="您还未获得证书"></u-divider>
+		</view>
+		<u-popup key="1" :show="showTestTips" :round="10" @close="closeManager">
+			<view class="padd20 " v-if="thisInfo">
+				<view class="mtb20" style="text-align: center;">
+					<h3>证书详情</h3>
+				</view>
+				
+				<view class="info">
+					<view>证书类型：{{thisInfo.type}}</view>
+					<view>获得时间：{{thisInfo.createTime}}</view>					
+					<view class="">
+						获得途径：{{thisInfo.title}}学习获得
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		<z-navigation></z-navigation>
+	</view>
+</template>
+<script>
+	import $http from '@/config/requestConfig.js';
+	// import permission from "@/js_sdk/wa-permission/permission.js"
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				certificateList: [],
+				showTestTips:false,
+				thisInfo : undefined
+			}
+		},
+		//第一次加载
+		onLoad(e) {
+			console.log('收到的值', e);
+			// this.pageType = e.type
+		},
+		//页面显示
+		onShow() {
+			this.getList()
+		},
+		beforeDestroy() {
+
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		//方法
+		methods: {
+			// 图片预览
+			preveImg(url) {
+				console.log('dianjile fangda tu');
+				uni.previewImage({
+					urls: [url],
+					current: 0
+				});
+			},
+			// 获取班级详情
+			getList() {
+				// console.log('获取课程详情');
+				uni.showLoading({
+					title: '正在加载'
+				})
+				$http.request({
+						url: "common/userCertificate/getUserCertificateList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							res.certificateList.forEach(item => {
+								item.certificateUrl && item.certificateUrl != '' ? item.certificateUrlList = item.certificateUrl.split(',') : item.certificateUrlList = []
+							})
+							this.certificateList = res.certificateList
+						} else {
+							this.certificateList = []
+						}
+						console.log('证书接口请求结果', res);
+						uni.hideLoading()
+					}).catch(e => {
+						uni.hideLoading()
+						console.log(e, '数据报错')
+
+						// this.status = 3
+						uni.showToast({
+							title: e.errMsg,
+							icon: 'error'
+						})
+					});
+			},
+			closeManager(){
+				this.showTestTips = false
+				this.thisInfo = undefined
+			},
+			showMore(item){
+				this.thisInfo = item
+				this.showTestTips = true
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+	
+	.page {
+		background-color: #ffffff;
+		padding: 0 20rpx;
+		min-height: 100vh;
+	}
+	.item{margin-bottom: 20rpx;
+	h3{font-weight: normal; margin: 20rpx 0;}
+	}
+	.img{width: 36%; overflow: hidden;
+		image{width: 100%; height: 100%;}
+	} 
+	.imgBox{overflow: hidden;}
+	.moreBtn{
+		color: #55aaff; border: #55aaff 1px solid;
+	}
+	.padd20{padding: 20rpx;}
+	.mtb20{margin-bottom: 20rpx;}
+</style>