mteacher/src/views/visitManager/addVisit.vue

<template>
  <div class="addVisit">
    <m-header v-if="statusList.headerStatus" :name="name" />
    <van-cell-group>
      <van-field
        label="回访老师"
        v-model="teacherName"
        readonly
        input-align="right"
        placeholder="请选择"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        label="学员姓名"
        @click="onCheckStudent"
        v-model="studentName"
        readonly
        input-align="right"
        :is-link="id || userId || studentId ? false : true"
        placeholder="请选择"
      >
        <template #right-icon>
          <a v-if="studentPhone" @click.stop="() => {}" class="phone_section" :href="'tel:' + studentPhone"><img src="../../assets/images/icon_phone.png" class="iconPhone" alt=""></a>
        </template>
      </van-field>
      <van-field
        label="回访类型"
        @click="onChange('type')"
        v-model="form.type"
        readonly
        input-align="right"
        :is-link="id || userId ? false : true"
        placeholder="请选择"
      />
      <van-field
        label="回访目的"
        @click="onChange('purpose')"
        v-model="form.purpose"
        readonly
        input-align="right"
        :is-link="id || userId ? false : true"
        placeholder="请选择"
      />
    </van-cell-group>
    <van-cell-group>
      <div class="dot"></div>
      <van-field
        label="当前学生情况"
        class="textarea"
        :readonly="id ? true : false"
        v-model="form.overview"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        :show-word-limit="id ? false : true"
      />
    </van-cell-group>
    <van-cell-group>
      <div class="dot"></div>
      <van-field
        label="沟通后家长反馈"
        class="textarea"
        :readonly="id ? true : false"
        v-model="form.feedback"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        :show-word-limit="id ? false : true"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        label="回访时间"
        class="visiTimer"
        v-model="form.visitTime"
        readonly
        @click="onEnListShow"
        input-align="right"
        :is-link="id ? false : true"
        placeholder="请选择"
      />
    </van-cell-group>

    <div class="button-group" v-if="!id">
      <van-button type="primary" @click="onSubmit" round size="large"
        >确认</van-button
      >
    </div>

    <van-action-sheet
      v-model="visit.status"
      :actions="visit.data"
      cancel-text="取消"
      @cancel="visit.status = false"
      @select="onModeSelect"
    />

    <van-popup v-model="dataForm.status" position="bottom">
      <van-datetime-picker
        v-model="dataForm.currentDate"
        type="date"
        :min-date="dataForm.minDate"
        :max-date="dataForm.maxDate"
        :formatter="formatter"
        @cancel="dataForm.status = false"
        @confirm="onCurrentConfirm"
      />
    </van-popup>

    <!-- 选择上课学生 -->
    <van-popup
      v-model="statusList.studentStatus"
      :lock-scroll="true"
      position="bottom"
      :style="{ height: '180%' }"
    >
      <van-sticky>
        <van-search
          show-action
          shape="round"
          :left-icon="searchIcon"
          @search="onSearch"
          v-model="params.search"
          placeholder="请输入学生名或手机号"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-sticky>
      <div class="paddingB80">
        <van-list
          v-model="loading"
          class="studentContainer"
          v-if="dataShow"
          key="data"
          :finished="finished"
          finished-text=""
          @load="getStudent"
        >
          <van-radio-group v-model="radioSelect">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in dataList"
                :key="index"
                @click="onCheckboxSelect(item)"
                class="input-cell"
                :center="true"
              >
                <template slot="icon">
                  <img
                    class="logo"
                    v-if="item.avatar"
                    :src="item.avatar"
                    alt=""
                  />
                  <img
                    class="logo"
                    v-else
                    src="@/assets/images/icon_student.png"
                    alt=""
                  />
                </template>
                <template slot="title">
                  <div class="studentName">
                    {{ item.userName }}
                  </div>
                </template>
                <template slot="label">
                  <span>{{ desensitPhone(item.phone) }}</span>
                </template>
                <template slot="default">
                  <van-radio :name="item.userId"></van-radio>
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-list>
        <m-empty class="empty" v-else key="data" />
      </div>
      <div class="button-group-popup">
        <span class="btn" @click="onPopupCancel">取消</span>
        <span class="btn primary" @click="onPopupSubmit">确认选择</span>
      </div>
    </van-popup>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import { browser } from "@/common/common";
import MEmpty from "@/components/MEmpty";
import dayjs from "dayjs";
import {
  queryStudentsWithTeacher,
  visitAdd,
  visitGetInfo,
  queryUserById
} from "@/api/teacher";
import { queryUserInfo } from "@/api/app";
import setLoading from "@/utils/loading";
export default {
  name: "addVisit",
  components: {
    MHeader,
    MEmpty,
  },
  data() {
    const query = this.$route.query;
    return {
      id: query.id,
      name: query.name,
      userId: query.userId, // 如果有userId的时候说明是从评测详情进来的
      studentId: query.studentId, // 这个参数是从原生传过来的，单独做了处理
      beforeId: query.beforeId, // 如果有beforeId的时候说明是从待回访列表进来的
      inside: query.inside || 0,
      visitFlag: Number(query.visitFlag) || 0,
      dataForm: {
        // 时间下拉框
        status: false,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
      },
      statusList: {
        // 散状态集合
        headerStatus: true, // 头部是否展示
        studentStatus: false, // 上课学生状态
      },
      typeList: [{ name: "课程推荐" }, { name: "常规回访" }, { name: "团练宝" }, { name: "其它" }],
      visit: {
        status: false,
        type: null,
        data: [],
      },
      studentName: query.username || null,
      studentPhone: query.phone || null,
      teacherName: null,
      form: {
        teacherId: null,
        studentId: query.userId || query.studentId || query.beforeId || null,
        type: query.userId ? '团练宝' : query.beforeId ? '常规回访' : null,
        purpose:  query.userId ? '体验回访' : query.beforeId ? '教学内容未达标' : null,
        overview: "",
        feedback: "",
        visitTime: query.userId || query.id || query.beforeId ? dayjs().format("YYYY年MM月DD日") : null,
        visiterType: "TEACHER",
      },
      loading: false,
      finished: false,
      params: {
        search: null,
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      radioSelect: null,
      radioSelectName: null,
      radioSelectPhone: null,
      clickStatus: false,
      dataList: [],
      searchIcon: require("@/assets/images/search.png"),
    };
  },
  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.statusList.headerStatus = false;
    }
    document.title = this.name || '新增回访记录';
    this.__init();
  },
  methods: {
    async __init() {
      let res = await queryUserInfo();
      let result = res.data;
      if (res.status == 200) {
        this.teacherName = result.realName;
        this.form.teacherId = result.id;
      } else {
        this.$toast(res.msg);
      }

      if (this.id) {
        setLoading(true);
        let queryInfo = await visitGetInfo({ id: this.id });
        const queryResult = queryInfo.data;
        let form = this.form;
        setLoading(false);
        if (queryResult.code == 200) {
          let tempData = queryResult.data;
          this.studentName = tempData.studentName;
          form.studentId = tempData.studentId;
          form.type = tempData.type;
          form.purpose = tempData.purpose;
          form.overview = tempData.overview;
          form.feedback = tempData.feedback;
          form.visitTime = dayjs(tempData.visitTime).format("YYYY年MM月DD日");
          form.visiterType = tempData.visiterType;
        } else {
          this.$toast(res.msg);
        }
      }
      let userId = this.userId || this.studentId || this.beforeId;
      if(userId) {
        await queryUserById({ userId }).then(res => {
          let result = res.data
          this.studentPhone = result.phone
          this.studentName = result.username
        })
      }
    },
    async onSubmit() {
      let form = this.form;
      if (!form.studentId) {
        this.$toast("请选择学员");
        return;
      } else if (!form.type) {
        this.$toast("请选择回访类型");
        return;
      } else if (!form.purpose) {
        this.$toast("请选择回访目的");
        return;
      } else if (!form.overview) {
        this.$toast("请输入当前学生情况");
        return;
      } else if (!form.feedback) {
        this.$toast("请输入沟通后家长反馈");
        return;
      } else if (!form.visitTime) {
        this.$toast("请选择回访时间");
        return;
      }
      if (this.clickStatus) {
        return;
      }
      this.clickStatus = true;
      setLoading(true);
      // let visitTime = this.form.visitTime.replace(/[^\d]/g,'/');
      // let someDate = new Date(visitTime)
      let visitTime = dayjs(this.dataForm.currentDate).format("YYYY-MM-DD")
      let params = {
        ...form,
        visitTime
      }
      // 待回访时要传的参数
      if(this.beforeId) {
        params.objectId = this.$route.query.objectId
      }
      let res = await visitAdd({ ...params });
      let result = res.data;
      setLoading(false);
      if (result.code == 200) {
        this.$toast("添加成功");
        setTimeout(() => {
          if(this.inside) {
            this.onAppBack()
          } else if(this.userId) {
            let { visitFlag ,...query } = this.$route.query
            visitFlag = 0
            this.$router.replace({
              path: '/trainDetail',
              query: {
                ...query,
                visitFlag
              }
            });
          } else if(this.beforeId) {
            let { ...query } = this.$route.query
            this.$router.replace({
              path: '/visitList',
              query: {
                userId: this.beforeId,
                ...query
              }
            });
          } else {
            this.$router.replace("visitList");
          }
        }, 800);
      } else {
        this.$toast(result.msg);
        this.clickStatus = false;
        return;
      }
    },
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    },
    onCheckStudent() {
      if (this.id || this.userId || this.studentId || this.beforeId) {
        return;
      }
      this.statusList.studentStatus = true;
    },
    onChange(type) {
      if (this.id || this.userId || this.beforeId) {
        return;
      }
      let visit = this.visit;
      let form = this.form;
      if (type == "type") {
        visit.data = this.typeList;
      } else if (type == "purpose") {
        if (form.type == "其它") {
          visit.data = [{ name: "其它" }];
        } else if (form.type == "课程推荐") {
          visit.data = [{ name: "新课推荐" }, { name: "续费提醒" }];
        } else if (form.type == "常规回访") {
          visit.data = [{ name: "课后及作业回访" }, { name: "练习及乐团表现" }, { name: "教学内容未达标" },];
        } else if(form.type == '团练宝') {
          visit.data = [{ name: "体验回访" }]
        } else {
          this.$toast("请选择回访类型");
          return;
        }
      }
      visit.status = true;
      visit.type = type;
    },
    onSearch() {
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getStudent();
    },
    onCheckboxSelect(item) {
      this.radioSelect = item.userId;
      this.radioSelectName = item.userName;
      this.radioSelectPhone = item.phone
    },
    onPopupCancel() {
      this.statusList.studentStatus = false;
    },
    onPopupSubmit() {
      this.form.studentId = this.radioSelect;
      this.studentName = this.radioSelectName;
      this.studentPhone = this.radioSelectPhone;
      this.statusList.studentStatus = false;
    },
    onCurrentConfirm(value) {
      if (value) {
        this.form.visitTime = dayjs(value).format("YYYY年MM月DD日");
      }
      this.dataForm.status = false;
    },
    onEnListShow() {
      // 从团练宝统计来的，不许改时间，默认当前时间
      if (this.id || this.visitFlag) {
        return;
      }
      this.dataForm.status = true;
    },
    getStudent() {
      let params = this.params;
      queryStudentsWithTeacher(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200 && result.data) {
          params.page = result.data.pageNo;
          this.dataList = this.dataList.concat(result.data.rows);
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    onModeSelect(value) {
      let visit = this.visit;
      let form = this.form;
      if (visit.type == "type") {
        form.type = value.name;
        form.purpose = null;
      } else if (visit.type == "purpose") {
        form.purpose = value.name;
      }
      visit.status = false;
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    desensitPhone(phone) {
      // 手机号脱敏
      let first = phone.substr(0, 3);
      let last = phone.substr(-4);
      return first + "****" + last;
    },
  },
};
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
/deep/.van-popup--bottom {
  border-radius: 0px 0px 0px 0px!important;
  overflow: auto!important;
}
.addVisit {
  min-height: 100vh;
}
.vip-title {
   padding: .06rem .14rem .04rem;
    font-size: .14rem;
    color: #808080;
}
/deep/.van-cell-group {
  margin-bottom: 0.1rem;
}
/deep/.van-cell {
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  line-height: 0.28rem;
}
/deep/.van-field__label,
/deep/.van-cell__value {
  flex: 1 auto;
}
/deep/.van-field__word-limit {
  margin-top: 0px;
  position: absolute;
  top: -0.2rem;
  right: 5px;
  font-size: 0.14rem;
}
/deep/.van-field__control:disabled {
  color: #6a6969;
}
.textarea {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  padding: 0.1rem 0.21rem;
  /deep/.van-field__label {
    width: 100%;
  }
  // /deep/.van-field__value {
  // 	border: 1px solid #ccc;
  // }
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;

  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
    height: 0.5rem;
  }
}

.studentContainer {
  /deep/.van-cell__title {
    font-size: 0.14rem;
    color: @mFontColor;
    // flex: 1 auto;
  }

  .logo {
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.12rem;
    border-radius: 100%;
  }

  .input-cell {
    padding: 0.2rem 0.16rem;

    .van-radio {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  /deep/.van-radio__icon .van-icon {
    border-color: #d3d3d3;
  }

  /deep/.van-radio__icon--checked {
    .van-icon {
      border-color: @mColor;
      background: @mColor;
    }
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}
/deep/.van-field__right-icon, .phone_section {
  display: flex;
}
.iconPhone {
  width: .17rem;
  height: .21rem;
}
.paddingB80 {
  padding-bottom: 0.8rem;
}
.button-group-popup {
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  .btn {
    line-height: 0.5rem;
    display: inline-block;
    border: 1px solid @mColor;
    width: 1.65rem;
    border-radius: 0.4rem;
    color: @mColor;
    background: #fff;
    font-size: 0.18rem;
    &.primary {
      color: #fff;
      background: @mColor;
    }
  }
  .btn + .btn {
    margin-left: 0.1rem;
  }
}
.studentColor {
  color: @mColor;
}
.visiTimer {
  /deep/.van-field__control {
    color: #333333 !important;
    font-size: 0.16rem;
  }
}
.studentName {
  font-size: 0.16rem;
  color: #1a1a1a;
  line-height: 0.22rem;
}
.dot {
  width: 4px;
  height: 0.17rem;
  background: #01c1b5;
  border-radius: 3px;
  position: absolute;
  z-index: 200;
  top: 0.14rem;
  left: 0.12rem;
}
.van-icon-search {
  color: @mColor;
}
</style>