all major `select`&`course-select` combined to independent component

.env.development

@@ -2,9 +2,9 @@
 ENV = 'development'
 
 # 名学金榜学习系统/生产环境
-VUE_APP_BASE_API = 'https://www.mingxuejinbang.com/prod-api'
+#VUE_APP_BASE_API = 'https://www.mingxuejinbang.com/prod-api'
 #VUE_APP_BASE_API = 'http://192.168.0.106:1024/prod-api'
-#VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'https://front.mingxuejinbang.com/prod-api'
 
 VUE_APP_MOBILE = "https://h5.mingxuejinbang.com"
 

src/assets/icons/svg/check-circle.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="40px" height="40px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<g>
+	<path d="M20,0C8.974,0,0,8.973,0,20c0,11.027,8.974,20,20,20c11.029,0,20-8.973,20-20C40,8.973,31.029,0,20,0z M28.818,17.875
+		l-8.562,8.564c-0.596,0.595-1.377,0.893-2.158,0.893c-0.779,0-1.561-0.298-2.156-0.893l-4.758-4.758
+		c-1.191-1.191-1.191-3.124,0-4.313c1.191-1.192,3.121-1.192,4.314,0l2.6,2.6l6.408-6.407c1.188-1.189,3.123-1.189,4.312,0
+		C30.01,14.752,30.01,16.684,28.818,17.875z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/styles/common.scss

@@ -698,6 +698,10 @@
   color: #47C6A2
 }
 
+.f-active {
+  color: #dd524d;
+}
+
 .f-danger {
   color: #F56C6C
 }
@@ -757,6 +761,11 @@
   cursor: pointer;
 }
 
+.pointer-no-hover {
+  /* .pointer 会受到结构里的hover样式影响，待改进 */
+  cursor: pointer;
+}
+
 .pd20 {
   padding: 20px;
 }

src/views/career/components/MajorChoiceDialog.vue

@@ -126,8 +126,6 @@
 import {
   xkcxlist,
   xkcxYears,
-  collectAdd,
-  collectRemove,
   universityFilters,
   marjorsList,
 } from "@/api/webApi/webQue";
@@ -281,20 +279,6 @@ export default {
         this.featuresList = data.features;
       });
     },
-    httpCollectAdd(row) {
-      collectAdd({
-        refId: row.id,
-      }).then((res) => {
-        this.checkData();
-      });
-    },
-    httpCollectRemove(row) {
-      collectRemove({
-        refId: row.id,
-      }).then((res) => {
-        this.checkData();
-      });
-    },
     onChangeYear(res) {
       this.checkData();
     },

src/views/career/subject/components/MajorCollectCell.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg-icon
+    class="pointer-no-hover f18"
+    :class="{'f-active':row.collect, 'f-999':!row.collect}"
+    icon-class="heart"
+    @click="toggleCollect(row)"
+  />
+</template>
+
+<script>
+import {collectAdd, collectRemove} from "@/api/webApi/webQue";
+
+export default {
+  name: "MajorCollectCell",
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 收藏 / 取消收藏
+    toggleCollect(row) {
+      if (this.loading) return
+      this.$emit("update:loading", true)
+      const api = row.collect ? collectRemove : collectAdd
+      api({refId: row.id}).then(() => {
+        row.collect = !row.collect
+        this.$message.success(res.msg)
+      }).finally(() => {
+        this.$emit('update:loading', false)
+        this.$emit('complete')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/career/subject/components/SubjectSelectCell.vue

@@ -0,0 +1,49 @@
+<template>
+  <svg-icon
+    class="pointer-no-hover f16"
+    :class="{'f-active':row.isSelectCourse, 'f-999':!row.isSelectCourse}"
+    icon-class="check-circle"
+    @click="saveCourseCollect(row)"
+  />
+</template>
+
+<script>
+import {saveSelectCourse} from "@/api/webApi/webQue";
+
+export default {
+  name: "SubjectSelectCell",
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 选科收藏 取消和收藏
+    saveCourseCollect(row) {
+      if (this.loading) return
+      this.$emit('update:loading', true)
+      saveSelectCourse({
+        refId: row.id,
+        isSelectCourse: !row.isSelectCourse
+      }).then(res => {
+        if (res.code == 200) {
+          row.isSelectCourse = !row.isSelectCourse
+          this.$message.success(res.msg)
+        }
+      }).finally(() => {
+        this.$emit('update:loading', false)
+        this.$emit('complete')
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/career/subject/components/select-subjec-report.vue

@@ -5,15 +5,12 @@
       <span class="tabs-item" @click="activeType = 1" :class="{'bg-primary':activeType == 1}">我的选科收藏</span>
       <span class="tabs-item" @click="activeType = 2" :class="{'bg-primary':activeType == 2}">我的测评选科</span>
     </div>
-    <mx-table v-if="activeType == 0 || activeType == 1" :propDefines="propDefine" :rows="collectList">
+    <mx-table v-if="activeType == 0||activeType == 1" v-loading="loading" :propDefines="propDefine" :rows="collectList">
       <template #select="{ row }">
-        <i class="pointer el-icon el-icon-success" style="color: #42b983" v-if=" row.collect"></i>
-        <i class="pointer el-icon el-icon-success" v-else></i>
+        <major-collect-cell :row="row" :loading.sync="loading" />
       </template>
       <template #isSelectCourse="{ row }">
-        <i class="pointer el-icon el-icon-success" @click="saveCourseCollect(row)" style="color: #42b983"
-           v-if="row.isSelectCourse && row.collect"></i>
-        <i class="pointer el-icon el-icon-success" @click="saveCourseCollect(row)" v-else></i>
+        <subject-select-cell :row="row" :loading.sync="loading" />
       </template>
     </mx-table>
     <mx-table v-if="activeType == 2" :propDefines="recomProp" :rows="recommendMajor"></mx-table>
@@ -25,8 +22,11 @@
 <script>
 import { getRecommendMajor } from '@/api/webApi/elective/selected-subject'
 import { collectAdd, collectRemove, saveSelectCourse, xkcxlist } from '@/api/webApi/webQue'
+import MajorCollectCell from "@/views/career/subject/components/MajorCollectCell.vue";
+import SubjectSelectCell from "@/views/career/subject/components/SubjectSelectCell.vue";
 
 export default {
+  components: {SubjectSelectCell, MajorCollectCell},
   props: {
     type: {
       type: Number,
@@ -60,6 +60,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       dataList: [],
       rows: [],
       activeType: '',
@@ -132,33 +133,6 @@ export default {
         this.recommendMajor = res.data
       })
     },
-    // 收藏
-    httpCollectAdd(row) {
-      row.collect = true
-      collectAdd({
-        refId: row.id
-      })
-    },
-    // 取消收藏
-    httpCollectRemove(row) {
-      row.collect = false
-      collectRemove({
-        refId: row.id
-      })
-    },
-    // 选科收藏 取消和收藏
-    saveCourseCollect(row) {
-      saveSelectCourse({
-        refId: row.id,
-        isSelectCourse: !row.isSelectCourse
-      }).then(res => {
-        if (res.code == 200) {
-          row.isSelectCourse = !row.isSelectCourse
-          this.$message.success(res.msg)
-          this.getXkcxlist()
-        }
-      })
-    },
     getXkcxlist() {
       const stat = this.activeType == 0 ? { collect: true } : { isSelectCourse: true }
       xkcxlist({

src/views/career/subject/majorChoice.vue

@@ -109,26 +109,12 @@
       </div>
 
       <div class="concerned-college-container">
-        <mx-table :rows="dataList" :propDefines="propDefines">
+        <mx-table v-loading="loading" :rows="dataList" :propDefines="propDefines">
           <template #collect="{ row }">
-            <img
-              class="college-icon pointer"
-              v-if="row.collect"
-              @click="httpCollectRemove(row)"
-              src="@/assets/images/subject/icon_shoucang_pre.png"
-            />
-            <img
-              class="college-icon pointer"
-              v-else
-              @click="httpCollectAdd(row)"
-              src="@/assets/images/subject/icon_shoucang_n.png"
-            />
+            <major-collect-cell :row="row" :loading.sync="loading" />
           </template>
           <template #isSelectCourse="{ row }">
-            <div @click="saveCourseCollect(row)" class="pointer">
-              <i class="el-icon el-icon-success"  style="color: #42b983" v-if="row.isSelectCourse"></i>
-              <i class="el-icon el-icon-success"  v-else></i>
-            </div>
+            <subject-select-cell :row="row" :loading.sync="loading" />
           </template>
         </mx-table>
         <pagination
@@ -146,20 +132,20 @@
 
 <script>
 import {
-  collectAdd,
-  collectRemove,
   marjorsList,
-  saveSelectCourse,
   xkcxlistByMarjors,
   xkcxYears
 } from '@/api/webApi/webQue'
 
 import MajorChoiceDialog from '../components/MajorChoiceDialog.vue'
+import MajorCollectCell from "@/views/career/subject/components/MajorCollectCell.vue";
+import SubjectSelectCell from "@/views/career/subject/components/SubjectSelectCell.vue";
 
 export default {
-  components: { MajorChoiceDialog },
+  components: {SubjectSelectCell, MajorCollectCell, MajorChoiceDialog },
   data() {
     return {
+      loading: false,
       selected: {
         yearList: [],
         selectNian: '',
@@ -192,17 +178,6 @@ export default {
     this.httpGetMarjorsList()
   },
   methods: {
-    saveCourseCollect(row) {
-      saveSelectCourse({
-        refId:row.id,
-        isSelectCourse: !row.isSelectCourse
-      }).then(res =>{
-        if(res.code== 200){
-          row.isSelectCourse = !row.isSelectCourse
-          this.$message.success(res.msg)
-        }
-      })
-    },
     back() {
       this.$router.go(-1)
     },
@@ -325,25 +300,10 @@ export default {
           this.cleanSchoolSelect()
         })
     },
-
     onChangePage(page) {
       this.pageSize = page.limit
       this.pageNum = page.page
       this.httpGetXkcxList()
-    },
-    // 收藏
-    httpCollectAdd(row) {
-      row.collect = true
-      collectAdd({
-        refId: row.id
-      })
-    },
-    // 取消收藏
-    httpCollectRemove(row) {
-      row.collect = false
-      collectRemove({
-        refId: row.id
-      })
     }
   }
 }

src/views/career/subject/subjectChoice.vue

@@ -43,26 +43,12 @@
       </div>
       <div class="content" v-if="Object.keys(propDefines).length">
         <div class="concerned-college-container" v-loading="loading">
-          <mx-table :rows="dataList" :propDefines="propDefines">
+          <mx-table v-loading="loading" :rows="dataList" :propDefines="propDefines">
             <template #collect="{ row }">
-              <img
-                class="college-icon"
-                v-if="row.collect"
-                @click="httpCollectRemove(row)"
-                src="@/assets/images/subject/icon_shoucang_pre.png"
-              />
-              <img
-                class="college-icon"
-                v-else
-                @click="httpCollectAdd(row)"
-                src="@/assets/images/subject/icon_shoucang_n.png"
-              />
+              <major-collect-cell :row="row" :loading.sync="loading" />
             </template>
             <template #isSelectCourse="{ row }">
-              <div @click="saveCourseCollect(row)">
-                <i class="el-icon el-icon-success" style="color: #42b983" v-if="row.isSelectCourse"></i>
-                <i class="el-icon el-icon-success" v-else></i>
-              </div>
+              <subject-select-cell :row="row" :loading.sync="loading" />
             </template>
           </mx-table>
           <pagination
@@ -81,9 +67,11 @@
 </template>
 
 <script>
-import { collectAdd, collectRemove, getSelectCourse, saveSelectCourse, xkcxlist, xkcxYears } from '@/api/webApi/webQue'
+import { getSelectCourse, xkcxlist, xkcxYears } from '@/api/webApi/webQue'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import FilterForm from '@/views/career/components/FilterForm'
+import MajorCollectCell from "@/views/career/subject/components/MajorCollectCell.vue";
+import SubjectSelectCell from "@/views/career/subject/components/SubjectSelectCell.vue";
 
 export default {
   props: {
@@ -105,6 +93,8 @@ export default {
     }
   },
   components: {
+    SubjectSelectCell,
+    MajorCollectCell,
     MxSearchGroup,
     FilterForm
   },
@@ -213,32 +203,6 @@ export default {
       this.pageSize = page.limit
       this.pageNum = page.page
       this.httpGetXkcxList()
-    },
-    // 收藏
-    httpCollectAdd(row) {
-      row.collect = true
-      collectAdd({
-        refId: row.id
-      })
-    },
-    // 选科收藏 取消和收藏
-    saveCourseCollect(row) {
-      saveSelectCourse({
-        refId: row.id,
-        isSelectCourse: !row.isSelectCourse
-      }).then(res => {
-        if (res.code == 200) {
-          row.isSelectCourse = !row.isSelectCourse
-          this.$message.success(res.msg)
-        }
-      })
-    },
-    // 取消收藏
-    httpCollectRemove(row) {
-      row.collect = false
-      collectRemove({
-        refId: row.id
-      })
     }
   }
 }