15 changed files with 2902 additions and 13053 deletions
File diff suppressed because it is too large
@ -1,247 +1,368 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { |
import { onShow } from '@dcloudio/uni-app'; |
||||
onMounted, |
import { log } from 'console'; |
||||
ref |
import { |
||||
} from 'vue'; |
onMounted, |
||||
|
ref |
||||
const tpList = ref([ |
} from 'vue'; |
||||
{ |
import PullToRefresh from '@/components/PullToRefresh.vue'; |
||||
img: '/static/img/grxx.png', |
|
||||
name: '陈志远', |
const tpList = ref([ |
||||
class: '现任财务总监', |
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
} |
||||
|
]) |
||||
|
|
||||
|
const doSearch = (_formData : { page : number; limit : number }, onSuccess : Function) => { |
||||
|
// const submitData = { ...formData } |
||||
|
// listApi(submitData, userStore.useType).then((res) => { |
||||
|
// const { data } = res as { data: { data: any; total: number } } |
||||
|
// onSuccess({ data }) |
||||
|
// }) |
||||
|
onSuccess({ |
||||
|
data: { |
||||
|
data: [ |
||||
|
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
}, |
||||
|
{ |
||||
|
img: '/static/img/grxx.png', |
||||
|
name: '陈志远', |
||||
|
class: '现任财务总监', |
||||
|
} |
||||
|
], |
||||
|
total: 0 |
||||
|
} |
||||
|
}) |
||||
} |
} |
||||
]) |
|
||||
|
const selectIndex = ref(0) |
||||
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => { |
const buttlist = ref([ |
||||
// const submitData = { ...formData } |
{ |
||||
// listApi(submitData, userStore.useType).then((res) => { |
butname: '同意' |
||||
// const { data } = res as { data: { data: any; total: number } } |
}, |
||||
// onSuccess({ data }) |
{ |
||||
// }) |
butname: '反对' |
||||
onSuccess({ |
}, |
||||
data: { |
{ |
||||
data: [ |
butname: '弃权' |
||||
{ |
|
||||
id: 1, |
|
||||
name: '测试一', |
|
||||
phone: '17612341234', |
|
||||
address: '测试地址', |
|
||||
region_desc: '测试地址测试地址测试地址测试地址', |
|
||||
is_default: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
name: '测试一', |
|
||||
phone: '17612341234', |
|
||||
address: '测试地址', |
|
||||
region_desc: '测试地址测试地址测试地址测试地址' |
|
||||
}, |
|
||||
{ |
|
||||
id: 3, |
|
||||
name: '测试一', |
|
||||
phone: '17612341234', |
|
||||
address: '测试地址', |
|
||||
region_desc: '测试地址测试地址测试地址测试地址' |
|
||||
}, |
|
||||
{ |
|
||||
id: 4, |
|
||||
name: '测试一', |
|
||||
phone: '17612341234', |
|
||||
address: '测试地址', |
|
||||
region_desc: '测试地址测试地址测试地址测试地址' |
|
||||
} |
|
||||
], |
|
||||
total: 0 |
|
||||
} |
} |
||||
}) |
]) |
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<template> |
const selectBut = (index : number) => { |
||||
<view class="box"> |
selectIndex.value = index |
||||
<ex-header :leftShow="false" backgroundColor="#2563EB" textColor="#fff" title="地址管理" /> |
} |
||||
|
|
||||
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="暂无收货地址~" |
const loadData = async () => { |
||||
customListType="custom"> |
// 模拟异步请求 |
||||
<template v-slot="{ data }"> |
console.log(1111111111111) |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
<view class="headpart"> |
<template> |
||||
<view class="title"> |
<pull-to-refresh :on-refresh="loadData"> |
||||
2024年度董事会成员选举 |
<!-- 你的页面内容 --> |
||||
</view> |
<view class="box"> |
||||
<view class="time"> |
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="" |
||||
投票开始时间：2024年3月15日 18:00 |
customListType="custom"> |
||||
</view> |
<template v-slot="{ data }"> |
||||
<view class="time"> |
|
||||
投票截止时间：2024年3月15日 18:00 |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view v-for="(row, index) of data" class="address-items flex" @click.stop="onChoose(row)"> |
<view class="headpart"> |
||||
<view class="flex1 left"> |
<view class="title"> |
||||
<view class="flex-center-start"> |
2024年度董事会成员选举 |
||||
<text class="name">{{ row.name }}</text> |
|
||||
<text class="name">{{ row.phone }}</text> |
|
||||
<text v-if="row.is_default" class="isdefault">默认地址</text> |
|
||||
</view> |
</view> |
||||
<view class="info text-ellipsis">{{ row.region_desc }}{{ row.address }}</view> |
<view class="time"> |
||||
</view> |
投票开始时间：2024年3月15日 18:00 |
||||
<view class="flex column right"> |
|
||||
<text @click.stop="navto('pages/address/edit', { id: row.id, isadd: 0 })">编辑</text> |
|
||||
<text v-if="!row.is_default" style="margin-top: 14rpx" |
|
||||
@click.stop="setDefault(row, index)">设为默认</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
</ex-list> |
|
||||
</view> |
|
||||
<!-- <view class="box"> |
|
||||
<view class="main"> |
|
||||
<view class="headpart"> |
|
||||
<view class="title"> |
|
||||
2024年度董事会成员选举 |
|
||||
</view> |
|
||||
<view class="time"> |
|
||||
投票开始时间：2024年3月15日 18:00 |
|
||||
</view> |
|
||||
<view class="time"> |
|
||||
投票截止时间：2024年3月15日 18:00 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="tppart"> |
|
||||
<view class="tpone" v-for="(item, index) in tpList" :key="index"> |
|
||||
<img style="width: 96rpx;height: 96rpx; border-radius: 50%;" :src="item.img" alt="" /> |
|
||||
<view class="rightpart"> |
|
||||
<view class="name"> |
|
||||
{{ item.name }} |
|
||||
</view> |
</view> |
||||
<view class="class"> |
<view class="time"> |
||||
|
投票截止时间：2024年3月15日 18:00 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tppart"> |
||||
|
<view class="tpone" v-for="(row, index) of data" :key="index"> |
||||
|
<view class="topp"> |
||||
|
<img style="width: 96rpx;height: 96rpx; border-radius: 50%;" :src="row.img" alt="" /> |
||||
|
<view class="rightpart"> |
||||
|
<view class="name"> |
||||
|
{{ row.name }} |
||||
|
</view> |
||||
|
<view class="class"> |
||||
|
{{ row.class }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bottomp"> |
||||
|
<view class="minbut" v-for="(item,index) in buttlist" :key="index" |
||||
|
@click="selectBut(index)" :class="{active: selectIndex === index}"> |
||||
|
{{item.butname}} |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
</template> |
||||
|
</ex-list> |
||||
|
<view class="bottbutton"> |
||||
|
<view class="qbty"> |
||||
|
全部同意 |
||||
|
</view> |
||||
|
<view class="tjtp"> |
||||
|
提交投票 |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
<view class="buts"> |
</pull-to-refresh> |
||||
|
|
||||
</view> |
|
||||
</view> --> |
|
||||
</template> |
</template> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.box { |
.box { |
||||
width: 100%; |
width: 100%; |
||||
min-height: 100vh; |
height: 100vh; |
||||
background-color: #F9FAFB; |
background-color: #F9FAFB; |
||||
|
|
||||
.headpart { |
|
||||
width: 86%; |
|
||||
height: 194rpx; |
|
||||
border-radius: 24rpx; |
|
||||
background-color: #EFF6FF; |
|
||||
margin: 32rpx auto; |
|
||||
padding: 20rpx 3%; |
|
||||
|
|
||||
.title { |
|
||||
color: #2563EB; |
|
||||
font-size: 28rpx; |
|
||||
margin-top: 16rpx; |
|
||||
} |
|
||||
|
|
||||
.time { |
.headpart { |
||||
margin-top: 16rpx; |
width: 86%; |
||||
color: #4B5563; |
height: 194rpx; |
||||
font-size: 28rpx; |
border-radius: 24rpx; |
||||
} |
background-color: #EFF6FF; |
||||
} |
margin: 32rpx auto; |
||||
|
padding: 20rpx 3%; |
||||
|
|
||||
.main { |
|
||||
width: 100%; |
|
||||
height: 90vh; |
|
||||
display: grid; |
|
||||
justify-items: center; |
|
||||
align-content: start; |
|
||||
|
|
||||
|
.title { |
||||
|
color: #2563EB; |
||||
|
font-size: 28rpx; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
margin-top: 16rpx; |
||||
|
color: #4B5563; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
.tppart { |
.tppart { |
||||
margin-top: 32rpx; |
|
||||
width: 100%; |
width: 100%; |
||||
max-height: 60vh; |
max-height: 69vh; |
||||
overflow-y: auto; |
overflow-y: auto; |
||||
display: grid; |
display: grid; |
||||
justify-items: center; |
justify-items: center; |
||||
|
|
||||
.tpone { |
.tpone { |
||||
width: 84%; |
width: 91%; |
||||
height: 264rpx; |
height: 264rpx; |
||||
padding: 20rpx 4%; |
padding: 20rpx 4%; |
||||
|
box-sizing: border-box; |
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
background-color: #FFFFFF; |
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
border: 2rpx solid #F3F4F6; |
border: 2rpx solid #F3F4F6; |
||||
box-shadow: 5rpx 5rpx 3rpx 0 rgba(212, 212, 212, 0.7); |
box-shadow: 0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1); |
||||
|
margin-top: 32rpx; |
||||
|
display: grid; |
||||
|
|
||||
|
.topp { |
||||
|
display: flex; |
||||
|
|
||||
.rightpart { |
.rightpart { |
||||
margin-left: 40rpx; |
margin-left: 32rpx; |
||||
|
display: grid; |
||||
|
justify-items: left; |
||||
|
align-content: baseline; |
||||
|
|
||||
.name {} |
.name { |
||||
|
font-family: Roboto; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 42rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #000000; |
||||
|
margin-top: 7rpx; |
||||
|
} |
||||
|
|
||||
|
.class { |
||||
|
font-family: Roboto; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 40rpx; |
||||
|
letter-spacing: normal; |
||||
|
color: #6B7280; |
||||
|
margin-top: 7rpx; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
|
.bottomp { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 0rpx 20rpx; |
||||
|
|
||||
|
.minbut { |
||||
|
flex: 1; |
||||
|
width: 190rpx; |
||||
|
height: 76rpx; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 16rpx 32rpx; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: flex-start; |
||||
|
border-radius: 8rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
border: 2rpx solid #D1D5DB; |
||||
|
font-family: Roboto; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 40rpx; |
||||
|
text-align: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #4B5563; |
||||
|
} |
||||
|
|
||||
|
.minbut.active { |
||||
|
border: 2rpx solid #2563EB; |
||||
|
color: #2563EB; |
||||
|
} |
||||
|
} |
||||
|
|
||||
} |
} |
||||
} |
|
||||
} |
|
||||
|
|
||||
.address-items { |
.tpone:first-child { |
||||
padding: 20rpx 15rpx 32rpx 28rpx; |
margin-top: 0; |
||||
background-color: #fff; |
} |
||||
border-bottom: 2rpx solid #f5f5f5; |
} |
||||
|
|
||||
.left { |
.bottbutton { |
||||
flex: 1; |
width: 100%; |
||||
overflow: hidden; |
height: 10vh; |
||||
|
display: flex; |
||||
|
padding: 24rpx 32rpx; |
||||
|
gap: 0rpx 24rpx; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: flex-start; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
border-width: 2rpx 0rpx 0rpx 0rpx; |
||||
|
border-style: solid; |
||||
|
border-color: #F3F4F6; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
|
||||
.name { |
.qbty { |
||||
|
width: 331rpx; |
||||
|
height: 90rpx; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
box-sizing: border-box; |
||||
|
justify-content: center; |
||||
|
padding: 24rpx 0rpx; |
||||
|
gap: 0rpx 20rpx; |
||||
|
flex-wrap: wrap; |
||||
|
border-radius: 8rpx; |
||||
|
background: #EFF6FF; |
||||
|
font-family: Roboto; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 700; |
font-weight: 500; |
||||
color: #101010; |
line-height: 42rpx; |
||||
line-height: 40rpx; |
text-align: center; |
||||
margin-right: 16rpx; |
letter-spacing: normal; |
||||
|
color: #2563EB; |
||||
} |
} |
||||
|
|
||||
.isdefault { |
.tjtp { |
||||
font-size: 20rpx; |
width: 331rpx; |
||||
font-weight: 400; |
height: 90rpx; |
||||
color: #fff; |
/* 自动布局 */ |
||||
padding: 4rpx 12rpx; |
display: flex; |
||||
|
box-sizing: border-box; |
||||
|
justify-content: center; |
||||
|
padding: 24rpx 0rpx; |
||||
|
gap: 0rpx 20rpx; |
||||
|
flex-wrap: wrap; |
||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
background: #2563EB; |
||||
|
font-family: Roboto; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 42rpx; |
||||
|
text-align: center; |
||||
|
letter-spacing: normal; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.address-items { |
||||
|
padding: 20rpx 15rpx 32rpx 28rpx; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 2rpx solid #f5f5f5; |
||||
|
|
||||
|
.left { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 700; |
||||
|
color: #101010; |
||||
|
line-height: 40rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.isdefault { |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 400; |
||||
|
color: #fff; |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 8rpx; |
||||
|
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
width: 100%; |
||||
|
color: #666; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 400; |
||||
|
margin-top: 12rpx; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
.info { |
.right { |
||||
width: 100%; |
width: 140rpx; |
||||
color: #666; |
padding-left: 32rpx; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
font-weight: 400; |
font-weight: 400; |
||||
margin-top: 12rpx; |
color: #4979ff; |
||||
|
text-align: right; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.right { |
.buts { |
||||
width: 140rpx; |
width: 100%; |
||||
padding-left: 32rpx; |
height: 10vh; |
||||
font-size: 24rpx; |
background-color: F3F4F6; |
||||
font-weight: 400; |
position: fixed; |
||||
color: #4979ff; |
bottom: 0; |
||||
text-align: right; |
border-top: 2rpx solid #ebebec; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.buts { |
|
||||
width: 100%; |
|
||||
height: 10vh; |
|
||||
background-color: F3F4F6; |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
border-top: 2rpx solid #ebebec; |
|
||||
} |
|
||||
} |
|
||||
</style> |
</style> |
||||
@ -0,0 +1,56 @@ |
|||||
|
<!-- components/PullToRefresh.vue --> |
||||
|
<template> |
||||
|
<scroll-view |
||||
|
scroll-y |
||||
|
:refresher-enabled="true" |
||||
|
:refresher-triggered="isRefreshing" |
||||
|
@refresherrefresh="handleRefresh" |
||||
|
class="scroll-view" |
||||
|
> |
||||
|
<!-- 下拉刷新提示区域 --> |
||||
|
<view v-if="isRefreshing" class="refresh-loading"> |
||||
|
<text>加载中...</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 内容插槽 --> |
||||
|
<slot /> |
||||
|
</scroll-view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
onRefresh: { |
||||
|
type: Function, |
||||
|
required: true |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const isRefreshing = ref(false); |
||||
|
|
||||
|
const handleRefresh = async () => { |
||||
|
if (isRefreshing.value) return; |
||||
|
|
||||
|
isRefreshing.value = true; |
||||
|
try { |
||||
|
await props.onRefresh(); |
||||
|
} finally { |
||||
|
isRefreshing.value = false; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.scroll-view { |
||||
|
height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.refresh-loading { |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #666; |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 353 B After Width: | Height: | Size: 288 B |
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 285 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 303 B |
|
Before Width: | Height: | Size: 345 B After Width: | Height: | Size: 296 B |
|
Before Width: | Height: | Size: 312 B After Width: | Height: | Size: 294 B |
|
Before Width: | Height: | Size: 319 B After Width: | Height: | Size: 291 B |
|
Before Width: | Height: | Size: 388 B After Width: | Height: | Size: 365 B |
|
Before Width: | Height: | Size: 388 B After Width: | Height: | Size: 358 B |
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 312 B |
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 296 B |
Loading…
Reference in new issue