index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <view class="feedback-container">
  3. <view class="form-container">
  4. <input v-model="formData.companyName" placeholder="公司名称" class="input-field" />
  5. <input v-model="formData.contactPerson" placeholder="联系人" class="input-field" />
  6. <input v-model="formData.contactPhone" placeholder="联系电话" class="input-field" />
  7. <textarea v-model="formData.opinion" placeholder="您的意见" class="textarea-field" style="width: 93%;" />
  8. <button @click="submitForm" class="submit-btn">提交</button>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. formData: {
  17. companyName: '',
  18. contactPerson: '',
  19. contactPhone: '',
  20. opinion: ''
  21. },
  22. apiUrl: 'https://ylaiapi.raycos.com.cn'
  23. }
  24. },
  25. onLoad() {
  26. },
  27. methods: {
  28. validateForm() {
  29. if (!this.formData.companyName.trim()) {
  30. uni.showToast({
  31. title: '请输入公司名称',
  32. icon: 'none'
  33. })
  34. return false
  35. }
  36. if (!this.formData.contactPerson.trim()) {
  37. uni.showToast({
  38. title: '请输入联系人',
  39. icon: 'none'
  40. })
  41. return false
  42. }
  43. if (!/^1\d{10}$/.test(this.formData.contactPhone)) {
  44. uni.showToast({
  45. title: '请输入有效的联系电话',
  46. icon: 'none'
  47. })
  48. return false
  49. }
  50. if (!this.formData.opinion.trim()) {
  51. uni.showToast({
  52. title: '请输入您的意见',
  53. icon: 'none'
  54. })
  55. return false
  56. }
  57. return true
  58. },
  59. async submitForm() {
  60. if (this.validateForm()) {
  61. try {
  62. uni.showLoading({
  63. title: '提交中...'
  64. });
  65. const result = await this.sendRequest();
  66. if (result.success) {
  67. this.resetForm();
  68. uni.showToast({
  69. title: '提交成功!',
  70. icon: 'success'
  71. });
  72. } else {
  73. throw new Error(result.message || '提交失败,请重试');
  74. }
  75. } catch (error) {
  76. console.error('提交失败', error);
  77. uni.showToast({
  78. title: error.message || '提交失败,请重试',
  79. icon: 'none'
  80. });
  81. } finally {
  82. uni.hideLoading();
  83. }
  84. }
  85. },
  86. sendRequest() {
  87. return new Promise((resolve) => {
  88. uni.request({
  89. url: this.apiUrl + '/complaint/insertComplaint',
  90. method: 'POST',
  91. data: {
  92. name: this.formData.contactPerson,
  93. phone: this.formData.contactPhone,
  94. corporate_name: this.formData.companyName,
  95. content: this.formData.opinion,
  96. status: 5
  97. },
  98. header: {
  99. 'content-type': 'application/x-www-form-urlencoded'
  100. },
  101. success: (res) => {
  102. if (res.statusCode === 200 && res.data && res.data.status == 200) {
  103. resolve({
  104. success: true
  105. });
  106. } else {
  107. resolve({
  108. success: false,
  109. message: res.data?.message || '提交失败,请重试'
  110. });
  111. }
  112. },
  113. fail: (err) => {
  114. resolve({
  115. success: false,
  116. message: '网络请求失败'
  117. });
  118. }
  119. });
  120. });
  121. },
  122. resetForm() {
  123. this.formData = {
  124. companyName: '',
  125. contactPerson: '',
  126. contactPhone: '',
  127. opinion: ''
  128. };
  129. }
  130. }
  131. }
  132. </script>
  133. <style scoped>
  134. .feedback-container {
  135. background-color: #0066cc;
  136. min-height: 100vh;
  137. padding: 20px;
  138. }
  139. .header {
  140. color: white;
  141. font-size: 18px;
  142. margin-bottom: 20px;
  143. }
  144. .form-container {
  145. background-color: transparent;
  146. }
  147. .input-field,
  148. .textarea-field {
  149. margin-bottom: 15px;
  150. padding: 12px;
  151. background-color: white;
  152. border: none;
  153. border-radius: 5px;
  154. font-size: 14px;
  155. }
  156. .textarea-field {
  157. height: 120px;
  158. }
  159. .submit-btn {
  160. width: 100%;
  161. background-color: #00aaff;
  162. color: white;
  163. border: none;
  164. padding: 12px;
  165. border-radius: 5px;
  166. font-size: 16px;
  167. margin-top: 10px;
  168. }
  169. </style>