src/views/mySelf/feedback/suggestionBack.vue

<template>
  <div class="leftRightPadding">
    <p class="suggestion-tip">请选择您反馈的问题类型</p>
    <ul class="suggestionList">
      <li
        @click="chooseHandle(index)"
        v-for="(i, index) in suggestionList"
        :key="i.code"
        :class="{choosedActive: currentIndex==index}"
      >
        {{i.name}}
      </li>
    </ul>
    <van-field
      v-model="introduction"
      rows="2"
      autosize
      type="textarea"
      maxlength="300"
      placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）"
      show-word-limit
    />
    <div style="margin-top: 34px">
      <van-button type="info" block @click="submitCon">提交</van-button>
    </div>
  </div>
</template>
<script>
import { saveFeedbackAndSuggest, getFeedbackType } from "@/api/getUserIfo";
export default {
  name: "suggestionBack",
  data() {
    return {
      suggestionList: [],
      currentIndex: 0,
      introduction: ""
    };
  },
  created() {
    this.getFeedbackType();
  },
  methods: {
    getFeedbackType() {
      let jsondata = {};
      jsondata.sign = this.$utils.signObject(jsondata);
      getFeedbackType(jsondata).then(response => {
        console.log(response);
        this.suggestionList = response.data;
      });
    },
    chooseHandle: function(i) {
      console.log(i);
      this.currentIndex = i;
    },
    submitCon() {
      if (this.introduction) {
        let jsondata = {
          feedbackCode: this.suggestionList[this.currentIndex].code,
          suggestDesc: this.introduction
          // token:'99ecd32eed1b4ebea71bc73b0aabbb99'
        };
        jsondata.sign = this.$utils.signObject(jsondata);
        saveFeedbackAndSuggest(jsondata).then(response => {
          console.log(response);
          if (response.code == 0) {
            this.$toast("提交成功");
          }
          // this.phoneNum = response.data.phoneNum
        });
      } else {
        this.$toast("请填写建议反馈内容");
      }
    }
  }
};
</script>
<style scoped lang="scss">
  .suggestion-tip {
    margin: 17px 0 13px;
    color: #6666;
  }
  .suggestionList {
    overflow: hidden;
    li {
      float: left;
      width: calc((100% - 19px) / 2);
      height: 45px;
      line-height: 45px;
      margin-bottom: 16px;
      border: 1px solid #2282C5;
      text-align: center;
      font-size: 16px;
      border-radius: 4px;
      color: #2282C5;
      &:nth-child(odd) {
        margin-right: 19px;
      }
    }
    .choosedActive {
      background: linear-gradient(180deg, #2282C5 0%, #4B8EF1 58%, #63BEFD 100%);
      color: #fff;
      border: 0;
    }
  }
</style>