提交 f594f7fd 作者: 方治民

feat: 优化 LinkedList 组件示例

上级 ba1f1b2f
import Mock from 'mockjs'
import { pinyin } from 'pinyin-pro'
export function getData() {
const data = Array(1000)
......@@ -7,15 +8,49 @@ export function getData() {
const name = Mock.Random.cname()
return {
id: Mock.Random.guid(),
name,
phone: Mock.Random.integer(13000000000, 19999999999),
phone: String(Mock.Random.integer(13000000000, 19999999999)),
avatar: Mock.Random.image('50x50', Mock.Random.color(), '#757575', 'png', name.charAt(0)),
unit: Mock.Random.cword(3, 5),
checked: false,
}
})
const result = data
.map((item: any) => {
const props = {}
if (item.name) {
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase()
} else {
item.letter = '★'
}
return {
data,
total: data.length,
...item,
...props,
// TODO: 存在性能问题,需要优化后再使用
// src: item.avatar || '/static/images/me/user_default.jpg',
text: item.name,
subText: item.unit,
}
})
.reduce((prev: any, cur: any) => {
const letter = cur.letter
const index = prev.findIndex((item: any) => item.letter === letter)
if (index === -1) {
prev.push({
letter,
items: [cur],
})
} else {
prev[index].items.push(cur)
}
return prev
}, [])
.sort((a: any, b: any) => {
return a.letter.charCodeAt(0) - b.letter.charCodeAt(0)
})
return result
}
<script setup lang="ts">
import { pinyin } from 'pinyin-pro'
import { getData } from './data'
interface Params {
multiple?: boolean
}
const data = reactive({
const model = reactive({
params: {} as Params,
search: '',
result: {} as { data: Recordable[]; total: number },
data: [] as Recordable[],
show: false,
permissions: [],
})
const list = computed(() => {
const result = data.result?.data
?.filter((item: any) => {
if (data.search) {
return (
item.name?.includes(data.search) ||
item.unit?.includes(data.search) ||
String(item.phone)?.includes(data.search)
const data = computed(() => {
const list = model.data.filter((item: any) => {
item.data = model.search
? item.items.filter(
(subItem: any) =>
subItem.name?.includes(model.search) ||
subItem.unit?.includes(model.search) ||
subItem.phone?.includes(model.search),
)
}
return true
: item.items
return item.data.length > 0
})
?.map((item: any) => {
const props = {}
if (item.name) {
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase()
} else {
item.letter = '★'
}
return {
...item,
...props,
// TODO: 存在性能问题,需要优化后再使用
src: item.avatar || '/static/images/me/user_default.jpg',
text: item.name,
subText: item.unit,
}
})
.reduce((prev: any, cur: any) => {
const letter = cur.letter
const index = prev.findIndex((item: any) => item.letter === letter)
if (index === -1) {
prev.push({
letter,
data: [cur],
})
} else {
prev[index].data.push(cur)
list,
total: list.reduce((prev: any, cur: any) => prev + cur.data.length, 0),
}
return prev
}, [])
.sort((a: any, b: any) => {
return a.letter.charCodeAt(0) - b.letter.charCodeAt(0)
})
return result || []
const permissionButtonWidth = computed(() => {
const len = model.permissions.length
return (750 - 60) / len - (len - 1) * (30 / len)
})
onLoad(({ params }) => {
// data.params = JSON.parse(decodeURIComponent(params))
console.log('params', params, data.params)
onLoad(({ multiple }) => {
model.params.multiple = multiple === 'true'
// 获取人员列表
Message.loading('加载中...')
data.result = getData()
model.data = getData()
Message.hideLoading()
model.permissions = []
if (model.params.multiple) {
model.permissions.push({
name: '确定',
value: 'SUBMIT',
type: 'primary',
onClick: () => {
const result = toRaw(model.data)
.reduce((all, item) => all.concat(item.data), [])
.filter((item: any) => item.checked)
console.log('Multiple Result', result)
callback(result)
},
})
}
})
function search(e: any) {
data.search = e.detail.value || ''
model.search = e.detail.value || ''
}
const choose = (item: any) => {
// if (data.params?.multiple) {
// item.checked = !item.checked
// } else {
// uni.$emit('chooseShootOrderReceiverUser', item)
// uni.navigateBack()
// }
console.log('item', item)
const choose = (value: any) => {
if (model.params?.multiple) {
data.value.list[value.index].data[value.subIndex].checked = !value.checked
} else {
console.log('Single Result', value)
callback(value)
}
}
const callback = (result: any) => {
uni.$emit('chooseShootOrderReceiverUser', result)
uni.navigateBack()
}
</script>
......@@ -92,21 +87,74 @@
<!-- -->
<fui-index-list
isSrc
:listData="list"
@init="data.show = true"
:isSelect="data.params?.multiple"
:listData="data.list"
:isSelect="model.params?.multiple"
:subRight="false"
@init="model.show = true"
@click="choose"
:class="model.params?.multiple ? 'multiple' : ''"
>
<fui-search-bar @input="search" @clear="data.search = ''" />
<fui-search-bar @input="search" @clear="model.search = ''" />
<template #footer>
<fui-loadmore v-if="!data.show" />
<fui-divider :text="`${data.result.total || 0}联系人`" v-if="data.show" />
<fui-loadmore v-if="!model.show" />
<fui-divider :text="`${data.total || 0}联系人`" v-if="model.show" />
<!-- 安全区 -->
<fui-safe-area />
</template>
</fui-index-list>
<!-- 多选确认按钮 -->
<!-- 操作 -->
<view class="opts" v-if="model.params.multiple">
<!-- 操作按钮 -->
<view class="opts-wrap">
<fui-button
v-for="opt in model.permissions"
:key="opt.value"
@tap="opt.onClick"
:text="opt.name"
:type="opt.type"
radius="96rpx"
:width="`${permissionButtonWidth}rpx`"
height="96rpx"
/>
</view>
<!-- 安全区 -->
<fui-safe-area />
</view>
</view>
</template>
<style lang="less" scoped>
//
.multiple {
padding-bottom: 140rpx;
}
.opts {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
background-color: #fff;
box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
.opts-wrap {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
</style>
......@@ -10,7 +10,7 @@
{
name: 'LinkedList 大列表示例',
icon: 'emojione-letter-z',
page: '/pages/example/linkedlist/index',
page: `/pages/example/linkedlist/index?multiple=true`,
},
],
})
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论