100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<!-- 详情 -->
|
|
<template>
|
|
|
|
<view>
|
|
<z-paging ref="_paging" :refresher-enabled="false">
|
|
<template #top>
|
|
<uni-nav-bar :title="title" @clickLeft="onClickLeft" :leftIcon="leftIcon" />
|
|
</template>
|
|
<view class="page-container">
|
|
<view class="page-container__content">
|
|
<view class="page-container__not-data" v-if="showNotData">
|
|
<no-data />
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
<view>
|
|
<page-popup ref="_pagePopup" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showNotData: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
let _paging = ref(null);
|
|
let _pagePopup = ref(null);
|
|
const leftIcon = computed(() => {
|
|
if (props.showBack) {
|
|
return "/static/back.png";
|
|
}
|
|
});
|
|
const onClickLeft = () => {
|
|
if (props.showBack) {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
|
|
const getPaging = () => {
|
|
return _paging.value;
|
|
}
|
|
const getPagePopup = () => {
|
|
return _pagePopup.value;
|
|
}
|
|
defineExpose({
|
|
getPaging,
|
|
getPagePopup
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
|
|
|
|
&__content {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
&__divider {
|
|
width: 100%;
|
|
height: 4rpx;
|
|
background-color: #e5e5e5;
|
|
/* 使用较浅的灰色 */
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
margin-bottom: 10rpx;
|
|
/* 在分割线下方添加一些间距 */
|
|
}
|
|
|
|
&__not-data {
|
|
width: 100%;
|
|
height: 80vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |