|
@@ -1,115 +1,115 @@
|
|
|
-<template>
|
|
|
- <div class="career-course-tabPage">
|
|
|
- <div class="career-course-head">
|
|
|
- <div class="career-course-title">
|
|
|
- <el-image class="mr5" :src="require('@/assets/images/career/career_course_icon.png')" />
|
|
|
- {{ title }}
|
|
|
- </div>
|
|
|
- <div class="career-course-tabs">
|
|
|
- <el-radio-group v-model="queryParams.type" @change="typeChanged" round>
|
|
|
- <el-radio-button v-for="t in types" :key="t.value" :label="t.value">{{
|
|
|
- t.label
|
|
|
- }}</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <mx-seperator />
|
|
|
- <div class="career-course-body mt10">
|
|
|
- <el-row v-if="total > 0" :gutter="10">
|
|
|
- <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
|
|
|
- <el-card>
|
|
|
- <course-card @click.native="detail(c)" :img="c.pictUrl" :title="c.name" :count="c.plays"></course-card>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <evaluation-empty class="mt10" v-else />
|
|
|
- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import * as career from "@/api/webApi/career-course";
|
|
|
-import courseCard from "./courseCard.vue";
|
|
|
-export default {
|
|
|
- components: { courseCard },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- title: "生涯课程",
|
|
|
- types: [],
|
|
|
- queryParams: {
|
|
|
- pageSize: 12,
|
|
|
- pageNum: 1,
|
|
|
- type: 0,
|
|
|
- },
|
|
|
- total: 0,
|
|
|
- dataList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- created () {
|
|
|
- this.getTypes();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- detail (item) {
|
|
|
- const nextParams = {
|
|
|
- id: item.id,
|
|
|
- aliid: item.aliid,
|
|
|
- aliIdType: item.aliIdType,
|
|
|
- name: item.name,
|
|
|
- count: item.plays,
|
|
|
- img: item.pictUrl,
|
|
|
- };
|
|
|
- this.$router.push({
|
|
|
- path: "/career/plan/detail",
|
|
|
- query: nextParams,
|
|
|
- });
|
|
|
- },
|
|
|
- getTypes () {
|
|
|
- career.types().then((res) => {
|
|
|
- if (res.code == 200 || res.code == 0) {
|
|
|
- this.types = res.rows;
|
|
|
- // set default.
|
|
|
- if (this.types.length > 0) {
|
|
|
- this.type = this.types[0].value;
|
|
|
- this.typeChanged();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- typeChanged () {
|
|
|
- this.queryParams.pageNum = 1;
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- getList () {
|
|
|
- career.list(this.queryParams).then((res) => {
|
|
|
- console.log("career coursse list res", res);
|
|
|
- if (res.code == 200 || res.code == 0) {
|
|
|
- this.total = res.total;
|
|
|
- this.dataList = res.rows;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.career-course {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.career-course-head {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.career-course-title {
|
|
|
- font-size: 16px;
|
|
|
- color: #585858;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.career-course-tabs {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px 0;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div class="career-course-tabPage">
|
|
|
+ <div class="career-course-head">
|
|
|
+ <div class="career-course-title">
|
|
|
+ <el-image class="mr5" :src="require('@/assets/images/career/career_course_icon.png')" />
|
|
|
+ {{ title }}
|
|
|
+ </div>
|
|
|
+ <div class="career-course-tabs">
|
|
|
+ <el-radio-group v-model="queryParams.type" @change="typeChanged" round>
|
|
|
+ <el-radio-button v-for="t in types" :key="t.value" :label="t.value">{{
|
|
|
+ t.label
|
|
|
+ }}</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <mx-seperator />
|
|
|
+ <div class="career-course-body mt10">
|
|
|
+ <el-row v-if="total > 0" :gutter="10">
|
|
|
+ <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
|
|
|
+ <el-card>
|
|
|
+ <course-card @click.native="detail(c)" :img="c.pictUrl" :title="c.name" :count="c.plays"></course-card>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <evaluation-empty class="mt10" v-else />
|
|
|
+ <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import * as career from "@/api/webApi/career-course";
|
|
|
+import courseCard from "./courseCard.vue";
|
|
|
+export default {
|
|
|
+ components: { courseCard },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ title: "生涯课程",
|
|
|
+ types: [],
|
|
|
+ queryParams: {
|
|
|
+ pageSize: 12,
|
|
|
+ pageNum: 1,
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ dataList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getTypes();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ detail (item) {
|
|
|
+ const nextParams = {
|
|
|
+ id: item.id,
|
|
|
+ aliid: item.aliid,
|
|
|
+ aliIdType: item.aliIdType,
|
|
|
+ name: item.name,
|
|
|
+ count: item.plays,
|
|
|
+ img: item.pictUrl,
|
|
|
+ };
|
|
|
+ this.$router.push({
|
|
|
+ path: "/career/plan/detail",
|
|
|
+ query: nextParams,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTypes () {
|
|
|
+ career.types().then((res) => {
|
|
|
+ if (res.code == 200 || res.code == 0) {
|
|
|
+ this.types = res.rows.slice(0, 3);
|
|
|
+ // set default.
|
|
|
+ if (this.types.length > 0) {
|
|
|
+ this.type = this.types[0].value;
|
|
|
+ this.typeChanged();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ typeChanged () {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList () {
|
|
|
+ career.list(this.queryParams).then((res) => {
|
|
|
+ console.log("career coursse list res", res);
|
|
|
+ if (res.code == 200 || res.code == 0) {
|
|
|
+ this.total = res.total;
|
|
|
+ this.dataList = res.rows;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.career-course {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.career-course-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.career-course-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #585858;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.career-course-tabs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+</style>
|