dev/dcp-web-gate/src_old/views/AddFeatures/vote/voteList.vue

<template>
    <div class="bigbox">
        <!-- 顶部图片 -->
        <div class="topimg">
            <img :src="'./api/file/pub/'+ voteImg" alt="">
        </div>

        <!-- 投票简介部分 -->
        <div class="voteIntro">
            <div v-html="activityDesc"></div>
        </div>

        <!-- 投票列表排行部分 -->
        <div>
            <!-- 按钮 -->
            <div class="voteButton">
                <!-- 用户投票数据 -->
                <div class="uservote" v-if="startflag">
                    <div class="addupVote">累计已投: <span>{{totalVotes}}</span> 票</div>
                    <div class="todayVote">今日已投: <span>{{nowDayTotalVotes}}</span> 票</div>
                    <div class="maxdayVote" v-if="!maxVoteflag">今日可投: <span>{{maxNumOneday - nowDayTotalVotes}}</span> 票</div>
                    <div class="maxVote" v-if="maxVoteflag">投票数已达上限</div>
                </div>
                <div class="votestart" v-if="!startflag" v-text="endflag?'投票已结束':'投票未开始'"></div>
                <!-- 排序按钮 -->
                <div class="buttonB" @click="sortVotenum(newlist,'numOfVote')"><img src="./huangguan.png" alt="">即时排行榜</div>
                <div class="buttonA" @click="getLocaleZh(newlist,'itemName')">按字母排序</div>
            </div>
            <!-- 文章分类按钮 -->
            <div style="margin-bottom:10px;">
                <div 
                   class="classify" 
                   v-for="(item,index) in voteItemTypeDicts" :key="index"
                   :style="{backgroundColor: sign == index ? '#1d5edb': '#fff',color: sign == index ? '#fff': '#333'}"
                   @click="select(index)"
                >{{item.label}}</div>
            </div>
            <!-- 投票列表 -->
            <div class="votebox">
                <div class="votelist" v-for="(item,index) in newlist" :key="index" @click="toView('vote', item, activityInfos)">
                    <!-- <div class="voteName">
                        <span :style="{ backgroundColor:colorGroup[index] }" class="span">{{number[index]}}</span>{{ item.itemName }}
                    </div> -->
                    <span :style="{ backgroundColor:colorGroup[index] }" class="span">{{number[index]}}</span>
                    <div class="voteName">{{ item.itemName }}</div>
                    <div class="voteCompetitor">{{ item.competitorName }}</div>
                    <div class="voteCount" :style="{backgroundColor:item.votecolor}">{{ item.numOfVote ? item.numOfVote : 0 }}</div>
                    <div class="tested" v-if="Number(item.totalVotesForOneItem)"></div>
                </div>
            </div>
        </div>

        <!-- 返回按钮 -->
          <div class="backButton" @click="toHome">返回首页</div>
    </div>
</template>
<script>
    import {getActivityForVotes,getItemForVotes,getVoteParams} from "@/api/vote/vote";
    import { getDicts } from '@/api/dict'
    export default {
        name: 'voteList',
        data() {
            return {
                newlist:[],
                colorGroup:[ '#e02020','#fa6400','#f7b500' ],
                sign:0,
                number:[1,2,3],
                startflag:true,//用户投票数据是否显示flag
                endflag:false,//投票是否结束
                maxVoteflag:false,
                activityDesc:'',//投票描述
                voteImg:'',//投票宣传图
                voteId:'',//
                activityInfos:'',
                maxNumOneday:'',//账号最多投票数
                //--当前账号投票情况--
                totalVotes: '', //账号在投票期间投票总数
                nowDayTotalVotes: '',//账号当天投票总数
                nowDayTotalVotesForOneItem: '',//账号对单个参投项当天投票总数
                isVoteForOneItem: '',//账号在投票期间对单个参投项是否投过票
                //----------------------------------------------------------
                // votecolor:'',
                voteItemTypeDicts:[],
                voteItemTypeDict:'academic_papers',//论文类型
            };
        },
        mounted() {
            getDicts('VOTE_ITEM_TYPE_DICT').then(result => {
                var data = result.data;
                if(data){
                    this.voteItemTypeDicts = result.data[0];
                    console.log('xxxxxxxx',this.voteItemTypeDicts)
                }
            });
           this.getActivityForVote()
        },
        methods: {
            getActivityForVote(){
               getActivityForVotes().then(res => {
                    this.activityInfos = res.data.activityForVotes[0];
                    this.activityDesc = res.data.activityForVotes[0].activityDesc;
                    this.voteImg = res.data.activityForVotes[0].coverPictureUrl;
                    this.activityId = res.data.activityForVotes[0].id;
                    this.maxNumOneday = res.data.activityForVotes[0].maxNumOneday;
            //         console.log('=================',this.voteId)
                    var nowtime = Date.parse(new Date());
                    if( Date.parse(this.activityInfos.voteStartDate) > nowtime||Date.parse(this.activityInfos.voteEndDate) < nowtime ){ this.startflag = false }
                    if( Date.parse(this.activityInfos.voteStartDate) < nowtime ){ this.endflag = true }
                    getItemForVotes({activityId:this.activityId,voteItemTypeDict:this.voteItemTypeDict}).then(res => {
                        this.newlist = res.data.itemForVotes;
                        this.sortVotenum(this.newlist,'numOfVote');
                        this.nowDayTotalVotes = res.data.itemForVotes[0].nowDayTotalVotes;
                        this.totalVotes = res.data.itemForVotes[0].totalVotes;
                        this.newlist.forEach((item,index)=>{
                             // console.log('xxxxxxxxxxx',this.activityInfos.isRevoteOneitem)
                             if((this.activityInfos.isRevoteOneitem=='No' && item.totalVotesForOneItem>0)||item.nowDayTotalVotesForOneItem == this.activityInfos.maxNumOneitemOneday||this.activityInfos.maxNumTotal==this.totalVotes){
                                 this.$set(item,'votecolor','#949494')
                             }
                        });
                        if(this.activityInfos.maxNumTotal==this.totalVotes){ this.maxVoteflag = true }
                     //    console.log('xxxxxxx',this.newlist)
                    });
               })
            },
            toView(router, items, activityInfos) {
                items = JSON.stringify(items);
                activityInfos = JSON.stringify(activityInfos)
                // localStorage.setItem('conferenceId', id);
                this.$router.push({ path: router , query: { items,activityInfos } });
            },
            toHome(){
                this.$router.push({ path: 'home' });
            },
            //tab栏
            select(index){
                this.sign = index;
                this.voteItemTypeDict = this.voteItemTypeDicts[index].value;
                this.getActivityForVote()
            },
            //按字母排序
            getLocaleZh(array,property){
                array.sort(function (a,b){
                   return a[property].localeCompare(b[property], 'zh');
                }) 
            },
            //按票数排序
            sortVotenum(array,property){
                array.sort(function (a,b){
                   return b[property]-a[property];
                }) 
            },
        }
    }
</script>
<style scoped>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        /* vertical-align: text-top; */
    }
    html,body,#app {
        width: 100%;
        height: 100%;
    }
    .bigbox{
        width: 1080px;
        margin: auto;
        padding-bottom: 65px;
    }
    .topimg{
        width: 1080px;
        /* height: 450px; */
    }
    .topimg > img{
        width: 100%;
    }
    .voteIntro{
        width: 1080px;
        /* height: 300px; */
        border-left: 2px dotted #cccccc;
        border-right: 2px dotted #cccccc;
        border-bottom: 2px dotted #cccccc;
        margin-top: 45px;
        padding: 0px 20px
    }
    .voteButton{
        width: 100%;
        height: 115px;
        padding: 50px 0px 20px 0px;
    }
    .uservote{
        width: 50%;
        float: left;
    }
    .addupVote{
        display: inline-block;
        margin-left: 20px;
    }
    .addupVote > span{
        display: inline-block;
        margin-bottom: 8px;
        font-size: 26px;
        color: #468ff7;
    }
    .todayVote{
        display: inline-block;
        margin-left: 40px;
    }
    .todayVote > span{
        display: inline-block;
        margin-bottom: 8px;
        font-size: 26px;
        color: #e56d2c;
    }
    .maxdayVote{
        display: inline-block;
        margin-left: 40px;
    }
    .maxdayVote > span{
        display: inline-block;
        margin-bottom: 8px;
        font-size: 26px;
        color: #71b96c;
    }
    .maxVote{
        display: inline-block;
        margin-left: 40px;
        font-size: 26px;
        margin-bottom: 13px;
        color: red;
    }
    .votestart{
        width: 50%;
        height: 100%;
        float: left;
        font-size: 30px;
        padding-top: 24px;
    }
    .buttonA{
        width: 166px;
        height: 40px;
        float: right;
        /* margin-top: 25px; */
        border-radius: 10px;
        background-color: #f7b500;
        text-align: center;
        line-height: 40px;
        margin-right: 25px;
        color: white;
        cursor: pointer;
    }
    .buttonB{
        position: relative;
        width: 166px;
        height: 40px;
        float: right;
        /* margin-top: 25px; */
        border-radius: 10px;
        background-color: #44d7b6;
        text-align: center;
        line-height: 40px;
        color: white;
        cursor: pointer;
    }
    .buttonB > img{
        position: absolute;
        top: 10px;
        left: 20px;
        width: 20px;
        height: 20px;
    }
    .votebox{
        border-top: 2px dotted #cccccc;
    }
    .classify{
        display:inline-block;
        width:140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px dotted black;
        cursor: pointer;
    }

    .votelist{
        position: relative;
        display: inline-block;
        width: 50%;
        height: 90px;
        border-bottom: 2px dotted #cccccc;
        padding-top: 10px;
        cursor: pointer;
        vertical-align: top;
    }
    .span{
        width:18px;
        height:18px;
        display:inline-block;
        border-radius: 5px;
        text-align: center;
        color: white;
        font-size: 10px;
        margin: 3px 8px 0px 0px;
        vertical-align: top;
    }
    .voteName{
        display: -webkit-inline-box;
        font-weight: bold;
        color:#666666;
        width: 70%;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow:ellipsis;
    }
    .voteCompetitor{
        padding-left:26px;
        padding-top:8px;
        font-size:14px;
        color:#7c8086
    }
    .voteCount{
        position: absolute;
        top: 23%;
        right: 25px;
        width: 100px;
        height: 40px;
        background-color: #7aacff;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        color: #FFF;
    }
    .tested{
        position: absolute;
        top: 6px;
        right: 141px;
        width: 60px;
        height: 60px;
        background-image: url('./zvoted.png');
        background-size: cover;
    }
    .backButton{
        width: 100px;
        height: 30px;
        background-color: #B4D5FF;
        position: fixed;
        top: 0px;
        right: 2%;
        border-radius: 8px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
</style>