完善录音时长功能
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="feature-page">
|
||||
<view class="page-header">
|
||||
<view class="page-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-bar">
|
||||
<view class="nav-left" @click="goBack">
|
||||
<text class="back-icon">←</text>
|
||||
@@ -9,7 +9,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="content-scroll" scroll-y="true">
|
||||
<scroll-view class="content-scroll" scroll-y="true" :style="{ top: contentTop, bottom: contentBottom }">
|
||||
<view class="stats-card">
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ conversionRate }}%</text>
|
||||
@@ -46,9 +46,57 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统信息的辅助函数
|
||||
function getSystemInfo() {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序:优先使用新的 API
|
||||
if (typeof wx !== 'undefined' && wx.getWindowInfo) {
|
||||
try {
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
return {
|
||||
statusBarHeight: windowInfo.statusBarHeight || 20,
|
||||
windowWidth: windowInfo.windowWidth,
|
||||
windowHeight: windowInfo.windowHeight
|
||||
};
|
||||
} catch (e) {
|
||||
console.warn('[DealAttribution] Failed to use wx.getWindowInfo, fallback to getSystemInfoSync:', e);
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 回退到旧的 API 或使用 uni-app 的 API
|
||||
try {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
return {
|
||||
statusBarHeight: systemInfo.statusBarHeight || 20,
|
||||
windowWidth: systemInfo.windowWidth,
|
||||
windowHeight: systemInfo.windowHeight
|
||||
};
|
||||
} catch (e) {
|
||||
console.error('[DealAttribution] Failed to get system info:', e);
|
||||
return {
|
||||
statusBarHeight: 20,
|
||||
windowWidth: 375,
|
||||
windowHeight: 667
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
// 动态计算导航栏高度
|
||||
const systemInfo = getSystemInfo();
|
||||
const statusBarHeight = systemInfo.statusBarHeight;
|
||||
const navbarHeight = 44; // navbar高度44px
|
||||
// 转换为rpx:1px = 2rpx(在375px设计稿下)
|
||||
const statusBarHeightRpx = statusBarHeight * 2;
|
||||
const navbarHeightRpx = navbarHeight * 2;
|
||||
const totalNavbarHeight = statusBarHeightRpx + navbarHeightRpx;
|
||||
|
||||
return {
|
||||
statusBarHeight: statusBarHeight, // 状态栏高度(px)
|
||||
contentTop: totalNavbarHeight + 'rpx', // 内容区域距离顶部的距离
|
||||
contentBottom: '0rpx', // 内容区域距离底部的距离(默认值,会在 onReady 中更新)
|
||||
conversionRate: '15.8',
|
||||
totalDeals: '201',
|
||||
dataList: [
|
||||
@@ -60,6 +108,83 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 页面渲染完成后,查询实际导航栏高度并更新位置
|
||||
this.$nextTick(() => {
|
||||
// 查询导航栏实际高度
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.nav-bar').boundingClientRect((data) => {
|
||||
if (data && data.height) {
|
||||
// 使用实际高度
|
||||
const actualHeight = data.height; // 实际导航栏高度(px)
|
||||
// 转换为rpx:1px = 2rpx(在375px设计稿下)
|
||||
const actualHeightRpx = actualHeight * 2;
|
||||
const statusBarHeightRpx = this.statusBarHeight * 2;
|
||||
const totalHeight = statusBarHeightRpx + actualHeightRpx;
|
||||
// 稍微减小一点,确保紧贴
|
||||
const adjustedHeight = Math.max(totalHeight - 4, 0);
|
||||
this.$set(this, 'contentTop', adjustedHeight + 'rpx');
|
||||
console.log('[DealAttribution] 使用实际导航栏高度:', actualHeight, 'px =', actualHeightRpx, 'rpx, 总高度:', totalHeight, 'rpx, 调整后:', adjustedHeight, 'rpx');
|
||||
} else {
|
||||
// 如果查询失败,使用默认计算
|
||||
const systemInfo = getSystemInfo();
|
||||
const statusBarHeight = systemInfo.statusBarHeight;
|
||||
const navbarHeight = 44;
|
||||
const statusBarHeightRpx = statusBarHeight * 2;
|
||||
const navbarHeightRpx = navbarHeight * 2;
|
||||
const totalNavbarHeight = statusBarHeightRpx + navbarHeightRpx;
|
||||
const adjustedHeight = Math.max(totalNavbarHeight - 4, 0);
|
||||
this.$set(this, 'contentTop', adjustedHeight + 'rpx');
|
||||
}
|
||||
}).exec();
|
||||
|
||||
// 查询底部 tabbar 实际高度(如果有)
|
||||
const queryTabbar = uni.createSelectorQuery().in(this);
|
||||
queryTabbar.select('.tabbar').boundingClientRect((tabbarData) => {
|
||||
if (tabbarData && tabbarData.height) {
|
||||
// 使用实际高度
|
||||
const tabbarHeight = tabbarData.height; // tabbar 实际高度(px)
|
||||
const tabbarHeightRpx = tabbarHeight * 2;
|
||||
// 稍微减小一点,确保紧贴
|
||||
const adjustedBottom = Math.max(tabbarHeightRpx - 4, 0);
|
||||
this.$set(this, 'contentBottom', adjustedBottom + 'rpx');
|
||||
console.log('[DealAttribution] 使用实际tabbar高度:', tabbarHeight, 'px =', tabbarHeightRpx, 'rpx, 调整后:', adjustedBottom, 'rpx');
|
||||
} else {
|
||||
// 如果查询失败,使用默认值(无tabbar)
|
||||
this.$set(this, 'contentBottom', '0rpx');
|
||||
}
|
||||
}).exec();
|
||||
|
||||
// 延迟再次更新,确保DOM已渲染
|
||||
setTimeout(() => {
|
||||
// 再次查询并更新导航栏
|
||||
const query2 = uni.createSelectorQuery().in(this);
|
||||
query2.select('.nav-bar').boundingClientRect((data) => {
|
||||
if (data && data.height) {
|
||||
const actualHeight = data.height;
|
||||
const actualHeightRpx = actualHeight * 2;
|
||||
const statusBarHeightRpx = this.statusBarHeight * 2;
|
||||
const totalHeight = statusBarHeightRpx + actualHeightRpx;
|
||||
const adjustedHeight = Math.max(totalHeight - 4, 0);
|
||||
this.$set(this, 'contentTop', adjustedHeight + 'rpx');
|
||||
console.log('[DealAttribution] 延迟更新导航栏高度:', actualHeight, 'px =', actualHeightRpx, 'rpx, 总高度:', totalHeight, 'rpx, 调整后:', adjustedHeight, 'rpx');
|
||||
}
|
||||
}).exec();
|
||||
|
||||
// 再次查询 tabbar 高度
|
||||
const queryTabbar2 = uni.createSelectorQuery().in(this);
|
||||
queryTabbar2.select('.tabbar').boundingClientRect((tabbarData) => {
|
||||
if (tabbarData && tabbarData.height) {
|
||||
const tabbarHeight = tabbarData.height;
|
||||
const tabbarHeightRpx = tabbarHeight * 2;
|
||||
const adjustedBottom = Math.max(tabbarHeightRpx - 4, 0);
|
||||
this.$set(this, 'contentBottom', adjustedBottom + 'rpx');
|
||||
console.log('[DealAttribution] 延迟更新tabbar高度:', tabbarHeight, 'px =', tabbarHeightRpx, 'rpx, 调整后:', adjustedBottom, 'rpx');
|
||||
}
|
||||
}).exec();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
@@ -75,6 +200,11 @@ export default {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
}
|
||||
@@ -109,7 +239,15 @@ export default {
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
height: calc(100vh - 88rpx);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0; /* 先从顶部开始,通过内联样式动态设置 */
|
||||
bottom: 0; /* 先从底部开始,通过内联样式动态设置 */
|
||||
/* top和bottom值通过内联样式动态设置,覆盖上面的默认值 */
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
|
||||
Reference in New Issue
Block a user