152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<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> |