Pad_New/src/pages/my/feedBack.vue

<template>
  <div class="page_feedBack">
    <van-sticky>
      <div class="feedBackTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName">意见反馈</span>
      </div>
    </van-sticky>
    <div class="feedBackTip">问题类型</div>
    <div class="typeBox">
      <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">使用操作</p>
      <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">产品建议</p>
      <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">产品缺陷</p>
      <p :class="Num == 4 ? 'active' : ''" @click="onClick(4)">投诉</p>
    </div>
    <div class="feedBackTip">反馈标题</div>
    <div>
      <van-field
        v-model="form.title"
        type="text"
        maxlength="30"
        placeholder="请填写标题30个字以内"
      />
    </div>
    <div class="feedBackTip">
      反馈内容
      <span style="font-size: .75rem;color:#ABABAB">（最多上传6张图片）</span>
    </div>
    <div class="feedBox">
      <van-field
        v-model="form.content"
        rows="3"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入反馈信息..."
        show-word-limit
      />
      <div class="uploaderBox">
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="6"
          :data="uploadFileData"
          :before-read="beforeRead"
          :after-read="afterRead"
        />
      </div>
    </div>
    <div class="feedBackTip">
      联系方式（手机号）
      <span style="color:#FF5400">*</span>
    </div>
    <div>
      <van-field v-model="form.phone" type="tel" placeholder="请输入联系方式" />
    </div>
    <div class="feedBackTip">接受电话处理时间</div>
    <div class="typeBox1">
      <p :class="time == 1 ? 'active' : ''" @click="clickTime(1)">任何时间</p>
      <p :class="time == 2 ? 'active' : ''" @click="clickTime(2)">
        09:00~12:00
      </p>
      <p :class="time == 3 ? 'active' : ''" @click="clickTime(3)">
        13:00~18:00
      </p>
      <p :class="time == 4 ? 'active' : ''" @click="clickTime(4)">从不接受</p>
    </div>
    <div>
      <div class="submitBtn" v-show="show">提交反馈</div>
      <div class="submitBtnSuccess" @click="submitFeed">提交反馈</div>
    </div>
  </div>
</template>

<script>
import { submitFeed } from "@/api/patient/patient";
import { getToken } from "@/api/qiniu";
import { getFileExtension } from "@/utils/tools";
export default {
  data() {
    return {
      message: "",
      fileList: [],
      tel: "",
      Num: 1,
      time: 1,
      show: false,
      form: {
        admin_user_id: "",
        title: "",
        content: "",
        phone: "",
        time: "",
        images: ""
      },
      qiniuDomain: "https://images.shengws.com/",
      uploadFileData: { token: "", key: "" }
    };
  },
  methods: {
    onClick(id) {
      if (id == 1) {
        this.Num = 1;
      } else if (id == 2) {
        this.Num = 2;
      } else if (id == 3) {
        this.Num = 3;
      } else if (id == 4) {
        this.Num = 4;
      }
    },
    clickTime(id) {
      if (id == 1) {
        this.time = 1;
      } else if (id == 2) {
        this.time = 2;
      } else if (id == 3) {
        this.time = 3;
      } else if (id == 4) {
        this.time = 4;
      }
    },
    submitFeed() {
      if (this.form.phone === "") {
        this.$toast("手机号不能为空");
        return false;
      }
      const params = {
        question: this.Num,
        title: this.form.title,
        content: this.form.content,
        phone: this.form.phone,
        time: this.time,
        admin_user_id: this.form.admin_user_id
      };
      submitFeed(params).then(response => {
        if (response.data.state === 1) {
          var feedback = response.data.data.feedback;
          this.$toast("保存成功");
          this.form.title = "";
          this.form.content = "";
          this.form.phone = "";
          this.$router.push("/newMy");
        }
      });
    },
    afterRead(file) {
      console.log("file", file);
    },
    // beforeRead(file) {
    //   console.log("上传", file);
    //  console.log(file.name);
    //  this.form.images = this.qiniuDomain + file.name;
    //  console.log("图片", this.form.images);
    // },
    beforeRead(file) {
      console.log("file", file);
      var date = new Date();
      var ext = getFileExtension(file.name);
      var key =
        date.getFullYear() +
        (date.getMonth() + 1) +
        date.getDate() +
        date.getHours() +
        date.getMinutes() +
        date.getSeconds() +
        "_o_" +
        file.lastModified +
        "." +
        ext;
      const _self = this;
      return new Promise((resolve, reject) => {
        getToken()
          .then(response => {
            const token = response.data.data.uptoken;
            console.log("token2是什么?", token);
            _self._data.uploadFileData.token = token;
            _self._data.uploadFileData.key = key;
            resolve(true);
          })
          .catch(err => {
            reject(false);
          });
      });
    }
  },
  created() {
    var id = this.$route.query.id;
    this.form.admin_user_id = id;
  }
};
</script>

<style lang="scss" scoped>
.page_feedBack {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #eeeeee;
  .feedBackTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .aboutImg {
    padding: 0 0.75rem;
    height: 10.0625rem;
    margin: 1rem 0 0.3125rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .feedBackTip {
    height: 2.375rem;
    line-height: 2.375rem;
    padding-left: 0.75rem;
    font-size: 0.875rem;
    color: #696969;
  }
  .feedBox {
    min-height: 11.875rem;
    background: #fff;
    .uploaderBox {
      margin: 1.25rem 0 0 1rem;
    }
  }
  .typeBox {
    display: flex;
    justify-content: space-around;
    p {
      width: 5rem;
      height: 1.875rem;
      line-height: 1.875rem;
      text-align: center;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 0.875rem;
      color: #696969;
      border-radius: 5px;
      cursor: pointer;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .typeBox1 {
    display: flex;
    justify-content: space-around;
    p {
      // width: 5rem;
      // height: 1.875rem;
      // line-height: 1.875rem;
      padding: 8px 6px;
      text-align: center;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 0.875rem;
      color: #696969;
      border-radius: 5px;
      cursor: pointer;
    }
    .active {
      background: rgba(51, 138, 251, 1);
      color: #fff;
      border: 1px solid #338afb;
    }
  }
  .submitBtn {
    width: 80%;
    height: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    background: #c5c5c5;
    color: #fff;
    margin: 1.25rem auto;
    border-radius: 1.875rem;
  }
  .submitBtnSuccess {
    width: 80%;
    height: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    background: #338afb;
    color: #fff;
    margin: 1.25rem auto;
    border-radius: 1.875rem;
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>