自定义验证表单

pages.json

@@ -72,7 +72,8 @@
 				{
 					"path": "order/detail",
 					"style": {
-						"navigationBarTitleText": "订单详情"
+						"navigationBarTitleText": "订单详情",
+						"navigationBarBackgroundColor": "#007AFF"
 					}
 				},
 				{

pages/my/index.vue

@@ -190,11 +190,9 @@
 		flex-direction: column;
 		width: 100vw;
 		height: 100vh;
-		background-image: linear-gradient(to top, rgba(241, 241, 241, 1), rgba(0, 122, 255, 1));
+		background-image: linear-gradient(to top, rgba(241, 241, 241, 1), rgba(241, 241, 241, 1), rgba(0, 122, 255, 1));
 
 		.one {
-			height: 45vw;
-
 			.one_1 {
 				padding: 4vw;
 

pagesHome/info/index.vue

@@ -183,6 +183,7 @@
 							font-size: var(--font12Size);
 							padding: 3px 5px;
 							color: var(--mainColor);
+							border-radius: 5px;
 							background-color: mediumseagreen;
 						}
 
@@ -190,6 +191,7 @@
 							font-size: var(--font12Size);
 							padding: 3px 5px;
 							color: var(--mainColor);
+							border-radius: 5px;
 							background-color: red;
 						}
 					}

pagesIndex/order/order.vue

@@ -85,17 +85,17 @@
 						<uni-forms-item label="证件类型">
 							<uni-easyinput disabled v-model="type" />
 						</uni-forms-item>
-						<uni-forms-item label="姓名" required name="name">
+						<uni-forms-item label="姓名" name="name" required>
 							<uni-easyinput v-model="form.name" placeholder="必填,请输入证件上的姓名" />
 						</uni-forms-item>
-						<uni-forms-item label="证件号" required name="card">
-							<uni-easyinput v-model="form.card" maxlength="18" placeholder="必填,请输入证件号" />
+						<uni-forms-item label="证件号" name="card" required>
+							<uni-easyinput v-model="form.card" minlength="18" maxlength="18" placeholder="必填,请输入证件号" />
 						</uni-forms-item>
-						<uni-forms-item label="手机号" required name="phone">
-							<uni-easyinput v-model="form.phone" maxlength="11" placeholder="必填,请输入联系人手机号" />
+						<uni-forms-item label="手机号" name="phone" required>
+							<uni-easyinput v-model="form.phone" minlength="11" maxlength="11" placeholder="必填,请输入联系人手机号" />
 						</uni-forms-item>
 					</uni-forms>
-					<button class="button" type="primary" @click="submit('form')">保存</button>
+					<button class="button" type="primary" @click="submit">保存</button>
 				</view>
 			</view>
 		</uni-popup>
@@ -170,7 +170,11 @@
 				startDate: '',
 				endDate: '',
 				// 游客信息
-				form: {},
+				form: {
+					name: '',
+					card: '',
+					phone: ''
+				},
 				type: '身份证',
 				// 禁止滚动穿透
 				show: false,
@@ -188,32 +192,29 @@
 							errorMessage: '请填写手机号码',
 						}, {
 							validateFunction: function(rule, value, data, callback) {
-								let iphoneReg = (
-									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
-								); //手机号码
+								let iphoneReg =  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
 								if (!iphoneReg.test(value)) {
 									callback('手机号码格式不正确，请重新填写')
 								}
+								return true
 							}
 						}]
 					},
 					card: {
 						rules: [{
-								required: true,
-								errorMessage: '请填写证件号',
-							},
-							{
-								validateFunction: function(rule, value, data, callback) {
-									let iphoneReg =
-										/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9]||[Xx]$/
-									if (!iphoneReg.test(value)) {
-										callback('身份证号格式不正确，请重新填写')
-									}
-									return true
+							required: true,
+							errorMessage: '请填写证件号',
+						}, {
+							validateFunction: function(rule, value, data, callback) {
+								let iphoneReg =
+									/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9]||[Xx]$/
+								if (!iphoneReg.test(value)) {
+									callback('证件号格式不正确，请重新填写')
 								}
+								return true
 							}
-						]
-					},
+						}]
+					}
 				},
 			}
 		},
@@ -223,6 +224,10 @@
 			that.searchToken();
 			that.search();
 		},
+		onReady() {
+			// 需要在onReady中设置规则
+			this.$refs.form.setRules(this.rules)
+		},
 		methods: {
 			// 禁止滚动穿透
 			change(e) {
@@ -315,10 +320,10 @@
 				that.$set(that, `form`, item)
 				that.$refs.popup.open()
 			},
-			// 登录
-			submit(ref) {
+			// 保存
+			submit() {
 				const that = this;
-				that.$refs[ref].validate().then(async form => {
+				that.$refs.form.validate().then(form => {
 					// 根据id 寻找添加的游客信息
 					for (let val of that.identityList) {
 						if (val.id == that.form.id) {
@@ -327,6 +332,12 @@
 						}
 					}
 					that.toClose()
+				}).catch(err => {
+					uni.showToast({
+						title: err,
+						icon: 'none',
+						duration: 2000
+					});
 				})
 			},
 			// 领卷
@@ -370,7 +381,7 @@
 				}
 				// 判断每个游客信息是否都填写
 				const name = that.identityList.every(function(item) {
-					return item.name;
+					return item.name && item.card && item.phone;
 				})
 				if (name) {
 					const data = {

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -45173,7 +45173,8 @@ var _default = {
     }, {
       "path": "order/detail",
       "style": {
-        "navigationBarTitleText": "订单详情"
+        "navigationBarTitleText": "订单详情",
+        "navigationBarBackgroundColor": "#007AFF"
       }
     }, {
       "path": "order/info",

unpackage/dist/dev/mp-weixin/pages/my/index.wxss

@@ -6,10 +6,7 @@
   flex-direction: column;
   width: 100vw;
   height: 100vh;
-  background-image: linear-gradient(to top, #f1f1f1, #007aff);
-}
-.main .one.data-v-4dcceeb0 {
-  height: 45vw;
+  background-image: linear-gradient(to top, #f1f1f1, #f1f1f1, #007aff);
 }
 .main .one .one_1.data-v-4dcceeb0 {
   padding: 4vw;

unpackage/dist/dev/mp-weixin/pagesHome/info/index.wxss

@@ -49,12 +49,14 @@
   font-size: var(--font12Size);
   padding: 3px 5px;
   color: var(--mainColor);
+  border-radius: 5px;
   background-color: mediumseagreen;
 }
 .main .bottom .thr .thr_1 .right .text_2.data-v-7ff17dea {
   font-size: var(--font12Size);
   padding: 3px 5px;
   color: var(--mainColor);
+  border-radius: 5px;
   background-color: red;
 }
 .main .bottom .four.data-v-7ff17dea {

unpackage/dist/dev/mp-weixin/pagesIndex/order/detail.json

@@ -1,4 +1,5 @@
 {
   "navigationBarTitleText": "订单详情",
+  "navigationBarBackgroundColor": "#007AFF",
   "usingComponents": {}
 }

unpackage/dist/dev/mp-weixin/pagesIndex/order/order.js

@@ -224,7 +224,11 @@ var _default = {
       startDate: '',
       endDate: '',
       // 游客信息
-      form: {},
+      form: {
+        name: '',
+        card: '',
+        phone: ''
+      },
       type: '身份证',
       // 禁止滚动穿透
       show: false,
@@ -242,10 +246,11 @@ var _default = {
             errorMessage: '请填写手机号码'
           }, {
             validateFunction: function validateFunction(rule, value, data, callback) {
-              var iphoneReg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/; //手机号码
+              var iphoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
               if (!iphoneReg.test(value)) {
                 callback('手机号码格式不正确，请重新填写');
               }
+              return true;
             }
           }]
         },
@@ -257,7 +262,7 @@ var _default = {
             validateFunction: function validateFunction(rule, value, data, callback) {
               var iphoneReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9]||[Xx]$/;
               if (!iphoneReg.test(value)) {
-                callback('身份证号格式不正确，请重新填写');
+                callback('证件号格式不正确，请重新填写');
               }
               return true;
             }
@@ -289,6 +294,10 @@ var _default = {
     }
     return onLoad;
   }(),
+  onReady: function onReady() {
+    // 需要在onReady中设置规则
+    this.$refs.form.setRules(this.rules);
+  },
   methods: {
     // 禁止滚动穿透
     change: function change(e) {
@@ -442,43 +451,34 @@ var _default = {
       that.$set(that, "form", item);
       that.$refs.popup.open();
     },
-    // 登录
-    submit: function submit(ref) {
+    // 保存
+    submit: function submit() {
       var that = this;
-      that.$refs[ref].validate().then( /*#__PURE__*/function () {
-        var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(form) {
-          var _iterator3, _step3, val;
-          return _regenerator.default.wrap(function _callee4$(_context4) {
-            while (1) {
-              switch (_context4.prev = _context4.next) {
-                case 0:
-                  // 根据id 寻找添加的游客信息
-                  _iterator3 = _createForOfIteratorHelper(that.identityList);
-                  try {
-                    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                      val = _step3.value;
-                      if (val.id == that.form.id) {
-                        form.id = that.form.id;
-                        val = form;
-                      }
-                    }
-                  } catch (err) {
-                    _iterator3.e(err);
-                  } finally {
-                    _iterator3.f();
-                  }
-                  that.toClose();
-                case 3:
-                case "end":
-                  return _context4.stop();
-              }
+      that.$refs.form.validate().then(function (form) {
+        // 根据id 寻找添加的游客信息
+        var _iterator3 = _createForOfIteratorHelper(that.identityList),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var val = _step3.value;
+            if (val.id == that.form.id) {
+              form.id = that.form.id;
+              val = form;
             }
-          }, _callee4);
-        }));
-        return function (_x2) {
-          return _ref.apply(this, arguments);
-        };
-      }());
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+        that.toClose();
+      }).catch(function (err) {
+        uni.showToast({
+          title: err,
+          icon: 'none',
+          duration: 2000
+        });
+      });
     },
     // 领卷
     toCoupon: function toCoupon() {
@@ -511,15 +511,15 @@ var _default = {
     // 提交订单
     toOrder: function toOrder() {
       var _this3 = this;
-      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
         var that, name, data, res;
-        return _regenerator.default.wrap(function _callee5$(_context5) {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
                 that = _this3;
                 if (that.date) {
-                  _context5.next = 4;
+                  _context4.next = 4;
                   break;
                 }
                 uni.showToast({
@@ -527,14 +527,14 @@ var _default = {
                   icon: 'none',
                   duration: 2000
                 });
-                return _context5.abrupt("return");
+                return _context4.abrupt("return");
               case 4:
                 // 判断每个游客信息是否都填写
                 name = that.identityList.every(function (item) {
-                  return item.name;
+                  return item.name && item.card && item.phone;
                 });
                 if (!name) {
-                  _context5.next = 13;
+                  _context4.next = 13;
                   break;
                 }
                 data = {
@@ -552,10 +552,10 @@ var _default = {
                   pay: [],
                   status: '1'
                 };
-                _context5.next = 9;
+                _context4.next = 9;
                 return that.$api("/order", 'POST', data);
               case 9:
-                res = _context5.sent;
+                res = _context4.sent;
                 if (res.errcode == '0') {
                   uni.redirectTo({
                     url: "/pagesIndex/order/index?status=".concat('1')
@@ -566,7 +566,7 @@ var _default = {
                     icon: 'none'
                   });
                 }
-                _context5.next = 15;
+                _context4.next = 15;
                 break;
               case 13:
                 uni.showToast({
@@ -574,13 +574,13 @@ var _default = {
                   icon: 'none',
                   duration: 2000
                 });
-                return _context5.abrupt("return");
+                return _context4.abrupt("return");
               case 15:
               case "end":
-                return _context5.stop();
+                return _context4.stop();
             }
           }
-        }, _callee5);
+        }, _callee4);
       }))();
     }
   }