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

<template>
	<div class="bigbox">
		<!-- 顶部图片 -->
		<div class="topimg">
			<img src="@/assets/voteInfoPic.png" 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" />即时排行榜
				</div>
				<div class="buttonA" @click="getLocaleZh(newlist, 'competitorTel')">
					按部门排序
				</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="itemNums % 3 == 1 ? 'votebox1' : 'votebox2'">
				<div class="votelist" v-for="(item, index) in newlist" :key="index">
					<div
						style="
							display: flex;
							justify-content: space-between;
							width: 96%;
							margin-left: 2%;
						"
					>
						<span
							:style="{ backgroundColor: colorGroup[index] }"
							v-if="seeLittlePic"
							style="
								display: inline-block;
								width: 5%;
								height: 18px;
								border-radius: 5px;
								text-align: center;
								color: #fff;
								font-size: 10px;
								vertical-align: top;
								margin: 4px 4px 0px 0px;
							"
							>{{ number[index] }}</span
						>
						<img
							style="width: 290px; height: 180px; cursor: pointer"
							:src="'./api/file/pub/' + item.fileUrl"
							@click="getBig(item)"
						/>
					</div>
					<div style="width: 89.5%; height: 120px; margin-left: 8.4%">
						<div
							style="
								width: 100%;
								height: 50px;
								text-align: center;
								margin-top: 5px;
								line-height: 20px;
								font-size: 18px;
								white-space: break-word;
							"
						>
							{{ item.itemName }}
						</div>
						<div
							style="
								width: 100%;
								height: 40px;
								display: flex;
								justify-content: space-around;
							"
						>
							<div
								style="
									width: 59%;
									height: 40px;
									line-height: 40px;
									text-align: center;
									display: flex;
								"
							>
								<div
									style="
										width: 28%;
										height: 40px;
										line-height: 40px;
										text-align: center;
									"
								>
									部门:
								</div>
								<div
									style="
										width: 72%;
										height: 40px;
										line-height: 40px;
										text-align: left;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									"
								>
									{{ item.competitorTel }}
								</div>
							</div>

							<div
								style="
									width: 39%;
									height: 40px;
									line-height: 40px;
									text-align: center;
									display: flex;
								"
							>
								<div
									style="
										width: 39%;
										height: 40px;
										line-height: 40px;
										text-align: center;
									"
								>
									作者:
								</div>
								<div
									style="
										width: 72%;
										height: 40px;
										line-height: 40px;
										text-align: left;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									"
								>
									{{ item.competitorName }}
								</div>
							</div>
						</div>

						<div
							style="
								width: 100%;
								height: 40px;
								display: flex;
								justify-content: space-between;
								position: relative;
							"
						>
							<div class="voteCount">
								票数：<span
									style="
										width: 50%;
										height: 28px;
										line-height: 28px;
										background-color: #41d7b5;
										display: inline-block;
										border-radius: 10px;
										color: #fff;
										font-size: 18px;
										transform: translateY(2px);
									"
									>{{ item.numOfVote ? item.numOfVote : 0 }}</span
								>
							</div>
							<img
								src="./zvoted.png"
								v-if="item.totalVotesForOneItem != 0"
								style="
									width: 100px;
									height: 100px;
									z-index: 998;
									position: absolute;
									top: -283%;
									left: 58%;
								"
							/>
							<div
								style="width: 50%; height: 40px"
								v-if="maxNumOneday - nowDayTotalVotes > 0"
							>
								<div
									@click="voteSend(item)"
									v-if="item.totalVotesForOneItem == 0"
									style="
										width: 80%;
										text-align: center;
										margin-left: 18%;
										height: 30px;
										line-height: 30px;
										background-color: #005eeb;
										color: #fff;
										border-radius: 10px;
										cursor: pointer;
										transform: translateY(5px);
									"
								>
									投票
								</div>
								<div
									v-if="item.totalVotesForOneItem != 0"
									style="
										width: 80%;
										text-align: center;
										margin-left: 18%;
										height: 30px;
										line-height: 30px;
										background-color: #bdbdbd;
										color: #fff;
										border-radius: 10px;
										cursor: no-drop;
										transform: translateY(5px);
									"
								>
									投票
								</div>
							</div>
							<div style="width: 50%; height: 40px" v-else>
								<div
									style="
										width: 80%;
										text-align: center;
										margin-left: 18%;
										height: 30px;
										line-height: 30px;
										background-color: #bdbdbd;
										color: #fff;
										border-radius: 10px;
										cursor: no-drop;
										transform: translateY(5px);
									"
								>
									投票
								</div>
							</div>
						</div>

						<div class="tested" v-if="Number(item.totalVotesForOneItem)"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹窗 -->
		<div
			v-if="bigPic"
			style="
				width: 900px;
				height: 600px;
				background-color: rgba(0, 0, 0, 0.8);
				position: fixed;
				top: 10%;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
			"
		>
			<img
				src="@/assets/closesese.png"
				style="
					width: 30px;
					height: 30px;
					position: absolute;
					top: 1%;
					left: 96%;
					cursor: pointer;
				"
				@click="closePic"
			/>
			<img
				:src="'./api/file/pub/' + itemInfos.fileUrl"
				style="width: 100%; height: 500px; margin-top: 42px"
			/>
			<div style="width: 100%; height: 58px; display: flex; margin-top: -4px">
				<div
					style="
						height: 58px;
						line-height: 58px;
						font-size: 18px;
						color: #bdbdbd;
						margin-left: 30px;
					"
				>
					作品名称：<span>{{ itemInfos.itemName }}</span>
				</div>
				<div
					style="
						height: 58px;
						line-height: 58px;
						font-size: 18px;
						color: #bdbdbd;
						margin-left: 30px;
					"
				>
					部门：<span>{{ itemInfos.competitorTel }}</span>
				</div>
				<div
					style="
						height: 58px;
						line-height: 58px;
						font-size: 18px;
						color: #bdbdbd;
						margin-left: 30px;
					"
				>
					作者：<span>{{ itemInfos.competitorName }}</span>
				</div>
			</div>
		</div>
		<!-- 返回按钮 -->
		<div class="backButton" @click="toHome">返回首页</div>
	</div>
</template>
<script>
import {
	getActivityForVotes,
	getItemForVotes,
	saveOrUpdateVote,
	getVoteParams,
} from '@/api/vote/vote'
import { getDicts } from '@/api/dict'
import { getToken } from '@/api/token'
export default {
	name: 'voteInfo',
	data() {
		return {
			seeLittlePic: true,
			itemNums: '',
			bigPic: false,
			itemVoteDetail: {
				id: null,
				activityId: '', //活动id
				itemId: '', //参投id
			},
			newlist: [],
			colorGroup: ['#e02020', '#fa6400', '#f7b500'],
			sign: 0,
			loadflag: true,
			number: [1, 2, 3],
			startflag: true, //用户投票数据是否显示flag
			endflag: false, //投票是否结束
			maxVoteflag: false,
			activityDesc: '', //投票描述
			voteImg: '', //投票宣传图
			voteId: '', //
			activityInfos: '',
			maxNumOneday: '', //账号最多投票数
			//--当前账号投票情况--
			totalVotes: '', //账号在投票期间投票总数
			nowDayTotalVotes: '', //账号当天投票总数
			nowDayTotalVotesForOneItem: '', //账号对单个参投项当天投票总数
			isVoteForOneItem: '', //账号在投票期间对单个参投项是否投过票
			//----------------------------------------------------------
			// votecolor:'',
			voteItemTypeDicts: [],
			voteItemTypeDict: 'photography_type', //论文类型
			Items: [],
			itemInfos: [],
		}
	},
	mounted() {
		getDicts('VOTE_ITEM_TYPE_DICT').then((res) => {
			var data = res.data
			if (data) {
				this.voteItemTypeDicts = res.data[0]
				console.log('xxxxxxxx', this.voteItemTypeDicts)
			}
		})
		this.getActivityForVote()
		this.loginAccount = JSON.parse(localStorage.getItem('user')).umsUser
			.userPreferredMobile
			? JSON.parse(localStorage.getItem('user')).umsUser.userPreferredMobile
			: JSON.parse(localStorage.getItem('user')).umsUser.userEmail
	},
	methods: {
		closePic() {
			this.bigPic = false
		},
		getBig(item) {
			console.log(item, '好多数据')
			let url = './api/file/pub/' + item.fileUrl
			window.open(url, '_blank')
			// this.itemInfos = item
			// this.bigPic = true
			// console.log(this.itemInfos);
		},
		voteSend(item) {
			this.Items = item
			console.log('3阶段')
			//活动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) => {
				console.log(res, '4阶段')
				this.totalVotes = res.data.voteParams.totalVotes
				this.nowDayTotalVotes = res.data.voteParams.totalVotes
				this.nowDayTotalVotesForOneItem =
					res.data.voteParams.nowDayTotalVotesForOneItem
				this.isVoteForOneItem = res.data.voteParams.isVoteForOneItem
				console.log(
					parseInt(this.totalVotes),
					this.activityInfos.maxNumTotal,
					'===小小的===='
				)
			})
			this.$confirm('是否确定投票', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					var nowTime = Date.parse(new Date()) //现在的时间戳
					var time1 = Date.parse(this.activityInfos.voteStartDate)
					var time2 = Date.parse(this.activityInfos.voteEndDate)
					console.log(nowTime, time1, time2, '==时间==')
					if (this.loginAccount.slice(0, 4) == '0086') {
						this.loginAccount = this.loginAccount.slice(4)
					} //截取用户手机号

					if (time1 <= nowTime) {
						//判断一下投票时间
						console.log('1阶段')
						if (time2 >= nowTime) {
							console.log('2阶段')
							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 {
								console.log('4阶段')
								this.saveVote()
							}
						} else {
							this.$message({
								type: 'warning',
								message: '投票已结束!',
							})
						}
					} else {
						this.$message({
							type: 'warning',
							message: '未到投票时间!',
						})
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '投票取消',
					})
				})
		},
		saveVote() {
			console.log('5阶段')
			console.log(this.itemVoteDetail, '6阶段')
			getToken().then((token) => {
				console.log(token, '关键数据')
				saveOrUpdateVote(JSON.stringify(this.itemVoteDetail), token.data)
					.then((res) => {
						console.log('最终阶段')
						this.$message({
							type: 'success',
							message: '投票成功!',
						})
						this.getActivityForVote()
					})
					.catch((error) => {
						this.resetToken()
					})
			})
		},
		getActivityForVote() {
			getActivityForVotes().then((res) => {
				console.log(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.activityId)
				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) => {
					console.log(res, '列表数据')
					this.newlist = res.data.itemForVotes
					this.sortVotenumGet(this.newlist, 'id')
					this.nowDayTotalVotes = res.data.itemForVotes[0].totalVotes
					this.totalVotes = res.data.itemForVotes[0].totalVotes
					this.newlist.forEach((item, index) => {
						index += 1
						this.itemNums = index
						console.log(this.itemNums, '列表数量')
						// 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)
				})
			})
		},

		toHome() {
			console.log('nihao')
			this.$router.push({ path: 'home' })
		},
		//tab栏
		select(index) {
			this.sign = index
			this.voteItemTypeDict = this.voteItemTypeDicts[index].value
			console.log(this.voteItemTypeDict, '========================')
			this.getActivityForVote()
		},
		//按字母排序
		getLocaleZh(array, property) {
			this.seeLittlePic = false
			array.sort(function (a, b) {
				return a[property].localeCompare(b[property], 'zh')
			})
		},
		//按票数排序
		sortVotenum(array, property) {
			this.seeLittlePic = true
			array.sort(function (a, b) {
				return b[property] - a[property]
			})
		},
		sortVotenumGet(array, property) {
			this.seeLittlePic = true
			array.sort(function (a, b) {
				return Math.random() - 0.5
			})
		},
	},
}
</script>
<style scoped>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* vertical-align: text-top; */
}

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

.bigbox {
	position: relative;
	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;
}

.classify {
	display: inline-block;
	width: 140px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px dotted black;
	cursor: pointer;
}

.votebox1 {
	border-top: 2px dotted #cccccc;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.votebox1:after {
	content: '';
	width: 70%;
	height: 0;
	visibility: hidden;
}

.votebox2 {
	border-top: 2px dotted #cccccc;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.votebox2:after {
	content: '';
	width: 30%;
	height: 0;
	visibility: hidden;
}

.votelist {
	width: 30%;
	height: 320px;
	margin-top: 30px;
}

.voteCount {
	width: 45%;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.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;
}

.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;
}

.voteButtonInfo {
	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;
}
</style>