ソースを参照

优化注册表单和首页轮播图显示

- 在注册表单中添加随行人员信息的温馨提示
- 修改首页轮播图的图片模式为scaleToFill,以适应固定高度
- 更新地市简介页面的导航栏标题
chen.cheng 9 ヶ月 前
コミット
bc485e1248
1 ファイル変更119 行追加43 行削除
  1. 119 43
      components/RegistForm/index.vue

+ 119 - 43
components/RegistForm/index.vue

@@ -312,56 +312,83 @@
         </u-icon>
       </u-form-item>
       <view>
-        <view
-            v-for="(item, index) in model1.userInfo.follows"
-            :key="index"
+        <u-form-item
+            prop="userInfo.follows"
             class="follower-item"
         >
-          <view style="display: flex;align-items: center;justify-content: flex-start;">
-            {{ `随行人员${index + 1}` }}
-            <u-icon name="minus-circle-fill" color="red" size="28" @click="()=>minusFollower(index)"
-                    style="margin-left: auto">
-            </u-icon>
-          </view>
-          <u-form-item
-              label="姓名"
-              prop="item.usrName"
-          >
-            <u--input
-                placeholder="输入姓名"
-                v-model="item.usrName"
-                border="none"
-            ></u--input>
-          </u-form-item>
-          <u-form-item
-              label="单位职务"
-              prop="item.usrLevel"
+          <view v-for="(item, index) in model1.userInfo.follows"
+                :key="index"
           >
-            <u--input
-                placeholder="输入单位职务"
-                v-model="item.usrLevel"
+            <view style="display: flex;align-items: center;justify-content: flex-start;">
+              {{ `随行人员${index + 1}` }}
+              <u-icon name="minus-circle-fill" color="red" size="28" @click="()=>minusFollower(index)"
+                      style="margin-left: auto">
+              </u-icon>
+            </view>
+            <u-form-item
+                label="姓名"
+                prop="item.usrName"
+                class="require"
+            >
+              <u--input
+                  placeholder="输入姓名"
+                  v-model="item.usrName"
+                  @change="followsValidate"
+                  @blur="followsValidate"
+                  border="none"
+              ></u--input>
+            </u-form-item>
+            <view
+                v-if="followErrors[index] && followErrors[index].usrName"
+                style="font-size: 12px;line-height: 12px;color: #f56c6c;">
+              请填写姓名
+            </view>
+            <u-form-item
+                label="单位职务"
+                prop="item.usrLevel"
+                class="require"
+            >
+              <u--input
+                  placeholder="输入单位职务"
+                  @change="followsValidate"
+                  @blur="followsValidate"
+                  v-model="item.usrLevel"
+                  border="none"
+              ></u--input>
+            </u-form-item>
+            <view
+                v-if="followErrors[index] && followErrors[index].usrLevel"
+                style="font-size: 12px;line-height: 12px;color: #f56c6c;">请填写单位职务
+            </view>
+            <u-form-item
+                label="联系电话"
+                prop="item.tel"
                 border="none"
-            ></u--input>
-          </u-form-item>
-          <u-form-item
-              label="联系电话"
-              prop="item.tel"
-              borderBottom
-          >
-            <u--input
-                placeholder="输入联系电话"
-                border="none"
-                type="number"
-                maxlength="11"
-                v-model="item.tel"
-            ></u--input>
-          </u-form-item>
-        </view>
+                class="require"
+            >
+              <u--input
+                  placeholder="输入联系电话"
+                  border="none"
+                  type="number"
+                  maxlength="11"
+                  @change="followsValidate"
+                  @blur="followsValidate"
+                  v-model="item.tel"
+              ></u--input>
+            </u-form-item>
+            <view
+                v-if="followErrors[index] && followErrors[index].tel"
+                style="font-size: 12px;line-height: 12px;color: #f56c6c;">请填写正确的手机号
+            </view>
+            <u-line margin="20rpx 0" color="#d6d7d9"></u-line>
+          </view>
+        </u-form-item>
         <view
-              style="color: #fb0000c7;margin-top: 10rpx;font-size: 24rpx"
+            style="color: #fb0000c7;margin-top: 10rpx;font-size: 24rpx"
         >
           * 温馨提示:请同步填写随行人员信息。
         </view>
+
       </view>
     </u--form>
     <slot name="footer"></slot>
@@ -431,6 +458,7 @@ export default {
       comLabel: '',
       tfcDic: [],
       backLabel: '',
+      followErrors: {},
       model1: {
         userInfo: {
           usrName: '',
@@ -453,6 +481,10 @@ export default {
     this.setFormRules();
   },
   methods: {
+    followsValidate(index) {
+      debugger
+      this.$refs.uForm.validateField('userInfo.follows');
+    },
     initUser() {
       const user = getUserInfo();
       if (user) {
@@ -461,8 +493,41 @@ export default {
       this.init();
     },
     setFormRules() {
+      const that = this;
       //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
-      this.$refs.uForm.setRules(this.rules);
+      const rules = {
+        'userInfo.follows': [
+          {
+            // 自定义验证函数,见上说明
+            validator: (rule, value, callback) => {
+              debugger
+              const followMsg = {};
+              value.forEach((item, index) => {
+                const msgs = {};
+                if (!item.usrName) {
+                  msgs.usrName = '姓名不能为空';
+                }
+                if (!uni.$u.test.mobile(item.tel)) {
+                  msgs.tel = '手机号码不正确';
+                }
+                if (!item.usrLevel) {
+                  msgs.usrLevel = '单位职务不能为空';
+                }
+                if (Object.keys(msgs).length > 0) {
+                  followMsg[index] = msgs;
+                }
+              });
+              that.followErrors = followMsg;
+              return Object.keys(followMsg).length < 1;
+            },
+            message: ' ',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur'],
+          },
+        ],
+        ...this.rules,
+      };
+      this.$refs.uForm.setRules(rules);
     },
     getImageUrl,
     addFollower() {
@@ -485,6 +550,17 @@ export default {
       this.model1.userInfo.themeId = item.value;
       this.$refs.uForm.clearValidate('userInfo.themeId');
     },
+    validateUsername(rule, value, callback) {
+      console.log(value);
+      // 自定义验证规则,例如用户名必须包含"uview"
+      if (value.indexOf('uview') === -1) {
+        // 验证不通过,调用callback并传入错误信息
+        callback(new Error('用户名必须包含"uview"'));
+      } else {
+        // 验证通过,调用callback并不传入参数或者传入null
+        callback();
+      }
+    },
     async init() {
       const {
         code: conferenceCode,