1

src/components/course/words-form.vue

+<style>
+  .CLM-Form .el-input__inner {
+    background: transparent;
+    border: 0;
+  }
+
+  .CLM-Form .el-input-group__append {
+    background: transparent;
+    border: 0;
+  }
+
+  .common_Style {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+  }
+
+  .classForm_monday {
+    background-color: #ced9f8;
+    color: #2961FE;
+  }
+
+  .classForm_tuesday {
+    background-color: #d9f3ff;
+    color: #3FC4FF;
+  }
+
+  .classForm_wednesday {
+    background-color: #f6e2cb;
+    color: #F28C1D;
+  }
+
+  .classForm_thursday {
+    background-color: #ccf3eb;
+    color: #02C499;
+  }
+
+  .classForm_friday {
+    background-color: #f7cfd6;
+    color: #F72E52;
+  }
+
+  .classForm_saturday {
+    background-color: #fff5cc;
+    color: #FFCC00;
+  }
+
+  .classForm_sunday {
+    background-color: #e6e3fe;
+    color: #8175FB;
+  }
+
+  .CLM-Form .Emp_Line {
+    width: 3px;
+    height: 10px;
+    background-color: #3FC4FF;
+    margin-right: 10px;
+  }
+
+  .CLM-Form .EmpLine_title {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 20px;
+  }
+
+  .planTimeLi2 tbody::before {
+    content: '';
+    display: table-row;
+    height: 20px;
+  }
+
+</style>
+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
+    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
+      <q-card-section>
+        <div class="text-h6">{{optionTitle}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="EmpLine_title">
+          <div class="Emp_Line"></div>
+          <div>基本信息</div>
+        </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordType" ref="WordType"
+              class="col-6 q-pr-lg q-pb-lg" label="单词类型" :rules="[val => !!val || '请填写单词类型']" />
+          </div>
+          <div class="col-6">
+            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordContent" ref="WordContent"
+              class="col-6 q-pr-lg q-pb-lg" label="单词内容" :rules="[val => !!val || '请填写单词内容']" />
+          </div>
+        </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.WordWrite" ref="WordWrite"
+              class="col-6 q-pr-lg q-pb-lg" label="日文书写" />
+          </div>
+          <div class="col-6">
+            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.ChineseMean" ref="ChineseMean"
+              class="col-6 q-pr-lg q-pb-lg" label="中文意思" />
+          </div>
+        </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-circular-progress v-if="objOption.FileUrl" :value="Minutes" show-value class="text-red q-ma-md" size="70px"
+              :thickness="0.2" color="light-blue" track-color="grey-3" @click.stop="playVoice(objOption.FileUrl)">
+              <q-icon name="volume_up" class="q-mr-xs" />
+              <span style="font-size: 11px;">
+                {{Minutes?Minutes.toFixed(1):0}}
+              </span>
+            </q-circular-progress>
+            <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
+              <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
+              </q-btn>
+            </el-upload>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeCourseForm" />
+        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveWordLoading"
+          @click="saveWords">
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    GetCourseWords,
+    SetCourseWords
+  } from '../../api/course/index'
+  import {
+    UploadSelfFile
+  } from "../../api/common/common"; //上传图片
+  import BenzAMRRecorder from 'benz-amr-recorder'
+  export default {
+    components: {},
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      },
+      addObj:{
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          Id: 0, //编号（新增传0）
+          CourseId: 1, //课程编号
+          ChapterId: 1, //章节编号
+          WordType: "", //单词类型
+          WordContent: "", //单词内容
+          WordTone: "", //单词声调
+          WordWrite: "", //日文书写
+          ChineseMean: "", //中文意思
+          FileUrl: "", //读音文件路径
+        },
+        optionTitle: "",
+        saveWordLoading: false,
+        Minutes:0,
+        FileName:''
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initObj()
+    },
+    methods: {
+      //初始化表单
+      initObj() {
+        if (this.saveObj && this.saveObj.Id > 0) {
+          GetCourseWords({
+            Id: this.saveObj.Id
+          }).then(res => {
+            console.log(res, '数据');
+            if (res.Code == 1) {
+              var tempDate = res.Data;
+              this.objOption.Id = tempDate.Id;
+              this.objOption.CourseId = tempDate.CourseId;
+              this.objOption.ChapterId = tempDate.ChapterId;
+              this.objOption.WordType = tempDate.WordType;
+              this.objOption.WordContent = tempDate.WordContent;
+              this.objOption.WordTone = tempDate.WordTone;
+              this.objOption.WordWrite = tempDate.WordWrite;
+              this.objOption.ChineseMean = tempDate.ChineseMean;
+              this.objOption.FileUrl = tempDate.FileUrl;
+            }
+          })
+          this.optionTitle = "修改单词信息"
+        } else {
+          this.optionTitle = "新增单词"
+          this.objOption.Id = 0;
+          this.objOption.CourseId = this.addObj.CourseId;
+          this.objOption.ChapterId = this.addObj.ChapterId;
+          this.objOption.WordType = '';
+          this.objOption.WordContent = '';
+          this.objOption.WordTone = '';
+          this.objOption.WordWrite = '';
+          this.objOption.ChineseMean = '';
+          this.objOption.FileUrl = '';
+        }
+      },
+      //关闭弹窗
+      closeCourseForm() {
+        this.$emit('close');
+        this.persistent = false;
+      },
+      //上传音频
+      uploadFile(files) {
+        // 文件类型进行判断
+        let types = ['mp3', 'wma', 'wav', 'amr'];
+        const isAudio = types.includes(files.type);
+        const isLt2M = files.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          this.$q.notify({
+            type: 'negative',
+            message: `上传文件大小不能超过 2MB!!`,
+            position: 'top'
+          })
+        } else {
+          UploadSelfFile('words', files, res => {
+            if (res.Code == 1) {
+              let amr = new BenzAMRRecorder()
+              let that = this
+              amr.initWithUrl(res.FileUrl).then(function () {
+                that.duration = amr.getDuration();
+                that.objOption.FileUrl = res.FileUrl;
+                that.FileName = res.FileName ? res.FileName : '';
+                that.Minutes = parseInt(that.duration.toFixed());
+              }).catch((e) => {
+
+              })
+            }
+          })
+        }
+      },
+      playVoice(_url) {
+        // TODO 这里暂时没处理 音频播放中暂停
+        let vm = this
+        if (vm.voiceActive && (vm.voiceActive != index)) { //如果再放一个点击另一个上一个清0
+          vm.dataList[vm.voiceActive].timevalue = 0
+        }
+        vm.playRec = new BenzAMRRecorder()
+        //⚠️注意跨域问题
+        vm.playRec.initWithUrl(_url).then(function () {
+          vm.voiceActive = index
+          vm.playRec.play()
+        }).catch((e) => {
+          vm.$message.error('播放录音失败')
+        })
+      },
+      //保存单词
+      saveWords() {
+        if (this.objOption.WordType == '') {
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请填写单词类型`
+          })
+          return;
+        }
+        if (this.objOption.WordContent == '') {
+          this.$q.notify({
+            type: 'negative',
+            position: "top",
+            message: `请填写单词内容`
+          })
+          return;
+        }
+        SetCourseWords(this.objOption).then(res => {
+          if (res.Code == 1) {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '保存成功!',
+              position: 'top'
+            })
+            this.$emit('success');
+            this.$emit('close');
+          }
+        })
+      }
+    }
+  }
+
+</script>