与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

147 lines
2.9 KiB

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. formData: {
  7. petType: '',
  8. petAge: '',
  9. petGender: '',
  10. symptoms: '',
  11. images: []
  12. },
  13. symptomsLength: 0,
  14. isSubmitting: false,
  15. isFormValid: false
  16. },
  17. /**
  18. * 生命周期函数--监听页面加载
  19. */
  20. onLoad(options) {
  21. // 初始化表单验证
  22. this.checkFormValidity();
  23. },
  24. // 宠物类型输入
  25. onPetTypeInput(e) {
  26. const value = e.detail.value;
  27. this.setData({
  28. 'formData.petType': value
  29. }, () => {
  30. this.checkFormValidity();
  31. });
  32. },
  33. // 宠物年龄输入
  34. onPetAgeInput(e) {
  35. const value = e.detail.value;
  36. this.setData({
  37. 'formData.petAge': value
  38. }, () => {
  39. this.checkFormValidity();
  40. });
  41. },
  42. // 选择性别
  43. selectGender(e) {
  44. const value = e.currentTarget.dataset.value;
  45. this.setData({
  46. 'formData.petGender': value
  47. }, () => {
  48. this.checkFormValidity();
  49. });
  50. },
  51. // 症状描述输入
  52. onSymptomsInput(e) {
  53. const value = e.detail.value;
  54. this.setData({
  55. 'formData.symptoms': value,
  56. symptomsLength: value.length
  57. }, () => {
  58. this.checkFormValidity();
  59. });
  60. },
  61. // 选择图片
  62. chooseImage() {
  63. if (this.data.formData.images.length >= 3) {
  64. wx.showToast({
  65. title: '最多上传3张图片',
  66. icon: 'none'
  67. });
  68. return;
  69. }
  70. wx.chooseImage({
  71. count: 3 - this.data.formData.images.length,
  72. sizeType: ['compressed'],
  73. sourceType: ['album', 'camera'],
  74. success: (res) => {
  75. const tempFilePaths = res.tempFilePaths;
  76. const images = [...this.data.formData.images, ...tempFilePaths];
  77. this.setData({
  78. 'formData.images': images
  79. });
  80. }
  81. });
  82. },
  83. // 移除图片
  84. removeImage(e) {
  85. const index = e.currentTarget.dataset.index;
  86. const images = [...this.data.formData.images];
  87. images.splice(index, 1);
  88. this.setData({
  89. 'formData.images': images
  90. });
  91. },
  92. // 预览图片
  93. previewImage(e) {
  94. const current = e.currentTarget.dataset.url;
  95. const urls = e.currentTarget.dataset.urls;
  96. wx.previewImage({
  97. current,
  98. urls
  99. });
  100. },
  101. // 检查表单有效性
  102. checkFormValidity() {
  103. const { petType, petAge, petGender, symptoms } = this.data.formData;
  104. const isValid = petType.trim() && petAge && petGender && symptoms.trim();
  105. this.setData({
  106. isFormValid: !!isValid
  107. });
  108. },
  109. // 表单提交
  110. submitForm(e) {
  111. if (this.data.isSubmitting || !this.data.isFormValid) {
  112. return;
  113. }
  114. this.setData({
  115. isSubmitting: true
  116. });
  117. // 模拟提交
  118. setTimeout(() => {
  119. wx.showToast({
  120. title: '提交成功',
  121. icon: 'success',
  122. duration: 1500,
  123. success: () => {
  124. setTimeout(() => {
  125. wx.navigateTo({
  126. url: '/pagesA/pages/askingSy/askingSy',
  127. })
  128. }, 1500);
  129. }
  130. });
  131. }, 1500);
  132. }
  133. });