抽奖页面 实物收货信息填写添加校验

src/pages/lottery/detail.vue

@@ -4,22 +4,19 @@
       <uni-icons type="back" style="font-size: 48rpx" @click="getBack" />
       <text class="title">积分抽奖</text>
     </view>
-    <view class="form">
-      <view class="tips">请检查您的信息填写正确，确认后无法更改噢</view>
-      <view class="form-item">
-        <view>收货人</view>
+    <uni-forms class="form" ref="form" :modelValue="form" :rules="rules" label-width="85px"
+      label-position="top" validateTrigger="bind">
+      <uni-forms-item label="收货人：" name="receiveName" required>
         <input type="text" v-model="form.receiveName" placeholder="请输入收货人姓名" />
-      </view>
-      <view class="form-item">
-        <view>手机号</view>
+      </uni-forms-item>
+      <uni-forms-item label="手机号：" name="receivePhone" required>
         <input type="number" v-model="form.receivePhone" placeholder="请输入手机号" />
-      </view>
-      <view class="form-item">
-        <view>收货地址</view>
+      </uni-forms-item>
+      <uni-forms-item label="收货地址：" name="receiveAddress" required>
         <textarea v-model="form.receiveAddress" placeholder="请输入收货地址" />
-      </view>
+      </uni-forms-item>
       <button @click="getSubmit" :disabled="disabled">确认</button>
-    </view>
+    </uni-forms>
   </view>
 </template>
 
@@ -33,7 +30,27 @@ export default {
       // 表单
       form: {},
       // 防重复点击
-      disabled: false
+      disabled: false,
+      // 校验
+      rules: {
+        receiveName: {
+          rules: [{
+            required: true, errorMessage: '请输入收货人姓名'
+          }]
+        },
+        receivePhone: {
+          rules: [{
+            required: true, errorMessage: '请输入手机号'
+          }, {
+            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, errorMessage: '请输入正确的手机号'
+          }]
+        },
+        receiveAddress: {
+          rules: [{
+            required: true, errorMessage: '请输入收货地址'
+          }]
+        }
+      }
     }
   },
   onLoad(e) {
@@ -52,35 +69,27 @@ export default {
 
     // 确定
     getSubmit() {
-      if (!this.form.receiveName) {
-        uni.showToast({
-          icon: 'none',
-          title: '请输入收货人姓名'
-        })
-      } else if (!this.form.receivePhone) {
-        uni.showToast({
-          icon: 'none',
-          title: '请输入手机号'
-        })
-      } else if (!this.form.receiveAddress) {
-        uni.showToast({
-          icon: 'none',
-          title: '请输入收货地址'
-        })
-      } else {
-        this.disabled = true
-        receive(getApp().globalData.userInfo, this.form).then(res => {
-          if (res.data.code === 0) {
-            uni.showToast({
-              title: '提交成功！',
-              duration: 3000
-            })
-            setTimeout(() => {
-              this.getBack()
-            }, 3000)
-          }
-        })
-      }
+      this.disabled = true
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          receive(getApp().globalData.userInfo, this.form).then(res => {
+            if (res.data.code === 0) {
+              uni.showToast({
+                title: '提交成功！',
+                duration: 3000
+              })
+              setTimeout(() => {
+                this.getBack()
+              }, 3000)
+            }else{
+              uni.showToast({
+                icon: 'error',
+                title: res.data.message,
+              })
+            }
+          })
+        }
+      })
     }
   }
 }
@@ -134,7 +143,7 @@ export default {
     button {
       background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
       color: #fff;
-      width: 480rpx;
+      // width: 480rpx;
       height: 80rpx;
       line-height: 80rpx;
       border-radius: 50rpx;