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"> |
|||
import { |
|||
onMounted, |
|||
ref |
|||
} from 'vue'; |
|||
|
|||
const tpList = ref([ |
|||
{ |
|||
img: '/static/img/grxx.png', |
|||
name: '陈志远', |
|||
class: '现任财务总监', |
|||
import { onShow } from '@dcloudio/uni-app'; |
|||
import { log } from 'console'; |
|||
import { |
|||
onMounted, |
|||
ref |
|||
} from 'vue'; |
|||
import PullToRefresh from '@/components/PullToRefresh.vue'; |
|||
|
|||
const tpList = ref([ |
|||
{ |
|||
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 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: [ |
|||
{ |
|||
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 |
|||
|
|||
const selectIndex = ref(0) |
|||
const buttlist = ref([ |
|||
{ |
|||
butname: '同意' |
|||
}, |
|||
{ |
|||
butname: '反对' |
|||
}, |
|||
{ |
|||
butname: '弃权' |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
]) |
|||
|
|||
<template> |
|||
<view class="box"> |
|||
<ex-header :leftShow="false" backgroundColor="#2563EB" textColor="#fff" title="地址管理" /> |
|||
const selectBut = (index : number) => { |
|||
selectIndex.value = index |
|||
} |
|||
|
|||
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="暂无收货地址~" |
|||
customListType="custom"> |
|||
<template v-slot="{ data }"> |
|||
const loadData = async () => { |
|||
// 模拟异步请求 |
|||
console.log(1111111111111) |
|||
}; |
|||
</script> |
|||
|
|||
<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> |
|||
<template> |
|||
<pull-to-refresh :on-refresh="loadData"> |
|||
<!-- 你的页面内容 --> |
|||
<view class="box"> |
|||
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="" |
|||
customListType="custom"> |
|||
<template v-slot="{ data }"> |
|||
|
|||
<view v-for="(row, index) of data" class="address-items flex" @click.stop="onChoose(row)"> |
|||
<view class="flex1 left"> |
|||
<view class="flex-center-start"> |
|||
<text class="name">{{ row.name }}</text> |
|||
<text class="name">{{ row.phone }}</text> |
|||
<text v-if="row.is_default" class="isdefault">默认地址</text> |
|||
<view class="headpart"> |
|||
<view class="title"> |
|||
2024年度董事会成员选举 |
|||
</view> |
|||
<view class="info text-ellipsis">{{ row.region_desc }}{{ row.address }}</view> |
|||
</view> |
|||
<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 class="time"> |
|||
投票开始时间：2024年3月15日 18:00 |
|||
</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> |
|||
</template> |
|||
</ex-list> |
|||
<view class="bottbutton"> |
|||
<view class="qbty"> |
|||
全部同意 |
|||
</view> |
|||
<view class="tjtp"> |
|||
提交投票 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="buts"> |
|||
|
|||
</view> |
|||
</view> --> |
|||
</pull-to-refresh> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.box { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
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; |
|||
} |
|||
.box { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #F9FAFB; |
|||
|
|||
.time { |
|||
margin-top: 16rpx; |
|||
color: #4B5563; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
.headpart { |
|||
width: 86%; |
|||
height: 194rpx; |
|||
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 { |
|||
margin-top: 32rpx; |
|||
width: 100%; |
|||
max-height: 60vh; |
|||
max-height: 69vh; |
|||
overflow-y: auto; |
|||
display: grid; |
|||
justify-items: center; |
|||
|
|||
.tpone { |
|||
width: 84%; |
|||
width: 91%; |
|||
height: 264rpx; |
|||
padding: 20rpx 4%; |
|||
box-sizing: border-box; |
|||
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; |
|||
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 { |
|||
margin-left: 40rpx; |
|||
.rightpart { |
|||
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 { |
|||
padding: 20rpx 15rpx 32rpx 28rpx; |
|||
background-color: #fff; |
|||
border-bottom: 2rpx solid #f5f5f5; |
|||
.tpone:first-child { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
|
|||
.left { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
.bottbutton { |
|||
width: 100%; |
|||
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-weight: 700; |
|||
color: #101010; |
|||
line-height: 40rpx; |
|||
margin-right: 16rpx; |
|||
font-weight: 500; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #2563EB; |
|||
} |
|||
|
|||
.isdefault { |
|||
font-size: 20rpx; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
padding: 4rpx 12rpx; |
|||
.tjtp { |
|||
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: 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 { |
|||
width: 100%; |
|||
color: #666; |
|||
.right { |
|||
width: 140rpx; |
|||
padding-left: 32rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
margin-top: 12rpx; |
|||
color: #4979ff; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
width: 140rpx; |
|||
padding-left: 32rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
color: #4979ff; |
|||
text-align: right; |
|||
.buts { |
|||
width: 100%; |
|||
height: 10vh; |
|||
background-color: F3F4F6; |
|||
position: fixed; |
|||
bottom: 0; |
|||
border-top: 2rpx solid #ebebec; |
|||
} |
|||
} |
|||
|
|||
.buts { |
|||
width: 100%; |
|||
height: 10vh; |
|||
background-color: F3F4F6; |
|||
position: fixed; |
|||
bottom: 0; |
|||
border-top: 2rpx solid #ebebec; |
|||
} |
|||
} |
|||
</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