mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-07 01:46:44 +08:00
648 lines
17 KiB
Vue
648 lines
17 KiB
Vue
<template>
|
||
<view>
|
||
<view class="mytop">
|
||
<view class="mytop-bell" style="height: 60upx;display: flex;justify-content:space-between;color:#ffffff;">
|
||
<view><!--此处比较空白 ，以后增加一内容--> </view>
|
||
<!-- <view @click="system()" style="padding: 20upx 30upx 5upx 0upx;">
|
||
<view style="position: absolute;top:10px;right: 10px;z-index: 999;">
|
||
<u-badge :max="99" :value="99" shape="circle"></u-badge>
|
||
</view>
|
||
<u-icon name="bell" color="#ffffff" :size="30"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
<view class="top-user" style="">
|
||
<view class="top-user-left">
|
||
<view class="top-user-name" style="font-size: 1.8em;">
|
||
{{userInfoObj.name}}
|
||
</view>
|
||
<view class="" style="margin-top: 8px;">
|
||
{{userInfoObj.userNo}}
|
||
</view>
|
||
<view class="" style="margin-top: 8px;">
|
||
学习时长：{{userInfoObj.studyTotalH}}小时
|
||
<!-- 没找到这个字段 -->
|
||
</view>
|
||
</view>
|
||
<view class="top-user-right" @click="navigateTo('setting')">
|
||
<view>
|
||
<u-avatar v-if="userInfoObj.avatar" :size="80" :src="userInfoObj.avatar"></u-avatar>
|
||
<u-avatar v-else class="uavatar" font-size="66" :size="80" bg-color="#d9e9ff">
|
||
<view class="peo" v-if="userInfoObj.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
|
||
<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
|
||
|
||
</u-avatar>
|
||
</view>
|
||
<view style="padding-top: 50upx;">
|
||
<u-icon name="arrow-right" color="#ffffff" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="myhead">
|
||
<view class="head-box">
|
||
<view class="hear-avatar">
|
||
<view>
|
||
<u-avatar v-if="userInfoObj.avatar" :size="60" :src="userInfoObj.avatar"></u-avatar>
|
||
<u-avatar v-else class="uavatar" font-size="66" :size="60" bg-color="#d9e9ff">
|
||
<view class="peo" v-if="userInfoObj.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
|
||
<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
|
||
</u-avatar>
|
||
</view>
|
||
</view>
|
||
<view class="hear-info">
|
||
<view class="info-name index-one-line-ellipsis">
|
||
{{userInfoObj.name}} <!-- <text>{{ userData.sign }}</text> -->
|
||
</view>
|
||
<view class="information">
|
||
<text class="grade">{{ statData.level }}</text>
|
||
<view class="Progress">
|
||
<text>{{statData.evalue}}/{{statData.levelMaxValue}}</text>
|
||
<u-line-progress :showText="false" :percentage="statData.progress" activeColor="#007DFF" height="4"></u-line-progress>
|
||
</view>
|
||
<view class="edit" @click="navigateTo('setting')">
|
||
<text>编辑资料</text><u-icon style="float: right;margin-top: 12px;" name="arrow-right" size="8"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="my-asset">
|
||
<view>
|
||
<text>{{statData.uvalue}}</text>
|
||
U币
|
||
|
||
</view>
|
||
<text class="asset-border"></text>
|
||
<view>
|
||
<text>{{ statData.totalStudyHour }}<i style="color: #999999;font-size: 24upx;font-style:normal;padding-left:5upx">h</i></text>
|
||
学习时长
|
||
|
||
</view>
|
||
<text class="asset-border"></text>
|
||
<view @click="navigateTo('follow?type=1')">
|
||
<text>{{ concernme }}</text>
|
||
关注我的
|
||
</view>
|
||
<text class="asset-border"></text>
|
||
<view @click="navigateTo('follow?type=2')">
|
||
<text>{{ myconcern }}</text>
|
||
我的关注
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="uc-box" style="margin-top: -260upx;display: none;">
|
||
<!-- 学习时长模块 -->
|
||
<!-- <view class="uc-box-items">
|
||
<view class="one" @click="navigateTo('toMeShares')">
|
||
<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px;">
|
||
<img style="width: 40px;height:40px;" src="../../static/images/toShare.png">
|
||
</view>
|
||
<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
|
||
分享给我的
|
||
</view>
|
||
</view>
|
||
<view class="one" @click="navigateTo('myShares')">
|
||
<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px">
|
||
<img style="width: 40px;height:40px;" src="../../static/images/meSh.png">
|
||
</view>
|
||
<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
|
||
我分享的
|
||
</view>
|
||
</view>
|
||
<view class="one" @click="navigateTo('myFavorites')">
|
||
<view class="" style="font-weight: 600;font-size:22px;margin-top: 30px">
|
||
<img style="width: 40px;height:40px;" src="../../static/images/collect.png">
|
||
</view>
|
||
<view class="" style="font-weight: 500;font-size: 28upx;color: #585858;">
|
||
我收藏的
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 学习内容模块 -->
|
||
<view class="uc-box">
|
||
<view class="uc-box-con">
|
||
<u-grid :border="false">
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myub')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/myubicon.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的u币
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myMedal')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/mymedalicon.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的勋章
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
|
||
<template v-if="showGrowthNav">
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('growth')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/growth.jpg">
|
||
</view>
|
||
<view class="one-text">
|
||
专业力必修
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
</template>
|
||
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('growth')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/growth.jpg">
|
||
</view>
|
||
<view class="one-text">
|
||
专业力必修
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('rankingList')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/rankingicon.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的排行榜
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="navigateTo('toMeComments')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/l1.png">
|
||
</view>
|
||
<view class="one-text">
|
||
@我的
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="navigateTo('myQuestions')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/que.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我提问的
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="navigateTo('myAnswers')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/answer.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我回答的
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="toStudyTask()">
|
||
<view class="one-img">
|
||
<img src="../../static/images/stuR.png">
|
||
</view>
|
||
<view class="one-text">
|
||
学习任务
|
||
</view>
|
||
<view class="one-num">
|
||
<u-badge numberType="overflow" max="99" :value="value" shape="circle"></u-badge>
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="toStuding(1)">
|
||
<view class="one-img">
|
||
<img src="../../static/images/studing.png">
|
||
</view>
|
||
<view class="one-text">
|
||
自主学习
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="toStudyHistory()">
|
||
<view class="one-img">
|
||
<img src="../../static/images/his.png">
|
||
</view>
|
||
<view class="one-text">
|
||
历史记录
|
||
</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myAssesses')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/Evaluation.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的测评
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myArticles')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/articon.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的文章
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myQa')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/interlocu.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的问答
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myFavorites')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/colle.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我的收藏
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('myShares')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/mycentericon.png">
|
||
</view>
|
||
<view class="one-text">
|
||
我分享的
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="one" @click="navigateTo('toMeShares')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/center/shareme.png">
|
||
</view>
|
||
<view class="one-text">
|
||
分享给我的
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="navigateTo('setting')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/per.png">
|
||
</view>
|
||
<view class="one-text">个人设置</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
<!-- <u-grid-item>
|
||
<view class="one" @click="navigateTo('/pages/my/message')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/que.png">
|
||
</view>
|
||
<view class="one-text">消息</view>
|
||
</view>
|
||
</u-grid-item> -->
|
||
</u-grid>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import apiUser from "@/api/system/user";
|
||
import {userAvatarText} from '@/utils/tools.js';
|
||
import apiStart from '@/api/phase2/stat.js';
|
||
import apiFollow from "@/api/phase2/userfollow.js";
|
||
import { studentGrowthList } from "@/api/modules/growth";
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
avatarText(){
|
||
return userAvatarText(this.userInfo.name);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showGrowthNav:false,
|
||
concernme:'',
|
||
myconcern:'',
|
||
userInfoObj:{
|
||
// sex:null,
|
||
account:{
|
||
nickName:''
|
||
}
|
||
},
|
||
msgNumber:11,
|
||
show: false,
|
||
zoom: true,
|
||
//徽标
|
||
type: "error",
|
||
value: 11,
|
||
userData:{
|
||
aid: "",
|
||
avatar: "",
|
||
code: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
sex: '',
|
||
sign: "",
|
||
},
|
||
statData:{
|
||
evalue: 0,//经验值
|
||
level: "LV1",//级别
|
||
monthStudyHour:0,//当月学习时长
|
||
totalStudyHour: 0, //累计学习时长
|
||
monthStudyDays:0, //当月学习天数
|
||
totalStudyDays:0, //累计学习天数
|
||
levelMaxValue:0,
|
||
progress:0,
|
||
uvalue:0 //U币数量
|
||
},
|
||
}
|
||
},
|
||
onShow() {
|
||
this.userInfoObj=this.userInfo;
|
||
// console.log(this.userInfoObj,"我拿到的数据")
|
||
studentGrowthList().then(res =>{
|
||
this.showGrowthNav = !!res.data.length
|
||
})
|
||
},
|
||
onload(){
|
||
//this.load()
|
||
|
||
},
|
||
mounted() {
|
||
this.loadUserStat();
|
||
this.Followto();
|
||
},
|
||
methods: {
|
||
|
||
Followto(){
|
||
apiFollow.counts(this.userInfoObj.aid).then(res => {
|
||
this.concernme = res.result.passive;
|
||
this.myconcern = res.result.initiative;
|
||
})
|
||
},
|
||
navigateTo(u) {
|
||
uni.navigateTo({
|
||
url: u
|
||
})
|
||
},
|
||
loadUserStat(){//获取经验值和等级
|
||
apiUser.getByIds([this.userInfoObj.aid]).then(res => {
|
||
if (res.status == 200) {
|
||
this.userData = res.result[0];
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
apiStart.getUserStatTotalInfo(this.userInfoObj.aid).then(res=>{
|
||
if(res.status == 200) {
|
||
this.statData.evalue = res.result.evalue;
|
||
this.statData.level = res.result.level;
|
||
this.statData.monthStudyHour = res.result.monthStudyHour;
|
||
this.statData.totalStudyHour = res.result.totalStudyHour;
|
||
this.statData.monthStudyDays = res.result.monthStudyDays;
|
||
this.statData.totalStudyDays = res.result.totalStudyDays;
|
||
this.statData.levelMaxValue = res.result.levelMaxValue;
|
||
this.statData.uvalue = res.result.uvalue;
|
||
this.statData.progress = (res.result.evalue/res.result.levelMaxValue)*100;
|
||
this.medalList=res.result.medalList;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
components: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index-one-line-ellipsis{
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
word-wrap: break-word;
|
||
word-break:break-all;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp:1;
|
||
}
|
||
.myhead{
|
||
height: 510upx;
|
||
background: url('../../static/images/centerbg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 0 34upx;
|
||
padding-top: 60upx;
|
||
box-sizing: border-box;
|
||
.head-box {
|
||
padding-top: 100upx;
|
||
width: 100%;
|
||
height: 120upx;
|
||
display: flex;
|
||
.hear-avatar{
|
||
width: 120upx;
|
||
margin-right: 28upx;
|
||
}
|
||
.hear-info{
|
||
flex: 1;
|
||
.info-name{
|
||
font-size: 36upx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text{
|
||
font-size: 28upx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 26upx;
|
||
}
|
||
}
|
||
.information{
|
||
display: flex;
|
||
.grade{
|
||
margin-top: 12upx;
|
||
display: inline-block;
|
||
width: 102upx;
|
||
height: 44upx;
|
||
background: #DEEEFF;
|
||
font-size: 24upx;
|
||
color: #387DF7;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 44upx;
|
||
border-radius: 20upx;
|
||
}
|
||
.Progress{
|
||
flex: 1;
|
||
width: 100%;
|
||
margin-left: 22upx;
|
||
text{
|
||
font-size: 24upx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.edit{
|
||
margin-left: 80upx;
|
||
text{
|
||
float: left;
|
||
line-height: 60upx;
|
||
display: inline-block;
|
||
font-size: 24upx;
|
||
color: #333333;
|
||
font-weight: 400;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.my-asset{
|
||
border-radius: 8upx;
|
||
width: 100%;
|
||
height: 190upx;
|
||
background-color: #fff;
|
||
margin-top: 44upx;
|
||
display: flex;
|
||
view{
|
||
box-sizing: border-box;
|
||
padding-top: 60upx;
|
||
// padding-left: 40upx;
|
||
padding-bottom: 40upx;
|
||
flex: 1;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 24upx;
|
||
text{
|
||
display: block;
|
||
font-size: 32upx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
margin-bottom: 16upx;
|
||
}
|
||
}
|
||
.asset-border{
|
||
display: inline-block;
|
||
width: 2upx;
|
||
height: 36upx;
|
||
margin-top: 80upx;
|
||
opacity: 0.6;
|
||
background-color: #ddd;
|
||
border: 1px solid #ddd;
|
||
border-radius: 10upx;
|
||
|
||
}
|
||
}
|
||
}
|
||
.peo{
|
||
width: 120upx;
|
||
height: 120upx;
|
||
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.uavatar{
|
||
// border: 2upx solid #d9e9ff;
|
||
// color: #fff;
|
||
// text-align: center;
|
||
// font-size: 50upx;
|
||
// line-height: 500upx;
|
||
// border-radius: 50%;
|
||
}
|
||
.mytop {
|
||
height: 200px;
|
||
display: none;
|
||
// background: url('../../static/images/centerbg.png')
|
||
}
|
||
.top-user{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #FFFFFF;
|
||
.top-user-left{
|
||
padding-left: 40upx;
|
||
}
|
||
.top-user-right{
|
||
padding-right: 20upx;
|
||
padding-top: 30upx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
.top-right img {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
margin-bottom: -40px;
|
||
|
||
}
|
||
.uc-box{
|
||
margin: 10upx;
|
||
padding: 20upx;
|
||
.uc-box-con{
|
||
box-shadow: #F1F6FE 0px 6px 5px;
|
||
background-color: #FFFFFF;
|
||
border-radius: 17px;
|
||
}
|
||
.uc-box-items{
|
||
height: 114px;
|
||
background-color: #FFFFFF;
|
||
border-radius: 17px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-shadow: #F1F6FE 0px 6px 5px;
|
||
padding: 0upx 50upx 40upx 50upx;
|
||
}
|
||
}
|
||
.one {
|
||
position: relative;
|
||
text-align: center;
|
||
padding-bottom: 40upx;
|
||
|
||
.one-img{
|
||
font-weight: 600;
|
||
margin-top: 24px;
|
||
img{
|
||
width: 48upx;
|
||
height:48upx;
|
||
}
|
||
}
|
||
.one-text{
|
||
font-weight: 500;
|
||
font-size: 24upx;
|
||
color: #333;
|
||
}
|
||
.one-num{
|
||
position: absolute;
|
||
top:15px;
|
||
right: 0px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
</style>
|