<template>
|
<my-header />
|
<div class="notice">
|
<div class="left">
|
<div
|
v-for="(item, index) in state.gonggaoList"
|
:key="index"
|
:class="['item', stateHook.active == index ? 'item1' : '']"
|
@click="getShouyeOrder(index)"
|
>
|
<img
|
v-if="stateHook.active == index"
|
src="@/assets/home/notice1.png"
|
alt=""
|
/>
|
<img v-else src="@/assets/home/notice.png" alt="" />
|
<div>{{ item.name }}</div>
|
</div>
|
</div>
|
<div class="right">
|
<!-- <el-tabs v-model="activeName" class="demo-tabs">
|
<el-tab-pane label="意向公开" name="first">
|
意向公开 -->
|
<div
|
v-for="item in stateHook.shouyeOrderList"
|
:key="item.id"
|
class="item"
|
@click="goDetail(item.tenderId ?? item.id)"
|
>
|
<span>
|
<span style="color: #145ccd; font-weight: 600">·</span>
|
{{
|
item.xingzhengquyuName &&
|
`【${item.xingzhengquyuName.match(/^.*?市/)}】`
|
}}
|
{{ item.projectName }}
|
</span>
|
<span>{{ item.createTime }}</span>
|
</div>
|
|
<!-- </el-tab-pane>
|
<el-tab-pane label="工程招标" name="second">工程招标</el-tab-pane>
|
<el-tab-pane label="货物招标" name="third">货物招标</el-tab-pane>
|
<el-tab-pane label="服务招标" name="fourth">服务招标</el-tab-pane>
|
<el-tab-pane label="网上竞价" name="fourth1">网上竞价</el-tab-pane>
|
</el-tabs> -->
|
</div>
|
</div>
|
<div class="daixie">
|
<div class="contentxie">
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>市场调研</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>需求审查</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>履约验收</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>业代推荐</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div>专家意见</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">三方开标</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">招采培训</div>
|
</div>
|
<div class="itemxie">
|
<img src="@/assets/home/daixie.png" alt="" />
|
<div class="">财政监督</div>
|
</div>
|
</div>
|
</div>
|
<div class="user">
|
<div class="all">
|
<div class="left">
|
<div v-for="item in state.roleList" :key="item.id" class="item item1">
|
<div class="box">
|
<img
|
width="18px"
|
height="18px"
|
src="@/assets/home/car1.png"
|
alt=""
|
/>
|
{{ item.name }}
|
</div>
|
<div>
|
<el-link
|
v-if="state.rolesCode.indexOf(item.code) !== -1"
|
:underline="false"
|
class="hover:cursor-pointer"
|
@click="logOut"
|
>退出</el-link
|
>
|
<el-link
|
v-else-if="!state.accessToken"
|
:underline="false"
|
class="hover:cursor-pointer"
|
@click="toRegister(item)"
|
>注册</el-link
|
>
|
<el-link
|
v-else
|
:underline="false"
|
class="hover:cursor-pointer"
|
@click="toApply(item)"
|
><span v-if="item.name !== '评审专家'">申请</span></el-link
|
><span
|
v-if="!state.accessToken || item.name !== '评审专家'"
|
class="m-2"
|
>|</span
|
>
|
<el-link
|
v-if="state.rolesCode.indexOf(item.code) !== -1"
|
:underline="false"
|
class="hover:cursor-pointer"
|
@click="toWelcome(item)"
|
>进入</el-link
|
>
|
<el-link
|
v-else
|
:underline="false"
|
class="hover:cursor-pointer"
|
:disabled="!!state.accessToken"
|
@click="toLogin(item)"
|
>登录</el-link
|
>
|
</div>
|
</div>
|
</div>
|
<div class="right" />
|
</div>
|
</div>
|
<div class="more">
|
<div class="content">
|
<div class="item">
|
<div class="header">
|
<div
|
style="display: flex; align-items: center; justify-content: center"
|
>
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">行业动态</span>
|
</div>
|
<el-button round size="small"
|
>更多<el-icon class="el-icon--right"
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<path
|
fill="currentColor"
|
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="header">
|
<div
|
style="display: flex; align-items: center; justify-content: center"
|
>
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">政策法规</span>
|
</div>
|
<el-button round size="small"
|
>更多<el-icon class="el-icon--right"
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<path
|
fill="currentColor"
|
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="header">
|
<div
|
style="display: flex; align-items: center; justify-content: center"
|
>
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">通知公告</span>
|
</div>
|
<el-button round size="small"
|
>更多<el-icon class="el-icon--right"
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<path
|
fill="currentColor"
|
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
<div class="main">
|
<div class="img" />
|
<div class="right">
|
<p>国家发展改革委办公厅关于规范招标投标领域信用评价应用的通知</p>
|
<p class="time">2025-05-22</p>
|
</div>
|
</div>
|
<div class="other">
|
<div class="itemother">
|
<span
|
><span style="color: #145ccd; font-weight: 600">·</span
|
>国家发展改革委办公厅关于规范招标投···</span
|
>
|
<span class="time">05-22</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="zhuanjia w-[72%] mx-auto">
|
<div class="flex justify-between items-center m-5">
|
<div style="display: flex; align-items: center">
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">专家委员会</span>
|
</div>
|
<div>
|
<el-button round size="small">专家抽取</el-button>
|
</div>
|
</div>
|
<div class="flex justify-around items-center mb-5">
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
<img
|
width="216px"
|
height="312px"
|
src="@/assets/home/zhuanjia.png"
|
alt=""
|
/>
|
</div>
|
</div>
|
<div class="daili w-[100%] pt-5 pb-5">
|
<div class="w-[72%] mx-auto bg-white rounded-lg pb-5">
|
<div class="flex justify-between items-center p-5">
|
<div style="display: flex; align-items: center">
|
<img src="@/assets/home/xian.png" alt="" />
|
<span style="margin-left: 5px">代理机构推荐</span>
|
</div>
|
<div>
|
<el-button round size="small"
|
>更多<el-icon class="el-icon--right"
|
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
<path
|
fill="currentColor"
|
d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
|
/></svg></el-icon
|
></el-button>
|
</div>
|
</div>
|
<div class="flex flex-wrap justify-between">
|
<div
|
v-for="(item, index) in 15"
|
:key="index"
|
class="w-[24%] p-3 pl-6 mr-12 ml-12 dailimc"
|
>
|
<span
|
><span style="color: #145ccd; font-weight: 600" class="mr-1.5"
|
>·</span
|
>四川政采招投标咨询有限公司</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<my-footer />
|
</template>
|
|
<script lang="tsx" setup>
|
import { onMounted, ref, computed, reactive } from "vue";
|
import MyFooter from "./component/myFooter.vue";
|
import MyHeader from "./component/myHeader.vue";
|
import { useUserStoreHook } from "@/store/modules/user";
|
import { exRole } from "@/api/register/index";
|
import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
|
import { initRouter, getTopMenu } from "@/router/utils";
|
import { useIndex } from "../home/utils/hook";
|
|
import { getToken } from "@/utils/auth";
|
import { useRoute, useRouter } from "vue-router";
|
const router = useRouter();
|
import { useUserStore } from "@/store/modules/user";
|
import { addDialog } from "@/components/ReDialog";
|
import { applyRole } from "@/api/register/index";
|
import { message } from "@/utils/message";
|
import type { userType } from "@/store/types";
|
import type { RoleItem } from "@/api/types";
|
|
const userStore = useUserStore();
|
const { stateHook, getShouyeOrder, goDetail } = useIndex();
|
|
// 访问 state 属性
|
// console.log(userStore.roles,'-'); // 直接获取值
|
defineOptions({
|
name: "MainPage"
|
});
|
let activeName = ref("first");
|
/** 角色（如果昵称为空则显示用户名） */
|
const getUseRoles = () => {
|
state.userInfo = storageLocal().getItem("user-info");
|
state.userInfo?.exRoles.forEach((element: RoleItem) => {
|
state.rolesCode.push(element.code);
|
});
|
};
|
const state = reactive({
|
roleList: [],
|
rolesCode: [],
|
userInfo: {} as userType,
|
accessToken: "",
|
gonggaoList: [
|
{ name: "招采公告" },
|
{ name: "更正公告" },
|
{ name: "结果公告" }
|
// { name: "其他公告" }
|
]
|
});
|
onMounted(() => {
|
// exRole().then(res => {
|
// state.roleList = res.result;
|
// });
|
getShouyeOrder(0);
|
state.roleList = useUserStoreHook().rolesList;
|
getUseRoles();
|
state.accessToken = getToken()?.accessToken;
|
});
|
|
const toRegister = item => {
|
router.push({ name: "newRegister", query: { code: item.code } });
|
};
|
// 退出
|
const logOut = () => {
|
useUserStoreHook().logOut();
|
state.rolesCode = [];
|
state.accessToken = "";
|
};
|
// 申请
|
const toApply = item => {
|
addDialog({
|
width: "20%",
|
title: "确认信息",
|
contentRenderer: () => <p>是否申请为{item.name}！</p>, // jsx 语法 （注意在.vue文件启用jsx语法,需要在script开启lang="tsx"）
|
closeCallBack: ({ options, args }) => {
|
if (args?.command === "cancel") {
|
// 您点击了取消按钮
|
} else if (args?.command === "sure") {
|
applyRole({ ruleCode: item.code }).then(res => {
|
if (res.code == 200) {
|
message("申请成功！", { type: "success" });
|
} else {
|
message(res?.message || "申请失败！", { type: "error" });
|
}
|
});
|
} else {
|
}
|
}
|
});
|
// router.push({ name: "RegisterNav", query: { code: item.code } });
|
};
|
// 去首页
|
const toWelcome = async item => {
|
// if (useUserStoreHook().nowRole.code !== item.code) {
|
// 获取后端路由
|
useUserStoreHook()
|
.changeLogoInExRule({
|
ruleCode: item.code
|
})
|
.then(res => {
|
initRouter().then(() => {
|
let path = getTopMenu(true);
|
router.push({ name: path.name });
|
});
|
});
|
|
// }
|
};
|
// 去登录
|
const toLogin = item => {
|
router.push({ name: "Login" });
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.notice {
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
width: 72%;
|
height: 400px;
|
padding: 15px;
|
margin: 20px auto;
|
background: rgb(254, 254, 254);
|
border-radius: 8px;
|
box-shadow:
|
rgba(149, 157, 165, 0.15) 0px -6px 18px,
|
rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
.left {
|
width: 10%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
align-content: space-between;
|
.item {
|
width: 137px;
|
height: 111px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
align-items: center;
|
background: rgb(244, 244, 244);
|
border-radius: 6px;
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
div {
|
// display: block;
|
width: 100%;
|
text-align: center;
|
color: rgb(20, 92, 205);
|
font-size: 20px;
|
font-weight: 500;
|
align-items: center;
|
}
|
}
|
.item1 {
|
background: rgb(20, 92, 205);
|
div {
|
color: rgb(254, 254, 254);
|
}
|
}
|
}
|
.right {
|
width: 89%;
|
height: 51px;
|
border-radius: 4px;
|
.item {
|
// height: 51px;
|
line-height: 51px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 10px;
|
}
|
/* 偶数行背景色 */
|
.item:nth-child(odd) {
|
background: rgb(244, 244, 244);
|
border-radius: 4px;
|
}
|
/* 奇数行背景色 */
|
.item:nth-child(even) {
|
padding: 8px;
|
background-color: #fff;
|
}
|
}
|
}
|
.user {
|
width: 100%;
|
// height: 520px;
|
// background: rgb(248, 248, 248);
|
padding: 40px 0;
|
.all {
|
width: 72%;
|
height: 385px;
|
background: #fff;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
border-radius: 8px;
|
|
.left {
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
width: 23%;
|
height: 100%;
|
border-radius: 8px;
|
.item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 30px;
|
height: 23%;
|
text-align: left;
|
color: #5f5f5f;
|
// box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
border-radius: 6px;
|
margin-bottom: 10px;
|
.box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
img {
|
margin-right: 5px;
|
}
|
}
|
.item1 {
|
background: #1a67e3;
|
color: #ffffff;
|
}
|
}
|
// .left :first-child {
|
// border-top-left-radius: 8px;
|
// border-top-right-radius: 8px;
|
// }
|
// .left *:not(:first-child):not(:last-child) {
|
// border-bottom: #c6c6c6 1px solid;
|
// }
|
.right {
|
background: #a9b3c4;
|
width: 75%;
|
height: 100%;
|
border-radius: 8px;
|
}
|
}
|
}
|
.daixie {
|
width: 100%;
|
// background: #fff;
|
background: rgb(248, 248, 248);
|
|
.contentxie {
|
width: 72%;
|
// height: 140px;
|
padding: 20px 0;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-around;
|
.itemxie {
|
width: 13%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
div {
|
width: 100%;
|
text-align: center;
|
color: rgb(95, 95, 95);
|
font-family: 思源黑体;
|
font-size: 20px;
|
font-weight: 500;
|
letter-spacing: 1%;
|
}
|
}
|
img {
|
width: 91px;
|
height: 97.2px;
|
}
|
}
|
}
|
.more {
|
width: 100%;
|
height: 464px;
|
background: #f8f8f8;
|
padding: 30px 0;
|
.time {
|
color: rgb(152, 152, 152);
|
font-family: Figtree;
|
font-size: 15px;
|
font-weight: 400;
|
line-height: 24.2px;
|
}
|
.content {
|
width: 72%;
|
height: 415px;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.item {
|
background: #fff;
|
width: 28%;
|
height: 100%;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
.header {
|
height: 41px;
|
color: rgb(0, 0, 0);
|
font-family: 思源黑体;
|
font-size: 24px;
|
font-weight: 500;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.main {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex: 1;
|
.img {
|
width: 142px;
|
height: 95px;
|
background: rgb(196, 196, 196);
|
border-radius: 4px;
|
}
|
.right {
|
width: 240px;
|
color: rgb(95, 95, 95);
|
font-family: 思源黑体;
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 24.2px;
|
text-align: left;
|
margin-left: 10px;
|
}
|
}
|
.other {
|
width: 100%;
|
|
.itemother {
|
width: 100%;
|
font-size: 14px;
|
padding-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.time {
|
text-align: right;
|
}
|
}
|
}
|
}
|
}
|
.daili {
|
background: rgb(248, 248, 248);
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
|
/* 偶数行背景色 */
|
.dailimc:nth-child(odd) {
|
background: rgb(244, 244, 244);
|
border-radius: 4px;
|
}
|
/* 奇数行背景色 */
|
|
.dailimc:nth-child(3n + 2) {
|
// background-color: #fff;
|
background: rgb(244, 244, 244);
|
}
|
.dailimc:nth-child(5) {
|
background-color: #fff;
|
// background: rgb(244, 244, 244);
|
}
|
.dailimc:nth-child(11) {
|
background-color: #fff;
|
// background: rgb(244, 244, 244);
|
}
|
}
|
.zhuanjia {
|
img {
|
border-radius: 4px;
|
}
|
}
|
a {
|
font-size: 16px;
|
|
// font-weight: 600;
|
color: #fff;
|
}
|
a:hover,
|
a:active {
|
color: #fff;
|
}
|
.el-link.is-disabled {
|
color: #a8abb2;
|
cursor: not-allowed;
|
}
|
</style>
|
