You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
3.6 KiB
196 lines
3.6 KiB
<template>
|
|
<view class="content">
|
|
<topInfo :detailInfo="detailInfo"/>
|
|
<view class="padding">
|
|
<view class="ul" >
|
|
<view class="li2 flex-b" v-for="(item,index) in detailInfo.voteResults" :key="index" :class="{active: item.voted}">
|
|
<view class="proccess" :style="{width: item.itemVoteProportion}"></view>
|
|
<view class="leftTxt flex">
|
|
<u-icon name="checkbox-mark" color="#DE3A26" size="20" v-if="item.voted"></u-icon>
|
|
<view class="name">{{ item.itemName }}</view>
|
|
</view>
|
|
<view class="rightTxt">{{ item.itemVoteNum }} <text>( {{item.itemVoteProportion}} )</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="novote" v-if="!detailInfo.voteResults?.length">暂无人员参与投票~</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref } from 'vue'
|
|
import { voteResult, } from '@/config/api.js'
|
|
import topInfo from './comp/topInfo.vue'
|
|
import { onLoad, onPullDownRefresh,} from '@dcloudio/uni-app'
|
|
|
|
|
|
let voteId = ''
|
|
|
|
const isCheck = ref(false)
|
|
function changeRadio(val) {
|
|
isCheck.value = val
|
|
}
|
|
|
|
const detailInfo = ref({})
|
|
async function voteResultFn() {
|
|
const {data: res} = await voteResult({voteId: voteId})
|
|
console.log(res)
|
|
detailInfo.value = res
|
|
}
|
|
|
|
onLoad((option)=>{
|
|
voteId = option.voteId
|
|
voteResultFn()
|
|
})
|
|
|
|
onPullDownRefresh(async()=>{
|
|
await voteResultFn()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.novote {
|
|
font-size: 28rpx;
|
|
color: #9C9C9C;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
.bg {
|
|
width: 100%;
|
|
background: linear-gradient(0deg, #ffffff 0%, #FFD4D3 100%);
|
|
padding: 120rpx 20rpx 20rpx 20rpx;
|
|
.tit {
|
|
font-size: 36rpx;
|
|
padding: 10rpx 0 20rpx 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.textCon {
|
|
display: flex;
|
|
.p {
|
|
font-size: 24rpx;
|
|
color: #9C9C9C;
|
|
flex: 1;
|
|
width: 0;
|
|
.txt {
|
|
margin-bottom: 14rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.status {
|
|
width: 110rpx;
|
|
font-size: 22rpx;
|
|
height: 44rpx;
|
|
background: #DE3A26;
|
|
border-radius: 22rpx;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row {
|
|
height: 90rpx;
|
|
margin-bottom: 40rpx;
|
|
border-bottom: 1px solid #EFEFEF;
|
|
.flex {
|
|
flex: 1;
|
|
width: 0;
|
|
.radionItem {
|
|
font-size: 28rpx;
|
|
margin-right: 30rpx;
|
|
color: $themC;
|
|
&.hui {
|
|
color: #9C9C9C;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkboxs {
|
|
font-size: 28rpx;
|
|
color: $themC;
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
width: 100%;
|
|
.li {
|
|
height: 84rpx;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #CCCCCC;
|
|
line-height: 84rpx;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
&.active {
|
|
background: #FFD3D3;
|
|
border-radius: 10rpx;
|
|
color: $themC;
|
|
border: 1px solid #DE3A26;
|
|
}
|
|
}
|
|
|
|
.li2 {
|
|
position: relative;
|
|
height: 84rpx;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #CCCCCC;
|
|
line-height: 84rpx;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
&.active {
|
|
border-radius: 10rpx;
|
|
color: $themC;
|
|
.proccess {
|
|
background: #FFD3D3;
|
|
}
|
|
|
|
}
|
|
.proccess {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #EFEFEF;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
}
|
|
.leftTxt {
|
|
position: relative;
|
|
z-index: 9;
|
|
.name {
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
|
|
.rightTxt {
|
|
color: #9C9C9C;
|
|
position: relative;
|
|
z-index: 9;
|
|
text {
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.btn {
|
|
padding-top: 50rpx;
|
|
|
|
}
|
|
}
|
|
</style>
|