dvcp_v2_wechat_app/src/project/pingchang/AppGeneralElection/AppGeneralElection.vue

<template>
  <view class="page">
    <view v-if="isShow" style="height:100%;">
      <view class="session-list">
        <view class="session-item" v-for="(item, index) in list" :key="index">
          <view class="item-top">
            <view class="item-title mar-b9">{{item.title}}</view>
            <view class="item-info">
              <text class="info-label">选举状态：</text>
              <text class="info-value" :class="'item-status'+item.status">
                {{$dict.getLabel('electionStatus',item.status)||'-'}}
              </text>
            </view>
            <view class="item-info mar-b9">
              <text class="info-label">应选人数：</text>
              <text class="info-value" style="display:inline-block;width: 100rpx;">{{item.chooseNumber || '0'}}</text>
              <text class="info-label">候选人数：</text>
              <text class="info-value">{{item.candidatesNumber || '0'}}</text>
            </view>
          </view>
          <view class="item-bottom">
            <text class="item-btn" v-if="item.status == 1 && item.partyVoteStatus === null" @click="toDetail(item.id)">去投票</text>
            <text class="item-btn border-999" v-if="item.status == 2 && item.partyVoteStatus != null" @click="showTips(item.status)">已投票</text>
            <text class="item-btn border-999" v-if="item.status == 1 && item.partyVoteStatus != null" @click="showTips(item.status)">已投票</text>
            <text class="item-btn border-999" v-if="item.status == 0" @click="showTips(item.status)">未开始</text>
            <text class="item-btn border-999" v-if="item.status == 2 && item.partyVoteStatus === null" @click="showTips(item.status)">未投票</text>
          </view>
          <view class="item-status" :class="'item-status'+item.status">
            {{$dict.getLabel('electionStatus',item.status)||'-'}}
          </view>
        </view>
      </view>
      <AiEmpty v-if="list.length == 0"/>
    </view>
  </view>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    name: 'AppGeneralElection',
    appName: "换届选举",
    computed: {
      ...mapState(['user', 'token']),
    },
    data() {
      return {
        isShow: true,
        list: [],
        pageNum: 1,
        pageSize: 10,
        pages: 2,
        partyId: ''
      };
    },
    onLoad() {
      this.$dict.load('electionStatus').then(() => {
        this.partyId =this.user.partyId
        this.getList()
      })
    },
    onShow() {
      this.$dict.load('electionStatus').then(() => {
        this.partyId = this.user.partyId
        this.getList()
      })
    },
    methods: {
      getList() {
        if (this.pageNum > this.pages) return
        this.$instance.post(`/app/appgeneralelectioninfo/list-xcx?partyId=${this.partyId}&current=${this.pageNum}&size=${this.pageSize}`, null, {}).then(res => {
          if (res.code == 0) {
            const list = this.pageNum > 1 ? [...this.list, ...res.data.records] : res.data.records
            this.pages = Math.ceil(res.data.total / 10)
            this.list = list
          }
        })
      },
      toSessionDetail(id) {
        // uni.navigateTo({
        //   url: '../threeSessions/threeSessionsDetail?id=' + id
        // })
      },
      toDetail(id) {
        uni.navigateTo({
          url: `./generalElectionDetail?id=${id}`
        })
      },
      showTips(status) {
        var title = '投票未开始'
        if (status == 1) {
          title = '已投票'
        }
        if (status == 2) {
          title = '已结束'
        }
        uni.showToast({
          title: title,
          icon: "none"
        })
      }
    },
    onReachBottom() {
      this.pageNum = this.pageNum + 1
      this.getList()
    }
  };
</script>
<style lang="scss" scope>

  .page {
    background-color: #F3F6F9;

    .session-list {
      .session-item {
        width: 686px;
        margin: 32px auto 0 auto;
        background-color: #fff;
        // min-height: 308px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;

        .item-top {
          padding: 32px 32px 0 32px;
        }

        .item-title {
          font-size: 32px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          line-height: 44px;
          word-break: break-all;
        }

        .item-info {
          line-height: 42px;
          font-size: 28px;
          margin-bottom: 8px;

          .info-label {
            color: #999;
          }

        }

        .item-bottom {
          border-top: 2px solid #EEE;
          text-align: right;
          padding-right: 34px;
          box-sizing: border-box;
          line-height: 96px;

          .item-btn {
            display: inline-block;
            width: 152px;
            height: 52px;
            line-height: 52px;
            border-radius: 28px;
            text-align: center;
            font-size: 28px;
            margin-left: 32px;
            border: 2px solid #E1E1E1;
            color: #1365DD;
            border: 2px solid #1365DD;
          }
        }

        .info-value {
          color: #343D65;
          background-color: #fff !important;
        }

        .item-status {
          position: absolute;
          top: 14px;
          right: -30rpx;
          width: 140px;
          text-align: center;
          line-height: 44px;
          font-size: 24px;
          transform: rotate(45deg);
        }

        .item-status0 {
          color: #FF9B2B;
          background-color: #FFF3E8;
        }

        .item-status1 {
          color: #5A98F2;
          background-color: #F1F6FF;
        }

        .item-status2 {
          color: #f46;
          background-color: #FFECF0;
        }

        .border-999 {
          color: #999 !important;
          border-color: #999 !important;
        }

        .mar-b9 {
          margin-bottom: 18px !important;
        }
      }
    }

    .no-affairs {
      width: 100%;
      height: calc(100% - 210rpx);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>