nsgk_mobile/src/views/onlineHome/homePollDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="投票"
      left-arrow
      @click-left="$router.back(-1)"
    >
      <template #right>
        <van-image src=""></van-image>
      </template>
    </van-nav-bar>
    <van-row style="margin-top: 20px">
      <van-col span="20" offset="2">
        <H3 style="line-height: 20px;">{{form.subjectName}}</H3>
      </van-col>
    </van-row>
    <van-row style="margin-top: 10px">
      <van-col span="20" offset="2">
          <h4 style="color: #878787;line-height: 20px;">{{form.description}}</h4>
      </van-col>
    </van-row>

    <van-row style="margin-top: 10px">
      <van-col span="9" offset="2">
        <van-image
          v-if="form.anonymous==1"
          width="12"
          height="12"
          style="display: inline-block;"
          src="../../../static/images/onlineHome/vote1.png"
        />
        <p style="display: inline-block;color:#1D6FE9 ">实名</p>
        <van-image
          v-if="form.type==1"
          width="12"
          height="12"
          style="display: inline-block;"
          src="../../../static/images/onlineHome/vote1.png"
        />
        <p v-if="form.type==1" style="display: inline-block;color:#1D6FE9 ">单选</p>
        <van-image
          v-if="form.type==2"
          width="12"
          height="12"
          style="display: inline-block;"
          src="../../../static/images/onlineHome/vote1.png"
        />
        <p v-if="form.type==2" style="display: inline-block;color:#1D6FE9 ">多选</p>
      </van-col>
      <van-col span="8" offset="5">
        <van-image
          width="12"
          height="12"
          style="display: inline-block;"
          src="../../../static/images/onlineHome/vote.png"
        />
        <p style="display: inline-block">{{this.form.nums}}人已参与</p>
      </van-col>
    </van-row>
    <van-checkbox-group v-if="form.type==2" v-model="result" style="margin-top: 20px">
      <van-cell-group v-for="(item,index) in pollOptions" :key="index" style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
        <van-cell :title="item.name">
          <template #icon>
            <van-image
              fit="contain"
              height="18"
              style="margin-right: 10px"
              src="../../../static/images/onlineHome/home3.png"
            />
          </template>
          <van-checkbox :name="item.id" style="float: right"/>
        </van-cell>
        <van-row>
          <van-col span="15" :offset="2" style="margin-top: 7px;">
            <van-progress v-if="result.indexOf(item.id)==-1" :percentage="voteNum>0?((item.num/voteNum)*100).toFixed(2):0" :show-pivot="false"/>
            <van-progress v-if="result.indexOf(item.id)!=-1" :percentage="(voteNum+result.length)>0?(((item.num+1)/(voteNum+result.length))*100).toFixed(2):0" :show-pivot="false"/>
          </van-col>
          <van-col span="5" :offset="2" v-if="result.indexOf(item.id)==-1">
            {{item.num}}票 {{voteNum>0?((item.num/voteNum)*100).toFixed(2):0}}%
          </van-col>
          <van-col span="5" :offset="2" v-if="result.indexOf(item.id)!=-1">
            {{item.num+1}}票 {{(voteNum+result.length)>0?(((item.num+1)/(voteNum+result.length))*100).toFixed(2):0}}%
          </van-col>
        </van-row>
      </van-cell-group>
    </van-checkbox-group>
    <van-radio-group v-if="form.type==1" v-model="result1" style="margin-top: 20px">
      <van-cell-group v-for="(item,index) in pollOptions" :key="index" style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
        <van-cell :title="item.name">
          <template #icon>
            <van-image
              fit="contain"
              height="18"
              style="margin-right: 10px"
              src="../../../static/images/onlineHome/home3.png"
            />
          </template>
          <van-radio :name="item.id" style="float: right" />
        </van-cell>
        <van-row>
          <van-col span="15" :offset="2" style="margin-top: 7px;">
            <van-progress v-if="result1!=item" :percentage="voteNum>0?((item.num/voteNum)*100).toFixed(2):0" :show-pivot="false"/>
            <van-progress v-if="result1==item" :percentage="voteNum>0?(((item.num+1)/(voteNum+1))*100).toFixed(2):0" :show-pivot="false"/>
          </van-col>
          <van-col span="5" :offset="2" v-if="result1!=item.id">
            {{item.num}}票 {{voteNum>0?((item.num/voteNum)*100).toFixed(2):0}}%
          </van-col>
          <van-col span="5" :offset="2" v-if="result1==item.id">
            {{item.num+1}}票 {{voteNum>0?(((item.num+1)/(voteNum+1))*100).toFixed(2):0}}%
          </van-col>
        </van-row>
      </van-cell-group>
    </van-radio-group>
    <van-row style="text-align: center;margin-top: 40px" v-if="isPoll">
      <van-button color="#1D6FE9" style="border-radius: 6px;width: 90%;margin: 0 auto" @click="submit">提交</van-button>
    </van-row>
  </div>
</template>

<script>
    import onlineHomeIndex from "../onlineHomeIndex";
    import {getPoll, listPollVote, votePoll} from "../../api/onlineHome/poll";

    export default {
      components: {
        onlineHomeIndex
      },
        name: "homePollDetail",
      data() {
        return {
          loading: false,
          form:{},
          pollOptions:[],
          id:this.$route.query.id,
          voteNum:0,
          result:[],
          result1:"",
          isPoll:true,
        };
      },
      created() {
        this.getInfo(this.id);
        listPollVote().then(res => {
          if(res.rows.length>0){
            res.rows.map(r => {
              if(r.pollId==this.id){
                this.isPoll=false
              }
            })
          }
        })
      },
      methods:{
        reset(){
          this.pollOptions = []
        },
        getInfo(val){
          this.reset();
          this.loading = true
          getPoll(val).then(response => {
              response.data.options.map(res => {
                this.voteNum += res.num
               this.pollOptions.push(res)
            })
            this.form = response.data;
            this.loading = true
          });
        },
        submit(){
          let list = []
          let _this = this
          if (this.form.type == 1) {
            if (this.result1 != "") {
              list.push(this.pollRadioValue)
            } else {
              this.$toast({
                icon: 'error', // 找到自己需要的图标
                message: '请选择一个选项',
                duration:"1000",
                onClose:function(){
                  return false;
                }
              })

            }
          } else {
            if (this.result.length > 0) {
              list = this.result
            } else {
              this.$toast({
                icon: 'error', // 找到自己需要的图标
                message: '请至少选择一个选项',
                duration:"1000",
                onClose:function(){
                  return false;
                }
              })
            }
          }
          votePoll(this.id,list).then(response => {
            this.$toast({
              icon: 'success', // 找到自己需要的图标
              message: '保存成功',
              duration:"1000",
              onClose:function(){
                _this.getInfo(this.id);
              }
            })
          });
        },
      },
    }
</script>

<style scoped>
  >>>.van-cell::after {
     border-bottom: none;
  }
</style>