560 lines
12 KiB
Vue
560 lines
12 KiB
Vue
<template>
|
||
<section class="AppConsole">
|
||
<div class="top">
|
||
<div class="left">
|
||
<!-- <img :src="user.info.avatar"> -->
|
||
<div class="user">
|
||
<h2 class="mar-b10">您好，{{ user.info.name }}，欢迎回来！</h2>
|
||
<p v-if="user.financeUser" v-text="financeInfo"/>
|
||
<span>上次登录时间：{{ user.info.lastLoginTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="right-item" v-for="row in info" :key="row.name" @click="$router.push({name:row.menuId,query:{status:row.dictValue}})">
|
||
<div class="top">
|
||
<i v-if="row.countNumber>0"/>
|
||
<span v-text="row.name"/>
|
||
</div>
|
||
<h2 v-text="row.countNumber"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="middle fill" v-if="!isFinanceUser">
|
||
<div class="left">
|
||
<div class="title">
|
||
<h2>群众留言</h2>
|
||
<div @click="$router.push({name:routeNames.AppMassMessage})">
|
||
<span>全部留言</span>
|
||
<img src="./assets/right.png">
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="comment-item" v-for="(item, index) in comments" :key="index"
|
||
@click="$router.push({name:routeNames.AppMassMessage,query:{id:item.id}})">
|
||
<h3>{{ item.title }}</h3>
|
||
<div class="comment-item__bottom">
|
||
<span>{{ dict.getLabel('leaveMessageType', item.type) }}</span>
|
||
<i>{{ item.createTime }}</i>
|
||
</div>
|
||
</div>
|
||
<ai-empty class="w100" v-if="!comments.length"/>
|
||
</div>
|
||
</div>
|
||
<div class="right fill">
|
||
<div class="title">
|
||
<h2>政策动态</h2>
|
||
<div @click="$router.push({name:routeNames.AppNewsCenter})">
|
||
<span>全部动态</span>
|
||
<img src="./assets/right.png">
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="dynamic-item" v-for="(item, index) in news" :key="index" @click="$router.push({
|
||
name: routeNames.AppNewsCenter,
|
||
query: {
|
||
id: item.id
|
||
},
|
||
hash: '#' + (item.type === '0' ? 'news' : 'video')
|
||
})">
|
||
<i></i>
|
||
<div class="dynamic-item__right">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.createTime }}</p>
|
||
</div>
|
||
</div>
|
||
<ai-empty class="w100" v-if="!news.length"></ai-empty>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom fill" v-else>
|
||
<div class="title">
|
||
<h2>需求抢单</h2>
|
||
<div @click="$router.push({name:routeNames.AppFinancingNeeds})">
|
||
<span>查看全部</span>
|
||
<img src="./assets/right.png">
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="item" v-for="(item, index) in list" :key="index">
|
||
<div class="item-top">
|
||
<div class="item-top__left fill">
|
||
<h2 class="nowrap">{{ item.enterpriseName || item.name }}</h2>
|
||
<p>{{ item.areaName }}</p>
|
||
</div>
|
||
<img @click="$router.push({name:routeNames.AppFinancingNeeds,query:{id:item.id}})"
|
||
src="./assets/qd.png">
|
||
</div>
|
||
<div class="item-bottom">
|
||
<div class="item-bottom__item">
|
||
<span>需求金额</span>
|
||
<h3>{{ item.loanAmount }}万</h3>
|
||
</div>
|
||
<div class="item-bottom__item">
|
||
<span>使用时长</span>
|
||
<h3 v-text="dict.getLabel('productRepaymentTimeline',item.hopeLifespan)"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ai-empty class="pad-b48 w100" v-if="!list.length"/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "AppConsole",
|
||
label: "工作台",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
isFinanceUser() {
|
||
return !!this.user?.financeUser?.id
|
||
},
|
||
financeInfo() {
|
||
let {organizationName, userRole} = this.user.financeUser
|
||
return [organizationName, this.dict.getLabel("financialOrganizationUserRole", userRole)].join(" | ")
|
||
},
|
||
routeNames() {
|
||
return {
|
||
AppMassMessage: "c66857ca597f49aab9c1aeb8a8e3e7c0",
|
||
AppNewsCenter: '6a56c8fdb09a437098f837a03a5fccb0',
|
||
AppFinancingNeeds: "27338cb83e77461dbd44356a6760df85",
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
comments: [],
|
||
news: [],
|
||
list: [],
|
||
info: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.dict.load('leaveMessageType', 'financialOrganizationUserRole', 'productRepaymentTimeline').then(() => {
|
||
this.getComments()
|
||
this.getNewsList()
|
||
this.getList()
|
||
this.getInfo()
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
getComments() {
|
||
this.instance.post('/app/appleavemessage/list?current=1&size=10').then(res => {
|
||
if (res?.data) {
|
||
this.comments = res.data.records
|
||
}
|
||
})
|
||
},
|
||
|
||
getInfo() {
|
||
this.instance.post("/app/todo/queryToDoList").then(res => {
|
||
if (res?.data) {
|
||
this.info = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getNewsList() {
|
||
this.instance.post('/app/appnews/list?current=1&size=10').then(res => {
|
||
if (res?.data) {
|
||
this.news = res.data.records
|
||
}
|
||
})
|
||
},
|
||
|
||
getList() {
|
||
this.instance.post('/app/appfinancingdemand/list?current=1&size=8', null, {
|
||
params: {status: 0}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.list = res.data.records
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.AppConsole {
|
||
height: 100%;
|
||
margin-bottom: 20px;
|
||
padding: 0 20px;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.w100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.item-top__left {
|
||
width: 100%;
|
||
}
|
||
|
||
.nowrap {
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 56px;
|
||
|
||
h2 {
|
||
color: #222222;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
span {
|
||
margin-right: 4px;
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
img {
|
||
width: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
& > .top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 152px;
|
||
margin: 20px 0;
|
||
padding: 0 40px 0 16px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 2px;
|
||
|
||
.left {
|
||
display: flex;
|
||
|
||
img {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin-right: 16px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 30px;
|
||
}
|
||
|
||
span {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 8px;
|
||
color: #46669D;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.right-item {
|
||
margin-right: 64px;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 32px;
|
||
color: #222;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
i {
|
||
width: 6px;
|
||
height: 6px;
|
||
margin-right: 8px;
|
||
border-radius: 50%;
|
||
background: #FA9D50;
|
||
}
|
||
|
||
span {
|
||
color: #666666;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.middle {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
.left {
|
||
width: 480px;
|
||
padding: 0 16px 16px;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 4px;
|
||
|
||
.comment-item {
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
&:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
|
||
h3 {
|
||
line-height: 1.2;
|
||
margin-bottom: 8px;
|
||
color: #333333;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: #2266FF;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
}
|
||
|
||
span {
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
padding: 0 8px;
|
||
color: #2266FF;
|
||
font-size: 12px;
|
||
background: #E8EFFF;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
height: calc(100% - 56px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.right {
|
||
margin-left: 20px;
|
||
padding: 0 16px 16px;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 4px;
|
||
|
||
.dynamic-item {
|
||
display: flex;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
|
||
&:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
|
||
i {
|
||
position: relative;
|
||
top: 8px;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-right: 8px;
|
||
border-radius: 50%;
|
||
border: 2px solid #2266FF;
|
||
}
|
||
|
||
.dynamic-item__right {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
|
||
h3 {
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
color: #2266FF;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
p {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-bottom: 20px;
|
||
padding: 0 16px 20px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||
border-radius: 4px;
|
||
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.item {
|
||
width: 372px;
|
||
height: 132px;
|
||
margin-bottom: 16px;
|
||
margin-right: 16px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.02);
|
||
border-radius: 12px;
|
||
border: 1px solid #EEEEEE;
|
||
|
||
// &:nth-of-type(3n) {
|
||
// margin-right: 0;
|
||
// }
|
||
|
||
.item-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 56px;
|
||
|
||
.item-bottom__item {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
|
||
&:first-child::after {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
z-index: 1;
|
||
width: 1px;
|
||
height: 24px;
|
||
background: #EEEEEE;
|
||
transform: translateY(-50%);
|
||
content: ' ';
|
||
}
|
||
|
||
span {
|
||
margin-right: 12px;
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
h3 {
|
||
color: #333333;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 76px;
|
||
padding: 0 16px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
h2 {
|
||
margin-bottom: 8px;
|
||
color: #333333;
|
||
font-size: 17px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
p {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|