我是个攻城狮
396 lines
7.9 KiB
Vue
396 lines
7.9 KiB
Vue
<template>
|
|
<Layout :index="-1" :banner="0" :img="'/static/img/about.jpg'" :titles="'个人中心'" :title_content="'个人中心'">
|
|
<view class="bg ptm-80">
|
|
<view class="content">
|
|
<view class="content_left">
|
|
<memberleft :index="'5'"></memberleft>
|
|
</view>
|
|
<view class="content_right">
|
|
<view class="mtitle">
|
|
<image src="../static/img/member/tz.png" class="mimg"></image>
|
|
平台通知
|
|
</view>
|
|
<view class="lines"></view>
|
|
|
|
<view class="content_r">
|
|
<view class="d-b-c">
|
|
<view class="sx" >
|
|
<view class="sx_list" :class="state=='all'?'active':''" @tap="StackingContext('all')">
|
|
全部
|
|
</view>
|
|
<view class="sx_list" :class="state=='unread'?'active':''" @tap="StackingContext('unread')">
|
|
未读通知
|
|
</view>
|
|
</view>
|
|
<view class="search-box" @tap="readall()">
|
|
全部已读
|
|
</view>
|
|
</view>
|
|
<!-- listData 列表渲染 -->
|
|
<view class="notice_content">
|
|
<view
|
|
class="notice_list"
|
|
v-for="item in listData"
|
|
:key="item.notice_id"
|
|
@tap="goEdit(item.notice_id)"
|
|
>
|
|
<view class="notice_list_left">
|
|
<image
|
|
:src="item.read_status == 1 ? '../static/img/member/wd.png' : '../static/img/member/yd.png'"
|
|
class="nimg"
|
|
></image>
|
|
<view class="notice_title">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="notice_desc">
|
|
{{ item.content }}
|
|
</view>
|
|
</view>
|
|
<view class="notice_time">
|
|
{{ item.create_time ? item.create_time.split(' ')[0] : '' }}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<el-pagination v-if="total>15" background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</Layout>
|
|
</template>
|
|
|
|
<script>
|
|
import Layout from './part/layouts.vue';
|
|
import memberleft from './part/member_left.vue';
|
|
export default {
|
|
components:{
|
|
Layout,
|
|
memberleft
|
|
},
|
|
data(){
|
|
return {
|
|
page: 1,
|
|
list_rows: 15,
|
|
listData: [],
|
|
total: 0,
|
|
name:'',
|
|
state:'all',//unread未读
|
|
}
|
|
},
|
|
created() {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
const mobileWidth = 768; // 可以根据需要调整这个值
|
|
const isMobile = width <= mobileWidth || height <= mobileWidth;
|
|
if(isMobile){
|
|
this.list_rows = 30;
|
|
}
|
|
let obj = this.$Route.query;
|
|
if(obj.hasOwnProperty('index')){
|
|
this.category_id = Number(obj.index);
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
this.getData();
|
|
},
|
|
|
|
methods:{
|
|
StackingContext(e){
|
|
this.state = e;
|
|
this.page = 1;
|
|
this.getData();
|
|
},
|
|
downloadPDF(e) {
|
|
if(!e){
|
|
this.$message.error('评估报告生成中~');
|
|
}else{
|
|
window.open(e, '_blank');
|
|
}
|
|
// 下载
|
|
// const pdfUrl = e;
|
|
// const a = document.createElement('a');
|
|
// a.href = pdfUrl;
|
|
// a.download = '评估报告.pdf';
|
|
// a.click();
|
|
// document.body.removeChild(a);
|
|
},
|
|
goEdit(e){
|
|
this.$router.push({
|
|
path: 'notice_details',
|
|
query: {
|
|
id: e
|
|
}
|
|
})
|
|
},
|
|
/*每页多少条*/
|
|
handleSizeChange(val){
|
|
this.list_rows = val;
|
|
this.getData();
|
|
},
|
|
/*选择第几页*/
|
|
handleCurrentChange(val){
|
|
this.page = val;
|
|
this.getData();
|
|
},
|
|
getData(){
|
|
this._get('notice.Notice/index',{
|
|
page: this.page,
|
|
limit: this.list_rows,
|
|
state: this.state,
|
|
},res=>{
|
|
this.listData = res.data.data;
|
|
this.total = res.data.total;
|
|
}
|
|
,err=>{
|
|
uni.showToast({
|
|
icon:'none',
|
|
title: err.data.msg
|
|
})
|
|
return;
|
|
// this.$message(err.data.msg);
|
|
}
|
|
);
|
|
},
|
|
readall(){
|
|
this._post('/notice.Notice/readAll',{
|
|
},res=>{
|
|
uni.showToast({
|
|
icon:'none',
|
|
title: '操作成功'
|
|
})
|
|
this.getData();
|
|
}
|
|
,err=>{
|
|
uni.showToast({
|
|
icon:'none',
|
|
title: err.data.msg
|
|
})
|
|
return;
|
|
// this.$message(err.data.msg);
|
|
}
|
|
);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bg{
|
|
width: 100%;
|
|
background: #F1F1F1;
|
|
min-height: 800px;
|
|
}
|
|
.content{
|
|
width: 1290px;
|
|
margin: 0 auto;
|
|
padding-top: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content_left{
|
|
width: 245px;
|
|
min-height: 789px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
.content_right{
|
|
width: 1024px;
|
|
min-height: 789px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
.mtitle{
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #3D3D3D;
|
|
width: 985px;
|
|
margin:0 auto;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.lines{
|
|
width: 985px;
|
|
height: 0px;
|
|
border: 1px solid #D8D8D8;
|
|
opacity: 0.6;
|
|
margin:0 auto;
|
|
}
|
|
.mimg{
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 10px;
|
|
margin-left: 23px;
|
|
}
|
|
.content_r{
|
|
padding: 34px 22px;
|
|
}
|
|
.addimg{
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
.addimgs{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 8px;
|
|
}
|
|
.sx{
|
|
display: flex;
|
|
}
|
|
.sx .sx_list{
|
|
background: #EDEEF0;
|
|
border-radius: 16px 16px 16px 16px;
|
|
padding: 5px 20px;
|
|
margin-right: 24px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #1D2129;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.sx .active{
|
|
background: #F78A30 !important;
|
|
color: #ffffff;
|
|
}
|
|
.search-box{
|
|
width: 96px;
|
|
height: 32px;
|
|
border-radius: 16px 16px 16px 16px;
|
|
border: 1px solid #F05B0E;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #F05B0E;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
cursor: pointer;
|
|
}
|
|
.search-name{
|
|
width: 232px;
|
|
height: 32px;
|
|
background: #F7F8FA;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
line-height: 32px;
|
|
}
|
|
.search-names{
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #86909C;
|
|
}
|
|
.notice_content{
|
|
margin-top: 30px;
|
|
}
|
|
::v-deep .el-table__header th {
|
|
background-color: #F2F3F5;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #1D2129;
|
|
text-align: center;
|
|
}
|
|
.green{
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #20BC30;
|
|
}
|
|
.red{
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #EA3B3B;
|
|
}
|
|
.center-table .el-table__header th,
|
|
.center-table .el-table__body td {
|
|
color: #EA3B3B !important;
|
|
}
|
|
.asset_e{
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #F6773C;
|
|
}
|
|
.asset_l{
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #165DFF;
|
|
}
|
|
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
|
|
background-color:#ffffff !important;
|
|
}
|
|
|
|
|
|
.notice_list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.notice_list .notice_list_left{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.notice_list .nimg{
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 10px;
|
|
}
|
|
.notice_title{
|
|
font-weight: 500;
|
|
color: #3D3D3D;
|
|
margin-right: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.notice_desc{
|
|
width: 660px;
|
|
height: 22px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #767676;
|
|
line-height: 22px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
//一行显示多的用省略号
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.notice_time{
|
|
width: 105px;
|
|
height: 22px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #767676;
|
|
line-height: 22px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
}
|
|
</style>
|