123456
This commit is contained in:
cwt
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-flex-col u-row-center u-col-center u-p-t-100">
|
||||
<image :src="icon" class="u-w-160 u-h-160"></image>
|
||||
<view class="u-font-24 u-color-181818 u-m-t-20">{{text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "empty",
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: '暂无记录'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '/static/image/icon27.png'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="" :style="{height:doginfo.safeAreaInsets.top + doginfo.navbar+'px',backgroundColor:bgcolor,}">
|
||||
<view class="navbarBox"
|
||||
:style="{height:doginfo.safeAreaInsets.top + doginfo.navbar+'px',backgroundColor:bgcolor}">
|
||||
<view :style="{height:doginfo.safeAreaInsets.top +'px'}"></view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="Topnavbar">
|
||||
<slot name="left" v-if="backopen">
|
||||
<u-icon @click="goBack()" :name="backname" :color="backcolor" size="20"></u-icon>
|
||||
</slot>
|
||||
<slot name="center">
|
||||
<view class="title" :style="{marginLeft: rightwidth - doginfo.qiudata.width + 'px',color:backcolor}"
|
||||
v-if="title">
|
||||
{{title}}
|
||||
</view>
|
||||
</slot>
|
||||
<view class="navbar-right-slot">
|
||||
<slot name="right">
|
||||
<!-- 保留占位，确保元素始终存在 -->
|
||||
</slot>
|
||||
<view :style="{width:doginfo.qiudata.width + 5 +'px',height:'40px'}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="Topnavbar">
|
||||
<slot name="left" v-if="backopen">
|
||||
<u-icon @click="goBack()" :name="backname" :color="backcolor" size="20"></u-icon>
|
||||
</slot>
|
||||
<slot name="center">
|
||||
<view class="title" :style="{marginLeft:rightwidth+'px',color:backcolor}" v-if="title">{{title}}
|
||||
</view>
|
||||
</slot>
|
||||
<view class="navbar-right-slot">
|
||||
<slot name="right">
|
||||
<!-- 保留占位，确保元素始终存在 -->
|
||||
<view style="width: 38rpx;height: 44rpx;"></view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "navbar",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: "transparent"
|
||||
},
|
||||
backcolor: {
|
||||
type: String,
|
||||
default: "#111111"
|
||||
},
|
||||
backname: {
|
||||
type: String,
|
||||
default: "arrow-left"
|
||||
},
|
||||
backopen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title: {
|
||||
handler(newVal) {
|
||||
console.log(newVal);
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
doginfo: getApp().globalData.doginfo,
|
||||
rightwidth: getApp().globalData.doginfo.osName == 'ios' ? 87 : 95 // 新增：存储 right slot 尺寸
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 微信小程序：同步预计算 rightwidth，避免标题闪烁
|
||||
if (this.doginfo.type === 'wx') {
|
||||
const cw = this.doginfo.qiudata.width;
|
||||
// 右侧只有胶囊占位时：占位宽 = cw+5，rightwidth = (cw+5) + cw/2
|
||||
this.rightwidth = (cw + 5) + (cw / 2);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getRightSlotSize();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
let pages = getCurrentPages();
|
||||
let curRoute = pages[pages.length - 1].route;
|
||||
if (pages.length == 1) {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
getRightSlotSize(retryCount = 0) {
|
||||
const maxRetries = 3;
|
||||
uni.createSelectorQuery().in(this).select('.navbar-right-slot').boundingClientRect((rect) => {
|
||||
if (rect && rect.width > 0 && rect.height > 0) {
|
||||
if (this.doginfo.type === 'wx') {
|
||||
if (rect.width == this.doginfo.qiudata.width + 5) {
|
||||
this.rightwidth = rect.width + (this.doginfo.qiudata.width / 2)
|
||||
return
|
||||
} else {
|
||||
this.rightwidth = rect.width - 20
|
||||
}
|
||||
} else {
|
||||
this.rightwidth = rect.width - 20
|
||||
}
|
||||
} else {
|
||||
// 如果还没达到最大重试次数，延迟后重试
|
||||
if (retryCount < maxRetries) {
|
||||
setTimeout(() => {
|
||||
this.getRightSlotSize(retryCount + 1);
|
||||
}, 300); // 减少重试间隔
|
||||
}
|
||||
}
|
||||
}).exec();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbarBox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
.Topnavbar {
|
||||
height: 40px;
|
||||
padding: 0 7px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-direction: row;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
.Topnavbar {
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex-direction: row;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #111111;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
</style>
|
||||
Reference in New Issue
Block a user