git
/
admission-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【招生小程序】 优化# 主账号-个人：封装查询组件

master
kaeery 2025-03-06 21:00:02 +08:00
parent 402b87b8b7
commit 56aa0125b8
12 changed files with 647 additions and 597 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/bundle/pages/clue-list/components/date-popup.vue 100644
View File

@ -0,0 +1,58 @@
<template>
<u-popup :show="show" mode="bottom" :customStyle="{ padding: '20px' }" round="10px">
<view>
<dateDropdownPicker
ref="dateDropdownPickerRef"
:dropdownItem="dropdownMenuDateList"
@reset="handleReset"
@confirm="handleConfirm"
/>
</view>
</u-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import { useToggle } from '@/hooks/useLockFn'
import { formateDate, getCurDate } from '@/utils/util'
const { show, handleToggle } = useToggle()
const emit = defineEmits(['confirm', 'reset'])
const dateDropdownPickerRef = ref<InstanceType<typeof dateDropdownPicker>>()
const dropdownMenuDateList = ref({
showQuick: true,
title: '日期范围',
type: 'daterange',
prop: 'god6',
value: { start: getCurDate('start', 'YYYY-MM-DD'), end: getCurDate('end', 'YYYY-MM-DD') }
})
const openPopup = () => {
handleToggle()
}
// 默认设置日期
const setDefaultValue = (payload: any) => {
if (payload.createTimeStart || payload.createTimeEnd) {
dropdownMenuDateList.value.value = {
start: formateDate(payload.createTimeStart, 'start', 'YYYY-MM-DD'),
end: formateDate(payload.createTimeEnd, 'end', 'YYYY-MM-DD')
}
dateDropdownPickerRef.value.initData(dropdownMenuDateList.value, false, payload.dateTag)
}
}
const handleConfirm = (value: string) => {
emit('confirm', value)
}
const handleReset = () => {
emit('reset')
}
defineExpose({
openPopup,
setDefaultValue,
handleToggle
})
</script>
<style scoped></style>

54
src/bundle/pages/clue-list/index.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="flex flex-col h-screen">
<view class="flex items-center justify-between">
<view class="flex items-center justify-between relative">
<view class="flex-1 overflow-auto">
<u-tabs
:list="tabs"
@ -12,7 +12,7 @@
@change="handleChangeTab"
></u-tabs>
</view>
<view class="mr-[32rpx]">
<view class="mr-[32rpx]" @click="handleShowPopup">
<TIcon name="icon-filter" color="#999" />
</view>
</view>
@ -37,6 +37,7 @@
/>
</z-paging>
</view>
<date-popup ref="datePopupRef" @confirm="handleConfirmDate" @reset="handleResetDate" />
</view>
</template>
@ -44,10 +45,13 @@
import { onLoad } from '@dcloudio/uni-app'
import { ref, shallowRef } from 'vue'
import clueCard from './components/clue-card.vue'
import datePopup from './components/date-popup.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'
import { computed } from 'vue'
import { debounce } from 'lodash-es'
import { nextTick } from 'vue'
import { formatDate, formateDate, getCurDate } from '@/utils/util'
const queryParams = ref({
likeWork: ''
@ -83,13 +87,47 @@ const searchChange = debounce(() => {
}, 300)
const type = ref('')
onLoad(option => {
if (option.id) {
uni.setNavigationBarTitle({
title: '张三'
const dateTagFlag = ref('')
onLoad(async options => {
setFormData(options)
dateTagFlag.value = options?.dateTag ?? ''
await nextTick()
datePopupRef.value?.setDefaultValue({ ...form.value, dateTag: dateTagFlag.value })
// if (option.id) {
// uni.setNavigationBarTitle({
// title: '张三'
// })
type.value = options.type ?? ''
// }
})
type.value = option.type ?? ''
const form = ref()
// 设置表单数据
const setFormData = options => {
form.value = Object.keys(options).reduce((acc, key) => {
if (key == 'id' || key == 'dateTag' || key == 'type') {
return acc
}
acc[key] = decodeURIComponent(options[key])
return acc
}, {})
}
const datePopupRef = ref<InstanceType<typeof datePopup>>()
const handleShowPopup = () => {
datePopupRef.value?.openPopup()
}
const handleConfirmDate = (date: { [key: string]: string }) => {
const { start, end } = date
form.value.createTimeStart = formateDate(start, 'start', 'YYYY-MM-DD')
form.value.createTimeEnd = formateDate(end, 'end', 'YYYY-MM-DD')
datePopupRef.value?.handleToggle(true)
}
const handleResetDate = () => {
form.value.createTimeStart = getCurDate('start', 'YYYY-MM-DD')
form.value.createTimeEnd = getCurDate('end', 'YYYY-MM-DD')
console.log(form.value)
datePopupRef.value?.handleToggle(true)
}
})
</script>
<style scoped></style>

19
src/bundle/pages/rank-list/index.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<view class="flex flex-col h-screen">
<u-tabs
:list="tabs"
:scrollable="false"
@ -18,20 +18,30 @@
@change="handleChangeTab"
></u-tabs>
<dropdownPicker ref="dropdownPickerRef" v-model="form" @refresh-page="refreshPage" />
<view class="flex-1 overflow-auto">
<template v-if="loading && !data.length">
<view class="min-h-[200rpx] flex justify-center items-center">
<u-loading-icon></u-loading-icon>
</view>
</template>
<template v-if="!loading && data.length > 0">
<template v-else-if="!loading && data.length > 0">
<TTable :columns="columns" :data="data">
<template #index="scope">
<text class="px-[20rpx] py-[6rpx] rounded-[4px]" :style="rankStyle(scope.row)">
<text
class="px-[20rpx] py-[6rpx] rounded-[4px]"
:style="rankStyle(scope.row)"
>
{{ scope.row }}
</text>
</template>
</TTable>
</template>
<template v-else-if="!loading && data.length == 0">
<div class="pb-3">
<w-empty />
</div>
</template>
</view>
</view>
</template>
@ -45,7 +55,7 @@ import { IForm } from '@/components/widgets/admin/team/index.vue'
const dropdownPickerRef = ref<InstanceType<typeof dropdownPicker>>()
const form = ref<IForm>()
const { tabs, activeTab, columns, data, loading, rankStyle, handleChangeTab, fetchData } = useRank({
const { tabs, columns, data, loading, rankStyle, handleChangeTab, fetchData } = useRank({
width: 160,
callback: () => {
fetchData(form.value)
@ -63,6 +73,7 @@ onLoad(async options => {
)
fetchData(form.value)
})
// 设置表单数据
const setFormData = options => {
form.value = Object.keys(options).reduce((acc, key) => {
if (key == 'dropdownIndex' || key == 'dateTag') {

170
src/components/widgets/admin/personally/components/dropdown-picker.vue 100644
View File

@ -0,0 +1,170 @@
<template>
<view class="bg-white">
<u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
<u-dropdown-item title="岗位">
<view class="bg-white">
<position-tabs
@reset="handleReset('position')"
@confirm="value => handleConfirm('position', value)"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="组织">
<view class="bg-white">
<DropdownPicker
:dropdownItem="dropdownMenuOrgList"
@reset="() => handleReset('user')"
@confirm="value => handleConfirm('user', value)"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="日期">
<view class="bg-white p-[20rpx]">
<dateDropdownPicker
:dropdownItem="dropdownMenuDateList"
@reset="() => handleReset('date')"
@confirm="
(value, dropIndex, dateTag) => handleConfirm('date', value, dateTag)
"
/>
</view>
</u-dropdown-item>
</u-dropdown>
</view>
</template>
<script setup lang="ts">
import positionTabs from './position-tabs.vue'
import DropdownPicker from '../../orga-picker.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import { PropType, computed, ref } from 'vue'
import { apiOrganizationAllList } from '@/api/admin'
import { IForm } from '../../team/index.vue'
import { formateDate, getCurDate } from '@/utils/util'
const props = defineProps({
modelValue: {
type: Object as PropType<IForm>,
default: () => ({})
}
})
const emit = defineEmits(['update:modelValue', 'refreshPage', 'confirm', 'reset'])
const localValue = computed({
get() {
return props.modelValue
},
set(newValue) {
return emit('update:modelValue', newValue)
}
})
const uDropdownRef = ref()
const dropdownMenuDateList = ref({
dropdownIndex: 3,
showQuick: true,
title: '日期范围',
type: 'daterange',
prop: 'god6',
value: { start: getCurDate('start', 'YYYY-MM-DD'), end: getCurDate('end', 'YYYY-MM-DD') }
})
const dropdownMenuOrgList = ref<any[]>([])
// 查询条件
const handleConfirm = (type: string, item, dateTag?: string) => {
switch (type) {
case 'user':
localValue.value = {
...localValue.value,
userId: item.value
}
break
case 'date':
localValue.value = {
...localValue.value,
createTimeStart: formateDate(item.start, 'start'),
createTimeEnd: formateDate(item.end, 'end')
}
break
case 'position':
localValue.value = {
...localValue.value,
postId: item
}
break
default:
break
}
emit('refreshPage')
emit('confirm', dateTag)
closeDropDown()
}
// 重置条件
const handleReset = (type: string) => {
switch (type) {
case 'user':
localValue.value = {
...localValue.value,
userId: ''
}
break
case 'date':
localValue.value = {
...localValue.value,
createTimeStart: getCurDate('start'),
createTimeEnd: getCurDate('end')
}
break
case 'position':
localValue.value = {
...localValue.value,
postId: 0
}
break
default:
break
}
emit('refreshPage')
emit('reset')
closeDropDown()
}
const closeDropDown = () => {
uDropdownRef.value.close()
}
// 获取所有组织及成员
const fetchAllOrganizationList = async () => {
try {
const result = await apiOrganizationAllList()
dropdownMenuOrgList.value = renameFields(result)
} catch (error) {}
}
const renameFields = (data: any[]): any[] => {
return data.map(item => {
const newItem = { ...item }
newItem.label = item.name
newItem.value = item.id
if (newItem.organizationVoList) {
newItem.children = renameFields(newItem.organizationVoList)
delete newItem.organizationVoList
}
if (newItem.userVos) {
newItem.userVos.forEach(item => {
item.label = item.username
item.value = item.id
})
newItem.children = newItem.children
? [...newItem.children, ...newItem.userVos]
: newItem.userVos
delete newItem.userVos
}
if (!newItem.children.length) {
newItem.disabled = true
}
return newItem
})
}
fetchAllOrganizationList()
</script>
<style scoped></style>

1
src/components/widgets/admin/personally/components/position-tabs.vue
View File

@ -35,7 +35,6 @@ const handleCellClick = (item: any) => {
const { id } = item
postId.value = id
emit('update:modelValue', id)
emit('confirm', item)
}
const handleReset = () => {
postId.value = 0

4
src/components/widgets/admin/personally/components/telesale-card.vue
View File

@ -32,7 +32,9 @@
<text>{{ parseText(key) }}数据</text>
<text class="text-primary" @click="handleMore(key)">查看</text>
</view>
<view class="flex gap-[12rpx] flex-wrap bg-[#f1f1f1] mx-[24rpx] py-[24rpx]">
<view
class="flex gap-[12rpx] flex-wrap bg-[#FAFAFE] mx-[24rpx] py-[24rpx] rounded-[12rpx]"
>
<view
class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
v-for="(item, indey) in value"

145
src/components/widgets/admin/personally/index.vue
View File

@ -1,36 +1,6 @@
<template>
<view class="flex-1 h-full flex flex-col">
<view class="bg-white">
<u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
<u-dropdown-item title="岗位">
<view class="bg-white">
<position-tabs
v-model="postId"
@reset="handleReset('position')"
@confirm="value => handleConfirm('position', value)"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="组织">
<view class="bg-white">
<DropdownPicker
:dropdownItem="dropdownMenuOrgList"
@reset="() => handleReset('organization')"
@confirm="value => handleConfirm('organization', value)"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="日期">
<view class="bg-white p-[20rpx]">
<dateDropdownPicker
:dropdownItem="dropdownMenuList2"
@reset="() => handleReset('date')"
@confirm="value => handleConfirm('date', value)"
/>
</view>
</u-dropdown-item>
</u-dropdown>
</view>
<dropdownPicker v-model="form" @confirm="confirm" @reset-page="resetPage" />
<view class="flex-1 mt-3 px-[32rpx] overflow-auto bg-[#FAFAFE]">
<!-- <z-paging
ref="paging"
@ -38,123 +8,70 @@
@query="queryList"
:fixed="false"
height="100%"
>
> -->
<template v-for="(item, index) in dataList" :key="`unique_${index}`">
<telesale-card :item="item" @handleCardClick="handleCardClick" />
</template>
</z-paging> -->
<!-- </z-paging> -->
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import positionTabs from './components/position-tabs.vue'
import DropdownPicker from '../orga-picker.vue'
import telesaleCard from './components/telesale-card.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'
import { apiOrganizationAllList } from '@/api/admin'
import { getCurDate } from '@/utils/util'
import dropdownPicker from './components/dropdown-picker.vue'
const dropdownMenuList2 = {
showQuick: true,
title: '日期范围',
type: 'daterange',
prop: 'god6'
// 默认选中 2022-01-01到2022-02-01
// value: { start: '2022-01-01', end: '2022-02-01' },
}
const postId = ref()
const dropdownMenuOrgList = ref([])
const form = ref({
postId: 0,
createTimeStart: getCurDate('start'),
createTimeEnd: getCurDate('end'),
userId: ''
})
const queryParams = ref({
likeWork: ''
})
const dataList = ref([])
const dataList = ref([{ id: 1, postId: '5,6', studentName: '张三' }])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
queryParams.value,
apiTeleClueList,
() => {}
)
const dateTagFlag = ref() //选择快捷日期标识
const confirm = (dateTag?: string) => {
console.log(form.value, dateTag)
dateTagFlag.value = dateTag
}
const resetPage = () => {}
// 查看
const handleCardClick = (type: string, item: any) => {
const { id } = item
console.log(form.value)
const params = {
...form.value,
dateTag: encodeURIComponent(dateTagFlag.value),
id,
type
}
const queryString = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&')
switch (type) {
case 'telesale':
case 'recruitsale':
uni.navigateTo({
url: '/bundle/pages/clue-list/index?id=' + id + '&type=' + type
url: '/bundle/pages/clue-list/index?id=' + queryString
})
break
default:
break
}
}
// 查询条件
const handleConfirm = (type: string, item) => {
switch (type) {
case 'organization':
console.log(item)
break
case 'date':
console.log(item)
break
case 'position':
console.log(item)
break
default:
break
}
}
// 重置条件
const handleReset = (type: string) => {
switch (type) {
case 'organization':
break
case 'date':
break
case 'position':
break
default:
break
}
}
const fetchAllOrganizationList = async () => {
try {
const result = await apiOrganizationAllList()
dropdownMenuOrgList.value = renameFields(result)
console.log(dropdownMenuOrgList.value)
} catch (error) {}
}
const renameFields = (data: any[]): any[] => {
return data.map(item => {
const newItem = { ...item }
newItem.label = item.name
newItem.value = item.id
if (newItem.organizationVoList) {
newItem.children = renameFields(newItem.organizationVoList)
delete newItem.organizationVoList
}
if (newItem.userVos) {
newItem.userVos.forEach(item => {
item.label = item.username
item.value = item.id
})
newItem.children = newItem.children
? [...newItem.children, ...newItem.userVos]
: newItem.userVos
delete newItem.userVos
}
if (!newItem.children.length) {
newItem.disabled = true
}
return newItem
})
}
fetchAllOrganizationList()
</script>
<style scoped lang="scss"></style>

163
src/components/widgets/admin/team/index.vue
View File

@ -6,51 +6,6 @@
@refresh-page="refreshPage"
@confirm="confirm"
/>
<!-- <view class="bg-white">
<u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
<u-dropdown-item title="团队">
<view class="bg-white">
<selectDropdown
ref="teamDropdownRef"
:dropdownItem="dropdownMenuTeamList"
:dropdownIndex="1"
@reset="() => handleReset('team')"
@confirm="
(value, dropdownIndex) =>
handleConfirm('team', value, dropdownIndex)
"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="组织">
<view class="bg-white">
<selectDropdown
ref="orgDropdownRef"
:dropdownItem="dropdownMenuAllOrgaList"
:dropdownIndex="2"
@reset="() => handleReset('organization')"
@confirm="
(value, dropdownIndex) =>
handleConfirm('organization', value, dropdownIndex)
"
/>
</view>
</u-dropdown-item>
<u-dropdown-item title="日期">
<view class="bg-white p-[20rpx]">
<dateDropdownPicker
:dropdownItem="dropdownMenuDateList"
:dropdownIndex="3"
@reset="() => handleReset('date')"
@confirm="
(value, dropdownIndex, dateTag) =>
handleConfirm('date', value, dropdownIndex, dateTag)
"
/>
</view>
</u-dropdown-item>
</u-dropdown>
</view> -->
<filter-value :form="form" :activeTab="activeTab" :organizationList="organizationList" />
<data-overview ref="dataOverviewRef" />
<converted-overview ref="convertedOverviewRef" />
@ -65,12 +20,9 @@ import dataOverview from './components/data-overview.vue'
import convertedOverview from './components/converted-overview.vue'
import rank from './components/rank.vue'
import clueStatus from './components/clue-status.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import dropdownPicker from '../dropdown-picker.vue'
import selectDropdown from '@/components/select-dropdown/index.vue'
import filterValue from '../filter-value.vue'
import { apiOrganizationByIdList, apiOrganizationList, apiOrganizationTeamList } from '@/api/admin'
import { formateDate, getCurDate } from '@/utils/util'
import { getCurDate } from '@/utils/util'
import { AdminTabEnum } from '@/enums'
export interface IForm {
@ -78,6 +30,7 @@ export interface IForm {
createTimeStart: string
createTimeEnd: string
userId: string
postId?: number
}
defineProps({
@ -87,44 +40,17 @@ defineProps({
}
})
const dropdownPickerRef = ref<InstanceType<typeof dropdownPicker>>()
const teamDropdownRef = ref<InstanceType<typeof selectDropdown>>()
const orgDropdownRef = ref<InstanceType<typeof selectDropdown>>()
const clueStatusRef = ref<InstanceType<typeof clueStatus>>()
const rankRef = ref<InstanceType<typeof rank>>()
const convertedOverviewRef = ref<InstanceType<typeof convertedOverview>>()
const dataOverviewRef = ref<InstanceType<typeof dataOverview>>()
const uDropdownRef = ref()
const organizationList = ref([])
const defaultValue = ref() //保存组织默认值
const form = ref<IForm>({
organizationId: null,
createTimeStart: getCurDate('start'),
createTimeEnd: getCurDate('end'),
userId: ''
})
const dropdownMenuDateList = {
showQuick: true,
title: '日期范围',
type: 'daterange',
prop: 'god6',
value: { start: getCurDate('start', 'YYYY-MM-DD'), end: getCurDate('end', 'YYYY-MM-DD') }
}
const dropdownMenuTeamList = ref({
title: '下拉',
type: 'cell',
prop: 'god1',
showAll: true,
showIcon: true,
options: []
})
const dropdownMenuAllOrgaList = ref({
title: '下拉',
type: 'cell',
prop: 'god1',
showAll: true,
showIcon: true,
options: []
})
const menuIndexArr = ref<number[]>([])
const refreshPage = () => {
fetchAllData()
@ -133,55 +59,10 @@ const confirm = payload => {
menuIndexArr.value = Array.from(new Set([...menuIndexArr.value, payload.dropdownIndex]))
rankRef.value?.setSelectedIndexArr(menuIndexArr.value, payload?.dateTag)
}
// 查询条件
const handleConfirm = (type: string, item, dropdownIndex: number, dateTag?: string) => {
switch (type) {
case 'organization':
case 'team':
// 清空选择条件
dropdownIndex == 1
? orgDropdownRef.value.clearSelect()
: teamDropdownRef.value.clearSelect()
form.value.organizationId = item.value
break
case 'date':
form.value.createTimeStart = formateDate(item.start, 'start')
form.value.createTimeEnd = formateDate(item.end, 'end')
break
default:
break
}
fetchAllData()
closeDropDown()
menuIndexArr.value = Array.from(new Set([...menuIndexArr.value, dropdownIndex]))
rankRef.value?.setSelectedIndexArr(menuIndexArr.value, dateTag)
}
// 重置条件
const handleReset = (type: string) => {
switch (type) {
case 'organization':
break
case 'date':
form.value.createTimeStart = getCurDate('start')
form.value.createTimeEnd = getCurDate('end')
break
case 'team':
form.value.organizationId = defaultValue.value
break
default:
break
}
fetchAllData()
closeDropDown()
}
const closeDropDown = () => {
uDropdownRef.value.close()
}
const refreshData = () => {
rankRef.value?.fetchData(form.value)
}
onMounted(async () => {
// await fetchOrganizationList()
await dropdownPickerRef.value?.fetchOrganizationList()
organizationList.value = dropdownPickerRef.value?.organizationList
fetchAllData()
@ -192,45 +73,5 @@ const fetchAllData = () => {
rankRef.value?.fetchData(form.value)
clueStatusRef.value?.fetchData(form.value)
}
// 获取主账号下的所有组织架构
const fetchOrganizationList = async () => {
try {
const result = await apiOrganizationList()
organizationList.value = result ?? []
if (result.length > 0) {
form.value.organizationId = result[0].id
defaultValue.value = result[0].id
}
} catch (error) {}
}
// 获取团队列表
const fetchTeamList = async () => {
try {
const result = await apiOrganizationTeamList()
dropdownMenuTeamList.value.options =
result.map(item => {
return {
label: item.name,
value: item.id
}
}) ?? []
} catch (error) {}
}
// 获取组织列表
const fetchAllOrganizationList = async () => {
try {
const result = await apiOrganizationByIdList()
dropdownMenuAllOrgaList.value.options =
result.map(item => {
return {
label: item.name,
value: item.id
}
}) ?? []
} catch (error) {}
}
// fetchTeamList()
// fetchAllOrganizationList()
</script>
<style scoped></style>

4
src/hooks/useCommon.ts
View File

@ -115,7 +115,7 @@ export function useRank({ width, callback }: { width: number; callback?: () => v
// 岗位
export function usePositions() {
const positionList = ref()
const postId = ref()
const postId = ref(0)
const fetchPositions = async () => {
try {
const result = await postLists()
@ -126,7 +126,7 @@ export function usePositions() {
value: item.id
}
})
if (positionList.value.length > 0) postId.value = positionList.value[0].id
// if (positionList.value.length > 0) postId.value = positionList.value[0].id
} catch (error) {}
}

3
src/uni_modules/uview-plus/components/u-popup/popup.js
View File

@ -24,6 +24,7 @@ export default {
round: 0,
zoom: true,
bgColor: '',
overlayOpacity: 0.5
overlayOpacity: 0.5,
top: 0
}
}

4
src/uni_modules/uview-plus/components/u-popup/props.js
View File

@ -76,6 +76,10 @@ export const props = defineMixin({
overlayOpacity: {
type: [Number, String],
default: () => defProps.popup.overlayOpacity
},
top: {
type: Number,
default: () => defProps.popup.top
}
}
})

69
src/uni_modules/uview-plus/components/u-popup/u-popup.vue
View File

@ -17,11 +17,7 @@
@afterEnter="afterEnter"
@click="clickHandler"
>
<view
class="u-popup__content"
:style="[contentStyle]"
@tap.stop="noop"
>
<view class="u-popup__content" :style="[contentStyle]" @tap.stop="noop">
<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
<slot></slot>
<view
@ -32,12 +28,7 @@
hover-class="u-popup__content__close--hover"
hover-stay-time="150"
>
<u-icon
name="close"
color="#909399"
size="18"
bold
></u-icon>
<u-icon name="close" color="#909399" size="18" bold></u-icon>
</view>
<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
</view>
@ -46,10 +37,10 @@
</template>
<script>
import { props } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addUnit, addStyle, deepMerge, sleep, sys } from '../../libs/function/index';
import { props } from './props'
import { mpMixin } from '../../libs/mixin/mpMixin'
import { mixin } from '../../libs/mixin/mixin'
import { addUnit, addStyle, deepMerge, sleep, sys } from '../../libs/function/index'
/**
* popup 弹窗
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
@ -97,28 +88,29 @@
const style = {
zIndex: this.zIndex,
position: 'fixed',
display: 'flex',
display: 'flex'
}
style[this.mode] = 0
if (this.mode === 'left') {
return deepMerge(style, {
bottom: 0,
top: 0,
top: 0
})
} else if (this.mode === 'right') {
return deepMerge(style, {
bottom: 0,
top: 0,
top: 0
})
} else if (this.mode === 'top') {
return deepMerge(style, {
left: 0,
right: 0
right: 0,
top: this.top + 'px'
})
} else if (this.mode === 'bottom') {
return deepMerge(style, {
left: 0,
right: 0,
right: 0
})
} else if (this.mode === 'center') {
return deepMerge(style, {
@ -135,9 +127,7 @@
const style = {}
// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
const {
safeAreaInsets
} = sys()
const { safeAreaInsets } = sys()
if (this.mode !== 'center') {
style.flex = 1
}
@ -175,9 +165,9 @@
if (this.mode === 'top') {
return 'slide-down'
}
}
},
},
emits: ["open", "close", "click", "update:show"],
emits: ['open', 'close', 'click', 'update:show'],
methods: {
// 点击遮罩
overlayClick() {
@ -203,10 +193,29 @@
// #ifdef MP-WEIXIN
retryComputedComponentRect(children) {
// 组件内部需要计算节点的组件
const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
'u-tabs', 'u-tooltip'
const names = [
'u-calendar-month',
'u-album',
'u-collapse-item',
'u-dropdown',
'u-index-item',
'u-index-list',
'u-line-progress',
'u-list-item',
'u-rate',
'u-read-more',
'u-row',
'u-row-notice',
'u-scroll-list',
'u-skeleton',
'u-slider',
'u-steps-item',
'u-sticky',
'u-subsection',
'u-swipe-action-item',
'u-tabbar',
'u-tabs',
'u-tooltip'
]
// 历遍所有的子组件节点
for (let i = 0; i < children.length; i++) {
@ -232,7 +241,7 @@
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
@import '../../libs/css/components.scss';
$u-popup-flex: 1 !default;
$u-popup-content-background-color: #fff !default;