132 lines
2.3 KiB
Vue
132 lines
2.3 KiB
Vue
<!-- 详情 -->
|
|
<template>
|
|
<view>
|
|
<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
|
|
<template #top>
|
|
<uniNavBar :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">
|
|
|
|
</view>
|
|
<view class="page-container__loading" v-if="showLoading" @click.stop="mengban">
|
|
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed
|
|
} from 'vue'
|
|
import {
|
|
uniNavBar
|
|
} from '@/components/uni-nav-bar/uni-nav-bar.vue'
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showNotData: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
refresh: {
|
|
type: Function,
|
|
default: function(refresh) {
|
|
// refresh.complete();
|
|
}
|
|
},
|
|
showLoading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
let paging = ref(null);
|
|
const leftIcon = computed(() => {
|
|
if (props.showBack) {
|
|
return "/static/back.png";
|
|
}
|
|
});
|
|
const onClickLeft = () => {
|
|
if (props.showBack) {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
const onRefresh = () => {
|
|
if (props.refresh) {
|
|
props.refresh(paging.value);
|
|
} else {
|
|
paging.value.complete();
|
|
}
|
|
}
|
|
const getPaging = () => {
|
|
return paging.value;
|
|
}
|
|
const mengban = () => {
|
|
|
|
}
|
|
defineExpose({
|
|
getPaging
|
|
})
|
|
</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;
|
|
}
|
|
|
|
&__loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0;
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
</style> |