331 lines
9.4 KiB
Vue
331 lines
9.4 KiB
Vue
<template>
|
||
<div v-if="!loaded">
|
||
<v-dialog
|
||
v-model="lock"
|
||
persistent
|
||
width="300"
|
||
>
|
||
<v-card
|
||
color="primary"
|
||
dark
|
||
>
|
||
<v-card-text>
|
||
<p class="pt-4">数据加载中，请稍后</p>
|
||
<v-progress-linear
|
||
indeterminate
|
||
color="white"
|
||
class="mb-0"
|
||
></v-progress-linear>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<v-container class="mian" v-else>
|
||
<!-- 已投票提示信息 -->
|
||
<div class="mian-shoeToast" v-if="lock">
|
||
<div class="mian-shoeToast-icon">
|
||
<v-icon color="#1f3c84" size="58">{{ message.icon }}</v-icon>
|
||
</div>
|
||
<div class="mian-shoeToast-title">{{ message.msg }}</div>
|
||
<div class="mian-shoeToast-content">{{ message.tips }}</div>
|
||
<div class="mian-shoeToast-btn" @click="jump('Index')">返回主页</div>
|
||
</div>
|
||
<!-- 投票列表 -->
|
||
<div v-else>
|
||
<v-dialog
|
||
v-model="loading"
|
||
persistent
|
||
width="300"
|
||
>
|
||
<v-card
|
||
color="primary"
|
||
dark
|
||
>
|
||
<v-card-text>
|
||
<p class="pt-4">数据提交中，请稍后</p>
|
||
<v-progress-linear
|
||
indeterminate
|
||
color="white"
|
||
class="mb-0"
|
||
></v-progress-linear>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-dialog>
|
||
|
||
<div class="list">
|
||
<div class="vote-title">
|
||
中国狮子联会哈尔滨心连心服务队
|
||
</div>
|
||
<div style="color: #ffffff">
|
||
2020-2021年度
|
||
</div>
|
||
<div class="vote-title">{{ info.title }}</div>
|
||
|
||
<div class="list-card" v-for="(item, index) in list" :key="index">
|
||
<v-img
|
||
:src="item.cover"
|
||
width="110"
|
||
height="160"
|
||
position="top center"
|
||
style="position: absolute"
|
||
>
|
||
</v-img>
|
||
<div class="list-card-content">
|
||
<div class="list-card-content-name">{{ item.name }}</div>
|
||
<div class="list-card-content-item"><label>参选职务:</label>{{ item.desc }}</div>
|
||
<!-- <div class="list-card-content-item"><label>服务队:</label>{{ item.desc2 }}</div>-->
|
||
<!-- :disabled="tomax && !(item.id in selected)"-->
|
||
|
||
<v-checkbox
|
||
v-model="selected"
|
||
:value="item.id"
|
||
class="radioGroup"
|
||
:disabled="tomax && !inArray(item.id)"
|
||
>
|
||
<template v-slot:label>
|
||
<div class="list-radio-text">赞成</div>
|
||
</template>
|
||
</v-checkbox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<v-dialog v-model="sure" persistent>
|
||
<v-card>
|
||
<v-card-title>确认提交</v-card-title>
|
||
<!-- <v-card-text>-->
|
||
<!-- 确认您选择无误，立即提交么？-->
|
||
<!-- </v-card-text>-->
|
||
<v-card-actions>
|
||
<v-btn color="primary" text @click="sure=false">我再想想</v-btn>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="primary" @click="submitForm">确认提交</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
<div class="list-footer">
|
||
<div class="list-footer-text">最多可选{{ info.max }}项，您已经选择{{ selected.length }}项</div>
|
||
<v-btn
|
||
class="list-footer-btn"
|
||
:disabled="disable"
|
||
@click="sure = true"
|
||
>
|
||
提交推举票
|
||
</v-btn>
|
||
</div>
|
||
</div>
|
||
</v-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
loaded: false,
|
||
id: 0,
|
||
info: [],
|
||
list: [],
|
||
submitData: [],
|
||
lock: true,
|
||
selected: [],
|
||
disable: true,
|
||
loading: false,
|
||
message: '',
|
||
tomax: false,
|
||
sure: false
|
||
}
|
||
},
|
||
watch: {
|
||
selected: function () {
|
||
if (this.selected.length >= this.info.max) {
|
||
this.tomax = true
|
||
} else {
|
||
this.tomax = false
|
||
}
|
||
if (this.selected.length > 0 && this.selected.length <= this.info.max) {
|
||
this.disable = false;
|
||
} else {
|
||
this.disable = true;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.id = this.$route.params.id;
|
||
this.$api.vote.show(this.id).then(result => {
|
||
this.lock = result.lock
|
||
this.info = result.info
|
||
this.list = result.list
|
||
this.loaded = true
|
||
})
|
||
},
|
||
methods: {
|
||
inArray: function (id) {
|
||
for (let i in this.selected) {
|
||
if (this.selected[i] == id) {
|
||
return true
|
||
}
|
||
}
|
||
return false
|
||
},
|
||
submitForm: function (e) {
|
||
e.preventDefault()
|
||
this.loading = true
|
||
this.$api.vote.submit(this.id, this.selected).then((res) => {
|
||
this.message = res
|
||
this.loading = false
|
||
this.lock = true
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.vote-title {
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
color: white;
|
||
padding-top: 20px;
|
||
text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
|
||
}
|
||
|
||
.mian {
|
||
min-height: 100vh;
|
||
width: 100vw;
|
||
background-color: #1f3c84;
|
||
background-image: url("../../assets/back_1.png");
|
||
background-position: top center;
|
||
background-size: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 提示信息 */
|
||
.mian-shoeToast {
|
||
margin-top: 10vh;
|
||
margin-left: 30px;
|
||
height: 80vh;
|
||
width: calc(100vw - 60px);
|
||
background: white;
|
||
border-radius: 6px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-pack: center;
|
||
padding: 30px 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mian-shoeToast-icon {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.mian-shoeToast-title {
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #1f3c84;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.mian-shoeToast-content {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mian-shoeToast-btn {
|
||
height: 45px;
|
||
background: #1f3c84;
|
||
color: white;
|
||
line-height: 45px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
/* 列表 */
|
||
.list-header b {
|
||
color: #1f3c84;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.list-footer {
|
||
background: #1f3c84;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 15px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.list-footer-text {
|
||
text-align: center;
|
||
color: white;
|
||
line-height: 20px;
|
||
padding-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list-footer-btn {
|
||
font-size: 1rem;
|
||
height: 45px !important;
|
||
line-height: 45px;
|
||
width: 100%;
|
||
background: white;
|
||
color: #1f3c84;
|
||
border-radius: 6px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.list {
|
||
padding: 0px 15px 110px;
|
||
}
|
||
|
||
.list-card {
|
||
background: white;
|
||
margin-top: 15px;
|
||
border-radius: 6px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
position: relative;
|
||
min-height: 180px;
|
||
}
|
||
|
||
.list-card-content {
|
||
margin-left: 130px;
|
||
height: 160px;
|
||
position: relative;
|
||
}
|
||
|
||
.radioGroup {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -20px;
|
||
}
|
||
|
||
.list-card-content-name {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #1f3c84;
|
||
}
|
||
|
||
.list-card-content-item {
|
||
padding-top: 5px;
|
||
font-size: 14px;
|
||
position: relative;
|
||
padding-left: 80px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.list-card-content-item label {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 5px;
|
||
color: gray;
|
||
}
|
||
|
||
.list-radio-text {
|
||
font-size: 14px;
|
||
}
|
||
</style> |