通知公告
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
3
src/apps/AppNotification/components/index.js
Normal file
3
src/apps/AppNotification/components/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export {default as add} from "./add"
|
||||||
|
export {default as detail} from "./detail"
|
||||||
|
export {default as read} from "./read"
|
||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user