feat: 信息弹窗的form内容完成，待对接和接入数据

components.d.ts

@@ -32,6 +32,8 @@ declare module 'vue' {
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
     ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     AsyncButton: typeof import('./src/components/asyncButton/index.vue')['default']
     ATable: typeof import('ant-design-vue/es')['Table']

src/components/modal/index.vue

@@ -8,15 +8,15 @@ enum STATUS {
   SecondStep = 'success',
 }
 const status = ref(STATUS.FirstStep)
-const countNum = ref(20)
+const countNum = ref(5)
 
 const onSuccess = (val: CUR_STATUS) => {
   status.value = STATUS.SecondStep
-  // countDown()
+  countDown()
 }
 
 const countDown = () => {
-  countNum.value = 20
+  countNum.value = 5
   const timer = setInterval(() => {
     countNum.value--
     if (countNum.value === 0) {
@@ -33,12 +33,15 @@ const countDown = () => {
       <user-info @success="onSuccess" v-model:visible="visible" />
     </div>
     <div v-if="status === STATUS.SecondStep" class="text-center py-100px">
-      <div>
-        <img class="w-88px h-88px" src="@/assets/images/smile.png" alt="" />
+      <div class="px-80px">
+        <img class="w-88px h-88px" src="@/assets/images/success.png" alt="" />
         <div>
-          <h3 class="c-#000 fw-700 fs-34 mb-4px mt-37px">Information submitted</h3>
-          <div class="c-333 mb-26px">We will conduct the audit within 7 working days, and the audit results will be communicated via email</div>
-          <div class="c-333 mb-26px">You can view the submission form in the Personal Center - My Profile</div>
+          <h3 class="c-#000 fw-700 fs-34 mb-10px mt-38px">Information submitted</h3>
+          <div class="c-#999 mb-20px">We will conduct the audit within 7 working days, and the audit results will be communicated via email</div>
+          <div class="c-#999 mb-20px">You can view the submission form in the Personal Center - My Profile</div>
+        </div>
+        <div class="c-#999 mt-20px">
+          {{ countNum }}s后自动关闭
         </div>
       </div>
     </div>

src/components/modal/userInfo.vue

@@ -1,115 +1,255 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
+import type { Rule } from 'ant-design-vue/es/form'
+import dayjs from 'dayjs'
+import type { Dayjs } from 'dayjs'
 import { getIndustryCategoryApi } from 'API/common'
-import { CUR_STATUS } from '@/enums/common'
 import { submitCompanyApi, getCompanyInfoApi } from 'API/user'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 const visible = defineModel('visible', { default: false })
 const emit = defineEmits(['success'])
-
-const checkedList = ref([])
-const checkOther = ref(false)
-const otherContent = ref()
-
-const plainOptions = ['海外资讯、出海信息、方法论案例等', '出海会员俱乐部和圈层活动', '海外游学、考察、资源对接等', '出海/营销等具体项目咨询']
-const postForm = ref<any>({
-  busLicense: '',
-  name: '',
+const postFormRef = ref()
+const postForm = ref({
+  type: '1', // 0代表个人，1代表公司
   account: '',
-  regCode: '',
-  legalMan: '',
-  address: '',
-  contactName: '',
-  contactMobile: '',
-  contactPosition: '',
-  wxNumber: '',
-  contactEmail: '',
-  category: '',
-  categoryTemporaryArr: null,
-  purpose: '',
+  firstName: '',
+  lastName: '',
+  areaCode: '+86',
+  phone: '',
+  country: undefined,
+  companyName: '',
+  position: '',
+  dateOfIncorporation: '',
+  companySize: undefined,
+  businessType: '',
+  applicationReason: '',
+  promoteBusiness: '',
+  payMethod: '0',
+  paypalEmail: '',
+  paypalBeneficiarysName: '',
+  bankAccountName: '',
+  bankAccountNumber: '',
+  bankCardCode: '',
+  bankName: '',
+  bankAddress: '',
 })
-const activeTab = ref('name')
-const companyName = ref()
-
-const options = ref<any>([])
-
-watch(
-  () => checkOther.value,
-  (value) => {
-    if (!value) {
-      otherContent.value = ''
-    }
-  }
-)
-
-const handleUploadSuccess = (fileList: any) => {
-  if (fileList.length) {
-    const data = fileList[0].response.result
-    postForm.value.address = data.address
-    postForm.value.name = data.companyName
-    postForm.value.legalMan = data.legalMan
-    postForm.value.regCode = data.regCode
-  }
+const postFormRules: Record<string, Rule[]> = {
+  type: [{ required: true, message: 'Type is required', trigger: 'change' }],
+  firstName: [{ required: true, message: 'First Name is required', trigger: 'change' }],
+  lastName: [{ required: true, message: 'Last Name is required', trigger: 'change' }],
+  areaCode: [{ required: true, message: 'Area code is required', trigger: 'change' }],
+  phone: [{ required: true, message: 'Phone Number is required', trigger: 'change' }],
+  country: [{ required: true, message: 'Country is required', trigger: 'change' }],
+  companyName: [{ required: true, message: 'Company Name is required', trigger: 'change' }],
+  companySize: [{ required: true, message: 'Company Size is required', trigger: 'change' }],
+  position: [{ required: true, message: 'Position is required', trigger: 'change' }],
+  dateOfIncorporation: [{ required: true, message: 'Date of Incorporation is required', trigger: 'change' }],
+  payMethod: [{ required: true, message: 'Pay Method is required', trigger: 'change' }],
+  businessType: [{ required: true, message: 'Business Type is required', trigger: 'change' }],
+  applicationReason: [{ required: true, message: 'Application Reason is required', trigger: 'change' }],
+  promoteBusiness: [{ required: true, message: 'How to promote EJET business is required', trigger: 'change' }],
+  paypalEmail: [{ required: true, message: 'PayPal Email is required', trigger: 'change' }],
+  paypalBeneficiarysName: [{ required: true, message: "Beneficiary's Name is required", trigger: 'change' }],
+  bankAccountName: [{ required: true, message: 'Bank Account Name is required', trigger: 'change' }],
+  bankAccountNumber: [{ required: true, message: 'Bank Account Number is required', trigger: 'change' }],
+  bankCardCode: [{ required: true, message: 'Bank Card Code is required', trigger: 'change' }],
+  bankName: [{ required: true, message: 'Bank Name is required', trigger: 'change' }],
+  bankAddress: [{ required: true, message: 'Bank Address is required', trigger: 'change' }],
 }
-const getCompanyInfo = async () => {
-  try {
-    if (!companyName.value) {
-      return message.error('请输入企业名称查询')
-    }
-    const res = await getCompanyInfoApi({ companyName: companyName.value })
-    if (res.data.success) {
-      postForm.value.address = res.data.result.address
-      postForm.value.name = res.data.result.companyName
-      postForm.value.legalMan = res.data.result.legalMan
-      postForm.value.regCode = res.data.result.regCode
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-const handleOther = () => {
-  let otherStr = otherContent.value ? (checkedList.value.length ? '&' + otherContent.value : otherContent.value) : ''
-  let checkedListStr = checkedList.value.length ? checkedList.value.join('&') : ''
-  return checkedListStr + otherStr
+const infoType = computed(() => {
+  return !!+postForm.value.type
+})
+const payType = computed(() => {
+  return !!+postForm.value.payMethod
+})
+const disabledDate = (current: Dayjs) => {
+  return current && current > dayjs().endOf('day')
 }
-
 const onSubmit = async () => {
   try {
-    postForm.value.account = userStore.userInfo.accountEmail || userStore.userInfo.phoneNumber
-    const params = {
-      ...postForm.value,
-    }
-    const res = await submitCompanyApi(params)
-    if (res.data.success) {
-      emit('success')
-    }
+    // postFormRef.value.validate().then(async () => {
+    //   console.log('values', postForm.value)
+    //   // const userStore = useUserStore()
+    //   // userStore.register((postForm.value)).catch(() => {
+    //   //   postForm.isUnlock = false
+    //   // })
+    // })
+    emit('success')
   } catch (error) {
     console.log('error---', error)
   }
 }
-const getCategoryList = async () => {
-  const res = await getIndustryCategoryApi({ async: 0, pcode: 'C05' })
-  if (res.data.success) {
-    options.value = res.data.result || []
-  }
-  // const res = await apiCategory({ all: false, code: 'C05' })
-  // if (res.data.success) {
-  //   options.value = res.data.result || []
-  // }
-}
-getCategoryList()
 </script>
 
 <template>
-  <div class="p-40px">
+  <div class="p-20px">
     <div class="text-32px fw-700 text-#3d3d3d text-center">Improve Account Information</div>
-    <div class="text-14px text-#999 text-center my-10px">Improve information to ensure that commissions are received normally</div>
-    <div>
-      <div>撒噶时光给</div>
+    <div class="text-14px text-#999 text-center mt-10px">Improve information to ensure that commissions are received normally</div>
+    <div class="mt-30px px-20px">
+      <a-form ref="postFormRef" :model="postForm" :rules="postFormRules" :colon="false">
+        <a-form-item class="custom-form-item" label="" name="type">
+          <a-select class="w-full lh-48px" placeholder="*Type" v-model:value="postForm.type">
+            <a-select-option value="0">Personal</a-select-option>
+            <a-select-option value="1">Company</a-select-option>
+          </a-select>
+        </a-form-item>
+        <div class="flex gap-20px">
+          <a-form-item class="custom-form-item w-50%" label="" name="firstName">
+            <a-input v-model:value="postForm.firstName" placeholder="*First Name" size="large" />
+          </a-form-item>
+          <a-form-item class="custom-form-item w-50%" label="" name="lastName">
+            <a-input v-model:value="postForm.lastName" placeholder="*Last Name" size="large" />
+          </a-form-item>
+        </div>
+        <a-form-item class="custom-form-item—b" label="" name="phone">
+          <a-input-group compact>
+            <a-select v-model:value="postForm.areaCode" class="w-30% h-48px" placeholder="*Area code">
+              <a-select-option value="Zhejiang">Zhejiang</a-select-option>
+              <a-select-option value="Jiangsu">Jiangsu</a-select-option>
+            </a-select>
+            <a-input v-model:value="postForm.phone" style="width: 70%" placeholder="*Phone Number" />
+          </a-input-group>
+        </a-form-item>
+        <a-form-item class="custom-form-item" label="" name="country">
+          <a-select class="w-full" placeholder="*Country" v-model:value="postForm.country">
+            <a-select-option value="lucy">lucy</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- 公司 部分-->
+        <a-form-item v-if="infoType" class="custom-form-item" label="" name="companyName">
+          <a-input v-model:value="postForm.companyName" placeholder="*Corporate Name" size="large" />
+        </a-form-item>
+        <a-form-item v-if="infoType" class="custom-form-item" label="" name="position">
+          <a-input v-model:value="postForm.position" placeholder="*Position" size="large" />
+        </a-form-item>
+        <a-form-item v-if="infoType" class="custom-form-item" label="" name="dateOfIncorporation">
+          <a-date-picker v-model:value="postForm.dateOfIncorporation" :disabledDate="disabledDate" />
+        </a-form-item>
+        <a-form-item v-if="infoType" class="custom-form-item" label="" name="companySize">
+          <a-select class="w-full" placeholder="*Company Size" v-model:value="postForm.companySize">
+            <a-select-option value="lucy">公司规模</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if="infoType" class="custom-form-item" label="" name="businessType">
+          <a-textarea v-model:value="postForm.businessType" placeholder="*Business type" :rows="3" :showCount="true" :maxlength="100" />
+        </a-form-item>
+        <!-- 公司 部分-->
+
+        <a-form-item class="custom-form-item" label="" name="applicationReason">
+          <a-textarea v-model:value="postForm.applicationReason" placeholder="*Application Reason" :rows="3" :showCount="true" :maxlength="100" />
+        </a-form-item>
+        <a-form-item class="custom-form-item" label="" name="promoteBusiness">
+          <a-textarea
+            v-model:value="postForm.promoteBusiness"
+            placeholder="*How to promote EJET business"
+            :rows="3"
+            :showCount="true"
+            :maxlength="100"
+          />
+        </a-form-item>
+        <a-form-item class="custom-form-item" label="" name="payMethod">
+          <a-select class="w-full" placeholder="*Payment Method" v-model:value="postForm.payMethod">
+            <a-select-option value="0">PayPal</a-select-option>
+            <a-select-option value="1">Back Card</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- paypal ---start-->
+        <a-form-item v-if="!payType" class="custom-form-item" label="" name="paypalEmail">
+          <a-input v-model:value="postForm.paypalEmail" placeholder="*PayPal Email" size="large" />
+        </a-form-item>
+        <a-form-item v-if="!payType" class="custom-form-item !mb-10px" label="" name="paypalBeneficiarysName">
+          <a-input v-model:value="postForm.paypalBeneficiarysName" placeholder="*Beneficiary's Name" size="large" />
+        </a-form-item>
+        <div v-if="!payType" class="flex justify-end text-12px text-#999 mb-20px">Consistent with PayPal account real name authentication</div>
+        <!-- paypal --- end -->
+        <!-- 银行卡 ----start-->
+        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAccountName">
+          <a-input v-model:value="postForm.bankAccountName" placeholder="*name of account" size="large" />
+        </a-form-item>
+        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAccountNumber">
+          <a-input v-model:value="postForm.bankAccountNumber" placeholder="*Bank Account Number" size="large" />
+        </a-form-item>
+        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankCardCode">
+          <a-input v-model:value="postForm.bankCardCode" placeholder="*SWIFT/BIC Code" size="large" />
+        </a-form-item>
+        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankName">
+          <a-input v-model:value="postForm.bankName" placeholder="*Bank Name" size="large" />
+        </a-form-item>
+        <a-form-item v-if="payType" class="custom-form-item" label="" name="bankAddress">
+          <a-input v-model:value="postForm.bankAddress" placeholder="*Bank Address" size="large" />
+        </a-form-item>
+        <!-- 银行卡 --- end -->
+        <a-form-item label="">
+          <a-button class="w-full !bg-#0068FF !b-rd-6px text-#fff !fw-700 !h-56px !hover:text-#fff" @click="onSubmit" size="large"
+            >立即注册
+          </a-button>
+        </a-form-item>
+      </a-form>
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
+::v-deep(.custom-form-item) {
+  margin-bottom: 20px;
+  .ant-row {
+    .ant-form-item-control-input {
+      input {
+        border-radius: 6px;
+        height: 48px;
+      }
+    }
+    .ant-select {
+      .ant-select-selector {
+        border-radius: 6px;
+        height: 48px;
+        .ant-select-selection-placeholder {
+          height: 48px;
+          line-height: 48px;
+        }
+        .ant-select-selection-item {
+          line-height: 48px;
+        }
+      }
+    }
+    textarea {
+      border-radius: 6px;
+    }
+    .ant-picker {
+      width: 100%;
+      border-radius: 6px;
+      height: 48px;
+      .ant-picker-input {
+        input {
+          height: 48px;
+        }
+      }
+    }
+  }
+}
+::v-deep(.custom-form-item—b) {
+  margin-bottom: 20px;
+  .ant-row {
+    .ant-form-item-control-input {
+      input {
+        border-radius: 0 6px 6px 0;
+        height: 48px;
+      }
+    }
+    .ant-select {
+      .ant-select-selector {
+        border-radius: 6px 0 0 6px;
+        height: 48px;
+        .ant-select-selection-placeholder {
+          height: 48px;
+          line-height: 48px;
+        }
+        .ant-select-selection-item {
+          line-height: 48px;
+        }
+      }
+    }
+  }
+}
 </style>