dvcp_v2_wxcp_app/src/apps/AppPartyPoints/AppPartyPoints.vue

<template>
  <div class="AppPartyPoints">
    <AiTopFixed>
      <u-search placeholder="搜索党员" :show-action="false" search-icon-color="#ccc" v-model="partyName"
        @search="getListInit()" @clear="getListInit()" />
    </AiTopFixed>
    <div class="list-content" v-if="list.length">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <p>{{item.partyName}}:{{item.remark}}</p>
          <div>{{item.createTime}}</div>
        </div>
        <div class="right" :class="'status'+item.integralType">{{item.residualIntegral}}</div>
      </div>
    </div>
    <AiEmpty v-else></AiEmpty>
    <div class="height-144"></div>
    <div class="footer" @click="toAdd">
      <div class="btn">积分调整</div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'AppPartyPoints',
  appName: '党员积分',
  data() {
    return {
      partyName: '',
      current: 1,
      list: []
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad() {
    this.getList()
    uni.$on('reload', () => {
      this.getListInit()
    })
  },
  onShow() {
    document.title = '党员积分'
  },
  methods: {
    getList() {
      this.$http.post('/app/apppartyintegralinfo/list', null, {
        params: {
          size: 20,
          current: this.current,
          partyName: this.partyName
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    },
    getListInit() {
      this.current = 1
      this.datas = []
      this.getList()
    },
    toAdd() {
      uni.navigateTo({url: './Add'})
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppPartyPoints {
  min-height: 100%;
  ::v-deep .AiTopFixed .u-search {
    margin-bottom: 0 !important;
  }

  .list-content{
    padding: 4px 48px 16px;
    background-color: #fff;
    .item{
      width: 100%;
      padding: 34px 0 32px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      .left{
        width: 500px;
        p{
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 44px;
          word-break: break-all;
          margin-bottom: 8px;
        }
        div{
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 34px;
        }
      }
      .right{
        width: calc(100% - 500px);
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 50px;
        text-align: right;
      }
      .status0{
        color: #2C51CE;
      }
      .status0{
        color: #E6736E;
      }
    }
  }

  .height-144{
    height: 144px;
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .btn {
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    background: #3975C6;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
  }
}
</style>