yunyubang-web/src/views/notice/index.vue

<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 style="margin-right:10px" v-if="scope.row.data['order_item_id']" type="primary" size="small" @click="goOrder(scope.row.data['order_item_id'])">查看订单</Button>

            <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
    },
    goOrder(value){
      this.$router.push("/order/orderList?order_item_id="+value);
    },
    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>