opinion.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view>
  3. <view class="top">
  4. <view class="title">
  5. <text></text>
  6. 请选择你的意见类型
  7. </view>
  8. <view class="content">
  9. <radio-group @change="radioChange">
  10. <label class="radio" color="#000000" v-for="(item, index) in list" :key="item.value">
  11. <radio color="#4CD964" style="transform:scale(0.7)" :value="item.name" />
  12. <text>{{ item.name }}</text>
  13. </label>
  14. </radio-group>
  15. </view>
  16. <view class="textarea"><textarea v-model="info.content" placeholder="请详细描述你的问题" class="text" placeholder-class="pl" /></view>
  17. <button type="primary" class="button" @tap="post">立即提交</button>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import helper from '../../common/helper.js';
  23. import api from '../../common/api.js';
  24. export default {
  25. data() {
  26. return {
  27. list: [{
  28. name:'客户体验差',
  29. },
  30. {
  31. name:'路线不清楚',
  32. },
  33. {
  34. name:'广告太多',
  35. },
  36. {
  37. name:'找不到需要的',
  38. },
  39. {
  40. name:'推送太频繁',
  41. },
  42. {
  43. name:'其他',
  44. }],
  45. info: {
  46. type: '',
  47. content: ''
  48. }
  49. };
  50. },
  51. methods: {
  52. radioChange(e) {
  53. this.info.type = e.detail.value;
  54. },
  55. async post() {
  56. if (!this.info.type) {
  57. helper.toast('请选择意见类型');
  58. return false;
  59. }
  60. if (!this.info.content) {
  61. helper.toast('请详细描述问题');
  62. return false;
  63. }
  64. let res = await api.addFeedback(this.info);
  65. if (res.code == 1) {
  66. uni.showModal({
  67. title: '提示',
  68. content: res.msg,
  69. success: res => {
  70. if (res.confirm) {
  71. uni.navigateBack({
  72. url:'/pages/mine/setting'
  73. })
  74. }
  75. }
  76. });
  77. } else {
  78. helper.toast(res.msg);
  79. }
  80. }
  81. }
  82. };
  83. </script>
  84. <style lang="scss" scoped>
  85. .top {
  86. border-top: 10upx solid #f7f8fa;
  87. padding: 20upx 5%;
  88. font-size: 34upx;
  89. .title {
  90. font-weight: 800;
  91. text {
  92. margin-right: 10upx;
  93. border: 2px solid #32c45e;
  94. }
  95. }
  96. }
  97. .content {
  98. margin-top: 20upx;
  99. }
  100. .textarea {
  101. padding: 20upx;
  102. }
  103. .radio {
  104. display: block;
  105. padding: 20upx;
  106. font-size: 28upx;
  107. }
  108. .text {
  109. width: 93%;
  110. padding: 20upx;
  111. background-color: #f7f8fa;
  112. border-radius: 10upx;
  113. font-size: 26upx;
  114. }
  115. .pl {
  116. font-size: 24upx;
  117. }
  118. .button {
  119. width: 60%;
  120. border-radius: 50upx;
  121. margin-top: 40upx;
  122. background-color: #32c45e;
  123. }
  124. </style>