'路由配置'

zhangwei

2025-06-18 19aef84d40fbe37b8ee49cdc14186261d8b928f5

'路由配置'

 index.html

@@ -8,7 +8,7 @@
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>pure-admin-thin</title>
    <title>自主招标采购网</title>
    <link rel="icon" href="/favicon.ico" />
  </head>


 public/favicon.ico

 public/logo.svg

@@ -1 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
<svg width="40.921875" height="44.183105" viewBox="0 0 40.9219 44.1831" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>
            Created with Pixso.
    </desc>
    <defs/>
    <path id="path" d="M40.92 22.04C40.92 11.47 32.25 2.82 21.41 2.34L21.41 0.92C21.41 0.41 20.98 0 20.46 0C19.93 0 19.5 0.41 19.5 0.92L19.5 2.33C8.66 2.82 0 11.46 0 22.04C0 32.6 8.66 41.25 19.5 41.74L19.5 43.26C19.5 43.76 19.93 44.18 20.46 44.18C20.98 44.18 21.41 43.77 21.41 43.26L21.41 41.74C32.25 41.25 40.92 32.6 40.92 22.04ZM36.88 28.1C36.05 27.73 34.64 27.41 32.29 27.13C32.57 25.5 32.73 23.8 32.73 22.04C32.73 20.3 32.58 18.59 32.3 16.95C34.64 16.67 36.05 16.35 36.88 15.97C37.63 17.86 38.05 19.9 38.05 22.04C38.05 24.17 37.63 26.21 36.88 28.1ZM23.34 38.76C22.71 38.87 22.06 38.94 21.41 38.97L21.41 28.39C24.78 28.41 27.69 28.55 30.02 28.75C28.82 33.57 26.36 37.29 23.34 38.76ZM10.89 28.75C13.22 28.55 16.12 28.41 19.5 28.39L19.5 38.97C18.84 38.94 18.2 38.87 17.57 38.76C14.55 37.29 12.09 33.57 10.89 28.75ZM10.09 22.04C10.09 20.36 10.24 18.72 10.51 17.14C13.13 17.37 16.22 17.51 19.5 17.53L19.5 26.55C16.22 26.57 13.12 26.71 10.51 26.94C10.24 25.38 10.09 23.73 10.09 22.04ZM21.41 26.54L21.41 17.52C24.69 17.5 27.79 17.37 30.4 17.14C30.68 18.71 30.83 20.36 30.83 22.03C30.83 23.73 30.68 25.38 30.41 26.93C27.79 26.7 24.69 26.57 21.41 26.54ZM13.02 6.67C12.81 6.91 12.61 7.16 12.41 7.43C12.11 7.85 12.21 8.42 12.64 8.72C13.07 9.01 13.67 8.92 13.97 8.5C15.06 7.02 16.31 5.94 17.63 5.3C18.24 5.2 18.86 5.13 19.5 5.1L19.5 8.52C19.5 9.02 19.93 9.44 20.46 9.44C20.98 9.44 21.41 9.02 21.41 8.52L21.41 5.1C22.05 5.13 22.67 5.2 23.28 5.3C24.6 5.94 25.86 7.02 26.95 8.5C27.14 8.75 27.43 8.89 27.73 8.89C27.92 8.89 28.11 8.83 28.28 8.71C28.71 8.42 28.81 7.85 28.51 7.43C28.31 7.16 28.11 6.91 27.9 6.67C31.43 8.26 34.33 10.96 36.11 14.3C35.6 14.57 34.15 14.87 31.93 15.13C31.62 13.85 31.23 12.61 30.75 11.46C30.55 10.98 30 10.75 29.5 10.94C29.01 11.13 28.78 11.67 28.97 12.14C29.39 13.15 29.74 14.21 30.01 15.32C27.69 15.52 24.78 15.66 21.41 15.68L21.41 12.68C21.41 12.18 20.98 11.76 20.46 11.76C19.93 11.76 19.5 12.18 19.5 12.68L19.5 15.68C16.13 15.66 13.22 15.52 10.9 15.32C11.18 14.22 11.52 13.15 11.94 12.14C12.14 11.67 11.9 11.13 11.41 10.94C10.92 10.75 10.37 10.98 10.17 11.46C9.69 12.61 9.29 13.85 8.98 15.13C6.76 14.87 5.31 14.57 4.8 14.3C6.59 10.96 9.48 8.26 13.02 6.67ZM4.03 15.97C4.85 16.34 6.27 16.66 8.61 16.94C8.33 18.59 8.17 20.3 8.17 22.03C8.17 23.79 8.33 25.5 8.61 27.12C6.27 27.4 4.86 27.72 4.03 28.1C3.27 26.21 2.85 24.17 2.85 22.03C2.86 19.9 3.28 17.85 4.03 15.97ZM4.8 29.77C5.32 29.5 6.76 29.19 8.99 28.94C9.83 32.33 11.25 35.27 13.08 37.43C9.52 35.84 6.6 33.13 4.8 29.77ZM27.83 37.43C29.65 35.28 31.08 32.34 31.91 28.94C34.14 29.2 35.59 29.5 36.1 29.77C34.31 33.13 31.39 35.84 27.83 37.43Z" fill="#0F5FD2" fill-opacity="1.000000" fill-rule="nonzero"/>
</svg>

 src/assets/login/bg.png

 src/assets/login/logo1.png

 src/router/index.ts

@@ -106,7 +106,7 @@
}

/** 路由白名单 */
const whiteList = ["/login",'/'];
const whiteList = [];

const { VITE_HIDE_HOME } = import.meta.env;


 src/router/modules/home.ts

@@ -5,7 +5,7 @@
  path: "/welcome",
  name: "Welcome",
  component: Layout,
  redirect: "/welcome",
  // redirect: "/welcome",
  meta: {
    icon: "ep/home-filled",
    title: "首页",

 src/router/modules/remaining.ts

@@ -2,6 +2,22 @@

export default [
  {
    path: "/",
    name: "Main",
    redirect: "/home",
    meta: {}
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("@/views/home/index.vue"),
    meta: {
      title: "首页",
      showLink: false,
      rank: 101
    }
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
@@ -12,11 +28,11 @@
    }
  },
  {
    path: "/",
    name: "Home",
    component: () => import("@/views/home/index.vue"),
    path: "/register",
    name: "Register",
    component: () => import("@/views/register/index.vue"),
    meta: {
      title: "首页",
      title: "注册",
      showLink: false,
      rank: 101
    }

 src/router/utils.ts

@@ -120,14 +120,14 @@

/** 查找对应 `path` 的路由信息 */
function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
  let res = routes.find((item: { path: string }) => item.path == path);
  let res = routes?.find((item: { path: string }) => item.path == path);
  if (res) {
    return isProxy(res) ? toRaw(res) : res;
  } else {
    for (let i = 0; i < routes.length; i++) {
    for (let i = 0; i < routes?.length; i++) {
      if (
        routes[i].children instanceof Array &&
        routes[i].children.length > 0
        routes[i]?.children instanceof Array &&
        routes[i]?.children.length > 0
      ) {
        res = findRouteByPath(path, routes[i].children);
        if (res) {
@@ -158,14 +158,14 @@
      (v: RouteRecordRaw) => {
        // 防止重复添加路由
        if (
          router.options.routes[0].children.findIndex(
          router.options.routes[0].children?.findIndex(
            value => value.path === v.path
          ) !== -1
        ) {
          return;
        } else {
          // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
          router.options.routes[0].children.push(v);
          router.options.routes[0].children?.push(v);
          // 最终路由进行升序
          ascending(router.options.routes[0].children);
          if (!router.hasRoute(v?.name)) router.addRoute(v);

 src/style/login.css

@@ -1,10 +1,19 @@
.wave {
  position: fixed;
  width: 50%;
  height: 100%;
  width: 80%;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 50%;
        height: 100%;
        float: left;
        justify-content: center;
        background: url('@/assets/login/bg.png')  no-repeat left center;
        background-size: cover;
}
.logo1{
  padding:40px;
}

.login-container {

 src/views/login/index.vue

@@ -11,7 +11,7 @@
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, illustration } from "./utils/static";
import { bg, avatar, logo1 } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

@@ -90,7 +90,10 @@

<template>
  <div class="select-none">
    <img :src="bg" class="wave" />
    <div class="wave">
      <img width="400px" :src="logo1" class="logo1" />
    </div>
    <!-- <img :src="bg" class="wave" /> -->
    <div class="flex-c absolute right-5 top-3">
      <!-- 主题 -->
      <el-switch
@@ -103,11 +106,11 @@
    </div>
    <div class="login-container">
      <div class="img">
        <component :is="toRaw(illustration)" />
        <!-- <component :is="toRaw(illustration)" /> -->
      </div>
      <div class="login-box">
        <div class="login-form">
          <avatar class="avatar" />
          <!-- <avatar class="avatar" /> -->
          <Motion>
            <h2 class="outline-hidden">{{ title }}</h2>
          </Motion>

 src/views/login/utils/static.ts

@@ -1,5 +1,5 @@
import bg from "@/assets/login/bg.png";
import avatar from "@/assets/login/avatar.svg?component";
import illustration from "@/assets/login/illustration.svg?component";
import logo1 from "@/assets/login/logo1.png?component";

export { bg, avatar, illustration };
export { bg, avatar, logo1 };

 src/views/register/index.vue

New file
@@ -0,0 +1,299 @@
<template>
  <div class="content">
    <div class="header">
      <div class="headimg">
        <img width="167px" height="44px" src="@/assets/home/logo.png" alt="" />
      </div>
    </div>
    <div class="article">
      <div class="formDiv">
        <div class="formheader">
          <span class="title">请填写已下注册信息</span>
          <span class="other"
            >有企业营业执照(含个体工商户)的用户请注册。权益如下：做企业实名认证、参与招投标业务、开通企业门户等</span
          >
        </div>
        <el-divider />
        <div class="formContent">
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item label="注册身份" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio value="Sponsorship">供应商</el-radio>
                <el-radio value="Venue">代理机构</el-radio>
                <el-radio value="cgr">采购人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="企业名称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入营业执照上的企业名称"
              />
            </el-form-item>
            <el-form-item label="用户名" prop="region">
              <el-input v-model="ruleForm.region" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="8-20位数字+大小写字母+特殊字符的组合"
              />
            </el-form-item>
            <el-form-item label="密码确认" prop="repassword">
              <el-input
                v-model="ruleForm.repassword"
                placeholder="请再次输入您的密码"
              />
            </el-form-item>
            <el-form-item label="联系人姓名" prop="repassword">
              <el-input
                v-model="ruleForm.repassword"
                placeholder="请输入联系人姓名"
              />
            </el-form-item>
            <el-form-item label="邮箱" prop="repassword">
              <el-input
                v-model="ruleForm.repassword"
                placeholder="请输入联系邮箱"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="repassword">
              <el-input
                v-model="ruleForm.repassword"
                placeholder="请输入您的手机号码"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="repassword">
              <el-input
                v-model="ruleForm.repassword"
                placeholder="请输入您的手机号码"
              />
            </el-form-item>
            <el-form-item prop="validationCode" label="手机验证码">
              <el-input
                v-model.number="ruleForm.validationCode"
                class="form-input"
                placeholder="请输入验证码"
              >
                <template #suffix>
                  <span id="suffix-span">
                    <span
                      id="suffix-span-2"
                      ref="spanRef"
                      @click="sendValidationCode(ruleForm.repassword)"
                    >
                      {{ isSendValidationCode }}
                    </span>
                  </span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="repassword" label=" ">
              <el-checkbox value="Online activities" name="type">
                我已阅读并同意 《非政采招标采购交易平台用户协议》
              </el-checkbox>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                同意并注册
              </el-button>
            </el-form-item>
            <el-form-item label=" ">
              <span>已有账号？立即登录</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

interface RuleForm {
  name: string;
  region: string;
  count: string;
  password: string;
  repassword: string;
  validationCode: string;
  date1: string;
  date2: string;
  delivery: boolean;
  location: string;
  type: string[];
  resource: string;
  desc: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  region: "",
  password: "",
  validationCode: "",
  repassword: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  location: "",
  type: [],
  resource: "",
  desc: ""
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change"
    }
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change"
    }
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change"
    }
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change"
    }
  ],
  location: [
    {
      required: true,
      message: "Please select a location",
      trigger: "change"
    }
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change"
    }
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change"
    }
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" }
  ]
});
// 验证码区域文字说明
const spanRef = ref();
const isSendValidationCode = ref<string>("获取验证码");
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const sendValidationCode = () => {};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}));
</script>

<style lang="scss" scoped>
.content {
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
  .header {
    display: flex;
    align-items: center;
    height: 80px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    .headimg {
      width: 1200px;
      margin: 0 auto;
    }
  }
  .article {
    margin: 20px auto;
    width: 1200px;
    height: 85%;
    background: rgb(255, 255, 255);
    .formDiv {
      width: 80%;
      margin: 0 auto;
      .formheader {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 30px;
      }
      .title {
        color: rgb(51, 51, 51);
        font-size: 18px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: 0%;
        text-align: left;
        text-transform: capitalize;
      }
      .other {
        color: rgb(173, 173, 173);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0%;
        text-align: left;
        text-transform: capitalize;
      }
      .formContent {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>