mteacher/src/views/teacher/studyReportNew.vue

<template>
  <div class="m-containers">
    <img :src="imgList.topBanner" width="100%" class="topBanner" alt />
    <div class="paddingWrap">
      <div class="topCard">
        <img :src="imgList.note1" class="topNote" width="100%" alt />
        <p class="title">
          <img :src="imgList.squrt" class="squrts" alt />
          授课内容
        </p>
        <div class="chioseList">
          <div class="theoryCell">
            <div class="left">
              <img :src="imgList.theoryIcon" class="theoryIcon" alt />
              乐理
            </div>
            <div class="right">
              <div class="theoryItem" v-for="(item,index) in hasTheory" :key="index">
                <van-field
                  readonly
                  clickable
                  :label="subjectName"
                  placeholder="请选择乐理"
                  :value="item.str"
                  @click="item.show = true"
                />
                <van-popup
                  v-model="item.show"
                  position="bottom"
                  :overlay="true"
                  get-container="#app"
                >
                  <van-picker
                    show-toolbar
                    :columns="theoryList"
                    @cancel="item.show = false"
                    @confirm="(val)=>{ onConfirm(val,item)}"
                  />
                </van-popup>
                <div class="iconWrap" v-if="index== 0" @click="addTheory(hasTheory)">
                  <img :src="imgList.addIcon" class="smallIcon" alt />
                </div>
                <div class="iconWrap" v-else>
                  <img
                    :src="imgList.deteleIcon"
                    class="smallIcon"
                    alt
                    @click="removeTheory(hasTheory,index)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="musicCell">
            <div class="left">
              <img :src="imgList.muiscIcon" class="muiscIcon" alt />
              曲子
            </div>
            <div class="right">
              <van-field v-model="testMusic" rows="1" autosize type="textarea" placeholder="请输入曲子" />
            </div>
          </div>
          <div class="theoryCell teachingCell">
            <div class="left">
              <img :src="imgList.bookIcon" class="bookIcon" alt />
              教材
            </div>
            <div class="right">
              <div class="theoryItem" v-for="(item,index) in teaching" :key="index">
                <van-field
                  readonly
                  clickable
                  :label="subjectName"
                  placeholder="请选择教材"
                  :value="item.str"
                  @click="item.show = true"
                />
                <van-popup v-model="item.show" position="bottom" get-container="#app">
                  <van-picker
                    show-toolbar
                    :columns="teachingList"
                    @cancel="item.show = false"
                    @confirm="(val)=>{ onTeacherConfirm(val,item)}"
                  />
                </van-popup>
                <div class="iconWrap" v-if="index== 0" @click="addTheory(teaching)">
                  <img :src="imgList.addIcon" class="smallIcon" alt />
                </div>
                <div class="iconWrap" v-else>
                  <img
                    :src="imgList.deteleIcon"
                    class="smallIcon"
                    alt
                    @click="removeTheory(teaching,index)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nextCard">
        <img :src="imgList.note2" class="topNote" width="100%" alt />
        <p class="title">
          <img :src="imgList.squrt" class="squrts" alt />
          必选项
        </p>
        <div class="chioseList">
          <p class="subTitle">1.{{subjectJson[1].title}}</p>
          <div class="cell" :class="one==1?'activce':''" @click="one=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[1][1] }}</p>
            
          </div>
          <div class="cell" :class="one==2?'activce':''" @click="one=2">
            <img :src="imgList.good" class="icons" alt />
            <p>{{subjectJson[1][2] }} </p>
            
          </div>
          <div class="cell" :class="one==3?'activce':''" @click="one=3">
            <img :src="imgList.normal" class="icons" alt />
             <p>{{subjectJson[1][3] }}</p>
            
          </div>
        </div>
        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">2.{{subjectJson[2].title}}</p>
          <div class="cell" :class="two==1?'activce':''" @click="two=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[2][1] }}</p>
            
          </div>
          <div class="cell" :class="two==2?'activce':''" @click="two=2">
            <img :src="imgList.good" class="icons" alt />
            <p>{{subjectJson[2][2] }}</p>
            
          </div>
          <div class="cell" :class="two==3?'activce':''" @click="two=3">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[2][3] }}</p>
            
          </div>
        </div>
        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">3.{{subjectJson[3].title}}</p>
          <div class="cell" :class="three==1?'activce':''" @click="three=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[3][1] }}</p>
            
          </div>
          <div class="cell" :class="three==2?'activce':''" @click="three=2">
            <img :src="imgList.good" class="icons" alt />
            <p> {{subjectJson[3][2] }}</p>
           
          </div>
          <div class="cell" :class="three==3?'activce':''" @click="three=3">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[3][3] }}</p>
            
          </div>
        </div>
        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">4.{{subjectJson[4].title}}</p>
          <div class="cell" :class="four==1?'activce':''" @click="four=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p> {{subjectJson[4][1] }}</p>
           
          </div>
          <div class="cell" :class="four==2?'activce':''" @click="four=2">
            <img :src="imgList.good" class="icons" alt />
            <p> {{subjectJson[4][2] }}</p>
           
          </div>
          <div class="cell" :class="four==3?'activce':''" @click="four=3">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[4][3] }}</p>
            
          </div>
        </div>
        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">5.{{subjectJson[5].title}}</p>
          <div class="cell" :class="five==1?'activce':''" @click="five=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[5][1] }}</p>
            
          </div>
          <div class="cell" :class="five==2?'activce':''" @click="five=2">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[5][2] }}</p>
            
          </div>
        </div>
      </div>
      <div class="nextCard">
        <img :src="imgList.note2" class="topNote" width="100%" alt />
        <p class="title">
          <img :src="imgList.squrt" class="squrts" alt />
          可选项
        </p>
        <div class="chioseList">
          <p class="subTitle">1.{{subjectJson[6].title}}</p>
          <div class="cell" :class="six==1?'activce':''" @click="six=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[6][1] }}</p>
            
          </div>
          <div class="cell" :class="six==2?'activce':''" @click="six=2">
            <img :src="imgList.normal" class="icons" alt />
            <p> {{subjectJson[6][2] }}</p>
           
          </div>
        </div>
        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">2.{{subjectJson[7].title}}</p>
          <div class="cell" :class="seven==1?'activce':''" @click="seven=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[7][1] }}</p>
            
          </div>
          <div class="cell" :class="seven==2?'activce':''" @click="seven=2">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[7][2] }}</p>
            
          </div>
        </div>

        <img :src="imgList.line" alt width="100%" />
        <div class="chioseList">
          <p class="subTitles">3.{{subjectJson[8].title}}</p>
          <div class="cell" :class="eight==1?'activce':''" @click="eight=1">
            <img :src="imgList.excellent" class="icons" alt />
            <p>{{subjectJson[8][1] }}</p>
            
          </div>
          <div class="cell" :class="eight==2?'activce':''" @click="eight=2">
            <img :src="imgList.good" class="icons" alt />
            <p>{{subjectJson[8][2] }}</p>
            
          </div>
          <div class="cell" :class="eight==3?'activce':''" @click="eight=3">
            <img :src="imgList.normal" class="icons" alt />
            <p>{{subjectJson[8][3] }}</p>
            
          </div>
        </div>
      </div>
      <div class="nextCard">
        <p class="title commitTitle">
          <img :src="imgList.squrt" class="squrts" alt />
          老师评语
        </p>
        <div class="commitWrap">
          <van-field v-model="comment" rows="3" autosize type="textarea" placeholder="学员表现的怎么样？填写评语能让学员更清楚自己 的优点和美中不足的地方哦～" />
        </div>
      </div>
    </div>
    <div class="submit" @click="submietInfo">
      <img :src="imgList.btn" width="100%" alt />
    </div>
    <div class="bottomBox"></div>
  </div>
</template>
<script>
import { subjectJson } from "@/utils/questionJson";
import { browser } from "@/common/common";
import { findTeacherClassGroupInfo, addStudyReport1 } from "@/api/teacher";
export default {
  data() {
    return {
      imgList: {
        topBanner: require("@/assets/images/start/topBanner.png"),
        note1: require("@/assets/images/start/note1.png"),
        note2: require("@/assets/images/start/note2.png"),
        squrt: require("@/assets/images/start/squrt.png"),
        theoryIcon: require("@/assets/images/start/theory-icon.png"),
        muiscIcon: require("@/assets/images/start/muisc-icon.png"),
        bookIcon: require("@/assets/images/start/book-icon.png"),
        addIcon: require("@/assets/images/start/add-icon.png"),
        deteleIcon: require("@/assets/images/start/detele-icon.png"),
        excellent: require("@/assets/images/start/excellent.png"),
        good: require("@/assets/images/start/good.png"),
        normal: require("@/assets/images/start/normal.png"),
        line: require("@/assets/images/start/line.png"),
        btn: require("@/assets/images/start/button.png")
      },
      theoryList: ["一级", "二级", "三级", "四级"],
      teachingList: [
        {
          values: ["一级", "二级", "三级", "四级"],
          defaultIndex: 2
        },
        {
          values: [],
          defaultIndex: 1
        }
      ],
      hasTheory: [{ str: "", show: false }],
      teaching: [{ str: "", show: false }],
      testMusic: "",
      showPicker: false,
      lessArr: [],
      subjectJson: subjectJson,
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      subjectName: null,
      id: "",
      comment:''
    };
  },
  created() {
    for (let i = 0; i < 17; i++) {
      this.teachingList[1].values.push(` lesson${i + 1} `);
    }
    this.classGroupId = this.$route.query.classGroupId;
    this.id = this.$route.query.id;
    this.token = localStorage.getItem("Authorization");
    // if (!this.token || !this.classGroupId) {
    //   this.onAppBack();
    //   return;
    // }
    findTeacherClassGroupInfo({ classGroupId: this.classGroupId }).then(res => {
      if (res.data.code == 200) {
        this.subjectName = res.data.data.subjectNames;
      }
    });
  },
  methods: {
    onConfirm(val, item) {
      item.str = val;
      item.show = false;
    },
    onTeacherConfirm(val, item) {
      item.str = val[0] + val[1];
      item.show = false;
    },
    addTheory(arr) {
      arr.push({ str: "", show: false });
    },
    removeTheory(arr, index) {
      arr.splice(index, 1);
    },
    submietInfo() {
      // console.log(this.one)
      // console.log(this.json.one[this.one])
      if (!this.one || !this.two || !this.three || !this.four || !this.five) {
        this.$toast("请认真选择必选项");
        return;
      }
      if (!this.hasTheory[0].str || !this.teaching[0].str) {
        this.$toast("必须选择乐理和教材");
        return;
      }
      if (!this.testMusic) {
        this.$toast("请输入练习曲目");
        return;
      }
      this.item = {
        one: this.one,
        two: this.two,
        three: this.three,
        four: this.four,
        five: this.five,
        six: this.six,
        seven: this.seven,
        eight: this.eight
      };
      let id = this.id || null;
      let comment = this.comment || null;
      addStudyReport1({
        classGroupId: this.classGroupId,
        item: this.item,
        song: this.testMusic,
        musicTheory: this.hasTheory,
        teachingMaterial: this.teaching,
        version: 2,
        comment:this.comment,
        id
      }).then(res => {
        if (res.data.code == 200) {
          this.$toast("提交成功");
          setTimeout(() => {
            this.onAppBack();
          }, 2000);
        } else {
          this.$toast(res.data.msg);
          // setTimeout(() => {
          //   // this.$router.push({
          //   //   path: "/studyReport",
          //   //   query: { classGroupId: this.classGroupId }
          //   // });
          // }, 2000);
        }
      });
    },
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    }
  }
};
</script>
<style lang="less" scoped>
div {
  box-sizing: border-box;
}
.m-containers {
  background: url("../../assets/images/start/bg.png") no-repeat;
  //   background-size: 100% 100%;
  position: relative;
  width: 100%;
  min-height: 16.97rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #5ed5d4;
  padding-bottom: 0.2rem;
  z-index: 0;
  .topBanner {
    z-index: 10;
  }
  .paddingWrap {
    position: relative;
    z-index: 2;
    padding: 0 0.2rem 0.26rem;
    .topCard,
    .nextCard {
      position: relative;
      border-radius: 15px;
      top: -0.08rem;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 0.24rem;
      .commitTitle {
        position: relative!important;
        margin-bottom:.17rem!important; 
      }
      .commitWrap {
        padding: 0.1rem;
      }
      .topNote {
        z-index: 1;
      }
      .title {
        z-index: 5;
        position: absolute;
        top: 0.21rem;
        left: 0.15rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 0.18rem;
        height: 0.22rem;
        line-height: 0.22rem;
        margin-bottom: 0.365rem;
        color: #808080;
        font-weight: bold;
        .squrts {
          width: 0.05rem;
          height: 0.22rem;
          margin-right: 0.1rem;
          position: relative;
          z-index: 5;
        }
      }
      .chioseList {
        position: relative;
        top: -0.1rem;
        z-index: 3;
        padding: 0 0.17rem;
        .theoryCell,
        .musicCell {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
          border-radius: 10px;
          min-height: 0.44rem;
          padding: 0 0.07rem;
          .left {
            color: #666;
            font-size: 0.15rem;
            line-height: 0.44rem;
            margin-right: 6px;
            .theoryIcon {
              width: 0.17rem;
              height: 0.17rem;
              position: relative;
              top: 0.04rem;
            }
            .muiscIcon {
              width: 0.17rem;
              height: 0.19rem;
              position: relative;
              top: 0.04rem;
            }
            .bookIcon {
              width: 0.16rem;
              height: 0.19rem;
              position: relative;
              top: 0.04rem;
            }
          }
          .right {
            .theoryItem {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              width: 2.28rem;
              .van-cell {
                // width: 1.6rem;
                // border-bottom:none;
              }
              .van-field__label {
                width: 0.8rem;
              }
              .iconWrap {
                position: absolute;
                right: 0.2rem;
                width: 0.42rem;
                height: 0.42rem;

                display: flex;
                flex-direction: column;
                align-items: center;
                .smallIcon {
                  margin-top: 0.15rem;
                  width: 0.15rem;
                  height: 0.15rem;
                }
              }
            }
          }
        }
        .musicCell,
        .teachingCell {
          margin-top: 0.25rem;
        }
        .subTitle,
        .subTitles {
          position: relative;
          top: -0.2rem;
          font-size: 0.18rem;
          color: #00696a;
           font-weight: bold;
        }
        .subTitles {
          top: 0 !important;
          padding: 0.27rem 0 0.24rem;
          font-weight: bold;
        }
      }
    }
    .nextCard {
      margin-top: 0.23rem;
    }
  }
  .cell.activce {
    border: 1px solid #28babd;
    color: #28babd;
  }
  .cell {
    width: 3.05rem;
    padding: 0.1rem 0.15rem 0.1rem 0;
    line-height: 0.2rem;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
    background-color: #fff;
    font-size: 0.14rem;
    margin-bottom: 0.245rem;
    border: 1px solid transparent;
    p {width: 2.41rem;}
    .icons {
      width: 0.26rem;
      height: 0.26rem;
      margin: 0 0.105rem;
      display: block;
    }
  }
  .submit {
    width: 3.2rem;
    position: relative;
    z-index: 2;
  }
  .bottomBox {
    background: url("../../assets/images/start/bottom.png") no-repeat;
    //   background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 3.45rem;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
.van-overflow-hidden {
  z-index: 0;
  position: relative;
}
.van-field__control::-webkit-input-placeholder { /* WebKit browsers */
font-size: .14rem;
line-height: .20rem!important;
color: #999;
}

.van-field__control::-moz-placeholder { /* Mozilla Firefox 19+ */
font-size: .14rem;
line-height: .20rem!important;
color: #999
}

.van-field__control::-ms-input-placeholder { /* Internet Explorer 10+ */
font-size: .14rem;
line-height: .20rem!important;
color: #999
}   
</style>