528 lines
13 KiB
Vue
528 lines
13 KiB
Vue
<template>
|
||
<view class="main_div max_page">
|
||
<nav-bar :is_seat="false"></nav-bar>
|
||
<view class="bg_div">
|
||
<image src="/static/images/me/bg.png" class="bg_img"></image>
|
||
<view class="user_data_div">
|
||
<!-- 用户个人信息 -->
|
||
<view class="personal_information">
|
||
<view class="profile" @click="click_update_avatar()">
|
||
<image class="img_100" v-if="user_info.imagePath" :src="user_info.imagePath"></image>
|
||
<image-preview
|
||
v-else-if="user_info.imageAddr"
|
||
class="img_100"
|
||
:src="user_info.imageAddr"
|
||
></image-preview>
|
||
<image v-else class="img_100" :src="defaultAvatarSrc"></image>
|
||
</view>
|
||
<view class="personal_information_data">
|
||
<view class="name_sex_div">
|
||
<view class="name">
|
||
{{ user_info.userName }}
|
||
</view>
|
||
<view class="sex">
|
||
<image
|
||
v-if="user_info.gender === 'f'"
|
||
class="img_100"
|
||
src="/static/images/me/wuman.png"
|
||
></image>
|
||
<image
|
||
v-if="user_info.gender === 'm'"
|
||
class="img_100"
|
||
src="/static/images/me/man.png"
|
||
></image>
|
||
</view>
|
||
<view class="fl1"></view>
|
||
</view>
|
||
<view class="work_number_div">工号：{{ user_info.loginName }}</view>
|
||
<view class="fl1"></view>
|
||
</view>
|
||
<!-- 显示当前选中的徽章 -->
|
||
<!-- <view class="dan" @click="changeBadge">
|
||
<view class="dan_img">
|
||
<image
|
||
class="img_100"
|
||
:src="`/static/images/me/${badgeList[currentIndex].png}`"
|
||
mode="heightFix"
|
||
alt="当前徽章"
|
||
></image>
|
||
</view>
|
||
<view class="dan_text">{{ badgeList[currentIndex].name }}</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 用户学习时间信息 -->
|
||
<view class="study_information">
|
||
<view class="item">
|
||
<view class="top">我的积分</view>
|
||
<view class="bottom">
|
||
<uv-count-to :startVal="0" :endVal="0" :useEasing="true" ref="accmTaskCntRef"></uv-count-to>
|
||
</view>
|
||
</view>
|
||
<view class="item-interval"></view>
|
||
<view class="item">
|
||
<view class="top">徽章墙</view>
|
||
<view class="bottom">
|
||
<uv-count-to :startVal="0" :endVal="0" :useEasing="true" ref="accmTaskCntRef"></uv-count-to>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 4个导航 -->
|
||
<view class="navigation_div">
|
||
<!-- <uv-scroll-list class="scroll-view"> -->
|
||
<!-- <scroll-view scroll-x="true" :show-scrollbar="false"> -->
|
||
<view class="scroll-view-item">
|
||
<view class="item" @click="common.navigateTo('/pages/courseRecord/index')">
|
||
<image class="icon" src="@/static/images/me/study.png"></image>
|
||
<view class="title">课程记录</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="scroll-view-item" @click="common.navigateTo('/pages/examinationRecord/index')">
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/me/report.png"></image>
|
||
<view class="title">考试记录</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll-view-item">
|
||
<view class="item">
|
||
<image class="icon" src="@/static/images/me/todo.png"></image>
|
||
<view class="title">AI陪练记录</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll-view-item">
|
||
<view class="item" @click="common.navigateTo('/pages/test/index')">
|
||
<image class="icon" src="@/static/images/me/examination.png"></image>
|
||
<view class="title">竞赛记录</view>
|
||
</view>
|
||
</view>
|
||
<!-- </uv-scroll-list> -->
|
||
</view>
|
||
<view class="cell_div">
|
||
<uv-cell-group :border="false">
|
||
<uv-cell
|
||
title="消息通知"
|
||
:isLink="true"
|
||
@click="common.navigateTo('/pages/messageNotification/index')"
|
||
></uv-cell>
|
||
<uv-cell title="我的收藏" :isLink="true" @click="common.navigateTo('/pages/favorites/index')"></uv-cell>
|
||
<uv-cell title="排行榜" :isLink="true" @click="common.navigateTo('/pages/charts/index')"></uv-cell>
|
||
<uv-cell
|
||
title="我的预览"
|
||
:isLink="true"
|
||
:clickable="false"
|
||
:border="false"
|
||
@click="common.navigateTo('/pages/preview/index')"
|
||
></uv-cell>
|
||
</uv-cell-group>
|
||
</view>
|
||
<view class="cell_div">
|
||
<uv-cell-group :border="false">
|
||
<uv-cell title="设置" :isLink="true" @click="common.navigateTo('/pages/setting/index')"></uv-cell>
|
||
<uv-cell
|
||
title="退出登录"
|
||
:isLink="true"
|
||
:clickable="false"
|
||
:border="false"
|
||
@click="click_loginout()"
|
||
></uv-cell>
|
||
</uv-cell-group>
|
||
</view>
|
||
<tabbar-shadow></tabbar-shadow>
|
||
<avatar-cropper
|
||
v-if="avatarCropperStatus"
|
||
mode="ratio"
|
||
:imageUrl="avatarCropperUrl"
|
||
:width="500"
|
||
:height="500"
|
||
:delay="150"
|
||
@cancel="onCancel"
|
||
@confirm="onConfirm"
|
||
></avatar-cropper>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, reactive, nextTick } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import common from '@/common/common';
|
||
import { getUserInfo } from '@/common/common';
|
||
import { onPullDownRefresh } from '@dcloudio/uni-app';
|
||
import { loginOut } from '@/api/login.js';
|
||
import { queryTraStdyStatisticsSelf } from '@/api/user.js';
|
||
import { useSocketStore } from '@/store/socket.js';
|
||
import { updateDfSysUserExtandInfoImageAddr } from '@/api/user.js';
|
||
import { uploadFile } from '@/api/common';
|
||
import { setMascot } from '@/common/mascot.js';
|
||
import { queryCurrentUser } from '@/api/login.js';
|
||
import { defaultAvatar } from "@/enum.js"
|
||
const defaultAvatarSrc = computed(()=> defaultAvatar)
|
||
const badgeList = [
|
||
{
|
||
name: '黑铁',
|
||
png: 'badge_1.png'
|
||
},
|
||
{
|
||
name: '青铜',
|
||
png: 'badge_2.png'
|
||
},
|
||
{
|
||
name: '白银',
|
||
png: 'badge_3.png'
|
||
},
|
||
{
|
||
name: '黄金',
|
||
png: 'badge_4.png'
|
||
},
|
||
{
|
||
name: '铂金',
|
||
png: 'badge_5.png'
|
||
},
|
||
{
|
||
name: '钻石',
|
||
png: 'badge_6.png'
|
||
},
|
||
{
|
||
name: '王者',
|
||
png: 'badge_7.png'
|
||
}
|
||
];
|
||
const currentIndex = ref(0);
|
||
const changeBadge = () => {
|
||
// 计算下一个索引，如果当前是最后一个则回到0
|
||
currentIndex.value = (currentIndex.value + 1) % badgeList.length;
|
||
};
|
||
const socketStore = useSocketStore();
|
||
const accmTaskCntRef = ref(null);
|
||
const accmPointRef = ref(null);
|
||
const stdtTmLenRef = ref(null);
|
||
|
||
const user_info = reactive({
|
||
userName: '',
|
||
userId: '',
|
||
imageAddr: ''
|
||
});
|
||
const goTest = () => {
|
||
console.log('goTest');
|
||
common.navigateTo('/pages/test/index');
|
||
};
|
||
|
||
const click_loginout = () => {
|
||
common.show('确定退出登录？').then(async (res) => {
|
||
console.log(res);
|
||
if (!res) return;
|
||
try {
|
||
common.loading('正在退出登录');
|
||
socketStore.closeSocket();
|
||
await loginOut();
|
||
} catch (e) {}
|
||
common.hideLoading();
|
||
// 主动退出登录后，再次登录应该进首页
|
||
common.reLaunch('/pages/login/login');
|
||
});
|
||
};
|
||
onLoad(() => {});
|
||
onShow(() => {
|
||
setMascot();
|
||
Object.assign(user_info, getUserInfo());
|
||
});
|
||
onPullDownRefresh(() => {
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
|
||
// 头像
|
||
const avatarCropperStatus = ref(true);
|
||
const avatarCropperUrl = ref('');
|
||
// 点击修改头像
|
||
const click_update_avatar = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
success: (resPicture) => {
|
||
uni.getFileInfo({
|
||
filePath: resPicture.tempFilePaths[0],
|
||
success: function (resSize) {
|
||
if (resSize.size > 10 * 1024 * 1024) return common.msg('图片过大，请重新选择');
|
||
avatarCropperUrl.value = resPicture.tempFilePaths[0];
|
||
avatarCropperStatus.value = true;
|
||
},
|
||
fail: function (err) {
|
||
common.msg('获取图片失败，请选择其他图片');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 选择头像取消
|
||
const onCancel = (value) => {
|
||
avatarCropperStatus.value = false;
|
||
};
|
||
// 选择头像确定
|
||
const onConfirm = (file) => {
|
||
avatarCropperStatus.value = false;
|
||
nextTick(async () => {
|
||
common.loading('更新头像中');
|
||
try {
|
||
const data = {
|
||
bizScen: 'S3007',
|
||
thumbnailFlag: true,
|
||
thumbImgSize: 100
|
||
};
|
||
// 上传图片
|
||
const res = await uploadFile(file.tempFilePath, data);
|
||
// 更新个人信息
|
||
await updateDfSysUserExtandInfoImageAddr({
|
||
imageAddr: res.thumbFileId
|
||
});
|
||
// 更新个人信息
|
||
const userData = await queryCurrentUser();
|
||
console.log('userData', userData);
|
||
common.msg('修改成功');
|
||
user_info.imageAddr = userData.imageAddr;
|
||
user_info.imagePath = '';
|
||
} catch (e) {
|
||
console.log('sss', e);
|
||
common.msg('修改失败');
|
||
}
|
||
common.hideLoading();
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$bg-margin-left: 50rpx;
|
||
|
||
// 下方单元格
|
||
.cell_div {
|
||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||
background: #ffffff;
|
||
border-radius: 15rpx;
|
||
z-index: 101;
|
||
overflow: hidden;
|
||
|
||
// 为了让线缩进来24单位
|
||
:deep(.uv-line) {
|
||
width: calc(100% - 48rpx) !important;
|
||
margin: 0 24rpx !important;
|
||
}
|
||
|
||
:deep(.uv-cell__body) {
|
||
padding: 12px 15px;
|
||
}
|
||
}
|
||
|
||
// 快捷导航栏
|
||
.navigation_div {
|
||
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
|
||
// padding: 24rpx 0 0 20rpx;
|
||
padding: 24rpx 10rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: space-around;
|
||
z-index: 101;
|
||
|
||
.scroll-view {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item {
|
||
display: inline-block;
|
||
padding: 0 22rpx 0 26rpx;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
// background-color: red;
|
||
.icon {
|
||
width: 88rpx;
|
||
height: 86rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 10rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 25rpx;
|
||
color: #323e57;
|
||
line-height: 35rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg_div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
padding: 0 $bg-margin-left;
|
||
z-index: 50;
|
||
|
||
.bg_img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: -1;
|
||
height: 858rpx;
|
||
}
|
||
|
||
// 个人信息
|
||
.user_data_div {
|
||
margin-top: 158rpx;
|
||
background: linear-gradient(180deg, rgba(241, 245, 255, 0.5) 0%, #f6f9fe 50%, #ffffff 100%);
|
||
border-radius: 14rpx;
|
||
border: 2rpx solid #ffffff;
|
||
box-shadow: #f6f8ff 0 0 2rpx;
|
||
|
||
.personal_information {
|
||
padding: 20rpx 26rpx 0 26rpx;
|
||
display: flex;
|
||
|
||
// 个人头像框框
|
||
.profile {
|
||
border-radius: 100%;
|
||
border: 2px solid #ffffff;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 头像右边的信息
|
||
.personal_information_data {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 26rpx;
|
||
overflow: hidden;
|
||
|
||
// 上边的姓名性别盒子
|
||
.name_sex_div {
|
||
display: flex;
|
||
margin-top: 6rpx;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-family: PingFangSC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.sex {
|
||
margin-left: 10rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.work_number_div {
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 25rpx;
|
||
color: #666666;
|
||
line-height: 38rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dan {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 16rpx;
|
||
align-items: center;
|
||
|
||
.dan_img {
|
||
height: 50rpx;
|
||
}
|
||
|
||
.dan_text {
|
||
}
|
||
}
|
||
|
||
.study_information {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
z-index: 20;
|
||
margin: 30rpx 50rpx;
|
||
|
||
.item-interval {
|
||
position: relative;
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 20%;
|
||
transform: translateX(-50%);
|
||
width: 1rpx;
|
||
height: 60%;
|
||
width: 4rpx;
|
||
height: 54rpx;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(239, 246, 255, 0) 0%,
|
||
rgba(229, 239, 255, 1) 30%,
|
||
rgba(229, 239, 255, 1) 70%,
|
||
rgba(239, 246, 255, 0) 100%
|
||
);
|
||
}
|
||
}
|
||
|
||
.item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.top {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 35rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 5%;
|
||
font-weight: bold;
|
||
font-size: 50rpx;
|
||
color: #000000;
|
||
line-height: 58rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-align: center;
|
||
|
||
// 数字滚动组件
|
||
:deep(.uv-count-num) {
|
||
font-weight: bold !important;
|
||
font-size: 50rpx !important;
|
||
color: #000000 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main_div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f6f8ff;
|
||
}
|
||
</style>
|