|
|
@@ -0,0 +1,662 @@
|
|
|
+<template>
|
|
|
+ <div class="bank-detail">
|
|
|
+ <section class="section">
|
|
|
+ <div class="section__body">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="goods-collect">
|
|
|
+ <div class="goods-collect__header">
|
|
|
+ <div class="selects">
|
|
|
+ <div class="selects__item">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select
|
|
|
+ placeholder="请选择题库记录"
|
|
|
+ v-model="goodsSelect"
|
|
|
+ @change="getCollectData"
|
|
|
+ clearable
|
|
|
+ @clear="getCollectData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in goodsList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.goodsName"
|
|
|
+ :value="item.goodsId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select
|
|
|
+ placeholder="请选择试卷类型"
|
|
|
+ v-model="paperSelect"
|
|
|
+ @change="getCollectData"
|
|
|
+ clearable
|
|
|
+ @clear="getCollectData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in paperList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.paperName"
|
|
|
+ :value="item.paperId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tabs">
|
|
|
+ <el-tabs v-model="collectName" @tab-click="getCollectData">
|
|
|
+ <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="题型归类" name="2"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="goods-collect__body">
|
|
|
+ <div class="box">
|
|
|
+ <div class="title">收藏统计</div>
|
|
|
+ <div class="circle">
|
|
|
+ <el-progress
|
|
|
+ type="circle"
|
|
|
+ :width="160"
|
|
|
+ :stroke-width="12"
|
|
|
+ color="#FADB14"
|
|
|
+ :format="() => collectTotal || '0'"
|
|
|
+ :percentage="25"
|
|
|
+ ></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list" v-if="collectName == '1'">
|
|
|
+ <div
|
|
|
+ class="list__item"
|
|
|
+ v-for="(item, index) in collectExamList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ {{ item.examName }}
|
|
|
+ </div>
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="left">
|
|
|
+ 收藏题<span class="red">{{ item.questionNum }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="
|
|
|
+ go('/subject/collect-bank/' + item.examId, {
|
|
|
+ orderGoodsId: orderGoodsId,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ round
|
|
|
+ plain
|
|
|
+ class="btn"
|
|
|
+ >重做</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="
|
|
|
+ go('/subject/collect-bank/' + item.examId, {
|
|
|
+ explain: 1,
|
|
|
+ orderGoodsId: orderGoodsId,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ round
|
|
|
+ plain
|
|
|
+ class="btn"
|
|
|
+ >解析</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list" v-if="collectName == '2'">
|
|
|
+ <div
|
|
|
+ class="list__item"
|
|
|
+ v-for="(item, index) in collectTypeList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ <template v-if="item.type == 1">单选题</template>
|
|
|
+ <template v-if="item.type == 2">多选题</template>
|
|
|
+ <template v-if="item.type == 3">判断题</template>
|
|
|
+ <template v-if="item.type == 4">案例题</template>
|
|
|
+ <template v-if="item.type == 5">简答题</template>
|
|
|
+ </div>
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="left">
|
|
|
+ 收藏题<span class="red">{{ item.num }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="
|
|
|
+ go('/subject/collect-type-bank/' + item.type, {
|
|
|
+ orderGoodsId: orderGoodsId,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ round
|
|
|
+ plain
|
|
|
+ class="btn"
|
|
|
+ >重做</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="
|
|
|
+ go('/subject/collect-type-bank/' + item.type, {
|
|
|
+ explain: 1,
|
|
|
+ orderGoodsId: orderGoodsId,
|
|
|
+ })
|
|
|
+ "
|
|
|
+ round
|
|
|
+ plain
|
|
|
+ class="btn"
|
|
|
+ >解析</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "BankDetail",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderGoodsId: "",
|
|
|
+ activeName: "1",
|
|
|
+ collectName: "1",
|
|
|
+ wrongName: "1",
|
|
|
+ goodsId: "",
|
|
|
+ goodsDetail: {},
|
|
|
+ goodsCount: {},
|
|
|
+ paperList: [],
|
|
|
+ paperSelect: "",
|
|
|
+ goodsList: "",
|
|
|
+ goodsSelect: "",
|
|
|
+ collectTypeList: [],
|
|
|
+ collectExamList: [],
|
|
|
+ collectTotal: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.listGoodsUserQuestion();
|
|
|
+ this.examaperList();
|
|
|
+ this.getCollectData();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ go(path, query = {}) {
|
|
|
+ console.log(path, query);
|
|
|
+ this.$router.push({
|
|
|
+ path,
|
|
|
+ query,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ examaperList() {
|
|
|
+ this.$request.examaperList().then((res) => {
|
|
|
+ this.paperList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ listGoodsUserQuestion() {
|
|
|
+ this.$request.listGoodsUserQuestion().then((res) => {
|
|
|
+ this.goodsList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCollectData() {
|
|
|
+ if (this.collectName == "1") {
|
|
|
+ //试卷归类
|
|
|
+ this.goodsCollectExamList();
|
|
|
+ } else if (this.collectName == "2") {
|
|
|
+ //题型归类
|
|
|
+ this.collectQuestionTypeList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 收藏按试卷分类
|
|
|
+ */
|
|
|
+ goodsCollectExamList() {
|
|
|
+ this.$request
|
|
|
+ .goodsCollectExamList({
|
|
|
+ paperId: this.paperSelect,
|
|
|
+ goodsId: this.goodsSelect,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.collectExamList = res.rows;
|
|
|
+ let total = 0;
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ total += item.questionNum;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.collectTotal = total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 收藏按题型分类
|
|
|
+ */
|
|
|
+ collectQuestionTypeList() {
|
|
|
+ this.$request
|
|
|
+ .collectQuestionTypeList({
|
|
|
+ paperId: this.paperSelect,
|
|
|
+ goodsId: this.goodsSelect,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.collectTypeList = res.rows;
|
|
|
+ let total = 0;
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ total += item.num;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.collectTotal = total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped lang="scss">
|
|
|
+.bank-detail {
|
|
|
+ .section {
|
|
|
+ &__header {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ .left-box {
|
|
|
+ float: left;
|
|
|
+ width: 768px;
|
|
|
+
|
|
|
+ /deep/.el-tabs__item {
|
|
|
+ height: 98px;
|
|
|
+ line-height: 98px;
|
|
|
+ }
|
|
|
+ .goods-menu {
|
|
|
+ padding: 0 16px 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #f5f7fa;
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ display: flex;
|
|
|
+ padding-right: 8px;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-num {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-do {
|
|
|
+ width: 88px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ .item {
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ padding: 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+
|
|
|
+ .note {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 40px;
|
|
|
+ height: 24px;
|
|
|
+ border: 1px solid #ff3b30;
|
|
|
+ border-radius: 8px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #ff3b30;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .bank-chapter {
|
|
|
+ margin-left: 4px;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ cursor: pointer;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bank-section {
|
|
|
+ margin-left: 40px;
|
|
|
+
|
|
|
+ &__item {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 88px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 16px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-collect {
|
|
|
+ &__header {
|
|
|
+ .selects {
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ .box {
|
|
|
+ width: 300px;
|
|
|
+ height: 240px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ margin: 10px auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ overflow: hidden;
|
|
|
+ &__item {
|
|
|
+ margin-top: 16px;
|
|
|
+ height: 98px;
|
|
|
+ background: #f7f9fc;
|
|
|
+ box-shadow: 0px 3px 6px 0px #e1e6ed;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ padding: 10px 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ margin-left: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border: 1px solid #666666;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ margin-left: 12px;
|
|
|
+ color: #f5222d;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ float: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .btn {
|
|
|
+ width: 88px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 16px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 300px;
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ height: 98px;
|
|
|
+ border-bottom: 2px solid #e4e7ed;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 64px;
|
|
|
+ font-size: 0;
|
|
|
+ .left {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .note {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ .blue {
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .note {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ color: #999999;
|
|
|
+ .blue {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #3f8dfd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ .title {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ .course-item {
|
|
|
+ margin: 110px 0 0;
|
|
|
+ width: 300px;
|
|
|
+ height: 178px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 100px;
|
|
|
+
|
|
|
+ &__img {
|
|
|
+ width: 280px;
|
|
|
+ height: 178px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 10px;
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: -78px;
|
|
|
+ background: rgba(122, 136, 246, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ background: no-repeat center center;
|
|
|
+ background-size: 280px 178px;
|
|
|
+
|
|
|
+ .note {
|
|
|
+ width: 80px;
|
|
|
+ height: 24px;
|
|
|
+ background: #d94404;
|
|
|
+ box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
|
|
|
+ border-radius: 10px 0px 20px 0px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ margin: 0 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__desc {
|
|
|
+ height: 32px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin-left: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff2d55;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ display: block;
|
|
|
+ width: 118px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ background: #f2f4f7;
|
|
|
+ border-radius: 10px 0px 10px 0px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3f8dfd;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #3f8dfd;
|
|
|
+ color: #f2f4f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
chenxiong