feat(个人中心): 接口

.history/src/store/modules/user_20240403145423.js

@@ -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

+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

@@ -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

@@ -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

@@ -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

 <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

@@ -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

 <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

 <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

@@ -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

@@ -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{