feat 立即注册

src/views/home/index.vue

@@ -43,27 +43,27 @@ const banners = ref([
 ]);
 const advantageList = ref([
   {
-    img: '12-1.png',
+    img: '2-1.png',
     name: '高效对接',
     tip: '高效对接 鼎力配合'
   },
   {
-    img: '12-2.png',
+    img: '2-2.png',
     name: '全网运力',
     tip: '商户可以选择多平台运力'
   },
   {
-    img: '12-3.png',
+    img: '2-3.png',
     name: '全渠道履约',
     tip: '全渠道履约，为商户提供全方面保障'
   },
   {
-    img: '12-4.png',
+    img: '2-4.png',
     name: '配送效率高',
     tip: '自动接单、自动打印、自动配送'
   },
   {
-    img: '12-5.png',
+    img: '2-5.png',
     name: '数字化赋能',
     tip: '推动上下游产业的数字化进程'
   },
@@ -97,7 +97,7 @@ const toRegister = () => {
         </div>
         <div class="text-16px leading-19px text-gray-600 text-center font-500 uppercase mt-10px">access process</div>
       </div>
-      <div class="flex justify-center items-center mt-50px">
+      <div class="flex justify-center items-center                                     mt-50px">
         <div class="flex items-center" v-for="(v, i) in steps" :key="i">
           <div class="flex flex-shrink-0 flex-col items-center w-200px h-207px !bg-cover"
             :style="`background: url(${getAssetsFile(`11-2.png`)}) no-repeat`">

src/views/register/index.vue

@@ -61,10 +61,10 @@ interface FormState {
   mobile: string
 }
 const formState: UnwrapRef<FormState> = reactive({
-  provinceName: '江苏省',
-  cityName: '苏州市',
-  cityCode: '0512',
-  districtName: '相城区',
+  provinceName: '',
+  cityName: '',
+  cityCode: '',
+  districtName: '',
   userAccount: '',
   password: '',
   passwordAgain: '',
@@ -112,7 +112,7 @@ const next = async () => {
   if (res.code !== 0) {
     return message.error(res.message)
   }
-  if (util.mobile(formState.userAccount)) {
+  if (!util.mobile(formState.userAccount)) {
     return message.error('请填写正确格式的注册手机号！')
   }
   current.value++;
@@ -120,20 +120,21 @@ const next = async () => {
 const prev = () => {
   current.value--;
 };
-function getAddressInfo(address: string) {
+function getAddressInfo() {
   return new Promise((resolve, reject) => {
     AMapLoader.load({
       "key": "21132ea36aed6ab1884085a836f12ca9",              // 申请好的Web端开发者Key，首次调用 load 时必填
       "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       "plugins": ['AMap.Geocoder'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-    }).then(AMap => {
+    }).then((AMap: { Geocoder: new () => any; }) => {
       let geocoder = new AMap.Geocoder()
-      geocoder.getLocation('江苏省苏州市相城区', function (status: string, result: { info: string; }) {
-        console.log('result:', result);
+      geocoder.getLocation(formState.address, function (status: string, result: { info: string; }) {
+        console.log('result:', status, result);
         if (status === 'complete' && result.info === 'OK') {
           // result中对应详细地理坐标信息
           resolve(result)
         } else {
+          return message.error('请正确填写企业地址的省市区')
           reject(result)
         }
       })
@@ -142,18 +143,21 @@ function getAddressInfo(address: string) {
 
 }
 const submit = async () => {
-  let result: any = await getAddressInfo(formState.address)
-  if (result.info === 'OK') {
-    let addressComponent = result.geocodes[0].addressComponent
+  let result: any = await getAddressInfo()
+  console.log('result:', result);
+  let addressComponent = result?.geocodes[0]?.addressComponent
+  if (result.info === 'OK' && addressComponent.province && addressComponent.city && addressComponent.district) {
     formState.provinceName = addressComponent.province
     formState.cityName = addressComponent.city
     formState.cityCode = addressComponent.citycode
     formState.districtName = addressComponent.district
   } else {
-    message.error('确定填写正确的省市区地址')
+    message.error('请正确填写企业地址的省市区')
+  }
+  if (!util.mobile(formState.mobile)) {
+    return message.error('请填写正确格式的联系电话！')
   }
   applyDevelop(formState).then((res: any) => {
-    console.log(res);
     if (res.code === 0) {
       current.value++;
     } else {
@@ -162,6 +166,9 @@ const submit = async () => {
   })
 }
 const doSendSms = () => {
+  if (!util.mobile(formState.userAccount)) {
+    return message.error('请填写正确格式的注册手机号！')
+  }
   sendSms({ mobile: formState.userAccount, type: 1 }).then((res: any) => {
     console.log(res);
     if (res.code === 200) {
@@ -238,7 +245,7 @@ const toLogin = () => {
       <!-- 账号信息 -->
       <a-form v-if="current === 0" :model="formState" class="w-600px">
         <a-form-item>
-          <a-input v-model:value="formState.userAccount" maxlength="11" allowClear placeholder="输入注册手机号">
+          <a-input v-model:value="formState.userAccount" :maxlength="11" allowClear placeholder="输入注册手机号">
             <template #prefix>
               <MobileOutlined style="color: rgba(0, 0, 0, 0.25)" />
             </template>
@@ -259,7 +266,7 @@ const toLogin = () => {
           </a-input-password>
         </a-form-item>
         <a-form-item>
-          <a-input v-model:value="formState.code" maxlength="4" placeholder="输入短信验证码" allowClear
+          <a-input v-model:value="formState.code" :maxlength="4" placeholder="输入短信验证码" allowClear
             style="width: calc(100% - 130px)">
             <template #prefix>
               <MailOutlined style="color: rgba(0, 0, 0, 0.25)" />
@@ -367,7 +374,7 @@ const toLogin = () => {
           <a-input v-model:value="formState.contactName" allowClear placeholder="输入公司联系人" />
         </a-form-item>
         <a-form-item label="联系电话" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.mobile" allowClear placeholder="输入联系电话" />
+          <a-input v-model:value="formState.mobile" allowClear placeholder="输入联系电话" :maxlength="11" />
         </a-form-item>
       </a-form>
       <!-- 提交成功 -->