BJ_web_developers / wxgzh

Blame view

src/views/mySelf/feedback/suggestionBack.vue 2.77 KB
Edit Raw Normal View History
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
1
2
3
4
5
 
  <template>
    <div class="leftRightPadding">
      <p class="suggestion-tip">请选择您反馈的问题类型</p>
      <ul class="suggestionList">
        <li
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
6
 
          v-for="(i, index) in suggestionList"
555e2a0e   刘淇   续费会员卡 
7
8
 
          @click="chooseHandle(index,i.code)"
          :key="i.name"
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
9
10
 
          :class="{choosedActive: currentIndex==index}"
        >
555e2a0e   刘淇   续费会员卡 
11
 
          {{i.name}}
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
12
13
14
15
16
 
        </li>
      </ul>
  
      <div class="clear"></div>
555e2a0e   刘淇   续费会员卡 
17
 
      <mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model.trim="introduction" :attr="{ maxlength: 300 }"></mt-field>
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
18
19
 
  
      <div  style="margin-top: 34px">
6e6de4e6   刘淇   修改整体颜色 
20
 
        <mt-button type="primary" size="large" @click="saveHandle">提交</mt-button>
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
21
22
23
24
25
 
      </div>
    </div>
  </template>
  
  <script>
555e2a0e   刘淇   续费会员卡 
26
27
28
29
30
 
  import {
    getFeedbackType,
    saveFeedbackAndSuggest
  } from "@/api/suggest/suggest";
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
31
32
33
34
 
  export default {
    name: 'suggestionBack',
    data() {
      return {
555e2a0e   刘淇   续费会员卡 
35
 
        suggestionList: [],
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
36
 
        currentIndex: 0,
555e2a0e   刘淇   续费会员卡 
37
 
        feedbackCode:1,
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
38
39
40
 
        introduction: '',
      }
    },
555e2a0e   刘淇   续费会员卡 
41
42
43
 
    mounted(){
      this.getFeedbackType1()
    },
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
44
 
    methods: {
555e2a0e   刘淇   续费会员卡 
45
46
47
48
49
50
51
52
53
54
55
56
57
 
      // 获取反馈建议问题类型
      getFeedbackType1: function(){
        let jsondata =  this.$utils.commonParams();
        console.log(jsondata)
        jsondata.sign = this.$utils.signObject(jsondata);
        getFeedbackType(jsondata).then(data => {
          console.log(data)
          this.suggestionList = data.data
        })
      },
      // 反馈建议问题类型切换事件
      chooseHandle: function (i,code) {
        console.log(code)
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
58
 
        this.currentIndex = i
555e2a0e   刘淇   续费会员卡 
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
        this.feedbackCode = code
      },
      // 提交建议反馈事件
      saveHandle: function() {
        if(this.introduction){
          let jsondata =  this.$utils.commonParams();
          jsondata.feedbackCode = this.feedbackCode
          jsondata.suggestDesc = this.introduction
          jsondata.sign = this.$utils.signObject(jsondata);
          saveFeedbackAndSuggest(jsondata).then(data => {
            console.log(data)
            if (data.code == 0) {
              this.introduction = ''
              this.$vux.toast.text('提交反馈成功', "top");
            }else{
              this.$vux.toast.text(data.message, "top");
            }
          })
        }else{
          this.$vux.toast.text('请输入反馈内容后再提交', "top");
        }
94c1e6a3   liuqimichale   微信公众号 个人页面集合 
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
    .suggestion-tip {
      margin: 17px 0 13px;
      color: #6666;
    }
  
    .suggestionList {
  
      li {
        float: left;
        width: calc((100% - 19px) / 2);
        height: 33px;
        line-height: 33px;
        margin-bottom: 16px;
        border: 1px solid #B18181;
        text-align: center;
        font-size: 13px;
        &:nth-child(odd) {
          margin-right: 19px;
        }
      }
      .choosedActive {
        background: #F75959;
        border: 1px solid #A51E1E;
        color: #fff;
      }
  
    }
  </style>