微信小程序联调
This commit is contained in:
@@ -524,12 +524,18 @@ export default {
|
||||
|
||||
<style>
|
||||
.reception-form-wrapper {
|
||||
/* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */
|
||||
/* 由父组件传入 top(computedContentTop),避免不同机型写死 160rpx 导致大空白 */
|
||||
position: absolute;
|
||||
top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */
|
||||
top: 0; /* top 值通过父组件的内联 style 动态设置 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 96rpx; /* 底部导航栏高度 */
|
||||
/* #ifndef MP-WEIXIN */
|
||||
bottom: 96rpx; /* H5 环境:底部导航栏高度 */
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
/* 微信小程序:本页非 tabBar,容器可延伸到视口底部 */
|
||||
bottom: 0 !important;
|
||||
/* #endif */
|
||||
background-color: #F5F5F5;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@@ -50,6 +50,8 @@
|
||||
<!-- 开始接待表单 -->
|
||||
<common-begin-reception
|
||||
v-if="activeTab === 'reception'"
|
||||
class="reception-form-container"
|
||||
:style="{ top: computedContentTop || contentTop }"
|
||||
:initial-data="receptionForm"
|
||||
@cancel="onReceptionCancel"
|
||||
@save-success="onReceptionSaveSuccess"
|
||||
@@ -352,38 +354,22 @@ import ServiceListFurniture from "./serviceListFurniture.vue";
|
||||
computed: {
|
||||
// 计算导航栏和内容区域的位置(使用计算属性确保响应式)
|
||||
computedNavbarTop() {
|
||||
console.log('[FurnitureReception][computedNavbarTop] 计算导航栏位置');
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const statusBarHeight = systemInfo.statusBarHeight || 20;
|
||||
const navbarHeight = 44;
|
||||
const statusBarHeightRpx = statusBarHeight * 2;
|
||||
const navbarHeightRpx = navbarHeight * 2;
|
||||
const totalNavbarHeight = statusBarHeightRpx + navbarHeightRpx;
|
||||
const result = totalNavbarHeight + 'rpx';
|
||||
console.log('[FurnitureReception][computedNavbarTop] 计算结果:', {
|
||||
statusBarHeight,
|
||||
navbarHeight,
|
||||
totalNavbarHeight,
|
||||
result
|
||||
});
|
||||
return result;
|
||||
const windowWidth = systemInfo.windowWidth || systemInfo.screenWidth || 375;
|
||||
const pxToRpx = 750 / windowWidth;
|
||||
const totalNavbarHeightRpx = (statusBarHeight + navbarHeight) * pxToRpx;
|
||||
return totalNavbarHeightRpx + 'rpx';
|
||||
},
|
||||
computedContentTop() {
|
||||
console.log('[FurnitureReception][computedContentTop] 计算内容区域位置');
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const statusBarHeight = systemInfo.statusBarHeight || 20;
|
||||
const navbarHeight = 44;
|
||||
const statusBarHeightRpx = statusBarHeight * 2;
|
||||
const navbarHeightRpx = navbarHeight * 2;
|
||||
const totalNavbarHeight = statusBarHeightRpx + navbarHeightRpx;
|
||||
const result = (totalNavbarHeight + 72) + 'rpx'; // tab栏高度72rpx
|
||||
console.log('[FurnitureReception][computedContentTop] 计算结果:', {
|
||||
statusBarHeight,
|
||||
navbarHeight,
|
||||
totalNavbarHeight,
|
||||
result
|
||||
});
|
||||
return result;
|
||||
const windowWidth = systemInfo.windowWidth || systemInfo.screenWidth || 375;
|
||||
const pxToRpx = 750 / windowWidth;
|
||||
const totalNavbarHeightRpx = (statusBarHeight + navbarHeight) * pxToRpx;
|
||||
return (totalNavbarHeightRpx + 72) + 'rpx'; // tab栏高度72rpx
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
@@ -1,44 +1,47 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 服务状态列表 -->
|
||||
<scroll-view
|
||||
class="service-status-list"
|
||||
scroll-y
|
||||
@scrolltolower="onServiceStatusReachBottom">
|
||||
<view class="service-status-toolbar">
|
||||
<text class="toolbar-total">共{{ serviceStatusTotal }}条</text>
|
||||
<input
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.salesName"
|
||||
placeholder="所属销售姓名"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<input
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.customerName"
|
||||
placeholder="客户姓名"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<input
|
||||
v-if="isAdmin"
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.salesPhone"
|
||||
placeholder="销售电话"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<view class="toolbar-actions">
|
||||
<view class="toolbar-btn toolbar-btn--refresh" @click="onServiceStatusRefresh">
|
||||
<uni-icons type="refresh" size="18" color="#2A68FF"></uni-icons>
|
||||
<text>刷新</text>
|
||||
</view>
|
||||
<view class="service-list-container">
|
||||
<!-- 工具条(参考「服务记录」:放在 scroll-view 外,避免顶部空白/滚动错位) -->
|
||||
<view class="service-status-toolbar">
|
||||
<text class="toolbar-total">共{{ serviceStatusTotal }}条</text>
|
||||
<input
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.salesName"
|
||||
placeholder="所属销售姓名"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<input
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.customerName"
|
||||
placeholder="客户姓名"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<input
|
||||
v-if="isAdmin"
|
||||
class="toolbar-input"
|
||||
v-model="serviceStatusQuery.salesPhone"
|
||||
placeholder="销售电话"
|
||||
placeholder-style="color: #b0b0b0"
|
||||
confirm-type="search"
|
||||
@confirm="onServiceStatusSearch"
|
||||
/>
|
||||
<view class="toolbar-actions">
|
||||
<view class="toolbar-btn toolbar-btn--refresh" @click="onServiceStatusRefresh">
|
||||
<uni-icons type="refresh" size="18" color="#2A68FF"></uni-icons>
|
||||
<text>刷新</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务状态列表 -->
|
||||
<scroll-view
|
||||
class="service-list"
|
||||
scroll-y
|
||||
enable-flex
|
||||
@scrolltolower="onServiceStatusReachBottom">
|
||||
<view
|
||||
class="service-card"
|
||||
v-for="(item, index) in serviceStatusList"
|
||||
@@ -1020,18 +1023,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 最外层容器 */
|
||||
.service-status-list {
|
||||
/* 容器布局(参考「服务记录」组件):工具条固定在上,列表滚动占满剩余高度 */
|
||||
.service-list-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F5F5F5;
|
||||
padding: 24rpx 16rpx 0 16rpx;
|
||||
/* 只保留左右 padding,让 toolbar 紧贴 tab,下方不再出现大空白 */
|
||||
padding: 0 16rpx;
|
||||
box-sizing: border-box;
|
||||
/* #ifndef MP-WEIXIN */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.service-status-toolbar {
|
||||
@@ -1047,6 +1048,14 @@ export default {
|
||||
overflow-x: auto;
|
||||
min-height: 64rpx;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toolbar-total {
|
||||
|
||||
Reference in New Issue
Block a user