资料审核组件

src/axios.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 import store from './store'
 import { Notification } from 'element-ui'
-export const BASE_URL = process.env.BASE_URL    //测试-外网
-// export const BASE_URL = "http://192.168.1.7:5055"    //测试-外网
+// export const BASE_URL = process.env.BASE_URL    //测试-外网
+export const BASE_URL = "http://192.168.1.7:5055"    //测试-外网
 export const tenantId = process.env.TENANT_ID
 import tools from './common/tools'
 import router from './router'

src/common/compress.js

@@ -0,0 +1,60 @@
+// 压缩前将file转换成img对象
+export const readImg = (file) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const reader = new FileReader()
+    reader.onload = function (e) {
+      img.src = e.target.result
+    }
+    reader.onerror = function (e) {
+      reject(e)
+    }
+    reader.readAsDataURL(file)
+    img.onload = function () {
+      resolve(img)
+    }
+    img.onerror = function (e) {
+      reject(e)
+    }
+  })
+}
+
+/**
+ * 压缩图片
+ *@param img 被压缩的img对象
+* @param type 压缩后转换的文件类型
+* @param mx 触发压缩的图片最大宽度限制
+* @param mh 触发压缩的图片最大高度限制
+*/
+export const compressImg = (img, type, mx, mh) => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+    const { width: originWidth, height: originHeight } = img
+    // 最大尺寸限制
+    const maxWidth = mx
+    const maxHeight = mh
+    // 目标尺寸
+    let targetWidth = originWidth
+    let targetHeight = originHeight
+    if (originWidth > maxWidth || originHeight > maxHeight) {
+      if (originWidth / originHeight > 1) {
+        // 宽图片
+        targetWidth = maxWidth
+        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
+      } else {
+        // 高图片
+        targetHeight = maxHeight
+        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
+      }
+    }
+    canvas.width = targetWidth
+    canvas.height = targetHeight
+    context.clearRect(0, 0, targetWidth, targetHeight)
+    // 图片绘制
+    context.drawImage(img, 0, 0, targetWidth, targetHeight)
+    canvas.toBlob(function (blob) {
+      resolve(blob)
+    }, type || 'image/png')
+  })
+}

src/common/uploadFile.js

@@ -1,15 +1,21 @@
 import request from '@/request'
+import { readImg, compressImg } from "./compress"
 export default {
     // 上传图片标识 0头像 1身份证 2题库 3指南指引图片 4广告图片 5身份证或学信网图片 6文件excel,word,zip等
     //file: 类似this.$refs.file.files[0]
     upload: function (file, int) {
-        return new Promise((resolve, reject) => {
-            if(typeof file != 'object') {
-              resolve(file)
-              return;
+        return new Promise(async (resolve, reject) => {
+            if (typeof file != 'object') {
+                resolve(file)
+                return;
             }
             var datas = {
-                imageStatus: int
+                imageStatus: int || 0
+            }
+            //图片压缩
+            if (file.type.indexOf("image") !== -1) {
+                const img = await readImg(file)
+                file = await compressImg(img, file.type, 256, 256)
             }
             request.getPolicy(datas).then(res => {
                 var ossToken = res.data.resultContent
@@ -21,7 +27,7 @@ export default {
                 formData.append('OSSAccessKeyId', ossToken.accessid); //accessKeyId
                 formData.append('policy', ossToken.policy); //policy
                 formData.append('Signature', ossToken.signature); //签名
-                formData.append('callback', ossToken.callback); //回调
+                // formData.append('callback', ossToken.callback); //回调
                 formData.append('success_action_status', 200); //成功后返回的操作码
                 //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
                 formData.append("file", file);
@@ -29,7 +35,7 @@ export default {
                     resolve(ossToken.dir)
                     // resolve(ossToken.host + '/' + ossToken.dir)
                 }).catch(error => {
-                  console.log(error,'1231')
+                    console.log(error, '1231')
                     reject(error)
                 })
 

src/components/BaseDialog.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :width="width"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :append-to-body="appendToBody"
+    @closed="close"
+    :fullscreen="fullscreen"
+  >
+    <div slot="title" class="hearders">
+      <div class="leftTitle">{{ title }}</div>
+      <div class="rightBoxs">
+        <i
+          class="el-icon-full-screen full_style"
+          @click="fullscreen = !fullscreen"
+        ></i>
+        <img src="@/assets/img/Close@2x.png" alt="" @click="visible = false" />
+      </div>
+    </div>
+    <slot></slot>
+    <div slot="footer" class="dialog-footer" v-if="isShowFooter">
+      <slot name="slotBtn"></slot>
+      <el-button :loading="disabledBtn" @click="visible = false">{{
+        cancelName
+      }}</el-button>
+      <el-button
+        v-if="confirmStatus"
+        :loading="disabledBtn"
+        type="primary"
+        @click="confirmBtn"
+        >{{ confirmName }}</el-button
+      >
+      <slot name="slotBtnRight"></slot>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "BaseDialog",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    isShow: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: "600px"
+    },
+    cancelName: {
+      type: String,
+      default: "取 消"
+    },
+    confirmName: {
+      type: String,
+      default: "确 定"
+    },
+    isShowFooter: {
+      type: Boolean,
+      default: true
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    disabledBtn: {
+      type: Boolean,
+      default: false
+    },
+    confirmStatus: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      fullscreen: false
+    };
+  },
+  methods: {
+    confirmBtn() {
+      this.$emit("submit");
+    },
+    close() {
+      this.$emit("close");
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.isShow;
+      },
+      set(val) {
+        this.$emit("update:isShow", false);
+      }
+    }
+  },
+
+  watch: {
+    visible(val) {
+      // 在此做显示与隐藏的交互
+      if (val === false) {
+        this.fullscreen = false;
+        // 重置操作
+      } else {
+        // 展示时操作
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-dialog {
+  border-radius: 8px!important;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+/deep/.el-button {
+  border-radius: 8px;
+}
+.full_style {
+  cursor: pointer;
+  color: #6e6e6e;
+}
+</style>

src/components/dataReview/index.vue

@@ -0,0 +1,756 @@
+<template>
+  <div>
+    <el-dialog
+      title="资料填写"
+      :visible.sync="isShow"
+      width="920px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="info__content">
+        <el-row :gutter="20">
+          <el-form :model="infoForm" ref="infoForm" :rules="rules">
+            <el-col
+              v-for="(item, index) in listData"
+              :span="item.fieldKey == 'commitment_electr_signature' ? 24 : 12"
+              :key="index"
+            >
+              <el-form-item
+                v-if="item.fieldKey == 'apply_post'"
+                :label="item.fieldName"
+                label-width="120px"
+                :prop="item.fieldKey"
+              >
+                <el-select
+                  v-model="infoForm[item.fieldKey]"
+                  :placeholder="`请选择${item.fieldName}`"
+                  clearable
+                >
+                  <el-option
+                    v-for="(items, indexs) in apply_post_options"
+                    :key="indexs"
+                    :label="items"
+                    :value="items"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                v-else-if="item.inputType == 1"
+                :label="item.fieldName"
+                label-width="120px"
+                :prop="item.fieldKey"
+              >
+                <el-input
+                  :disabled="
+                    (item.fieldKey == 'name' && nameDisabledStatus) ||
+                    (item.fieldKey == 'idcard' && idcardDisabledStatus) ||
+                    (item.fieldKey == 'telphone' && telphoneDisabledStatus)
+                      ? true
+                      : false
+                  "
+                  clearable
+                  v-model="infoForm[item.fieldKey]"
+                  :placeholder="`请输入${item.fieldName}`"
+                />
+              </el-form-item>
+              <el-form-item
+                v-else-if="item.inputType == 2"
+                :label="item.fieldName"
+                label-width="120px"
+                :prop="item.fieldKey"
+              >
+                <el-select
+                  v-model="infoForm[item.fieldKey]"
+                  :placeholder="`请选择${item.fieldName}`"
+                  clearable
+                >
+                  <el-option
+                    v-for="(items, indexs) in options[item.fieldKey]"
+                    :key="indexs"
+                    :label="items"
+                    :value="items"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <template v-else-if="item.inputType == 3 || item.inputType == 4">
+                <el-form-item
+                  v-if="item.fieldKey == 'commitment_electr_signature'"
+                  label=""
+                  label-width="0px"
+                  :prop="item.fieldKey"
+                >
+                  <div class="cns_sq">
+                    <div class="left">
+                      <h3>承诺书</h3>
+                      <p>
+                        本人自愿做出如下承诺：本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
+                        全部内容并知晓和理解，本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定，本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求，如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
+                      </p>
+                      <p style="text-align: end;">特此承诺！</p>
+                    </div>
+                    <div class="right">
+                      <h3>
+                        签名板：<span>（请在下方签名区进行签名）</span
+                        ><el-button type="text" @click="retDraw"
+                          >清空</el-button
+                        >
+                      </h3>
+                      <div>
+                        <vue-esign
+                          v-if="!infoForm[item.fieldKey]"
+                          ref="esign"
+                          :isCrop="false"
+                          :lineWidth="5"
+                          :lineColor="'#333'"
+                          :bgColor="'#fff'"
+                          :height="480"
+                          :isClearBgColor="false"
+                        />
+                        <img
+                          v-else
+                          style="width: 100%; height: 100%"
+                          :src="$tools.splitImgHost(infoForm[item.fieldKey])"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </el-form-item>
+                <el-form-item
+                  v-else
+                  :label="item.fieldName"
+                  label-width="120px"
+                  :prop="item.fieldKey"
+                >
+                  <div
+                    v-if="infoForm[item.fieldKey]"
+                    style="display: inline-block;"
+                  >
+                    <el-image
+                      fit="contain"
+                      style="width: 80px; height: 80px;border-radius: 8px;border: 2px dotted #eee;"
+                      :src="$tools.splitImgHost(infoForm[item.fieldKey])"
+                      :preview-src-list="[
+                        $tools.splitImgHost(infoForm[item.fieldKey])
+                      ]"
+                    >
+                    </el-image>
+                    <el-button type="text" @click="infoForm[item.fieldKey] = ''"
+                      >删除</el-button
+                    >
+                  </div>
+                  <label v-else style="display: inline-block;">
+                    <div class="uploadBox">
+                      <i class="el-icon-plus"></i>
+                    </div>
+                    <input
+                      style="display: none;"
+                      type="file"
+                      @change="uploadImg($event, item.fieldKey)"
+                    />
+                  </label>
+                  <el-button
+                    type="text"
+                    @click="downloadStamp"
+                    v-if="item.fieldKey == 'commitment_seal'"
+                    >下载模板</el-button
+                  >
+                  <span style="vertical-align: bottom;color: #a4a4a4;" v-else>{{
+                    item.fieldKey == "recent_photos"
+                      ? "竖向白底证件照 文件大小<2M"
+                      : "文件大小<2M"
+                  }}</span>
+                </el-form-item>
+              </template>
+              <el-form-item
+                v-else-if="item.inputType == 5"
+                :label="item.fieldName"
+                label-width="120px"
+                :prop="item.fieldKey"
+                ><el-date-picker
+                  type="date"
+                  v-model="infoForm[item.fieldKey]"
+                  :placeholder="`请选择${item.fieldName}`"
+                  value-format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submitForm" :loading="uploading"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as imageConversion from "image-conversion";
+export default {
+  name: "",
+  props: {},
+  data() {
+    return {
+      listData: [],
+      options: {},
+      infoForm: {},
+      rules: {},
+      historyData: {}, //历史数据
+      cacheIdCardData: {}, //身份证数据
+      nameDisabledStatus: false,
+      idcardDisabledStatus: false,
+      telphoneDisabledStatus: false,
+      uploading: false,
+      isShow: false,
+      activeData: {},
+      apply_post_options: [
+        "土建施工员",
+        "装饰装修施工员",
+        "设备安装施工员",
+        "市政工程施工员",
+        "土建质量员",
+        "装饰装修质量员",
+        "设备安装质量员",
+        "市政工程质量员",
+        "材料员",
+        "机械员",
+        "劳务员",
+        "资料员",
+        "标准员"
+      ]
+    };
+  },
+  methods: {
+    async init(item) {
+      this.activeData = item;
+      //获取初始数据
+      await this.getInitData();
+      //获取历史数据
+      await this.getHistoricalRecord();
+      this.isShow = true;
+      //回填数据
+      this.backFillData();
+    },
+    getInitData() {
+      return new Promise(resolve => {
+        let commitDictAry = {
+          sex: "sys_user_sex",
+          education: "edu_level",
+          working_years: "working_years"
+        };
+        this.$request.getbaseprofiletpId(this.activeData.goodsId).then(res => {
+          if (!res.data) {
+            //不需要填写
+            this.isShow = false;
+            this.$emit("callbackDataReview");
+            reject();
+          }
+          let Ary = [
+            ...JSON.parse(res.data.keyValue),
+            ...JSON.parse(res.data.keyValue2)
+          ];
+          let Obj = {};
+          Ary.forEach(i => {
+            Obj[i.fieldKey] = [
+              {
+                required: i.required,
+                message: `请${
+                  i.inputType == 1
+                    ? "输入"
+                    : i.inputType == 2 || i.inputType == 5
+                    ? "选择"
+                    : "上传"
+                }${i.fieldName}`,
+                trigger:
+                  i.fieldKey == "apply_post"
+                    ? "change"
+                    : i.inputType == 1
+                    ? "blur"
+                    : "change"
+              }
+            ];
+            if (i.inputType == 2) {
+              this.options[i.fieldKey] = this.$store.state.dictList[
+                commitDictAry[i.fieldKey]
+              ];
+            }
+          });
+          this.rules = Obj;
+          this.listData = Ary;
+          resolve();
+        });
+      });
+    },
+    //获取历史记录
+    getHistoricalRecord() {
+      return new Promise((resolve, reject) => {
+        this.$request
+          .getbaseprofiletpgetInfo({
+            goodsId: this.activeData.goodsId,
+            orderGoodsId: this.activeData.orderGoodsId
+          })
+          .then(res => {
+            if (!res.data) {
+              //提示填写规则
+              this.$confirm(`请填写资料`, "温馨提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                distinguishCancelAndClose: false,
+                showClose: false
+              })
+                .then(_ => {
+                  let str = this.listData.map(i => i.fieldName).join("、");
+                  this.$confirm(
+                    `
+          本产品（或服务）提供【${this.activeData.goodsName}】课程的在线学习功能，为使用这些功能，我们需要使用您设备上的摄像头，并收集以下个人信息：
+         ${str}
+          学习详细记录。
+          我们会将上述信息提供至广东省建设执业注册管理中心等第三方组织使用，用于继续教育备案等。如果您拒绝，将导致这些功能无法实现，但不影响您使用本产品（或服务）的其他业务功能。
+        `,
+                    "提示",
+                    {
+                      confirmButtonText: "确定",
+                      cancelButtonText: "返回",
+                      closeOnClickModal: false,
+                      closeOnPressEscape: false,
+                      distinguishCancelAndClose: false,
+                      showClose: false
+                    }
+                  )
+                    .then(_ => {
+                      resolve();
+                    })
+                    .catch(_ => {
+                      //停止执行-退出页面
+                      this.$router.back(-1);
+                    });
+                })
+                .catch(_ => {
+                  //停止执行-退出页面
+                  this.$router.back(-1);
+                });
+            } else if (res.data.status === 3 && res.data.changeStatus === 1) {
+              //资料审核不通过，请前往重新填写
+              this.$confirm(`资料审核不通过，请前往重新填写`, "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "返回",
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                distinguishCancelAndClose: false,
+                showClose: false
+              })
+                .then(_ => {
+                  this.historyData = JSON.parse(res.data.keyValue); //历史数据
+                  resolve();
+                })
+                .catch(_ => {
+                  //停止执行-退出页面
+                  this.$router.back(-1);
+                });
+            } else {
+              this.isShow = false;
+              //不需要填写
+              this.$emit("callbackDataReview");
+              reject();
+            }
+          });
+      });
+    },
+    //回填数据
+    backFillData() {
+      if (this.historyData) {
+        for (let i in this.historyData) {
+          this.$set(this.infoForm, i, this.historyData[i].value);
+        }
+        this.$nextTick(() => {
+          this.$refs["infoForm"].validate();
+        });
+      }
+      if (!this.infoForm["name"]) {
+        if (this.$store.state.userInfo.realname) {
+          this.$set(this.infoForm, "name", this.$store.state.userInfo.realname);
+          this.nameDisabledStatus = true;
+        }
+      } else {
+        this.nameDisabledStatus = true;
+      }
+      if (!this.infoForm["idcard"]) {
+        if (this.$store.state.userInfo.idCard) {
+          this.$set(this.infoForm, "idcard", this.$store.state.userInfo.idCard);
+          this.idcardDisabledStatus = true;
+        }
+      } else {
+        this.idcardDisabledStatus = true;
+      }
+      if (!this.infoForm["telphone"]) {
+        if (this.$store.state.userInfo.telphone) {
+          this.$set(
+            this.infoForm,
+            "telphone",
+            this.$store.state.userInfo.telphone
+          );
+          this.telphoneDisabledStatus = true;
+        }
+      } else {
+        this.telphoneDisabledStatus = true;
+      }
+      if (
+        !this.infoForm["work_unit"] &&
+        this.$store.state.userInfo.companyName
+      ) {
+        this.$set(
+          this.infoForm,
+          "work_unit",
+          this.$store.state.userInfo.companyName
+        );
+      }
+    },
+    //照片处理逻辑
+    async uploadImg(e, item) {
+      try {
+        let A = ["idcard_face_photo", "idcard_national_photo"].indexOf(item);
+        let file = await this.uploadRules(e.target.files[0]);
+        if (A !== -1) {
+          const res = await this.faceCertificationIDCardOCR(A + 1, file);
+          if (res.code == 500) {
+            this.$message.error(res.msg);
+          } else {
+            this.cacheIdCardData = res.data;
+            //身份证姓名身份证比对
+            await this.idCardDataComparison();
+            this.$set(this.infoForm, item, res.data.IdImgPath);
+          }
+        } else {
+          this.$set(this.infoForm, item, await this.$upload.upload(file));
+        }
+        this.$refs["infoForm"].validateField(item);
+        e.target.value = "";
+      } catch (error) {
+        e.target.value = "";
+      }
+    },
+    //清空签名板
+    retDraw() {
+      this.$set(this.infoForm, "commitment_electr_signature", "");
+      this.$nextTick(() => {
+        this.$refs.esign[0].reset();
+      });
+    },
+    //校验及压缩
+    uploadRules(file) {
+      return new Promise((resolve, reject) => {
+        const fileType = file.type;
+        const isImage = fileType.indexOf("image") != -1;
+        const sizeToM = file.size / 1024 / 1024;
+        if (!isImage) {
+          this.$message.error("只能上传图片格式png、jpg、gif!");
+          reject(false);
+        }
+        if (sizeToM > 2) {
+          imageConversion
+            .compressAccurately(file, {
+              size: 1024 * 2,
+              width: 1000,
+              height: 1000
+            })
+            .then(res => {
+              res = new File([res], file.name, { type: res.type });
+              resolve(res);
+            });
+        } else {
+          resolve(file);
+        }
+      });
+    },
+    //身份证校验
+    faceCertificationIDCardOCR(cardSide, file) {
+      return new Promise(resolve => {
+        var reader = new FileReader();
+        // 将文件加载进入
+        reader.readAsDataURL(file);
+        reader.onload = e => {
+          // 转换完成输出该文件base64编码
+          let base64 = e.target.result;
+
+          this.$request
+            .faceCertificationIDCardOCR({
+              cardSide: cardSide, //1人像  2 国徽
+              cardImageBase64: base64,
+              gradeId: this.activeData.gradeId
+            })
+            .then(res => {
+              resolve(res);
+            })
+            .catch(err => {
+              resolve(err);
+            });
+        };
+      });
+    },
+    //身份证姓名身份证比对
+    idCardDataComparison() {
+      return new Promise((resolve, reject) => {
+        if (
+          this.infoForm["name"] &&
+          this.cacheIdCardData["IdName"] &&
+          this.infoForm["name"] !== this.cacheIdCardData["IdName"]
+        ) {
+          var str = "输入的姓名和身份证人像面照片姓名不匹配,请联系客服";
+          this.$message.warning(str);
+          reject(str);
+        } else if (
+          this.infoForm["idcard"] &&
+          this.cacheIdCardData["IdNum"] &&
+          this.infoForm["idcard"] !== this.cacheIdCardData["IdNum"]
+        ) {
+          var str = "输入的身份证号和身份证人像面照片身份证号不匹配,请联系客服";
+          this.$message.warning(str);
+          reject(str);
+        } else {
+          resolve();
+        }
+      });
+    },
+    async downloadStamp() {
+      await this.subCanvas();
+      this.$request
+        .baseProfileStampV2AddWord({
+          goodsId: this.activeData.goodsId,
+          keyValue: this.returnData()
+        })
+        .then(res => {
+          let url = this.$tools.splitImgHost(res.msg);
+          let name = res.msg.substring(res.msg.lastIndexOf("/") + 1);
+          let image = new Image();
+          // 解决跨域 Canvas 污染问题,
+          image.setAttribute("crossorigin", "anonymous");
+          image.onload = function() {
+            var canvas = document.createElement("canvas");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            var context = canvas.getContext("2d");
+            context.drawImage(image, 0, 0, image.width, image.height);
+            var base64 = canvas.toDataURL("image/jpg"); //将图片格式转为base64
+            var a = document.createElement("a"); // 生成一个a元素
+            var event = new MouseEvent("click"); // 创建一个单击事件
+            a.download = name; // 设置图片名称
+            console.log(base64);
+            a.href = base64; // 将生成的URL设置为a.href属性
+            a.dispatchEvent(event); // 触发a的单击事件
+          };
+          image.src = url + "?time=" + Date.now(); //注意，这里是灵魂，否则依旧会产生跨域问题
+        });
+    },
+    //将canvas签名生产oss地址
+    subCanvas() {
+      return new Promise((resolve, reject) => {
+        if (!this.infoForm["commitment_electr_signature"]) {
+          this.$refs.esign[0]
+            .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+            .then(async res => {
+              let url = await this.$upload.upload(
+                this.convertBase64UrlToBlob(res),
+                0
+              );
+              this.$set(this.infoForm, "commitment_electr_signature", url);
+              this.$refs["infoForm"].validateField(
+                "commitment_electr_signature"
+              );
+              resolve();
+            })
+            .catch(err => {
+              console.log(err, "err");
+              resolve();
+            });
+        }
+        resolve();
+      });
+    },
+    //canvas转file
+    convertBase64UrlToBlob(urlData) {
+      var localData = urlData; //dataUrl为base64位
+      let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码，去掉data:image/png;base64部分
+      let length = base.length;
+      let url = new Uint8Array(length);
+      while (length--) {
+        url[length] = base.charCodeAt(length);
+      }
+      let file = new File([url], "a.jpg", {
+        type: "image/jpg"
+      });
+      //最后将file，通过ajax请求做为参数传给服务器就可以了
+      return file;
+    },
+    //证件照与身份证匹配
+    IdCardCompareFace() {
+      return new Promise(async (resolve, reject) => {
+        if (
+          !this.infoForm["idcard_face_photo"] ||
+          !this.infoForm["recent_photos"]
+        ) {
+          resolve();
+          return;
+        }
+        this.$request
+          .faceCertificationIdCardCompareFace({
+            urlA: this.infoForm["idcard_face_photo"],
+            oneInchPhotos: await this.$tools.imageToBase64(
+              this.$tools.splitImgHost(this.infoForm["recent_photos"])
+            )
+          })
+          .then(res => {
+            if (res.data >= 70) {
+              resolve();
+            } else {
+              var str = "证件照和身份证人像面照片不匹配";
+              this.$message.warning(str);
+              reject(str);
+            }
+          })
+          .catch(err => {
+            reject(err);
+          });
+      });
+    },
+    close() {
+      this.$router.back(-1);
+    },
+    returnData() {
+      let map = new Map();
+      this.listData.forEach(i => {
+        map.set(i.fieldKey, {
+          fieldKey: i.fieldKey,
+          value: this.infoForm[i.fieldKey],
+          fieldName: i.fieldName,
+          status: this.historyData[i.fieldKey]
+            ? this.infoForm[i.fieldKey] == this.historyData[i.fieldKey].value
+              ? 0
+              : 1
+            : 0
+        });
+      });
+      return JSON.stringify(Object.fromEntries(map));
+    },
+    submitForm() {
+      this.$refs["infoForm"].validate(async valid => {
+        if (valid) {
+          try {
+            this.uploading = true;
+            await this.idCardDataComparison();
+            await this.IdCardCompareFace();
+            await this.subCanvas();
+            let obj = this.returnData();
+            if (this.historyData) {
+              let data = {
+                id: this.historyData.id,
+                goodsId: this.activeData.goodsId,
+                orderGoodsId: this.activeData.orderGoodsId,
+                keyValue: obj
+              };
+              this.$request
+                .editbaseprofiletp(data)
+                .then(res => {
+                  this.$message.success("提交成功");
+                  this.isShow = false;
+                  this.$emit("callbackDataReview");
+                })
+                .catch(err => {
+                  this.$message.warning(err.msg);
+                })
+                .finally(() => {
+                  this.uploading = false;
+                });
+            } else {
+              let data = {
+                profileTpId: this.activeData.goodsId,
+                goodsId: this.activeData.goodsId,
+                orderGoodsId: this.activeData.orderGoodsId,
+                keyValue: obj
+              };
+              this.$request
+                .addbaseprofiletp(data)
+                .then(res => {
+                  this.$message.success("提交成功");
+                  this.isShow = false;
+                  this.$emit("callbackDataReview");
+                })
+                .catch(err => {
+                  this.$message.warning(err.msg);
+                })
+                .finally(() => {
+                  this.uploading = false;
+                });
+            }
+          } catch (error) {
+            this.uploading = false;
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-dialog {
+  margin-top: 2vh !important;
+  border-radius: 18px;
+  & > .el-dialog__header {
+    border-bottom: 2px solid #eee;
+    & > .el-dialog__title {
+      font-size: 16px;
+    }
+  }
+}
+.uploadBox {
+  border: 2px dotted rgb(190, 190, 190);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  & > i {
+    font-size: 30px;
+    font-weight: bold;
+    color: rgb(190, 190, 190);
+  }
+}
+.cns_sq {
+  display: flex;
+  background-color: rgb(247, 248, 250);
+  border-radius: 8px;
+  height: 330px;
+  .left {
+    flex: 1;
+    padding: 10px 20px;
+    p {
+      line-height: 30px;
+    }
+  }
+  .right {
+    flex: 1;
+    padding: 10px 20px;
+    h3 {
+      span {
+        color: #a4a4a4;
+      }
+      .el-button {
+        float: right;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -17,8 +17,11 @@ import vueEsign from 'vue-esign'
 import axios from './axios.js'
 import 'moment/locale/zh-cn'
 import "./assets/css/quill.core.css";
-import bus from '@/common/eventBus'
+import bus from '@/common/eventBus';
+// 通用弹窗
+import BaseDialog from "@/components/BaseDialog";
 
+Vue.component("BaseDialog", BaseDialog);
 Vue.config.productionTip = false
 Vue.prototype.$store = store
 Vue.prototype.$request = request

src/pages/course-detail/index.vue

@@ -300,9 +300,9 @@
     </el-dialog>
 
     <el-dialog
-      width="996px"
+      width="920px"
       height="600px"
-      class="info"
+      class="info zl_s"
       :visible.sync="showInfoDetailModal"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -311,6 +311,7 @@
     >
       <div class="info__content">
         <el-form
+          :inline="true"
           :model="infoForm"
           ref="infoForm"
           :rules="rules"
@@ -419,11 +420,20 @@
               label-width="120px"
               :prop="item.required ? item.fieldKey : ''"
             >
-              <el-input
+              <el-select
                 :disabled="apply_post_disabled"
                 v-model="infoForm.apply_post"
-                :placeholder="`请输入${item.fieldName}`"
-              />
+                :placeholder="`请选择${item.fieldName}`"
+                clearable
+              >
+                <el-option
+                  v-for="(items, indexs) in apply_post_options"
+                  :key="indexs"
+                  :label="items"
+                  :value="items"
+                >
+                </el-option>
+              </el-select>
             </el-form-item>
             <el-form-item
               :key="index"
@@ -484,6 +494,7 @@
               :prop="item.required ? item.fieldKey : ''"
             >
               <el-upload
+                style="width:290px;"
                 action=""
                 :max-size="2097152"
                 accept="image/jpeg, image/jpg, image/png"
@@ -519,6 +530,30 @@
                 "
               >
                 <div
+                  slot="trigger"
+                  class="uploadBox"
+                  v-show="
+                    !(item.fieldKey === 'recent_photos'
+                      ? fileList1[0]
+                      : item.fieldKey === 'idcard_face_photo'
+                      ? fileList2[0]
+                      : item.fieldKey === 'idcard_national_photo'
+                      ? fileList3[0]
+                      : '')
+                  "
+                >
+                  <i class="el-icon-plus"></i>
+                </div>
+                <div
+                  v-if="
+                    item.fieldKey === 'recent_photos'
+                      ? fileList1[0]
+                      : item.fieldKey === 'idcard_face_photo'
+                      ? fileList2[0]
+                      : item.fieldKey === 'idcard_national_photo'
+                      ? fileList3[0]
+                      : ''
+                  "
                   class="upload-box"
                   :id="
                     item.fieldKey === 'idcard_face_photo'
@@ -529,22 +564,22 @@
                   <div
                     :style="
                       item.fieldKey === 'recent_photos'
-                        ? 'width: 120px; height: 169px;background:url(' +
+                        ? 'width: 80px; height: 80px;background:url(' +
                           require('@/assets/info_1.png') +
                           ') no-repeat center;background-size:cover;position:relative;'
                         : item.fieldKey === 'idcard_face_photo'
-                        ? 'width: 120px; height: 82px;background:url(' +
+                        ? 'width: 80px; height: 62px;background:url(' +
                           require('@/assets/info_2.png') +
                           ') no-repeat center;background-size:cover;position:relative;'
                         : item.fieldKey === 'idcard_national_photo'
-                        ? 'width: 120px; height: 82px;background:url(' +
+                        ? 'width: 80px; height: 62px;background:url(' +
                           require('@/assets/info_3.png') +
                           ') no-repeat center;background-size:cover;position:relative;'
                         : ''
                     "
                   >
                     <i
-                      @click="deleteImg(item)"
+                      @click.stop="deleteImg(item)"
                       class="el-icon-error"
                       v-if="
                         item.fieldKey === 'recent_photos'
@@ -588,33 +623,27 @@
                     >
                     </el-image>
                   </div>
-
-                  <div>
-                    <span
-                      v-if="item.fieldKey === 'recent_photos'"
-                      style="color: #999999"
-                      >竖向白底证件照 文件大小≤2M</span
-                    >
-                    <span
-                      v-if="
-                        item.fieldKey === 'idcard_face_photo' ||
-                          item.fieldKey === 'idcard_national_photo'
-                      "
-                      style="color: #999999"
-                    >
-                      文件大小≤2M
-                    </span>
-                  </div>
                 </div>
-
-                <div style="display: inline-block" slot="trigger">
-                  <el-button type="primary" size="small" round
-                    >浏览文件</el-button
+                <div slot="tip" class="el-upload__tip">
+                  <span
+                    v-if="item.fieldKey === 'recent_photos'"
+                    style="color: #999999"
+                    >竖向白底证件照 文件大小≤2M</span
+                  >
+                  <span
+                    v-if="
+                      item.fieldKey === 'idcard_face_photo' ||
+                        item.fieldKey === 'idcard_national_photo'
+                    "
+                    style="color: #999999"
                   >
+                    文件大小≤2M
+                  </span>
                 </div>
               </el-upload>
             </el-form-item>
             <div
+              class="letter_style"
               :key="index"
               v-if="
                 item.inputType == 3 &&
@@ -622,52 +651,44 @@
               "
             >
               <el-form-item
-                v-if="
-                  item.inputType == 3 &&
-                    item.fieldKey === 'commitment_electr_signature'
-                "
+                class="_el_f"
                 label="承诺书"
                 :required="item.required"
-                label-width="120px"
+                label-width="60px"
                 label-position="top"
               >
-                <div style="line-height: 40px; text-indent: 2em">
+                <div style="line-height: 30px; text-indent: 2em">
                   <span>
                     本人自愿做出如下承诺：本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
                     全部内容并知晓和理解，本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定，本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求，如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
                   </span>
-                  <div style="line-height: 40px; text-indent: 2em">
+                  <div style="line-height: 30px; text-align:end;">
                     <span>特此承诺！</span>
                   </div>
                 </div>
               </el-form-item>
-              <el-form-item
-                v-if="
-                  item.inputType == 3 &&
-                    item.fieldKey === 'commitment_electr_signature'
-                "
-                label="签名板"
-                :required="item.required"
-                label-width="120px"
-                label-position="top"
-                :prop="item.required ? item.fieldKey : ''"
-              >
-                <div class="dis_stys">
-                  <span style="color: #999999">请在下方签名区进行签名</span>
-                  <el-button
-                    type="primary"
-                    size="small"
-                    @click="retDraw"
-                    mode=""
-                    >清空</el-button
+              <div class="_el_r">
+                <el-form-item
+                  label="签名板"
+                  :required="item.required"
+                  label-width="60px"
+                  label-position="left"
+                  :prop="item.required ? item.fieldKey : ''"
+                  style="margin-bottom: 0px;"
+                >
+                  <div
+                    style="display: inline-block;height: 40px;line-height:40px;"
                   >
-                </div>
+                    <span style="color: #afafaf">(请在下方签名区进行签名)</span>
+                    <el-button type="text" size="small" @click="retDraw" mode=""
+                      >清空</el-button
+                    >
+                  </div>
+                </el-form-item>
                 <div class="handCenter">
                   <vue-esign
                     v-if="!infoForm[item.fieldKey]"
                     ref="esign"
-                    :width="600"
-                    :height="300"
                     :isCrop="false"
                     :lineWidth="5"
                     :lineColor="'#333'"
@@ -683,7 +704,7 @@
                     />
                   </div>
                 </div>
-              </el-form-item>
+              </div>
             </div>
             <el-form-item
               :key="index"
@@ -694,13 +715,6 @@
               label-position="top"
               :prop="item.required ? item.fieldKey : ''"
             >
-              <el-button
-                type="primary"
-                size="small"
-                round
-                @click="downloadStamp(item)"
-                >下载模板</el-button
-              >
               <el-upload
                 action=""
                 :max-size="2097152"
@@ -712,33 +726,39 @@
                 :on-change="changePhotoListStamp"
                 :file-list="fileListStamp"
               >
-                <div style="display: inline-block; vertical-align: top">
-                  <div
-                    :style="
-                      'width: 120px; height: 120px;background:url(' +
-                        require('@/assets/info_4.png') +
-                        ') no-repeat center;background-size:cover;position:relative;'
-                    "
+                <div
+                  v-show="!fileListStamp[0]"
+                  slot="trigger"
+                  class="uploadBox"
+                >
+                  <i class="el-icon-plus"></i>
+                </div>
+                <div class="poyile">
+                  <i
+                    @click.stop="deleteFile(item)"
+                    class="el-icon-error"
+                    v-if="fileListStamp[0]"
+                  ></i>
+                  <el-image
+                    style="width: 120px; height: 120px"
+                    :src="$tools.splitImgHost(fileListStamp[0].url)"
+                    v-if="fileListStamp[0]"
+                    :preview-src-list="[
+                      $tools.splitImgHost(fileListStamp[0].url)
+                    ]"
                   >
-                    <el-image
-                      style="width: 100%; height: 100%"
-                      :src="$tools.splitImgHost(fileListStamp[0].url)"
-                      v-if="fileListStamp[0]"
-                      :preview-src-list="[
-                        $tools.splitImgHost(fileListStamp[0].url)
-                      ]"
-                    >
-                    </el-image>
-                  </div>
-
-                  <div>
-                    <span style="color: #999999">文件大小≤2M</span>
-                  </div>
+                  </el-image>
                 </div>
-
-                <div style="display: inline-block" slot="trigger">
-                  <el-button type="primary" size="small" round
-                    >浏览文件</el-button
+                <div slot="tip" class="el-upload__tip">
+                  <span style="color: #999999">
+                    文件大小≤2M
+                  </span>
+                  <el-button
+                    type="text"
+                    size="small"
+                    round
+                    @click="downloadStamp(item)"
+                    >下载模板</el-button
                   >
                 </div>
               </el-upload>
@@ -793,7 +813,7 @@
                 size="small"
                 round
                 @click="downloadStamp(item)"
-                >下载模板</el-button
+                >下载承诺书</el-button
               >
               <el-upload
                 action=""
@@ -856,9 +876,9 @@
     </el-dialog>
 
     <el-dialog
-      width="996px"
+      width="440px"
       height="600px"
-      class="info"
+      class="info _ts"
       :visible.sync="showAgreementModal"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
@@ -903,6 +923,10 @@
         >
       </span>
     </el-dialog>
+    <dataReview
+    ref="dataReview"
+      @callbackDataReview="callbackDataReview"
+    />
     <div id="printTable"></div>
     <!-- <ToolBar></ToolBar> -->
     <Footer></Footer>
@@ -910,6 +934,7 @@
 </template>
 
 <script>
+import dataReview from "@/components/dataReview";
 import { Loading } from "element-ui";
 import axios from "axios";
 import Footer from "@/components/footer/index";
@@ -946,7 +971,8 @@ export default {
     HandOut,
     VueOfficeDocx,
     VueOfficeExcel,
-    VueOfficePdf
+    VueOfficePdf,
+    dataReview
   },
   data() {
     return {
@@ -1068,6 +1094,21 @@ export default {
         commitment_electr_signature: "",
         commitment_seal: ""
       },
+      apply_post_options: [
+        "土建施工员",
+        "装饰装修施工员",
+        "设备安装施工员",
+        "市政工程施工员",
+        "土建质量员",
+        "装饰装修质量员",
+        "设备安装质量员",
+        "市政工程质量员",
+        "材料员",
+        "机械员",
+        "劳务员",
+        "资料员",
+        "标准员"
+      ],
       needOpenNew: true,
       recommendList: [],
       rules: {
@@ -1189,7 +1230,7 @@ export default {
         apply_post: [
           {
             required: true,
-            message: "请输入报名岗位",
+            message: "请选择报名岗位",
             trigger: ["change", "blur"]
           }
         ],
@@ -1286,7 +1327,7 @@ export default {
       failToRegister: false, //报名是否不通过
       openPhotoStatus: 0,
       readerResult: null,
-      handoutList: []
+      handoutList: [],
     };
   },
   watch: {
@@ -1371,7 +1412,6 @@ export default {
     Loading.service().close();
   },
   async mounted() {
-    console.log(1);
     this.courseId = this.$route.query.courseId || "";
     this.goodsId = this.$route.params.goodsId;
     this.orderGoodsId = this.$route.query.orderGoodsId;
@@ -1390,10 +1430,15 @@ export default {
 
     this.getUserHandOutList();
     this.getRecommend();
-    this.getbaseprofiletplists().then(async res => {
-      await this.courseCourseList();
-      this.getRebuildCourse();
+    this.$refs.dataReview.init({
+      goodsId: this.goodsId,
+      orderGoodsId: this.orderGoodsId,
+      gradeId: this.gradeId
     });
+    // this.getbaseprofiletplists().then(async res => {
+    //   await this.courseCourseList();
+    //   this.getRebuildCourse();
+    // });
     document.addEventListener("visibilitychange", this.pauseVideo);
     console.log(3);
   },
@@ -1425,6 +1470,15 @@ export default {
   methods: {
     ...mapMutations(["getCartCount"]),
     ...mapActions(["getUserInfo"]),
+    async callbackDataReview() {
+      if (this.gradeId > 0) {
+        console.log("aaa")
+        //提交完资料返回判断是否已开班
+        this.getGradeInfo();
+      }
+      await this.courseCourseList();
+      this.getRebuildCourse();
+    },
     /**
      *
      获取用户讲义列表
@@ -2533,7 +2587,7 @@ export default {
                   ) {
                     if (!result.data) {
                       self.needProfileModal = true;
-                      this.$confirm(`请填写资料`, "提示", {
+                      this.$confirm(`请先完善个人学习资料`, "提示", {
                         confirmButtonText: "确定",
                         cancelButtonText: "返回",
                         closeOnClickModal: false,
@@ -2786,6 +2840,10 @@ export default {
         this.infoForm["idcard_national_photo"] = "";
       }
     },
+    deleteFile() {
+      this.$set(this.infoForm, "commitment_seal", "");
+      this.fileListStamp = [];
+    },
 
     /**
      *  getbaseprofiletpgetInfo接口返回值result.data.data不存在的话说明是第一次填写资料
@@ -4733,6 +4791,76 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.zl_s {
+  /deep/ .el-form-item__content {
+    line-height: normal;
+  }
+  /deep/ .el-dialog {
+    margin-top: 2vh !important;
+    border-radius: 14px !important;
+    & > .el-dialog__header {
+      border-bottom: 2px solid #eee;
+    }
+    .el-input {
+      width: 290px;
+    }
+  }
+  .uploadBox {
+    border-radius: 8px;
+    border: 2px solid #eee;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    & > i {
+      font-size: 22px;
+      font-weight: bold;
+      color: #cbcbcb;
+    }
+  }
+  .el-upload__tip {
+    margin-left: 10px;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+  .letter_style {
+    background-color: rgb(247, 248, 250);
+    border-radius: 8px;
+    display: flex;
+    padding: 10px;
+    margin-bottom: 10px;
+    ._el_f {
+      flex: 1;
+    }
+    ._el_r {
+      flex: 1;
+    }
+  }
+  .poyile {
+    display: inline-block;
+    position: relative;
+    .el-icon-error {
+      cursor: pointer;
+      z-index: 99;
+      position: absolute;
+      left: 84%;
+      font-size: 20px;
+      color: red;
+    }
+  }
+}
+._ts {
+  /deep/ .el-dialog {
+    border-radius: 8px;
+  }
+  /deep/ .el-dialog__header {
+    text-align: center;
+  }
+  /deep/ .el-dialog__body {
+    line-height: 28px;
+  }
+}
 .course-item {
   float: left;
   margin-bottom: 6px;
@@ -5550,13 +5678,13 @@ export default {
 
   .info {
     &__content {
-      height: 500px;
+      height: 67vh;
       overflow-y: scroll;
 
       .handCenter {
-        width: 600px;
-        height: 300px;
-        background: #ccc;
+        border-radius: 8px;
+        // width: 600px;
+        background: #fff;
       }
 
       .upload-box {
@@ -5567,8 +5695,7 @@ export default {
           cursor: pointer;
           z-index: 99;
           position: absolute;
-          left: 100%;
-          bottom: 100%;
+          left: 60px;
           font-size: 20px;
           color: red;
         }

src/pages/person-center/my-bank/bank-detail-copy/index.vue

@@ -0,0 +1,1522 @@
+<template>
+  <div class="bank-detail">
+    <section class="section">
+      <div class="section__body">
+        <div class="left-box">
+          <el-tabs v-model="activeName" @tab-click="tabChange">
+            <el-tab-pane label="章节练习" name="1">
+              <div class="goods-menu">
+                <div class="goods-menu__header">
+                  <div class="title">{{ goodsDetail.goodsName }}</div>
+                  <span class="question-do"></span>
+                </div>
+                <div class="goods-menu__body">
+                  <div
+                    class="item"
+                    v-for="(item, index) in bankList"
+                    :key="index"
+                  >
+                    <template v-if="item.type == 1">
+                      <div class="item__title" @click="moduleExam(item)">
+                        <i
+                          :class="{
+                            'el-icon-caret-right': !item.showList,
+                            'el-icon-caret-bottom': item.showList
+                          }"
+                        ></i>
+                        {{ item.name }}
+                      </div>
+                      <div class="item__content" v-if="item.showList">
+                        <div class="bank-chapter">
+                          <div
+                            class="bank-chapter__item"
+                            v-for="(chapter, chapterIndex) in item.list"
+                            :key="chapterIndex"
+                          >
+                            <div
+                              class="bank-chapter__item__text"
+                              @click="chapterExam(chapter, item.majorId)"
+                            >
+                              <i
+                                :class="{
+                                  'el-icon-caret-right': !chapter.showList,
+                                  'el-icon-caret-bottom': chapter.showList
+                                }"
+                              ></i
+                              >{{ chapter.name }}
+                            </div>
+
+                            <div class="bank-section" v-if="chapter.showList">
+                              <div
+                                class="bank-section__item"
+                                v-for="(section, sectionIndex) in chapter.list"
+                                :key="sectionIndex"
+                              >
+                                <div class="bank-section__item__text">
+                                  {{ section.examName }}
+                                </div>
+                                <div class="btn_div">
+                                  <!-- 正确率
+                                  <span style="color: rgb(52, 216, 71)"
+                                    >{{
+                                      computedNums(
+                                        section.doQuestionNum,
+                                        section.questionNum
+                                      )
+                                    }}%</span
+                                  > -->
+                                  <span style="margin-left: 6px">已完成 </span
+                                  ><span style="color: blue">{{
+                                    section.doQuestionNum || 0
+                                  }}</span>
+                                  /
+                                  {{ section.questionNum || 0 }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="
+                                    toDo(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  class="btn"
+                                  >开始做题</el-button
+                                >
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 0 &&
+                                      section.doType == 1
+                                  "
+                                  type="primary"
+                                  @click="
+                                    continueDo(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  class="btn"
+                                  >继续做题</el-button
+                                >
+
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 1 ||
+                                      (section.recordStatus == 0 &&
+                                        section.doType == 2)
+                                  "
+                                  :disabled="
+                                    section.answerNum > 0 &&
+                                      section.doNum >= section.answerNum
+                                  "
+                                  type="primary"
+                                  @click="
+                                    doRepeat(
+                                      section,
+                                      chapter.chapterExamId,
+                                      item.majorId
+                                    )
+                                  "
+                                  class="btn"
+                                  >重新做题</el-button
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-if="item.type == 2">
+                      <div class="item__content">
+                        <div class="bank-chapter">
+                          <div class="bank-chapter__item">
+                            <div
+                              class="bank-chapter__item__text"
+                              @click="chapterExam(item, 0)"
+                            >
+                              <i
+                                :class="{
+                                  'el-icon-caret-right': !item.showList,
+                                  'el-icon-caret-bottom': item.showList
+                                }"
+                              ></i
+                              >{{ item.name }}
+                            </div>
+
+                            <div class="bank-section" v-if="item.showList">
+                              <div
+                                class="bank-section__item"
+                                v-for="(section, sectionIndex) in item.list"
+                                :key="sectionIndex"
+                              >
+                                <div class="bank-section__item__text">
+                                  {{ section.examName }}
+                                </div>
+                                <div
+                                  style="width: auto; padding: 0px 14px"
+                                  class="btn_div"
+                                >
+                                  <!-- 正确率
+                                  <span style="color: rgb(52, 216, 71)"
+                                    >{{
+                                      computedNums(
+                                        section.doQuestionNum,
+                                        section.questionNum
+                                      )
+                                    }}%</span
+                                  > -->
+                                  <span style="margin-left: 6px">已完成 </span
+                                  ><span style="color: blue">{{
+                                    section.doQuestionNum || 0
+                                  }}</span>
+                                  /
+                                  {{ section.questionNum || 0 }}
+                                </div>
+                                <el-button
+                                  v-if="section.recordStatus == -1"
+                                  type="primary"
+                                  @click="toDo(section, item.majorId, 0)"
+                                  class="btn"
+                                  >开始做题</el-button
+                                >
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 0 &&
+                                      section.doType == 1
+                                  "
+                                  type="primary"
+                                  @click="continueDo(section, item.majorId, 0)"
+                                  class="btn"
+                                  >继续做题</el-button
+                                >
+
+                                <el-button
+                                  v-if="
+                                    section.recordStatus == 1 ||
+                                      (section.recordStatus == 0 &&
+                                        section.doType == 2)
+                                  "
+                                  :disabled="
+                                    section.answerNum > 0 &&
+                                      section.doNum >= section.answerNum
+                                  "
+                                  type="primary"
+                                  @click="doRepeat(section, item.majorId, 0)"
+                                  class="btn"
+                                  >重新做题</el-button
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-if="item.type == 3">
+                      <div class="item__content">
+                        <div class="bank-section">
+                          <div class="bank-section__item">
+                            <div class="bank-section__item__text">
+                              {{ item.name }}
+                            </div>
+                            <div
+                              style="width: auto; padding: 0px 14px"
+                              class="btn_div"
+                            >
+                              <!-- 正确率
+                              <span style="color: rgb(52, 216, 71)"
+                                >{{
+                                  computedNums(
+                                    item.doQuestionNum,
+                                    item.questionNum
+                                  )
+                                }}%</span
+                              > -->
+                              <span style="margin-left: 6px">已完成 </span
+                              ><span style="color: blue">{{
+                                item.doQuestionNum || 0
+                              }}</span>
+                              / {{ item.questionNum || 0 }}
+                            </div>
+                            <el-button
+                              v-if="item.recordStatus == -1"
+                              type="primary"
+                              @click="toDo(item, 0, 0)"
+                              class="btn"
+                              >开始做题</el-button
+                            >
+                            <el-button
+                              v-if="item.recordStatus == 0 && item.doType == 1"
+                              type="primary"
+                              @click="continueDo(item, 0, 0)"
+                              class="btn"
+                              >继续做题</el-button
+                            >
+
+                            <el-button
+                              v-if="
+                                item.recordStatus == 1 ||
+                                  (item.recordStatus == 0 && item.doType == 2)
+                              "
+                              :disabled="
+                                item.answerNum > 0 &&
+                                  item.doNum >= item.answerNum
+                              "
+                              type="primary"
+                              @click="doRepeat(item, 0, 0)"
+                              class="btn"
+                              >重新做题</el-button
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="收藏题集" name="2">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择"
+                        v-model="collectSelect"
+                        @change="getCollectData"
+                        clearable
+                        @clear="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </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="#FFC53D"
+                        :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, {
+                                examId: item.examId,
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            @click="
+                              go('/subject/collect-type-bank/' + item.type, {
+                                explain: 1,
+                                examId: item.examId,
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            round
+                            plain
+                            class="btn"
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="错题集" name="3">
+              <div class="goods-collect">
+                <div class="goods-collect__header">
+                  <div class="selects">
+                    <div class="selects__item">
+                      <el-select
+                        placeholder="请选择试卷类型"
+                        v-model="wrongSelect"
+                        clearable
+                        @clear="getWrongData"
+                        @change="getWrongData"
+                      >
+                        <el-option
+                          v-for="(item, index) in selectList"
+                          :key="index"
+                          :label="item.paperName"
+                          :value="item.paperId"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                  </div>
+
+                  <div class="tabs">
+                    <el-tabs v-model="wrongName" @tab-click="getWrongData">
+                      <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="#F5222D"
+                        :format="() => wrongTotal || '0'"
+                        :percentage="25"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="list" v-if="wrongName == '1'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongExamList"
+                      :key="index"
+                    >
+                      <div class="title">
+                        {{ item.examName }}
+                      </div>
+                      <div class="content clearfix">
+                        <div class="left">
+                          错题数<span class="red">{{
+                            item.wrongQuestionNum
+                          }}</span>
+                        </div>
+                        <div class="right">
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-bank/' + item.examId, {
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-bank/' + item.examId, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="list" v-if="wrongName == '2'">
+                    <div
+                      class="list__item"
+                      v-for="(item, index) in wrongTypeList"
+                      :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"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-type-bank/' + item.type, {
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            >重做</el-button
+                          >
+                          <el-button
+                            type="primary"
+                            round
+                            plain
+                            class="btn"
+                            @click="
+                              go('/subject/wrong-type-bank/' + item.type, {
+                                explain: 1,
+                                orderGoodsId: orderGoodsId
+                              })
+                            "
+                            >解析</el-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="right-box">
+          <div class="right-box__header">
+            <div class="title">
+              <div
+                @click="
+                  go('/person-center/my-bank/bank-statistics/' + goodsId, {
+                    orderGoodsId: orderGoodsId
+                  })
+                "
+              >
+                做题统计>
+              </div>
+            </div>
+            <div class="content">
+              <div class="left">
+                <div class="title">总进度</div>
+                <div class="note">
+                  {{
+                    goodsCount.totalNum > 0
+                      ? (
+                          (goodsCount.doNum / goodsCount.totalNum) *
+                          100
+                        ).toFixed(
+                          (goodsCount.doNum / goodsCount.totalNum) * 100 == 100
+                            ? 0
+                            : 1
+                        )
+                      : 0
+                  }}%
+                </div>
+              </div>
+              <div class="right">
+                <div class="title"><span class="blue">已答题</span>/未答题</div>
+                <div class="note">
+                  <span class="blue">{{ goodsCount.doNum }}</span
+                  >/{{ goodsCount.totalNum - goodsCount.doNum }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="right-box__body"
+            v-if="recommendList.goodsList && recommendList.goodsList.length"
+          >
+            <div class="title">
+              推荐题库
+              <span class="more" @click="go('/bank-list')">更多></span>
+            </div>
+            <ul class="list">
+              <li
+                class="course-item"
+                v-for="(itemy, index) in compyRecommend(
+                  recommendList.goodsList
+                )"
+                :key="index"
+              >
+                <GoodsItem :item="itemy"></GoodsItem>
+                <!-- <div
+                  class="course-item__img"
+                  :style="`background-image:url(${$tools.splitImgHost(
+                    itemy.coverUrl,
+                    true
+                  )})`"
+                >
+                  <div class="note" v-if="itemy.year">{{ itemy.year }}</div>
+                </div>
+                <div class="course-item__title">
+                  {{ itemy.goodsName }}
+                </div>
+                <div class="course-item__desc">
+                  <div class="price">￥{{ itemy.standPrice }}</div>
+                  <a class="add" @click.stop="addCart(true, itemy.goodsId)"
+                    >加购物车</a
+                  >
+                </div> -->
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import GoodsItem from "@/components/goodsItem/index";
+export default {
+  name: "BankDetail",
+  components: {
+    GoodsItem
+  },
+  data() {
+    return {
+      orderGoodsId: "",
+      activeName: "1",
+      collectName: "1",
+      wrongName: "1",
+      goodsId: "",
+      goodsDetail: {},
+      goodsCount: {},
+      bankList: [],
+      selectList: [],
+      collectSelect: "",
+      wrongSelect: "",
+      hasClickList: [],
+      collectTypeList: [],
+      collectExamList: [],
+      wrongTypeList: [],
+      wrongExamList: [],
+      collectTotal: 0,
+      wrongTotal: 0,
+      recommendList: [],
+      needOpen: true //是否需要打开第一章节
+    };
+  },
+  mounted() {
+    this.orderGoodsId = this.$route.query.orderGoodsId;
+    this.goodsId = this.$route.params.goodsId;
+    this.goodsBankQuestionNum();
+    this.goodsBank();
+    this.getDetail();
+    this.examaperList();
+  },
+  computed: {
+    compyRecommend: function() {
+      return function(array) {
+        let ary = [];
+        if (array) {
+          for (let i = 0; i < array.length; i++) {
+            if (i >= 5) {
+              break;
+            } else {
+              ary.push(array[i]);
+            }
+          }
+        }
+        return ary;
+      };
+    },
+    computedNums: function() {
+      return function(doNum, totalNum) {
+        let ary = 0;
+        ary = parseInt(doNum ? doNum : 0) / parseInt(totalNum ? totalNum : 0);
+        return (ary * 100).toFixed(0);
+      };
+    }
+  },
+  methods: {
+    /**
+     * 跳转
+     */
+    toGoodsDetail(item) {
+      this.$router.push({
+        path: "/bank-detail/" + item.goodsId,
+        query: {
+          orderGoodsId: item.orderGoodsId
+        }
+      });
+    },
+    addCart(status, goodsId) {
+      this.$request
+        .addCart({ goodsId: status ? goodsId : this.goodsId })
+        .then(res => {
+          this.$message({
+            message: "加入购物车成功",
+            type: "success"
+          });
+        })
+        .catch(err => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning"
+            });
+          }
+        });
+    },
+    /**
+     * 
+     获取推荐列表
+     */
+    getRecommend() {
+      this.$request
+        .appCommonActivityRecommendList({
+          businessId: this.goodsDetail.businessId,
+          type: 2
+        })
+        .then(res => {
+          if (res.rows.length) {
+            this.recommendList = res.rows[0];
+          }
+        });
+    },
+    go(path, query = {}) {
+      console.log(path, query);
+      this.$router.push({
+        path,
+        query
+      });
+    },
+    examaperList() {
+      this.$request.examaperList().then(res => {
+        this.selectList = res.rows;
+      });
+    },
+
+    /**
+     * 获取用户商品统计数据
+     */
+    goodsBankQuestionNum() {
+      this.$request.goodsBankQuestionNum(this.orderGoodsId).then(res => {
+        this.goodsCount = res.data;
+      });
+    },
+
+    getDetail() {
+      this.$request.commonGoodsDetail(this.goodsId).then(res => {
+        this.goodsDetail = res.data;
+        this.getRecommend();
+      });
+    },
+
+    /**
+     * 获取课程目录
+     */
+    goodsBank() {
+      this.$request
+        .goodsBank({
+          orderGoodsId: this.orderGoodsId,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          res.data.forEach(item => {
+            if (item.type == 2 || item.type == 1) {
+              item.showList = false;
+              item.list = [];
+            }
+          });
+          this.bankList = res.data;
+
+          for (let i = 0; i < this.bankList.length; i++) {
+            if (this.bankList[i].type == 1) {
+              this.moduleExam(this.bankList[i]);
+              break;
+            } else if (this.bankList[i].type == 2) {
+              this.needOpen = false;
+              this.chapterExam(this.bankList[i], 0);
+              break;
+            }
+          }
+        });
+    },
+
+    /**
+     * 展开模块卷
+     */
+    moduleExam(Module) {
+      if (Module.list.length) {
+        Module.showList = !Module.showList;
+        return;
+      }
+      this.$request
+        .goodsChapterList({
+          orderGoodsId: this.orderGoodsId,
+          moduleExamId: Module.majorId,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          res.data.forEach(item => {
+            item.showList = false;
+            item.list = [];
+          });
+          Module.showList = !Module.showList;
+          Module.list = res.data;
+
+          if (this.needOpen) {
+            this.needOpen = false;
+            this.chapterExam(Module.list[0], Module.majorId);
+          }
+        });
+    },
+    /**
+     * 展开章卷
+     */
+    chapterExam(chapter, moduleId = 0) {
+      if (chapter.list.length) {
+        chapter.showList = !chapter.showList;
+        return;
+      }
+      this.$request
+        .bankExamExamList({
+          orderGoodsId: this.orderGoodsId,
+          moduleExamId: moduleId,
+          chapterExamId: chapter.chapterExamId || chapter.majorId,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          chapter.showList = !chapter.showList;
+          chapter.list = res.data;
+        });
+    },
+
+    /**
+     * 去做题
+     */
+    async toDo(section, chapterId, moduleId) {
+      let count = await this.examRecordCount(section.examId || section.majorId);
+      let answerNum = await this.getExamDetail(
+        section.examId || section.majorId
+      );
+      //超过答题次数
+
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!"
+        });
+        return;
+      }
+
+      this.$router.push({
+        path: "/bank-exam/" + this.goodsId,
+        query: {
+          examId: section.examId || section.majorId,
+          moduleId: moduleId || 0,
+          chapterId: chapterId || 0,
+          orderGoodsId: this.orderGoodsId
+        }
+      });
+    },
+
+    /**
+     * 继续做题
+     */
+    async continueDo(section, chapterId, moduleId) {
+      this.$router.push({
+        path: "/bank-exam-continue/" + this.goodsId,
+        query: {
+          recordId: section.recordId,
+          examId: section.examId || section.majorId,
+          chapterId: chapterId,
+          moduleId: moduleId,
+          orderGoodsId: this.orderGoodsId
+        }
+      });
+    },
+
+    /**
+     * 重做
+     * @param {Object} recordId
+     * @param {Object} examId
+     * @param {Object} goodsId
+     * @param {Object} chapterExamId
+     */
+    async doRepeat(section, chapterId = 0, moduleId = 0) {
+      let count = await this.examRecordCount(section.examId || section.majorId);
+      let answerNum = await this.getExamDetail(
+        section.examId || section.majorId
+      );
+      //超过答题次数
+      if (answerNum > 0 && count >= answerNum) {
+        this.$message({
+          type: "warning",
+          message: "该试卷只能答题" + answerNum + "次!"
+        });
+        return;
+      }
+
+      this.$confirm(`是否清空答案重做？`, "提示", {
+        confirmButtonText: "重做",
+        cancelButtonText: "查看上次",
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        distinguishCancelAndClose: false,
+        showClose: false
+      })
+        .then(_ => {
+          this.$router.push({
+            path: "/bank-exam/" + this.goodsId,
+            query: {
+              examId: section.examId || section.majorId,
+              moduleId: moduleId || 0,
+              chapterId: chapterId || 0,
+              orderGoodsId: this.orderGoodsId
+            }
+          });
+        })
+        .catch(_ => {
+          this.$router.push({
+            path: "/bank-exam-all-explain/" + section.recordId,
+            query: {
+              examId: section.examId || section.majorId,
+              moduleId: moduleId || 0,
+              chapterId: chapterId || 0,
+              goodsId: this.goodsId,
+              orderGoodsId: this.orderGoodsId
+            }
+          });
+        });
+    },
+
+    /**
+     * 查询试卷历史做题次数
+     */
+    examRecordCount(examId) {
+      return new Promise(resolve => {
+        this.$request
+          .examRecordCount({
+            examId: examId,
+            orderGoodsId: this.orderGoodsId
+          })
+          .then(res => {
+            resolve(res.data);
+          });
+      });
+    },
+    /**
+     * @param {Object} exam_id
+     * 获取试卷可以做的次数
+     */
+    getExamDetail(exam_id) {
+      return new Promise(resolve => {
+        this.$request.getExamDetail(exam_id).then(res => {
+          resolve(res.data.answerNum);
+        });
+      });
+    },
+
+    getWrongData() {
+      if (this.wrongName == "1") {
+        //试卷归类
+        this.wrongRecordList();
+      } else if (this.wrongName == "2") {
+        //题型归类
+        this.wrongRecordTypeList();
+      }
+    },
+
+    wrongRecordList() {
+      this.$request
+        .wrongRecordList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          this.wrongExamList = res.rows;
+          let total = 0;
+          res.rows.forEach(item => {
+            total += item.wrongQuestionNum;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+    wrongRecordTypeList() {
+      this.$request
+        .wrongRecordTypeList({
+          paperId: this.wrongSelect,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          this.wrongTypeList = res.rows;
+
+          let total = 0;
+          res.rows.forEach(item => {
+            total += item.num;
+          });
+
+          this.wrongTotal = total;
+        });
+    },
+
+    getCollectData() {
+      if (this.collectName == "1") {
+        //试卷归类
+        this.goodsCollectExamList();
+      } else if (this.collectName == "2") {
+        //题型归类
+        this.collectQuestionTypeList();
+      }
+    },
+
+    /**
+     * 收藏按试卷分类
+     */
+    goodsCollectExamList() {
+      this.$request
+        .goodsCollectExamList({
+          paperId: this.collectSelect,
+          goodsId: this.goodsId
+        })
+        .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.wrongSelect,
+          goodsId: this.goodsId
+        })
+        .then(res => {
+          this.collectTypeList = res.rows;
+          let total = 0;
+          res.rows.forEach(item => {
+            total += item.num;
+          });
+
+          this.collectTotal = total;
+        });
+    },
+
+    tabChange(e) {
+      if (this.hasClickList.indexOf(e.name) != -1) {
+        return;
+      }
+
+      this.hasClickList.push(e.name);
+
+      if (e.name == "2") {
+        //收藏集
+        this.getCollectData();
+      } else if (e.name == "3") {
+        //错题集
+        this.getWrongData();
+      }
+    },
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.btn_div {
+  user-select: none;
+  color: #666666;
+  margin-right: 10px;
+  padding: 0px 14px;
+  height: 32px;
+  line-height: 32px;
+}
+.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 {
+              display: flex;
+              justify-content: space-between;
+              &__item {
+                width: 360px;
+                height: 40px;
+                border-radius: 8px;
+
+                .el-select {
+                  width: 100%;
+                }
+
+                /deep/ .el-input__inner {
+                  background: #fafafa;
+                  border: 1px solid #d9d9d9;
+                }
+              }
+            }
+          }
+
+          &__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>

src/pages/person-center/my-bank/bank-detailCopy/index.vue

@@ -1,1816 +0,0 @@
-<template>
-  <div id="bankDetailCopy" class="bank-detail">
-    <section class="section">
-      <div class="section__body">
-        <div class="left-box">
-          <el-tabs v-model="activeName" @tab-click="handelTab">
-            <el-tab-pane
-              v-for="tab in newList"
-              :key="tab.paperId"
-              :label="tab.paperName"
-              :name="tab.paperId + ''"
-            >
-              <div
-                v-if="tab.paperName == '每日一练'"
-                style="background: #f8f8fa; padding: 20px"
-              >
-                <template v-if="tab.examInfo">
-                  <el-row :gutter="20">
-                    <el-col :span="16">
-                      <div class="day-box">
-                        <div>
-                          <p>
-                            打卡天数<span>{{ tab.examInfo.recordCount }}</span
-                            >天
-                          </p>
-                          <p>
-                            打卡进度超过了{{
-                              tab.examInfo.recordPercentage
-                            }}的学员
-                          </p>
-                        </div>
-                        <div @click="handelPunchClock(tab)">
-                          {{
-                            tab.examInfo.examRecord ? "今日已打卡" : "今日打卡"
-                          }}
-                        </div>
-                        <img src="../../../../assets/basket.png" alt="" />
-                      </div>
-                      <div class="clock-in-box">
-                        <div class="clock-in-box-item">
-                          <p class="clock-title">明日打卡任务</p>
-                          <div class="clock-task">
-                            {{ tab.examInfo.examNameBelow || "暂无" }}
-                          </div>
-                        </div>
-                        <div class="clock-in-box-item">
-                          <p class="clock-title">打卡记录</p>
-                          <div class="clock-calendar">
-                            <el-calendar :first-day-of-week="7">
-                              <template
-                                slot="dateCell"
-                                slot-scope="{ date, data }"
-                              >
-                                <p
-                                  v-if="!isSelected(data.day)"
-                                  :class="isToday(data.day) ? 'date-today' : ''"
-                                >
-                                  {{ data.day.split("-").slice(2).join("-") }}
-                                </p>
-                                <p v-else class="is-Select">
-                                  <img
-                                    src="../../../../assets/tick.png"
-                                    alt=""
-                                  />
-                                </p>
-                              </template>
-                            </el-calendar>
-                          </div>
-                        </div>
-                      </div>
-                    </el-col>
-                    <el-col :span="8">
-                      <div class="ranki-list">
-                        <p class="ranki-list-title">打卡PK榜</p>
-                        <ul>
-                          <li style="font-size: 12px">
-                            <p>排名</p>
-                            <p>用户ID</p>
-                            <p>打卡天数</p>
-                          </li>
-                          <li v-for="(item, index) in rankiList" :key="index">
-                            <p>
-                              {{ index > 8 ? index + 1 : "0" + (index + 1) }}
-                            </p>
-                            <p>
-                              <el-image :src="$tools.splitImgHost(item.avatar)">
-                                <div slot="error" class="image-slot">
-                                  <i class="el-icon-picture-outline"></i>
-                                </div>
-                              </el-image>
-                              {{ item.userName }}
-                            </p>
-                            <p style="color: #222222">{{ item.recordCount }}</p>
-                          </li>
-                        </ul>
-                      </div>
-                    </el-col>
-                  </el-row>
-                </template>
-                <div class="no-data" v-else>
-                  <div>
-                    <img src="../../../../assets/no-data.png" alt="" />
-                    <p>暂无题库，请前往购买</p>
-                  </div>
-                </div>
-              </div>
-              <div
-                v-else-if="tab.paperName == '随机练习'"
-                style="background: #f8f8fa; padding: 20px"
-              >
-                <div class="random-box">
-                  <div class="random-box-top">
-                    <p class="random-box-title">试卷情况</p>
-                    <div class="random-box-top-num">
-                      <img
-                        style="margin-right: 12px"
-                        src="../../../../assets/testpaper.png"
-                        alt=""
-                      />
-                      <div>
-                        <p>{{ tab.examInfo ? tab.examInfo.doNum : "-" }}</p>
-                        <p>已完成提数</p>
-                      </div>
-                      <div class="line"></div>
-                      <div>
-                        <p>{{ tab.examInfo ? tab.examInfo.totalNum : "-" }}</p>
-                        <p>总提数</p>
-                      </div>
-                      <div class="line"></div>
-                      <div>
-                        <p>
-                          {{
-                            tab.examInfo
-                              ? toFixed(
-                                  (tab.examInfo.rightNum /
-                                    tab.examInfo.totalNum) *
-                                    100
-                                )
-                              : "-"
-                          }}%
-                        </p>
-                        <p>正确率</p>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="random-box-bom">
-                    <p class="random-box-title">做题数量</p>
-                    <div class="sle-num-box">
-                      <div
-                        :class="activeNum == val ? 'actvie' : ''"
-                        v-for="val in numList"
-                        :key="val"
-                        @click="handelNum(val)"
-                      >
-                        {{ val }}
-                      </div>
-                    </div>
-                    <div
-                      class="random-box-bom-btn"
-                      @click="beginExam(tab.examInfo)"
-                    >
-                      开始做题
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="goods-menu" v-else>
-                <div class="goods-menu__body">
-                  <div
-                    class="item"
-                    v-for="(item, index) in bankList"
-                    :key="index"
-                  >
-                    <template v-if="item.type == 1">
-                      <div class="item__title" @click="moduleExam(item)">
-                        {{ item.name }}
-                        <span
-                          style="float: right; color: #99a0a7; font-weight: 400"
-                          >{{ item.showList ? "收起∧" : "展开∨" }}
-                        </span>
-                      </div>
-                      <div class="item__content" v-if="item.showList">
-                        <div class="bank-chapter">
-                          <div
-                            class="bank-chapter__item"
-                            v-for="(chapter, chapterIndex) in item.list"
-                            :key="chapterIndex"
-                          >
-                            <div
-                              class="bank-chapter__item__text"
-                              @click="chapterExam(chapter, item.majorId)"
-                            >
-                              <span
-                                style="
-                                  margin-left: 21px;
-                                  margin-right: 8px;
-                                  color: #a7b0b8;
-                                "
-                                ><span v-if="chapterIndex + 1 < 10"
-                                  >0{{ chapterIndex + 1 }}</span
-                                ><span v-else>
-                                  {{ chapterIndex + 1 }}
-                                </span></span
-                              >{{ chapter.name }}
-                              <i
-                                v-if="chapter.showList"
-                                class="el-icon-arrow-up"
-                                style="float: right; margin-right: 20px"
-                              ></i>
-                              <i
-                                v-else
-                                class="el-icon-arrow-down"
-                                style="float: right; margin-right: 20px"
-                              ></i>
-                            </div>
-
-                            <div class="bank-section" v-if="chapter.showList">
-                              <div
-                                class="bank-section__item"
-                                v-for="(section, sectionIndex) in chapter.list"
-                                :key="sectionIndex"
-                              >
-                                <div class="bank-section__item__text">
-                                  <span
-                                    style="margin-right: 8px; color: #a7b0b8"
-                                    >●</span
-                                  >
-                                  {{ section.examName }}
-                                  <span
-                                    v-if="section.newRecordStatus"
-                                    class="upStudyStyle"
-                                    >上次做到</span
-                                  >
-                                </div>
-                                <div
-                                  class="btn_div"
-                                  v-if="section.simulateStatus !== 1"
-                                >
-                                  <!-- 正确率
-                                  <span style="color: rgb(52, 216, 71)"
-                                    >{{
-                                      computedNums(
-                                        section.doQuestionNum,
-                                        section.questionNum
-                                      )
-                                    }}%</span
-                                  > -->
-                                  <span style="margin-left: 6px">题目数： </span
-                                  ><span style="color: blue">{{
-                                    section.doQuestionNum || 0
-                                  }}</span>
-                                  /
-                                  {{ section.questionNum || 0 }}
-                                </div>
-                                <el-button
-                                  v-if="section.recordStatus == -1"
-                                  type="primary"
-                                  @click="
-                                    toDo(
-                                      section,
-                                      chapter.chapterExamId,
-                                      item.majorId
-                                    )
-                                  "
-                                  class="btn"
-                                  >开始做题</el-button
-                                >
-                                <el-button
-                                  v-if="
-                                    section.recordStatus == 0 &&
-                                    section.doType == 1
-                                  "
-                                  type="primary"
-                                  @click="
-                                    continueDo(
-                                      section,
-                                      chapter.chapterExamId,
-                                      item.majorId
-                                    )
-                                  "
-                                  class="btn"
-                                  >继续做题</el-button
-                                >
-
-                                <el-button
-                                  v-if="
-                                    section.recordStatus == 1 ||
-                                    (section.recordStatus == 0 &&
-                                      section.doType == 2)
-                                  "
-                                  :disabled="
-                                    section.answerNum > 0 &&
-                                    section.doNum >= section.answerNum
-                                  "
-                                  type="primary"
-                                  @click="
-                                    doRepeat(
-                                      section,
-                                      chapter.chapterExamId,
-                                      item.majorId
-                                    )
-                                  "
-                                  class="btn"
-                                  >{{
-                                    section.simulateStatus === 1
-                                      ? "开始做题"
-                                      : "重新做题"
-                                  }}</el-button
-                                >
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-
-                    <template v-if="item.type == 2">
-                      <div class="item__content">
-                        <div class="bank-chapter">
-                          <div class="bank-chapter__item">
-                            <div
-                              class="bank-chapter__item__text"
-                              @click="chapterExam(item, 0)"
-                            >
-                              <span
-                                style="
-                                  margin-left: 21px;
-                                  margin-right: 8px;
-                                  color: #a7b0b8;
-                                "
-                              >
-                                <span v-if="index + 1 < 10"
-                                  >0{{ index + 1 }}</span
-                                ><span v-else>
-                                  {{ index + 1 }}
-                                </span> </span
-                              >{{ item.name }}
-                              <i
-                                v-if="item.showList"
-                                class="el-icon-arrow-up"
-                                style="float: right; margin-right: 20px"
-                              ></i>
-                              <i
-                                v-else
-                                class="el-icon-arrow-down"
-                                style="float: right; margin-right: 20px"
-                              ></i>
-                            </div>
-
-                            <div class="bank-section" v-if="item.showList">
-                              <div
-                                class="bank-section__item"
-                                v-for="(section, sectionIndex) in item.list"
-                                :key="sectionIndex"
-                              >
-                                <div class="bank-section__item__text">
-                                  <span
-                                    style="margin-right: 8px; color: #a7b0b8"
-                                    >●</span
-                                  >
-                                  {{ section.examName }}
-                                  <span
-                                    v-if="section.newRecordStatus"
-                                    class="upStudyStyle"
-                                    >上次做到</span
-                                  >
-                                </div>
-                                <div
-                                  v-if="section.simulateStatus !== 1"
-                                  style="width: auto; padding: 0px 14px"
-                                  class="btn_div"
-                                >
-                                  <!-- 正确率
-                                  <span style="color: rgb(52, 216, 71)"
-                                    >{{
-                                      computedNums(
-                                        section.doQuestionNum,
-                                        section.questionNum
-                                      )
-                                    }}%</span
-                                  > -->
-                                  <span style="margin-left: 6px">题目数： </span
-                                  ><span style="color: blue">{{
-                                    section.doQuestionNum || 0
-                                  }}</span>
-                                  /
-                                  {{ section.questionNum || 0 }}
-                                </div>
-                                <el-button
-                                  v-if="section.recordStatus == -1"
-                                  type="primary"
-                                  @click="toDo(section, item.majorId, 0)"
-                                  class="btn"
-                                  >开始做题</el-button
-                                >
-                                <el-button
-                                  v-if="
-                                    section.recordStatus == 0 &&
-                                    section.doType == 1
-                                  "
-                                  type="primary"
-                                  @click="continueDo(section, item.majorId, 0)"
-                                  class="btn"
-                                  >继续做题
-                                </el-button>
-
-                                <el-button
-                                  v-if="
-                                    section.recordStatus == 1 ||
-                                    (section.recordStatus == 0 &&
-                                      section.doType == 2)
-                                  "
-                                  :disabled="
-                                    section.answerNum > 0 &&
-                                    section.doNum >= section.answerNum
-                                  "
-                                  type="primary"
-                                  @click="doRepeat(section, item.majorId, 0)"
-                                  class="btn"
-                                  >{{
-                                    section.simulateStatus === 1
-                                      ? "开始做题"
-                                      : "重新做题"
-                                  }}
-                                </el-button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-
-                    <template v-if="item.type == 3">
-                      <div class="item__content">
-                        <div class="bank-section">
-                          <div class="bank-section__item">
-                            <div class="bank-section__item__text">
-                              <span style="margin-right: 8px; color: #a7b0b8"
-                                >●</span
-                              >
-                              {{ item.name }}
-                              <span
-                                v-if="item.newRecordStatus"
-                                class="upStudyStyle"
-                                >上次做到</span
-                              >
-                            </div>
-                            <div
-                              v-if="item.simulateStatus !== 1"
-                              style="width: auto; padding: 0px 14px"
-                              class="btn_div"
-                            >
-                              <!-- 正确率
-                              <span style="color: rgb(52, 216, 71)"
-                                >{{
-                                  computedNums(
-                                    item.doQuestionNum,
-                                    item.questionNum
-                                  )
-                                }}%</span
-                              > -->
-                              <span style="margin-left: 6px">题目数： </span
-                              ><span style="color: blue">{{
-                                item.doQuestionNum || 0
-                              }}</span>
-                              / {{ item.questionNum || 0 }}
-                            </div>
-                            <el-button
-                              v-if="item.recordStatus == -1"
-                              type="primary"
-                              @click="toDo(item, 0, 0)"
-                              class="btn"
-                              >开始做题</el-button
-                            >
-                            <el-button
-                              v-if="item.recordStatus == 0 && item.doType == 1"
-                              type="primary"
-                              @click="continueDo(item, 0, 0)"
-                              class="btn"
-                              >继续做题</el-button
-                            >
-
-                            <el-button
-                              v-if="
-                                item.recordStatus == 1 ||
-                                (item.recordStatus == 0 && item.doType == 2)
-                              "
-                              :disabled="
-                                item.answerNum > 0 &&
-                                item.doNum >= item.answerNum
-                              "
-                              type="primary"
-                              @click="doRepeat(item, 0, 0)"
-                              class="btn"
-                              >{{
-                                item.simulateStatus === 1
-                                  ? "开始做题"
-                                  : "重新做题"
-                              }}</el-button
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-import GoodsItem from "@/components/goodsItem/index";
-export default {
-  name: "BankDetailCopy",
-  components: {
-    GoodsItem,
-  },
-  data() {
-    return {
-      newList: [],
-      examListNew: [],
-      orderGoodsId: "",
-      activeName: "0",
-      collectName: "1",
-      wrongName: "1",
-      goodsId: "",
-      goodsDetail: {},
-      bankList: [],
-      collectSelect: "",
-      wrongSelect: "",
-      hasClickList: [],
-      collectTypeList: [],
-      collectExamList: [],
-      wrongTypeList: [],
-      wrongExamList: [],
-      collectTotal: 0,
-      wrongTotal: 0,
-      needOpen: true, //是否需要打开第一章节
-      recordItem: null,
-      numList: [5, 10, 15, 20, 50, 100],
-      activeNum: 5,
-      punchList: [],
-      rankiList: [],
-    };
-  },
-  mounted() {},
-  computed: {
-    compyRecommend: function () {
-      return function (array) {
-        let ary = [];
-        if (array) {
-          for (let i = 0; i < array.length; i++) {
-            if (i >= 5) {
-              break;
-            } else {
-              ary.push(array[i]);
-            }
-          }
-        }
-        return ary;
-      };
-    },
-    computedNums: function () {
-      return function (doNum, totalNum) {
-        let ary = 0;
-        ary = parseInt(doNum ? doNum : 0) / parseInt(totalNum ? totalNum : 0);
-        return (ary * 100).toFixed(0);
-      };
-    },
-  },
-  methods: {
-    toFixed(num) {
-      if (num) {
-        let str = String(num).indexOf(".");
-
-        if (str != -1) {
-          return +num.toFixed(2);
-        } else {
-          return num;
-        }
-      } else {
-        return 0;
-      }
-    },
-    initData(data, recordItem) {
-      this.recordItem = recordItem;
-      this.orderGoodsId = data.orderGoodsId;
-      this.goodsId = data.goodsId;
-      this.getExamType(data.goodsId);
-      // if (this.recordItem) {
-      //   this.getRecordItem();
-      // } else {
-      //   await this.goodsBank();
-      // }
-    },
-    getRecordItem() {
-      this.$request
-        .goodsBank({
-          orderGoodsId: this.recordItem.orderGoodsId,
-          goodsId: this.recordItem.goodsId,
-          paperId: this.activeName * 1 || undefined,
-        })
-        .then(async (res) => {
-          res.data.forEach((item) => {
-            if (item.type == 2 || item.type == 1) {
-              item.showList = false;
-              item.list = [];
-            }
-          });
-          this.bankList = res.data;
-          // for (let i = 0; i < this.bankList.length; i++) {
-          //   if (this.bankList[i].type == 1) {
-          //     await this.moduleExam(this.bankList[i]);
-          //     break;
-          //   } else if (this.bankList[i].type == 2) {
-          //     this.needOpen = false;
-          //     await this.chapterExam(this.bankList[i], 0);
-          //     break;
-          //   }
-          // }
-          const DW = this.bankList.findIndex((item) => {
-            if (
-              item.type == 1 &&
-              this.recordItem.moduleExamId > 0 &&
-              this.recordItem.moduleExamId == item.majorId
-            ) {
-              return item;
-            } else if (
-              item.type == 2 &&
-              !this.recordItem.moduleExamId &&
-              this.recordItem.chapterExamId == item.majorId
-            ) {
-              return item;
-            } else if (
-              item.type == 3 &&
-              !this.recordItem.moduleExamId &&
-              !this.recordItem.chapterExamId &&
-              this.recordItem.examId == item.majorId
-            ) {
-              return item;
-            }
-          });
-          if (DW != -1) {
-            if (this.bankList[DW].type == 1) {
-              console.log(1);
-              this.$request
-                .goodsChapterList({
-                  orderGoodsId: this.orderGoodsId,
-                  moduleExamId: this.recordItem.moduleExamId,
-                  goodsId: this.goodsId,
-                })
-                .then(async (res) => {
-                  res.data.forEach((item) => {
-                    item.showList = false;
-                    item.list = [];
-                  });
-                  this.$set(
-                    this.bankList[DW],
-                    "showList",
-                    !this.bankList[DW].showList
-                  );
-                  this.$set(this.bankList[DW], "list", res.data);
-                  const DWChapter = this.bankList[DW].list.findIndex(
-                    (items) => {
-                      return (
-                        items.chapterExamId == this.recordItem.chapterExamId
-                      );
-                    }
-                  );
-                  if (DWChapter != -1) {
-                    this.$request
-                      .bankExamExamList({
-                        orderGoodsId: this.orderGoodsId,
-                        moduleExamId: this.bankList[DW].majorId,
-                        chapterExamId:
-                          this.bankList[DW].list[DWChapter].chapterExamId,
-                        goodsId: this.goodsId,
-                      })
-                      .then((res) => {
-                        res.data.sort((a, b) => {
-                          return a.sort - b.sort;
-                        });
-                        this.$set(
-                          this.bankList[DW].list[DWChapter],
-                          "showList",
-                          !this.bankList[DW].list[DWChapter].showList
-                        );
-                        this.$set(
-                          this.bankList[DW].list[DWChapter],
-                          "list",
-                          res.data
-                        );
-                        const DWChapters = this.bankList[DW].list[
-                          DWChapter
-                        ].list.findIndex((itemsy) => {
-                          return itemsy.examId == this.recordItem.examId;
-                        });
-                        if (DWChapters != -1) {
-                          this.$set(
-                            this.bankList[DW].list[DWChapter].list[DWChapters],
-                            "newRecordStatus",
-                            true
-                          );
-                        }
-                      });
-                  }
-                });
-            } else if (this.bankList[DW].type == 2) {
-              this.$request
-                .bankExamExamList({
-                  orderGoodsId: this.orderGoodsId,
-                  moduleExamId: 0,
-                  chapterExamId: this.bankList[DW].majorId,
-                  goodsId: this.goodsId,
-                })
-                .then((res) => {
-                  res.data.sort((a, b) => {
-                    return a.sort - b.sort;
-                  });
-                  this.$set(
-                    this.bankList[DW],
-                    "showList",
-                    !this.bankList[DW].showList
-                  );
-                  this.$set(this.bankList[DW], "list", res.data);
-                  const DWChapter = this.bankList[DW].list.findIndex(
-                    (items) => {
-                      return items.examId == this.recordItem.examId;
-                    }
-                  );
-                  if (DWChapter != -1) {
-                    this.$set(
-                      this.bankList[DW].list[DWChapter],
-                      "newRecordStatus",
-                      true
-                    );
-                  }
-                });
-            } else if (this.bankList[DW].type == 3) {
-              console.log(3);
-              this.$set(this.bankList[DW], "newRecordStatus", true);
-            }
-          }
-          console.log("DW", DW, this.bankList);
-        });
-    },
-    getExamType(id) {
-      return new Promise((resolve, reject) => {
-        this.$request.exampapergoodsExamPaper(id).then((res) => {
-          this.newList = res.data;
-          // this.newList = [{ paperId: 0, paperName: "全部" }, ...res.data];
-          // if (parseInt(this.activeName) > 0) {
-          //   this.tabChange({ name: this.activeName });
-          // }
-          // 从结果页返回
-          let examType = this.$route.query.examType;
-          if (examType) {
-            let item = this.newList.find(
-              (e) => e.paperName == ["每日一练", "随机练习"][examType - 1]
-            );
-            this.activeName =
-              (item ? item.paperId : this.newList[0].paperId) + "";
-          } else {
-            this.activeName = this.newList[0].paperId + "";
-          }
-          this.handelTab();
-          resolve();
-        });
-      });
-    },
-    go(path, query = {}) {
-      console.log(path, query);
-      this.$router.push({
-        path,
-        query,
-      });
-    },
-    beginExam({ rightNum, totalNum }) {
-      if (rightNum == totalNum) {
-        return this.$message.success("题目已经做完了!");
-      }
-      this.$router.push({
-        path: "/bank-exam/" + this.goodsId,
-        query: {
-          simulateStatus: this.simulateStatus || 0,
-          orderGoodsId: this.orderGoodsId,
-          number: this.activeNum,
-          moduleId: 0,
-          chapterId: 0,
-          examId: 0,
-        },
-      });
-    },
-    handelNum(val) {
-      this.activeNum = val;
-      // console.log(val, this.goodsId, this.orderGoodsId)
-    },
-    /**
-     * 获取课程目录
-     */
-    handelTab() {
-      let item = this.newList.find((tab) => tab.paperId == this.activeName);
-      if (item.paperName == "每日一练") {
-        this.$request.getToDayExam(this.goodsId).then((res) => {
-          this.$set(item, "examInfo", res.data);
-          if (res.data) {
-            this.$request
-              .getPunchRecord({ goodsId: this.goodsId })
-              .then((res) => {
-                this.punchList = res.data;
-              });
-            this.$request.getRankiList(this.goodsId).then((res) => {
-              this.rankiList = res.data;
-            });
-          }
-        });
-        return;
-      } else if (item.paperName == "随机练习") {
-        this.$request.getRandomExam(this.orderGoodsId).then((res) => {
-          this.$set(item, "examInfo", res.data);
-        });
-        return;
-      }
-      this.goodsBank();
-    },
-    goodsBank() {
-      return new Promise((resolve, reject) => {
-        this.$request
-          .goodsBank({
-            orderGoodsId: this.orderGoodsId,
-            goodsId: this.goodsId,
-            paperId: this.activeName * 1 || undefined,
-          })
-          .then(async (res) => {
-            res.data.forEach((item) => {
-              if (item.type == 2 || item.type == 1) {
-                item.showList = false;
-                item.list = [];
-              }
-            });
-            this.bankList = res.data;
-            for (let i = 0; i < this.bankList.length; i++) {
-              if (this.bankList[i].type == 1) {
-                await this.moduleExam(this.bankList[i]);
-                break;
-              } else if (this.bankList[i].type == 2) {
-                this.needOpen = false;
-                await this.chapterExam(this.bankList[i], 0);
-                break;
-              }
-            }
-            resolve();
-          });
-      });
-    },
-
-    /**
-     * 展开模块卷
-     */
-    moduleExam(Module) {
-      return new Promise((resolve, reject) => {
-        if (Module.list.length) {
-          Module.showList = !Module.showList;
-          return;
-        }
-        this.$request
-          .goodsChapterList({
-            orderGoodsId: this.orderGoodsId,
-            moduleExamId: Module.majorId,
-            goodsId: this.goodsId,
-            paperId: this.activeName * 1 || undefined,
-          })
-          .then(async (res) => {
-            console.log(res, "resresres");
-            res.data.forEach((item) => {
-              item.showList = false;
-              item.list = [];
-            });
-            Module.showList = !Module.showList;
-            Module.list = res.data;
-
-            if (this.needOpen) {
-              this.needOpen = false;
-              await this.chapterExam(Module.list[0], Module.majorId);
-            }
-            resolve();
-          });
-      });
-    },
-    /**
-     * 展开章卷
-     */
-    chapterExam(chapter, moduleId = 0) {
-      return new Promise((resolve, reject) => {
-        if (chapter.list.length) {
-          chapter.showList = !chapter.showList;
-          return;
-        }
-        this.$request
-          .bankExamExamList({
-            orderGoodsId: this.orderGoodsId,
-            moduleExamId: moduleId,
-            chapterExamId: chapter.chapterExamId || chapter.majorId,
-            goodsId: this.goodsId,
-            paperId: this.activeName * 1 || undefined,
-          })
-          .then((res) => {
-            res.data.sort((a, b) => {
-              return a.sort - b.sort;
-            });
-            chapter.showList = !chapter.showList;
-            chapter.list = res.data;
-            resolve();
-          });
-      });
-    },
-    // 新增用户视频学习日志
-    studyLog(courseId, moduleId, chapterId, examId) {
-      this.$axios({
-        url: "/user/study/log",
-        method: "post",
-        data: {
-          goodsId: this.goodsId,
-          courseId: courseId,
-          moduleId: moduleId || 0,
-          chapterId: chapterId || 0,
-          sectionId: examId || 0,
-          fromPlat: 2, //来源平台 1小程序 2PC网站
-          goodsType: 2, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
-          orderGoodsId: this.orderGoodsId,
-        },
-      }).then((res) => {
-        console.log("题库的用户学习日志:", res);
-      });
-    },
-    /**
-     * 去做题
-     */
-    async toDo(section, chapterId, moduleId) {
-      let count = await this.examRecordCount(section.examId || section.majorId);
-      let answerNum = await this.getExamDetail(
-        section.examId || section.majorId
-      );
-      //超过答题次数
-
-      if (answerNum > 0 && count >= answerNum) {
-        this.$message({
-          type: "warning",
-          message: "该试卷只能答题" + answerNum + "次!",
-        });
-        return;
-      }
-
-      this.$router.push({
-        path: "/bank-exam/" + this.goodsId,
-        query: {
-          simulateStatus: this.simulateStatus || 0,
-          examId: section.examId || section.majorId,
-          moduleId: moduleId || 0,
-          chapterId: chapterId || 0,
-          orderGoodsId: this.orderGoodsId,
-        },
-      });
-      this.studyLog(0, moduleId, chapterId, section.examId);
-    },
-    handelPunchClock({ examInfo }) {
-      this.$router.push({
-        path: "/bank-exam/" + this.goodsId,
-        query: {
-          simulateStatus: this.simulateStatus || 0,
-          examId: examInfo.examId,
-          moduleId: examInfo.moduleExamId,
-          chapterId: examInfo.chapterExamId,
-          orderGoodsId: this.orderGoodsId,
-          examType: 1,
-        },
-      });
-    },
-    isSelected(date) {
-      if (!this.punchList.length) {
-        return false;
-      }
-      return this.punchList.some(
-        (e) => e.recordTime == new Date(date).setHours(0, 0, 0, 0) / 1000
-      );
-    },
-    isToday(date) {
-      return (
-        new Date(date).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
-      );
-    },
-    /**
-     * 继续做题
-     */
-    continueDo(section, chapterId, moduleId) {
-      this.$router.push({
-        path: "/bank-exam-continue/" + this.goodsId,
-        query: {
-          recordId: section.recordId,
-          examId: section.examId || section.majorId,
-          chapterId: chapterId,
-          moduleId: moduleId,
-          orderGoodsId: this.orderGoodsId,
-        },
-      });
-      this.studyLog(0, moduleId, chapterId, section.examId);
-    },
-
-    /**
-     * 重做
-     * @param {Object} recordId
-     * @param {Object} examId
-     * @param {Object} goodsId
-     * @param {Object} chapterExamId
-     */
-    async doRepeat(section, chapterId = 0, moduleId = 0) {
-      let count = await this.examRecordCount(section.examId || section.majorId);
-      let answerNum = await this.getExamDetail(
-        section.examId || section.majorId
-      );
-      //超过答题次数
-      if (answerNum > 0 && count >= answerNum) {
-        this.$message({
-          type: "warning",
-          message: "该试卷只能答题" + answerNum + "次!",
-        });
-        return;
-      }
-
-      this.$confirm(`是否清空答案重做？`, "提示", {
-        confirmButtonText: "重做",
-        cancelButtonText: "查看上次",
-        closeOnClickModal: false,
-        closeOnPressEscape: false,
-        distinguishCancelAndClose: false,
-        showClose: false,
-      })
-        .then((_) => {
-          console.log(section, "aaa");
-          this.$router.push({
-            path: "/bank-exam/" + this.goodsId,
-            query: {
-              simulateStatus: this.simulateStatus || 0,
-              examId: section.examId || section.majorId,
-              moduleId: moduleId || 0,
-              chapterId: chapterId || 0,
-              orderGoodsId: this.orderGoodsId,
-            },
-          });
-        })
-        .catch((_) => {
-          this.$router.push({
-            path: "/bank-exam-all-explain/" + section.recordId,
-            query: {
-              simulateStatus: this.simulateStatus || 0,
-              examId: section.examId || section.majorId,
-              moduleId: moduleId || 0,
-              chapterId: chapterId || 0,
-              goodsId: this.goodsId,
-              orderGoodsId: this.orderGoodsId,
-            },
-          });
-        });
-      this.studyLog(0, moduleId, chapterId, section.examId);
-    },
-
-    /**
-     * 查询试卷历史做题次数
-     */
-    examRecordCount(examId) {
-      return new Promise((resolve) => {
-        this.$request
-          .examRecordCount({
-            examId: examId,
-            orderGoodsId: this.orderGoodsId,
-          })
-          .then((res) => {
-            resolve(res.data);
-          });
-      });
-    },
-    /**
-     * @param {Object} exam_id
-     * 获取试卷可以做的次数
-     */
-    getExamDetail(exam_id) {
-      return new Promise((resolve) => {
-        this.$request.getExamDetail(exam_id).then((res) => {
-          this.simulateStatus = res.data.simulateStatus;
-          resolve(res.data.answerNum);
-        });
-      });
-    },
-
-    getWrongData() {
-      if (this.wrongName == "1") {
-        //试卷归类
-        this.wrongRecordList();
-      } else if (this.wrongName == "2") {
-        //题型归类
-        this.wrongRecordTypeList();
-      }
-    },
-
-    wrongRecordList() {
-      this.$request
-        .wrongRecordList({
-          paperId: this.wrongSelect,
-          goodsId: this.goodsId,
-        })
-        .then((res) => {
-          this.wrongExamList = res.rows;
-          let total = 0;
-          res.rows.forEach((item) => {
-            total += item.wrongQuestionNum;
-          });
-          this.wrongTotal = total;
-        });
-    },
-    wrongRecordTypeList() {
-      this.$request
-        .wrongRecordTypeList({
-          paperId: this.wrongSelect,
-          goodsId: this.goodsId,
-        })
-        .then((res) => {
-          this.wrongTypeList = res.rows;
-
-          let total = 0;
-          res.rows.forEach((item) => {
-            total += item.num;
-          });
-
-          this.wrongTotal = total;
-        });
-    },
-
-    getCollectData() {
-      if (this.collectName == "1") {
-        //试卷归类
-        this.goodsCollectExamList();
-      } else if (this.collectName == "2") {
-        //题型归类
-        this.collectQuestionTypeList();
-      }
-    },
-
-    /**
-     * 收藏按试卷分类
-     */
-    goodsCollectExamList() {
-      this.$request
-        .goodsCollectExamList({
-          paperId: this.collectSelect,
-          goodsId: this.goodsId,
-        })
-        .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.wrongSelect,
-          goodsId: this.goodsId,
-        })
-        .then((res) => {
-          this.collectTypeList = res.rows;
-          let total = 0;
-          res.rows.forEach((item) => {
-            total += item.num;
-          });
-
-          this.collectTotal = total;
-        });
-    },
-
-    tabChange(e) {
-      if (parseInt(e.name) > 0) {
-        this.$request
-          .bankexamgetPaperExamList({
-            goodsId: this.goodsId,
-            paperId: e.name,
-            orderGoodsId: this.orderGoodsId,
-          })
-          .then((res) => {
-            this.examListNew = res.data;
-          });
-      }
-      if (this.hasClickList.indexOf(e.name) != -1) {
-        return;
-      }
-
-      this.hasClickList.push(e.name);
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.upStudyStyle {
-  background-color: #f2f7ff;
-  border: 1px solid #3f8dfd;
-  color: #3f8dfd;
-  padding: 3px 4px;
-  border-radius: 4px;
-}
-
-.btn_div {
-  user-select: none;
-  color: #666666;
-  margin-right: 10px;
-  padding: 0px 14px;
-  height: 32px;
-  line-height: 32px;
-}
-
-.bank-detail {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      .left-box {
-        // float: left;
-        // width: 768px;
-        .day-box {
-          // width: 709px;
-          height: 100px;
-          display: flex;
-          height: 110px;
-          background: url("../../../../assets/BG_punch.png");
-          background-size: 100% 100%;
-          padding-left: 36px;
-          padding-top: 16px;
-          position: relative;
-
-          div {
-            &:nth-of-type(1) {
-              p {
-                &:nth-of-type(1) {
-                  font-size: 16px;
-                  font-weight: 800;
-                  color: #556176;
-                  line-height: 42px;
-
-                  span {
-                    font-size: 36px;
-                    color: #222222;
-                    padding: 0 5px;
-                    // vertical-align: middle;
-                  }
-                }
-
-                &:nth-of-type(2) {
-                  font-size: 12px;
-                  color: #808da4;
-                }
-              }
-            }
-
-            &:nth-of-type(2) {
-              width: 123px;
-              height: 36px;
-              background: #3f8dfd;
-              border-radius: 30px;
-              text-align: center;
-              line-height: 36px;
-              font-size: 15px;
-              font-weight: bold;
-              color: #ffffff;
-              margin-top: 20px;
-              margin-left: 32px;
-              cursor: pointer;
-            }
-          }
-
-          img {
-            width: 92px;
-            height: 92px;
-            position: absolute;
-            right: 24px;
-          }
-        }
-
-        .ranki-list {
-          padding: 20px 16px 0;
-          background: #ffffff;
-
-          .ranki-list-title {
-            color: #484848;
-            font-size: 14px;
-            font-weight: bold;
-            border-bottom: 1px solid #e9e9e9;
-            padding-bottom: 14px;
-          }
-
-          ul {
-            height: 520px;
-
-            li {
-              height: 30px;
-              line-height: 30px;
-              display: flex;
-              color: #6c7386;
-              margin-bottom: 16px;
-
-              p {
-                &:nth-of-type(1) {
-                  width: 42px;
-                  padding-left: 16px;
-                }
-
-                &:nth-of-type(2) {
-                  flex: 1;
-                  margin-left: 24px;
-                  display: flex;
-                  align-items: center;
-
-                  .el-image {
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 50%;
-                    margin-right: 12px;
-                  }
-                }
-
-                &:nth-of-type(3) {
-                  padding-right: 16px;
-                }
-              }
-
-              &:nth-of-type(1) {
-                height: 40px;
-                line-height: 40px;
-                background: #f8f8fa;
-                color: #888691;
-                margin-bottom: 8px;
-
-                p {
-                  font-size: 13px;
-                }
-              }
-            }
-          }
-        }
-
-        .no-data {
-          padding: 90px 0;
-
-          div {
-            width: 150px;
-            margin: 0 auto;
-            color: #888691;
-            text-align: center;
-
-            img {
-              display: block;
-              margin: 0 auto;
-            }
-          }
-        }
-
-        .clock-in-box {
-          display: flex;
-          justify-content: space-between;
-          margin-top: 12px;
-          padding: 20px 16px 0;
-          background: #ffffff;
-
-          .clock-in-box-item {
-            width: 49%;
-
-            .clock-title {
-              font-weight: bold;
-              color: #484848;
-              font-size: 14px;
-              margin-bottom: 20px;
-            }
-
-            .clock-calendar {
-              border: 1px solid #eee;
-
-              .date-today {
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                margin: 0 auto;
-                background: #409eff;
-                color: #fff;
-              }
-
-              /deep/ {
-                .el-calendar-day {
-                  height: 44px;
-                  line-height: 30px;
-                  text-align: center;
-                }
-
-                .el-calendar__body {
-                  padding: 20px;
-                }
-
-                .el-calendar__button-group {
-                  display: none;
-                }
-
-                td {
-                  border: 0;
-                }
-              }
-
-              .is-Select {
-                width: 30px;
-                height: 30px;
-                background: #e8f6ff;
-                border-radius: 50%;
-                margin: 0 auto;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              }
-            }
-
-            .clock-task {
-              background: #f8f8fa;
-              font-weight: 800;
-              color: #556176;
-              font-size: 16px;
-              padding: 25px 60px;
-              text-align: center;
-            }
-          }
-        }
-
-        .random-box {
-          .random-box-title {
-            font-weight: bold;
-            color: #222222;
-            font-size: 16px;
-          }
-
-          .random-box-top {
-            height: 146px;
-            background: #ffffff;
-            padding: 20px;
-
-            .random-box-top-num {
-              margin-top: 12px;
-              display: flex;
-              align-items: center;
-
-              div {
-                width: 128px;
-                text-align: center;
-
-                p {
-                  &:nth-of-type(1) {
-                    font-size: 24px;
-                    color: #222222;
-                    margin-bottom: 4px;
-                  }
-
-                  &:nth-of-type(2) {
-                    font-size: 12px;
-                    color: #808da4;
-                  }
-                }
-              }
-
-              .line {
-                width: 1px;
-                height: 36px;
-                background: #d9d9d9;
-              }
-            }
-          }
-
-          .random-box-bom {
-            margin-top: 20px;
-            background: #ffffff;
-            padding: 20px 20px 60px;
-
-            .sle-num-box {
-              margin: 32px 0 40px;
-              display: flex;
-              justify-content: space-around;
-
-              div {
-                width: 148px;
-                height: 48px;
-                background: #f8f8fa;
-                border-radius: 6px 6px 6px 6px;
-                text-align: center;
-                line-height: 48px;
-                font-size: 20px;
-                color: #222222;
-                cursor: pointer;
-              }
-
-              .actvie {
-                background: #e8f6ff;
-                color: #3f8dfd;
-              }
-            }
-
-            .random-box-bom-btn {
-              width: 315px;
-              height: 44px;
-              background: #3f8dfd;
-              border-radius: 8px 8px 8px 8px;
-              cursor: pointer;
-              margin: 0 auto;
-              text-align: center;
-              line-height: 44px;
-              font-size: 16px;
-              font-weight: bold;
-              color: #ffffff;
-            }
-          }
-        }
-
-        /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 21px;
-                cursor: pointer;
-                font-size: 16px;
-                font-family: Microsoft YaHei;
-                font-weight: bold;
-                color: #333333;
-                background-color: #f8f8f9;
-
-                .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: 25px;
-                  color: #99a0a7;
-
-                  &__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 {
-              display: flex;
-              justify-content: space-between;
-
-              &__item {
-                width: 360px;
-                height: 40px;
-                border-radius: 8px;
-
-                .el-select {
-                  width: 100%;
-                }
-
-                /deep/ .el-input__inner {
-                  background: #fafafa;
-                  border: 1px solid #d9d9d9;
-                }
-              }
-            }
-          }
-
-          &__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;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-._content {
-  margin-top: 6px;
-  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: 25px;
-    color: #99a0a7;
-
-    &__item {
-      padding-bottom: 6px;
-      // 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;
-      }
-    }
-  }
-}
-</style>

src/pages/person-center/my-bank/index/index.vue

@@ -23,8 +23,8 @@
           >进入学习</el-button
         >
       </h4>
-      <bank-detail-copy
-        ref="bankDetailCopy"
+      <bank-detail
+        ref="bankDetail"
         v-show="!bankData.externalLinkStatus"
       />
     </div>
@@ -109,10 +109,10 @@
 </template>
 
 <script>
-import bankDetailCopy from "../bank-detailCopy/index.vue";
+import bankDetail from "../bank-detail/index.vue";
 export default {
   name: "Mybank",
-  components: { bankDetailCopy },
+  components: { bankDetail },
   data() {
     return {
       loading: false,
@@ -169,7 +169,7 @@ export default {
           const result = await this.getInfoData(res.data);
           this.bankData = result;
           this.$nextTick(() => {
-            this.$refs.bankDetailCopy.initData(this.bankData, res.data);
+            this.$refs.bankDetail.initData(this.bankData, res.data);
           });
         } else {
           this.$request
@@ -180,7 +180,7 @@ export default {
                   ? res.rows[0]
                   : res.rows.find(e => e.goodsId == goodsId);
                 this.$nextTick(() => {
-                  this.$refs.bankDetailCopy.initData(this.bankData);
+                  this.$refs.bankDetail.initData(this.bankData);
                 });
               }
             });
@@ -214,8 +214,7 @@ export default {
           }
         }
       }
-      console.log("this.$refs.bankDetailCopy", this.$refs.bankDetailCopy);
-      this.$refs.bankDetailCopy.initData(item);
+      this.$refs.bankDetail.initData(item);
       this.bankData = item;
       this.dialogVisible = false;
     }

src/pages/person-center/my-course/index.vue

@@ -59,19 +59,12 @@
                 <div class="state" style="margin-bottom:14px;">
                   <template v-if="item.periodStatus == -1">
                     学习状态：
-                    <div
-                      class="note"
-                      v-if="item.stuAllNum + item.recordNum == 0"
-                    >
+                    <div class="note" v-if="!item.studyStatus">
                       未学习
                     </div>
                     <div
                       class="note note--blue"
-                      v-else-if="
-                        item.stuAllNum + item.recordNum > 0 &&
-                          item.stuAllNum + item.recordNum <
-                            item.secAllNum + item.examNum
-                      "
+                      v-else-if="item.studyStatus > 0"
                     >
                       学习中
                     </div>
@@ -416,6 +409,13 @@
                     @click="appointment(item)"
                     >预约考试</el-button
                   >
+                  <el-button
+                  v-if="false"
+                    type="primary"
+                    class="btn"
+                    @click="dataReview(item)"
+                    >资料审核</el-button
+                  >
 
                   <el-button
                     type="danger"
@@ -629,6 +629,7 @@
         <el-button type="primary" @click="appointmentYes()">确 定</el-button>
       </span></el-dialog
     >
+    <dataReview ref="dataReview" @callbackDataReview="callbackDataReview" />
   </div>
 </template>
 
@@ -638,6 +639,7 @@ import { mapGetters, mapActions } from "vuex";
 import SelectClassModal from "@/components/selectClassModal";
 import RebuildModal from "@/components/rebuildModal";
 import ExercisesModal from "@/components/exercisesModal";
+import dataReview from "@/components/dataReview";
 import AppointTest from "./components/AppointTest.vue";
 import * as baseUrls from "@/axios.js";
 export default {
@@ -646,6 +648,7 @@ export default {
     SelectClassModal,
     RebuildModal,
     ExercisesModal,
+    dataReview,
     AppointTest
   },
   data() {
@@ -691,7 +694,6 @@ export default {
       total: 0,
       courseList: [],
       loading: false,
-      showExercisesModal: false
     };
   },
   computed: {
@@ -744,12 +746,17 @@ export default {
     await this.orderUserEduList();
     this.courseGoodsList();
     this.$bus.$on("getNewGoodsList", () => {
-      console.log(87632783);
       this.courseGoodsList();
     });
   },
   methods: {
     ...mapActions(["getUserInfo"]),
+    dataReview(item) {
+      this.$refs.dataReview.init(item)
+    },
+    callbackDataReview(){
+
+    },
     studyStatusFunc(e) {
       if (this.activeStudyStatus == e) {
         return;
@@ -888,8 +895,7 @@ export default {
           ? this.rebuildSubmit(item)
           : this.$message({
               type: "warning",
-              message:
-                `您的学习账号未开通，请稍后再尝试，有疑问，请联系${this.$store.state.userInfo.eduPhone}！`
+              message: `您的学习账号未开通，请稍后再尝试，有疑问，请联系${this.$store.state.userInfo.eduPhone}！`
             });
         return false;
       }

src/pages/person-center/my-invoice/index/index.vue

@@ -132,6 +132,7 @@
     </div>
 
     <el-dialog
+      width="800px"
       :title="$tools.timestampToTime(invoiceDetail.applyTime, false, false)"
       :visible.sync="invoiceDetailModal"
       custom-class="invoice-modal"
@@ -242,13 +243,16 @@
               "
             >
               <div class="preview-wrap">
-                <el-image
-                  class="preview"
-                  :src="$tools.splitImgHost(invoiceDetail.invoiceImg)"
-                  :preview-src-list="[
-                    $tools.splitImgHost(invoiceDetail.invoiceImg)
-                  ]"
-                ></el-image>
+                <iframe
+                  style="height: 100%"
+                  width="300"
+                  frameborder="0"
+                  scrolling="auto"
+                  :src="
+                    'https://preview.xyyxt.net?src=' +
+                      $tools.splitImgHost(invoiceDetail.invoiceImg)
+                  "
+                ></iframe>
               </div>
 
               <el-button type="primary" @click="download(invoiceDetail)"
@@ -389,6 +393,40 @@ export default {
       this.invoiceDetailModal = true;
     },
 
+    //下载
+    downloadFile(url, fileName) {
+      let xhr = new XMLHttpRequest();
+      xhr.open("get", url, true);
+      xhr.setRequestHeader("Content-Type", `application/pdf`);
+      xhr.responseType = "blob";
+      let that = this;
+      xhr.onload = function() {
+        if (this.status == 200) {
+          //接受二进制文件流
+          var blob = this.response;
+          that.downloadExportFile(blob, fileName);
+        }
+      };
+      xhr.send();
+    },
+    downloadExportFile(blob, tagFileName) {
+      let downloadElement = document.createElement("a");
+      let href = "";
+      if (typeof blob == "string") {
+        downloadElement.target = "_blank";
+      } else {
+        href = window.URL.createObjectURL(blob); //创建下载的链接
+      }
+      downloadElement.href = href;
+      downloadElement.download = tagFileName;
+      //下载后文件名
+      document.body.appendChild(downloadElement);
+      downloadElement.click(); //点击下载
+      document.body.removeChild(downloadElement); //下载完成移除元素
+      if (typeof blob != "string") {
+        window.URL.revokeObjectURL(href); //释放掉blob对象
+      }
+    },
     /**
      ** 下载图片到本地
      ** @param blobUrl： blob 格式的图片文件
@@ -396,10 +434,10 @@ export default {
      */
     download(row) {
       // 创建虚拟a标签
-
       let url = this.$tools.splitImgHost(row.invoiceImg);
       let name = row.invoiceImg.substring(row.invoiceImg.lastIndexOf("/") + 1);
-
+      this.downloadFile(url, name);
+      return;
       var image = new Image();
       // 解决跨域 Canvas 污染问题,
       image.setAttribute("crossorigin", "anonymous");

src/router/index.js

@@ -728,6 +728,8 @@ router.beforeEach(async (to, from, next) => {
 
   if (!store.state.footer.length) {
     await store.dispatch("getCommonBaseHomeList");
+    //获取字典数据
+    store.dispatch("getCommonBaseDictList");
   }
   if (!store.state.isDesktop) {
     request.getWeAppLink().then(res => {

src/store/index.js

@@ -21,6 +21,7 @@ export default new Vuex.Store({
     user_account: '',
     userInfo: null,
     examResult: {},
+    dictList: {},//字典数据
     header: {
       serviceTel: {}
     },//页头配置
@@ -55,6 +56,9 @@ export default new Vuex.Store({
 
   //操作数据，唯一的通道是mutations
   mutations: {
+    setDictList(state, data) {
+      state.dictList = data;
+    },
     setTENANT_NANE(state, id) {
       state.TENANT_NANE = id
     },
@@ -199,6 +203,32 @@ export default new Vuex.Store({
           resolve()
         })
       })
-    }
+    },
+    /**
+     * 
+     * @param {*} context 
+     * @returns 
+     * 获取字典配置
+     */
+    getCommonBaseDictList(context) {
+      return new Promise(resolve => {
+        common.dictList().then(res => {
+          if (res.code === 200) {
+            let dictList = {};
+            let list = res.data;
+            for (let i = 0; i < list.length; i++) {
+              let item = list[i];
+              if (dictList.hasOwnProperty(item.dictType)) {
+                dictList[item.dictType].push(item.dictLabel);
+              } else {
+                dictList[item.dictType] = [item.dictLabel];
+              }
+            }
+            context.commit('setDictList', dictList)
+            resolve()
+          }
+        })
+      })
+    },
   }
 })