nsgk_mobile/src/views/sunVillage_info/list_message.vue

<template>
  <div class="home_wrapper">
    <div
      class="header_main"
      :style="`background-image:url(${require('@/assets/images/sunVillage_info/list_head_red.png')})`"
    >
      留言板
      <div class="return_btn" @click="onClickLeft"></div>
      <div class="add_btn" @click="goAdd" v-show="showBtn"></div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <van-swipe-cell v-for="(item,index) in applicationList" :key="index" >
        <van-cell
          :border="false"
          center
          :to="{name: 'sunVillageInfoListMessageDetail',query:{id:item.id}}"
        >
          <template #right-icon>
            <p style="color: #3977e7">{{item.releaseBy}}</p>
          </template>
          <template #title>
            <p class="tit">{{item.messageContent}}</p>
            <p class="time">{{item.messageTime}}</p>
          </template>
          <template #icon>
            <img src="../../assets/images/sunVillage_info/message_icon_01.png" style="width: 1rem;margin-right: 2%;">
          </template>
        </van-cell>
<!--        <template #right v-if="showBtn">-->
<!--          <div style="background-color: #ee0a24;height: 100%" @click="goRemove(item.id)">删除</div>-->
<!--          <div style="background-color: #07c160" @click="goEdit(item.id)">修改</div>-->
<!--          <div style="background-color: rgb(255, 166, 62);" v-if="item.status != '3'" @click="goRanking(item.id)">发布</div>-->
<!--        </template>-->
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
  import { listMessage , delPoll , publicPoll } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  import {Dialog} from "vant";
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        loading: false,
        finished: false,
        show: true,
        fileList:[],
        showBtn:true,
        queryParams:{}
      };
    },
    created() {
        this.queryParams = {
          deptId:Cookies.get('deptId'),
          translate_dict:1,
        }
    },
    methods: {
      getList(){
        var _this = this;
        listMessage(this.queryParams).then(response => {
          _this.listLength = response.total;
          response.rows.map(res=>{
            _this.applicationList.push(res);
          })

          if(_this.applicationList.length >= response.total){
            _this.finished = true;
            return;
          }else{
            _this.loading = false;
            _this.queryParams.pageNum += 1 ;
          }
        });
      },
      goAdd(){
        this.$router.push({path:'/sunVillage_info/list_message_add', query: {type: 'code'}})
      },
      goDetail(id){
        this.$router.push({path:'/sunVillage_info/list_vote_detail',query: {id:id}})
      },
      goEdit(id){
        this.$router.push({path:'/sunVillage_info/list_vote_edit',query: {id:id}})
      },
      goRanking(id){
        this.$dialog.alert({
          title: '提示',
          message: '确认发布？',
          showCancelButton:true,
        })
          .then(() => {
            publicPoll(id).then(response => {
              this.$notify({ type: 'success', message: '发布成功' });
              this.applicationList = [];
              this.getList()
            });
          })
          .catch(() => {
            // on cancel
          });
      },
      goRemove(id){
        this.$dialog.alert({
          title: '提示',
          message: '确认删除？',
          showCancelButton:true,
        })
          .then(() => {
            delPoll(id).then(response => {
              this.$notify({ type: 'success', message: '删除成功' });
              this.applicationList = [];
              this.getList()
            });
          })
          .catch(() => {
            // on cancel
          });

      }
    },



  }
</script>

<style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main{
      height: 116px;
      background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;
      .return_btn{
        width: 24px;
        height: 43.2px;
        background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
      .add_btn{
        width: 56.4px;
        height: 40.8px;
        background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
        background-size: 47px 34px;
        position: absolute;
        right: 38px;
        top: 36px;
      }
    }
    .van-swipe-cell {
      position: relative;
      overflow: hidden;
      cursor: grab;
      width: 96%;
      margin: 0 auto;
      margin-top: 15PX;
      box-shadow: 5PX 5PX 2PX #ccc;
      border-radius: 10PX;
    }
    /deep/ .van-swipe-cell__right{
      display: flex;
      align-items: center;
      width: 150PX;
      margin-left: 5PX;
      a,div{
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 14PX;
        height: 100%;
        flex: 1;
      }
    }

    .tit{
      color: #333333;
    }
    .time{
      color: #aaaaaa;
      font-size: .3rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
      overflow: hidden;
    }
    .dept{
      color: #3977e7;
      font-size: .35rem;
      display: flex;
      align-items: center;
    }

    .state1{
      background: #e4f8f4;
      border: 1px solid #c5efe7;
      color: #2ec6a9;
      padding: 0 3vw;
      border-radius: 5vw;
    }

    .state2{
      background: #fedfe3;
      border: 1px solid #fcb9c2;
      color: #f60325;
      padding: 0 3vw;
      border-radius: 5vw;
    }
  }
</style>