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-field v-if="form.type == '小课回访'" label="学员状态" @click="onChange('feedbackType')" v-model="form.feedbackTypeName" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
      <!-- <van-field v-if="form.type == '小课回访' && (form.feedbackType == 'THINKING' || form.feedbackType == 'LOST')" label="反馈详情" @click="onChange('feedbackTypeDesc')" v-model="form.feedbackTypeDescName" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" /> -->
      <van-field label="问题状态" @click="onChange('probStatus')" v-model="form.probStatusName" readonly input-align="right" :is-link="id ? 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="400" 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="400" 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>
    <van-cell-group v-if="(id && uploader[0] && uploader[0].url) || !id">
      <div class="visiWrap">
        <p>回访图片</p>
        <!--    :before-delete="beforDelete" -->
        <van-uploader v-model="uploader" :before-read="beforeRead" :after-read="afterRead" :disabled="id ? true : false" :deletable="!id ? true : false" accept="image/*" multiple :max-count="5" />
        <p class="submit" v-if="!id">上传文件大小不能超过5MB且最多上传五张</p>
      </div>
    </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 { policy } from "@/views/massMessage/api";
import setLoading from "@/utils/loading";
import axios from "axios";
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,
      uploader: [],
      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: "云教练" }, { 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",
        feedbackTypeDesc: "",
        feedbackType: "",
        probStatus: "",
      },
      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"),
      // ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/daya",
      ossUploadUrl: "https://daya.ks3-cn-beijing.ksyuncs.com",
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        KSSAccessKeyId: "",
        acl: "public-read",
        name: "",
      },
      feedbackTypeList: [
        { name: "在读", value: "NORMAL" },
        { name: "暂停", value: "PAUSE" },
        { name: "沉睡", value: "SLEEPY" },
        { name: "流失", value: "LOST" },
        { name: "其他", value: "OTHER" },
    
      ],
      feedbackTypeDescList: [
        { name: "价格原因", value: "PRICE" },
        { name: "时间原因", value: "TIME" },
        { name: "教学不满意", value: "TEACHING" },
        { name: "其他", value: "OTHER" },
      ],
      probStatusList: [
        { name: "已解决", value: 1 },
        { name: "待跟进", value: 0 },
      ],
    };
  },
  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;
          form.feedbackType = tempData.feedbackType;
          form.feedbackTypeDesc = tempData.feedbackTypeDesc;
          form.probStatus = tempData.probStatus;
          if (form.feedbackType) {
            form.feedbackTypeName = "";
            this.feedbackTypeList.forEach((item) => {
              if (item.value == form.feedbackType) {
                form.feedbackTypeName = item.name;
              }
            });
          }
          if (form.feedbackTypeDesc) {
            form.feedbackTypeDescName = "";
            this.feedbackTypeDescList.forEach((item) => {
              if (item.value == form.feedbackType) {
                form.feedbackTypeDescName = item.name;
              }
            });
          }
          if (form.probStatus) {
            form.probStatusName = "已解决";
          } else {
            form.probStatusName = "待跟进";
          }
          /**
           *       form.feedbackTypeDescName = null;
        form.feedbackTypeDesc = null;
        form.probStatus = null;
        form.probStatusName = null;
        form.feedbackTypeDescName = null;
        form.feedbackTypeDesc = null;
           */
          form.probStatus = tempData.probStatus;
          let attrList = tempData.attachments.split(",");
          this.uploader = attrList.map((item) => {
            return { url: item };
          });
          // console.log(this.uploader);
        } 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.visitTime) {
        this.$toast("请选择回访时间");
        return;
      } else if (!form.feedbackTypeDesc && form.type == "小课回访") {
        this.$toast("请选择反馈详情");
        return;
      } else if (!form.feedbackType && form.type == "小课回访") {
        this.$toast("请选择家长反馈");
        return;
      } else if (!(form.probStatus + "")) {
        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 attachmentsList = this.uploader.map((item) => {
        return item.url;
      });
      let params = {
        ...form,
        visitTime,
        attachments: attachmentsList.join(","),
      };
      // 待回访时要传的参数
      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) {
        return;
      }
      if ((this.userId || this.beforeId) && type != "probStatus") {
        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: "其它" }, { name: "会员续费" }];
        } else if (form.type == "课程推荐") {
          visit.data = [{ name: "新课推荐" }, { name: "续费提醒" }];
        } else if (form.type == "常规回访") {
          visit.data = [{ name: "课后及作业回访" }, { name: "练习及乐团表现" }, { name: "考勤申诉" }, { name: "异常请假回访" }];
        } else if (form.type == "小课回访") {
          visit.data = [{ name: "续费类回访" }, { name: "服务回访" }, { name: "其他" }];
        } else if (form.type == "云教练") {
          visit.data = [{ name: "体验回访" }];
        } else {
          this.$toast("请选择回访类型");
          return;
        }
      } else if (type == "feedbackType") {
        visit.data = this.feedbackTypeList;
      } else if (type == "feedbackTypeDesc") {
        visit.data = this.feedbackTypeDescList;
      } else if (type == "probStatus") {
        visit.data = this.probStatusList;
      }
      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;
        form.feedbackTypeDescName = null;
        form.feedbackTypeDesc = null;
        form.probStatus = null;
        form.probStatusName = null;
        form.feedbackTypeDescName = null;
        form.feedbackTypeDesc = null;
      } else if (visit.type == "purpose") {
        form.purpose = value.name;
      } else if (visit.type == "feedbackType") {
        form.feedbackType = value.value;
        form.feedbackTypeName = value.name;
      } else if (visit.type == "feedbackTypeDesc") {
        form.feedbackTypeDescName = value.name;
        form.feedbackTypeDesc = value.value;
      } else if (visit.type == "probStatus") {
        form.probStatus = value.value;
        form.probStatusName = 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;
    },
    beforeRead(file) {
      if (file.length) {
        file.map((item) => {
          const isLt2M = item.size / 1000 / 1000 < 5;
          if (!isLt2M) {
            this.$toast("上传文件大小不能超过 5MB");
            return false;
          }
        });
      } else {
        const isLt2M = file.size / 1000 / 1000 < 5;
        if (!isLt2M) {
          this.$toast("上传文件大小不能超过 5MB");
          return false;
        }
      }

      return true;
    },
    async uploadFile(file) {
      // console.log("uploadFile", file);
      try {
        file.status = "uploading";
        file.message = "上传中...";
        let tempName = file.file.name || "";
        const fileName = tempName && tempName.replace(/ /gi, "_");
        let key = new Date().getTime() + fileName;
        let objTemp = {
          filename: fileName,
          bucketName: this.bucket_name,
          postData: {
            filename: fileName,
            acl: "public-read",
            key: key,
            unknowValueField: [],
          },
        };

        const res = await policy(objTemp);
        const obj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          acl: "public-read",
          name: fileName,
        };

        let formData = new FormData();
        for (let key in obj) {
          formData.append(key, obj[key]);
        }
        formData.append("file", file.file);
        // console.log(formData);
        await axios({
          method: "post",
          url: this.ossUploadUrl,
          data: formData,
        });
        const uploadUrl = this.ossUploadUrl + "/" + key;
        file.url = uploadUrl;
        file.status = "done";
      } catch (e) {
        console.log(e);
        file.status = "failed";
        file.message = "上传失败";
        this.uploader = [];
      }
    },
    async afterRead(file) {
      // 上传头像
      const form = this.form;
      try {
        if (file && file.length) {
          file.forEach((item) => {
            this.uploadFile(item);
          });
        } else {
          this.uploadFile(file);
        }
      } catch (e) {
        console.log(e);
        return false;
      }
      // this.$toast.loading({
      //   duration: 0,
      //   forbidClick: true,
      //   message: "上传中...",
      // });
      //
      // try {
      //   file.status = "uploading";
      //   file.message = "上传中...";
      //   let formData = new FormData();
      //   formData.append("file", file.file);
      //   let res = await uploadFile(formData);
      //   this.$toast.clear();
      //   let result = res.data;
      //   if (result.code == 200) {
      //     file.status = "done";
      //     form.fileName = file.file.name;
      //     form.fileUrl = result.data.url;
      //     form.messageType = this.onCheckFileType(file.file.type);
      //   } else {
      //     file.status = "failed";
      //     file.message = "上传失败";
      //     this.$toast(result.msg);
      //     form.fileName = "";
      //     form.fileUrl = "";
      //     return false;
      //   }
      // } catch (err) {
      //   this.$toast.clear();
      //   file.status = "failed";
      //   file.message = "上传失败";
      //   form.fileName = "";
      //   form.fileUrl = "";
      //   return false;
      // }
    },
  },
};
</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: 0.06rem 0.14rem 0.04rem;
  font-size: 0.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: 0.17rem;
  height: 0.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;
}
.visiWrap {
  padding: 10px 16px;
  p {
    font-size: 0.16rem;
    line-height: 0.28rem;
    color: #646566;
    margin-bottom: 0.1rem;
  }
  .submit {
    color: red;
    font-size: 0.12rem;
  }
}
</style>