feat：注册

pages/login/regist.vue

@@ -11,36 +11,37 @@
               </navigator>
             </view>
           </view>
-          <uni-forms ref="form" :modelValue="formData" validate-trigger="blur" label-position="top" label-width="120">
+          <uni-forms ref="form" :modelValue="formData" :rules="rules" validate-trigger="blur" label-position="top"
+                     label-width="120">
             <uni-row :gutter="20" class="formContent">
               <uni-col :xs="24" :md="24">
                 <uni-forms-item name="country" :label="t('newSignup.item3')">
-                  <cwg-combox class="formStyle" v-model:value="formData.country" :options="countryOptions">
+                  <cwg-combox v-model:value="formData.country" :options="countryOptions" filterable>
                   </cwg-combox>
                 </uni-forms-item>
               </uni-col>
               <uni-col :xs="24" :md="24">
                 <uni-forms-item name="phone" :label="t('newSignup.item5')">
-                  <uni-easyinput class="formStyle" v-model="formData.phone"></uni-easyinput>
+                  <uni-easyinput v-model="formData.phone"></uni-easyinput>
                 </uni-forms-item>
               </uni-col>
               <uni-col :xs="24" :md="24">
                 <uni-forms-item name="birthDate" :label="t('newSignup.item18')">
-                  <uni-datetime-picker class="formStyle" type="date" v-model="formData.birthDate"
+                  <uni-datetime-picker type="date" v-model="formData.birthDate"
                                        :placeholder="t('newSignup.item19')" @change="checkAge" />
                 </uni-forms-item>
               </uni-col>
               <uni-col :xs="24" :md="24">
                 <uni-forms-item name="email" :label="t('newSignup.item7')">
-                  <uni-easyinput class="formStyle" v-model="formData.email"
+                  <uni-easyinput v-model="formData.email"
                                  :placeholder="t('newSignup.item8')"
                                  :disabled="!isAgeValid || !formData.birthDate"></uni-easyinput>
                 </uni-forms-item>
               </uni-col>
               <uni-col :xs="24" :md="24">
-                <uni-forms-item name="code" :label="t('newSignup.item7')">
-                  <uni-easyinput class="formStyle" :disabled="!isAgeValid || !formData.birthDate"
-                                 v-model="formData.code" :placeholder="t('newSignup.item8')">
+                <uni-forms-item name="emailCode" :label="t('newSignup.item9')">
+                  <uni-easyinput :disabled="!isAgeValid || !formData.birthDate"
+                                 v-model="formData.emailCode" :placeholder="t('newSignup.item8')">
                     <template #right>
                       <view class="btn-code" @click="(!isAgeValid || !formData.birthDate) ? '' : handleGetCode()">
                         {{ getCodeString }}
@@ -54,7 +55,7 @@
               </uni-col>
               <uni-col :xs="24" :md="24">
                 <uni-forms-item name="password" :label="t('newSignup.item12')">
-                  <uni-easyinput class="formStyle" v-model.trim="formData.password"
+                  <uni-easyinput v-model.trim="formData.password"
                                  :disabled="!isAgeValid || !formData.birthDate"
                                  :placeholder="t('newSignup.item13')" type="password"></uni-easyinput>
                 </uni-forms-item>
@@ -71,7 +72,7 @@
 
               <uni-col :xs="24" :md="24">
                 <uni-forms-item v-if="!isRouteHasId" name="linkValue" :label="t('newSignup.item14')">
-                  <uni-easyinput class="formStyle" v-model.trim="formData.linkValue"
+                  <uni-easyinput v-model.trim="formData.linkValue"
                                  :disabled="!isAgeValid || !formData.birthDate"
                                  :placeholder="t('newSignup.item15')"
                                  @input="limitAgentIdLength"></uni-easyinput>
@@ -80,21 +81,27 @@
 
 
             </uni-row>
-
+            <uni-forms-item name="agree">
+              <view class="check-box" @click="toggleAgree">
+                <up-checkbox-group v-model="agreeGroup" @change="onAgreeChange">
+                  <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
+                               name="agree"
+                               class="wcg-checkbox"></up-checkbox>
+                </up-checkbox-group>
+                <text class="checkbox-label">{{ t('signup.agree') }}</text>
+              </view>
+            </uni-forms-item>
+            <uni-forms-item name="isSubscribeEmail">
+              <view class="check-box" @click="toggleSubscribeEmail">
+                <up-checkbox-group v-model="subscribeEmailGroup" @change="onSubscribeEmailChange">
+                  <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
+                               name="subscribeEmail"
+                               class="wcg-checkbox"></up-checkbox>
+                </up-checkbox-group>
+                <text class="checkbox-label">{{ t('signup.agree1') }}</text>
+              </view>
+            </uni-forms-item>
           </uni-forms>
-          <view class="check-box">
-            <up-checkbox-group v-model="formData.agree">
-              <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a" v-model="formData.agree"
-                           :label="t('signup.agree')" name="" class="wcg-checkbox"></up-checkbox>
-            </up-checkbox-group>
-          </view>
-          <view class="check-box">
-            <up-checkbox-group v-model="formData.isSubscribeEmail">
-              <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
-                           v-model="formData.isSubscribeEmail" :label="t('signup.agree1')" name=""
-                           class="wcg-checkbox"></up-checkbox>
-            </up-checkbox-group>
-          </view>
           <view>
             <u-button class="regiset-btn" @click="register">
               {{ t('signup.button') }}
@@ -102,11 +109,11 @@
           </view>
           <view class="des-bottom">
             <text v-t="'signup.agreemnet1'"></text>
-            <a href="pdf/Client_Agreement.pdf" target="_blank" v-t="'signup.agreemnet2'"></a>
+            <a @click="openUrl('pdf/Client_Agreement.pdf')" target="_blank" v-t="'signup.agreemnet2'"></a>
             <text v-t="'signup.agreemnet3'"></text>
-            <a href="pdf/Terms&Conditions.pdf" target="_blank" v-t="'signup.agreemnet4'"></a>
+            <a @click="openUrl('pdf/Terms&Conditions.pdf')" target="_blank" v-t="'signup.agreemnet4'"></a>
             <text v-t="'signup.agreemnet5'"></text>
-            <a href="pdf/Privacy_Policy.pdf" target="_blank" v-t="'signup.agreemnet6'"></a>
+            <a @click="openUrl('pdf/Privacy_Policy.pdf')" target="_blank" v-t="'signup.agreemnet6'"></a>
             <text v-t="'signup.agreemnet7'"></text>
           </view>
           <!--          <view class="or-title">-->
@@ -131,27 +138,7 @@
       </uni-row>
     </view>
 
-    <view class="des">
-      <view>
-        {{ t('newSignin.item12') }}
-      </view>
-      <br />
-      <view>
-        {{ t('newSignin.item10') }}
-      </view>
-      <br />
-      <view>
-        {{ t('newSignin.item11') }}
-      </view>
-      <br />
-      <view>{{ t('newSignin.item13') }}</view>
-      <a :href="`https://www.${ho}.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf`" target="_blank">
-        {{ t('newSignin.item13_1') }}
-      </a>
-      <view>{{ t('newSignin.item13_2') }}</view>
-      <view>{{ t('newSignin.item13_3') }}</view>
-      <view>{{ t('newSignin.item13_4') }}</view>
-    </view>
+    <cwg-custom-footer />
   </view>
 </template>
 <script setup>
@@ -166,6 +153,7 @@
   import useUserStore from '@/stores/use-user-store'
   import { userToken } from '@/composables/config'
   import { userApi } from '@/api/user'
+  import { openLocalPdf } from '@/utils/pdf.js'
 
   const { t } = useI18n()
   const userStore = useUserStore()
@@ -179,6 +167,90 @@
   } = useEmailCountdown()
 
   const isRouteHasId = ref(false)
+  const formData = ref({
+    country: '',
+    phone: '',
+    birthDate: '',
+    email: '',
+    code: '',
+    password: '',
+    linkValue: '',
+    agree: 0,
+    isSubscribeEmail: 0,
+    sourceCode: null,
+    w: '',
+    subId: '',
+    oc: '',
+    agentId: null,
+    ibInvalid: null,
+  })
+
+  const rules = {
+    country: { rules: [{ required: true, errorMessage: t('vaildate.country.empty'), trigger: 'blur' }] },
+    email: {
+      rules: [
+        { required: true, errorMessage: t('vaildate.email.empty'), trigger: 'blur' },
+        { pattern: Config.Pattern.Email, errorMessage: t('vaildate.email.format'), trigger: 'blur' },
+      ],
+    },
+    emailCode: { rules: [{ required: true, errorMessage: t('vaildate.code.empty'), trigger: 'blur' }] },
+    password: {
+      rules: [
+        { required: true, errorMessage: t('vaildate.password.format'), trigger: 'blur' },
+        { pattern: Config.Pattern.Password, errorMessage: t('vaildate.password.format'), trigger: 'blur' },
+      ],
+    },
+    agree: {
+      rules: [
+        {
+          validateFunction: (rule, value) => {
+            if (value) return true
+            return t('vaildate.agree.empty')
+          },
+          trigger: 'change',
+        },
+      ],
+    },
+    phone: {
+      rules: [
+        { required: true, errorMessage: t('vaildate.phone.format'), trigger: 'blur' },
+        { pattern: Config.Pattern.NonNegInt, errorMessage: t('vaildate.phone.format'), trigger: 'blur' },
+      ],
+    },
+    birthDate: { rules: [{ required: true, errorMessage: t('vaildate.birthDate.empty'), trigger: 'change' }] },
+  }
+
+  const agreeGroup = ref([])
+  const subscribeEmailGroup = ref([])
+
+  watch(() => formData.value.agree, (val) => {
+    agreeGroup.value = val === 1 ? ['agree'] : []
+  }, { immediate: true })
+
+  watch(() => formData.value.isSubscribeEmail, (val) => {
+    subscribeEmailGroup.value = val === 1 ? ['subscribeEmail'] : []
+  }, { immediate: true })
+
+  const onAgreeChange = (e) => {
+    formData.value.agree = e && e.length ? 1 : 0
+  }
+
+  const onSubscribeEmailChange = (e) => {
+    formData.value.isSubscribeEmail = e && e.length ? 1 : 0
+  }
+
+  const toggleAgree = () => {
+    const next = agreeGroup.value.length ? [] : ['agree']
+    agreeGroup.value = next
+    onAgreeChange(next)
+  }
+
+  const toggleSubscribeEmail = () => {
+    const next = subscribeEmailGroup.value.length ? [] : ['subscribeEmail']
+    subscribeEmailGroup.value = next
+    onSubscribeEmailChange(next)
+  }
+
   const rule1 = computed(() => {
     if (!formData.value.password) return false
     return /^.{8,16}$/.test(formData.value.password)
@@ -193,19 +265,9 @@
       formData.value.password,
     )
   })
-
-  // 响应式表单数据
-  const formData = ref({
-    country: '',
-    birthDate: '',
-    code: '',
-    password: '',
-    linkValue: '',
-    agentId: null,
-    agentValue: '',
-    readName: '',
-    agree: '',
-  })
+  const openUrl = (url) => {
+    openLocalPdf(url)
+  }
 
   // 检查是否满18周岁
   const isAgeValid = computed(() => {
@@ -249,8 +311,29 @@
   }
 
   onLoad((options) => {
-    if (options && options.id) {
-      isRouteHasId.value = true
+    if (options) {
+      formData.value.sourceCode = options.ex || null
+      formData.value.w = options.w || ''
+      formData.value.subId = options.SUBID || ''
+      formData.value.oc = options.oc || ''
+      formData.value.email = options.emailAdvertisement || ''
+
+      console.log(options, '-----')
+
+      if (options.id) {
+        isRouteHasId.value = true
+        formData.value.agentId = Number(options.id)
+        formData.value.linkValue = options.commission || ''
+
+        switch (options.ibInvalid) {
+          case 'B0':
+            formData.value.ibInvalid = 0
+            break
+          case 'B1':
+            formData.value.ibInvalid = 1
+            break
+        }
+      }
     }
   })
   const ho = ref('')
@@ -337,7 +420,7 @@
       status.value = true
       return
     }
-
+    console.log(123333)
     form.value.validate().then(async (res) => {
 
 
@@ -346,22 +429,23 @@
       const isChina = chinaCountryCodes.includes(formData.value.country)
       const xSystemValue = isChina ? 'B' : 'A'
 
-      try {
-        let resData = await loginApi.Register(
-          { ...formData.value },
-          { headers: { 'X-System': xSystemValue } },
-        )
-        if (resData.code == 200) { // Code.StatusOK
-          showToast(t('Msg.registerSuc'))
-          login()
-        } else {
-          showToast(resData.msg)
-        }
-      } catch (error) {
-        console.error(error)
+
+      let resData = await loginApi.Register(
+        { ...formData.value },
+        { headers: { 'X-System': xSystemValue } },
+      )
+      console.log(resData)
+      if (resData.code == 200) { // Code.StatusOK
+        showToast(t('Msg.registerSuc'))
+        login()
+      } else {
+        console.log(123)
+        showToast(resData.msg)
       }
+
     }).catch(err => {
       console.log('表单错误信息：', err)
+      showToast(err.msg)
       return false
     })
   }
@@ -391,7 +475,7 @@
         showToast(t('Msg.LoginSuccess'))
         setTimeout(() => {
           uni.reLaunch({
-            url: '/pages/customer/index'
+            url: '/pages/customer/index',
           })
           // this.$store.commit("isActiveTab", "0"); (可能需要适配相应的逻辑)
         }, 1000)
@@ -408,6 +492,7 @@
     getCountry()
     const hostParts = window.location.host.split('.')
     ho.value = hostParts.length > 1 ? hostParts[1] : ''
+
   })
 
 </script>
@@ -600,17 +685,28 @@
   .btn-code {
     width: 30%;
     height: 100%;
+    box-sizing: border-box;
     background-color: #102047;
-    border: 1px solid #f0f0f0;
+    border: 1px solid rgb(229, 229, 229);
     color: #fff;
     text-align: center;
-    line-height: px2rpx(40);
+    line-height: px2rpx(38);
     border-radius: 0 4px 4px 0;
   }
 
   .check-box {
     padding: 0 px2rpx(10);
     margin-bottom: px2rpx(10);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .checkbox-label {
+      font-size: px2rpx(14);
+      color: #666666;
+      margin-left: px2rpx(8);
+      user-select: none;
+    }
 
     :deep(.u-checkbox) {
       display: flex;
@@ -662,11 +758,13 @@
   .code-text {
     padding-right: px2rpx(20);
   }
-  .des-bottom{
+
+  .des-bottom {
     margin-top: px2rpx(20);
     line-height: 20px;
     color: #000;
     font-size: 12px;
+
     a {
       color: #e61f1e;
     }