11

index.html

@@ -28,6 +28,7 @@
     justify-content: center; */
     width: 100%;
     height: 100%;
+    background-color: #f7e8e8;
   }
 
 

src/App.vue

@@ -37,13 +37,21 @@ const fontColor = computed(() => {
 </script>
 <style>
 @import '@/styles/public.scss';
-
+/* 表单居中 */
 .parent_box {
   padding: 0 19%;
 }
-
+/* 上传文件样式 */
 .img-upload {
   width: 184px !important;
   height: 144px !important;
 }
+/* 提示文字  选中文字颜色 */
+.hint_text_color {
+  color: #4080ff !important;
+}
+
+::v-deep .el-radio__inner {
+  border: 1px solid #999 !important;
+}
 </style>

src/components/Steps/index.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const props = defineProps({
+  list: Array,
+  modelValue: Number,
+});
+const emit = defineEmits(['update:modelValue']);
+const active = defineModel('modelValue', {
+  type: String,
+  required: true,
+  default: '',
+});
+</script>
+
+<template>
+  <div class="steps_box flex just-center">
+    <div v-for="(item, index) in props.list" :key="index" class="tc">
+      <img
+        :src="index <= active ? item.iconActive : item.icon"
+        style="width: 40px; height: 40px"
+      />
+      <div
+        :class="{
+          step_item_text: true,
+          hint_text_color: index <= active,
+        }"
+      >
+        {{ item.label }}
+      </div>
+      <ul
+        v-if="index != 0"
+        :class="{
+          step_item: true,
+          step_item_active: index <= active,
+          hint_text_color: index <= active,
+        }"
+      >
+        <li />
+        <li />
+        <li />
+        <li />
+        <li />
+        <li />
+        <el-icon>
+          <ArrowRightBold />
+        </el-icon>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.steps_box {
+  & > div {
+    width: 25%;
+    position: relative;
+
+    .step_item_text {
+      color: #999;
+    }
+
+    .step_item {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      top: 12px;
+      left: -53px;
+      color: #d9d9d9;
+
+      & > li {
+        width: 6px;
+        height: 6px;
+        margin-right: 10px;
+        border-radius: 50%;
+        background: #d9d9d9;
+      }
+    }
+
+    .step_item_active {
+      & > li {
+        background: #4080ff !important;
+      }
+    }
+  }
+}
+</style>

src/layout/components/AppMain/index.vue

@@ -16,16 +16,16 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, useTagsViewStore } from "@/store";
-import variables from "@/styles/variables.module.scss";
+import { useSettingsStore, useTagsViewStore } from '@/store';
+import variables from '@/styles/variables.module.scss';
 
 // 缓存页面集合
 const cachedViews = computed(() => useTagsViewStore().cachedViews);
 const height = computed(() => {
   if (useSettingsStore().tagsView) {
-    return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
+    return `calc(100vh - ${variables['navbar-height']} - ${variables['tags-view-height']})`;
   } else {
-    return `calc(100vh - ${variables["navbar-height"]})`;
+    return `calc(100vh - ${variables['navbar-height']})`;
   }
 });
 </script>
@@ -34,6 +34,7 @@ const height = computed(() => {
 .app-main {
   position: relative;
   overflow-y: auto;
-  background-color: var(--el-bg-color-page);
+  // background-color: var(--el-bg-color-page);
+  background-color: #f7e8e8;
 }
 </style>

src/layout/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <NavBar v-if="layout === LayoutEnum.LEFT" />
   <div class="wh-full" :class="classObj">
     <!-- 遮罩层 -->
     <div
@@ -39,11 +40,9 @@
         </el-backtop>
       </div>
     </div>
-
     <!-- 左侧和顶部布局 -->
     <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <NavBar v-if="layout === LayoutEnum.LEFT" />
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />
@@ -57,10 +56,10 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
-import defaultSettings from "@/settings";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-import { LayoutEnum } from "@/enums/LayoutEnum";
+import { useAppStore, useSettingsStore, usePermissionStore } from '@/store';
+import defaultSettings from '@/settings';
+import { DeviceEnum } from '@/enums/DeviceEnum';
+import { LayoutEnum } from '@/enums/LayoutEnum';
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -124,7 +123,7 @@ watch(route, () => {
 <style lang="scss" scoped>
 .sidebar-container {
   position: fixed;
-  top: 0;
+  top: 58px;
   bottom: 0;
   left: 0;
   z-index: 999;

src/plugins/permission.ts

@@ -10,7 +10,7 @@ import { usePermissionStore, useUserStore } from '@/store';
 
 export function setupPermission() {
   // 白名单路由
-  const whiteList = ['/login'];
+  const whiteList = ['/login', '/backstagePage/register'];
 
   router.beforeEach(async (to, from, next) => {
     NProgress.start();

src/views/backstagePage/register/components/DshPage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="tc pt25">
+    <img :src="sqxx_active" />
+    <div class="pt5 ww23" style="margin: 0 auto">
+      <el-button
+        type="primary"
+        size="large"
+        round
+        class="w-full"
+        @click.prevent="handleLoginSubmit"
+      >
+        返回
+      </el-button>
+    </div>
+    <div class="mt4 f14" style="color: #bbbbbb">
+      我们将在
+      <span class="hint_text_color">7-15个</span>
+      工作日内进行审核
+    </div>
+  </div>
+</template>
+<script setup>
+import sqxx_active from '@/assets/images/backstagePage/dsh_page.png';
+const handleLoginSubmit = () => {};
+</script>
+<style lang="scss" scoped></style>

src/views/backstagePage/register/components/RegisterForm.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import SingleImageUpload from 'E:/web-project/mosty-xz-sb/src/components/Upload/SingleImageUpload.vue';
+import { type FormRules } from 'element-plus';
+const exportsFormRef = ref();
+const loading = ref(false);
+const checked1 = ref(false);
+const exportsFormData = reactive({ radio: 1 });
+const pageData = reactive({
+  addressOptions: [],
+});
+const exportsFormRules: FormRules = {
+  file: [
+    {
+      required: true,
+      message: '请上传营业执照正面',
+    },
+  ],
+  name: [
+    {
+      required: true,
+      message: '请输入公司名称',
+    },
+  ],
+  jgdm: [
+    {
+      required: true,
+      message: '请输入组织机构代码',
+    },
+  ],
+};
+//选择地址
+const handleChange = (val: any) => {};
+const handleLoginSubmit = () => {};
+</script>
+
+<template>
+  <el-form
+    ref="exportsFormRef"
+    label-width="auto"
+    label-position="top"
+    :model="exportsFormData"
+    :rules="exportsFormRules"
+  >
+    <el-row :gutter="20">
+      <div class="strong f16 mt10 mb7">01.注册类型</div>
+
+      <el-col :span="24" class="mb3">
+        <el-form-item prop="file">
+          <el-radio-group v-model="exportsFormData.radio">
+            <el-radio :value="1">旅游</el-radio>
+            <el-radio :value="2">用工</el-radio>
+            <el-radio :value="3">商务考察</el-radio>
+            <el-radio :value="3">科学交流</el-radio>
+            <el-radio :value="3">学术交流</el-radio>
+            <el-radio :value="3">体育赛事</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <div class="strong f16 mt0 mb7">02.单位信息</div>
+      <el-col :span="24" class="mb3">
+        <el-form-item prop="file">
+          <template #label>
+            营业执照扫描件
+            <span class="f12" style="color: #979797">（图片大小不超过5M）</span>
+          </template>
+          <SingleImageUpload hintText="上传营业执照正面" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="公司名称" prop="name">
+          <el-input
+            v-model="exportsFormData.name"
+            clearable
+            placeholder="请输入公司名称"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="组织机构代码" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入组织机构代码"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item prop="file" label="注册地址">
+          <el-col :span="12" style="padding-left: 0">
+            <el-cascader
+              v-model="exportsFormData.czdz"
+              style="width: 100%"
+              :options="pageData.addressOptions"
+              @change="handleChange"
+            />
+          </el-col>
+          <el-col :span="12" style="padding-right: 0">
+            <el-input
+              v-model="exportsFormData.jgdm"
+              clearable
+              placeholder="请输入详细地址"
+            />
+          </el-col>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item prop="file" label="实际办公地址">
+          <el-col :span="12" style="padding-left: 0">
+            <el-cascader
+              v-model="exportsFormData.czdz"
+              style="width: 100%"
+              :options="pageData.addressOptions"
+              @change="handleChange"
+            />
+          </el-col>
+          <el-col :span="12" style="padding-right: 0">
+            <el-input
+              v-model="exportsFormData.jgdm"
+              clearable
+              placeholder="请输入详细地址"
+            />
+          </el-col>
+        </el-form-item>
+      </el-col>
+      <div class="strong f16 mt7 mb7">03.法人信息</div>
+      <el-col :span="24" class="mb3">
+        <el-form-item prop="file">
+          <template #label>
+            法人身份证
+            <span class="f12" style="color: #979797">（图片大小不超过5M）</span>
+          </template>
+          <SingleImageUpload hintText="上传身份证正面" />
+          <SingleImageUpload hintText="上传身份证反面" class="ml5" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="法人" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入法人"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="法人身份证号" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入法人身份证号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item label="法人电话号码" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入法人电话号码"
+          />
+        </el-form-item>
+      </el-col>
+      <div class="strong f16 mt7 mb7">04.经办人信息</div>
+      <el-col :span="24" class="mb3">
+        <el-form-item prop="file">
+          <template #label>
+            经办人身份证
+            <span class="f12" style="color: #979797">（图片大小不超过5M）</span>
+          </template>
+          <SingleImageUpload hintText="上传身份证正面" />
+          <SingleImageUpload hintText="上传身份证反面" class="ml5" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="经办人" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入经办人"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="经办人身份证号" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入经办人身份证号"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="经办人电话号码" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            placeholder="请输入经办人电话号码"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="经办人授权书" prop="jgdm">
+          <el-input
+            v-model="exportsFormData.jgdm"
+            clearable
+            readonly
+            placeholder="请输入经办人电话号码"
+          >
+            <template #append>
+              <span class="pointer hint_text_color">点击上传</span>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <div class="flex align-center">
+          <span class="f14 mr2">经办人授权书模板</span>
+          <el-icon color="#4080ff">
+            <Download />
+          </el-icon>
+        </div>
+      </el-col>
+      <el-col :span="24" class="mt25 mb20">
+        <div class="ww40" style="margin: 0 auto">
+          <el-button
+            :loading="loading"
+            type="primary"
+            size="large"
+            class="w-full"
+            @click.prevent="handleLoginSubmit"
+          >
+            注册
+          </el-button>
+          <div class="f14 mt4 flex align-center just-center">
+            <el-checkbox v-model="checked1" style="margin-right: 8px" />
+            我已阅读并接受
+            <span class="hint_text_color">用户协议</span>
+            和
+            <span class="hint_text_color">隐私政策</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<style lang="scss" scoped></style>

src/views/backstagePage/register/components/RegisterSuccess.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="tc pt25">
+    <img :src="zc_success_page" />
+    <div class="pt5 ww23" style="margin: 0 auto">
+      <el-button
+        type="primary"
+        size="large"
+        round
+        class="w-full"
+        @click.prevent="handleLoginSubmit"
+      >
+        立即申报
+      </el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import zc_success_page from '@/assets/images/backstagePage/zc_success_page.png';
+const handleLoginSubmit = () => {};
+</script>
+<style lang="scss" scoped></style>

src/views/backstagePage/register/components/SetPassword.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { type FormRules, ElNotification } from 'element-plus';
+import SlideVerify from '@/views/backstagePage/register/components/SlideVerify.vue';
+import { de } from 'element-plus/es/locale';
+const exportsFormData = reactive({
+  password: '',
+});
+const pageData = reactive({
+  addressOptions: [],
+});
+const timer = ref<any>(null); //验证码定时器
+const butStatus = ref<boolean>(false);
+const showPassword = ref<boolean>(true); //显示设置密码模块
+const butText = ref<string>('获取验证码');
+const exportsFormRules: FormRules = {};
+const handleLoginSubmit = (val: any) => {};
+const onVerifySuccess = () => {};
+const onVerifyFailed = () => {};
+//密码验证
+const checkStrength = (pwd: string) => {
+  let strength: number = 0;
+  // 密码长度大于8
+  if (pwd.length >= 8) {
+    if (pwd.match(/[0-9]/g)) strength = 1; //包含数字
+    if (pwd.match(/[a-z]/g)) strength = 2; //包含小写字母
+    if (pwd.match(/[A-Z]/g)) strength = 2; //包含大写字母
+    //包含大写字母 小写字母 数字
+    if (pwd.match(/[a-z]/g) && pwd.match(/[A-Z]/g) && pwd.match(/[0-9]/g))
+      strength = 3;
+  } else {
+    strength = 0;
+  }
+  return strength;
+};
+const passwordClass = computed(() => {
+  const strength = checkStrength(exportsFormData.password);
+  return strength;
+});
+//密码强度提示
+const getPasswordHintText = (val: number) => {
+  let text: string = '一般';
+  switch (val) {
+    case 1:
+      text = '一般';
+      break;
+    case 2:
+      text = '良好';
+      break;
+    case 3:
+      text = '极强';
+      break;
+  }
+  return text;
+};
+//设置提示文字颜色
+const setHintTextColor = (val: number) => {
+  let color: string = 'orange';
+  switch (val) {
+    case 1:
+      color = 'orange';
+      break;
+    case 2:
+      color = 'green';
+      break;
+    case 3:
+      color = 'blue';
+      break;
+  }
+  return color;
+};
+//获取验证码
+const onClickYzm = () => {
+  ElNotification({
+    title: '提示',
+    message: '验证码已发送，请注意查收  ',
+    type: 'success',
+  });
+  butStatus.value = true;
+  let count: number = 120;
+  timer.value = setInterval(() => {
+    if (count === 0) {
+      clearInterval(timer.value);
+      timer.value = null;
+      butStatus.value = false;
+    } else {
+      count--;
+      butText.value = `${count}秒后重新获取`;
+    }
+  }, 1000);
+};
+</script>
+
+<template>
+  <div class="tc ww50 set_password_box">
+    <!-- 验证手机号码 -->
+    <el-form
+      v-if="!showPassword"
+      ref="exportsFormRef"
+      label-width="auto"
+      label-position="top"
+      :model="exportsFormData"
+      :rules="exportsFormRules"
+      class="mt20"
+    >
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item prop="name">
+            <el-input
+              v-model="exportsFormData.name"
+              clearable
+              placeholder="请输入手机号码"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="name">
+            <slide-verify @success="onVerifySuccess" @failed="onVerifyFailed" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="name">
+            <div class="flex ww100 align-center just-between">
+              <el-input
+                v-model="exportsFormData.name"
+                clearable
+                placeholder="请输入验证码"
+                style="width: 70%"
+              />
+              <el-button
+                type="primary"
+                style="height: 45px"
+                plain
+                :disabled="butStatus"
+                @click="onClickYzm"
+              >
+                {{ butText }}
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mt5 mb20">
+          <div style="margin: 0 auto">
+            <el-button
+              type="primary"
+              size="large"
+              class="w-full"
+              @click.prevent="handleLoginSubmit"
+            >
+              下一步
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 设置密码 -->
+    <el-form
+      v-else
+      ref="passWordFormRef"
+      label-width="auto"
+      label-position="top"
+      :model="exportsFormData"
+      :rules="exportsFormRules"
+      class="mt20"
+    >
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item prop="name">
+            <el-input
+              v-model="exportsFormData.password"
+              clearable
+              placeholder="请输入密码（最少8位，包含字母大小和小写）"
+              show-password
+              autocomplete="new-password"
+              @input="checkStrength"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <div class="flex just-between align-center f14 mb5 pl5 pr5">
+            <ul class="password_scale flex">
+              <li :class="{ 'strength-1': passwordClass > 0 }" />
+              <li :class="{ 'strength-2': passwordClass > 1 }" />
+              <li :class="{ 'strength-3': passwordClass > 2 }" />
+            </ul>
+            <div>
+              密码安全性：
+              <span :style="{ color: setHintTextColor(passwordClass) }">
+                {{ getPasswordHintText(passwordClass) }}
+              </span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="name">
+            <el-input
+              v-model="exportsFormData.passwordOld"
+              clearable
+              placeholder="请确认密码（最少8位，包含字母大小和小写）"
+              show-password
+              autocomplete="new-password"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="mt5 mb20">
+          <div style="margin: 0 auto">
+            <el-button
+              type="primary"
+              size="large"
+              class="w-full"
+              @click.prevent="handleLoginSubmit"
+            >
+              下一步
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.set_password_box {
+  margin: 0 auto;
+}
+
+::v-deep .el-input {
+  line-height: 45px;
+  height: 45px;
+}
+
+.password_scale {
+  & > li {
+    height: 4px;
+    width: 40px;
+    border-radius: 2px;
+    margin-right: 8px;
+    background: #dddddd;
+  }
+}
+
+/* 弱 */
+.strength-1 {
+  background-color: orange !important;
+}
+
+/* 中 */
+.strength-2 {
+  background-color: green !important;
+}
+
+/* 强 */
+.strength-3 {
+  background-color: blue !important;
+}
+
+/* 极强 */
+</style>

src/views/backstagePage/register/components/SlideVerify.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    ref="sliderContainer"
+    class="slider-verify-container"
+    :style="{
+      border: leftP != '360px' ? '1px solid #4080ff' : '1px solid #23f150',
+    }"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+  >
+    <span v-if="blockState === 0" style="color: #4080ff">
+      请按住滑块，拖动到最右边
+    </span>
+    <div
+      :style="{
+        left: leftP,
+        border: leftP != '360px' ? '1px solid #4080ff' : '1px solid #23f150',
+      }"
+      class="slider-verify-block"
+      @mousedown="onMouseDown"
+    >
+      <el-icon :color="leftP != '360px' ? '#4080ff' : '#23f150'">
+        <DArrowRight />
+      </el-icon>
+    </div>
+    <div
+      :style="{
+        width: leftP,
+        border: leftP != '360px' ? '1px solid #4080ff' : '1px solid #23f150',
+      }"
+      class="slider-verify-complete"
+    >
+      <span v-if="blockState === 2">验证成功</span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, defineEmits } from 'vue';
+const emit = defineEmits(['success', 'failed']);
+const leftP = ref('0');
+const blockState = ref(0);
+const startP = ref(undefined);
+const sliderContainer = ref(undefined);
+const onMouseDown = (e) => {
+  if (blockState.value !== 2) {
+    leftP.value = '0';
+    blockState.value = 1;
+    startP.value = {
+      clientX: e.clientX,
+    };
+  } else {
+    leftP.value = '0';
+    blockState.value = 0;
+  }
+};
+const onMouseMove = (e) => {
+  if (blockState.value === 1) {
+    let width = e.clientX - startP.value.clientX;
+    if (width + 40 > 400) {
+      leftP.value = 400 - 40 + 'px';
+      blockState.value = 2;
+      emit('success');
+    } else {
+      leftP.value = width + 'px';
+    }
+  }
+};
+const onMouseUp = (e) => {
+  if (blockState.value !== 2) {
+    leftP.value = '0';
+    blockState.value = 0;
+    emit('failed');
+  }
+};
+const onMouseLeave = (e) => {
+  if (blockState.value !== 2) {
+    leftP.value = '0';
+    blockState.value = 0;
+    emit('failed');
+  }
+};
+</script>
+<style lang="scss" scoped>
+.slider-verify-container {
+  width: 100%;
+  height: 46px;
+  background-color: transparent;
+  position: relative;
+  // border: solid 1px #4080ff;
+  text-align: center;
+  color: #fff;
+  line-height: 45px;
+  user-select: none;
+  border-top: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.slider-verify-complete {
+  width: 0;
+  height: 45px;
+  position: absolute;
+  background-color: #23f150;
+  border-left: none !important;
+  left: 0;
+  top: 0;
+}
+
+.slider-verify-block {
+  width: 56px;
+  height: 46px;
+  // background-image: url('@/assets/images/login6/arrow.png');
+  background-color: white;
+  position: absolute;
+  left: 0;
+  top: -1px;
+  // border: solid 1px #4080ff;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

src/views/backstagePage/register/index.vue

@@ -8,254 +8,59 @@
     </div>
     <div class="ww50 tc f14">
       已有账号，
-      <el-link type="info">马上登录→</el-link>
+      <el-link type="primary" @click="onClickLogin">马上登录→</el-link>
     </div>
   </div>
-  <div class="parent_box pt12">
-    <el-steps style="max-width: 100%" :active="1" align-center>
-      <el-step title="填写账号信息" :icon="Edit" />
-      <el-step title="设置密码" :icon="Upload" />
-      <el-step title="待审核" :icon="Picture" />
-      <el-step title="注册成功" :icon="Picture" />
-    </el-steps>
-    <el-form
-      ref="exportsFormRef"
-      label-width="auto"
-      label-position="top"
-      :model="exportsFormData"
-      :rules="exportsFormRules"
-    >
-      <el-row :gutter="20">
-        <div class="strong f16 mt10 mb7">01.单位信息</div>
-        <el-col :span="24" class="mb3">
-          <el-form-item prop="file">
-            <template #label>
-              营业执照扫描件
-              <span class="f12" style="color: #979797">
-                （图片大小不超过5M）
-              </span>
-            </template>
-            <SingleImageUpload hintText="上传营业执照正面" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="公司名称" prop="name">
-            <el-input
-              v-model="exportsFormData.name"
-              clearable
-              placeholder="请输入公司名称"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="组织机构代码" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入组织机构代码"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item prop="file" label="注册地址">
-            <el-col :span="12" style="padding-left: 0">
-              <el-cascader
-                v-model="exportsFormData.czdz"
-                style="width: 100%"
-                :options="pageData.addressOptions"
-                @change="handleChange"
-              />
-            </el-col>
-            <el-col :span="12" style="padding-right: 0">
-              <el-input
-                v-model="exportsFormData.jgdm"
-                clearable
-                placeholder="请输入详细地址"
-              />
-            </el-col>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item prop="file" label="实际办公地址">
-            <el-col :span="12" style="padding-left: 0">
-              <el-cascader
-                v-model="exportsFormData.czdz"
-                style="width: 100%"
-                :options="pageData.addressOptions"
-                @change="handleChange"
-              />
-            </el-col>
-            <el-col :span="12" style="padding-right: 0">
-              <el-input
-                v-model="exportsFormData.jgdm"
-                clearable
-                placeholder="请输入详细地址"
-              />
-            </el-col>
-          </el-form-item>
-        </el-col>
-        <div class="strong f16 mt7 mb7">02.法人信息</div>
-        <el-col :span="24" class="mb3">
-          <el-form-item prop="file">
-            <template #label>
-              法人身份证
-              <span class="f12" style="color: #979797">
-                （图片大小不超过5M）
-              </span>
-            </template>
-            <SingleImageUpload hintText="上传身份证正面" />
-            <SingleImageUpload hintText="上传身份证反面" class="ml5" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="法人" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入法人"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="法人身份证号" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入法人身份证号"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="法人电话号码" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入法人电话号码"
-            />
-          </el-form-item>
-        </el-col>
-        <div class="strong f16 mt7 mb7">03.经办人信息</div>
-        <el-col :span="24" class="mb3">
-          <el-form-item prop="file">
-            <template #label>
-              经办人身份证
-              <span class="f12" style="color: #979797">
-                （图片大小不超过5M）
-              </span>
-            </template>
-            <SingleImageUpload hintText="上传身份证正面" />
-            <SingleImageUpload hintText="上传身份证反面" class="ml5" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="经办人" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入经办人"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="经办人身份证号" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入经办人身份证号"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="经办人电话号码" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              placeholder="请输入经办人电话号码"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="经办人授权书" prop="jgdm">
-            <el-input
-              v-model="exportsFormData.jgdm"
-              clearable
-              readonly
-              placeholder="请输入经办人电话号码"
-            >
-              <template #append>
-                <span class="pointer hint_text_color">点击上传</span>
-              </template>
-            </el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <div class="flex align-center">
-            <span class="f14 mr2">经办人授权书模板</span>
-            <el-icon color="#4080ff">
-              <Download />
-            </el-icon>
-          </div>
-        </el-col>
-        <el-col :span="24" class="mt25 mb20">
-          <div class="ww40" style="margin: 0 auto">
-            <el-button
-              :loading="loading"
-              type="primary"
-              size="large"
-              class="w-full"
-              @click.prevent="handleLoginSubmit"
-            >
-              注册
-            </el-button>
-            <div class="f14 mt4 flex align-center just-center">
-              <el-checkbox v-model="checked1" style="margin-right: 8px" />
-              我已阅读并接受
-              <span class="hint_text_color">用户协议</span>
-              和
-              <span class="hint_text_color">隐私政策</span>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </el-form>
+  <div class="parent_box pt12 f15">
+    <!-- 步骤 -->
+    <Steps v-model="stepsIndex" :list="pageData.stepsData" />
+    <div>
+      <RegisterForm v-if="stepsIndex === 0" />
+      <SetPassword v-if="stepsIndex === 1" />
+      <DshPage v-if="stepsIndex === 2" />
+      <RegisterSuccess v-if="stepsIndex === 3" />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import SingleImageUpload from 'E:/web-project/mosty-xz-sb/src/components/Upload/SingleImageUpload.vue';
-import { Edit, Picture, Upload } from '@element-plus/icons-vue';
-import { ref } from 'vue';
-const active = ref(1);
-import { type FormRules } from 'element-plus';
-const exportsFormRef = ref();
-const loading = ref(false);
-const checked1 = ref(false);
-const exportsFormData = reactive({});
+import sqxx_active from '@/assets/images/backstagePage/sqxx_active.png';
+import set_password from '@/assets/images/backstagePage/set_password.png';
+import set_password_active from '@/assets/images/backstagePage/set_password_active.png';
+import dsh from '@/assets/images/backstagePage/dsh.png';
+import dsh_active from '@/assets/images/backstagePage/dsh_active.png';
+import zc_success from '@/assets/images/backstagePage/zc_success.png';
+import zc_success_active from '@/assets/images/backstagePage/zc_success_active.png';
+import { ref, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+const stepsIndex = ref(0); //当前步骤值
+const router = useRouter();
 const pageData = reactive({
-  addressOptions: [],
+  stepsData: [
+    {
+      label: '填写账号信息',
+      icon: sqxx_active,
+      iconActive: sqxx_active,
+    },
+    {
+      label: '设置密码',
+      icon: set_password,
+      iconActive: set_password_active,
+    },
+    {
+      label: '待审核',
+      icon: dsh,
+      iconActive: dsh_active,
+    },
+    {
+      label: '注册成功',
+      icon: zc_success,
+      iconActive: zc_success_active,
+    },
+  ],
 });
-const exportsFormRules: FormRules = {
-  file: [
-    {
-      required: true,
-      message: '请上传营业执照正面',
-    },
-  ],
-  name: [
-    {
-      required: true,
-      message: '请输入公司名称',
-    },
-  ],
-  jgdm: [
-    {
-      required: true,
-      message: '请输入组织机构代码',
-    },
-  ],
+const onClickLogin = () => {
+  router.replace('/login');
 };
-//选择地址
-const handleChange = (val: any) => {};
-const handleLoginSubmit = () => {};
 </script>
 
 <style lang="scss" scoped>
@@ -299,20 +104,17 @@ const handleLoginSubmit = () => {};
   }
 }
 
-::v-deep .el-link.el-link--info {
-  --el-link-text-color: #fff;
-  --el-link-hover-text-color: #95d475;
-  --el-link-disabled-text-color: #95d475;
-}
-
-.hint_text_color {
-  color: #4080ff;
-}
-
 .parent_box {
   margin-top: 80px;
   height: calc(100% - 80px);
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+::v-deep .el-link.el-link--primary {
+  color: #fff;
+  &:hover {
+    color: #95d475;
+  }
+}
 </style>

src/views/login/index.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="ww50 tc f14">
         还没有账号，
-        <el-link type="info">马上注册→</el-link>
+        <el-link type="primary" @click="onClickcRegister">马上注册→</el-link>
       </div>
       <!--<div class="flex-y-center right_seting">
         <el-switch
@@ -168,7 +168,9 @@
         </el-form>
         <div class="tc f14 mt10">
           还没有账号？
-          <el-link type="info" style="color: #4080ff">去注册</el-link>
+          <el-link type="info" style="color: #4080ff" @click="onClickcRegister">
+            去注册
+          </el-link>
         </div>
       </div>
     </div>
@@ -197,14 +199,12 @@ import router from '@/router';
 
 import type { FormInstance } from 'element-plus';
 
-import defaultSettings from '@/settings';
 import { ThemeEnum } from '@/enums/ThemeEnum';
 
 import { useSettingsStore, useUserStore, useDictStore } from '@/store';
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const dictStore = useDictStore();
-
 const route = useRoute();
 const { t } = useI18n();
 const loginFormRef = ref<FormInstance>();
@@ -256,7 +256,9 @@ const loginRules = computed(() => {
     ],
   };
 });
-
+const onClickcRegister = () => {
+  router.replace('/backstagePage/register');
+};
 /** 获取验证码 */
 function getCaptcha() {
   AuthAPI.getCaptcha().then((data) => {
@@ -515,14 +517,10 @@ html.dark {
     }
   }
 }
-::v-deep .el-link.el-link--info {
-  --el-link-text-color: #fff;
-  --el-link-hover-text-color: #95d475;
-  --el-link-disabled-text-color: #95d475;
-}
-::v-deep .el-link__inner {
-  &::after {
-    background: #4080ff;
+::v-deep .el-link.el-link--primary {
+  color: #fff;
+  &:hover {
+    color: #95d475;
   }
 }
 </style>