378 lines
9.1 KiB
Vue
378 lines
9.1 KiB
Vue
<template>
|
||
<view class="page">
|
||
<div class="line-bg"></div>
|
||
<div class="banner-top">
|
||
<image
|
||
src="https://cdn.cunwuyun.cn/img/election-banner.png"
|
||
class="banner-img"
|
||
></image>
|
||
<span class="tips" @click="viewMask()"
|
||
><image
|
||
src="https://cdn.cunwuyun.cn/img/explain-icon.png"
|
||
class="tips-icon"
|
||
></image
|
||
>投票说明</span
|
||
>
|
||
<image
|
||
src="https://cdn.cunwuyun.cn/img/party-icon.png"
|
||
class="party-icon"
|
||
></image>
|
||
<div class="banner-info">
|
||
<div class="title">{{ title }}</div>
|
||
<div class="num-info">应选人{{ chooseNumber || "0" }}人</div>
|
||
<div class="user-list">
|
||
<div class="user-item user-item-title">
|
||
<span>候选人</span>
|
||
<span>赞成</span>
|
||
<span>反对</span>
|
||
<span>弃权</span>
|
||
</div>
|
||
<div class="user-item" v-for="(item, index) in userList" :key="index">
|
||
<span>{{ item.candidateUserName }}</span>
|
||
<span>
|
||
<image
|
||
:src="
|
||
item.voteStatus == '0'
|
||
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||
"
|
||
class="check-icon"
|
||
@click="checkClick(index, '0')"
|
||
></image>
|
||
</span>
|
||
<span>
|
||
<image
|
||
:src="
|
||
item.voteStatus == '1'
|
||
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||
"
|
||
class="check-icon"
|
||
@click="checkClick(index, '1')"
|
||
></image>
|
||
</span>
|
||
<span>
|
||
<image
|
||
:src="
|
||
item.voteStatus == '2'
|
||
? 'https://cdn.cunwuyun.cn/img/circle-check.png'
|
||
: 'https://cdn.cunwuyun.cn/img/circle-icon.png'
|
||
"
|
||
class="check-icon"
|
||
@click="checkClick(index, '2')"
|
||
></image>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-bottom">
|
||
<div class="btn" @click="submitVote()">提交投票</div>
|
||
</div>
|
||
<view class="mask" v-if="showMask">
|
||
<view class="mask-content">
|
||
<view class="mask-title">投票说明</view>
|
||
<!-- <view class="mask-text">1、本次选举采用无记名投票方式，差额选举的办法</view>
|
||
<view class="mask-text">2、选举工作由选举委员会主持，未尽事宜由选举委员会研究决定。</view> -->
|
||
<view class="mask-text">{{ votingInstructions }}</view>
|
||
<view class="mask-btn" @click="closeMask()">关闭</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
export default {
|
||
computed: {
|
||
...mapState(["user"]),
|
||
},
|
||
data() {
|
||
return {
|
||
detailId: "",
|
||
userList: [],
|
||
showMask: false,
|
||
title: "",
|
||
chooseNumber: "",
|
||
partyId: "",
|
||
votingInstructions: "",
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.detailId = options.id;
|
||
this.partyId = this.user.partyId;
|
||
this.getDetailInfo();
|
||
},
|
||
methods: {
|
||
submitVote() {
|
||
var flags = true;
|
||
var checkNum = 0;
|
||
var checkList = [];
|
||
this.userList.map((item) => {
|
||
if (item.voteStatus) {
|
||
checkNum++;
|
||
checkList.push(item);
|
||
}
|
||
});
|
||
|
||
if (checkNum > this.chooseNumber) {
|
||
uni.showToast({ title: `投票人数大于应选人数，请重试`, icon: "none" });
|
||
flags = false;
|
||
}
|
||
if (checkNum < this.chooseNumber) {
|
||
uni.showToast({ title: `请给候选人投票`, icon: "none" });
|
||
flags = false;
|
||
}
|
||
// if (checkNum < this.userList.length) {
|
||
// uni.showToast({title: `请给候选人投票`, icon: 'none'})
|
||
// flags = false
|
||
// }
|
||
|
||
if (!flags) return;
|
||
this.$instance
|
||
.post("/app/appgeneralelectioninfo/vote", checkList)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({ title: "投票成功！" });
|
||
setTimeout(function () {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
},
|
||
checkClick(index, status) {
|
||
if (this.userList[index].voteStatus == status) {
|
||
this.userList[index].voteStatus = "";
|
||
} else {
|
||
this.userList[index].voteStatus = status;
|
||
}
|
||
},
|
||
closeMask() {
|
||
this.showMask = false;
|
||
},
|
||
viewMask() {
|
||
this.showMask = true;
|
||
},
|
||
getDetailInfo() {
|
||
this.$instance
|
||
.post(
|
||
`/app/appgeneralelectioninfo/queryDetailById?id=${this.detailId}`,
|
||
null
|
||
)
|
||
.then((res) => {
|
||
if (res.data) {
|
||
this.votingInstructions = res.data.votingInstructions;
|
||
this.chooseNumber = res.data.chooseNumber;
|
||
this.title = res.data.title;
|
||
res.data.candidateUsers.map((item) => {
|
||
var info = {
|
||
candidateUserId: item.id,
|
||
candidateUserName: item.name,
|
||
electionId: this.detailId,
|
||
voteStatus: "",
|
||
voterUserId: this.partyId,
|
||
};
|
||
this.userList.push(info);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scope>
|
||
.page {
|
||
.line-bg {
|
||
width: 100%;
|
||
height: 12px;
|
||
background-color: #e60012;
|
||
}
|
||
|
||
.banner-top {
|
||
width: 100%;
|
||
height: 340px;
|
||
position: relative;
|
||
|
||
.banner-img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 340px;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tips {
|
||
position: absolute;
|
||
right: 42px;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
z-index: 88;
|
||
top: 137px;
|
||
|
||
.tips-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
vertical-align: text-top;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.party-icon {
|
||
position: absolute;
|
||
z-index: 3;
|
||
width: 140px;
|
||
height: 140px;
|
||
left: 50%;
|
||
margin-left: -70rpx;
|
||
top: 180px;
|
||
}
|
||
|
||
.banner-info {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
width: 100%;
|
||
color: #fff;
|
||
padding-bottom: 136px;
|
||
|
||
|
||
.title {
|
||
width: 100%;
|
||
font-size: 44px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
padding: 12px 0 10px 0;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.num-info {
|
||
width: 100%;
|
||
font-size: 36px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.user-list {
|
||
width: 710px;
|
||
background: #fff;
|
||
border-radius: 24px 24px 0 0;
|
||
margin: 0 auto;
|
||
|
||
.user-item {
|
||
width: 688px;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
margin: 0 auto;
|
||
border-bottom: 2px solid #eee;
|
||
display: flex;
|
||
font-size: 32px;
|
||
color: #666;
|
||
|
||
span {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.check-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-item:nth-last-of-type(1) {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.user-item-title {
|
||
color: #333;
|
||
font-size: 34px;
|
||
padding-top: 88px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
width: 100%;
|
||
|
||
.btn {
|
||
width: 100%;
|
||
line-height: 112px;
|
||
background: #e60012;
|
||
color: #fff;
|
||
font-size: 32px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 99;
|
||
|
||
.mask-content {
|
||
width: 560px;
|
||
height: 680px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
border: 2px solid rgba(151, 151, 151, 1);
|
||
margin: 200px auto 0;
|
||
padding: 48px 48px 0;
|
||
box-sizing: border-box;
|
||
|
||
|
||
.mask-title {
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333;
|
||
line-height: 44px;
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.mask-text {
|
||
width: 100%;
|
||
line-height: 44px;
|
||
font-size: 28px;
|
||
height: 460px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
color: #333;
|
||
word-break: break-all;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.mask-btn {
|
||
width: 128px;
|
||
height: 40px;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #1365dd;
|
||
line-height: 40px;
|
||
margin: 30px 0 20px 332px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|