dai
3 years ago
25 changed files with 729 additions and 285 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,303 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-tx"> |
|||
<div class="wrap"> |
|||
<div class="header"> |
|||
<div class="title">全部提醒</div> |
|||
<div class="btn-clear" @click="read"> |
|||
<img src="~@/assets/images/main/clear.png" /> |
|||
全部标记已读 |
|||
</div> |
|||
</div> |
|||
<div class="cnt" v-if="noticeData.length > 0"> |
|||
<div |
|||
@click="handleClickNotice(item, index)" |
|||
:class="{ 'z-readed': item.readFlag == 1 }" |
|||
class="item" |
|||
:key="'notice' + item.targetId + index" |
|||
v-for="(item, index) in noticeData" |
|||
> |
|||
<i class="i-tag" v-if="item.readFlag == 1">已读</i> |
|||
<i class="i-tag" v-else>未读</i> |
|||
<div class="item-title"> |
|||
{{ item.content }} |
|||
</div> |
|||
<div |
|||
v-if="item.readFlag != 1" |
|||
@click.stop="read(item)" |
|||
class="item-btn-clear" |
|||
> |
|||
<img src="~@/assets/images/main/clear.png" /> |
|||
标记已读 |
|||
</div> |
|||
<div class="item-date">{{ item.createdTime }}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="cnt" v-else> |
|||
<div class="empty"> |
|||
<img |
|||
src="~@/assets/images/shuju/renfang/index/empty.png" |
|||
/> |
|||
<span>暂无提醒～</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<fastcall ref="fastcall" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestGet, requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import fastcall from "@/views/modules/cpts/fastcall"; |
|||
|
|||
export default { |
|||
components: { fastcall }, |
|||
|
|||
data() { |
|||
return { |
|||
type: "all", |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
noticeData: [], |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
watch: {}, |
|||
activated() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
handleClickNotice(item, index) { |
|||
const { msgType, targetId } = item; |
|||
if (msgType == "community_house") { |
|||
this.$refs.fastcall.showHouseInfo(targetId); |
|||
} else if (msgType == "resident_base_info") { |
|||
this.$refs.fastcall.showResiInfo(targetId); |
|||
} |
|||
this.read(item, index); |
|||
}, |
|||
|
|||
async read(item, index) { |
|||
if (item && item.readFlag == 1) return; |
|||
|
|||
const url = "/message/intelligentMessage/msg/clear"; |
|||
let params = {}; |
|||
|
|||
if (item.id) { |
|||
params.id = item.id; |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
console.log("消息已读"); |
|||
this.getList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleClickTab(type) { |
|||
console.log(type); |
|||
this.getList(); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
localStorage.setItem("pageSize", val); |
|||
this.getList(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getList(); |
|||
}, |
|||
//加载组织数据 |
|||
async getList() { |
|||
const url = "/message/intelligentMessage/page"; |
|||
let params = { |
|||
page: this.pageNo, |
|||
limit: this.pageSize, |
|||
}; |
|||
const { type } = this; |
|||
if (type == "readed") { |
|||
params.readFlag = 1; |
|||
} else if (type == "unreaded") { |
|||
params.readFlag = 0; |
|||
} |
|||
|
|||
const { data, code, msg } = await requestGet(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total; |
|||
this.noticeData = data.list; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/scss/c/function.scss"; |
|||
|
|||
.m-tx { |
|||
position: relative; |
|||
margin: 10px 6px; |
|||
padding: 12px 20px; |
|||
background: #ffffff; |
|||
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), |
|||
0px 3px 6px -4px rgba(0, 0, 0, 0.12); |
|||
border-radius: 2px; |
|||
|
|||
.cnt { |
|||
box-sizing: border-box; |
|||
border-radius: 2px; |
|||
overflow: hidden; |
|||
padding: 0 12px; |
|||
|
|||
.empty { |
|||
margin: 100px 0; |
|||
text-align: center; |
|||
color: #999; |
|||
img { |
|||
display: block; |
|||
width: 120px; |
|||
margin: 20px auto; |
|||
} |
|||
} |
|||
|
|||
.z-readed { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.item { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 16px 0 12px; |
|||
border-bottom: 1px dashed #f0f5fa; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&:hover { |
|||
.item-title { |
|||
color: #0056d6; |
|||
} |
|||
.item-btn-clear { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.i-tag { |
|||
display: block; |
|||
margin-right: 15px; |
|||
width: 40px; |
|||
height: 22px; |
|||
border-radius: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.15); |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(0, 0, 0, 0.88); |
|||
line-height: 20px; |
|||
font-style: normal; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item-title { |
|||
// @include toe; |
|||
width: 60%; |
|||
margin-right: 100px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.item-btn-clear { |
|||
position: absolute; |
|||
display: none; |
|||
top: 50%; |
|||
left: 65%; |
|||
width: 80px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #0042a3; |
|||
line-height: 16px; |
|||
cursor: pointer; |
|||
transform: translateY(-50%); |
|||
|
|||
img { |
|||
width: 16px; |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
|
|||
.item-date { |
|||
margin-left: 100px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
line-height: 17px; |
|||
} |
|||
} |
|||
} |
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 12px 0; |
|||
margin-bottom: 10px; |
|||
border-bottom: 1px solid #f0f5fa; |
|||
.title { |
|||
height: 22px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
line-height: 22px; |
|||
} |
|||
.btn-clear { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #0042a3; |
|||
line-height: 16px; |
|||
cursor: pointer; |
|||
img { |
|||
width: 16px; |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-tabs__nav-wrap::after { |
|||
height: 1px; |
|||
background-color: #f0f5fa; |
|||
} |
|||
|
|||
/deep/ .el-pagination__total { |
|||
// float: left; |
|||
} |
|||
</style> |
|||
@ -1,54 +1,61 @@ |
|||
/** |
|||
* 配置参考: https://cli.vuejs.org/zh/config/
|
|||
*/ |
|||
const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) |
|||
const IS_PROD = ["production", "test"].includes(process.env.NODE_ENV); |
|||
module.exports = { |
|||
baseUrl: process.env.NODE_ENV === 'production' ? '' : '/epmet-work-pc', |
|||
css: { |
|||
// 是否使用css分离插件 ExtractTextPlugin
|
|||
extract: IS_PROD, |
|||
// 开启 CSS source maps?
|
|||
sourceMap: false, |
|||
// css预设器配置项
|
|||
loaderOptions: {}, |
|||
// 启用 CSS modules for all css / pre-processor files.
|
|||
modules: false |
|||
}, |
|||
chainWebpack: (config) => { |
|||
const svgRule = config.module.rule('svg') |
|||
svgRule.uses.clear() |
|||
svgRule |
|||
.test(/\.svg$/) |
|||
.use('svg-sprite-loader') |
|||
.loader('svg-sprite-loader') |
|||
}, |
|||
productionSourceMap: false, |
|||
outputDir: 'epmet-work-pc', |
|||
assetsDir: 'static', |
|||
devServer: { |
|||
open: true, |
|||
port: 9001, |
|||
overlay: { |
|||
errors: true, |
|||
warnings: true |
|||
} |
|||
}, |
|||
// webpack简单配置
|
|||
configureWebpack: { |
|||
// debuge调试配置
|
|||
devtool: 'source-map', |
|||
externals: { |
|||
AMap: 'AMap' |
|||
}, |
|||
resolve: { |
|||
//配置路径别名
|
|||
// /node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径，所以这里可以直接使用@
|
|||
alias: { |
|||
'@js': '@/js', |
|||
'@c': '@/views/components', |
|||
'@v': '@/views', |
|||
'@m': '@/img' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
baseUrl: process.env.NODE_ENV === "production" ? "" : "/epmet-work-pc", |
|||
css: { |
|||
// 是否使用css分离插件 ExtractTextPlugin
|
|||
extract: IS_PROD, |
|||
// 开启 CSS source maps?
|
|||
sourceMap: false, |
|||
// css预设器配置项
|
|||
loaderOptions: {}, |
|||
// 启用 CSS modules for all css / pre-processor files.
|
|||
modules: false, |
|||
}, |
|||
chainWebpack: (config) => { |
|||
const svgRule = config.module.rule("svg"); |
|||
svgRule.uses.clear(); |
|||
svgRule |
|||
.test(/\.svg$/) |
|||
.use("svg-sprite-loader") |
|||
.loader("svg-sprite-loader"); |
|||
}, |
|||
productionSourceMap: false, |
|||
outputDir: "epmet-work-pc", |
|||
assetsDir: "static", |
|||
devServer: { |
|||
proxy: { |
|||
// 如果请求地址以/api打头,就出触发代理机制
|
|||
// http://localhost:9588/api/login -> http://localhost:3000/api/login
|
|||
"/linkdata/linkdata-gateway/route": { |
|||
target: "http://bipaas.elinkservice.cn", // 我们要代理的真实接口地址
|
|||
}, |
|||
}, |
|||
open: true, |
|||
port: 9001, |
|||
overlay: { |
|||
errors: true, |
|||
warnings: true, |
|||
}, |
|||
}, |
|||
// webpack简单配置
|
|||
configureWebpack: { |
|||
// debuge调试配置
|
|||
devtool: "source-map", |
|||
externals: { |
|||
AMap: "AMap", |
|||
}, |
|||
resolve: { |
|||
//配置路径别名
|
|||
// /node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径，所以这里可以直接使用@
|
|||
alias: { |
|||
"@js": "@/js", |
|||
"@c": "@/views/components", |
|||
"@v": "@/views", |
|||
"@m": "@/img", |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
Loading…
Reference in new issue