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

<template>
  <view class="page">
    <div class="line-bg"></div>
    <div class="banner-top">
      <image
        src="https://cdn.cunwuyun.cn/img/election-banner.png"
        class="banner-img"
      ></image>
      <span class="tips" @click="viewMask()"
        ><image
          src="https://cdn.cunwuyun.cn/img/explain-icon.png"
          class="tips-icon"
        ></image
        >投票说明</span
      >
      <image
        src="https://cdn.cunwuyun.cn/img/party-icon.png"
        class="party-icon"
      ></image>
      <div class="banner-info">
        <div class="title">{{ title }}</div>
        <div class="num-info">应选人{{ chooseNumber || "0" }}人</div>
        <div class="user-list">
          <div class="user-item user-item-title">
            <span>候选人</span>
            <span>赞成</span>
            <span>反对</span>
            <span>弃权</span>
          </div>
          <div class="user-item" v-for="(item, index) in userList" :key="index">
            <span>{{ item.candidateUserName }}</span>
            <span>
              <image
                :src="
                  item.voteStatus == '0'
                    ? 'https://cdn.cunwuyun.cn/img/circle-check.png'
                    : 'https://cdn.cunwuyun.cn/img/circle-icon.png'
                "
                class="check-icon"
                @click="checkClick(index, '0')"
              ></image>
            </span>
            <span>
              <image
                :src="
                  item.voteStatus == '1'
                    ? 'https://cdn.cunwuyun.cn/img/circle-check.png'
                    : 'https://cdn.cunwuyun.cn/img/circle-icon.png'
                "
                class="check-icon"
                @click="checkClick(index, '1')"
              ></image>
            </span>
            <span>
              <image
                :src="
                  item.voteStatus == '2'
                    ? 'https://cdn.cunwuyun.cn/img/circle-check.png'
                    : 'https://cdn.cunwuyun.cn/img/circle-icon.png'
                "
                class="check-icon"
                @click="checkClick(index, '2')"
              ></image>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-bottom">
      <div class="btn" @click="submitVote()">提交投票</div>
    </div>
    <view class="mask" v-if="showMask">
      <view class="mask-content">
        <view class="mask-title">投票说明</view>
        <!-- <view class="mask-text">1、本次选举采用无记名投票方式，差额选举的办法</view>
        <view class="mask-text">2、选举工作由选举委员会主持，未尽事宜由选举委员会研究决定。</view> -->
        <view class="mask-text">{{ votingInstructions }}</view>
        <view class="mask-btn" @click="closeMask()">关闭</view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      detailId: "",
      userList: [],
      showMask: false,
      title: "",
      chooseNumber: "",
      partyId: "",
      votingInstructions: "",
    };
  },
  onLoad(options) {
    this.detailId = options.id;
    this.partyId = this.user.partyId;
    this.getDetailInfo();
  },
  methods: {
    submitVote() {
      var flags = true;
      var checkNum = 0;
      var checkList = [];
      this.userList.map((item) => {
        if (item.voteStatus) {
          checkNum++;
          checkList.push(item);
        }
      });

      if (checkNum > this.chooseNumber) {
        uni.showToast({ title: `投票人数大于应选人数，请重试`, icon: "none" });
        flags = false;
      }
      if (checkNum < this.chooseNumber) {
        uni.showToast({ title: `请给候选人投票`, icon: "none" });
        flags = false;
      }
      // if (checkNum < this.userList.length) {
      //   uni.showToast({title: `请给候选人投票`, icon: 'none'})
      //   flags = false
      // }

      if (!flags) return;
      this.$instance
        .post("/app/appgeneralelectioninfo/vote", checkList)
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({ title: "投票成功！" });
            setTimeout(function () {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          }
        });
    },
    checkClick(index, status) {
      if (this.userList[index].voteStatus == status) {
        this.userList[index].voteStatus = "";
      } else {
        this.userList[index].voteStatus = status;
      }
    },
    closeMask() {
      this.showMask = false;
    },
    viewMask() {
      this.showMask = true;
    },
    getDetailInfo() {
      this.$instance
        .post(
          `/app/appgeneralelectioninfo/queryDetailById?id=${this.detailId}`,
          null
        )
        .then((res) => {
          if (res.data) {
            this.votingInstructions = res.data.votingInstructions;
            this.chooseNumber = res.data.chooseNumber;
            this.title = res.data.title;
            res.data.candidateUsers.map((item) => {
              var info = {
                candidateUserId: item.id,
                candidateUserName: item.name,
                electionId: this.detailId,
                voteStatus: "",
                voterUserId: this.partyId,
              };
              this.userList.push(info);
            });
          }
        });
    },
  },
};
</script>
<style lang="scss" scope>
.page {
  .line-bg {
    width: 100%;
    height: 12px;
    background-color: #e60012;
  }

  .banner-top {
    width: 100%;
    height: 340px;
    position: relative;

    .banner-img {
      position: absolute;
      width: 100%;
      height: 340px;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .tips {
      position: absolute;
      right: 42px;
      color: #fff;
      font-size: 30px;
      z-index: 88;
      top: 137px;

      .tips-icon {
        width: 40px;
        height: 40px;
        vertical-align: text-top;
        margin-right: 8px;
      }
    }

    .party-icon {
      position: absolute;
      z-index: 3;
      width: 140px;
      height: 140px;
      left: 50%;
      margin-left: -70rpx;
      top: 180px;
    }

    .banner-info {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      color: #fff;
      padding-bottom: 136px;
      

      .title {
        width: 100%;
        font-size: 44px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        text-align: center;
        padding: 12px 0 10px 0;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .num-info {
        width: 100%;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        line-height: 50px;
        text-align: center;
        margin-bottom: 80px;
      }

      .user-list {
        width: 710px;
        background: #fff;
        border-radius: 24px 24px 0 0;
        margin: 0 auto;

        .user-item {
          width: 688px;
          height: 112px;
          line-height: 112px;
          margin: 0 auto;
          border-bottom: 2px solid #eee;
          display: flex;
          font-size: 32px;
          color: #666;

          span {
            flex: 1;
            text-align: center;

            .check-icon {
              width: 40px;
              height: 40px;
            }
          }
        }

        .user-item:nth-last-of-type(1) {
          border-bottom: 0;
        }

        .user-item-title {
          color: #333;
          font-size: 34px;
          padding-top: 88px;
        }
      }
    }
  }

  .btn-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;

    .btn {
      width: 100%;
      line-height: 112px;
      background: #e60012;
      color: #fff;
      font-size: 32px;
      text-align: center;
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;

    .mask-content {
      width: 560px;
      height: 680px;
      background: #fff;
      border-radius: 8px;
      border: 2px solid rgba(151, 151, 151, 1);
      margin: 200px auto 0;
      padding: 48px 48px 0;
      box-sizing: border-box;
      

      .mask-title {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333;
        line-height: 44px;
        margin-bottom: 36px;
      }

      .mask-text {
        width: 100%;
        line-height: 44px;
        font-size: 28px;
        height: 460px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333;
        word-break: break-all;
        overflow-y: scroll;
      }

      .mask-btn {
        width: 128px;
        height: 40px;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1365dd;
        line-height: 40px;
        margin: 30px 0 20px 332px;
        text-align: center;
      }
    }
  }
}
</style>