From 0543f4989353b1ea9e83e3c5e6b14abd56b69167 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期六, 12 七月 2025 11:33:43 +0800
Subject: [PATCH] -
---
src/views/register/registernav.vue | 458 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 453 insertions(+), 5 deletions(-)
diff --git a/src/views/register/registernav.vue b/src/views/register/registernav.vue
index 12f11ea..70d883a 100644
--- a/src/views/register/registernav.vue
+++ b/src/views/register/registernav.vue
@@ -1,25 +1,465 @@
<template>
- <div class="content">
+ <div class="content pb-6">
<div class="header">
<div class="headimg">
<img width="167px" height="44px" src="@/assets/home/logo.png" alt="" />
</div>
</div>
- <div class="center w-[70%] h-[584px] bg-white mx-auto mt-25">
- <el-button type="primary">淇濆瓨</el-button>
+ <div class="center w-[70%] bg-white mx-auto m-12">
+ <div class="flex items-center p-5 pl-6">
+ <img src="@/assets/home/xian.png" alt="" />
+ <span style="margin-left: 5px">娉ㄥ唽鍚戝</span>
+ </div>
+ <div class="w-[95%] border-1 border-[#E5E5E5] mx-auto pt-5 pb-2">
+ <el-steps style="max-width: 100%" :active="active" align-center>
+ <el-step title="闃呰娉ㄥ唽鍗忚" />
+ <el-step title="濉啓鍩烘湰淇℃伅" />
+ <el-step title="淇℃伅鐧昏瀹屾垚" />
+ </el-steps>
+ </div>
+ <div v-if="active == 1" class="h-[100%]">
+ <div class="text-center pt-5 pb-1.5">娉ㄥ唽鏉℃</div>
+ <div
+ class="w-[95%] h-65 border-1 border-[#E5E5E5] mx-auto p-2 overflow-y-auto"
+ >
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ <h3>娉ㄥ唽閲囪喘渚涘簲鍟嗗簲鍏峰浠ヤ笅鏉′欢</h3>
+ </div>
+ </div>
+ <div v-else-if="active == 2" class="flex justify-center mt-5">
+ <el-form
+ ref="ruleFormRef"
+ style="width: 95%"
+ :model="state.ruleForm"
+ :rules="state.rules"
+ label-width="auto"
+ >
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="浼佷笟绫诲瀷">
+ <el-select
+ v-model="state.ruleForm.enterpriseType"
+ placeholder="璇烽�夋嫨"
+ clearable
+ >
+ <el-option label="鎴愮珛" value="Valid" />
+ <el-option label="椹冲洖" value="Rejected" />
+ <el-option label="鍏跺畠" value="Other" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row><div class="baseclass">鍩烘湰璧勬枡</div></el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="浜ゆ槗涓讳綋">
+ <el-input
+ v-model="state.ruleForm.transactionName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="钀ヤ笟鎵х収">
+ <el-upload
+ :limit="1"
+ :action="`${baseUrlApi('/api/upFile/upBizLicense')}`"
+ :show-file-list="false"
+ :on-success="handleAvatarSuccess"
+ :before-upload="beforeAvatarUpload"
+ >
+ <img
+ v-if="state.ruleForm.businessLicense"
+ :src="state.ruleForm.businessLicense"
+ class="avatar"
+ />
+ <el-button v-else type="primary">涓婁紶</el-button>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="浼佷笟鍚嶇О">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="缁熶竴绀句細淇＄敤浠ｇ爜">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="娉ㄥ唽璧勯噾">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ >
+ <template #append>涓囧厓</template></el-input
+ >
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+ <el-form-item label="娉曞畾浠ｈ〃浜�">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
+ <el-form-item label="浣忔墍鍦�">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="鑱旂郴鐢佃瘽">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="鎴愮珛鏃堕棿">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="涓昏惀涓氬姟">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="閭">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="娉曞畾浠ｈ〃浜�">
+ <el-upload>
+ <el-button type="primary">涓婁紶韬唤璇�</el-button>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="濮撳悕">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="韬唤璇�">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="鑱旂郴鐢佃瘽">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+ <el-form-item label="涓氬姟缁忓姙浜�">
+ <el-upload>
+ <el-button type="primary">涓婁紶韬唤璇�</el-button>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="濮撳悕">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="韬唤璇�">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="鑱旂郴鐢佃瘽">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+ <el-form-item label="寮�鎴疯">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
+ <el-form-item label="閾惰璐﹀彿">
+ <el-input
+ v-model="state.ruleForm.nickName"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <template v-else>
+ <el-result title="鎭枩鎮紝鐧昏瀹屾垚锛�">
+ <template #icon>
+ <img src="@/assets/home/result.png" />
+ </template>
+ <template #extra>
+ <el-button type="primary">纭</el-button>
+ </template>
+ </el-result>
+ </template>
+ <div v-if="active !== 3" class="mx-auto pt-2 pb-5 flex justify-center">
+ <el-button :disabled="active == 1" @click="backStep">涓婁竴姝�</el-button>
+ <el-button type="primary" @click="nextStep"
+ ><span v-if="active == 1">鍚屾剰</span>涓嬩竴姝�</el-button
+ >
+ </div>
</div>
</div>
</template>
-<script setup>
+<script setup lang="tsx">
+import { h, ref, reactive } from "vue";
+import type { FormInstance, FormRules, UploadProps } from "element-plus";
+import { message } from "@/utils/message";
+import { baseUrlApi } from "@/api/util";
+import {
+ addDialog,
+ closeDialog,
+ updateDialog,
+ closeAllDialog
+} from "@/components/ReDialog";
+
defineOptions({
name: "RegisterNav"
});
+const ruleFormRef = ref<FormInstance>();
+const state = reactive({
+ isShowPassword: false,
+ ruleForm: {
+ // 涓婚敭锛堝敮涓�鏍囪瘑锛�
+ id: null, // integer($int64)锛屽彲绌�
+ // 浼佷笟绫诲瀷锛堜粠棰勮浼佷笟绫诲瀷鍒楄〃涓�夋嫨锛�
+ enterpriseType: null, // string锛屽彲绌�
+ // 浜ゆ槗涓讳綋浠ｇ爜锛堝悓瑙掕壊浠ｇ爜锛屼笉鍙┖锛屾渶灏忛暱搴︿负1锛�
+ transactionCode: "", // string锛屽繀濉�
+ // 浜ゆ槗涓讳綋鍚嶇О
+ transactionName: null, // string锛屽彲绌�
+ // 钀ヤ笟鎵х収鏂囦欢璺緞
+ businessLicense: null, // string锛屽彲绌�
+ // 浼佷笟鍚嶇О
+ enterpriseName: null, // string锛屽彲绌�
+ // 缁熶竴绀句細淇＄敤浠ｇ爜
+ unifiedSocialCreditCode: null, // string锛屽彲绌�
+ // 娉ㄥ唽璧勯噾锛堝崟浣嶏細涓囧厓锛�
+ registeredCapital: null, // number($double)锛屽彲绌�
+ // 娉曞畾浠ｈ〃浜哄鍚�
+ legalRepresentativeName: null, // string锛屽彲绌�
+ // 娉曞畾浠ｈ〃浜鸿韩浠借瘉鏂囦欢璺緞
+ legalRepresentativeIdCard: null, // string锛屽彲绌�
+ // 娉曞畾浠ｈ〃浜鸿韩浠借瘉鍙风爜
+ legalRepresentativeIdNumber: null, // string锛屽彲绌�
+ // 娉曞畾浠ｈ〃浜鸿仈绯荤數璇�
+ legalRepresentativePhone: null, // string($tel)锛屽彲绌�
+ // 浼佷笟浣忔墍锛堜笅鎷夐�夋嫨锛屾殏浠ュ瓧绗︿覆鎺ユ敹锛�
+ residence: null, // string锛屽彲绌�
+ // 浼佷笟鑱旂郴鐢佃瘽
+ enterprisePhone: null, // string($tel)锛屽彲绌�
+ // 浼佷笟鎴愮珛鏃堕棿锛堟牸寮忕ず渚嬶細2025-07-08 14:56:54锛�
+ establishmentTime: null, // string($date-time)锛屽彲绌�
+ // 浼佷笟涓昏惀涓氬姟
+ mainBusiness: null, // string锛屽彲绌�
+ // 浼佷笟閭
+ enterpriseEmail: null, // string锛屽彲绌�
+ // 涓氬姟缁忓姙浜哄鍚�
+ operatorName: null, // string锛屽彲绌�
+ // 涓氬姟缁忓姙浜鸿韩浠借瘉鏂囦欢璺緞鎴栨爣璇嗭紙涓婁紶鍚庡瓨鍌ㄤ俊鎭級
+ operatorIdCard: null, // string锛屽彲绌�
+ // 涓氬姟缁忓姙浜鸿韩浠借瘉鍙风爜
+ operatorIdNumber: null, // string锛屽彲绌�
+ // 涓氬姟缁忓姙浜鸿仈绯荤數璇�
+ operatorPhone: null, // string($tel)锛屽彲绌�
+ // 浼佷笟寮�鎴疯
+ bankName: null, // string锛屽彲绌�
+ // 浼佷笟閾惰璐﹀彿
+ bankAccount: null // string锛屽彲绌�
+ },
+ type: "",
+ rules: {
+ phoneVCode: [
+ {
+ required: true,
+ message: "璇疯緭鍏ユ墜鏈洪獙璇佺爜",
+ trigger: "blur"
+ }
+ ],
+ nickName: [
+ {
+ required: true,
+ message: "璇疯緭鍏ュ鍚�",
+ trigger: "blur"
+ }
+ ],
+ phone: [
+ {
+ required: true,
+ message: "璇疯緭鍏ユ偍鐨勬墜鏈哄彿鐮�",
+ trigger: "blur"
+ }
+ ],
+ exRoleCode: [
+ {
+ required: true,
+ message: "璇烽�夋嫨瑙掕壊",
+ trigger: "blur"
+ }
+ ]
+ // code: [{ required: true, message: t('message.account.placeholder4'), trigger: 'blur' }],
+ },
+ loading: {
+ signIn: false
+ },
+ captchaImage: "",
+ rotateVerifyVisible: false,
+ // rotateVerifyImg: verifyImg,
+ // rotateVerifyImg: themeConfig.value.logoUrl,
+ secondVerEnabled: false,
+ // captchaEnabled: false,
+ isPassRotate: false,
+ capsLockVisible: false,
+ hideTenantForLogin: false,
+ expirySeconds: 60, // 楠岃瘉鐮佽繃鏈熸椂闂�
+ phoneSeconds: 0, // 鎵嬫満楠岃瘉鐮佸�掕鏃�
+ roleList: []
+});
+
+let active = ref(1);
+const nextStep = () => {
+ if (active.value >= 2) {
+ addDialog({
+ width: "20%",
+ title: "纭淇℃伅",
+ contentRenderer: () => (
+ <p>
+ 璇锋偍璁ょ湡鏍稿濉姤鐨勮祫鏂欐槸鍚︽纭紝濡傚洜濉姤閿欒褰卞搷鍚庣画鎶曟爣绛夋搷浣滐紝骞冲彴涓嶆壙鎷呬换浣曡矗浠伙紝鎵�鏈夊悗鏋滈渶瑕佽嚜琛屾壙鎷咃紝璇锋偍璋ㄦ厧濉啓锛�
+ </p>
+ ), // jsx 璇硶 锛堟敞鎰忓湪.vue鏂囦欢鍚敤jsx璇硶锛岄渶瑕佸湪script寮�鍚痩ang="tsx"锛�
+ closeCallBack: ({ options, args }) => {
+ // options.props 鏄搷搴斿紡鐨�
+ // const { formInline } = options.props as FormProps;
+ // const text = `濮撳悕锛�${formInline.user} 鍩庡競锛�${formInline.region}`;
+ if (args?.command === "cancel") {
+ // 鎮ㄧ偣鍑讳簡鍙栨秷鎸夐挳
+ message(`鎮ㄧ偣鍑讳簡鍙栨秷鎸夐挳锛屽綋鍓嶈〃鍗曟暟鎹负 `);
+ // active.value -= 1;
+ } else if (args?.command === "sure") {
+ active.value += 1;
+ message(`鎮ㄧ偣鍑讳簡纭畾鎸夐挳锛屽綋鍓嶈〃鍗曟暟鎹负 `);
+ } else {
+ message(
+ `鎮ㄧ偣鍑讳簡鍙充笂瑙掑叧闂寜閽垨绌虹櫧椤垫垨鎸変笅浜唀sc閿紝褰撳墠琛ㄥ崟鏁版嵁涓� `
+ );
+ }
+ }
+ });
+ return;
+ }
+ active.value += 1;
+};
+const backStep = () => {
+ active.value -= 1;
+};
+const handleAvatarSuccess: UploadProps["onSuccess"] = (
+ response,
+ uploadFile
+) => {
+ state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
+};
+
+const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
+ if (rawFile.type !== "image/jpeg") {
+ message(`璇蜂笂浼爅peg绫诲瀷鐨勫浘鐗嘸, {
+ type: "error"
+ });
+ return false;
+ } else if (rawFile.size / 1024 / 1024 > 2) {
+ message(`鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB锛乣, {
+ type: "error"
+ });
+ return false;
+ }
+ return true;
+};
</script>
<style lang="scss" scoped>
.content {
background-color: #f8f8f8;
width: 100%;
- height: 100%;
+ // height: 100%;
.header {
display: flex;
align-items: center;
@@ -32,5 +472,13 @@
margin: 0 auto;
}
}
+ :deep .el-step__icon {
+ font-size: 12px;
+ height: 20px;
+ width: 20px;
+ }
+}
+:deep .el-step__title {
+ font-size: 12px;
}
</style>
--
Gitblit v1.9.1