|
|
@@ -1,498 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="payment">
|
|
|
- <Header @search="search($event)"></Header>
|
|
|
- <section class="section">
|
|
|
- <div class="section__header">
|
|
|
- <div class="container">
|
|
|
- <el-breadcrumb separator="/">
|
|
|
- <el-breadcrumb-item :to="{ path: '/index' }"
|
|
|
- >首页</el-breadcrumb-item
|
|
|
- >
|
|
|
- <el-breadcrumb-item>课程</el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="section__body">
|
|
|
- <div class="container">
|
|
|
- <div class="course-classify">
|
|
|
- <div class="course-classify__list">
|
|
|
- <div class="left-item">教育类型：</div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="list">
|
|
|
- <!-- <div
|
|
|
- class="item"
|
|
|
- :class="{ active: typeKey == '' }"
|
|
|
- @click="changeType('')"
|
|
|
- >
|
|
|
- 全部
|
|
|
- </div> -->
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in typeList"
|
|
|
- :key="index"
|
|
|
- :class="{ active: params.educationTypeId == item.id }"
|
|
|
- @click="changeType(item)"
|
|
|
- >
|
|
|
- {{ item.educationName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <transition name="el-fade-in-linear">
|
|
|
- <div
|
|
|
- class="course-classify__list"
|
|
|
- v-if="businessList.length > 0 && params.educationTypeId"
|
|
|
- >
|
|
|
- <div class="left-item">培训项目：</div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="list">
|
|
|
- <!-- <div class="item active">全部</div> -->
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in businessList"
|
|
|
- :key="index"
|
|
|
- :class="{ active: params.businessId == item.id }"
|
|
|
- @click="changeBusiness(item)"
|
|
|
- >
|
|
|
- {{ item.aliasName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- <transition name="el-fade-in-linear">
|
|
|
- <div class="course-classify__list" v-if="subjectList.length > 0">
|
|
|
- <div class="left-item">科目分类：</div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="list">
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in subjectList"
|
|
|
- :key="index"
|
|
|
- :class="{ active: params.subjectId == item.id }"
|
|
|
- @click="changeSubject(item)"
|
|
|
- >
|
|
|
- {{ item.subjectName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="section__footer">
|
|
|
- <div class="container">
|
|
|
- <div class="course-list">
|
|
|
- <div class="course-list__header">
|
|
|
- <div class="sort-list">
|
|
|
- <div
|
|
|
- class="sort-list__item"
|
|
|
- @click="changeSort(1)"
|
|
|
- :class="{ active: params.sortType == 1 ? true : false }"
|
|
|
- >
|
|
|
- 综合排序
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sort-list__item"
|
|
|
- @click="changeSort(2)"
|
|
|
- :class="{ active: params.sortType == 2 ? true : false }"
|
|
|
- >
|
|
|
- 低价优先
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sort-list__item"
|
|
|
- @click="changeSort(3)"
|
|
|
- :class="{ active: params.sortType == 3 ? true : false }"
|
|
|
- >
|
|
|
- 高价优先
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="course-list__body">
|
|
|
-
|
|
|
- <transition name="el-fade-in-linear">
|
|
|
- <LoadingBox v-if="loading"></LoadingBox>
|
|
|
- <ul v-else class="list clearfix">
|
|
|
- <el-empty
|
|
|
- v-if="goodsList.length == 0"
|
|
|
- description="暂无数据"
|
|
|
- ></el-empty>
|
|
|
- <li
|
|
|
- class="course-item"
|
|
|
- v-for="(item, index) in goodsList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <GoodsItem :item="item"></GoodsItem>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- @current-change="currentChange"
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="total"
|
|
|
- :pager-count="5"
|
|
|
- :page-size="params.pageSize"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <ToolBar></ToolBar>
|
|
|
- <Footer></Footer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { cancel } from "@/apis/common.js";
|
|
|
-import LoadingBox from "@/components/loadingBox/index";
|
|
|
-import Footer from "@/components/footer/index";
|
|
|
-import Header from "@/components/header/index";
|
|
|
-import ToolBar from "@/components/toolbar/index";
|
|
|
-import GoodsItem from "@/components/goodsItem/index";
|
|
|
-import { mapMutations } from "vuex";
|
|
|
-export default {
|
|
|
- name: "handoutList",
|
|
|
- components: {
|
|
|
- Footer,
|
|
|
- Header,
|
|
|
- ToolBar,
|
|
|
- GoodsItem,
|
|
|
- LoadingBox
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- projectId: "",
|
|
|
- typeList: [],
|
|
|
- businessList: [],
|
|
|
- subjectList: [],
|
|
|
- total: 0,
|
|
|
- params: {
|
|
|
- projectId: "",
|
|
|
- educationTypeId: "",
|
|
|
- businessId: "",
|
|
|
- subjectId: "",
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 15,
|
|
|
- goodsStatus: 1,
|
|
|
- goodsType: 1,
|
|
|
- sortType: 1,
|
|
|
- searchKey: "",
|
|
|
- showStatus: 1
|
|
|
- },
|
|
|
- goodsList: [],
|
|
|
- loading: false
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.params.goodsName = this.$route.query.searchKey || "";
|
|
|
- // this.params.searchKey = this.$route.query.searchKey || "";
|
|
|
- this.params.educationTypeId = this.$route.query.educationId || "";
|
|
|
- // this.params.projectId = this.$route.query.projectId || "";
|
|
|
- this.params.businessId = this.$route.query.businessId || "";
|
|
|
- if (this.params.businessId) {
|
|
|
- this.getSubjectList();
|
|
|
- }
|
|
|
- this.getEducationTypeList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations(["getCartCount"]),
|
|
|
- search(key) {
|
|
|
- this.params.goodsName = key || "";
|
|
|
- // this.params.searchKey = key || "";
|
|
|
- this.params.projectId = "";
|
|
|
- this.params.educationTypeId = "";
|
|
|
- this.params.businessId = "";
|
|
|
- this.params.subjectId = "";
|
|
|
- this.changeSubject();
|
|
|
- },
|
|
|
- changeSort(sortType) {
|
|
|
- if (this.params.sortType == sortType) return;
|
|
|
- this.params.sortType = sortType;
|
|
|
- this.changeSubject();
|
|
|
- },
|
|
|
- currentChange(e) {
|
|
|
- this.params.pageNum = e;
|
|
|
- this.changeSubject();
|
|
|
- },
|
|
|
- toGoodsDetail(item) {
|
|
|
- this.$router.push({
|
|
|
- path: "/course-detail/" + item.goodsId
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- addCart(item) {
|
|
|
- this.$request
|
|
|
- .addCart({ goodsId: item.goodsId })
|
|
|
- .then(res => {
|
|
|
- this.getCartCount();
|
|
|
- this.$message({
|
|
|
- message: "加入购物车成功",
|
|
|
- type: "success"
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- if (err.code == 500) {
|
|
|
- this.$message({
|
|
|
- message: err.msg,
|
|
|
- type: "warning"
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 切换教育类型
|
|
|
- */
|
|
|
- changeType(item) {
|
|
|
- if (this.params.educationTypeId == item.id) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.params.projectId = "";
|
|
|
- this.params.educationTypeId = item.id;
|
|
|
- this.params.businessId = "";
|
|
|
- this.businessList = [];
|
|
|
- this.params.subjectId = "";
|
|
|
- this.subjectList = [];
|
|
|
- this.params.pageNum = 1;
|
|
|
- this.getBusinessList();
|
|
|
- this.changeSubject();
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 切换科目分类
|
|
|
- */
|
|
|
- changeSubject(item) {
|
|
|
- if (item) {
|
|
|
- if (this.params.subjectId != item.id) {
|
|
|
- this.params.subjectId = item.id;
|
|
|
- this.params.pageNum = 1;
|
|
|
- }
|
|
|
- }
|
|
|
- if (cancel) {
|
|
|
- cancel("取消请求");
|
|
|
- }
|
|
|
- this.loading = true;
|
|
|
- this.$request
|
|
|
- .goodsList(this.params)
|
|
|
- .then(res => {
|
|
|
- this.goodsList = res.rows;
|
|
|
- this.total = res.total;
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取科目分类
|
|
|
- */
|
|
|
- getSubjectList() {
|
|
|
- this.$request
|
|
|
- .subjectList({
|
|
|
- businessId: this.params.businessId,
|
|
|
- projectId: this.projectId,
|
|
|
- educationId: this.params.educationTypeId
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.subjectList = res.rows;
|
|
|
- this.subjectList.unshift({ id: 0, subjectName: "全部" });
|
|
|
- this.params.subjectId = 0;
|
|
|
-
|
|
|
- this.changeSubject(this.subjectList[0]);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 切换业务层级
|
|
|
- */
|
|
|
- changeBusiness(item) {
|
|
|
- if (this.params.subjectId == item.id) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.loading = true;
|
|
|
- this.params.businessId = item.id;
|
|
|
- this.projectId = item.projectId;
|
|
|
- this.params.subjectId = "";
|
|
|
- this.subjectList = [];
|
|
|
- this.params.pageNum = 1;
|
|
|
- this.getSubjectList();
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取业务层级
|
|
|
- */
|
|
|
- getBusinessList() {
|
|
|
- this.$request
|
|
|
- .businessList({ educationId: this.params.educationTypeId })
|
|
|
- .then(res => {
|
|
|
- this.businessList = res.rows.filter(item => item.aliasName);
|
|
|
- this.projectId = this.businessList[0].projectId;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取教育类型
|
|
|
- */
|
|
|
- getEducationTypeList() {
|
|
|
- let alls = {
|
|
|
- educationName: "全部",
|
|
|
- id: "",
|
|
|
- status: 1,
|
|
|
- sort: 0
|
|
|
- };
|
|
|
- this.$request.educationTypeList().then(res => {
|
|
|
- res.rows.unshift(alls);
|
|
|
- this.typeList = res.rows;
|
|
|
-
|
|
|
- //有传入教育类型
|
|
|
- if (this.params.educationTypeId) {
|
|
|
- this.getBusinessList();
|
|
|
- } else {
|
|
|
- this.params.educationTypeId = res.rows[0].id;
|
|
|
- this.getBusinessList();
|
|
|
- }
|
|
|
- this.changeSubject();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
-<style scoped lang="scss">
|
|
|
-.payment {
|
|
|
- .section {
|
|
|
- &__header {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- &__body {
|
|
|
- background: #ebf2fc;
|
|
|
- .course-classify {
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &__list {
|
|
|
- display: flex;
|
|
|
- margin: 6px 0;
|
|
|
- align-items: flex-start;
|
|
|
- .left-item {
|
|
|
- margin-top: 10px;
|
|
|
- padding: 8px 0;
|
|
|
- width: 80px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .right-item {
|
|
|
- flex: 1;
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .item {
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 8px;
|
|
|
- margin: 10px;
|
|
|
- padding: 8px 16px;
|
|
|
- color: #666666;
|
|
|
- font-size: 16px;
|
|
|
- background: #f7f9fc;
|
|
|
- color: #999;
|
|
|
-
|
|
|
- &.active {
|
|
|
- color: #fff;
|
|
|
- background: #3f8dfd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__footer {
|
|
|
- .course-list {
|
|
|
- &__header {
|
|
|
- margin-top: 32px;
|
|
|
- .sort-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- &__item {
|
|
|
- cursor: pointer;
|
|
|
- width: 96px;
|
|
|
- height: 32px;
|
|
|
- border-radius: 16px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #bfbfbf;
|
|
|
- border-radius: 16px;
|
|
|
- text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 16px;
|
|
|
- margin-right: 20px;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #ebf2fc;
|
|
|
- border: 1px solid #3f8dfd;
|
|
|
- border-radius: 16px;
|
|
|
- color: #3f8dfd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__body {
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .course-item {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__footer {
|
|
|
- overflow: hidden;
|
|
|
- .btn {
|
|
|
- cursor: pointer;
|
|
|
- width: 146px;
|
|
|
- height: 40px;
|
|
|
- background: #e3eaf7;
|
|
|
- border-radius: 8px;
|
|
|
- margin: 20px auto 40px;
|
|
|
- color: #3f8dfd;
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #fff;
|
|
|
- box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
|
|
|
- background: #3f8dfd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pagination {
|
|
|
- padding: 30px 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
