微信小程序联调

This commit is contained in:
zhonghua.li
2026-04-18 07:52:47 +08:00
parent 36b8784bc1
commit d18a546915
23 changed files with 199 additions and 106 deletions

View File

@@ -524,12 +524,18 @@ export default {
<style>
.reception-form-wrapper {
/* 使用绝对定位从tab页底部开始高度计算100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */
/* 由父组件传入 topcomputedContentTop避免不同机型写死 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%;

View File

@@ -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() {

View File

@@ -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 {