feedback.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <view :style="[mainStyle]">
  3. <!--mine/feedback/feedback.wxml-->
  4. <view class="box">
  5. <view class="tit">您的问题或建议:</view>
  6. <textarea type="text" name="text" placeholder="请简要描述你在使用产品过程中的问题和意见" placeholder-class="placeholder" class="textarea" @input="intText"></textarea>
  7. </view>
  8. <view class="box">
  9. <view class="tit">您的联系方式:</view>
  10. <input type="text" name="name" placeholder="姓名" placeholder-class="placeholder" class="ipt" @input="intName"></input>
  11. <input type="number" name="mobile" placeholder="手机号" placeholder-class="placeholder" class="ipt" @input="intMobile"></input>
  12. <view class="tip">请留下您的联系方式,以便我们能够方便了解问题以及您反馈问题结果。紧急问题可拨打{{phone ? phone : '客服电话'}},获得及时帮助</view>
  13. </view>
  14. <button class="submit" @tap="confirm">立即反馈</button>
  15. </view>
  16. </template>
  17. <script>
  18. // mine/feedback/feedback.js
  19. const app = getApp();
  20. const req = require("../../utils/request.js");
  21. const util = require("../../utils/util.js");
  22. export default {
  23. data() {
  24. return {
  25. showPage:false,
  26. mainStyle: app.globalData.mainStyle,
  27. phone: '',
  28. text: '',
  29. name: '',
  30. mobile: ''
  31. };
  32. },
  33. components: {},
  34. props: {},
  35. onLoad: function (options) {
  36. this.getData();
  37. },
  38. methods: {
  39. intText(e) {
  40. this.setData({
  41. text: e.detail.value
  42. });
  43. },
  44. intName(e) {
  45. this.setData({
  46. name: e.detail.value
  47. });
  48. },
  49. intMobile(e) {
  50. this.setData({
  51. mobile: e.detail.value
  52. });
  53. },
  54. getData() {
  55. req.getRequest('/api/aboutAs', {}, res => {
  56. this.setData({
  57. phone: res.hotLine
  58. });
  59. });
  60. },
  61. confirm() {
  62. let that = this;
  63. if (!that.text) {
  64. req.msg('请简要描述你在使用产品过程中的问题和意见');
  65. return false;
  66. }
  67. if (!that.name) {
  68. req.msg('请输入您的姓名');
  69. return false;
  70. }
  71. if (!that.mobile) {
  72. req.msg('请输入您的手机号');
  73. return false;
  74. }
  75. if(!util.isMobile(that.mobile)) return req.msg('请输入正确的手机号')
  76. req.postRequest('/api/feedback', {
  77. name: that.name,
  78. mobile: that.mobile,
  79. text: that.text
  80. }, res => {
  81. req.msg('您的问题反馈已提交,我们会尽快与您联系!');
  82. setTimeout(res=>{
  83. that.text = '';
  84. that.name = '';
  85. that.mobile = '';
  86. },300)
  87. });
  88. }
  89. }
  90. };
  91. </script>
  92. <style>
  93. @import "./feedback.css";
  94. </style>