<template>
|
<view class="learn-wrap">
|
<view class="content-title">
|
<view class="daohang-title">智慧工会</view>
|
<view class="learn-paihang-box">
|
<view class="lern-paihang-block learn-position">
|
<image class="huangguan3" src="../../static/icon/huangguan3.png" mode="aspectFill"></image>
|
<text class="name">{{paiMingNames[1].name}}</text>
|
<view class="time"><font class="teshu-bigger">{{paiMingNames[1].time}}</font>小时</view>
|
</view>
|
<view class="lern-paihang-block learn-position2">
|
<image class="huangguan3" src="../../static/icon/huangguan1.png" mode="aspectFill"></image>
|
<text class="name">{{paiMingNames[0].name}}</text>
|
<view class="time"><font class="teshu-bigger">{{paiMingNames[0].time}}</font>小时</view>
|
</view>
|
<view class="lern-paihang-block learn-position3">
|
<image class="huangguan3" src="../../static/icon/huangguan2.png" mode="aspectFill"></image>
|
<text class="name">{{paiMingNames[2].name}}</text>
|
<view class="time"><font class="teshu-bigger">{{paiMingNames[2].time}}</font>小时</view>
|
</view>
|
</view>
|
<view class="paiming-box">
|
<uni-list>
|
<uni-list-item :title="`我的排名: ${myPaiMing}`"></uni-list-item>
|
</uni-list>
|
</view>
|
</view>
|
<view class="learn-main">
|
<view class="learning-time-box">
|
<view class="learning-time-block learning-time-bj1">
|
<view class="learning-time-block-inside">
|
<view class="learning-time-num">
|
<font class="tehsu-big">{{time}}</font>小时
|
</view>
|
<text class="learn-text">学习总时长</text>
|
</view>
|
</view>
|
<view class="learning-time-block learning-time-bj2">
|
<view class="learning-time-block-inside">
|
<view class="learning-time-num">
|
<font class="tehsu-big">{{yearTime}}</font>小时
|
</view>
|
<text class="learn-text">本年学时</text>
|
</view>
|
</view>
|
<view class="learning-time-block learning-time-bj3">
|
<view class="learning-time-block-inside">
|
<view class="learning-time-num">
|
<font class="tehsu-big">{{monthTime}}</font>小时
|
</view>
|
<text class="learn-text">本月学时</text>
|
</view>
|
</view>
|
</view>
|
<view class="learn-ziliao-box">
|
<text class="learn-ziliao">学习资料</text>
|
<view class="learn-ziliao-main">
|
<view class="learn-ziliao-block" v-for="(item,index) in learnList" :key="index">
|
<view class="learn-ziliao-block-inside" @click="goTostudyData(item)">
|
<view>
|
<!-- {{item.fileType}} -->
|
<!-- <image class="shipin-img" :src="item.studyPath" mode="aspectFit"></image> -->
|
<image v-if="item.fileType == 0" class="shipin-img" src="../../static/img/pdfImg.jpg" mode="aspectFit"></image>
|
<image v-if="item.fileType == 1" class="shipin-img" src="../../static/img/shipinImg.png" mode="aspectFit"></image>
|
</view>
|
<view class="learn-ziliao-content">
|
<view class="neirong">
|
{{item.name}}
|
</view>
|
<view class="fuwenzi-box">
|
<!-- <view class="baifenbi">已经学88%</view> -->
|
<text class="time">{{item.createTime}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="zhanweifu"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
userInfo:{}, //个人信息
|
userId:'',
|
openid:'', //第一次登陆要填写
|
paimingVisable:false,
|
time:'', //总学时
|
yearTime:'', //本年学时
|
monthTime:'', //本月学时
|
myPaiMing:'', //我的排名
|
paiMingNames:[], //前三名
|
learnList:[],
|
pageParams:{
|
page:1,
|
pageSize:10
|
},
|
fileType:0, //文件类型 0:pdf 1:mp4
|
}
|
},
|
onLoad() {
|
this.login()
|
},
|
onReady() {
|
if(this.getStore('userInfo')) {
|
this.userInfo = this.getStore('userInfo')
|
this.userId = this.userInfo.id
|
this.findStudyIndex()
|
}
|
|
this.findByPage()
|
},
|
methods:{
|
login() {
|
uni.login({
|
provider: 'weixin',
|
success:(loginRes) => {
|
let code = loginRes.code
|
this.$u.api.loginwx({code:code}).then(res => {
|
if(res.success) {
|
this.userInfo = res.obj
|
this.setStore("userInfo",res.obj)
|
this.userId = res.obj.id
|
this.findStudyIndex()
|
}else if(!res.success) {
|
this.openid = res.obj
|
uni.redirectTo({
|
url: '/pages/login/login?openid=' + this.openid
|
})
|
}
|
})
|
}
|
})
|
},
|
goTostudyData(val) {
|
console.log('val-----',val.fileType)
|
this.$u.api.findById({id:val.id}).then(res => {
|
// uni.navigateTo({
|
// url:'/pagesA/pages/showhfive/showhfive?url=' + res.obj.studyPath
|
// })
|
let param = {
|
fileType: val.fileType
|
}
|
let url = '/pagesA/pages/showhfive/showhfive';
|
this.$navTo.togo( url, { 'url': res.obj.studyPath, 'fileType': val.fileType, 'id':val.id, 'name': res.obj.name})
|
})
|
},
|
findStudyIndex() { //学习首页接口
|
this.$u.api.findStudyIndex({userId:this.userId}).then(res => {
|
this.time = res.obj.time
|
this.yearTime = res.obj.yearTime
|
this.monthTime = res.obj.monthTime
|
this.myPaiMing = res.obj.myPaiMing
|
this.paiMingNames = res.obj.paiMing
|
})
|
},
|
findByPage() { //学习资料列表
|
this.$u.api.findByPage(this.pageParams).then(res => {
|
this.learnList = res.obj.content
|
|
})
|
|
},
|
openPaiMing() {
|
this.$refs.popup.open()
|
},
|
close() {
|
this.$refs.popup.close()
|
}
|
}
|
}
|
</script>
|
|
</style>
|
<style lang="scss" scoped>
|
/deep/ .uni-list{
|
background-color: transparent;
|
}
|
/deep/ .uni-list-item{
|
background-color: transparent;
|
}
|
/deep/ .uni-list-item__content-title{
|
color: #fff;
|
}
|
.learn-wrap{
|
width: 100%;
|
overflow-x: hidden;
|
}
|
.content-title{
|
background: $learn-title-bj;
|
background-size: 100% 100%;
|
width: 100%;
|
height: 544rpx;
|
padding-top: 40rpx;
|
.daohang-title {
|
text-align: center;
|
color: #fff;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 40rpx;
|
}
|
}
|
.learn-paihang-box{
|
background: $learn-paihang-bj;
|
background-size: 100% 100%;
|
width: 719rpx;
|
height: 230rpx;
|
box-shadow: 0px 6px 6px rgba(0,0,0,0.1);
|
margin: 100rpx auto 0;
|
position: relative;
|
}
|
.lern-paihang-block{
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
align-items: center;
|
.huangguan3{
|
width: 74rpx;
|
height: 74rpx;
|
}
|
.name{
|
font-size: 30rpx;
|
color: #000000;
|
}
|
.time{
|
color: #e83030;
|
font-size: 22rpx;
|
.teshu-bigger{
|
font-size: 36rpx;
|
}
|
}
|
}
|
.learn-position{
|
position: absolute;
|
left: 40rpx;
|
top:64rpx;
|
}
|
.learn-position2{
|
position: absolute;
|
left: 50%;
|
top:40rpx;
|
transform: translateX(-50%);
|
.huangguan3{
|
width: 84rpx;
|
height: 84rpx;
|
}
|
.name{
|
font-size: 32rpx;
|
}
|
.time{
|
.teshu-bigger{
|
font-size: 42rpx;
|
font-weight: 550;
|
}
|
}
|
|
}
|
.learn-position3{
|
position: absolute;
|
right: 40rpx;
|
top:64rpx;
|
}
|
.learning-time-box{
|
display: flex;
|
}
|
.learning-time-block{
|
flex: 1;
|
margin: 20rpx;
|
width: 202rpx;
|
height: 156rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.learning-time-block-inside{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-right: 20rpx;
|
margin-top: 20rpx;
|
}
|
.learning-time-num{
|
font-size: 24rpx;
|
.tehsu-big{
|
font-size: 44rpx;
|
}
|
}
|
.learn-text{
|
font-size: 24rpx;
|
line-height: 2;
|
}
|
}
|
.learning-time-bj1{
|
background: $learn-time-bj1;
|
background-size: 100% 100%;
|
.learning-time-num{
|
color: #ff4e00;
|
}
|
.learn-text{
|
color: #ff4e00;
|
}
|
}
|
.learning-time-bj2{
|
background: $learn-time-bj2;
|
background-size: 100% 100%;
|
.learning-time-num{
|
color: #ff0767;
|
}
|
.learn-text{
|
color: #ff0767;
|
}
|
}
|
.learning-time-bj3{
|
background: $learn-time-bj3;
|
background-size: 100% 100%;
|
.learning-time-num{
|
color: #9e03ff;
|
}
|
.learn-text{
|
color: #9e03ff;
|
}
|
}
|
.learn-main{
|
width: 100%;
|
padding: 20rpx 20rpx 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
.learn-ziliao{
|
font-size: 30rpx;
|
text-align: center;
|
color: #ff4e00;
|
line-height: 2.5;
|
position: relative;
|
display: block;
|
|
&:after {
|
content: '';
|
width: 60rpx;
|
height: 6rpx;
|
border-radius: 30rpx;
|
background-color: #ff4e00;
|
position: absolute;
|
bottom: 8rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
.learn-ziliao-main{
|
.shipin-img{
|
width: 280rpx;
|
height: 155rpx;
|
}
|
width: 100%;
|
padding: 0 10rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
.learn-ziliao-block{
|
display: flex;
|
flex-direction: column;
|
margin-top: 40rpx;
|
}
|
.learn-ziliao-block-inside{
|
display: flex;
|
}
|
.zhanweifu{
|
width: calc(100% + 60rpx);
|
transform: translateX(-30rpx);
|
height: 20rpx;
|
background-color: #f9f9f9;
|
margin-top: 40rpx;
|
}
|
.learn-ziliao-content{
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
justify-content: space-around;
|
margin-left: 20rpx;
|
.neirong{
|
color: #33404d;
|
font-size: 30rpx;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.fuwenzi-box{
|
display: flex;
|
justify-content: space-between;
|
.baifenbi{
|
background-color: rgba(255,78,0,0.14);
|
border-radius: 50rpx;
|
color:#ff4e00;
|
font-size: 22rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 20rpx;
|
}
|
.time{
|
font-size: 24rpx;
|
color: #939393;
|
}
|
}
|
}
|
}
|
|
</style>
|
