yf_xsn/discern/src/components/addMeg/addMeg.vue

<!--  -->
<template>
  <div class="addMeg_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="addMeg_box_head">
      <!-- 返回图标 -->
      <div class="head_div" @click="goBack()">
        <img src="../../assets/image/return.png" alt class="head_div_img" />
      </div>

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">新增留言</span>
      </div>
    </div>

    <!-- 内容 -->
    <div class="addMeg_box_main">
      <!-- 反馈信息 -->
      <div class="addMeg_box_main_meg">
        <!-- 标题 -->
        <div class="addMeg_box_main_meg_title">反馈信息：</div>

        <!-- 输入框 -->
        <el-input maxlength="100" type="textarea" placeholder="请输入需要反馈的问题或建议" v-model="textarea1"></el-input>
        <div class="addMeg_IptNum">{{ this.textarea1.length }} / 100</div>
      </div>

      <!-- 回访 -->
      <div class="addMeg_box_main_visit">
        <!-- 标题 -->
        <div class="addMeg_box_main_visit_title">如果方便,请留下您的手机号</div>

        <!-- 输入框 -->
        <el-input type="number" placeholder="请输入手机号" v-model="input2" maxlength="6" clearable></el-input>
      </div>

      <!-- 提交按钮 -->
      <el-button @click="addAxios()" type="success">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      textarea1: "",
      input2: "",
      isClick: true //点赞开关
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
    textarea1(val) {
      this.textarea1 = this.textarea1.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, "");
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回到主页
    goBack() {
      let _this = this;
      // _this.$router.push("/message");
      _this.$router.replace("/message");
    },

    //点击上传反馈
    addAxios() {
      let _this = this;
      let postData = _this.$qs.parse({
        content: _this.textarea1,
        photo: _this.input2
      });
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "post",
            url: "bigservers/user_leaving",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                message: "提交成功,您的意见我们会尽快回复",
                type: "success",
                duration: 1000
              });
              _this.textarea1 = "";
              _this.input2 = "";
              _this.$router.replace("/message");
              const timeA = setInterval(() => {
                location.reload();
              }, 1500);
            } else if (res.data === 1) {
              this.$message({
                message: "手机号码格式不正确",
                type: "error",
                duration: 1000
              });
            }
          })
          .catch(error => {
            this.$message({
              message: "提交失败",
              type: "error",
              duration: 1000
            });
          });

        setTimeout(function() {
          _this.isClick = true;
        }, 1500);
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/addMeg.scss";
</style>