通知公告

This commit is contained in:
wanglei
2021-11-22 10:59:46 +08:00
parent 5aa59dd401
commit dddbbc6faf
4 changed files with 113 additions and 96 deletions

View File

@@ -1,60 +1,67 @@
<template> <template>
<div class="notification"> <div class="notification">
<AiTopFixed> <template v-if="showList">
<u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs> <AiTopFixed>
</AiTopFixed> <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
<div class="body" v-if="dataList.length"> </AiTopFixed>
<div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)"> <div class="body" v-if="dataList.length">
<template v-if="!item.imgUrl"> <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
<label> <template v-if="!item.imgUrl">
<b v-if="index==0 && item.readStatus==0"></b> <label>
<div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div> <b v-if="index==0 && item.readStatus==0"></b>
{{item.title}} <div class="tag" v-if="index==1" :style="color(item.status)">
</label> {{$dict.getLabel("announcementStatus",item.status)}}
<u-gap height="16"></u-gap> </div>
<span class="info"> {{item.title}}
</label>
<u-gap height="16"></u-gap>
<span class="info">
<text>{{item.releaseUserName}}</text> <text>{{item.releaseUserName}}</text>
<text>{{item.releaseTime}}</text> <text>{{item.releaseTime}}</text>
</span> </span>
</template> </template>
<template v-else> <template v-else>
<div class="has-pic"> <div class="has-pic">
<div class="left"> <div class="left">
<label> <label>
<b v-if="index==0 && item.readStatus==0"></b> <b v-if="index==0 && item.readStatus==0"></b>
<div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div> <div class="tag" v-if="index==1" :style="color(item.status)">
{{item.title}} {{$dict.getLabel("announcementStatus",item.status)}}
</label> </div>
<u-gap height="16"></u-gap> {{item.title}}
<span class="info"> </label>
<u-gap height="16"></u-gap>
<span class="info">
<text>{{item.releaseUserName}}</text> <text>{{item.releaseUserName}}</text>
<text>{{item.releaseTime}}</text> <text>{{item.releaseTime}}</text>
</span> </span>
</div>
<img :src="item.imgUrl" alt="">
</div> </div>
<img :src="item.imgUrl" alt=""> </template>
</div> </div>
</template>
</div> </div>
</div>
<AiEmpty v-else/> <AiEmpty v-else/>
<u-loadmore :status="status" v-if="dataList.length"/> <u-loadmore :status="status" v-if="dataList.length"/>
<AiAdd @add="add"/> <AiAdd @add="add"/>
<u-popup :show="show" mode="bottom"> <u-popup :show="show" mode="bottom" closeOnClickOverlay>
<div class="popup-wrap"> <div class="popup-wrap">
<u-row justify="between"> <u-row justify="between">
<div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)"> <div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)">
<u-icon :name="item.icon" size="100" :custom-style="{backgroundColor:'#fff',borderRadius:'16px'}"></u-icon> <u-icon :name="item.icon" size="50" :custom-style="{backgroundColor:'#fff',borderRadius:'8px'}"></u-icon>
<u-gap height="16"></u-gap> <u-gap height="16"></u-gap>
{{item.name}} {{item.name}}
</div> </div>
</u-row> </u-row>
<div class="btn" @click="show=false">关闭</div> <div class="btn" @click="show=false">关闭</div>
</div> </div>
</u-popup> </u-popup>
<u-modal v-model="modal" :content="'是否确定' + content + '该公告?'" title="" show-confirm-button <u-modal v-model="modal" :content="'是否确定' + content + '该公告?'" title="" show-confirm-button
show-cancel-button confirm-text="确定" cancel-text="取消" show-cancel-button confirm-text="确定" cancel-text="取消"
@confirm="confirm"></u-modal> @confirm="confirm"></u-modal>
</template>
<component :is="comp" v-else :params="params"></component>
</div> </div>
</template> </template>
@@ -62,11 +69,12 @@
import AiAdd from "../../components/AiAdd"; import AiAdd from "../../components/AiAdd";
import AiEmpty from "../../components/AiEmpty/AiEmpty"; import AiEmpty from "../../components/AiEmpty/AiEmpty";
import AiTopFixed from "../../components/AiTopFixed"; import AiTopFixed from "../../components/AiTopFixed";
import {add, detail, read} from "./components"
export default { export default {
name: "notification", name: "notification",
appName: "通知公告", appName: "通知公告",
components: {AiAdd, AiEmpty,AiTopFixed}, components: {AiAdd, AiEmpty, AiTopFixed, add, detail, read},
data() { data() {
return { return {
index: 0, index: 0,
@@ -76,19 +84,22 @@
current: 1, current: 1,
dataList: [], dataList: [],
detail: {}, detail: {},
showList: true,
comp: "",
params: null,
status: "加载更多", status: "加载更多",
} }
}, },
onLoad(){ onLoad() {
this.$dict.load("announcementStatus"); this.$dict.load("announcementStatus");
}, },
computed: { computed: {
tabs() { tabs() {
return [{name: "最新公告"},{name: "公告管理"}]; return [{name: "最新公告"}, {name: "公告管理"}];
}, },
optList(){ optList() {
return [ return [
{ {
name: "详情", name: "详情",
@@ -119,28 +130,28 @@
val: 4, val: 4,
show: true, show: true,
} }
].filter(e=>e.show) ].filter(e => e.show)
} }
}, },
methods: { methods: {
changeState(){ changeState() {
this.$http.post(this.content =='删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status",null,{ this.$http.post(this.content == '删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status", null, {
params: { params: {
[this.content =='删除' ? 'ids' : 'id']:this.detail.id [this.content == '删除' ? 'ids' : 'id']: this.detail.id
} }
}).then(res=>{ }).then(res => {
if(res.code==0){ if (res.code == 0) {
this.$u.toast(this.content + "成功"); this.$u.toast(this.content + "成功");
this.getList(); this.getList();
} }
}) })
}, },
confirm(){ confirm() {
this.show = false; this.show = false;
this.changeState(); this.changeState();
}, },
handleOpt(item){ handleOpt(item) {
this.content = { this.content = {
1: "撤回", 1: "撤回",
2: "发布", 2: "发布",
@@ -154,39 +165,41 @@
}); });
} }
if ([1,2,4].includes(item.val)) { if ([1, 2, 4].includes(item.val)) {
return this.modal = true; return this.modal = true;
} }
if(item.val==3){ if (item.val == 3) {
this.show = false; this.show = false;
return uni.navigateTo({ return uni.navigateTo({
url:"/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false url: "/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false
}); });
} }
}, },
color(status){ color(status) {
return [ return [
{backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"}, {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"},
{backgroundColor:"rgba(34,102,255,0.1)",color:"#2266FF"}, {backgroundColor: "rgba(34,102,255,0.1)", color: "#2266FF"},
{backgroundColor:"rgba(102,102,102,0.1)",color:"#666666"}, {backgroundColor: "rgba(102,102,102,0.1)", color: "#666666"},
{backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"} {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"}
][status]; ][status];
}, },
handeClick(item) { handeClick(item) {
this.detail = item; this.detail = item;
if (this.index == 1) { if (this.index == 1) {
this.show = true; this.show = true;
}else { } else {
uni.navigateTo({ this.comp = "detail";
url: "/pages/notification/components/detail?id=" + this.detail.id + "&flag=" + true this.params = {
}) id: this.detail.id,
flag: true
};
this.showList = false;
} }
}, },
add(){ add() {
uni.navigateTo({ this.comp = "add";
url: "/pages/notification/components/add" this.showList = false;
})
}, },
change(val) { change(val) {
this.index = val.index; this.index = val.index;
@@ -194,7 +207,7 @@
this.getList() this.getList()
}, },
getList() { getList() {
this.$http.post(this.index ==0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, { this.$http.post(this.index == 0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
params: { params: {
size: 10, size: 10,
current: this.current current: this.current
@@ -228,7 +241,7 @@
background-color: #F5F5F5; background-color: #F5F5F5;
padding-bottom: 32px; padding-bottom: 32px;
::v-deep .content{ ::v-deep .content {
padding: 0 !important; padding: 0 !important;
} }
@@ -247,7 +260,7 @@
background-color: #ffffff; background-color: #ffffff;
margin-bottom: 32px; margin-bottom: 32px;
&:last-child{ &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -272,7 +285,7 @@
margin-right: 8px; margin-right: 8px;
} }
.tag{ .tag {
width: 96px; width: 96px;
height: 44px; height: 44px;
display: inline-block; display: inline-block;
@@ -311,7 +324,8 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
} }
& > img{
& > img {
width: 192px; width: 192px;
height: 144px; height: 144px;
flex-shrink: 0; flex-shrink: 0;
@@ -325,7 +339,7 @@
height: 368px; height: 368px;
background-color: #F7F7F7; background-color: #F7F7F7;
.btn{ .btn {
height: 96px; height: 96px;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -63,16 +63,15 @@
export default { export default {
name: "detail", name: "detail",
components:{AiBack,AiEmpty}, components:{AiBack,AiEmpty},
props:{
params:Object
},
data() { data() {
return { return {
detailObj: null, detailObj: {},
id: null,
flag: null,
} }
}, },
onLoad(opt){ created() {
this.id = opt.id;
this.flag = opt.flag;
this.getDetail(); this.getDetail();
}, },
methods: { methods: {
@@ -90,8 +89,8 @@
getDetail() { getDetail() {
this.$http.post("/app/appannouncement/detail", null, { this.$http.post("/app/appannouncement/detail", null, {
params: { params: {
id: this.id, id: this.params?.id,
detail: this.flag detail: this.params?.flag
} }
}).then(res=>{ }).then(res=>{
if(res && res.data){ if(res && res.data){
@@ -100,9 +99,9 @@
}) })
}, },
handleClick() { handleClick() {
uni.navigateTo({ this.$parent.params = this.params.id;
url:"/pages/notification/components/read?id=" + this.id, this.$parent.comp = "read";
}) this.$parent.showList = false;
} }
}, },
} }

View File

@@ -0,0 +1,3 @@
export {default as add} from "./add"
export {default as detail} from "./detail"
export {default as read} from "./read"

View File

@@ -5,7 +5,7 @@
</AiTopFixed> </AiTopFixed>
<div class="body"> <div class="body">
<div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index"> <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
<u-avatar :src="item.avatar" mode="square" size="76"></u-avatar> <u-avatar :src="item.avatar" mode="square" size="38"></u-avatar>
<span class="name">{{item.name}}</span> <span class="name">{{item.name}}</span>
</div> </div>
</div> </div>
@@ -20,22 +20,23 @@
export default { export default {
name: "read", name: "read",
components: {AiBack, AiTopFixed}, components: {AiBack, AiTopFixed},
props:{
params:[String,Number]
},
data() { data() {
return { return {
current: 0, current: 0,
id: null,
list: [], list: [],
} }
}, },
onLoad(opt) { created() {
this.id = opt.id;
this.getList(); this.getList();
}, },
methods: { methods: {
getList() { getList() {
this.$http.post("/app/appannouncementreader/list-unread",null,{ this.$http.post("/app/appannouncementreader/list-unread",null,{
params:{ params:{
id:this.id id:this.params
} }
}).then(res => { }).then(res => {
if (res && res.data) { if (res && res.data) {