在职党员社区报到，换届选举
This commit is contained in:
liuye
@@ -0,0 +1,330 @@
|
||||
<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、本次选举采用无记名投票方式，差额选举的办法，选举第十一届村民委员会主任1名。选举工作由选举委员会主持，未尽事宜由选举委员会研究决定；</view>
|
||||
<view class="mask-text">2、差额选举的办法，选举第十一届村民委员会主任1名。选举工作由选举委员会主持，未尽事宜由选举委员会研究决定。</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: ''
|
||||
};
|
||||
},
|
||||
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.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: 116px;
|
||||
|
||||
.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;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
padding: 12px 0 40px 0;
|
||||
|
||||
}
|
||||
|
||||
.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, .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;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.mask-btn {
|
||||
width: 128px;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #1365DD;
|
||||
line-height: 40px;
|
||||
margin: 60px 0 0 332px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user