1

src/api/index.js

@@ -1,10 +1,10 @@
 import request from '@/utils/request';
-
+const HOST = 'http://localhost:9000/dev/admin/dj/open/kyc'
 
 // 获取KYC级别
 export function getKyc(data) {
     return request({
-        url: '/dev/admin/dj/open/kyc/level',
+        url: HOST + '/level',
         method: 'post',
         data
     });
@@ -13,7 +13,7 @@ export function getKyc(data) {
 // 获取国家代码
 export function getCountryCode() {
     return request({
-        url: '/dev/admin/dj/open/kyc/countries',
+        url: HOST + '/countries',
         method: 'get',
     });
 }
@@ -21,7 +21,7 @@ export function getCountryCode() {
 // 基础KYC认证
 export function submitBasic(data) {
     return request({
-        url: '/dev/admin/dj/open/kyc/basic',
+        url: HOST + '/basic',
         method: 'post',
         data
     });
@@ -30,7 +30,7 @@ export function submitBasic(data) {
 // 进阶KYC认证
 export function submitAdvanced(data) {
     return request({
-        url: '/dev/admin/dj/open/kyc/advanced',
+        url: HOST + '/advanced',
         method: 'post',
         data,
         headers: {
@@ -42,7 +42,7 @@ export function submitAdvanced(data) {
 // 高级KYC认证
 export function submitPremium(data) {
     return request({
-        url: '/dev/admin/dj/open/kyc/premium',
+        url: HOST + '/premium',
         method: 'post',
         data,
         headers: {
@@ -52,9 +52,9 @@ export function submitPremium(data) {
 }
 
 // 最终接口
-export function apiFinal(data) {
+export function toPay(data) {
     return request({
-        url: '/dev/admin/dj/open/kyc/toPay',
+        url: HOST + '/toPay',
         method: 'post',
         data
     });

src/utils/request.js

@@ -15,14 +15,14 @@ service.interceptors.request.use(
 service.interceptors.response.use(
     response => {
         const res = response.data;
-        if (res.code !== 200) {
+        if (res.code !== 1000) {
             ElMessage({
                 message: res.message,
                 type: 'error',
             });
             return Promise.reject(new Error(res.message || 'Error'));
         } else {
-            return res;
+            return res.data;
         }
     },
     error => {

src/views/first.vue

@@ -1,106 +1,119 @@
 <template>
     <div class="first">
-        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" label-position="top" style="max-width: 600px; margin: 0 auto;">
-            <el-form-item label="Out user id" prop="outUserId">
-                <el-input v-model="form.outUserId" placeholder="Please enter" />
-            </el-form-item>
-            <el-form-item label="Customer name" prop="customerName">
+        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" label-position="top"
+            style="max-width: 600px; margin: 0 auto;">
+            <el-form-item label="Name" prop="customerName">
                 <el-input v-model="form.customerName" placeholder="Please enter" />
             </el-form-item>
-            <el-form-item label="Customer email" prop="customerEmail">
+            <el-form-item label="Email" prop="customerEmail">
                 <el-input v-model="form.customerEmail" placeholder="Please enter" />
             </el-form-item>
-            <el-form-item label="Country code" prop="countryCode">
-                <el-select v-model="form.countryCode" placeholder="Please select" clearable>
-                    <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.code" />
+            <el-form-item label="Country" prop="countryCode">
+                <el-select v-model="form.countryCode" placeholder="Please select" filterable clearable>
+                    <el-option v-for="(item, index) in countries" :key="index" :label="item.name" :value="item.code" />
                 </el-select>
             </el-form-item>
-            <el-form-item label="Country of residence" prop="residenceCountry">
-                <el-input v-model="form.residenceCountry" readonly placeholder="Please enter" />
+            <el-form-item label="Country Of Residence" prop="residenceCountry">
+                <el-select v-model="form.residenceCountry" placeholder="Please select" filterable clearable>
+                    <el-option v-for="(item, index) in residenceCountires" :key="index" :label="item.name" :value="item.code" />
+                </el-select>
             </el-form-item>
             <el-form-item label="Birthday" prop="birthDate">
-                <el-date-picker v-model="form.birthDate" type="date" placeholder="Pick a date" clearable style="width: 100%;" />
+                <el-date-picker v-model="form.birthDate" type="date" placeholder="Pick a date" clearable format="YYYY-MM-DD HH:mm:ss"
+                    style="width: 100%;" />
             </el-form-item>
             <el-form-item style="padding-top: 50px;">
-                <el-button type="primary" @click="handleSubmit" size="large" style="width: 60%; margin: 0 auto;">next</el-button>
+                <el-button type="primary" @click="handleSubmit" :loading="loading" size="large"
+                    style="width: 60%; margin: 0 auto;">Next</el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
 
 <script setup>
-    import { reactive, ref } from 'vue'
-    import { useRoute, useRouter } from 'vue-router'
-    import { getKyc, getCountryCode, submitBasic } from '@/api'
-    import { ElMessage } from 'element-plus';
+import { reactive, ref, defineProps, onMounted, defineEmits } from 'vue'
+import { getCountryCode, submitBasic } from '@/api'
+import { ElMessage } from 'element-plus';
 
-    const route = useRoute()
-    const $router = useRouter()
-    let t = route.query || ''
-    let page = {
-        '1': '/',
-        '2': '/second',
-        '3': '/third',
-    }
-    // 判断到哪一步
-    // getKyc(t).then(res => {
-    //     $router.push(page[res.data.level])
-    // })
-    
-    // 请求选项
-    // let list = ref([])
-    // getCountryCode().then(res => {
-    //     list = res.data
+const loading = ref(false)
+
+const emits = defineEmits(['updateCustomerId'])
+
+const props = defineProps({
+    customerId: String,
+    outUserId: String,
+    orderNo: String,
+})
+
+const countries = ref([]);
+const residenceCountires = ref([]);
+
+const getCountries = async function () {
+    const list = await getCountryCode();
+    // const validCountry = ['AF', 'CD', 'CU', 'IR', 'KP', 'KR', 'ML', 'MM', 'SS', 'SD', 'EH', 'YE'];
+    // countries.value = list.filter(item => {
+    //     return validCountry.includes(item.code);
     // })
+    countries.value = list;
+    residenceCountires.value = list;
+}
 
-    const form = reactive({
-        outUserId: '',
-        customerName: '',
-        customerEmail: '',
-        countryCode: '',
-        residenceCountry: '',
-        birthDate: ''
-    })
+onMounted(() => {
+    getCountries();
+})
 
-    const rules = reactive({
-        outUserId: [
-            { required: true, message: 'Please enter the Out user id', trigger: 'blur' }
-        ],
-        customerName: [
-            { required: true, message: 'Please enter the Customer name', trigger: 'blur' }
-        ],
-        customerEmail: [
-            { required: true, message: 'Please enter the Customer email', trigger: 'blur' }
-        ],
-        countryCode: [
-            { required: true, message: 'Please select the Country code', trigger: 'change' }
-        ],
-        residenceCountry: [
-            { required: true, message: 'Please enter the Country of residence', trigger: 'blur' }
-        ],
-        birthDate: [
-            { required: true, message: 'Please select the Birthday', trigger: 'change' }
-        ] 
-    })
-    const ruleFormRef = ref()
-    const handleSubmit = async () => {
-        await ruleFormRef.value.validate(async (valid) => {
-            if (valid) {
-                await submitBasic({
-                    out_user_id: form.outUserId,
-                    customer_name: form.customerName,
-                    customer_email: form.customerEmail,
-                    country_code: form.countryCode,
-                    residence_country: form.residenceCountry,
-                    birth_date: form.birthDate
+
+const form = reactive({
+    customerName: '',
+    customerEmail: '',
+    countryCode: '',
+    residenceCountry: '',
+    birthDate: ''
+})
+
+const rules = reactive({
+    customerName: [
+        { required: true, message: 'Please enter the name', trigger: 'blur' }
+    ],
+    customerEmail: [
+        { required: true, message: 'Please enter the email', trigger: 'blur' }
+    ],
+    countryCode: [
+        { required: true, message: 'Please select the Country', trigger: 'change' }
+    ],
+    residenceCountry: [
+        { required: true, message: 'Please enter the Country of residence', trigger: 'blur' }
+    ],
+    birthDate: [
+        { required: true, message: 'Please select the Birthday', trigger: 'change' }
+    ]
+})
+const ruleFormRef = ref()
+const handleSubmit = async () => {
+    await ruleFormRef.value.validate(async (valid) => {
+        if (valid) {
+            loading.value = true;
+            try {
+                const data = await submitBasic({
+                    orderNo: props.orderNo,
+                    outUserId: props.outUserId,
+                    customerName: form.customerName,
+                    customerEmail: form.customerEmail,
+                    countryCode: form.countryCode,
+                    residenceCountry: form.residenceCountry,
+                    birthDate: form.birthDate
                 })
-                ElMessage({message: 'success',type: 'success'})
+                loading.value = false;
+                ElMessage({ message: 'Submit Success', type: 'success' })
                 setTimeout(() => {
-                    $router.push('/second')
+                    emits("updateCustomerId", data.customerId)
                 }, 800)
+            } catch (e) {
+                loading.value = false;
             }
-        })
-    }
+        }
+    })
+}
 
 </script>
 
@@ -108,6 +121,7 @@
 .first {
     padding: 20px;
 }
+
 .el-form-item {
     margin-bottom: 25px;
 }

src/views/kyc.vue

@@ -1,42 +1,82 @@
 <template>
     <div class="first">
-        <el-steps :active="1" align-center>
-            <el-step title="BASIC KYC" />
-            <el-step title="ADVANCED KYC" />
-            <el-step title="PREMIUM KYC" />
+        <el-steps :active="level" align-center>
+            <el-step title="BASIC" />
+            <el-step title="ADVANCED" />
+            <el-step title="PREMIUM" />
         </el-steps>
-        <first></first>
-        <second></second>
-        <third></third>
+        <first v-if="level === 1" :orderNo="orderNo" :customer-id="customerId" :out-user-id="outUserId"
+            @update-customer-id="onUpdateCustomerId"></first>
+        <second v-if="level === 2 && level <= levelEnd" :customer-id="customerId" @update-customer-id="onUpdateCustomerId"></second>
+        <third v-if="level === 3 && level <= levelEnd" :customer-id="customerId" @update-customer-id="onUpdateCustomerId"></third>
+        <el-result v-if="level > levelEnd && customerId" icon="success" title="Congratulations!" sub-title="You have completed the necessary KYC certification. .">
+            <template #extra>
+                <el-button :disabled="!canToPay" @click="clickToPay" type="primary">{{ canToPay ? 'Click To Pay' : 'Please Wait!'}}</el-button>
+            </template>
+        </el-result>
     </div>
 </template>
 
 <script setup>
-    import { reactive, ref, onMounted } from 'vue'
-    import { useRoute } from 'vue-router'
-    import { getKyc, getCountryCode, submitBasic } from '@/api'
-    import { ElMessage } from 'element-plus';
-    import first from './first.vue'
-    import second from './first.vue'
-    import third from './first.vue'
-
-    const route = useRoute()
-    let t = route.query || ''
-    console.log(t)
-
-    async getKycLevel() {
-        // const data = await this.getKyc()
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { getKyc, toPay } from '@/api'
+import first from './first.vue'
+import second from './second.vue'
+import third from './third.vue'
+
+const route = useRoute()
+const orderNo = route.query.t || ''
+const level = ref(1);
+const customerId = ref('');
+const outUserId = ref('');
+let levelEnd = 3;
+const canToPay = ref(false)
+let payUrl = '';
+
+const onUpdateCustomerId = function (newCustomerId) {
+    customerId.value = newCustomerId;
+    level.value++;
+    gotoPay();
+}
+
+const getKycLevel = async function () {
+    const data = await getKyc({ orderNo });
+    level.value = +data.level;
+    customerId.value = data.customerId;
+    outUserId.value = data.outUserId;
+    levelEnd = +data.levelEnd;
+    gotoPay();
+}
+
+const gotoPay = async function () {
+    if (level.value > levelEnd && customerId.value) {
+        const data = await toPay({
+            customerId: customerId.value,
+            orderNo
+        });
+        canToPay.value = true;
+        payUrl = data.payUrl;
+        setTimeout(function() {
+            clickToPay();
+        }, 2000)
     }
+}
 
-    onMounted(() => {
-        this.getKycLevel()
-    })
+const clickToPay = function() {
+    window.location.href = payUrl;
+}
+
+onMounted(() => {
+    getKycLevel()
+})
 </script>
 
 <style scoped lang="less">
 .first {
-    padding: 20px;
+    padding: 20px 0;
 }
+
 .el-form-item {
     margin-bottom: 25px;
 }

src/views/second.vue

@@ -2,14 +2,23 @@
     <div class="second">
         <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" label-position="top"
             style="max-width: 600px; margin: 0 auto;">
-            <el-form-item label="ID picture" required>
+            <el-form-item label="Document Type" prop="documentType">
+                <el-select v-model="form.documentType" placeholder="Please select" clearable>
+                    <el-option label="IDCARD" value="0" />
+                    <el-option label="PASSPORT" value="1" />
+                    <el-option label="DRIVINGLICENCE" value="2" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="Document Number" prop="documentNumber">
+                <el-input v-model="form.documentNumber" placeholder="Please enter" />
+            </el-form-item>
+            <el-form-item label="Front And Back Photos Of Identification Documents" required>
                 <el-col :span="11">
                     <el-form-item prop="frontSideDocument">
-                        <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
-                            accept=".jpg,.jpeg,.png"
-                            :on-success="(response, uploadFile, uploadFiles) => { handleAvatarSuccess(response, uploadFile, uploadFiles, 'frontSideDocument') }"
-                            :before-upload="beforeAvatarUpload">
-                            <img v-if="form.frontSideDocument" :src="form.frontSideDocument" class="avatar" />
+                        <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false"
+                            accept=".jpg,.jpeg,.png" :before-upload="beforeAvatarUpload"
+                            :on-change="(file, fileList) => { handleChange(file, fileList, 'frontSideDocument') }">
+                            <img v-if="fileObj.frontSideDocument" :src="fileObj.frontSideDocument" class="avatar" />
                             <el-icon v-else class="avatar-uploader-icon">
                                 <UserFilled />
                             </el-icon>
@@ -19,11 +28,10 @@
                 <el-col :span="2"></el-col>
                 <el-col :span="11">
                     <el-form-item prop="backSideDocument">
-                        <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
-                            accept=".jpg,.jpeg,.png"
-                            :on-success="(response, uploadFile, uploadFiles) => { handleAvatarSuccess(response, uploadFile, uploadFiles, 'backSideDocument') }"
-                            :before-upload="beforeAvatarUpload">
-                            <img v-if="form.backSideDocument" :src="form.backSideDocument" class="avatar" />
+                        <el-upload class="avatar-uploader" :show-file-list="false" accept=".jpg,.jpeg,.png"
+                            :before-upload="beforeAvatarUpload" :auto-upload="false"
+                            :on-change="(file, fileList) => { handleChange(file, fileList, 'backSideDocument') }">
+                            <img v-if="fileObj.backSideDocument" :src="fileObj.backSideDocument" class="avatar" />
                             <el-icon v-else class="avatar-uploader-icon">
                                 <UserFilled />
                             </el-icon>
@@ -31,59 +39,53 @@
                     </el-form-item>
                 </el-col>
             </el-form-item>
-            <el-form-item label="Customer photo" prop="customerPhoto">
+            <el-form-item label="Customer Photo" prop="customerPhoto">
                 <el-col :span="11">
-                    <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
-                        accept=".jpg,.jpeg,.png"
-                        :on-success="(response, uploadFile, uploadFiles) => { handleAvatarSuccess(response, uploadFile, uploadFiles, 'customerPhoto') }"
-                        :before-upload="beforeAvatarUpload">
-                        <img v-if="form.customerPhoto" :src="form.customerPhoto" class="avatar" />
+                    <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false"
+                        accept=".jpg,.jpeg,.png" :before-upload="beforeAvatarUpload"
+                        :on-change="(file, fileList) => { handleChange(file, fileList, 'customerPhoto') }">
+                        <img v-if="fileObj.customerPhoto" :src="fileObj.customerPhoto" class="avatar" />
                         <el-icon v-else class="avatar-uploader-icon">
                             <Avatar />
                         </el-icon>
                     </el-upload>
                 </el-col>
             </el-form-item>
-            <el-form-item label="Customer id" prop="customerId">
-                <el-input v-model="form.customerId" placeholder="Please enter" />
-            </el-form-item>
-            <el-form-item label="Document type" prop="documentType">
-                <el-select v-model="form.documentType" placeholder="Please select" clearable>
-                    <el-option label="IDCARD" value="0" />
-                    <el-option label="PASSPORT" value="1" />
-                    <el-option label="DRIVINGLICENCE" value="2" />
-                </el-select>
-            </el-form-item>
-            <el-form-item label="Document number" prop="documentNumber">
-                <el-input v-model="form.documentNumber" placeholder="Please enter" />
-            </el-form-item>
+
             <el-form-item style="padding-top: 50px;">
-                <el-button type="primary" @click="handleSubmit" size="large"
-                    style="width: 60%; margin: 0 auto;">next</el-button>
+                <el-button type="primary" @click="handleSubmit" size="large" :loading="loading"
+                    style="width: 60%; margin: 0 auto;">Next</el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { reactive, ref, defineProps, defineEmits } from 'vue'
 import { submitAdvanced } from '@/api'
 import { UserFilled, Avatar } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus';
 
-const $router = useRouter()
+const loading = ref(false)
 
-const action = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15')
+const emits = defineEmits(['updateCustomerId'])
+
+const props = defineProps({
+    customerId: String,
+})
 
 const form = reactive({
     frontSideDocument: '',
     backSideDocument: '',
     customerPhoto: '',
-    customerId: '',
     documentType: '',
     documentNumber: ''
 })
+const fileObj = reactive({
+    frontSideDocument: '',
+    backSideDocument: '',
+    customerPhoto: ''
+})
 
 const rules = reactive({
     frontSideDocument: [
@@ -95,9 +97,6 @@ const rules = reactive({
     customerPhoto: [
         { required: true, message: 'Please upload the Customer photo', trigger: 'blur' }
     ],
-    customerId: [
-        { required: true, message: 'Please enter the Customer id', trigger: 'blur' }
-    ],
     documentType: [
         { required: true, message: 'Please select the Document type', trigger: 'change' }
     ],
@@ -106,13 +105,14 @@ const rules = reactive({
     ]
 })
 
-const handleAvatarSuccess = (response, uploadFile, uploadFiles, type) => {
-    form[type].value = URL.createObjectURL(uploadFile.raw)
+const handleChange = (file, fileList, type) => {
+    form[type] = file.raw
+    fileObj[type] = URL.createObjectURL(file.raw)
 }
 
 const beforeAvatarUpload = (rawFile) => {
     if (!['image/jpeg', 'image/png', 'image/jpg'].includes(rawFile.type)) {
-        ElMessage.error('Picture format is incorrect, please reselect!')
+        ElMessage.error('The image format is limited to ". jpg", ". jpg", ". png", with a size of 1KB~5MB!')
         return false
     } else if (rawFile.size / 1024 / 1024 > 5) {
         ElMessage.error('Picture size can not exceed 5MB!')
@@ -125,18 +125,20 @@ const ruleFormRef = ref()
 const handleSubmit = async () => {
     await ruleFormRef.value.validate(async (valid) => {
         if (valid) {
-            await submitAdvanced({
-                front_side_document: form.frontSideDocument,
-                back_side_document: form.backSideDocument,
-                customer_photo: form.customerPhoto,
-                customer_id: form.customerId,
-                document_type: form.documentType,
-                document_number: form.documentNumber
-            })
-            ElMessage({ message: 'success', type: 'success' })
-            setTimeout(() => {
-                $router.push('/third')
-            }, 800)
+            loading.value = true;
+            try {
+                const data = await submitAdvanced({
+                    ...form,
+                    customerId: props.customerId
+                })
+                loading.value = false;
+                ElMessage({ message: 'Submit Success', type: 'success' })
+                setTimeout(() => {
+                    emits("updateCustomerId", data.customerId)
+                }, 800)
+            } catch (e) {
+                loading.value = false;
+            }
         }
     })
 }
@@ -151,8 +153,15 @@ const handleSubmit = async () => {
     margin-bottom: 25px;
 }
 
+.avatar-uploader .avatar {
+    width: 100%;
+    height: 100px;
+    display: block;
+}
+
 .avatar-uploader {
     width: 100%;
+    height: 100px;
 }
 
 .avatar-uploader .el-upload {

src/views/third.vue

@@ -2,74 +2,78 @@
     <div class="third">
         <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" label-position="top"
             style="max-width: 600px; margin: 0 auto;">
-            <el-form-item label="Residential address file" prop="residentialAddress">
-                <el-col :span="11">
-                    <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
-                        accept=".pdf,.docx,.doc"
-                        :on-success="(response, uploadFile, uploadFiles) => { handleAvatarSuccess(response, uploadFile, uploadFiles, 'residentialAddress') }"
-                        :before-upload="beforeAvatarUpload">
-                        <img v-if="form.residentialAddress" :src="form.residentialAddress" class="avatar" />
-                        <el-icon v-else class="avatar-uploader-icon">
-                            <DocumentAdd />
-                        </el-icon>
+            <el-form-item label="Proof Of Residential Address Document" prop="residentialAddress">
+                <el-col>
+                    <el-upload :auto-upload="false" :show-file-list="true" accept=".pdf,.docx,.doc"
+                        :before-upload="beforeAvatarUpload"
+                        :on-change="(file, fileList) => { handleChange(file, fileList, 'residentialAddress') }">
+                        <el-button type="primary">Click to upload</el-button>
+                        <template #tip>
+                            <span class="el-upload__tip">
+                                ( pdf/docx/doc files with a size less than 10MB. )
+                            </span>
+                        </template>
                     </el-upload>
                 </el-col>
             </el-form-item>
-            <el-form-item label="Income file" prop="income">
-                <el-col :span="11">
-                    <el-upload class="avatar-uploader" :action="action" :show-file-list="false"
-                        accept=".pdf,.docx,.doc"
-                        :on-success="(response, uploadFile, uploadFiles) => { handleAvatarSuccess(response, uploadFile, uploadFiles, 'income') }"
-                        :before-upload="beforeAvatarUpload">
-                        <img v-if="form.income" :src="form.income" class="avatar" />
-                        <el-icon v-else class="avatar-uploader-icon">
-                            <DocumentAdd />
-                        </el-icon>
+            <el-form-item label="Proof Of Income Document" prop="income">
+                <el-col>
+                    <el-upload :auto-upload="false" :show-file-list="true" accept=".pdf,.docx,.doc"
+                        :before-upload="beforeAvatarUpload"
+                        :on-change="(file, fileList) => { handleChange(file, fileList, 'income') }">
+                        <el-button type="primary">Click to upload</el-button>
+                        <template #tip>
+                            <span class="el-upload__tip">
+                                ( pdf/docx/doc files with a size less than 10MB. )
+                            </span>
+                        </template>
                     </el-upload>
                 </el-col>
             </el-form-item>
-            <el-form-item label="Customer id" prop="customerId">
-                <el-input v-model="form.customerId" placeholder="Please enter" />
-            </el-form-item>
             <el-form-item style="padding-top: 50px;">
                 <el-button type="primary" @click="handleSubmit" size="large"
-                    style="width: 60%; margin: 0 auto;">submit</el-button>
+                    style="width: 60%; margin: 0 auto;">Submit</el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { submitPremium, apiFinal } from '@/api'
+import { reactive, ref, defineProps, defineEmits } from 'vue'
+import { submitPremium } from '@/api'
 import { DocumentAdd } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus';
 
-const $router = useRouter()
+const loading = ref(false)
+
+const emits = defineEmits(['updateCustomerId'])
 
-const action = ref('https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15')
+const props = defineProps({
+    customerId: String,
+})
 
 const form = reactive({
     residentialAddress: '',
     income: '',
-    customerId: '',
+})
+
+const fileObj = reactive({
+    residentialAddress: '',
+    income: ''
 })
 
 const rules = reactive({
     residentialAddress: [
-        { required: true, message: 'Please upload the Residential address file', trigger: 'blur' }
+        { required: true, message: 'Please upload the Proof Of Residential Address Document', trigger: 'blur' }
     ],
     income: [
-        { required: true, message: 'Please upload the income file', trigger: 'blur' }
-    ],
-    customerId: [
-        { required: true, message: 'Please enter the Customer id', trigger: 'blur' }
-    ],
+        { required: true, message: 'Please upload the Proof Of Income Document', trigger: 'blur' }
+    ]
 })
 
-const handleAvatarSuccess = (response, uploadFile, uploadFiles, type) => {
-    form[type].value = URL.createObjectURL(uploadFile.raw)
+const handleChange = (file, fileList, type) => {
+    form[type] = file.raw
+    fileObj[type] = URL.createObjectURL(file.raw)
 }
 
 const beforeAvatarUpload = (rawFile) => {
@@ -86,12 +90,20 @@ const ruleFormRef = ref()
 const handleSubmit = async () => {
     await ruleFormRef.value.validate(async (valid) => {
         if (valid) {
-            await submitPremium({
-                residential_address: form.residentialAddress,
-                income: form.income,
-                customer_id: form.customerId,
-            })
-            ElMessage({ message: 'success', type: 'success' })
+            loading.value = true;
+            try {
+                const data = await submitPremium({
+                    ...form,
+                    customerId: props.customerId
+                })
+                loading.value = false;
+                ElMessage({ message: 'Submit Success', type: 'success' })
+                setTimeout(() => {
+                    emits("updateCustomerId", data.customerId)
+                }, 800)
+            } catch (e) {
+                loading.value = false;
+            }
         }
     })
 }