超出隐藏

This commit is contained in:
shijingjing
2022-10-27 10:43:07 +08:00
parent d1e2853b6e
commit c3723c8cfb

View File

@@ -2,12 +2,24 @@
<view class="page"> <view class="page">
<div class="line-bg"></div> <div class="line-bg"></div>
<div class="banner-top"> <div class="banner-top">
<image src="https://cdn.cunwuyun.cn/img/election-banner.png" class="banner-img"></image> <image
<span class="tips" @click="viewMask()"><image src="https://cdn.cunwuyun.cn/img/explain-icon.png" class="tips-icon"></image>投票说明</span> src="https://cdn.cunwuyun.cn/img/election-banner.png"
<image src="https://cdn.cunwuyun.cn/img/party-icon.png" class="party-icon"></image> 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="banner-info">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="num-info">应选人{{ chooseNumber || '0' }}</div> <div class="num-info">应选人{{ chooseNumber || "0" }}</div>
<div class="user-list"> <div class="user-list">
<div class="user-item user-item-title"> <div class="user-item user-item-title">
<span>候选人</span> <span>候选人</span>
@@ -19,18 +31,36 @@
<span>{{ item.candidateUserName }}</span> <span>{{ item.candidateUserName }}</span>
<span> <span>
<image <image
:src="item.voteStatus == '0' ? 'https://cdn.cunwuyun.cn/img/circle-check.png' : 'https://cdn.cunwuyun.cn/img/circle-icon.png'" :src="
class="check-icon" @click="checkClick(index, '0')"></image> 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>
<span> <span>
<image <image
:src="item.voteStatus == '1' ? 'https://cdn.cunwuyun.cn/img/circle-check.png' : 'https://cdn.cunwuyun.cn/img/circle-icon.png'" :src="
class="check-icon" @click="checkClick(index, '1')"></image> 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>
<span> <span>
<image <image
:src="item.voteStatus == '2' ? 'https://cdn.cunwuyun.cn/img/circle-check.png' : 'https://cdn.cunwuyun.cn/img/circle-icon.png'" :src="
class="check-icon" @click="checkClick(index, '2')"></image> 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> </span>
</div> </div>
</div> </div>
@@ -51,93 +81,100 @@
</view> </view>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import { mapState } from "vuex";
export default { export default {
computed: { computed: {
...mapState(['user']), ...mapState(["user"]),
}, },
data() { data() {
return { return {
detailId: '', detailId: "",
userList: [], userList: [],
showMask: false, showMask: false,
title: '', title: "",
chooseNumber: '', chooseNumber: "",
partyId: '', partyId: "",
votingInstructions: '', votingInstructions: "",
}; };
}, },
onLoad(options) { onLoad(options) {
this.detailId = options.id this.detailId = options.id;
this.partyId = this.user.partyId this.partyId = this.user.partyId;
this.getDetailInfo() this.getDetailInfo();
}, },
methods: { methods: {
submitVote() { submitVote() {
var flags = true var flags = true;
var checkNum = 0 var checkNum = 0;
var checkList = [] var checkList = [];
this.userList.map((item) => { this.userList.map((item) => {
if (item.voteStatus) { if (item.voteStatus) {
checkNum++ checkNum++;
checkList.push(item) checkList.push(item);
} }
}) });
if (checkNum > this.chooseNumber) { if (checkNum > this.chooseNumber) {
uni.showToast({title: `投票人数大于应选人数,请重试`, icon: 'none'}) uni.showToast({ title: `投票人数大于应选人数,请重试`, icon: "none" });
flags = false flags = false;
} }
if (checkNum < this.chooseNumber) { if (checkNum < this.chooseNumber) {
uni.showToast({title: `请给候选人投票`, icon: 'none'}) uni.showToast({ title: `请给候选人投票`, icon: "none" });
flags = false flags = false;
} }
// if (checkNum < this.userList.length) { // if (checkNum < this.userList.length) {
// uni.showToast({title: `请给候选人投票`, icon: 'none'}) // uni.showToast({title: `请给候选人投票`, icon: 'none'})
// flags = false // flags = false
// } // }
if (!flags) return if (!flags) return;
this.$instance.post('/app/appgeneralelectioninfo/vote', checkList).then(res => { this.$instance
.post("/app/appgeneralelectioninfo/vote", checkList)
.then((res) => {
if (res.code == 0) { if (res.code == 0) {
uni.showToast({title: '投票成功!'}) uni.showToast({ title: "投票成功!" });
setTimeout(function () { setTimeout(function () {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1,
}); });
}, 1000) }, 1000);
} }
}) });
}, },
checkClick(index, status) { checkClick(index, status) {
if (this.userList[index].voteStatus == status) { if (this.userList[index].voteStatus == status) {
this.userList[index].voteStatus = '' this.userList[index].voteStatus = "";
} else { } else {
this.userList[index].voteStatus = status this.userList[index].voteStatus = status;
} }
}, },
closeMask() { closeMask() {
this.showMask = false this.showMask = false;
}, },
viewMask() { viewMask() {
this.showMask = true this.showMask = true;
}, },
getDetailInfo() { getDetailInfo() {
this.$instance.post(`/app/appgeneralelectioninfo/queryDetailById?id=${this.detailId}`, null).then(res => { this.$instance
.post(
`/app/appgeneralelectioninfo/queryDetailById?id=${this.detailId}`,
null
)
.then((res) => {
if (res.data) { if (res.data) {
this.votingInstructions = res.data.votingInstructions this.votingInstructions = res.data.votingInstructions;
this.chooseNumber = res.data.chooseNumber this.chooseNumber = res.data.chooseNumber;
this.title = res.data.title this.title = res.data.title;
res.data.candidateUsers.map((item) => { res.data.candidateUsers.map((item) => {
var info = { var info = {
"candidateUserId": item.id, candidateUserId: item.id,
"candidateUserName": item.name, candidateUserName: item.name,
"electionId": this.detailId, electionId: this.detailId,
"voteStatus": '', voteStatus: "",
"voterUserId": this.partyId, voterUserId: this.partyId,
} };
this.userList.push(info) this.userList.push(info);
}) });
} }
}); });
}, },
@@ -145,12 +182,11 @@ export default {
}; };
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.page { .page {
.line-bg { .line-bg {
width: 100%; width: 100%;
height: 12px; height: 12px;
background-color: #E60012; background-color: #e60012;
} }
.banner-top { .banner-top {
@@ -173,7 +209,7 @@ export default {
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
z-index: 88; z-index: 88;
top: 116px; top: 137px;
.tips-icon { .tips-icon {
width: 40px; width: 40px;
@@ -202,15 +238,20 @@ export default {
color: #fff; color: #fff;
padding-bottom: 136px; padding-bottom: 136px;
.title { .title {
width: 100%; width: 100%;
font-size: 44px; font-size: 44px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
line-height: 60px;
text-align: center; text-align: center;
padding: 12px 0 40px 0; 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 { .num-info {
@@ -272,7 +313,7 @@ export default {
.btn { .btn {
width: 100%; width: 100%;
line-height: 112px; line-height: 112px;
background: #E60012; background: #e60012;
color: #fff; color: #fff;
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
@@ -285,7 +326,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, 0.3);
z-index: 99; z-index: 99;
.mask-content { .mask-content {
@@ -323,7 +364,7 @@ export default {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #1365DD; color: #1365dd;
line-height: 40px; line-height: 40px;
margin: 60px 0 20px 332px; margin: 60px 0 20px 332px;
text-align: center; text-align: center;