新增消息列表

src/api/shop.js

@@ -159,4 +159,31 @@ export function updateAccount(data) {
         url: '/merchantInfo/detail/updateAccount',
         data
     })
-}
+}
+
+/**
+ * 机构详情信息
+ * @param {*} data 
+ * @returns
+ */
+export function agencyInfo(params) {
+    return request({
+        method: 'get',
+        url: `/agency/AgencyInfo`,
+        params
+    })
+}
+
+/**
+ * 更改机构详情
+ * @param {*} data 
+ * @returns 
+ */
+export function updateAgency(data) {
+    return request({
+        method: 'post',
+        url: '/agency/updateAgency',
+        data
+    })
+}
+

src/api/user.js

@@ -13,3 +13,16 @@ export function getUserInfo() {
     url: "/user/getUserInfoByToken",
   });
 }
+
+/**
+ * 获取消息列表
+ * @param {*} params 
+ * @returns 
+ */
+export function getNotices(params) {
+  return request({
+    method: 'get',
+    url: '/notification/page',
+    params
+  })
+}

src/router/index.js

@@ -5,6 +5,7 @@ import _hook from "@/hooks/index.js";
 import { useRoutes } from "@/store/routes.js";
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
+import { useUser } from "@/store/user.js";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -15,6 +16,7 @@ NProgress.configure({ showSpinner: false });
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
   const token = _hook.useLocalStorage.get("token");
+  const storeUser = useUser();
   if (to.path === "/login" && !token) {
     next();
     NProgress.done();
@@ -36,6 +38,7 @@ router.beforeEach(async (to, from, next) => {
         storeRoutes.setNavbar(to.path);
         next();
         NProgress.done();
+        storeUser.getNotices()
       }
     }
   }

src/router/routes.js

@@ -292,6 +292,16 @@ export const asyncRoutes = [
           title: '大机构',
           icon: 'Tickets'
         }
+      },
+      {
+        path: '/organization/big_organization/agent_detail',
+        name: 'agent_detail',
+        component: () => import('@/views/organization/agent_detail.vue'),
+        meta: {
+          title: '机构详情',
+          isHide: true,
+          activeMenu: '/organization/big_organization'
+        }
       }
     ]
   },
@@ -520,5 +530,27 @@ export const asyncRoutes = [
         }
       }
     ]
+  },
+  {
+    path: '/notice',
+    component: layout,
+    meta: {
+      title: '消息管理',
+      isHide: true,
+      roles: ['MG']
+    },
+    redirect: '/notice/index',
+    children: [
+      {
+        isHide: true,
+        path: '/notice/index',
+        name: 'noticeIndex',
+        component: () => import('@/views/notice/index.vue'),
+        meta: {
+          title: '消息列表',
+          isHide: true,
+        }
+      }
+    ]
   }
 ];

src/store/user.js

@@ -1,12 +1,16 @@
 import { defineStore } from "pinia";
 import _hook from "@/hooks/index.js";
-import { login, getUserInfo } from "@/api/user.js";
+import { login, getUserInfo, getNotices } from "@/api/user.js";
 
 export const useUser = defineStore("useUser", {
   state: () => {
     return {
       userInfo: {},
       token: _hook.useLocalStorage.get("token") || "",
+      notices: {
+        num: 0,
+        list: []
+      }
     };
   },
   getters: {},
@@ -40,5 +44,20 @@ export const useUser = defineStore("useUser", {
         return res.userInfo;
       });
     },
+    /**
+     * 获取消息列表
+     */
+    async getNotices() {
+      try {
+        const res = await getNotices({
+          currPage: 1,
+          size: 10
+        })
+        this.notices.num = res.unread
+        this.notices.list = res.list.list
+      } catch (error) {
+        console.error('获取消息列表error=', error)
+      }
+    }
   },
 });

src/views/layout/components/pageHeader.vue

@@ -14,6 +14,45 @@
     <div class="info-case">
       <!-- <SvgIcon class="info-icon" name="Operation" @click="operationFunction('operation')"></SvgIcon> -->
       <SvgIcon class="info-icon" name="Refresh" @click="operationFunction('refresh')"></SvgIcon>
+      <el-popover :width="400">
+        <template #reference>
+          <div class="bell_wrap">
+            <div class="dot" v-if="storeUser.notices.num">
+              {{ storeUser.notices.num > 99 ? '99+' : storeUser.notices.num }}
+            </div>
+            <svg-icon class="bell" name="Bell" />
+          </div>
+        </template>
+        <template #default>
+          <div class="bell_container">
+            <div class="header">
+              <el-text size="large">通知</el-text>
+            </div>
+            <div class="content">
+              <div class="list">
+                <div class="item" v-for="item in storeUser.notices.list" :key="item.id">
+                  <!-- <div class="title">
+                    <el-text size="large">{{ item.title }}</el-text>
+                  </div> -->
+                  <div class="conetnt">
+                    <el-text :type="item == 0 ? 'info' : ''">
+                      {{ `[${title1[item.typefirst]}-${title2[item.typesecond]}] ${item.conrtent}` }}
+                    </el-text>
+                  </div>
+                  <div class="time">
+                    <el-text size="small" type="info">{{ dayjs(item.createdt).format('YYYY-MM-DD') }}</el-text>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="footer">
+              <RouterLink :to="{ name: 'noticeIndex' }">
+                <el-link type="primary">前往通知中心</el-link>
+              </RouterLink>
+            </div>
+          </div>
+        </template>
+      </el-popover>
       <el-dropdown style="cursor: pointer" @visible-change="changeDropdownVisible">
         <div class="flex align-center" style="gap: 0 10px">
           <!-- <img class="info-avatar" :src="storeUser.userInfo.avatar" alt="" srcset="" /> -->
@@ -32,12 +71,15 @@
 </template>
 
 <script setup>
+import { dayjs } from "element-plus";
 import { useConfigure } from "@/store/configure.js";
 import { useUser } from "@/store/user.js";
 import { useRoutes } from "@/store/routes.js";
 const storeUser = useUser();
 const storeRoutes = useRoutes();
 
+import { title1, title2 } from '@/views/notice/noticeEnum.js'
+
 // 获取配置
 const storeConfigure = useConfigure();
 
@@ -125,6 +167,40 @@ function logOut() {
     }
   }
 
+  .bell_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      .bell {
+        color: var(--el-color-primary);
+        transform: scale(1.2, 1.2);
+      }
+    }
+
+    .dot {
+      display: flex;
+      border-radius: 20px;
+      color: #fff;
+      font-size: 12px;
+      padding: 1px 6px;
+      background-color: #DC362E;
+      position: absolute;
+      top: -8px;
+      left: 40%;
+      z-index: 1;
+    }
+
+    .bell {
+      color: #333;
+      font-size: 16px;
+      transition: all 0.3s;
+    }
+  }
+
   .info-avatar {
     border-radius: 2px;
     width: 35px;
@@ -136,4 +212,33 @@ function logOut() {
     color: #333;
   }
 }
+
+.bell_container {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ececec;
+  }
+
+  .content {
+    max-height: 400px;
+    overflow-y: auto;
+
+    .item {
+      padding: 14px 0;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #ececec;
+      }
+    }
+  }
+
+  .footer {
+    padding-top: 10px;
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid #ececec;
+  }
+}
 </style>

src/views/notice/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="card">
+        <div class="table">
+            <el-table :data="tableOptions.list" size="large" stripe border height="100%" v-loading="tableOptions.loading">
+                <el-table-column prop="id" label="ID" width="100"></el-table-column>
+                <el-table-column label="通知类型">
+                    <template #default="scope">
+                        <el-text>
+                            {{ `${title1[scope.row.typefirst]} - ${title2[scope.row.typesecond]}` }}
+                        </el-text>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="title" label="标题"></el-table-column>
+                <el-table-column prop="desc" label="简介"></el-table-column>
+                <el-table-column label="内容">
+                    <template #default="scope">
+                        <div v-html="scope.row.conrtent"></div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="是否已读">
+                    <template #default="scope">
+                        <el-tag :type="scope.row.isdeal ? 'success' : 'info'" disable-transitions>
+                            {{ scope.row.isdeal ? '已处理' : '未处理' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="通知时间">
+                    <template #default="scope">
+                        <el-text>
+                            {{ dayjs(scope.row.createdt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </el-text>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="120">
+                    <template #default="scope">
+                        <el-link :href="scope.row.url" target="_blank" :underline="false" v-if="scope.row.url">
+                            <el-button type="primary" size="small" icon="Link">跳转</el-button>
+                        </el-link>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="mt15">
+            <el-pagination layout="prev, pager, next, total, sizes, jumper" background
+                v-model:current-page="tableOptions.pageNum" v-model:page-size="tableOptions.pageSzie"
+                :page-size="tableOptions.pageSzie" :page-sizes="[10, 20, 30, 50]" :total="tableOptions.total"
+                @size-change="paginationChange" @current-change="paginationChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { dayjs } from "element-plus";
+import { getNotices } from "@/api/user.js";
+import { title1, title2 } from '@/views/notice/noticeEnum.js'
+
+// 表格参数
+const tableOptions = reactive({
+    loading: true,
+    agencyCode: '',
+    list: [],
+    total: 0,
+    pageNum: 1,
+    pageSzie: 10
+})
+
+// 分页回调
+function paginationChange() {
+    tableOptions.loading = true
+    getNoticesAjax()
+}
+
+// 获取消息列表
+async function getNoticesAjax() {
+    try {
+        const res = await getNotices({
+            currPage: tableOptions.pageNum,
+            size: tableOptions.pageSzie
+        })
+        tableOptions.loading = false
+        tableOptions.list = res.list.list
+        tableOptions.total = res.list.total
+    } catch (error) {
+        console.error('获取消息列表error===', error)
+    }
+}
+
+onMounted(() => {
+    getNoticesAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.table {
+    height: calc(100vh - 263px);
+}
+</style>

src/views/notice/noticeEnum.js

@@ -0,0 +1,20 @@
+// 消息类型枚举
+export const title1 = {
+    0: '分润通知',
+    1: '审核通知',
+    2: '到账通知'
+}
+
+export const title2 = {
+    '-1': '身份证认证',
+    0: '身份证认证',
+    1: '商家认证',
+    2: '店员退款通知',
+    3: '收款通知',
+    4: '邀请注册通知',
+    5: '银行卡认证',
+    6: '商户分润',
+    98: '到账通知',
+    99: '其他',
+    7: '升级收益'
+}

src/views/organization/agent_detail.vue

@@ -0,0 +1,187 @@
+<template>
+    <div class="card">
+        <el-form ref="formRef" :model="form" label-width="120" label-position="left">
+            <el-row :gutter="gutter">
+                <el-col :span="span">
+                    <el-form-item label="手机号">
+                        <el-input v-model="form.phone" placeholder="请输入手机号" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="title_wrap">
+                <el-text>支付宝</el-text>
+            </div>
+            <el-row :gutter="gutter" class="mt15">
+                <el-col :span="span">
+                    <el-form-item label="支付宝名称">
+                        <el-input v-model="form.cashAccount.accountname" placeholder="请输入支付宝名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="span">
+                    <el-form-item label="支付宝账号">
+                        <el-input v-model="form.cashAccount.accountno" placeholder="请输入支付宝账号" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="title_wrap">
+                <el-text>实名身份证</el-text>
+            </div>
+            <el-row :gutter="gutter" class="mt15">
+                <el-col :span="span">
+                    <el-form-item label="实名类型">
+                        <el-select style="width: 100%;" v-model="form.idCard.usertype" placeholder="请选择实名类型">
+                            <el-option value="01" label="实名人" />
+                            <el-option value="02" label="结算人" />
+                            <el-option value="03" label="法人" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="span">
+                    <el-form-item label="证件类型">
+                        <el-select style="width: 100%;" v-model="form.idCard.certtype" placeholder="请选择证件类型">
+                            <el-option value="00" label="身份证" />
+                            <el-option value="03" label="军人证" />
+                            <el-option value="04" label="警察证" />
+                            <el-option value="05" label="港澳居民往来内地通行证" />
+                            <el-option value="06" label="台湾居民来往大陆通行证" />
+                            <el-option value="07" label="护照" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="gutter">
+                <el-col :span="span">
+                    <el-form-item label="证件姓名">
+                        <el-input v-model="form.idCard.certname" placeholder="请输入证件姓名" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="span">
+                    <el-form-item label="证件号">
+                        <el-input v-model="form.idCard.certno" placeholder="请输入证件号" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="gutter">
+                <el-col :span="span">
+                    <el-form-item label="有效期开始时间">
+                        <el-date-picker style="width: 100%;" v-model="form.idCard.certstarttime" type="date"
+                            placeholder="请选择有效期开始时间" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="span">
+                    <el-form-item label="有效期结束时间">
+                        <el-date-picker style="width: 100%;" v-model="form.idCard.certendtime" type="date"
+                            placeholder="请选择有效期结束时间" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="gutter">
+                <el-col :span="span">
+                    <el-form-item label="人像面">
+                        <uploadCard ref="idCardRef1" @selectFile="file => form.idCard.imgpositive = file"
+                            @removeFile="form.idCard.imgpositive = ''" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="span">
+                    <el-form-item label="国徽面">
+                        <uploadCard ref="idCardRef2" @selectFile="file => form.idCard.imgnegative = file"
+                            @removeFile="form.idCard.imgnegative = ''" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item>
+                <el-button type="primary" @click="submitHandle">立即提交</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { uploadOSS } from '@/api/home.js'
+import uploadCard from './components/uploadCard.vue'
+
+import { agencyInfo, updateAgency } from '@/api/shop.js'
+
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const span = ref(10)
+const gutter = ref(50)
+
+const formRef = ref(null)
+
+const idCardRef1 = ref(null)
+const idCardRef2 = ref(null)
+
+const form = reactive({
+    id: '',
+    phone: '',
+    cashAccount: {
+        id: '',
+        userid: '',
+        accountno: '',
+        accountname: '',
+        status: '',
+        createtime: ''
+    },
+    idCard: {
+        id: '',
+        userid: '',
+        usertype: '',
+        certtype: '',
+        certno: '',
+        certname: '',
+        certstarttime: '',
+        certendtime: '',
+        certaddress: '',
+        createtime: '',
+        updatetime: '',
+        imgpositive: '',
+        imgnegative: '',
+        virtypeflag: ''
+    }
+})
+
+// 提交表单
+async function submitHandle() {
+    try {
+        if (form.idCard.imgpositive.uid) {
+            form.idCard.imgpositive = await uploadOSS(form.idCard.imgpositive.raw)
+        }
+        if (form.idCard.imgnegative.uid) {
+            form.idCard.imgnegative = await uploadOSS(form.idCard.imgnegative.raw)
+        }
+        await updateAgency(form)
+        ElMessage.success('提交成功')
+    } catch (error) {
+        console.log('提交表单===', error)
+    }
+}
+
+// 机构详情信息
+async function agencyInfoAjax() {
+    try {
+        const res = await agencyInfo({
+            userId: route.query.id
+        })
+        form.id = res.userId
+        form.phone = res.phone
+        form.cashAccount = res.cashAccount
+        form.idCard = res.idCard
+
+        idCardRef1.value.pselectFile({ url: res.idCard.imgpositive })
+        idCardRef2.value.pselectFile({ url: res.idCard.imgnegative })
+    } catch (error) {
+        console.error('agencyInfoAjax===', error)
+    }
+}
+
+onMounted(() => {
+    agencyInfoAjax()
+})
+</script>
+
+<style scoped lang="scss">
+@import './components/common.scss';
+</style>

src/views/organization/big_organization.vue

@@ -45,8 +45,15 @@
                 <el-table-column prop="sumAccount" label="商家数量"></el-table-column>
                 <el-table-column label="操作">
                     <template #default="scope">
-                        <el-button size="small" type="primary" icon="DataLine"
+                        <el-space>
-                            @click="checkChartHandle(scope.row.id)">详细数据</el-button>
+                            <el-button size="small" type="primary" icon="DataLine"
+                                @click="checkChartHandle(scope.row.id)">数据</el-button>
+                            <RouterLink :to="{ name: 'agent_detail', query: { id: scope.row.id } }">
+                                <el-button type="primary" size="small" icon="Search" v-permission="['MG']">
+                                    详情
+                                </el-button>
+                            </RouterLink>
+                        </el-space>
                     </template>
                 </el-table-column>
             </el-table>