<template>
 <div class="introduction">
     <h2 @click="back"><</h2>
     <h1>自我介绍</h1>
     <van-field
  v-model="message"
  rows="6"
  autosize

  type="textarea"
  maxlength="100"
  placeholder="介绍自己,讲述您的故事~"
  show-word-limit
  @input="getIntroduction"
/>
 <div class="btn" @click="go">下一步</div>
 </div>
</template>
<script>

export default {
  name: 'introduction',
  components: {

  },
  data () {
    return {
      message: ''
    }
  },
   methods:{
     back () {
         this.$router.go(-1)
     },
     go () {
          this.$router.push('condition')
     },
     getIntroduction () {
        let that = this
        let params = {
           'about_me': that.message
        }
        let qs = require('qs')
        let data = qs.stringify(params)
        that.$axios.post('/api/Register/register_is_fourth', data).then((res) => {
              that.message = res.data
              console.log(that.message)
        }).catch((err) => {
             console.log(err)
        })
     }

   }
}
</script>
<style lang="scss" scoped>
  .introduction{
    width:100%;
    height:100%;
    background:#11A7FC;
    padding-top:5%;
    padding-left:5%;
     h2{
      font-size:.2rem;
      color:#fff;
      margin-bottom:.5rem;
    }
    h1{
      font-size:.28rem;
      color:#ccc;
    }
    .van-field{
      margin-top:.3rem;
      width:90%;
      height:1.9rem;
      border-radius:.2rem;
    }
    .btn{
      width:90%;
      height:.4rem;
      background:#fff;
      font-size:.2rem;
      color:#11A7FC;
      line-height:.4rem;
      text-align:center;
      margin-top:.9rem;
      font-weight:bold;
      border-radius:.2rem;
    }
  }
</style>