秀山工作台入库
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