公益投票、选举调查功能编写，修复部分问题

Lou

2023-11-25 ce21b378de4b5a075da8295404d2fdb3b2e3a22a

 subPackage/article/detail.vue

@@ -1,7 +1,5 @@
<template>
   <view class="">


      <view class="container">
         <view class="f-32 fw">{{detailInfo.title}}</view>
         <view class="row flex j-c-s-b a-i-c c-99">
@@ -24,63 +22,75 @@
            <u-parse :content="detailInfo.content"></u-parse>
         </view>
      </view>
      <view class=""  v-if="false">
         <view class="explain-row c-main  f-28">
            报名和投票先指定好房屋
         </view>
         <view class="select-row flex j-c-s-b a-i-c">
            <text class="f-28">指定房屋</text>
            <view class="select-row-content flex a-i-c">
               <text class="f-26 c-99 mr-20"></text>
               <u-icon name="arrow-right"  color="#999"></u-icon>
            </view>
         </view>
         <!-- <view class="apply">
            <view class="flex f-d-c a-i-c">
               <view class="flex mb-20">
                  <image class="apply-user" src="/static/icon/nav-02.png" mode=""></image>
                  <image class="apply-user" src="/static/icon/nav-02.png" mode=""></image>
                  <image class="apply-user" src="/static/icon/nav-02.png" mode=""></image>

      <view class="" v-if="isLoad">
         <view class="" v-if="eventType == 0 && applyInfo.openFlag == 0">
            <!-- <view class="explain-row c-main  f-28">
               报名和投票先指定好房屋
            </view> -->
            <view class="select-row flex j-c-s-b a-i-c">
               <text class="f-28">房屋</text>
               <view class="select-row-content flex a-i-c">
                  <text class="f-26 c-99 mr-20">{{siteInfo.name}}</text>
                  <!-- <u-icon name="arrow-right" color="#999"></u-icon> -->
               </view>
               <text class="f-28 c-99">共3人</text>
            </view>
            <button class="apply-btn bgc-main c-ff f-30">报名</button>
         </view> -->
			
         <view class="mt-20"  >
            <view class="apply">
               <view class="flex f-d-c a-i-c" v-if="applyList.length">
                  <view class="flex mb-20">
                     <image v-for="i in applyList" class="apply-user" src="/static/icon/user-01.png" mode="aspectFill">
                     </image>
                  </view>
                  <text class="f-28 c-99">共{{applyList.length}}人</text>
               </view>
               <button class="apply-btn bgc-main c-ff f-30" v-if="computeEndTime > 0"
                  @click="handleApply()"  :disabled="applyInfo.userId">{{applyInfo.userId?"已报名":"报名"}}</button>
               <button class="apply-btn bgc-main c-ff f-30" v-if="computeEndTime <= 0"
                  :disabled="true">已结束</button>
            </view>
         </view>

         <view class="mt-20" v-if="eventType == 1 && voteTopicList.length">
            <view class="explain-row c-main  f-28">
               投票进行中
            </view>
            <view class="vote bgc-ff">
               <view class="vote-title f-30 fw">
                  是否同意安装充电桩
               </view>
               <view class="">
                  <u-radio-group 
                      iconPlacement="right"
                     activeColor="#017BFC"
                     placement="column"
                     >
                     <view class="mb-20">
                        <u-radio  label="同意"  ></u-radio>
                        <view class="flex j-c-s-b a-i-c mt-10">
                           <uv-line-progress :percentage="30"  height="10" ></uv-line-progress>
                           <text class="c-99 f-28">10</text>
               <view class="" v-for="(item,index) in voteTopicList" :key="index">
                  <view class="vote-title f-30 fw">
                     {{item.discussContent}}
                  </view>
                  <view class="" v-if="item.optionRange == 0">
                     <u-radio-group iconPlacement="right" activeColor="#017BFC" placement="column"
                        v-model="item.selected" @change="selectOption($event,index)" :disabled="isSubmit">
                        <view class="mb-20" v-for="(i,k) in item.children">
                           <u-radio :label="i.optionContent" :name="i.id"></u-radio>
                           <view class="flex j-c-s-b a-i-c mt-10">
                              <uv-line-progress height="10"></uv-line-progress>
                              <text class="c-99 f-28" v-if="i.number">{{i.number}}人</text>
                           </view>
                        </view>
								
                     </view>
                     <view class="">
                        <u-radio  label="不同意"  ></u-radio>
                        <view class="flex j-c-s-b a-i-c mt-10">
                           <uv-line-progress   height="10" ></uv-line-progress>
                           <text class="c-99 f-28">10</text>
                     </u-radio-group>
                  </view>
                  <view class="" v-if="item.optionRange == 1">
                     <u-checkbox-group iconPlacement="right" activeColor="#017BFC" placement="column"
                        v-model="item.selected" :disabled="isSubmit"   @change="selectOption($event,index)">
                        <view class="mb-20" v-for="(i,k) in item.children" :key="k">
                           <u-checkbox :label="i.optionContent" :name="i.id"></u-checkbox>
                           <view class="flex j-c-s-b a-i-c mt-10">
                              <!-- <uv-line-progress :percentage="10" height="10"></uv-line-progress> -->
                              <uv-line-progress height="10"></uv-line-progress>
                              <text class="c-99 f-28" v-if="i.number">{{i.number}}人</text>
                           </view>
                        </view>
                     </view>
                  </u-radio-group>
                     </u-checkbox-group>
                  </view>
               </view>
               <button class="apply-btn bgc-main c-ff f-30" v-if="computeEndTime > 0" @click="submitVote()"
                  :disabled="isSubmit">{{isSubmit?"已提交":"提交"}}</button>
               <button class="apply-btn bgc-main c-ff f-30" v-if="computeEndTime <= 0"
                  :disabled="true">已结束</button>
            </view>
         </view>
			
      </view>

      <!-- <view class="action flex flex_base">
@@ -98,25 +108,175 @@
   import {
      getDetail
   } from '@/api/article/article.js'
   import * as communityModel from "@/api/community/community.js"
   import tagCell from '@/components/noticeList/tagCell.vue'
   import {
      jsonString
   } from '../../uni_modules/uv-ui-tools/libs/function/test'
   export default {
      components: {
         tagCell
      },
      data() {
         return {
            params: {
               id: ""
            },
            eventType: null,
            detailInfo: {},
            pdId: "",
            siteInfo: {},
            applyList: [],
            applyInfo: {},
            isLoad: false,
            voteTopicList: [],
            isSubmit: false // 是否已提交投票
         }
      },
      onLoad(option) {
         this.getDetailInfo(option.id)
         this.$set(this.params, "id", option.id);
         if (option.type) {
            this.$set(this.params, "eventType", option.type);
            this.eventType = option.type;
            this.pdId = option.pdId;
            this.siteInfo = uni.getStorageSync("siteInfo")
         }
         this.getDetailInfo()
      },

      computed: {
         computeEndTime() {
            let curTimestamp = new Date().getTime();
            let endTimestamp = new Date(this.applyInfo.endTime).getTime();
            return endTimestamp - curTimestamp
         }
      },

      methods: {
         getDetailInfo(id) {
            getDetail({
               id
            }).then(res => {

         toNumber(val) {
            return Number(val)
         },

         getDetailInfo() {
            getDetail(this.params).then(res => {
               this.isLoad = true;
               this.detailInfo = res.data;
               if (this.pdId) {
                  this.getApplyDetail()
               }
               if (this.eventType == 0) {
                  this.getApplyList();
               }
               if (this.eventType == 1) {
                  this.getVoteList();
               }
            })
         },

         //报名列表
         getApplyList() {
            communityModel.getApplyList({
               publicDiscussId: this.pdId
            }).then(res => {
               console.log(res)
               if (res.code == 200) {
                  this.applyList = res.data.records;
               }
            })
         },

         //报名、投票详情
         getApplyDetail() {
            communityModel.getApplyDetail({
               id: this.pdId
            }).then(res => {
               console.log(res)
               if (res.code == 200) {
                  this.applyInfo = res.data;
               }
            })
         },

         //获取投票议题
         getVoteList() {
            communityModel.getVoteTopics({
               publicDiscussId: this.pdId
            }).then(res => {
               if (res.code == 200) {
                  let data = res.data;
                  if (data.length) {
                     for (let i of data) {
                        if(i.selected){
                           if (typeof i.selected == "string" && i.optionRange == 0) {
                              this.isSubmit = true;
                              i.selected = Number(i.selected)
                           }
                           if(typeof i.selected == "string" && i.optionRange == 1){
                              this.isSubmit = true;
                              i.selected = JSON.parse(i.selected)
                           }
                        }
                     }
                  }
                  this.voteTopicList = data;
               }
            })
         },

         //报名
         handleApply() {
            communityModel.addApply({
               publicDiscussId: this.pdId
            }).then(res => {
               if (this.computeEndTime > 0) {
                  if (res.code == 200) {
                     uni.showToast({
                        title: "操作成功"
                     })
                     this.getApplyList();
                  }
               } else {
                  uni.showToast({
                     title: "报名已结束",
                     icon: "none"
                  })
               }
            })
         },

         selectOption(id, index) {
            let item = this.voteTopicList[index];
            item.selected = id;
            this.$set(this.voteTopicList, index, item);
         },

         getParams() {
            let list = JSON.parse(JSON.stringify(this.voteTopicList));
            let arr = [];
            for (let i of list) {
               if (i.selected) {
                  delete i.children;
                  i.selected = JSON.stringify(i.selected)
                  arr.push(i)
               }
            }
            return arr;
         },

         //提交投票
         submitVote() {
            let data = this.getParams()
            communityModel.addVoteOperate(data).then(res => {
               if (res.code == 200) {
                  uni.showToast({
                     title: "操作成功"
                  })
                  this.$nextTick(() => {
                     this.getApplyDetail();
                     this.getVoteList();
                  })
               }
            })
         }
      }
@@ -124,9 +284,10 @@
</script>

<style lang="scss">
   page{
   page {
      background-color: #f5f5f5;
   }

   .container {
      padding: 0 30rpx;
      background-color: #fff;
@@ -137,7 +298,7 @@
   }

   .content {
      padding-bottom:30rpx;
      padding-bottom: 30rpx;
   }

   .action-item {
@@ -155,38 +316,48 @@
      background-color: rgb(236, 244, 255);
      padding: 20rpx;
   }
   .select-row{
      padding:30rpx;
      background-color:#fff;

   .select-row {
      padding: 30rpx;
      background-color: #fff;
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
      .select-row-content{
         flex:1;
      border-top: 1px solid #f5f5f5;

      .select-row-content {
         width: 80%;
         justify-content: flex-end;
      }
   }
   .apply{
      padding:30rpx;
      .apply-user{
         width:80rpx;
         height:80rpx;

   .apply {
      padding: 30rpx;

      .apply-user {
         width: 80rpx;
         height: 80rpx;
         border-radius: 50%;
         margin-right:-15rpx;
         border:1px solid #fff;
         margin-right: -15rpx;
         border: 1px solid #fff;
      }
      .apply-btn{
         width:100%;
         height:80rpx;
         line-height: 80rpx;
         margin: 30rpx auto 0;
         border:none;
         border-radius: 40rpx;
			
      }


   }
   .vote{
      padding:0 40rpx 30rpx;
      .vote-title{
         padding:30rpx 0;

   .apply-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto 0;
      border: none;
      border-radius: 40rpx;

   }

   .vote {
      padding: 0 40rpx 30rpx;

      .vote-title {
         padding: 30rpx 0;
      }
   }
</style>