pbl-app/src/views/eva/searchstuDetail.vue

<template>
  <!-- 学生详情 -->
  <div class="studentDetail" ref="tabs">
    <bar :tit="'学生记录'" :backPage="1"></bar>
    <div style="height: 50px;"></div>
    <!-- 顶部学生信息开始 -->
    <div class="top">
      <div class="UserInfo" style="flex: 1;">
        <div class="sInfo">
          <div class="userName">{{ studentInfo.name }}</div>
        </div>
        <div class="cla">{{ studentInfo.cname }}</div>
        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>

        <selectStyle
          ref="claSel"
          @shadeIsShow="shadeIsShow"
          @update-search="handleUpdateSearch"
          :listCont="termList"
          :tit="'请选择学期'"
          :choose="termData"
        ></selectStyle>

        <div class="dataNum">本学期共计{{ TermRecord.length }} 条记录</div>
      </div>
    </div>
    <!-- 顶部学生信息结束 -->

    <!-- 观察记录开始 -->
    <div style="position: relative;top: -15px;">
      <div class="observe_tit">
        <div class="left">
          <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
          <div>观察记录</div>
        </div>
        <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
      </div>
      <div class="observe_box">
        <div
          class="observe_boxCon"
          v-for="(i, index) in filtrate"
          @click="addFil(i.id, index)"
          :class="{ active: activeItem === index }"
          :key="index"
          @touchstart="touchStart(index)"
          @touchend="touchend(index)"
          @touchmove="gtouchmove()"
        >
          <div class="txt">{{ i.name }}</div>
          <div ref="loop" class="loopList">
            {{ i.name }}
          </div>
        </div>
        <!-- </div> -->
      </div>
      <!-- 观察内容开始 -->
      <van-swipe-cell
        :swipeable="true"
        v-show="conList.length"
        v-for="(i, index) in conList"
        :key="index"
        @touchmove.stop="handleTouchMove"
      >
        <div class="observe_content" @click="recordContinue(i.rid)">
          <div class="observe_contentTit">
            <!-- {{ i.recordTit }} -->
            观察内容
          </div>
          <div class="observe_contentBir">
            <div>{{ i.username }}</div>
            <div>{{ i.recordDate }}</div>
          </div>
          <div class="observe_contentTxt">
            {{ i.recordContent }}
          </div>
        </div>
        <template #right>
          <div class="observe_contentDel" @click="delPop(i.rid)">
            <img src="../../assets/images/eva/del.png" style="width: 20px;height: 20px;" alt="" />
          </div>
          <!-- <van-button square text="删除" type="danger" class="delete-button" /> -->
        </template>
      </van-swipe-cell>
      <div v-show="!conList.length" style="width: 100%;height: 10px;background-color: #F0F2F5;"></div>
      <div v-show="!conList.length" class="observe_content observe_content2">
        <img src="../../assets//images/eva/rqq.png" alt="" />
        <div class="tit">暂无内容</div>
        <div class="tit2" @click="addRecord">快去添加新记录吧 ></div>
      </div>

      <!-- 观察内容结束 -->
    </div>

    <!-- 观察记录结束 -->

    <pop v-show="isShowMask">
      <template v-slot:tit>确定</template>
      <template v-slot:con>确定删除吗</template>
      <template v-slot:btn1>
        <div class="btn" style="color: rgba(136,136,136,1);" @click="isShowMask = false">取消</div>
      </template>
      <template v-slot:btn2>
        <div class="btn" style="color: rgba(251,67,25,1);" @click="delCon">确认</div>
      </template>
    </pop>

    <!-- 添加记录按钮开始 -->
    <div class="addRecord" @click="addRecord">
      <img src="../../assets/images/eva/add.png" alt="" />
    </div>
    <!-- 添加记录按钮结束 -->
  </div>
</template>

<script>
import { selectStudentDetail } from '@/api/eva'
// import { selectClassStudent } from '@/api/eva'
import { selectVeiDoo } from '@/api/eva'
import { selectRecord } from '@/api/eva'
import { selectTerm } from '@/api/eva'
// import { selectStuClass } from '@/api/eva'

import { updateRecord } from '@/api/eva'
// 单选
import selectStyle from './components/selectStyle.vue'
import bar from './components/bar.vue'
// 弹窗组件
import pop from './components/pop.vue'
export default {
  components: {
    bar,
    pop,
    selectStyle
  },
  data() {
    return {
      // 遮罩层
      isSelectShow: false,
      activeItem: null,
      // 观察记录数组
      conList: [],
      // 筛选项
      filtrate: [],
      // 学生信息
      studentInfo: {},

      // 请求筛选条件
      fil: [],

      // 班级学生列表
      stuList: [],
      // 学生id
      stuId: '',
      // 传参班级数据
      classInfo: this.$route.query,
      num: null,

      // 弹窗的
      isShowMask: false,
      delRid: '',

      termList: [],
      termData: [],

      TermRecord: [],
      timeOutEvent: 0,
      scorllTaps: null
    }
  },
  methods: {
    handleTouchMove(event) {
      event.preventDefault()
    },
    touchStart(e) {
      this.timeOutEvent = setTimeout(() => {
        this.timeOutEvent = 0
        const target = this.$refs.loop[e]
        target.style.display = 'block'
        if (e % 4 !== 0) {
          console.log(0)
          target.style.right = '0'
        }
      }, 500)
      return false
    },
    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent) // 清除定时器
      this.timeOutEvent = 0
      // alert('取消了')
    },
    touchend(e) {
      // 清除定时器
      clearTimeout(this.timeOutEvent)
      if (this.timeOutEvent !== 0) {
        // 这里写要执行的内容（尤如onclick事件）
        console.log('你这是点击，不是长按')
      } else {
        setTimeout(() => {
          const target = this.$refs.loop[e]
          target.style.display = 'none'
        }, 1000)
      }
    },
    // 获取基础数据
    getData() {
      // 获取学生信息
      const data = {
        uid: this.stuId,
        trm: this.termData[0]
      }
      console.log(data)
      selectStudentDetail(data).then(res => {
        this.studentInfo = res[0][0]
        console.log('获取学生信息', this.studentInfo)
      })

      // 获取所有学生记录
      const data4 = {
        uid: this.stuId,
        trm: this.termData[0],
        txt: ''
      }
      selectRecord(data4).then(res => {
        console.log('获取所有学生记录', res[0])
        this.conList = res[0]
      })

      // 获取筛选框
      const data3 = {
        oid: this.$store.state.user.userinfo.organizeid
      }
      selectVeiDoo(data3).then(res => {
        this.filtrate = res[0]
      })
    },
    selTerm() {
      // 获取学期筛选框
      selectTerm().then(res => {
        console.log('获取学期筛选框', res)
        res[0].forEach(e => {
          if (e.defaultC === 1) {
            this.termData.push(e.id)
          }
        })
        // console.log('this.termData', this.termData)
        this.termList = res[0]
        this.getData()
        this.getTermRecord()

        // console.log('this.termList', this.termList)
      })
    },
    // 删除弹框显示
    delPop(e) {
      this.delRid = e
      this.isShowMask = true
    },
    // 删除数据
    delCon() {
      const data = [{ rid: this.delRid }]
      updateRecord(data).then(res => {
        if (res === 1) {
          this.$toast({
            message: '删除成功',
            type: 'success'
          })
          this.isShowMask = false
          this.getTermRecord()

          setTimeout(() => {
            this.getData()
          }, 500)
        } else {
          this.$toast({
            message: '删除失败',
            type: 'fail'
          })
        }
      })
    },
    // 筛选按钮
    addFil(e, index) {
      // 同一个点击第二次时取消选择
      if (this.activeItem === index) {
        this.activeItem = null
        e = ''
      } else {
        this.activeItem = index
      }

      // this.fil.push(e)
      const data4 = {
        uid: localStorage.getItem('userId'),
        trm: this.termData[0],
        txt: e
      }
      // console.log(data4)
      selectRecord(data4).then(res => {
        console.log('获取所有学生记录', res)
        this.conList = res[0]
      })
    },
    fuClick1() {
      this.isSelectShow = false
      this.$refs.claSel.close()
    },
    shadeIsShow() {
      console.log(11111)
      this.isSelectShow = true
    },
    // 获取学期学生记录
    getTermRecord() {
      const data4 = {
        uid: localStorage.getItem('userId'),
        trm: this.termData[0],
        txt: ''
      }
      // console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
      selectRecord(data4).then(res => {
        console.log('获取所有学生记录', res)
        this.TermRecord = res[0]
      })
    },
    // 子组件调用父组件方法
    handleUpdateSearch(e) {
      this.isSelectShow = false

      // console.log(e)
      // 获取筛选学期所有学生记录
      const data4 = {
        uid: this.stuId,
        trm: this.termData[0],
        txt: ''
      }
      // console.log('data4', data4)
      selectRecord(data4).then(res => {
        console.log('获取所有学生记录', res[0])
        this.conList = res[0]
      })
      this.getTermRecord()
    },
    // 添加记录按钮跳转
    addRecord() {
      this.$router.push(`/searchStudentEva?shareShow=${0}&isSea=${0}`)

      // this.$router.push(`/searchStudentEva?shareShow=${0}&cid=${this.classInfo.cid}&CName=${this.classInfo.cName}`)
    },
    // 已经写过的记录卡片点击跳转
    recordContinue(e) {
      this.$router.push(`/searchStudentEva?shareShow=${1}&rid=${e}&isSea=${0}`)
      // this.$router.push(
      //   `/searchStudentEva?shareShow=${1}&cid=${this.classInfo.cid}&CName=${this.classInfo.cName}&rid=${e}`
      // )
    }
  },
  beforeRouteEnter(to, from, next) {
    document.addEventListener(
      'touchmove',
      function(event) {
        event.preventDefault()
      },
      false
    )
    next(vm => {})
  },
  mounted() {},
  created() {
    this.stuId = localStorage.getItem('userId')
    this.selTerm()
  }
}
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}
.loopList {
  height: 20px;
  line-height: 20px;
  display: none;
  position: absolute;
  // min-width: 120px;
  text-wrap: nowrap;
  font-size: 12px;
  border-radius: 5px;
  padding: 0 5px;
  background-color: #309cd6;
  top: -80%;
  color: #fff;
  // left: 0;
  // right: 0;
}
.loopList:nth-child(4n) {
  background-color: #e0eafb;
}
.backPage {
  // background-color: aquamarine;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  z-index: 99;
}
.delete-button {
  height: 100%;
}
.observe_contentDel {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.observe_content {
  // margin: 0 10px;
  width: 100%;
  min-height: 95px;
  // max-height: 95px;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  background-color: #fff;

  .observe_contentTit {
    //   line-height: 20px;
    box-sizing: border-box;
    padding: 8px 0;
    font-weight: 550;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir {
    display: flex;
    // color: rgba(79, 79, 79, 1);
    color: rgba(0, 0, 0, 0.4);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir :first-child {
    margin-right: 10px;
  }
  .observe_contentTxt {
    margin-top: 5px;
    // color: rgba(16, 16, 16, 1);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.studentDetail {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  //   顶部学生信息开始
  .top {
    margin: auto;
    width: 100vw;
    height: 150px;
    background-color: #005ccd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    color: #fff;
    .rig {
      display: flex;
      width: 40%;
      height: 100%;
      justify-content: space-around;

      .topBtnS {
        // flex: 1;
        width: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .UserInfo {
      display: flex;
      flex-direction: column;
      // height: 55px;
      justify-content: space-between;
      .sInfo {
        display: flex;
        .userName {
          width: 120px;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 5px;
          height: 20px;
          line-height: 20px;
          color: #ffffff;
          font-size: 20px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
      }
      .cla {
        height: 20px;
        line-height: 30px;
        font-size: 12px;
        color: #ffffff;
      }
      .dataNum {
        // width: 150px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 16px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
  }
  //   顶部学生信息结束

  //   观察记录开始
  .observe_tit {
    // position: relative;
    // top: -15px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    align-items: center;
    border-radius: 15px 15px 0 0;
    // transform: translate(0, -10px);
    background-color: #fff;
    justify-content: space-between;
    font-weight: bold;
    .left {
      display: flex;
      align-items: center;
    }
    .img {
      width: 26px;
    }
  }
  .observe_box {
    width: 100%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .observe_boxCon {
      position: relative;
      // width: calc(100% / 5);
      width: calc(100% / 4 - (5px * 3));

      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      background-color: #fff;
      color: rgba(153, 152, 152, 1);
      font-size: 12px;
      text-align: center;
      font-family: Roboto;
      box-sizing: border-box;
      border: 1px solid rgba(231, 231, 231, 1);
      margin-bottom: 8px;
      margin-right: 20px;
      .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .observe_boxCon:nth-child(4n) {
      margin-right: 0;
    }
    .active {
      background-color: #e0eafb;
      color: #0061ff;
    }
    // .observe_boxSelect {
    //   width: 100%;
    //   display: flex;
    //   justify-content: flex-start;
    //   align-items: center;
    //   flex-wrap: wrap;

    //   //   height: 100%;
    // }
  }
  //   观察记录结束

  //    观察内容开始

  .observe_content2 {
    margin-top: 10px;
    border: none;
    height: 250px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    .tit {
      margin: 5px 0;
      color: rgba(0, 0, 0, 0.4);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
    }
    .tit2 {
      color: #3681fc;
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
    }

    img {
      width: 80px;
      height: 80px;
    }
  }
  // 观察内容结束

  // 添加记录按钮开始
  .addRecord {
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 14px;
    font-family: Microsoft Yahei;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    img {
      width: 16px;
      height: 16px;
    }
  }
  //  添加记录按钮结束
}
</style>