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

<template>
    <div class="vote" id="app" style="width: 1200px;margin: auto;color: #333;overflow:hidden">
        <!-- 投票按钮 -->
        <div
            style="position: fixed;top: 0;left: auto;background: #fff;z-index: 9;width: 100%;border-bottom: 1px solid #ccc;">
            <!-- 十秒后投票按钮显示 -->
            <div :class="loadflag?'voteButton':'notvoteButton'" @click="voteSend" v-if="flag">
                <div style="font-size: 20px;">
                    投票
                </div>
                <div>请阅读完最后一页投票</div>
            </div>
            <!-- 投票倒计时 -->
            <div :class="loadflag?'voteButton':'notvoteButton'" v-if="!flag">
                <div style="font-size: 20px;line-height:80px" v-if="flagplus">阅读{{mytime}}秒后可投票</div>
                <div style="font-size: 16px;line-height:80px" v-if="!flagplus">阅读完最后一页方可投票</div>
            </div>
            <!-- 页数及投票信息 -->
            <div>
                <div>
                    <span style="width: 908px;display: inline-block; ">{{ Items.itemName }}</span>
                    <span style="margin-left: 150px;">当前投票数：<span class="color">{{ Items.numOfVote }}</span></span>
                </div>
                <div></div>
                <div @click=" getCurren">当前页：{{currentNum}}</div>
            </div>
            <!-- 返回按钮 -->
            <div class="backButton" @click="voteback">返回上一页</div>
        </div>
        <div id="demo" style="margin-top: 80px;"></div>

    </div>
</template>
<script>
import Pdfh5 from "pdfh5";
import Base from "@/views/base/Base";
import { saveOrUpdateVote, getVoteParams } from "@/api/vote/vote";
import "pdfh5/css/pdfh5.css";
import { parse } from 'qs';
export default {
    extends: Base,
    name: 'pdf',
    data () {
        return {
            pdfh5: null,
            pdfUrl: '', //地址最好用http: 的访问
            flag: false,//按钮是否显示flag
            flagplus: true,
            loadflag: true,//决定按钮是否可以禁用的flag
            mytime: 10,//计时时间
            itemVoteDetail: {
                id: null,
                activityId: '',  //活动id
                itemId: '',	 //参投id
            },
            ActivityInfos: '',//从投票列表页传过来的数据
            Items: '',        //从投票列表页传过来的数据
            userPhone: '',//账号手机号
            userEmail: '',//账号邮箱
            //--投票规则--
            //是否启用白名单(Yes,No): this.$route.query.activityInfos.isWhiteList 
            //白名单内容: this.$route.query.activityInfos.whiteList
            //投票期间投票总数: this.$route.query.activityInfos.maxNumTotal
            //账号每天最多投票数: this.$route.query.activityInfos.maxNumOneday
            //账号对同一个参投条目每天最多投票数: this.$route.query.activityInfos.maxNumOneitemOneday 
            //一个参投条目是否允许重复投票(Yes,No): this.$route.query.activityInfos.isRevoteOneitem

            //--当前账号投票情况--
            totalVotes: '', //账号在投票期间投票总数
            nowDayTotalVotes: '',//账号当天投票总数
            nowDayTotalVotesForOneItem: '',//账号对单个参投项当天投票总数
            isVoteForOneItem: '',//账号在投票期间对单个参投项是否投过票
            //----------------------------------------------------------
            currentNum: '',
            totalNum: '',
        };
    },
    watch: {
        "pdfh5.currentNum" () {
            this.currentNum = this.pdfh5.currentNum;
            if (this.pdfh5.currentNum == this.pdfh5.totalNum) { this.flag = true };
        },
    },
    beforeCreate: function () {
        document.getElementsByTagName("body")[0].className = "add_bg";
    },
    mounted () {
        this.timekeep();//读秒计时
        this.ActivityInfos = JSON.parse(this.$route.query.activityInfos);
        this.Items = JSON.parse(this.$route.query.items);
        // console.log('23232323232323',this.ActivityInfos)
        // console.log('23232323232323',this.Items)
        var nowtime = Date.parse(new Date());
        this.ActivityInfos.voteStartDate = Date.parse(this.ActivityInfos.voteStartDate);
        this.ActivityInfos.voteEndDate = Date.parse(this.ActivityInfos.voteEndDate);
        if (this.ActivityInfos.voteStartDate > nowtime || this.ActivityInfos.voteEndDate < nowtime) { this.flag = true };
        //取出用户手机号和邮箱
        this.loginAccount = JSON.parse(localStorage.getItem("user")).umsUser.userPreferredMobile ? JSON.parse(localStorage.getItem("user")).umsUser.userPreferredMobile : JSON.parse(localStorage.getItem("user")).umsUser.userEmail;
        this.getVoteParam();
        //实例化
        this.pdfUrl = this.Items.fileUrl;
        this.pdfh5 = new Pdfh5("#demo", {
            URIenable: false,
            pdfurl: './api/file/pub/' + this.pdfUrl
        });
        //监听完成事件
        this.pdfh5.on("complete", function (status, msg, time) {
            console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum, this.currentNum)
        });
        this.pdfh5.on("error", function (msg, time) {
            console.log("，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
        });
        //计时器
        setTimeout(() => {
            this.flagplus = false;
            if (this.pdfh5.currentNum == this.pdfh5.totalNum) { this.flag = true };
        }, 10000);
    },
    // destroyed(){
    //     console.log('当天页数' + this.pdfh5.currentNum ,'总页数' + this.pdfh5.totalNum )
    // },
    methods: {
        getCurren () {
            //    alert(this.pdfh5.currentNum==this.pdfh5.totalNum)
        },
        voteSend () {
            this.$confirm('是否确定投票', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                var nowTime = Date.parse(new Date());//现在的时间戳
                if (this.loginAccount.slice(0, 4) == '0086') { this.loginAccount = this.loginAccount.slice(4) };//截取用户手机号

                if (this.ActivityInfos.voteStartDate <= nowTime && this.ActivityInfos.voteEndDate >= nowTime) {//判断一下投票时间
                    if (this.ActivityInfos.maxNumTotal && (parseInt(this.totalVotes) >= parseInt(this.ActivityInfos.maxNumTotal))) {
                        this.$message({
                            type: 'warning',
                            message: '活动期间投票数已达上限!'
                        });
                        return
                    } else if (parseInt(this.nowDayTotalVotes) >= parseInt(this.ActivityInfos.maxNumOneday)) {
                        this.$message({
                            type: 'warning',
                            message: '当天投票数已达上限!'
                        });
                        return
                    } else if (parseInt(this.nowDayTotalVotesForOneItem) >= parseInt(this.ActivityInfos.maxNumOneitemOneday)) {
                        this.$message({
                            type: 'warning',
                            message: '该论文投票数已达上限!'
                        });
                        return
                    } else if (this.ActivityInfos.isRevoteOneitem == 'No' && this.isVoteForOneItem == 'Yes') {
                        this.$message({
                            type: 'warning',
                            message: '请勿对一个论文重复投票!'
                        });
                        return

                    } else {
                        this.saveVote()
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '未到投票时间!'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '投票取消'
                });
            });

        },
        saveVote: function () {
            this.submitHandler((token) => {
                saveOrUpdateVote(JSON.stringify(this.itemVoteDetail), token).then(res => {
                    //投票成功提示信息, 页面跳转
                    this.$router.back()
                }).catch((error) => {
                    this.resetToken();
                });

            });
            this.$message({
                type: 'success',
                message: '投票成功!'
            });
        },
        getVoteParam () {
            //活动id赋值
            this.itemVoteDetail.activityId = this.ActivityInfos.id;
            //参投id赋值
            this.itemVoteDetail.itemId = this.Items.id;
            // console.log('/////////',this.itemVoteDetail.activityId)
            getVoteParams({ itemId: this.itemVoteDetail.itemId }).then(res => {
                this.totalVotes = res.data.voteParams.totalVotes;
                this.nowDayTotalVotes = res.data.voteParams.nowDayTotalVotes;
                this.nowDayTotalVotesForOneItem = res.data.voteParams.nowDayTotalVotesForOneItem;
                this.isVoteForOneItem = res.data.voteParams.isVoteForOneItem;
                this.buttonChang()
            })
        },
        //读秒
        timekeep () {
            var that = this
            var myVar = setInterval(function () {
                if (that.mytime == 1) {
                    clearTimeout(myVar)
                };
                return that.mytime--;
            }, 1000);
        },
        //返回按钮
        voteback () {
            this.$router.go(-1)
        },
        //按钮是否禁用
        buttonChang () {
            // this.getVoteParam()
            var nowTime = Date.parse(new Date());//现在的时间戳
            console.log('9090909090', this.totalVotes)
            if (this.ActivityInfos.voteStartDate <= nowTime && this.ActivityInfos.voteEndDate >= nowTime) {//判断一下投票时间
                if (this.ActivityInfos.maxNumTotal && (parseInt(this.totalVotes) >= parseInt(this.ActivityInfos.maxNumTotal))) {
                    this.loadflag = false;
                    return
                } else if (parseInt(this.nowDayTotalVotes) >= parseInt(this.ActivityInfos.maxNumOneday)) {
                    this.loadflag = false;
                    return
                } else if (parseInt(this.nowDayTotalVotesForOneItem) >= parseInt(this.ActivityInfos.maxNumOneitemOneday)) {
                    this.loadflag = false;
                    return
                } else if (this.ActivityInfos.isRevoteOneitem == 'No' && this.isVoteForOneItem == 'Yes') {
                    this.loadflag = false;
                    return
                }
                // debugger
            } else {
                this.loadflag = false;
            }
        }
    }
}
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden
}

;

.vote>>>.pageContainer img {
    width: 100%;
}

/* .pdfjs .pdfViewer .pageContainer ::-webkit-scrollbar{
        display:none;
    } */
/deep/.viewerContainer {
    height: calc(100vh);
}

.color {
    color: #e12c2c;
}

.voteButton {
    width: 200px;
    height: 80px;
    background: linear-gradient(90deg, #62bf00 0%, #47ab16 100%);
    color: #fff;
    vertical-align: center;
    line-height: 35px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(200%);
    cursor: pointer;
}

.notvoteButton {
    width: 200px;
    height: 80px;
    background: linear-gradient(90deg, #727472 0%, #555a53 100%);
    color: #fff;
    text-align: center;
    line-height: 35px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(200%);
    cursor: pointer;
    pointer-events: none;
}

.voteButton:active {
    background: linear-gradient(90deg, #B4D5FF 0%, #4F81BF 100%);
}

.voteButton div {
    width: 100%;
    text-align: center;
}

.backButton {
    width: 100px;
    height: 30px;
    background-color: #B4D5FF;
    position: absolute;
    top: 6px;
    right: 25%;
    border-radius: 8px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
</style>