2 changed files with 328 additions and 322 deletions
@ -1,353 +1,359 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => { |
const doSearch = (_formData : { page : number; limit : number }, onSuccess : Function) => { |
||||
// const submitData = { ...formData } |
// const submitData = { ...formData } |
||||
// listApi(submitData, userStore.useType).then((res) => { |
// listApi(submitData, userStore.useType).then((res) => { |
||||
// const { data } = res as { data: { data: any; total: number } } |
// const { data } = res as { data: { data: any; total: number } } |
||||
// onSuccess({ data }) |
// onSuccess({ data }) |
||||
// }) |
// }) |
||||
onSuccess({ |
onSuccess({ |
||||
data: { |
data: { |
||||
data: [ |
data: [ |
||||
{ |
{ |
||||
id: 1, |
id: 1, |
||||
img: '/static/img/grxx.png', |
img: '/static/img/grxx.png', |
||||
name: '陈志远', |
name: '陈志远', |
||||
class: '现任财务总监', |
class: '现任财务总监', |
||||
yijian: '' |
yijian: '' |
||||
}, |
}, |
||||
{ |
{ |
||||
id: 2, |
id: 2, |
||||
img: '/static/img/grxx.png', |
img: '/static/img/grxx.png', |
||||
name: '陈志远', |
name: '陈志远', |
||||
class: '现任财务总监', |
class: '现任财务总监', |
||||
yijian: '' |
yijian: '' |
||||
}, |
}, |
||||
{ |
{ |
||||
id: 3, |
id: 3, |
||||
img: '/static/img/grxx.png', |
img: '/static/img/grxx.png', |
||||
name: '陈志远', |
name: '陈志远', |
||||
class: '现任财务总监', |
class: '现任财务总监', |
||||
yijian: '' |
yijian: '' |
||||
}, |
}, |
||||
{ |
{ |
||||
id: 4, |
id: 4, |
||||
img: '/static/img/grxx.png', |
img: '/static/img/grxx.png', |
||||
name: '陈志远', |
name: '陈志远', |
||||
class: '现任财务总监', |
class: '现任财务总监', |
||||
yijian: '' |
yijian: '' |
||||
}, |
}, |
||||
{ |
{ |
||||
id: 5, |
id: 5, |
||||
img: '/static/img/grxx.png', |
img: '/static/img/grxx.png', |
||||
name: '陈志远', |
name: '陈志远', |
||||
class: '现任财务总监', |
class: '现任财务总监', |
||||
yijian: '' |
yijian: '' |
||||
} |
} |
||||
], |
], |
||||
total: 0 |
total: 0 |
||||
} |
} |
||||
}) |
}) |
||||
} |
} |
||||
|
|
||||
const selectIndex = ref(0) |
const selectIndex = ref(0) |
||||
const buttlist = ref([ |
const buttlist = ref([ |
||||
{ |
{ |
||||
type: 'agree', |
type: 'agree', |
||||
butname: '同意' |
butname: '同意' |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'disagree', |
type: 'disagree', |
||||
butname: '反对' |
butname: '反对' |
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'neutral', |
type: 'neutral', |
||||
butname: '弃权' |
butname: '弃权' |
||||
} |
} |
||||
]) |
]) |
||||
|
|
||||
const selectBut = (data: any, cardid: any,type: string) => { |
const selectBut = (data : any, cardid : any, type : string, butname: string) => { |
||||
const target = data.find((card: { id: any; }) => card.id === cardid); |
const target = data.find((card : { id : any; }) => card.id === cardid); |
||||
if (target) { |
uni.showModal({ |
||||
target.yijian = target.yijian === type ? null : type; |
title: '您本轮选举投' + butname + '票', |
||||
} |
content: '确定吗?', |
||||
} |
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
if (target) { |
||||
|
target.yijian = target.yijian === type ? null : type; |
||||
|
} |
||||
|
} else if (res.cancel) { |
||||
|
console.log('用户点击取消'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<!-- 你的页面内容 --> |
<!-- 你的页面内容 --> |
||||
<view class="box"> |
<view class="box"> |
||||
<view class="headpart"> |
<view class="headpart"> |
||||
<view class="title">2024年度董事会成员选举</view> |
<view class="title">2024年度董事会成员选举</view> |
||||
<view class="time">投票开始时间:2024年3月15日 18:00</view> |
<view class="time">投票开始时间:2024年3月15日 18:00</view> |
||||
<view class="time">投票截止时间:2024年3月15日 18:00</view> |
<view class="time">投票截止时间:2024年3月15日 18:00</view> |
||||
</view> |
</view> |
||||
<ex-list ref="reListRef" custom-list-type="custom" :on-form-search="doSearch"> |
<ex-list ref="reListRef" custom-list-type="custom" :on-form-search="doSearch"> |
||||
<template v-slot="{ data }"> |
<template v-slot="{ data }"> |
||||
<view class="tppart"> |
<view class="tppart"> |
||||
<view class="tpone" v-for="(row, index) of data" :key="'tpone' + index"> |
<view class="tpone" v-for="(row, index) of data" :key="'tpone' + index"> |
||||
<view class="topp"> |
<view class="topp"> |
||||
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.img" alt="" /> |
<img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.img" alt="" /> |
||||
<view class="rightpart"> |
<view class="rightpart"> |
||||
<view class="name"> |
<view class="name"> |
||||
{{ row.name }} |
{{ row.name }} |
||||
</view> |
</view> |
||||
<view class="class"> |
<view class="class"> |
||||
{{ row.class }} |
{{ row.class }} |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="bottomp"> |
<view class="bottomp"> |
||||
<view |
<view class="minbut" v-for="(item, ele) in buttlist" :key="ele" |
||||
class="minbut" |
@click="selectBut(data,row.id,item.type,item.butname)" :class="{ active: row.yijian === item.type }"> |
||||
v-for="(item, ele) in buttlist" |
{{ item.butname }} |
||||
:key="ele" |
</view> |
||||
@click="selectBut(data,row.id,item.type)" |
</view> |
||||
:class="{ active: row.yijian === item.type }" |
</view> |
||||
> |
</view> |
||||
{{ item.butname }} |
</template> |
||||
</view> |
</ex-list> |
||||
</view> |
<view class="bottbutton"> |
||||
</view> |
<view class="qbty">全部同意</view> |
||||
</view> |
<view class="tjtp">提交投票</view> |
||||
</template> |
</view> |
||||
</ex-list> |
</view> |
||||
<view class="bottbutton"> |
|
||||
<view class="qbty">全部同意</view> |
|
||||
<view class="tjtp">提交投票</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.box { |
.box { |
||||
width: 100%; |
width: 100%; |
||||
background-color: #f9fafb; |
background-color: #f9fafb; |
||||
|
|
||||
.headpart { |
.headpart { |
||||
width: 92%; |
width: 92%; |
||||
height: 194rpx; |
height: 194rpx; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background-color: #eff6ff; |
background-color: #eff6ff; |
||||
margin: 32rpx auto; |
margin: 32rpx auto; |
||||
padding: 20rpx 3%; |
padding: 20rpx 3%; |
||||
|
|
||||
.title { |
.title { |
||||
color: #2563eb; |
color: #2563eb; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
margin-top: 16rpx; |
margin-top: 16rpx; |
||||
} |
} |
||||
|
|
||||
.time { |
.time { |
||||
margin-top: 16rpx; |
margin-top: 16rpx; |
||||
color: #4b5563; |
color: #4b5563; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.tppart { |
.tppart { |
||||
width: 100%; |
width: 100%; |
||||
max-height: 69vh; |
max-height: 69vh; |
||||
overflow-y: auto; |
overflow-y: auto; |
||||
display: grid; |
display: grid; |
||||
justify-items: center; |
justify-items: center; |
||||
|
|
||||
.tpone { |
.tpone { |
||||
width: 91%; |
width: 91%; |
||||
height: 264rpx; |
height: 264rpx; |
||||
padding: 20rpx 4%; |
padding: 20rpx 4%; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border: 2rpx solid #f3f4f6; |
border: 2rpx solid #f3f4f6; |
||||
box-shadow: |
box-shadow: |
||||
0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), |
0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), |
||||
0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1); |
0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1); |
||||
margin-top: 32rpx; |
margin-top: 32rpx; |
||||
display: grid; |
display: grid; |
||||
|
|
||||
.topp { |
.topp { |
||||
display: flex; |
display: flex; |
||||
|
|
||||
.rightpart { |
.rightpart { |
||||
margin-left: 32rpx; |
margin-left: 32rpx; |
||||
display: grid; |
display: grid; |
||||
justify-items: left; |
justify-items: left; |
||||
align-content: baseline; |
align-content: baseline; |
||||
|
|
||||
.name { |
.name { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #000000; |
color: #000000; |
||||
margin-top: 7rpx; |
margin-top: 7rpx; |
||||
} |
} |
||||
|
|
||||
.class { |
.class { |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #6b7280; |
color: #6b7280; |
||||
margin-top: 7rpx; |
margin-top: 7rpx; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottomp { |
.bottomp { |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
|
|
||||
.minbut { |
.minbut { |
||||
flex: 1; |
flex: 1; |
||||
width: 190rpx; |
width: 190rpx; |
||||
height: 76rpx; |
height: 76rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 16rpx 32rpx; |
padding: 16rpx 32rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
align-content: flex-start; |
align-content: flex-start; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #ffffff; |
background: #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border: 2rpx solid #d1d5db; |
border: 2rpx solid #d1d5db; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: normal; |
font-weight: normal; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #4b5563; |
color: #4b5563; |
||||
} |
} |
||||
|
|
||||
.minbut.active { |
.minbut.active { |
||||
border: 2rpx solid #2563eb; |
border: 2rpx solid #2563eb; |
||||
color: #2563eb; |
color: #2563eb; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.tpone:first-child { |
.tpone:first-child { |
||||
margin-top: 0; |
margin-top: 0; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.bottbutton { |
.bottbutton { |
||||
width: 100%; |
width: 100%; |
||||
height: 10vh; |
height: 10vh; |
||||
display: flex; |
display: flex; |
||||
padding: 24rpx 32rpx; |
padding: 24rpx 32rpx; |
||||
gap: 0rpx 24rpx; |
gap: 0rpx 24rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
align-content: flex-start; |
align-content: flex-start; |
||||
background: #ffffff; |
background: #ffffff; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
border-width: 2rpx 0rpx 0rpx 0rpx; |
border-width: 2rpx 0rpx 0rpx 0rpx; |
||||
border-style: solid; |
border-style: solid; |
||||
border-color: #f3f4f6; |
border-color: #f3f4f6; |
||||
position: fixed; |
position: fixed; |
||||
bottom: 0; |
bottom: 0; |
||||
|
|
||||
.qbty { |
.qbty { |
||||
width: 331rpx; |
width: 331rpx; |
||||
height: 90rpx; |
height: 90rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 24rpx 0rpx; |
padding: 24rpx 0rpx; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #eff6ff; |
background: #eff6ff; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #2563eb; |
color: #2563eb; |
||||
} |
} |
||||
|
|
||||
.tjtp { |
.tjtp { |
||||
width: 331rpx; |
width: 331rpx; |
||||
height: 90rpx; |
height: 90rpx; |
||||
/* 自动布局 */ |
/* 自动布局 */ |
||||
display: flex; |
display: flex; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 24rpx 0rpx; |
padding: 24rpx 0rpx; |
||||
gap: 0rpx 20rpx; |
gap: 0rpx 20rpx; |
||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: #2563eb; |
background: #2563eb; |
||||
font-family: Roboto; |
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
line-height: 42rpx; |
line-height: 42rpx; |
||||
text-align: center; |
text-align: center; |
||||
letter-spacing: normal; |
letter-spacing: normal; |
||||
color: #ffffff; |
color: #ffffff; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.address-items { |
.address-items { |
||||
padding: 20rpx 15rpx 32rpx 28rpx; |
padding: 20rpx 15rpx 32rpx 28rpx; |
||||
background-color: #fff; |
background-color: #fff; |
||||
border-bottom: 2rpx solid #f5f5f5; |
border-bottom: 2rpx solid #f5f5f5; |
||||
|
|
||||
.left { |
.left { |
||||
flex: 1; |
flex: 1; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.name { |
.name { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 700; |
font-weight: 700; |
||||
color: #101010; |
color: #101010; |
||||
line-height: 40rpx; |
line-height: 40rpx; |
||||
margin-right: 16rpx; |
margin-right: 16rpx; |
||||
} |
} |
||||
|
|
||||
.isdefault { |
.isdefault { |
||||
font-size: 20rpx; |
font-size: 20rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #fff; |
color: #fff; |
||||
padding: 4rpx 12rpx; |
padding: 4rpx 12rpx; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
||||
} |
} |
||||
|
|
||||
.info { |
.info { |
||||
width: 100%; |
width: 100%; |
||||
color: #666; |
color: #666; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
margin-top: 12rpx; |
margin-top: 12rpx; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.right { |
.right { |
||||
width: 140rpx; |
width: 140rpx; |
||||
padding-left: 32rpx; |
padding-left: 32rpx; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
color: #4979ff; |
color: #4979ff; |
||||
text-align: right; |
text-align: right; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.buts { |
.buts { |
||||
width: 100%; |
width: 100%; |
||||
height: 10vh; |
height: 10vh; |
||||
background-color: F3F4F6; |
background-color: F3F4F6; |
||||
position: fixed; |
position: fixed; |
||||
bottom: 0; |
bottom: 0; |
||||
border-top: 2rpx solid #ebebec; |
border-top: 2rpx solid #ebebec; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue