dvcp_v2_wechat_app/src/mods/party/AppThreeSessions/vote.vue

<template>
  <div class="page">
    <img src="https://cdn.cunwuyun.cn/guangdong/h5/bg@2x.png" alt="" class="bg-img">
    <div class="title">会议投票</div>
    <div class="content">
      <img src="https://cdn.cunwuyun.cn/guangdong/h5/dh@2x.png" alt="">
      <div>投票主题</div>
      <p v-html="info.voteTopic"></p>
    </div>
    <div class="footer">
      <div class="bg-gray" v-if="info.myVote">已投票</div>
      <div class="bg-pink" @click="voteSubmit(0)" v-if="!info.myVote">不同意</div>
      <div class="bg-red" @click="voteSubmit(1)" v-if="!info.myVote">同意观点</div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  appName: "会议投票",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      id: '',
      info: {},
    };
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#D7261E",
    })
    this.id = options.id
    this.getDetailInfo()
  },
  methods: {
    voteSubmit(myVote) {
      this.$instance.post(`/app/appthreemeetinguser/voteMeetting?meetingId=${this.id}&myVote=${myVote}&userId=${this.user.partyId}`).then((res) => {
        if (res.code == 0) {
          this.$toast('投票成功')
          this.getDetailInfo()
        }
      }).catch((err) => {
        this.$toast(err)
      })
    },
    getDetailInfo() {
      this.$instance.post(`/app/appthreemeetinginfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`, null, {}).then(res => {
        if (res.data) {
          this.info = res.data
        }
      })
    },
  },
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.page {
  background-color: #F3F6F9;
  position: relative;
  width: 100%;
  overflow-x: hidden;

  .bg-img {
    width: 100%;
    height: 340px;
  }

  .title {
    width: 100%;
    height: 60px;
    font-size: 44px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFF;
    line-height: 60px;
    position: absolute;
    top: 50px;
    left: 290px;
  }

  .content {
    position: absolute;
    top: 210px;
    left: 20px;
    width: 710px;
    background: #FFF;
    border-radius: 24px;
    padding: 100px 32px 172px;
    box-sizing: border-box;

    img {
      position: absolute;
      top: -60px;
      left: 310px;
      width: 120px;
      height: 120px;
    }

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

    p {
      font-size: 28px;
      color: #333;
      line-height: 40px;
    }
  }

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

    div {
      flex: 1;
      text-align: center;
      height: 112px;
      line-height: 112px;
    }

    .bg-gray {
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999;
      background: #EAE9E9;
    }

    .bg-pink {
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #D73D3D;
      background: #FFE4DD;
    }

    .bg-red {
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
      background: #FE5A49;
    }
  }
}
</style>