Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 f594f7fd 作者: 方治民
操作

feat: 优化 LinkedList 组件示例

上级 ba1f1b2f
正在显示 包含 157 行增加 和 74 行删除
src/pages/example/linkedlist/data.ts
import Mock from 'mockjs' import Mock from 'mockjs'
import { pinyin } from 'pinyin-pro'
export function getData() { export function getData() {
const data = Array(1000) const data = Array(1000)
...@@ -7,15 +8,49 @@ export function getData() { ...@@ -7,15 +8,49 @@ export function getData() {
const name = Mock.Random.cname() const name = Mock.Random.cname()
return { return {
id: Mock.Random.guid(),
name, 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)), avatar: Mock.Random.image('50x50', Mock.Random.color(), '#757575', 'png', name.charAt(0)),
unit: Mock.Random.cword(3, 5), unit: Mock.Random.cword(3, 5),
checked: false,
} }
}) })
return { const result = data
data, .map((item: any) => {
total: data.length, 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,
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
} }
src/pages/example/linkedlist/index.vue
<script setup lang="ts"> <script setup lang="ts">
import { pinyin } from 'pinyin-pro'
import { getData } from './data' import { getData } from './data'
interface Params { interface Params {
multiple?: boolean multiple?: boolean
} }
const data = reactive({ const model = reactive({
params: {} as Params, params: {} as Params,
search: '', search: '',
result: {} as { data: Recordable[]; total: number }, data: [] as Recordable[],
show: false, show: false,
permissions: [],
}) })
const list = computed(() => { const data = computed(() => {
const result = data.result?.data const list = model.data.filter((item: any) => {
?.filter((item: any) => { item.data = model.search
if (data.search) { ? item.items.filter(
return ( (subItem: any) =>
item.name?.includes(data.search) || subItem.name?.includes(model.search) ||
item.unit?.includes(data.search) || subItem.unit?.includes(model.search) ||
String(item.phone)?.includes(data.search) subItem.phone?.includes(model.search),
) )
} : item.items
return true return item.data.length > 0
}) })
?.map((item: any) => {
const props = {} return {
if (item.name) { list,
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase() total: list.reduce((prev: any, cur: any) => prev + cur.data.length, 0),
} 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)
}
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 }) => { onLoad(({ multiple }) => {
// data.params = JSON.parse(decodeURIComponent(params)) model.params.multiple = multiple === 'true'
console.log('params', params, data.params)
// 获取人员列表 // 获取人员列表
Message.loading('加载中...') Message.loading('加载中...')
data.result = getData() model.data = getData()
Message.hideLoading() 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) { function search(e: any) {
data.search = e.detail.value || '' model.search = e.detail.value || ''
}
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 choose = (item: any) => { const callback = (result: any) => {
// if (data.params?.multiple) { uni.$emit('chooseShootOrderReceiverUser', result)
// item.checked = !item.checked uni.navigateBack()
// } else {
// uni.$emit('chooseShootOrderReceiverUser', item)
// uni.navigateBack()
// }
console.log('item', item)
} }
</script> </script>
...@@ -92,21 +87,74 @@ ...@@ -92,21 +87,74 @@
<!-- --> <!-- -->
<fui-index-list <fui-index-list
isSrc isSrc
:listData="list" :listData="data.list"
@init="data.show = true" :isSelect="model.params?.multiple"
:isSelect="data.params?.multiple"
:subRight="false" :subRight="false"
@init="model.show = true"
@click="choose" @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> <template #footer>
<fui-loadmore v-if="!data.show" /> <fui-loadmore v-if="!model.show" />
<fui-divider :text="`${data.result.total || 0}联系人`" v-if="data.show" /> <fui-divider :text="`${data.total || 0}联系人`" v-if="model.show" />
<!-- 安全区 -->
<fui-safe-area />
</template> </template>
</fui-index-list> </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> </view>
</template> </template>
<style lang="less" scoped> <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> </style>
src/pages/index/index.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
{ {
name: 'LinkedList 大列表示例', name: 'LinkedList 大列表示例',
icon: 'emojione-letter-z', icon: 'emojione-letter-z',
page: '/pages/example/linkedlist/index', page: `/pages/example/linkedlist/index?multiple=true`,
}, },
], ],
}) })
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论