From 03c275439949875a857538df89a41696642c42b3 Mon Sep 17 00:00:00 2001 From: zhangwei <1504152376@qq.com> Date: 星期一, 01 九月 2025 17:15:39 +0800 Subject: [PATCH] '首页公告与详情' --- src/views/home/index.vue | 257 ++++++++++++++++++++------------------------------- 1 files changed, 102 insertions(+), 155 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 4dd21ac..87a030d 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,106 +1,43 @@ -el <template> - <div class="header"> - <img width="227px" height="74px" src="@/assets/home/logo.png" alt="" /> - <img width="427px" height="74px" src="@/assets/home/Header.png" alt="" /> - <div class="other"> - <div class="item"> - <img width="21px" height="21px" src="@/assets/home/share.png" alt="" /> - <span>鍒嗕韩缃戠珯</span> - </div> - <div class="item"> - <img - width="21px" - height="21px" - src="@/assets/home/BellFilled.png" - alt="" - /> - <span>鎴戠殑娑堟伅</span> - </div> - </div> - </div> - <div class="banner"> - <!-- <img width="100%" height="306px" src="@/assets/home/banner.png" alt="" /> --> - </div> + <my-header /> <div class="notice"> <div class="left"> - <div class="item item1"> - <img src="@/assets/home/notice1.png" alt="" /> - <div>鎷涢噰鍏憡</div> - </div> - <div class="item"> - <img src="@/assets/home/notice.png" alt="" /> - <div>鏇存鍏憡</div> - </div> - <div class="item"> - <img src="@/assets/home/notice.png" alt="" /> - <div>缁撴灉鍏憡</div> - </div> - <div class="item"> - <img src="@/assets/home/notice.png" alt="" /> - <div>鍏朵粬鍏憡</div> + <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 class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘��2024骞寸煶鐩樿閬撲粯瀹剁鏉戠伯娌逛骇涓氬洯鍖哄強閰嶅鍩虹璁炬柦寤鸿椤圭洰纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> + <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> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戠唺鐚胺娓稿涓績灞�閮ㄦ敼閫犻」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戜腹鏅閬撴皯婀栫ぞ鍖虹孩鐧藉枩浜嬫湇鍔″満鎵�纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戞垚閮戒笢閮ㄦ柊鍖轰笁宀旀箹楂樼骇涓浣撹壓涓績鍓嶄复鏃跺仠杞﹀尯鍜屾鏍¢棬涓や晶闂ㄥ崼瀹ら棿鍖哄煙榛戝寲鍙婃帓姘存彁鍗囪В闄ゅ唴娑濋」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戝洓宸濈渷鎴愰兘鎴掓瘨搴峰鎵�鐥呮畫鎴掓瘨浜哄憳搴峰娲诲姩涓績缁翠慨鏀归�犻」鐩浜屾纾嬪晢鍏憡</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戣�佸共閮ㄦ椿鍔ㄤ腑蹇冭淇敼閫犻」鐩鍟嗗叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> - <div class="item"> - <span - ><span style="color: #145ccd; font-weight: 600">路</span - >銆愬洓宸濈渷鎴愰兘甯傘�戦噾鐗涘尯鎶㈤櫓鏁戠伨宸ョ▼椤圭洰宸ョ▼闃熶紞鍌ㄥ搴擄紙鎴垮缓銆佸競鏀跨被锛夋嫑鏍囧叕鍛�</span - > - <span>2024-04-15 18:10</span> - </div> + <!-- </el-tab-pane> <el-tab-pane label="宸ョ▼鎷涙爣" name="second">宸ョ▼鎷涙爣</el-tab-pane> <el-tab-pane label="璐х墿鎷涙爣" name="third">璐х墿鎷涙爣</el-tab-pane> @@ -170,7 +107,7 @@ v-else-if="!state.accessToken" :underline="false" class="hover:cursor-pointer" - @click="toRegister" + @click="toRegister(item)" >娉ㄥ唽</el-link > <el-link @@ -179,7 +116,11 @@ class="hover:cursor-pointer" @click="toApply(item)" ><span v-if="item.name !== '璇勫涓撳'">鐢宠</span></el-link - ><span v-if="item.name !== '璇勫涓撳'" class="m-2">|</span> + ><span + v-if="!state.accessToken || item.name !== '璇勫涓撳'" + class="m-2" + >|</span + > <el-link v-if="state.rolesCode.indexOf(item.code) !== -1" :underline="false" @@ -392,19 +333,28 @@ <my-footer /> </template> -<script lang="ts" setup> +<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,'-'); // 鐩存帴鑾峰彇鍊� @@ -415,111 +365,108 @@ /** 瑙掕壊锛堝鏋滄樀绉颁负绌哄垯鏄剧ず鐢ㄦ埛鍚嶏級 */ const getUseRoles = () => { state.userInfo = storageLocal().getItem("user-info"); - state.userInfo?.exRoles.forEach(element => { + state.userInfo?.exRoles.forEach((element: RoleItem) => { state.rolesCode.push(element.code); }); }; const state = reactive({ roleList: [], rolesCode: [], - userInfo: {}, - accessToken: "" + 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 = () => { - router.push({ name: "Register" }); +const toRegister = item => { + router.push({ name: "newRegister", query: { code: item.code } }); }; // 閫�鍑� const logOut = () => { useUserStoreHook().logOut(); + state.rolesCode = []; + state.accessToken = ""; }; // 鐢宠 const toApply = item => { - router.push({ name: "RegisterNav", query: { code: item.code } }); + addDialog({ + width: "20%", + title: "纭淇℃伅", + contentRenderer: () => <p>鏄惁鐢宠涓簕item.name}锛�</p>, // jsx 璇硶 锛堟敞鎰忓湪.vue鏂囦欢鍚敤jsx璇硶,闇�瑕佸湪script寮�鍚痩ang="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) { - await useUserStoreHook().changeLogoInExRule({ + // if (useUserStoreHook().nowRole.code !== item.code) { + // 鑾峰彇鍚庣璺敱 + useUserStoreHook() + .changeLogoInExRule({ ruleCode: item.code + }) + .then(res => { + initRouter().then(() => { + let path = getTopMenu(true); + router.push({ name: path.name }); + }); }); - } - router.push({ name: "Mine" }); + + // } }; // 鍘荤櫥褰� const toLogin = item => { - router.push({ name: "Login", query: item }); + router.push({ name: "Login" }); }; </script> <style lang="scss" scoped> -.header { - display: flex; - align-items: center; - justify-content: space-evenly; - height: 80px; - width: 100%; - .middle { - width: 50%; - display: flex; - justify-content: space-around; - color: rgb(51, 51, 51); - font-family: 鎬濇簮榛戜綋; - } - .other { - display: flex; - .item { - display: flex; - justify-content: center; - width: 63px; - height: 48px; - color: rgb(51, 51, 51); - font-family: 鎬濇簮榛戜綋; - font-size: 12px; - font-weight: 400; - line-height: 20px; - letter-spacing: 0%; - text-align: left; - text-transform: capitalize; - flex-wrap: wrap; - margin-right: 10px; - } - } -} -.banner { - // left: -3.76px; - // top: 80px; - // position: absolute; - background: url("@/assets/home/banner.png") no-repeat left center; - background-size: cover; - width: 100%; - height: 306px; -} .notice { box-sizing: border-box; display: flex; justify-content: space-between; width: 72%; - height: 518px; + height: 400px; padding: 15px; margin: 20px auto; background: rgb(254, 254, 254); border-radius: 8px; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; + box-shadow: + rgba(149, 157, 165, 0.15) 0px -6px 18px, + rgba(149, 157, 165, 0.2) 0px 8px 24px; .left { width: 10%; - height: 483px; + height: 100%; display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-around; + align-content: space-between; .item { width: 137px; height: 111px; @@ -562,12 +509,12 @@ padding: 0 10px; } /* 鍋舵暟琛岃儗鏅壊 */ - .item:nth-child(even) { + .item:nth-child(odd) { background: rgb(244, 244, 244); border-radius: 4px; } /* 濂囨暟琛岃儗鏅壊 */ - .item:nth-child(odd) { + .item:nth-child(even) { padding: 8px; background-color: #fff; } -- Gitblit v1.9.1