add 立即注册

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ant-design/colors": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",

package.json

@@ -8,8 +8,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "ant-design-vue": "^3.2.2",
     "axios": "^0.27.2",
+    "js-md5": "^0.7.3",
     "node-sass": "^7.0.1",
     "sass": "^1.49.9",
     "sass-loader": "^7.3.1",

src/api/index.ts

@@ -7,4 +7,8 @@ export const sendSms = (params: any) => {
 // 校验验证码
 export const verification = (params: any) => {
   return post('app/verification', params)
+}
+// 申请成为开发者
+export const applyDevelop = (params: any) => {
+  return postJson('app/applyDevelop', params)
 }

src/router/index.ts

@@ -10,6 +10,11 @@ const routes = [
     path: "/register",
     name: "register",
     component: ()=> import('@/views/register/index.vue'),
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: ()=> import('@/views/login/index.vue'),
   }
 ];
 

src/util/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 验证手机格式
+ */
+ function mobile(value: string) {
+  return /^1[23456789]\d{9}$/.test(value)
+}
+export default {
+  mobile
+}

src/views/login/index.vue

@@ -0,0 +1,12 @@
+<script setup lang='ts'>
+import { onMounted, ref } from 'vue'
+
+onMounted(() => {
+
+})
+</script>
+<template>
+  <div class="mt-60px">login</div>
+</template>
+<style lang='scss' scoped>
+</style>

src/views/register/index.vue

@@ -12,43 +12,94 @@ export default defineComponent({
 })
 </script>
 <script setup lang='ts'>
-import { FormProps, message } from 'ant-design-vue';
+import { FormProps, message, UploadFile } from 'ant-design-vue';
 import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
 import { defineComponent, onMounted, reactive, ref, UnwrapRef, watch } from 'vue'
-import { sendSms, verification } from '@/api/index'
-import { number } from 'vue-types';
-const current = ref<number>(1);
+import { sendSms, verification, applyDevelop } from '@/api/index'
+import AMapLoader from '@amap/amap-jsapi-loader';
+import util from '@/util/index'
+import router from '@/router';
+
+const current = ref<number>(0);
 const steps = ref<Array<any>>([
   '账号信息', '资料提交', '完成注册',
 ])
 let verifyText = ref<string>('点击获取')
 let firstDisabled = ref<Boolean>(true)
+let submitDisabled = ref<Boolean>(true)
 let loading = ref<boolean>(false);
 let fileList = ref([]);
 let time = ref<number>(10)
 let timer = ref<number>()
 let canSendSms = ref<boolean>(true)
 let labelCol = ref<object>({ style: { width: '200px' } })
+let action = ref<string>('http://153.37.175.42:8070/app/common/upload')
 interface FormState {
-  mobile: string;
+  provinceName: string,
+  cityName: string,
+  cityCode: string,
+  districtName: string,
+  userAccount: string;
   password: string;
   passwordAgain: string;
   code?: number
+  licenseType: number,
+  merchantType: number,
+  categoryId: number,
+  address: string,
+  street: string,
+  merchantName: string,
+  bizLicenseNo: string,
   bizLicense: string
+  legalPerson: string,
+  idcardType: number,
+  idcardNo: string,
+  idcardFront: string,
+  idcardBack: string,
+  bizLicenseIdcard: string,
+  contactName: string,
+  mobile: string
 }
 const formState: UnwrapRef<FormState> = reactive({
-  mobile: '',
+  provinceName: '江苏省',
+  cityName: '苏州市',
+  cityCode: '0512',
+  districtName: '相城区',
+  userAccount: '',
   password: '',
   passwordAgain: '',
-  bizLicense: ''
+  licenseType: 3,
+  merchantType: 2,
+  categoryId: 2,
+  address: '',
+  street: '',
+  merchantName: '',
+  bizLicenseNo: '',
+  bizLicense: '',
+  legalPerson: '',
+  idcardType: 1,
+  idcardNo: '',
+  idcardFront: '',
+  idcardBack: '',
+  bizLicenseIdcard: '',
+  contactName: '',
+  mobile: ''
 });
+window._AMapSecurityConfig = {
+  securityJsCode: '23cf1bca0e52bbf8cb129047cdb46f10'
+}
 onMounted(() => {
 
 })
 watch(formState, (newValue) => {
   console.log('数据：', newValue);
-  if (newValue.mobile && newValue.password && newValue.passwordAgain && newValue.code) {
+  if (newValue.userAccount && newValue.password && newValue.passwordAgain && newValue.code) {
     firstDisabled.value = false
+    if (newValue.address && newValue.street && newValue.merchantName && newValue.bizLicenseNo && newValue.bizLicense && newValue.legalPerson && newValue.idcardNo && newValue.idcardFront && newValue.idcardBack && newValue.bizLicenseIdcard && newValue.contactName && newValue.mobile) {
+      submitDisabled.value = false
+    } else {
+      submitDisabled.value = true
+    }
   } else {
     firstDisabled.value = true
   }
@@ -57,26 +108,61 @@ const next = async () => {
   if (formState.password !== formState.passwordAgain) {
     return message.error('俩次输入的密码不一致，请修改为相同密码！')
   }
-  let res: any = await verification({ mobile: formState.mobile, code: formState.code })
+  let res: any = await verification({ mobile: formState.userAccount, code: formState.code })
   if (res.code !== 0) {
     return message.error(res.message)
   }
+  if (util.mobile(formState.userAccount)) {
+    return message.error('请填写正确格式的注册手机号！')
+  }
   current.value++;
 };
 const prev = () => {
   current.value--;
 };
-const submit = () => {
+function getAddressInfo(address: string) {
+  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 => {
+      let geocoder = new AMap.Geocoder()
+      geocoder.getLocation('江苏省苏州市相城区', function (status: string, result: { info: string; }) {
+        console.log('result:', result);
+        if (status === 'complete' && result.info === 'OK') {
+          // result中对应详细地理坐标信息
+          resolve(result)
+        } else {
+          reject(result)
+        }
+      })
+    })
+  })
 
 }
-const handleFinish: FormProps['onFinish'] = values => {
-  console.log(values, formState);
-};
-const handleFinishFailed: FormProps['onFinishFailed'] = errors => {
-  console.log(errors);
-};
+const submit = async () => {
+  let result: any = await getAddressInfo(formState.address)
+  if (result.info === 'OK') {
+    let addressComponent = result.geocodes[0].addressComponent
+    formState.provinceName = addressComponent.province
+    formState.cityName = addressComponent.city
+    formState.cityCode = addressComponent.citycode
+    formState.districtName = addressComponent.district
+  } else {
+    message.error('确定填写正确的省市区地址')
+  }
+  applyDevelop(formState).then((res: any) => {
+    console.log(res);
+    if (res.code === 0) {
+      current.value++;
+    } else {
+      message.error(res.message)
+    }
+  })
+}
 const doSendSms = () => {
-  sendSms({ mobile: formState.mobile, type: 1 }).then((res: any) => {
+  sendSms({ mobile: formState.userAccount, type: 1 }).then((res: any) => {
     console.log(res);
     if (res.code === 200) {
       message.success('发送成功，请查收短信验证码！')
@@ -96,40 +182,52 @@ const doSendSms = () => {
     }
   })
 }
-function getBase64(img: Blob, callback: (base64Url: string) => void) {
-  const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result as string));
-  reader.readAsDataURL(img);
-}
-const handleChange = (info: UploadChangeParam) => {
+const handleChanges = (info: any, type: number) => {
   if (info.file.status === 'uploading') {
     loading.value = true;
     return;
   }
   if (info.file.status === 'done') {
-    // Get this url from response in real world.
-    getBase64(info.file.originFileObj, (base64Url: string) => {
-      formState.bizLicense = base64Url;
-      loading.value = false;
-    });
+    loading.value = false;
+    console.log('info.file:', info.file);
+    let url = info.file.response.data.url
+    switch (type) {
+      case 1:
+        formState.bizLicense = url
+        break;
+      case 2:
+        formState.idcardFront = url
+        break;
+      case 3:
+        formState.idcardBack = url
+        break;
+      case 4:
+        formState.bizLicenseIdcard = url
+        break;
+      default:
+        break;
+    }
   }
   if (info.file.status === 'error') {
     loading.value = false;
     message.error('upload error');
   }
+}
+const handleChange = (info: UploadChangeParam) => {
+  handleChanges(info, 1)
 };
-
-const beforeUpload = (file: UploadProps['fileList'][number]) => {
-  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-  if (!isJpgOrPng) {
-    message.error('You can only upload JPG file!');
-  }
-  const isLt2M = file.size / 1024 / 1024 < 2;
-  if (!isLt2M) {
-    message.error('Image must smaller than 2MB!');
-  }
-  return isJpgOrPng && isLt2M;
+const handleChange2 = (info: UploadChangeParam) => {
+  handleChanges(info, 2)
+};
+const handleChange3 = (info: UploadChangeParam) => {
+  handleChanges(info, 3)
 };
+const handleChange4 = (info: UploadChangeParam) => {
+  handleChanges(info, 4)
+};
+const toLogin = () => {
+  router.push('/login')
+}
 </script>
 <template>
   <div class=" pt-120px flex flex-col items-center">
@@ -140,7 +238,7 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
       <!-- 账号信息 -->
       <a-form v-if="current === 0" :model="formState" class="w-600px">
         <a-form-item>
-          <a-input v-model:value="formState.mobile" 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>
@@ -174,21 +272,20 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
       <!-- 资料提交 -->
       <a-form v-if="current === 1" :model="formState" :label-col="labelCol">
         <a-form-item label="企业地址" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入企业地址省市区" />
-          <a-textarea class="mt-24px" v-model:value="formState.password" placeholder="输入企业详细地址" />
+          <a-input v-model:value="formState.address" allowClear placeholder="输入企业地址省市区" />
+          <a-textarea class="mt-24px" v-model:value="formState.street" placeholder="输入企业详细地址" />
         </a-form-item>
         <a-form-item label="企业名称" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入企业名称" />
+          <a-input v-model:value="formState.merchantName" allowClear placeholder="输入企业名称" />
         </a-form-item>
         <a-form-item label="统一社会信用代码" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入企业统一社会信用代码" />
+          <a-input v-model:value="formState.bizLicenseNo" allowClear placeholder="输入企业统一社会信用代码" />
         </a-form-item>
         <a-form-item label="营业执照" :rules="[{ required: true }]">
           <template class="flex justify-between">
-            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="avatar" list-type="picture-card"
-              :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              :before-upload="beforeUpload" @change="handleChange">
-              <img v-if="formState.bizLicense" :src="formState.bizLicense" alt="avatar" />
+            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="file" list-type="picture-card"
+              :show-upload-list="false" :action="action" @change="handleChange">
+              <img class="w-150px h-100px" v-if="formState.bizLicense" :src="formState.bizLicense" alt="avatar" />
               <div v-else>
                 <loading-outlined v-if="loading"></loading-outlined>
                 <plus-outlined v-else></plus-outlined>
@@ -197,23 +294,28 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
             </a-upload>
             <div class="flex items-start flex-shrink-0">
               <div class="text-14px font-500 text-dark-200 flex-shrink-0 mt-10px mr-20px">示例</div>
-              <a-image class="w-150px h-100px" src="https://aliyuncdn.antdv.com/vue.png" />
-              <!-- <img class="w-150px h-100px" src="@/assets/images/14.png" alt="" srcset=""> -->
+              <img class="w-150px h-100px" src="@/assets/images/14.png" alt="" srcset="">
             </div>
           </template>
         </a-form-item>
         <a-form-item label="法人／实际控制人姓名" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入企业法人／实际控制人姓名" />
+          <a-input v-model:value="formState.legalPerson" allowClear placeholder="输入企业法人／实际控制人姓名" />
+        </a-form-item>
+        <a-form-item label="法人／实际控制人证件类型" :rules="[{ required: true }]">
+          <a-select v-model:value="formState.idcardType">
+            <a-select-option :value="1">中国大陆身份证</a-select-option>
+            <a-select-option :value="2">港澳台(身份证/居民通行证)</a-select-option>
+            <a-select-option :value="3">护照(限境外人士)</a-select-option>
+          </a-select>
         </a-form-item>
         <a-form-item label="法人／实际控制人证件号码" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入法人／实际控制人证件号码" />
+          <a-input v-model:value="formState.idcardNo" allowClear placeholder="输入法人／实际控制人证件号码" />
         </a-form-item>
         <a-form-item label="证件照正面" :rules="[{ required: true }]">
           <template class="flex justify-between">
-            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="avatar" list-type="picture-card"
-              :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              :before-upload="beforeUpload" @change="handleChange">
-              <img v-if="formState.bizLicense" :src="formState.bizLicense" alt="avatar" />
+            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="file" list-type="picture-card"
+              :show-upload-list="false" :action="action" @change="handleChange2">
+              <img v-if="formState.idcardFront" :src="formState.idcardFront" class="w-150px h-100px" alt="avatar" />
               <div v-else>
                 <loading-outlined v-if="loading"></loading-outlined>
                 <plus-outlined v-else></plus-outlined>
@@ -228,10 +330,9 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
         </a-form-item>
         <a-form-item label="证件照反面" :rules="[{ required: true }]">
           <template class="flex justify-between">
-            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="avatar" list-type="picture-card"
-              :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              :before-upload="beforeUpload" @change="handleChange">
-              <img v-if="formState.bizLicense" :src="formState.bizLicense" alt="avatar" />
+            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="file" list-type="picture-card"
+              :show-upload-list="false" :action="action" @change="handleChange3">
+              <img v-if="formState.idcardBack" :src="formState.idcardBack" class="w-150px h-100px" alt="avatar" />
               <div v-else>
                 <loading-outlined v-if="loading"></loading-outlined>
                 <plus-outlined v-else></plus-outlined>
@@ -246,10 +347,10 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
         </a-form-item>
         <a-form-item label="手持证件照" :rules="[{ required: true }]">
           <template class="flex justify-between">
-            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="avatar" list-type="picture-card"
-              :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-              :before-upload="beforeUpload" @change="handleChange">
-              <img v-if="formState.bizLicense" :src="formState.bizLicense" alt="avatar" />
+            <a-upload class="avatar-uploader" v-model:file-list="fileList" name="file" list-type="picture-card"
+              :show-upload-list="false" :action="action" @change="handleChange4">
+              <img v-if="formState.bizLicenseIdcard" :src="formState.bizLicenseIdcard" class="w-150px h-100px"
+                alt="avatar" />
               <div v-else>
                 <loading-outlined v-if="loading"></loading-outlined>
                 <plus-outlined v-else></plus-outlined>
@@ -263,25 +364,34 @@ const beforeUpload = (file: UploadProps['fileList'][number]) => {
           </template>
         </a-form-item>
         <a-form-item label="公司联系人" :rules="[{ required: true }]">
-          <a-input v-model:value="formState.password" allowClear placeholder="输入公司联系人" />
+          <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.password" allowClear placeholder="输入联系电话" />
+          <a-input v-model:value="formState.mobile" allowClear placeholder="输入联系电话" />
         </a-form-item>
       </a-form>
+      <!-- 提交成功 -->
+      <div v-if="current === 2" class="flex flex-col items-center">
+        <img class="w-88px h-88px" src="@/assets/images/15.png" alt="" srcset="">
+        <div class="text-24px font-500 text-dark-500 leading-33px mt-30px mb-10px">提交成功</div>
+        <div class="flex text-16px text-gray-400">
+          <div>恭喜您，资料提交成功，去</div>
+          <div @click="toLogin" class="text-blue-500 cursor-pointer">登录</div>
+        </div>
+      </div>
     </div>
     <div class="w-600px flex items-center justify-between mb-100px">
-      <a-button v-if="current > 0" @click="prev">上一步</a-button>
+      <a-button v-if="current === 1" @click="prev">上一步</a-button>
       <a-button class="w-600px mt-50px" v-if="!current" :disabled="firstDisabled" type="primary" @click="next">下一步
       </a-button>
-      <a-button class="w-400px" v-if="current === 1" type="primary" @click="submit">
+      <a-button class="w-400px" v-if="current === 1" :disabled="submitDisabled" type="primary" @click="submit">
         提交资料
       </a-button>
     </div>
   </div>
 </template>
 <style lang='scss' scoped>
-.avatar-uploader ::v-deep .ant-upload {
+.avatar-uploader :deep(.ant-upload) {
   width: 150px !important;
   height: 100px !important;
 }