pbl-teacher-table/src/components/pages/EnglishVoiceNew/index.vue

<template>
  <el-dialog
    title="英语口语"
    :visible.sync="EnglishVoiceDialog"
    :append-to-body="true"
    width="100%"
    :before-close="handleClose"
    class="dialog_diy"
  >
    <div class="engBox" v-if="diaType == '0'">
      <div
        class="leftBox"
        :class="boxClick == '0' ? 'clickBox leftBox' : 'leftBox'"
        @click="boxClick = '0'"
      >
        <div class="fChoose">
          <img src="../../../assets/icon/englishVoice/fChoose.png" alt="" />
        </div>
        <div>自然交流场景</div>
        <div>
          自然交流场景说明自然交流场景说明自然交流场景说明自然交流场景说（最多展示两行）
        </div>
        <div class="goButton" @click="diaType = '1'" v-if="boxClick == '0'">
          <div>去创建</div>
          <div class="right">
            <img src="../../../assets/icon/englishVoice/right.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="rightBox"
        :class="boxClick == '1' ? 'clickBox rightBox' : 'rightBox'"
        @click="boxClick = '1'"
      >
        <div class="sChoose">
          <img src="../../../assets/icon/englishVoice/sChoose.png" alt="" />
        </div>
        <div>口语题目场景</div>
        <div>
          口语题目场景说明口语题目场景说明口语题目场景说明口语题目场景说明（最多展示两行）
        </div>
        <div class="goButton" @click="diaType = '1'" v-if="boxClick == '1'">
          <div>去创建</div>
          <div class="right">
            <img src="../../../assets/icon/englishVoice/right.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <check
      :checkJson="checkJson"
      @setCheckJson="setCheckJson"
      :diaType="diaType"
      :oid="oid"
      :org="org"
      v-if="diaType == '1'"
    ></check>
    <talkPreview
      :talkPreviewDialog.sync="talkPreviewDialog"
      :checkJson="checkJson"
      :oid="oid"
      :org="org"
    ></talkPreview>
    <span slot="footer" class="dialog-footer" v-if="diaType == '0'">
      <el-button type="primary" @click="close()">确 认</el-button>
      <el-button @click="close()">关 闭</el-button>
    </span>
    <span
      slot="footer"
      class="dialog-footer checkFooter"
      v-if="diaType == '1' || talkPreviewDialog"
    >
      <div @click="diaType = '0'">上一步</div>
      <div @click="talkPreview">对话预览</div>
      <div
        @click="confirm()"
        style="background: #3681fc; color: #fff; border: none"
      >
        确认上传
      </div>
    </span>
  </el-dialog>
</template>

<script>
import check from "./component/check";
import talkPreview from "./component/talkPreview.vue";
export default {
  components: {
    check,
    talkPreview,
  },
  props: {
    EnglishVoiceDialog: {
      type: Boolean,
      default: false,
    },
    oid: {
      type: String,
    },
    org: {
      type: String,
    },
    englishVoiceJson: {
      type: Object,
    },
  },
  data() {
    return {
      checkJson: {
        time: "",
        class: "",
        difficulty: 0,
        topic: "",
        isShow: false,
        eva: 0,
        aiEva: {
          isAiEva: false,
          aiEvaChoose: [],
        },
        allfType: [],
        englishJson: {},
      },
      diaType: "0",
      boxClick: "0",
      talkPreviewDialog: false,
    };
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
      this.diaType = "0";
      this.$emit("update:EnglishVoiceDialog", false);
    },
    setCheckJson(checkJson) {
      this.checkJson = checkJson;
    },
    confirm() {
      this.$emit(
        "setEnglishVoiceJson",
        JSON.parse(JSON.stringify(this.checkJson))
      );
      this.close();
    },
    talkPreview() {
      if (this.checkJson.time == "") {
        this.$message.error("请选择练习时长!");
        return;
      } else if (this.checkJson.class == "") {
        this.$message.error("请选择年级!");
        return;
      } else if (this.checkJson.topic == "") {
        this.$message.error("请选择话题!");
        return;
      }
      this.talkPreviewDialog = true;
    },
  },
  watch: {
    EnglishVoiceDialog: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          //   this.setVoiceJson(this.englishVoiceJson);
          this.checkJson = JSON.parse(JSON.stringify(this.englishVoiceJson));
        }
      },
      deep: true,
    },
  },
  mounted() {
    // this.setVoiceJson(this.englishVoiceJson);
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog {
  background: #f0f2f5;
  height: 100%;
  margin: 0vh auto !important;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__body {
  height: calc(100% - 124px);
  box-sizing: border-box;
  padding: 0px;
}

.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #f0f2f5;
  overflow: hidden;
}

.engBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.leftBox,
.rightBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 400px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

.clickBox {
  border: 2px solid #78aafc;
  box-shadow: 0px 1px 10px 2px #e0e0e0;
}

.leftBox {
  margin: 0 50px 0 0;
}

.leftBox > div:nth-child(2),
.rightBox > div:nth-child(2) {
  font-weight: bold;
  font-size: 20px;
  margin: 10px 0;
}

.leftBox > div:nth-child(3),
.rightBox > div:nth-child(3) {
  text-align: center;
}

.fChoose,
.sChoose {
  width: 300px;
  height: 250px;
  cursor: pointer;
}

.fChoose > img,
.sChoose > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkFooter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.checkFooter > div {
  min-width: 100px;
  width: 100px;
  text-align: center;
  border-radius: 5px;
  background: #ffffff;
  color: #3681fc;
  border: 1px solid #3681fc;
  height: 35px;
  line-height: 35px;
  margin-right: 10px;
  font-size: 12px;
  cursor: pointer;
}
.checkFooter > div:first-child {
  background: #f0f2f5 !important;
  color: #000 !important;
}

.goButton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  position: absolute;
  bottom: -70px;
  width: 100px;
  text-align: center;
  background: #3681fc;
  color: #fff;
  height: 35px;
  line-height: 35px;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
}

.right {
  width: 20px;
  margin-left: 5px;
  line-height: 15px;
}

.right > img {
  width: 100%;
  height: 100%;
}
</style>