feat(个人用户): 接口

src/api/learncenter/individualUser.js

+import request from '@/utils/request'
+
+export function selectPersonalStatistics(){
+  return request({
+    url: '/pc/sysuser/queryUserStudyInfo',
+    method: 'get'
+  })
+}
+
+export function selectPagingBLesson(params){
+  return request({
+    url: '/blesson/pagingBLesson',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    method: 'get',
+    params: params
+  })
+}

src/views/learningCenter/individualUser/index.vue

@@ -14,35 +14,34 @@
         <div class="teamMembers_header">
           <div class="teamMembers_headerCard">
             <div class="header_child">
-              <div class="value">2课时</div>
+              <div class="value">{{ personalStatistics.todayStudy||'0' }}课时</div>
               <div class="title">今日学习</div>
             </div>
             <div class="header_child">
-              <div class="value">10课时</div>
+              <div class="value">{{ personalStatistics.totalStudy ||'0' }}课时</div>
               <div class="title">累计学习</div>
             </div>
           </div>
           <div class="teamMembers_headerCard">
             <div class="header_child">
-              <div class="value">3门</div>
+              <div class="value">{{ personalStatistics.studying ||'0' }}门</div>
               <div class="title">学习中课程</div>
             </div>
             <div class="header_child">
-              <div class="value">2门</div>
+              <div class="value">{{ personalStatistics.studyFinish ||'0' }}门</div>
               <div class="title">已学完课程</div>
             </div>
           </div>
         </div>
         <div class="userInfo">
           <img class="avatarImg" :src="avatar">
-          <div class="user_name">张笑笑</div>
-          <div class="user_company">天津南开大学</div>
+          <div class="user_name">{{personalInfo.name}}</div>
           <div style="display: flex;justify-content: center">
             <div class="user_type">个人</div>
           </div>
         </div>
       </div>
-      <div class="teamMembers_content">
+      <div class="teamMembers_content"   v-loading="loading">
         <div class="teamMembers_content_left">
           <div class="left_top">
             <div class="chose_btnRow">
@@ -52,17 +51,18 @@
                 :class="activeType === item.type ? 'activeBtn' : 'classBtn'"
                 @click="choseBtn(item)"
               >
-                {{ item.name }}{{ item.value ? "(" + item.value + ")" : '' }}
+                {{ item.name }}{{ item.value ? "(" + item.value + ")" : "(" + '0'+")" }}
               </div>
             </div>
             <div class="top_search">
               <el-form ref="formRef" :model="form">
                 <el-form-item prop="username">
                   <el-input
-                    v-model="form.username"
+                    v-model="queryParams.lessonName"
                     type="text"
                     auto-complete="off"
                     suffix-icon="el-icon-search"
+                    @change="getList()"
                     placeholder="请输入课程关键词"
                   />
                 </el-form-item>
@@ -73,8 +73,8 @@
           <div class="left_content">
             <div>
               <el-checkbox-group v-model="checkList">
-                <el-checkbox label="只看付费"></el-checkbox>
-                <el-checkbox label="只看试用"></el-checkbox>
+                <el-checkbox v-model="isPay" label="只看付费" @change="selectIsPay('1')" />
+                <el-checkbox v-model="isLessonIsPay" label="只看试用" @change="selectLessonIsPay('0')" />
               </el-checkbox-group>
             </div>
             <div class="leftCardList">
@@ -84,38 +84,39 @@
                 class="classCard"
               >
                 <div class="classCardImgCard">
-                  <img :src="item.img" class="classCardImg">
-                  <div :class=" item.level === '1' ? 'class_level' :item.level === '2' ? 'class_levelTwo' : 'class_levelThree'">
-                    {{ item.level === '1' ? '初级' :item.level === '2' ? '中级' :item.level === '3' ? '高级' : '' }}
+                  <img :src="item.defaultUrl" class="classCardImg">
+                  <div :class=" item.difficultyClassifyLabels === '初级' ? 'class_level' :item.difficultyClassifyLabels === '中级' ? 'class_levelTwo' : 'class_levelThree'">
+                    {{ item.difficultyClassifyLabels }}
                   </div>
                 </div>
                 <div class="classInfo">
-                  <div :title="item.title" class="info_title">{{ item.title }}
-                  <span :class="item.date? 'alreadyDate' : 'getMoney'">（{{item.date? '已过期' : '已收费'}}）</span>
+                  <div :title="item.title" class="info_title">{{ item.lessonName	}}
+                    <span v-if="item.isExpired==='1'||item.isPay==='1'" :class="item.isExpired==='1'? 'alreadyDate' :(item.isPay==='1'?'getMoney':'alreadyDate')">（{{ item.isExpired==='1'? '已过期' :(item.isPay==='1'?'已收费':'免费') }}）</span>
                   </div>
                   <div class="learnTime_class">
                     <div>
-                      <span class="commonText">已学习</span><span class="colorText">{{ item.learnTime + '小节' }}</span>
+                      <span class="commonText">已学习</span><span class="colorText">{{ item.learnedChapterNum + '小节' }}</span>
                     </div>
                     <el-divider direction="vertical" />
-                    <div class="commonText">共{{ item.allTiem }}小节</div>
+                    <div class="commonText">共{{ item.allChapterNum }}小节</div>
                     <el-divider direction="vertical" />
-                    <div class="commonText">有效期还剩：{{haveDays}}天</div>
+                    <div class="commonText">有效期还剩：{{ item.remainingDate||'-' }}天</div>
                   </div>
-                  <div :title="item.technology" class="commonText_technology">上次学习：1.1.2 快闪带你快速掌握</div>
-                  <div v-if="!item.getMoney" class="learn_btn">继续学习</div>
-                  <div v-else class="moneyInfo">该课程已开始收费，无法继续学习！</div>
+                  <div :title="item.technology" class="commonText_technology">上次学习：{{ item.chapterName||'-' }}</div>
+                  <div v-if="item.isExpired==='1'" class="moneyInfo">该课程已过期，无法继续学习！</div>
+                  <div v-else-if="item.isPay==='1'" class="moneyInfo">该课程已开始收费，无法继续学习！</div>
+                  <div v-else class="learn_btn">继续学习</div>
                 </div>
                 <div class="tagArea">
-                  <img :src="trialImg" class="trialImg">
+                  <img v-show="item.lessonIsPay===0" :src="trialImg" class="trialImg">
                 </div>
               </div>
             </div>
             <pagination
               v-show="total>0"
               :total="total"
-              :page.sync="queryParams.page"
-              :limit.sync="queryParams.rows"
+              :page.sync="queryParams.current"
+              :limit.sync="queryParams.size"
               @pagination="getList"
             />
           </div>
@@ -128,6 +129,8 @@
 <script>
 import NavList from '@/views/homePage/components/NavList/index'
 import trialImg from '@/assets/image/xuexi_shiyong_test.png'
+import { selectPagingBLesson, selectPersonalStatistics } from '@/api/learncenter/individualUser'
+import store from "@/store";
 export default {
   name: 'Index',
   components: {
@@ -135,13 +138,24 @@ export default {
   },
   data() {
     return {
+      loading:true,
+      personalInfo: {},
+      personalStatistics: {},
       trialImg,
       haveDays: '14',
+      isLessonIsPay: false,
+      isPay: false,
       checkList: [],
       // 查询参数
       queryParams: {
-        page: 1,
-        rows: 10
+        userId: '100',
+        current: 1,
+        size: 10,
+        isObligatory: '0',
+        lessonName: '',
+        isPay: '',
+        lessonIsPay: '',
+        isCompleteLearned: ''
       },
       // 总条数
       total: 10,
@@ -169,10 +183,10 @@ export default {
         { img: require('@/assets/image/courseOne.jpg'), level: '2', title: 'visual C++案例教程visual C++案例教程教visualaaaaaaaaaaaa', learnTime: '2', allTiem: '30', technology: '环境感知技术、智能决策技术、环境感知技术、智能决策aaaaaaa' },
         { img: require('@/assets/image/courseOne.jpg'), level: '3', title: 'visual C++案例教程visual C++案例教程教visualaaaaaaaaaaaa', learnTime: '2', allTiem: '30', technology: '环境感知技术、智能决策技术、环境感知技术、智能决策aaaaaaa' }
       ],
-      activeType: '1',
+      activeType: '0',
       btnList: [
-        { name: '未完成', type: '1', value: '3' },
-        { name: '已完成', type: '2', value: '2' }
+        { name: '未完成', type: '0', value: '0' },
+        { name: '已完成', type: '1', value: '0' }
       ],
       backTop: require('@/assets/image/top.png'),
       suggestion: require('@/assets/image/suggestion.png'),
@@ -194,16 +208,51 @@ export default {
     }
   },
   created() {
+    this.getPersonalStatistics()
+    this.getList()
+    this.personalInfo.name = store.getters.name
   },
   mounted() {
   },
   methods: {
+    selectIsPay(data) {
+      if (this.isPay === false) {
+        this.queryParams.lessonIsPay = data
+        this.getList()
+      }
+      this.isPay = !this.isPay
+      this.isLessonIsPay = false
+    },
+    selectLessonIsPay(data) {
+      if (this.isLessonIsPay = false) {
+        this.queryParams.lessonIsPay = data
+        this.getList()
+      }
+      this.isLessonIsPay = !this.isLessonIsPay
+      this.isPay = false
+    },
+    getPersonalStatistics() {
+      selectPersonalStatistics().then(res => {
+        this.personalStatistics = res.data
+        console.log('32', res)
+      })
+    },
     getList() {
-
+      this.loading = true
+      selectPagingBLesson(this.queryParams).then(res => {
+        this.btnList[1].value = res.data.courseStatisticsArray[3]
+        this.btnList[0].value = res.data.courseStatisticsArray[2]
+        this.courseStatisticsArray = res.data.courseStatisticsArray
+        this.classDataList = res.data.dataList.records
+        this.total = res.data.dataList.total
+        this.loading = false
+      })
     },
     /** 课程类型选择*/
     choseBtn(item) {
       this.activeType = item.type
+      this.queryParams.isCompleteLearned = item.type
+      this.getList()
     },
     /** 跳转意见反馈页面*/
     handleToSuggestion() {
@@ -338,7 +387,7 @@ export default {
     .teamMembers_content_left{
       margin-right: 25px;
       width: 1200px;
-      height: 845px;
+      min-height: 845px;
       background: #ffffff;
       box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
       .left_top{

src/views/personalCenter/component/personalData.vue

@@ -24,10 +24,10 @@
           <div class="avatarItem">上传头像</div>
         </div>
         <el-form-item label="登录名:" class="formItemSpace">
-          <el-input v-model="personalForm.name" :disabled="roleKey==='unit_admin'" />
+          <el-input v-model="personalForm.userName" :disabled="roleKey==='unit_admin'" />
         </el-form-item>
         <el-form-item label="姓名:" class="formItemSpace">
-          <el-input v-model="personalForm.userName" :disabled="roleKey==='unit_admin'" />
+          <el-input v-model="personalForm.name" :disabled="roleKey==='unit_admin'" />
         </el-form-item>
         <el-form-item v-show="roleKey!=='unit_admin'" label="性别:" class="formItemSpace">
           <div class="genderLaout">
@@ -106,6 +106,7 @@ export default {
     },
     selectGender(data) {
       this.genderFlag = data
+      this.personalForm.sex = data
     },
     beforeUpload(file) {
       if (file.name) {

src/views/personalCenter/index.vue

@@ -53,6 +53,7 @@ import BrowsingHistory from '@/views/personalCenter/component/browsingHistory.vu
 import MyMessage from '@/views/personalCenter/component/myMessage.vue'
 import { getUserInfo } from '@/api/personalCenter'
 import store from '@/store'
+import { getInfo } from '@/api/login'
 
 export default {
   name: 'Index',
@@ -95,8 +96,15 @@ export default {
     }
   },
   created() {
-    this.handleToTop() // 一进入页面自动滚动到最顶部
+    if (this.authority === 'individual') {
+      this.user.username = store.getters.name
+      getInfo().then(res => {
+        this.user.avatar = res.data.user.avatar
+      })
+    } else {
       this.selectUserInfo()
+    }
+    this.handleToTop() // 一进入页面自动滚动到最顶部
   },
   mounted() {
   },