wangxiang
2 years ago
10 changed files with 229 additions and 56 deletions
@ -1,34 +0,0 @@
@@ -1,34 +0,0 @@
|
||||
<template> |
||||
<CollapseContainer title="企业认证" :canExpan="false"> |
||||
|
||||
</CollapseContainer> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { List } from 'ant-design-vue'; |
||||
import { defineComponent } from 'vue'; |
||||
import { CollapseContainer } from '/@/components/Container/index'; |
||||
import Icon from '/@/components/Icon/index'; |
||||
|
||||
export default defineComponent({ |
||||
components: { |
||||
CollapseContainer |
||||
}, |
||||
setup() { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.avatar { |
||||
font-size: 40px !important; |
||||
} |
||||
|
||||
.extra { |
||||
float: right; |
||||
margin-top: 10px; |
||||
margin-right: 30px; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,57 @@
@@ -0,0 +1,57 @@
|
||||
<template> |
||||
<div class="step1"> |
||||
<BasicForm @register="registerForm"/> |
||||
</div> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { defineComponent, ref, unref } from 'vue'; |
||||
import { BasicForm, useForm } from '/@/components/Form'; |
||||
import { formSchema } from '/@/views/common/push/pushThirdParty/thirdParty.data'; |
||||
import { addPushThirdParty } from '/@/api/platform/common/controller/pushThirdParty'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
||||
export default defineComponent({ |
||||
components: { |
||||
BasicForm |
||||
}, |
||||
emits: ['next'], |
||||
setup(_, { emit }) { |
||||
const submitBtnLoading = ref(false); |
||||
const { createMessage } = useMessage(); |
||||
const [registerForm, { validate }] = useForm({ |
||||
labelWidth: 100, |
||||
schemas: formSchema, |
||||
submitButtonOptions: { |
||||
text: '提交审核', |
||||
preIcon: 'fa-regular:save', |
||||
loading: unref(submitBtnLoading), |
||||
onClick: handleSubmit |
||||
}, |
||||
actionColOptions: { |
||||
span: 14, |
||||
}, |
||||
showResetButton: false |
||||
}); |
||||
|
||||
async function handleSubmit() { |
||||
try { |
||||
const formData = await validate(); |
||||
submitBtnLoading.value = true; |
||||
await addPushThirdParty(formData); |
||||
createMessage.success('保存成功!'); |
||||
emit('next'); |
||||
} finally { |
||||
submitBtnLoading.value = false; |
||||
} |
||||
} |
||||
|
||||
return { registerForm }; |
||||
}, |
||||
}); |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.step1 { |
||||
width: 450px; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,42 @@
@@ -0,0 +1,42 @@
|
||||
<template> |
||||
<div class="step2"> |
||||
<AResult title="等待审核" sub-title="预计在一个小时内完成"> |
||||
<template #icon> |
||||
<SmileOutlined/> |
||||
</template> |
||||
<template #extra> |
||||
<a-button type="primary" |
||||
@click="handleSubmit" |
||||
>撤回申请</a-button> |
||||
</template> |
||||
</AResult> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { Result } from 'ant-design-vue'; |
||||
import { delRevokeAuth } from '/@/api/platform/common/controller/pushThirdParty'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import { SmileOutlined } from '@ant-design/icons-vue'; |
||||
|
||||
const AResult = Result; |
||||
const { createConfirm } = useMessage(); |
||||
const emit = defineEmits(['previous']); |
||||
|
||||
async function handleSubmit() { |
||||
createConfirm({ |
||||
iconType: 'warning', |
||||
title: '温馨提醒', |
||||
content: '是否确认撤回申请?', |
||||
onOk: async () => { |
||||
await delRevokeAuth(); |
||||
emit('previous'); |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.step2 { |
||||
width: 450px; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
<template> |
||||
<div class="step3"> |
||||
<AResult status="success" title="企业认证" sub-title="已认证"> |
||||
<template #extra> |
||||
<a-button @click="handleViewInfo">查看企业信息</a-button> |
||||
</template> |
||||
</AResult> |
||||
<ThirdPartyModal @register="registerModal"/> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { Result } from 'ant-design-vue'; |
||||
const AResult = Result; |
||||
import { useModal } from '/@/components/Modal'; |
||||
import ThirdPartyModal from '/@/views/common/push/pushThirdParty/ThirdPartyModal.vue'; |
||||
import { useUserStore } from '/@/store/modules/user'; |
||||
|
||||
const userStore = useUserStore(); |
||||
const userInfoStore = userStore.getUserInfo; |
||||
const [registerModal, { openModal }] = useModal(); |
||||
|
||||
function handleViewInfo() { |
||||
openModal(true, { _tag: 'view', record: { id: userInfoStore.id } }); |
||||
} |
||||
|
||||
</script> |
||||
<style lang="less" scoped> |
||||
.step3 { |
||||
width: 600px; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
import { FormSchema } from '/@/components/Form'; |
||||
@ -0,0 +1,74 @@
@@ -0,0 +1,74 @@
|
||||
<template> |
||||
<div ref="wrapperRef" |
||||
class="step-form-form" |
||||
:style="getContentStyle" |
||||
> |
||||
<div> |
||||
<ASteps :current="current"> |
||||
<AStep title="填写企业信息"/> |
||||
<AStep title="等待审核"/> |
||||
<AStep title="认证成功"/> |
||||
</ASteps> |
||||
</div> |
||||
<div class="mt-5"> |
||||
<Step1 v-show="current === 0" @next="current++"/> |
||||
<Step2 v-show="current === 1" @previous="current--"/> |
||||
<Step3 v-show="current === 2"/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { ref, computed, CSSProperties, unref, onMounted } from 'vue'; |
||||
import Step1 from './Step1.vue'; |
||||
import Step2 from './Step2.vue'; |
||||
import Step3 from './Step3.vue'; |
||||
import { Steps } from 'ant-design-vue'; |
||||
import { useContentHeight } from '/@/hooks/web/useContentHeight'; |
||||
import { getPushThirdPartyByUserId } from '/@/api/platform/common/controller/pushThirdParty'; |
||||
import type { PushThirdParty } from '/@/api/platform/common/entity/pushThirdParty'; |
||||
import { useUserStore } from '/@/store/modules/user'; |
||||
|
||||
const ASteps = Steps; |
||||
const AStep = Steps.Step; |
||||
const wrapperRef = ref(null); |
||||
const current = ref(0); |
||||
const pushThirdParty = ref<PushThirdParty>(); |
||||
const userStore = useUserStore(); |
||||
const userInfoStore = userStore.getUserInfo; |
||||
const { contentHeight } = useContentHeight( |
||||
computed(() => true), |
||||
wrapperRef, |
||||
[], |
||||
[], |
||||
ref(30)); |
||||
const getContentStyle = computed((): CSSProperties => ({ minHeight: `${unref(contentHeight)}px` })); |
||||
|
||||
onMounted(async () => { |
||||
await refreshPushThirdParty(); |
||||
}); |
||||
|
||||
async function refreshPushThirdParty() { |
||||
const result = await getPushThirdPartyByUserId(userInfoStore.id); |
||||
pushThirdParty.value = result; |
||||
switch (result?.status) { |
||||
case '0': |
||||
current.value = 1; |
||||
break; |
||||
case '1': |
||||
current.value = 2; |
||||
break; |
||||
default: |
||||
current.value = 0; |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
<style lang="less" scoped> |
||||
.step-form-form { |
||||
background: @component-background; |
||||
|
||||
.ant-steps { |
||||
padding: 30px 45px 30px 45px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue