master
parent
79e2a96dba
commit
e1ae9d0016
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div style="padding: 0 20px">
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="消息中心" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<slot>
|
||||
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
|
||||
<Select v-model="select.type" class="select" style="width:160px;margin-right: 10px;" :clearable="true"
|
||||
placeholder="消息类型" filterable>
|
||||
<Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Select v-model="select.read_state" class="select" style="width:160px;margin-right: 10px;" :clearable="true"
|
||||
placeholder="消息状态" filterable>
|
||||
<Option v-for="item in stateList" :value="item.id" :key="item.id">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Button icon="ios-search" type="primary" style="margin-right: 10px;" @click="getNotices">查询</Button>
|
||||
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:list="list"
|
||||
:total="total"
|
||||
:table-item="table"
|
||||
@pageSizeChange="e => select.pageSize = e"
|
||||
@pageIndexChange="pageChange"
|
||||
>
|
||||
<template v-slot:btns>
|
||||
<el-table-column fixed="right" label="操作" width="200" header-align="center">
|
||||
<template slot-scope="scope">
|
||||
<Button v-if="!scope.row.read_at" type="primary" size="small" @click="toggleMessage(scope.row)">标为已读</Button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {toggleRead,getNotice} from "@/api/notice"
|
||||
|
||||
import { Message } from 'element-ui'
|
||||
export default {
|
||||
components:{
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
type:"",
|
||||
read_state:""
|
||||
},
|
||||
stateList:[{
|
||||
id:"",
|
||||
value:"全部"
|
||||
},{
|
||||
id:2,
|
||||
value:"未读"
|
||||
},{
|
||||
id:1,
|
||||
value:"已读"
|
||||
}],
|
||||
typeList:[{
|
||||
id:"MerchantBalance",
|
||||
value:"余额不足"
|
||||
},{
|
||||
id:"OrderItemMemberCancel",
|
||||
value:"用户取消单"
|
||||
},{
|
||||
id:"OrderItemMerchantAutoRecover",
|
||||
value:"分发48小时未接收退回"
|
||||
},{
|
||||
id:"OrderItemMerchantCancel",
|
||||
value:"商家取消订单"
|
||||
},{
|
||||
id:"OrderItemMerchantReturn",
|
||||
value:"商家退回订单"
|
||||
}],
|
||||
total:0,
|
||||
list:[],
|
||||
table:[
|
||||
{
|
||||
label:"消息",
|
||||
prop:'data.通知',
|
||||
align:'left'
|
||||
},
|
||||
{
|
||||
label:"状态",
|
||||
prop:'read_at',
|
||||
align:'center',
|
||||
width:220,
|
||||
customFn:(row)=>{
|
||||
if(row.read_at){
|
||||
return (<div style="color: green">已读</div>)
|
||||
}else{
|
||||
return (<div style="color: red">未读</div>)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label:"通知时间",
|
||||
prop:'created_at',
|
||||
align:'center',
|
||||
width:220
|
||||
},
|
||||
// {
|
||||
// label:"状态",
|
||||
// prop:'type_name'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getNotices(){
|
||||
const res = await getNotice({
|
||||
page: this.select.pageIndex,
|
||||
page_size: this.select.pageSize,
|
||||
type:this.select.type,
|
||||
read_state:this.select.read_state
|
||||
|
||||
})
|
||||
this.list = res.data
|
||||
this.total = res.total
|
||||
},
|
||||
pageChange(e) {
|
||||
this.select.pageIndex = e
|
||||
this.getNotices()
|
||||
},
|
||||
toggleMessage(item){
|
||||
if(item.read_at) return
|
||||
toggleRead({
|
||||
id:item.id
|
||||
}).then(res => {
|
||||
this.$message({
|
||||
type:'success',
|
||||
message:res?.msg || "成功"
|
||||
})
|
||||
this.getNotices()
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getNotices()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in new issue