Skip to content

T
tea_resources_pc
Commit a7da8b1b authored by 高滢's avatar 高滢
Browse files
Options

feat(个人中心): 接口

parent 59bd2192
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 83 deletions
.history/src/store/modules/user_20240403145423.js
View file @ a7da8b1b
......@@ -31,6 +31,9 @@ const user = {
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
SET_BUSINESSID: (state, businessId) => {
state.businessId = businessId
}
},
......@@ -67,6 +70,8 @@ const user = {
}
commit('SET_NAME', user.username)
commit('SET_SPECIALTAG', user.specialTag)
commit('SET_BUSINESSID', user.businessId)
commit('')
// commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
......
src/api/personalCenter/index.js 0 → 100644
View file @ a7da8b1b
import request from '@/utils/request'
export function selectPclessonfavorite(params) {
return request({
url: 'pclessonfavorite/list',
method: 'get',
params: params
})
}
export function selectPclessonbrowse(params) {
return request({
url: 'pclessonbrowse/list',
method: 'get',
params: params
})
}
export function changePassword(oldPassword, newPassword) {
return request({
url: '/system/user/updatePwd?oldPassword=' + oldPassword + '&newPassword=' + newPassword,
method: 'put'
})
}
export function selectGrade() {
return request({
url: '/system/dict/data/type/difficulty_grade',
method: 'get'
})
}
// 课程等级根据value返回label
export function getGradeLabel(value, list) {
const objectValue = list.find(obj => obj.dictValue === value)
const label = objectValue ? objectValue.dictLabel : '初级'
return label
}
export function getCancelFavorite(params) {
return request({
url: '/pclessonfavorite/delete/' + params.businessId,
method: 'delete',
params: params
})
}
export function getUserInfo() {
return request({
url: '/pc/sysuser/queryUnitAdmin',
method: 'get'
})
}
src/router/routes.js
View file @ a7da8b1b
......@@ -240,7 +240,7 @@ const USER_VISITOR_ROUTES = [
{
path: '/personalCenter/index',
name: 'personalCenter',
meta: { title: '个人中心', USER_LEVEL: USER_LEVEL.USER_VISITOR, showHeader: false, animation: false },
meta: { title: '个人中心', USER_LEVEL: USER_LEVEL.USER_LOGIN, showHeader: false, animation: false },
component: () => import('@/views/personalCenter/index.vue')
},
{
......
src/store/getters.js
View file @ a7da8b1b
......@@ -15,5 +15,6 @@ const getters = {
users: state => state.props.users,
userRoles: state => state.props.roles,
groups: state => state.props.groups,
businessId: state => state.user.businessId
}
export default getters
src/store/modules/user.js
View file @ a7da8b1b
......@@ -12,7 +12,8 @@ const user = {
avatar: '',
roles: [],
permissions: [],
specialTag: ''
specialTag: '',
businessId: ''
},
mutations: {
......@@ -36,6 +37,9 @@ const user = {
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
SET_BUSINESSID: (state, businessId) => {
state.businessId = businessId
}
},
......@@ -74,6 +78,7 @@ const user = {
commit('SET_PHONE', user.phone)
commit('SET_SPECIALTAG', user.specialTag)
commit('SET_AVATAR', avatar)
commit('SET_BUSINESSID', user.businessId)
// user.roles[0].roleKey
resolve(res)
......
src/views/personalCenter/component/browsingHistory.vue
View file @ a7da8b1b
<template>
<div class="browsing-history">
<div class="head">您共有<span style="color:#F96F21 ">50</span>条收藏</div>
<div class="container">
<div class="head">您共有<span style="color:#F96F21 ">{{ total }}</span>条浏览记录</div>
<div v-if="collectionList.length>0" class="container">
<div v-for="(item,index) in collectionList" :key="index" class="box">
<div> <el-image style="width:100%;height: 139px;" /></div>
<div :class="{ 'intermediate': item.leve === 1, 'senior': item.leve === 2, 'primary': item.leve === 3 }" />
<div class="lesson-hours" />
<div :class="{ 'intermediate': item.leve === 1, 'senior': item.leve === 2, 'primary': item.leve === 3 }">{{ getGradeLabel(item.difficultyClassify,gradeList) }}</div>
<div class="lesson-hours">{{ item.classHour }}课时</div>
<div class="bottom">
<div class="title">这是一个很长很长很长的文字内容，超出宽度时会显示省略号。</div>
<div class="title">{{ item.lessonName }}</div>
<div class="introduction">
<div class="dept">是一个很长很长很111</div>
<div class="text">100</div>
<div class="dept">{{ item.jobClassify }}</div>
<div class="text">{{ item.classHour }}课时</div>
</div>
<div class="price">
<div v-if="item.isfree" class="money"><span style="font-size:14px ">￥</span>1</div>
<div v-if="item.lessonPrice>0" class="money"><span style="font-size:14px ">￥</span>{{ item.lessonPrice }}</div>
<div v-else class="free">免费</div>
</div>
</div>
</div>
</div>
<div v-else class="containerNo">
<el-image :src="require('@/assets/image/zanwushujuP.png')" />
</div>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next"
:total="100"
:page-size="6"
v-show="total>0"
:current-page="queryParams.pageNum"
:page-sizes="[12]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="currentChange"
/>
</div>
......@@ -32,25 +37,45 @@
</template>
<script>
import { getGradeLabel, selectGrade, selectPclessonbrowse } from '@/api/personalCenter'
import store from '@/store'
export default {
name: 'BrowsingHistory',
data() {
return {
collectionList: [
{ name: '22131231231', leve: 1 },
{ name: '22131231231', leve: 2 },
{ name: '22131231231', leve: 3 },
{ name: '22131231231', leve: 1 }
]
queryParams: {
userId: store.getters.businessId,
pageNum: 1,
pageSize: 6
},
total: 0,
collectionList: [],
gradeList: []
}
},
created() {
this.getPclessonbrowse()
},
mounted() {
},
methods: {
getGradeLabel,
getGrade() {
selectGrade().then(res => {
this.gradeList = res.data
})
},
getPclessonbrowse() {
selectPclessonbrowse(this.queryParams).then(res => {
this.total = res.total
this.collectionList = res.rows
console.log('浏览记录', res)
})
},
currentChange(page) {
console.log(page)
this.queryParams.pageNum = page
this.getPclessonbrowse()
}
}
}
......@@ -77,6 +102,12 @@ export default {
color: #292929;
margin-bottom: 24px;
}
.containerNo{
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-wrap: wrap;
......
src/views/personalCenter/component/changePassword.vue
View file @ a7da8b1b
......@@ -3,13 +3,13 @@
<div class="contentForm">
<el-form ref="ruleForm" label-position="right" label-width="80px" :model="personalForm" :rules="rules">
<el-form-item label="原密码:" class="formItemSpace" prop="name">
<el-input v-model="personalForm.name" placeholder="请输入原密码" />
<el-input v-model="personalForm.oldPassword" placeholder="请输入原密码" />
</el-form-item>
<el-form-item label="新密码:" class="formItemSpace" prop="userName">
<el-input v-model="personalForm.userName" placeholder="请输入新的登录密码" />
<el-input v-model="personalForm.newPassword" placeholder="请输入新的登录密码" />
</el-form-item>
<el-form-item class="formItemSpace" prop="userNameTo">
<el-input v-model="personalForm.userNameTo" placeholder="请再次输入登录密码" />
<el-input v-model="personalForm.newPasswordTo" placeholder="请再次输入登录密码" />
<div class="prompt">密码长度6~20位，数字、字母、字符至少包含两种</div>
</el-form-item>
<div class="centerLayout">
......@@ -21,21 +21,23 @@
</template>
<script>
import { changePassword } from '@/api/personalCenter'
export default {
name: 'ChangePassword',
data() {
return {
personalForm: {},
rules: {
name: [
oldPassword: [
{ required: true, message: '请输入原密码', trigger: 'blur' }
],
userName: [
newPassword: [
{ required: true, message: '请输入新的登录密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在6到20位之间', trigger: 'blur' },
{ validator: this.validatePassword, trigger: 'blur' }
],
userNameTo: [
newPasswordTo: [
{ required: true, message: '请确认新的登录密码', trigger: 'blur' },
{ validator: this.confirmPassword, trigger: 'blur' }
]
......@@ -50,9 +52,16 @@ export default {
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!')
changePassword(this.personalForm.oldPassword, this.personalForm.newPasswordTo).then(res => {
if (res.code === 200) {
this.$message({
message: '修改成功',
type: 'success'
})
}
})
} else {
alert('err')
return false
}
})
},
......
src/views/personalCenter/component/myFavorite.vue
View file @ a7da8b1b
<template>
<div class="my-favorite">
<div class="head">您共有<span style="color:#F96F21 ">50</span>条收藏</div>
<div class="container">
<div class="head">您共有<span style="color:#F96F21 ">{{ total }}</span>条收藏</div>
<div v-if="collectionList.length>0" class="container">
<div v-for="(item,index) in collectionList" :key="index" class="box">
<div> <el-image style="width:100%;height: 139px;" /></div>
<div :class="{ 'intermediate': item.leve === 1, 'senior': item.leve === 2, 'primary': item.leve === 3 }" />
<div class="lesson-hours" />
<div :class="{ 'intermediate': item.difficultyClassify === 0, 'senior': item.difficultyClassify === 1, 'primary': item.difficultyClassify === 2 }">{{ getGradeLabel(item.difficultyClassify,gradeList) }}</div>
<div class="lesson-hours">{{ item.classHour }}课时</div>
<div class="bottom">
<div class="title">这是一个很长很长很长的文字内容，超出宽度时会显示省略号。</div>
<div class="title">{{ item.lessonName }}</div>
<div class="introduction">
<div class="dept">是一个很长很长很111</div>
<div class="text">100</div>
<div class="dept">{{ item.jobClassify }}</div>
<div class="text">{{ item.classHour }}课时</div>
</div>
<div class="price">
<div class="money"><span style="font-size:14px ">￥</span>1</div>
<div class="favoriteLogo">❤</div>
<div class="money"><span style="font-size:14px ">￥</span>{{ item.lessonPrice }}</div>
<div class="favoriteLogo" @click="cancelFavorite(item.businessId)">❤</div>
</div>
</div>
</div>
</div>
<div v-else class="containerNo">
<el-image :src="require('@/assets/image/zanwushujuP.png')" />
</div>
<div class="pagination">
<el-pagination
background
layout="prev, pager, next"
:total="100"
:page-size="6"
v-show="total>0"
:current-page="queryParams.pageNum"
:page-sizes="[12]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="currentChange"
/>
</div>
......@@ -32,26 +37,57 @@
</template>
<script>
import { getCancelFavorite, getGradeLabel, selectGrade, selectPclessonfavorite } from '@/api/personalCenter'
import store from '@/store'
export default {
name: 'MyFavorite',
data() {
return {
isfree:true,
collectionList: [
{ name: '22131231231', leve: 1 },
{ name: '22131231231', leve: 2 },
{ name: '22131231231', leve: 3 },
{ name: '22131231231', leve: 1 }
]
isfree: true,
queryParams: {
userId: store.getters.businessId,
pageNum: 1,
pageSize: 6
},
total: 0,
collectionList: [],
gradeList: []
}
},
created() {
this.getPclessonfavorite()
this.getGrade()
},
mounted() {
},
methods: {
cancelFavorite(id) {
getCancelFavorite({ userId: store.getters.businessId, lessonId: id }).then(res => {
if (res.code === 200) {
this.$message({
message: '已取消收藏',
type: 'success'
})
this.getPclessonfavorite()
}
})
},
getGradeLabel,
getGrade() {
selectGrade().then(res => {
this.gradeList = res.data
})
},
getPclessonfavorite() {
selectPclessonfavorite(this.queryParams).then(res => {
this.total = res.total
this.collectionList = res.rows
})
},
currentChange(page) {
console.log(page)
this.queryParams.pageNum = page
this.getPclessonfavorite()
}
}
}
......@@ -78,6 +114,12 @@ export default {
color: #292929;
margin-bottom: 24px;
}
.containerNo{
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-wrap: wrap;
......@@ -102,6 +144,7 @@ export default {
.favoriteLogo{
color: #e52525;
font-size: 20px;
cursor: pointer;
}
}
.title{
......
src/views/personalCenter/component/myMessage.vue
View file @ a7da8b1b
<template>
<div class="my-message">
<div class="head">您共有<span style="color:#F96F21 ">50</span>条收藏</div>
<div class="head">您共有<span style="color:#F96F21 ">50</span>条消息</div>
<div>
<el-table
:data="myMessageData"
......@@ -55,6 +55,9 @@
</template>
<script>
import {selectPclessonbrowse} from "@/api/personalCenter";
import store from "@/store";
export default {
name: 'MyMessage',
data() {
......
src/views/personalCenter/component/personalData.vue
View file @ a7da8b1b
......@@ -10,33 +10,35 @@
:multiple="false"
:limit="1"
:action="baseUrl"
:headers="requesrHeader"
:before-upload="beforeUpload"
:on-success="handleAvatarSuccess"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<el-image v-else :src="require('@/assets/image/perCenterNo.png')" />
</el-upload>
<div class="avatarItem">上传头像</div>
</div>
<el-form-item label="登录名:" class="formItemSpace">
<el-input v-model="personalForm.name" />
<el-input v-model="personalForm.name" :disabled="roleKey==='unit_admin'" />
</el-form-item>
<el-form-item label="姓名:" class="formItemSpace">
<el-input v-model="personalForm.userName" />
<el-input v-model="personalForm.userName" :disabled="roleKey==='unit_admin'" />
</el-form-item>
<el-form-item label="性别:" class="formItemSpace">
<el-form-item v-show="roleKey!=='unit_admin'" label="性别:" class="formItemSpace">
<div class="genderLaout">
<div :class="genderFlag === 1 ? 'genderSelected' : 'gender'" @click="selectGender(1)"><i class="el-icon-female"/>男性</div>
<div :class="genderFlag === 2 ? 'genderSelected' : 'gender'" @click="selectGender(2)"><i class="el-icon-male" />女性</div>
<div :class="genderFlag === 0 ? 'genderSelected' : 'gender'" @click="selectGender(0)"><i class="el-icon-female" />男性</div>
<div :class="genderFlag === 1 ? 'genderSelected' : 'gender'" @click="selectGender(1)"><i class="el-icon-male" />女性</div>
</div>
</el-form-item>
<el-form-item label="手机号:" class="formItemSpace">
<el-input v-model="personalForm.phone" />
<el-input v-model="personalForm.phone" :disabled="roleKey==='unit_leader'||roleKey==='unit_user'" />
</el-form-item>
<el-form-item label="所属单位:" class="formItemSpace">
<el-input v-model="personalForm.dept" disabled/>
<el-form-item v-show="roleKey==='unit_leader'||roleKey==='unit_user'||roleKey==='unit_admin'" label="所属单位:" class="formItemSpace">
<el-input v-model="personalForm.deptName" disabled />
</el-form-item>
<el-form-item label="职位:" class="formItemSpace">
<el-input v-model="personalForm.dept" />
<el-form-item v-show="roleKey==='unit_leader'||roleKey==='unit_user'" label="职位:" class="formItemSpace">
<el-input v-model="personalForm.position" />
</el-form-item>
</el-form>
<div class="centerLayout">
......@@ -47,42 +49,85 @@
</template>
<script>
import { getInfo } from '@/api/login'
import { getToken } from '@/utils/auth'
export default {
name: 'PersonalData',
data() {
return {
genderFlag:1,
baseUrl: '',
fileSize: 2,
fileType: ['png', 'jpg', 'jpeg'],
requesrHeader: '',
genderFlag: 1,
baseUrl: process.env.VUE_APP_BASE_API + '/common/upload',
filelist: [],
imageUrl: '',
personalForm: {}
personalForm: {},
roleKey: ''
}
},
created() {
this.getPersonalInfo()
this.requesrHeader = { 'Authorization': 'Bearer ' + getToken() }
},
mounted() {
},
methods: {
submit(){
console.log('11',this.personalForm)
getPersonalInfo() {
getInfo().then(res => {
this.roleKey = res.data.roles[0].roleKey
this.personalForm = res.data.user
this.genderFlag = res.data.user.sex
})
},
submit() {
console.log('11', this.personalForm)
},
selectGender(data){
selectGender(data) {
this.genderFlag = data
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (file.name) {
const regex = /[~`!@#$%^&*=[\]{}|;:'",<>/?]/
const result = regex.test(file.name)
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
if (result === true) {
this.$message.error('文件名称不正确，请上传不包含特殊字符名称的图片')
return false
} else if (result === false) {
let isImg = false
if (this.fileType.length) {
let fileExtension = ''
if (file.name.lastIndexOf('.') > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
}
isImg = this.fileType.some(type => {
if (fileExtension && fileExtension.indexOf(type) > -1) return true
return false
})
} else {
isImg = file.type.indexOf('image') > -1
}
if (!isImg) {
this.$message.error(
`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`
)
return false
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$message.error(`上传图片大小不能超过 ${this.fileSize} MB!`)
return false
}
}
this.$message('正在上传图片，请稍候...')
}
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
handleAvatarSuccess(res) {
this.imageUrl = res.data
}
}
}
......@@ -92,6 +137,12 @@ export default {
.personal-data{
display: flex;
justify-content: center;
.avatar{
width: 104px;
height: 104px;
border: 1px solid #e7e7e7;
border-radius: 50%;
}
.genderLaout{
display: flex;
.gender{
......
src/views/personalCenter/index.vue
View file @ a7da8b1b
......@@ -4,11 +4,12 @@
<div class="personalCenter_module">
<div class="left">
<div class="image">
<el-image style="width: 164px;height: 164px;border-radius: 50%;" />
<el-image v-if="user.avatar" style="width: 164px;height: 164px;border-radius: 50%;" :src="baseUrl+user.avatar" />
<el-image v-else :src="require('@/assets/image/perCenterNo.png')" style="width: 164px;height: 164px;border-radius: 50%;"></el-image>
</div>
<div class="name">王某某</div>
<div class="dept">天津南开</div>
<div class="post"><el-tag>单位</el-tag></div>
<div class="name">{{ user.username }}</div>
<div class="dept">{{ user.unitName }}</div>
<div class="post"><el-tag>{{ user.identity==='1'?'管理员':(user.identity==='2'?'单位':'个人') }}</el-tag></div>
<el-divider />
<div class="tabLayout">
<div v-for="(item,index) in tabName" :key="index" :class="item.index === selectedTab ? 'selectedTab' : 'defaultTab'" @click="selectTab(item)">
......@@ -33,7 +34,7 @@
<MyFavorite />
</div>
<div v-else-if="selectedTab===3">
<BrowsingHistory />
<BrowsingHistory></BrowsingHistory>
</div>
<div v-else>
<MyMessage />
......@@ -50,6 +51,7 @@ import ChangePassword from '@/views/personalCenter/component/changePassword.vue'
import MyFavorite from '@/views/personalCenter/component/myFavorite.vue'
import BrowsingHistory from '@/views/personalCenter/component/browsingHistory.vue'
import MyMessage from '@/views/personalCenter/component/myMessage.vue'
import { getUserInfo } from '@/api/personalCenter'
export default {
name: 'Index',
......@@ -63,6 +65,8 @@ export default {
},
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
user: {},
textColo: '#3683FC',
selectedTab: 0,
tabName: [
......@@ -90,10 +94,17 @@ export default {
},
created() {
this.handleToTop() // 一进入页面自动滚动到最顶部
this.selectUserInfo()
},
mounted() {
},
methods: {
selectUserInfo() {
getUserInfo().then(res => {
this.user = res.data
console.log('geren', res)
})
},
/** 一进入页面自动滚动到最顶部*/
handleToTop() {
window.scrollTo({
......@@ -156,7 +167,6 @@ export default {
.image{
position: absolute;
top: -30px;
background: #fff;
left: 30%;
}
.name{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment