index.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="意见反馈" :shadow="0" :showback="true"></tm-menubars>
  5. <div class="zhuti">
  6. <tm-sheet class="kuang" style="padding-bottom: 70px !important;">
  7. <view style="width: 94%;margin:0 auto;">
  8. <view class="pt-20 pr-30 text-size-g dianz text-align-right">
  9. <image src="/static/img/59.png" mode="widthFix"></image>
  10. <text class="text-white text-size-m">意见建议记录</text>
  11. </view>
  12. <view class="mt-20 ml-15">
  13. <text class="text-white text-size-lg">*请选择反馈问题的类型</text>
  14. </view>
  15. <view class="mt-40" @click="aa(1)">
  16. <tm-checkbox v-model="checked1" label="使用投诉"></tm-checkbox>
  17. <text class="text-size-s fr mr-50 mt-20">联系客服</text>
  18. </view>
  19. <view @click="aa(2)">
  20. <tm-checkbox v-model="checked2" label="交易问题"></tm-checkbox>
  21. <text class="text-size-s fr mr-50 mt-20">联系客服</text>
  22. </view>
  23. <view @click="aa(3)">
  24. <tm-checkbox v-model="checked3" label="软件使用问题"></tm-checkbox>
  25. <text class="text-size-s fr mr-50 mt-20">功能异常、产品建议等</text>
  26. </view>
  27. <view class="mt-20 ml-15 ">
  28. <text class="text-white text-size-lg">*请发表您的意见</text>
  29. <tm-input class="shuru mt-30" :vertical="true" :height="200" input-type="textarea" placeholder="请发表您的意见" v-model="beizu" ></tm-input>
  30. </view>
  31. </view>
  32. </tm-sheet>
  33. <tm-button :round="24" class="sao mb-40 mt-40" block>提交</tm-button>
  34. </div>
  35. <!-- 弹出层消息 -->
  36. <tm-message ref="toast"></tm-message>
  37. </view>
  38. </template>
  39. <script>
  40. import{myRequest} from '@/api/request.js'
  41. export default {
  42. data() {
  43. return {
  44. checked1:false,
  45. checked2:false,
  46. checked3:false,
  47. beizu:''
  48. };
  49. },
  50. onLoad() {
  51. },
  52. created() {
  53. this.sys = uni.getSystemInfoSync();
  54. },
  55. methods: {
  56. aa(num){
  57. if(num==1){
  58. this.checked1=true;
  59. this.checked2=false;
  60. this.checked3=false;
  61. }else if(num==2){
  62. this.checked1=false;
  63. this.checked2=true;
  64. this.checked3=false;
  65. }else if(num==3){
  66. this.checked1=false;
  67. this.checked2=false;
  68. this.checked3=true;
  69. }
  70. },
  71. },
  72. }
  73. </script>
  74. <style lang="scss">
  75. /deep/ .tm-menubars .body{
  76. background-color: #1b1b1b !important;
  77. }
  78. /deep/ .zhuti{padding: 10px 10px;}
  79. /deep/ .kuang{margin:0 !important;padding: 0px !important;}
  80. .dianz image{width: 30px;vertical-align: middle;margin-right: 10px;}
  81. /deep/ .tm-checkbox-boey-label{color: white !important;}
  82. /deep/ .border-primary-a-1{border-color: #303440;background: #303440;}
  83. /deep/ .shuru .grey-darken-5{
  84. background-color: #0d0d0d!important;
  85. padding: 0px !important;
  86. }
  87. .shuru{border:1px solid #303030;border-radius: 10px !important;padding:0px;background: #0D0D0D !important;}
  88. /deep/ .sao uni-button{background-color: #303440 !important;width: 88% !important;}
  89. </style>