mteacher/src/views/visitManager/afterVisitList.vue

<template>
  <div class="visitList">
    <!-- <m-header v-if="headerStatus" /> -->
    <van-dropdown-menu  :close-on-click-outside="false" active-color="#01C1B5">
      <van-dropdown-item v-model="value1" @change="onTypeChange" title="回访类型" :options="option1" />
      <van-dropdown-item
        v-model="value2"
        @change="onPurposeChange"
        :disabled="purposeStatus"
        title="回访目的"
        :options="option2"
      />
      <van-dropdown-item title="回访时间" ref="item" class="visitTime">
        <van-cell title="开始时间" is-link @click="onChangeDate('showStart')" :value="formatStartTime"></van-cell>
        <van-cell title="结束时间" is-link @click="onChangeDate('showEnd')" :value="formatEndTime"></van-cell>
        <div class="btnWrap">
          <div class="cancelBtn" @click="cancelBtn">重置</div>
          <div class="okBtn" @click="okBtn">确定</div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-popup v-model="dataForm.status" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="dataForm.currentDate"
        :min-date="dataForm.minDate"
        :max-date="dataForm.maxDate"
        :formatter="formatter"
        @cancel="dataForm.status = false"
        type="date"
        @confirm="chioseDate"
      />
    </van-popup>
    <van-list
      v-model="loading"
      v-if="dataShow"
      :finished="finished"
      finished-text="- 没有更多了 -"
      @load="getList"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        class="cellGroup"
        title-class="sectionTitle"
        value-class="sectionValue"
        is-link
        @click="onHref(item)"
      >
        <template slot="title">
          <p >{{ item.type }}</p>
          <p class="type">{{ item.studentName }}</p>
        </template>
        <template solt="default">
          <p class="content van-ellipsis">{{ item.purpose }}</p>
          <p class="time">{{ item.visitTime }}</p>
        </template>
      </van-cell>
    </van-list>
    <m-empty v-else msg="暂无回访记录" />
    <van-icon name="plus" class="addVisit" @click="onAdd" />
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from '@/components/MEmpty';
import dayjs from "dayjs";
import { browser } from "@/common/common";
import { geteduVisitList } from "@/api/teacher";
export default {
  components: { MHeader, MEmpty },
  data() {
    return {
      // addImg: require("@/assets/images/add_icon.png"),
      headerStatus: true,
      dataForm: {
        // 时间下拉框
        type: null,
        status: false,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      },
      value1: "全部",
      value2: "全部",
      purposeStatus: true,
      option1: [
        { text: "全部", value: "全部" },
        { text: "课程推荐", value: "课程推荐" },
        { text: "常规回访", value: "常规回访" },
        { text: "云教练", value: "云教练" },
        { text: "其它", value: "其它" },
      ],
      option2: [],
      startDate: null,
      endDate: null,
      showStart: false,
      showEnd: false,
      formatEndTime: null,
      formatStartTime: null,
      list: [],
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    document.title = '回访记录'
    // this.getList()
  },
  methods: {
    onResetList() {
      this.list = [];
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList()
    },
    onHref(item) {
      this.$router.push({
        path: '/addVisit',
        query: {
          id: item.id,
          name: '回访记录详情'
        }
      })
    },
    cancelBtn() {
      this.formatStartTime = null;
      this.formatEndTime = null;
      this.onResetList()
      this.$refs.item.toggle();
    },
    okBtn() {
      if(this.formatStartTime && this.formatEndTime) {
        this.onResetList()
      }
      this.$refs.item.toggle();
    },
    onChangeDate(type) {
      let dataForm = this.dataForm
      if(type == 'showEnd') {
        if(this.formatStartTime) {
          dataForm.minDate = new Date(dayjs(this.formatStartTime))
        }
        setTimeout(() => {
          dataForm.currentDate = this.formatEndTime ? new Date(dayjs(this.formatEndTime)) : new Date()
        }, 500)
      } else if(type == 'showStart') {
        dataForm.minDate = new Date(2000, 0, 1)
        setTimeout(() => {
          dataForm.currentDate = this.formatStartTime ? new Date(dayjs(this.formatStartTime)) : new Date()
        }, 500)
      }
      dataForm.status = true
      dataForm.type = type
    },
    chioseDate(value) {
      let dataForm = this.dataForm
      if(dataForm.type == 'showStart') {
        this.formatStartTime = dayjs(value).format('YYYY/MM/DD')
        if(this.formatEndTime && dayjs(value).unix() > dayjs(this.formatEndTime).unix()) {
          this.formatEndTime = null
        }
      } else if(dataForm.type == 'showEnd') {
        this.formatEndTime = dayjs(value).format('YYYY/MM/DD')
      }
      dataForm.status = false
    },
    onTypeChange() {
      if (this.value1 == "全部") {
        this.purposeStatus = true;
        this.value2 = "全部";
      } else if (this.value1 == "课程推荐") {
        this.purposeStatus = false;
        this.option2 = [
          { text: "全部", value: "全部" },
          { text: "新课推荐", value: "新课推荐" },
          { text: "续费提醒", value: "续费提醒" },
        ];
      } else if (this.value1 == "常规回访") {
        this.purposeStatus = false;
        this.option2 = [
          { text: "全部", value: "全部" },
          { text: "课后及作业回访", value: "课后及作业回访" },
          { text: "练习及乐团表现", value: "练习及乐团表现" },
          { text: "教学内容未达标", value: "教学内容未达标" },
        ];
      } else if (this.value1 == "云教练") {
        this.purposeStatus = false;
        this.option2 = [{ text: "体验回访", value: "体验回访" }];
      } else if (this.value1 == "其它") {
        this.purposeStatus = false;
        this.option2 = [{ text: "其它", value: "其它" }];
      }
      this.onResetList()
    },
    onPurposeChange() {
      this.onResetList()
    },
    getList() {
      let params = this.params;
      params.type = this.value1 == "全部" ? null : this.value1;
      params.purpose = this.value2 == "全部" ? null : this.value2;
      if(this.formatStartTime && this.formatEndTime) {
        params.startTime = dayjs(new Date(this.formatStartTime)).format("YYYY-MM-DD")
        params.endTime = dayjs(new Date(this.formatEndTime)).format("YYYY-MM-DD")
      } else {
        params.startTime = null
        params.endTime = null
      }
      geteduVisitList(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          params.page = result.data.pageNo;
          result.data.rows.forEach((item) => {
            item.visitTime = dayjs(item.visitTime).format("YYYY/MM/DD");
          });
          this.list = this.list.concat(result.data.rows);
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.list.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    onAdd() {
      this.$router.push({
        path: "/addVisit",
        query: {
          name: '新增回访记录'
        }
      });
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.visitList {
  min-height: 100vh;
  .visitTime {
    .van-cell__right-icon{
      line-height: .36rem;
    }
  }
}
.addClass {
  width: 0.2rem;
  height: 0.2rem;
  line-height: 0.2rem;
  position: relative;
  top: 0.05rem;
} 
.cellGroup {
  display: flex;
  align-items: center;
  line-height: .61rem;
}
.sectionTitle {
  font-size: 0.15rem!important;
  color: #1a1a1a;
  align-items: center;
  line-height: .21rem;
  .type {
    color: #666;
    font-size: 0.14rem;
  }
}
.sectionValue {
  display: flex;
  width: 60%;
  flex: 1 auto;
  justify-content: space-between;
  align-items: center;
  height: auto !important;
  .time{
    font-size: .14rem;
    color: #808080;
  }
  .content {
    font-size: 0.16rem;
    color: #1a1a1a;
    flex: 1;
    text-align: center;
  }
  .van-button {
    font-size: 0.14rem;
    background-color: @mColor;
    border-color: @mColor;
    padding: 0 0.12rem;
    min-width: 0.88rem;
    height: 0.3rem;
    &.van-update {
      background-color: #fff;
      color: @mColor;
    }
  }
}
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}
.btnWrap {
  display: flex;
  flex-direction: row;
  .cancelBtn {
    height: 48px;
    line-height: 48px;
    background: #eeeff3;
    color: @mColor;
    text-align: center;
    width: 100%;
  }
  .okBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: @mColor;
    color: #fff;
    text-align: center;
  }
}
.addVisit {
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  font-size: 30px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  color: @mColor;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
}
.van-cell{
    color: #1A1A1A;
    line-height: .36rem!important;
    font-size: .16rem;
}

</style>