mayou/htmldev/cps/src/views/feedback/index.vue

<template>
  <van-form
    class="fbt-form"
    @submit="debounceSubmit">
    <van-field
      v-model="content"
      name="content"
      rows="8"
      autosize
      type="textarea"
      placeholder="请输入你宝贵的意见"/>
    <van-button
      block
      type="info"
      native-type="submit">提交
    </van-button>
  </van-form>
</template>

<script>
import { Form, Field, Button, Toast } from 'vant'
import { apiFeedback } from './api/api'
import _ from 'lodash'

export default {
  components: {
    'van-form': Form,
    'van-field': Field,
    'van-button': Button
  },
  data () {
    return {
      content: ''
    }
  },
  created () {
    this.debounceSubmit = _.debounce(this.onSubmit, 1000)
  },
  methods: {
    async onSubmit (values) {
      const vm = this
      const { content } = values
      if (!content.length) {
        Toast('反馈内容不能为空')
        return
      }
      try {
        const { status, msg } = await apiFeedback(this.content)
        if (status) {
          Toast({
            message: '反馈成功，工作人员将会\n认真查看你的反馈',
            onClose () {
              vm.$router.replace({ name: 'Mine' })
            }
          })
        } else {
          Toast(msg)
        }
      } catch (e) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.fbt-form {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  background: #f4f5f5;

  ::v-deep .van-cell {
    width: 346px;
    border-radius: 12px;
    background: #fefefe;
    box-shadow: 2px 2px 6px 5px #f4f5f5;

    textarea {
      width: 100%;
      min-height: 172px;
      font-size: 14px;
      color: #333;
      word-break: break-all;
      resize: none;
      outline: 0 none;
      overflow: hidden;
      background: transparent;
      -webkit-text-fill-color: #333;
      opacity: 1;

      &::-webkit-input-placeholder {
        color: #999;
        -webkit-text-fill-color: #999;
        opacity: 1;
      }
    }
  }

  ::v-deep .van-button {
    width: 346px;
    margin-top: 30px;
    border: none;
    color: #333333;
    background: #f8d65a;

    .van-button__text {
      font-size: 15px;
    }
  }
}
</style>