czg_team/organization-manage
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增消息列表

Browse Source
This commit is contained in:
高玉强
2023-09-27 15:16:08 +08:00
parent b0fea79781
commit 5ada449282
10 changed files with 514 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/api/shop.js
View File

@@ -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
})
}

13
src/api/user.js
View File

@@ -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
})
}

3
src/router/index.js
View File

@@ -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()
}
}
}

32
src/router/routes.js
View File

@@ -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,
}
}
]
}
];

21
src/store/user.js
View File

@@ -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)
}
}
},
});

105
src/views/layout/components/pageHeader.vue
View File

@@ -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>

97
src/views/notice/index.vue Normal file
View File

@@ -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>

20
src/views/notice/noticeEnum.js Normal file
View File

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

187
src/views/organization/agent_detail.vue Normal file
View File

@@ -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>

11
src/views/organization/big_organization.vue
View File

@@ -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"
@click="checkChartHandle(scope.row.id)">详细数据</el-button>
<el-space>
<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>