mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
318 lines
7.9 KiB
Vue
318 lines
7.9 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="uc-box" style="margin-top: -80upx;">
|
||
<!-- 学习时长模块 -->
|
||
<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('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('myArticles')">
|
||
<view class="one-img">
|
||
<img src="../../static/images/artical.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/text.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 userApi from "@/api/system/user";
|
||
import {userAvatarText} from '@/utils/tools.js';
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
avatarText(){
|
||
return userAvatarText(this.userInfo.name);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
userInfoObj:{
|
||
// sex:null,
|
||
account:{
|
||
nickName:''
|
||
}
|
||
},
|
||
msgNumber:11,
|
||
show: false,
|
||
zoom: true,
|
||
//徽标
|
||
type: "error",
|
||
value: 11
|
||
}
|
||
},
|
||
onShow() {
|
||
this.userInfoObj=this.userInfo;
|
||
//console.log(this.userInfoObj,"我拿到的数据")
|
||
},
|
||
onload(){
|
||
//this.load()
|
||
|
||
},
|
||
methods: {
|
||
navigateTo(u) {
|
||
uni.navigateTo({
|
||
url: u
|
||
})
|
||
},
|
||
},
|
||
components: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.peo{
|
||
width: 80px;
|
||
height: 80px;
|
||
|
||
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;
|
||
background: url('../../static/images/bg.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: 35px;
|
||
height:35px;
|
||
}
|
||
}
|
||
.one-text{
|
||
font-weight: 500;
|
||
font-size: 26upx;
|
||
color: #585858;
|
||
}
|
||
.one-num{
|
||
position: absolute;
|
||
top:15px;
|
||
right: 0px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
</style>
|