HealthStudentWeb/src/views/myself/sendMessage.vue

<template>
  <div class="sendMessage">
    <van-nav-bar title="留言" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar>
    <div class="mt20"></div>
    <div class="textArea">
      <textarea
        placeholder="请输入内容"
        v-model.trim="inputVal"
        @input="inputChange"
        maxlength="70"
        @blur="fixScroll"
      />
      <span class="text">{{ this.num }}/70</span>
    </div>
    <div :class="[{ active: inputVal.length > 0 }, 'next']" @click="onSendCommand">发送</div>
  </div>
</template>

<script>
import { DeviceCommandModel } from '../../config/models';
import ToastService from '../../services/toast-service';
import DialogService from '../../services/dialog-service';
import APICommand from '@/api/command';
export default {
  data() {
    return {
      inputVal: '',
      num: 0,
      isSending: false
    };
  },
  methods: {
    //返回
    onNavBack() {
      this.$router.push({ name: this.$route.query.from ? this.$route.query.from : 'Myself' });
    },
    inputChange() {
      this.num = this.inputVal.length;
    },
    fixScroll() {
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.scrollTo(0, 0);
      }
    },
    onSendCommand() {
      // TODO 修改按钮的触发形式：输入字符串为空时，不可提交
      // if (this.inputVal === '') return;
      ToastService.loading();
      if (this.inputVal === '' && this.isSending == false) {
        console.log('not ok');
        ToastService.clear();
        DialogService.confirm({ title: '请输入内容' });
      }
      //   if (this.isSending) {
      //   return;
      // }
      this.isSending = false;
      /* let url = `/api/Command/SendCommand`; */
      let cmdValue = {
        Username: this.longName,
        Parameter: this.inputVal
      };
      /* let jsonData = {
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        serialNo: this.$store.getters.serialNo,
        cmdCode: DeviceCommandModel.sendMsg,
        cmdValue: JSON.stringify(cmdValue)
      }; */

      if (this.inputVal.length > 0) {
        /*  this.$axios
            .post(url, jsonData) */
        APICommand.sendCommand({
          deviceId: this.$store.getters.deviceId,
          userId: this.$store.getters.userId,
          serialNo: this.$store.getters.serialNo,
          cmdCode: DeviceCommandModel.sendMsg,
          cmdValue: JSON.stringify(cmdValue)
        })
          .then(res => {
            ToastService.clear();
            let item = res.data;
            if (item.stateCode == 1) {
              console.log(item);
              ToastService.clear();
              ToastService.success({ message: '发送成功' });
              this.inputVal = '';
              this.inputChange();
            } else {
              ToastService.clear();
              DialogService.confirm({
                title: '发送失败，请重新设置'
              });
              this.inputVal = '';
            }
          })
          .catch(err => console.log(err))
          .finally(() => (this.isSending = false));
      }
    }
  },
  created() {
    this.idCode = this.$route.query.code;
    this.longName = this.$route.query.longName;
  }
};
</script>
<style lang="scss" scoped>
.sendMessage {
  background-color: $background;

  .mt20 {
    height: 20px;
    background-color: $background;
  }

  .textArea {
    position: relative;
    .text {
      position: absolute;
      right: 30px;
      bottom: 30px;
      @include colorAndFont(#999, 24);
    }
  }

  .next {
    @include center();
    margin: 100px auto 0;
    width: 550px;
    height: 80px;
    border-radius: 10px;
    background: $next_green;
    color: #fff;
    font-size: 36px;

    &.active {
      background: $green;
    }

    &.res {
      margin: 140px auto 0;
    }
  }

  textarea {
    padding: 20px 30px;
    width: 100%;
    height: 354px;
    box-sizing: border-box;
    @include colorAndFont(#666, 34);
  }
}
</style>