uni-xiudoyou/src/pages/index/setting/notice.vue

<!-- 公告管理 -->
<template>
  <view class="notice">
    <view class="btn-add">
      <image
        src="../../../static/images/addicon.png"
        class="addicon"
        @tap="topage('add')"
      ></image>
    </view>
    <view class="notice-content">
      <view class="item" v-for="item in noticeList" :key="item.id">
        <view class="notice-top">
          <view class="title">{{ item.shopName }}</view>
          <image mode="aspectFill" :src="item.icon" class="picture"></image>
          <view class="detail">
            <text class="txt">{{ item.title }}</text>
            <text class="time">{{ item.time.substring(0, 10) }}</text>
          </view>
        </view>
        <view class="notice-btns">
          <!-- <view class="up btn">置顶</view> -->
          <view class="edit btn" @tap="topage(item.id)">编辑</view>
          <view class="delete btn" @tap="deleteNotice(item.id)">删除</view>
        </view>
      </view>
    </view>
    <uni-load-more :status="more"> </uni-load-more>
  </view>
</template>

<script>
import Header from '../../components/header';

export default {
  name: 'notice',
  components: {
    Header,
  },
  data() {
    //这里存放数据
    return {
      title: '公告管理',
      more: 'loading',

      params: {
        mid: 53,
        pageNo: 1,
        pageSize: 3,
        type: '2',
      },
      noticeList: [],
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.more = 'loading'
    this.params.pageNo = 1;
    this.getNoticeList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.more != 'noMore') {
      this.params.pageNo ++
      this.getNoticeListMoare();
    }
    console.log(this.more);
  },
  onShow() {
    this.getShopMessage();
    this.getNoticeList();
  },
  //方法集合
  methods: {
    // 编辑
    topage(id) {
      this.$mRouter.push({ route: '/pages/index/setting/editnotice?id=' + id });
    },
    // 商家信息
    async getShopMessage() {
      await this.$http.get('/getUserInfo').then(async (res) => {
        if (res.data) {
          this.params.mid = res.data.id;
        }
      });
    },
    // 公告列表
    async getNoticeList() {
      console.log(this.more);
      await this.$http.post('/news/list', this.params).then(async (res) => {
        if (res.data.list.length > 0) {
          console.log(res);
          this.noticeList = res.data.list;
          if (res.data.nextPage === 0) {
            this.more = 'noMore';
          }
        } else {
          this.more = 'noMore';
        }
        uni.stopPullDownRefresh();
      });
    },
    // 加载更多
    async getNoticeListMoare() {
      let arr = [];
      await this.$http.post('/news/list', this.params).then(async (res) => {
        if (res.data.list.length > 0) {
          console.log('more');
          console.log(res);
          arr = res.data.list;
          this.noticeList = this.noticeList.concat(arr);
          if (res.data.nextPage === 0) {
            this.more = 'noMore';
          }
        } else {
          this.more = 'noMore';
          return;
        }
      });
    },
    // 删除
    deleteNotice(id) {
      let _self = this;
      uni.showModal({
        content: '是否删除该条公告？',
        success: (confirmRes) => {
          if (confirmRes.confirm) {
            _self.more = 'loading'
            _self.$http.delete('/news/del/' + id).then(async (res) => {
              if (res.code === 200 && res.msg === 'OK') {
                _self.$mHelper.toast('删除成功');
                _self.params.pageNo = 1;
                _self.getNoticeList();
              }
            });
          }
        },
      });
    }
  },
};
</script>
<style lang='scss' scoped>
.btn-add {
  position: fixed;
  right: 33upx;
  top: 20upx;
  z-index: 100;
  .addicon {
    width: 48upx;
    height: 48upx;
  }
}
.notice-content {
  background-color: #f4f4f4;
  padding: 15upx 33upx;

  .item {
    background-color: #fff;
    border-radius: 10upx;
    padding: 20upx;
    margin-bottom: 25upx;
    .notice-top {
      .title {
        padding: 20upx;
        color: #2f2f2f;
        font-size: 28upx;
      }
      .picture {
        width: 100%;
        height: 350upx;
        border-radius: 20upx;
      }
      .detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20upx;
        .txt {
          flex: 1;
          font-size: 30upx;
          color: $titleColor;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time {
          width: 143upx;
          color: #9ea9a3;
          font-size: 26upx;
        }
      }
    }
    .notice-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20upx;
      .btn {
        width: 200upx;
        height: 70upx;
        border: 1px solid #ccc;
        border-radius: 10upx;
        text-align: center;
        line-height: 70upx;
        margin-left: 60upx;
        &:first-child {
          margin-left: 0;
        }
      }
      .edit {
        background-color: #fff;
      }
      .delete {
        background-color: #ff6a5e;
        color: #fff;
        border:none;
      }
    }
  }
}
</style>