會員資料欄位檢驗

src/views/Member/components/userInfo.vue

@@ -134,7 +134,7 @@ const onSubmit = async () => {
   }
 };
 
-const activeCollapse = ref(1);
+const activeCollapse = ref("1");
 </script>
 
 <template>
@@ -405,6 +405,7 @@ const activeCollapse = ref(1);
       </van-form>
     </van-cell-group>
   </div>
+
   <van-popup class="cropPopup" v-model:show="crop.show" closeable>
     <h5 class="text-center mt-3">檔案裁切上傳</h5>
     <div class="cropper-section">

src/views/Member/index.vue

@@ -192,6 +192,17 @@ const onMoveBtn = (type, index) => {
 
 }
 
+const onFailed = (errorInfo) => {
+  console.log('failed', errorInfo);
+  showFailToast('請確認欄位填寫是否完整');
+  if(errorInfo.errors[0].name === 'url'){
+    tabActive.value = 1
+    return
+  }
+  tabActive.value = 0
+  return
+};
+
 const onSubmit = async () => {
   showLoadingToast({
     duration: 0,
@@ -397,7 +408,7 @@ const handleChangeTplSubmit = async () => {
         </template>
       </van-tab>
     </van-tabs>
-    <van-form @submit="onSubmit">
+    <van-form @submit="onSubmit" @failed="onFailed">
       <div class="content cnt0" v-show="tabActive === 0">
         <van-cell-group inset>
           <div class="text-center p-4">
@@ -482,18 +493,18 @@ const handleChangeTplSubmit = async () => {
             padding: '0 16px',
           }"><strong>貴人資源共享</strong></van-divider>
           <van-collapse v-model="resourceActive" accordion>
-            <van-collapse-item title="工商簡介" name="3">
+            <van-collapse-item title="工商簡介" name="1">
               <van-field v-model="form.exchange" rows="3" type="textarea" name="exchange" maxlength="200"
                 placeholder="請填寫工商簡介" show-word-limit />
               <van-field v-model="form.exchange_link" label="分享網址：" name="exchange_link" placeholder="需求連結" />
             </van-collapse-item>
-            <van-collapse-item title="我能分享的資源" name="1">
+            <van-collapse-item title="我能分享的資源" name="2">
               <van-field v-model="form.supply" rows="3" type="textarea" maxlength="200" name="supply"
                 placeholder="請填寫能分享的資源" show-word-limit />
               <van-field v-model="form.supply_link" label="分享網址：" name="supply_link" placeholder="分享網址"
                 :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]" />
             </van-collapse-item>
-            <van-collapse-item title="我需要的資源" name="2">
+            <van-collapse-item title="我需要的資源" name="3">
               <van-field v-model="form.demand" rows="3" type="textarea" maxlength="200" name="demand"
                 placeholder="請填寫需要的的資源" show-word-limit />
               <van-field v-model="form.demand_link" label="分享網址：" name="demand_link" placeholder="需求連結" />
@@ -510,7 +521,8 @@ const handleChangeTplSubmit = async () => {
 
       <div class="content cnt1" v-show="tabActive === 1">
         <van-cell-group inset>
-          <van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁" />
+          <van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁" 
+          :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. https://' }]"/>
           <van-field v-model="form.line" label="Line" name="line" placeholder="請輸入您的Line ID" />
           <van-field v-model="form.facebook" label="Facebook" name="facebook" placeholder="請輸入您的Facebook" />
           <van-field v-model="form.ig" label="IG" name="ig" placeholder="請輸入您的IG" />