秀山工作台入库
This commit is contained in:
aixianling
560
project/xiushan/apps/AppConsole/AppConsole.vue
Normal file
560
project/xiushan/apps/AppConsole/AppConsole.vue
Normal file
@@ -0,0 +1,560 @@
|
|||||||
|
<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" 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">
|
||||||
|
<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" 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",
|
||||||
|
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('/appleavemessage/list?current=1&size=10').then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.comments = res.data.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getInfo() {
|
||||||
|
this.instance.post("/todo/queryToDoList").then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.info = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getNewsList() {
|
||||||
|
this.instance.post('/appnews/list?current=1&size=10').then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.news = res.data.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList() {
|
||||||
|
this.instance.post('/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;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 480px;
|
||||||
|
height: 360px;
|
||||||
|
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 {
|
||||||
|
flex: 1;
|
||||||
|
height: 360px;
|
||||||
|
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>
|
||||||
BIN
project/xiushan/apps/AppConsole/assets/qd.png
Normal file
BIN
project/xiushan/apps/AppConsole/assets/qd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
project/xiushan/apps/AppConsole/assets/right.png
Normal file
BIN
project/xiushan/apps/AppConsole/assets/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
Reference in New Issue
Block a user