update

src/business/login/index.ts

@@ -1,7 +1,7 @@
 import { shallowRef, reactive } from 'vue'
 import { timerTask } from '@/utils/timer'
 import { login, logout } from '@/services/api/account'
-import { useLoginStore, useEnumStore, useErrorInfoStore, useUserStore, useFuturesStore, useAccountStore, usePositionStore } from '@/stores'
+import { useLoginStore, useEnumStore, useErrorInfoStore, useUserStore, useFuturesStore, useAccountStore, usePositionStore, useNoticeStore } from '@/stores'
 import service from '@/services'
 import tradeSocket from '@/services/websocket/trade'
 import quoteSocket from '@/services/websocket/quote'
@@ -22,6 +22,7 @@ export function useLogin(persist = false) {
     const accountStore = useAccountStore()
     const futuresStore = useFuturesStore()
     const positionStore = usePositionStore()
+    const noticeStore = useNoticeStore()
 
     const { logining, token } = loginStore.$toRefs()
 
@@ -48,6 +49,7 @@ export function useLogin(persist = false) {
         ])
         futuresStore.getGoodsList()
         positionStore.getTradePosition()
+        noticeStore.getNoticeList()
         tradeSocket.connect()
         quoteSocket.connect()
         checkTokenLoop()

src/business/user/account.ts

@@ -1,4 +1,4 @@
-import { shallowRef, reactive, computed } from 'vue'
+import { shallowRef, reactive } from 'vue'
 import { useLoginStore, useAccountStore } from '@/stores'
 import { investorDel, modifyPassword, requestAddAuth, requestAddUser, requestCreateContractAndAddSigner, requestSignCompleted } from '@/services/api/account'
 import cryptojs from 'crypto-js'
@@ -44,7 +44,7 @@ export function adddUserReq() {
     const formSubmit = async () => {
         try {
             loading.value = true
-            await requestAddUser ({
+            await requestAddUser({
                 data: formData
             })
         } finally {
@@ -122,11 +122,11 @@ export function useAccountCancellation() {
 /**
  * 上传待签署文件和添加签署方
  */
-export function  useRequestCreateContractAndAddSigner() {
+export function useRequestCreateContractAndAddSigner() {
     const loading = shallowRef(false)
 
     /// 合同编号
-    const templateNoFormData = reactive<Model.ContractAndAddSignerReq>({ })
+    const templateNoFormData = reactive<Model.ContractAndAddSignerReq>({})
 
     const createSigner = async () => {
         try {
@@ -151,7 +151,7 @@ export function  useRequestCreateContractAndAddSigner() {
 /**
  * 提交实名认证
  */
-export function  useRequestSignCompleted() {
+export function useRequestSignCompleted() {
     const loading = shallowRef(false)
 
     const signCompleted = async () => {

src/packages/pc/components/layouts/header/components/notice/index.less

@@ -0,0 +1,19 @@
+.app-notice {
+    .app-drawer__body {
+        min-height: 400px;
+        padding: 32px;
+        padding-top: 16px;
+    }
+
+    &__tabs {
+        --el-color-primary: #3a87f7;
+        --el-text-color-primary: #7a8a94;
+        --el-border-color-light: #263749;
+    }
+
+    &__pane {
+        --el-color-primary: #3a87f7;
+        --el-text-color-primary: #7a8a94;
+        --el-border-color-light: #263749;
+    }
+}

src/packages/pc/components/layouts/header/components/notice/index.vue

@@ -0,0 +1,72 @@
+<!-- 系统公告 -->
+<template>
+    <app-drawer class="app-notice" title="系统公告" :width="800" v-model:show="show">
+        <el-tabs class="app-notice__tabs" v-model="selectedTab">
+            <el-tab-pane label="公告" name="notice" />
+            <el-tab-pane label="消息" name="message" />
+        </el-tabs>
+        <el-tabs class="app-notice__pane" tab-position="left" v-model="activeId" @tab-change="collapseChange"
+            v-if="dataList.length">
+            <template v-for="(item, index) in dataList" :key="index">
+                <el-tab-pane :name="item.autoid">
+                    <template #label>
+                        <el-badge :is-dot="!item.readed" style="margin-right: 8px;" />
+                        <span>{{ formatDate(item.createtime, 'MM/DD HH:mm') }}</span>
+                    </template>
+                    <div style="padding:0 28px;">
+                        <h4 style="display: flex; flex-direction: column;">
+                            <span style="font-weight: bold;">{{ item.title }}</span>
+                            <span style="font-size: 12px; color: #999;margin: 8px 0;">
+                                {{ formatDate(item.createtime) }}
+                            </span>
+                        </h4>
+                        <div style="line-height: 24px;color: #7a8a94;" v-html="formatHtmlString(item.content)"></div>
+                    </div>
+                </el-tab-pane>
+            </template>
+        </el-tabs>
+        <el-empty v-else />
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed, onMounted } from 'vue'
+import { formatDate, formatHtmlString } from '@/filters'
+import { useNoticeStore } from '@/stores'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const noticeStore = useNoticeStore()
+const show = shallowRef(true)
+const selectedTab = shallowRef('notice')
+const activeId = shallowRef(0)
+
+const dataList = computed(() => {
+    switch (selectedTab.value) {
+        case 'notice': {
+            return noticeStore.noticeList.filter((e) => e.msgtype === 1)
+        }
+        case 'message': {
+            return noticeStore.noticeList.filter((e) => e.msgtype === 2)
+        }
+        default: {
+            return []
+        }
+    }
+})
+
+const collapseChange = (id: number) => {
+    noticeStore.updateNoticeReaded(id)
+}
+
+onMounted(() => {
+    const [firstItem] = dataList.value
+    if (firstItem) {
+        activeId.value = firstItem.autoid
+        collapseChange(activeId.value)
+    }
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/components/layouts/header/index.vue

@@ -7,6 +7,9 @@
         <div class="app-header__right">
             <slot name="right"></slot>
             <div class="iconbar">
+                <el-badge type="danger" :is-dot="noticeStore.unreadList.length > 0">
+                    <app-icon icon="g-icon--notice" @click="openComponent('notice')" />
+                </el-badge>
                 <span class="g-icon--minimize" @click="exitFullSreen" v-if="fullScreen"></span>
                 <span class="g-icon--maximize" @click="setFullSreen" v-else></span>
             </div>
@@ -24,19 +27,27 @@
                 </template>
             </el-dropdown>
         </div>
+        <component :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
 import { SwitchButton } from '@element-plus/icons-vue'
 import { getFileUrl } from '@/filters'
-import { useUserStore, useGlobalStore } from '@/stores'
+import { useComponent } from '@/hooks/component'
+import { useUserStore, useGlobalStore, useNoticeStore } from '@/stores'
 import eventBus from '@/services/bus'
 import AppIcon from '@pc/components/base/icon/index.vue'
 
+const componentMap = new Map<string, unknown>([
+    ['notice', defineAsyncComponent(() => import('./components/notice/index.vue'))],
+])
+
+const { componentId, openComponent, closeComponent } = useComponent()
 const globalStore = useGlobalStore()
 const userStore = useUserStore()
+const noticeStore = useNoticeStore()
 const fullScreen = ref(false)
 
 // 用户头像

src/packages/pc/views/market/trade/goods/detail/index.vue

@@ -13,7 +13,7 @@
                             <span>{{ quote.goodsname }}</span>
                         </li>
                     </ul>
-                    <div class="buttonbar">
+                    <div class="buttonbar" v-if="false">
                         <template v-if="active">
                             <!-- <el-button type="info" style="min-width: 60px;">刷新</el-button> -->
                             <el-button type="primary" @click="active = false">买卖大厅</el-button>