修改bug,优化导航
This commit is contained in:
zhouyanli
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="visitor-invite">
|
||||
<view class="visitor-invite" :class="{ 'no-scroll': pageFixed }">
|
||||
<!-- 标签切换：车辆来访/人员来访 -->
|
||||
<view class="tab-wrap">
|
||||
<view class="tab-item" :class="{ active: activeTab === 'car' }" @click="switchTab('car')">
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">访客姓名</view>
|
||||
<input class="input" placeholder="请输入访客姓名" v-model="form.name" />
|
||||
<input class="input" placeholder="请输入访客姓名" v-model="form.name" maxlength="20" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
@@ -107,7 +107,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 地址选择弹窗 -->
|
||||
<uni-popup ref="addressModalRef" type="bottom" :mask-click="false">
|
||||
<uni-popup ref="addressModalRef" type="bottom" :mask-click="false" @change="onAddressModalChange">
|
||||
<view class="modal-wrap">
|
||||
<view class="modal-title">选择来访地址</view>
|
||||
<view class="address-list">
|
||||
@@ -121,7 +121,7 @@
|
||||
</uni-popup>
|
||||
|
||||
<!-- 性别选择弹窗 -->
|
||||
<uni-popup ref="genderModalRef" type="bottom" :mask-click="false">
|
||||
<uni-popup ref="genderModalRef" type="bottom" :mask-click="false" @change="onGenderModalChange">
|
||||
<view class="modal-wrap">
|
||||
<view class="gender-list">
|
||||
<view class="gender-item" :class="{ active: item === form.gender }" v-for="item in genderList"
|
||||
@@ -172,8 +172,11 @@
|
||||
const addressModalRef = ref(null);
|
||||
const genderModalRef = ref(null);
|
||||
|
||||
// 页面固定标志
|
||||
const pageFixed = ref(false);
|
||||
|
||||
// 车牌号输入框聚焦索引
|
||||
const carFocusIndex = ref(0);
|
||||
const carFocusIndex = ref(-1);
|
||||
|
||||
// =========方法===========
|
||||
// 获取房屋列表
|
||||
@@ -215,6 +218,11 @@
|
||||
addressModalRef.value.close();
|
||||
};
|
||||
|
||||
// 地址弹窗状态变化
|
||||
const onAddressModalChange = (e) => {
|
||||
pageFixed.value = e.show;
|
||||
};
|
||||
|
||||
// 选择地址
|
||||
const selectAddress = (item) => {
|
||||
form.address = item.label;
|
||||
@@ -234,6 +242,11 @@
|
||||
genderModalRef.value.close();
|
||||
};
|
||||
|
||||
// 性别弹窗状态变化
|
||||
const onGenderModalChange = (e) => {
|
||||
pageFixed.value = e.show;
|
||||
};
|
||||
|
||||
// 车牌号单格输入
|
||||
const onCarInput = (index, e) => {
|
||||
const val = (e.detail && e.detail.value !== undefined) ? e.detail.value : (e.target ? e.target.value : '');
|
||||
@@ -406,6 +419,15 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
|
||||
@@ -1,20 +1,5 @@
|
||||
<template>
|
||||
<view class="visitor-page">
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-left" @tap="goBack">
|
||||
<image
|
||||
src="https://wuyeadmin.bugtc.com/images/home/arr-left.png"
|
||||
class="back-icon"
|
||||
/>
|
||||
</view>
|
||||
<view class="nav-title">访客邀请</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 标签切换栏 -->
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
@@ -33,8 +18,8 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 访客列表 - 固定高度，内部滚动 -->
|
||||
<scroll-view class="list-container" scroll-y :style="{ height: scrollHeight + 'px' }">
|
||||
<!-- 访客列表 -->
|
||||
<scroll-view class="list-container" scroll-y>
|
||||
<view
|
||||
class="visitor-item"
|
||||
v-for="(item, index) in filterdList"
|
||||
@@ -107,12 +92,10 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad,onShow} from "@dcloudio/uni-app";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import { getVisitorList } from "../api/api.js";
|
||||
|
||||
const activeTab = ref("waiting");
|
||||
const statusBarHeight = ref(0);
|
||||
const scrollHeight = ref(0);
|
||||
const visitorList = ref([]);
|
||||
|
||||
const mapData = (list) => {
|
||||
@@ -132,12 +115,11 @@ const mapData = (list) => {
|
||||
};
|
||||
|
||||
const fetchVisitorList = async () => {
|
||||
|
||||
try {
|
||||
const params = {
|
||||
userId: uni.getStorageSync("userId"),
|
||||
villageId:uni.getStorageSync('currentVillageId')
|
||||
}
|
||||
const params = {
|
||||
userId: uni.getStorageSync("userId"),
|
||||
villageId: uni.getStorageSync('currentVillageId')
|
||||
}
|
||||
const res = await getVisitorList(params);
|
||||
visitorList.value = mapData(res.data || []);
|
||||
} catch (err) {
|
||||
@@ -145,41 +127,14 @@ const fetchVisitorList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
onLoad(() => {
|
||||
const info = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = info.statusBarHeight || 0;
|
||||
|
||||
// rpx 转 px 比例
|
||||
const scale = info.windowWidth / 750;
|
||||
|
||||
// 各固定区域高度（rpx 转 px）
|
||||
const navPx = 90 * scale; // 导航栏
|
||||
const tabPx = 88 * scale; // tab栏
|
||||
const btnPx = 148 * scale; // 底部按钮区域
|
||||
|
||||
// 列表区域可用高度 = 窗口高度 - 状态栏 - 导航栏 - tab栏 - 底部按钮区
|
||||
scrollHeight.value = info.windowHeight - statusBarHeight.value - navPx - tabPx - btnPx;
|
||||
|
||||
|
||||
});
|
||||
onShow(()=>{
|
||||
fetchVisitorList();
|
||||
onShow(() => {
|
||||
fetchVisitorList();
|
||||
})
|
||||
|
||||
const filterdList = computed(() => {
|
||||
return visitorList.value.filter((item) => item.status === activeTab.value);
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
const source = uni.getStorageSync("sourcePage");
|
||||
if (source === "index") {
|
||||
uni.switchTab({ url: "/pages/index/index" });
|
||||
} else if (source === "serviceIndex") {
|
||||
uni.switchTab({ url: "/pages/serviceIndex/serviceIndex" });
|
||||
}
|
||||
uni.removeStorageSync("sourcePage");
|
||||
};
|
||||
|
||||
const viewDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: `/pageSubPack/visitor/visitor-detail?id=${item.id}`,
|
||||
@@ -194,49 +149,17 @@ const addInvitation = () => {
|
||||
<style scoped>
|
||||
/* 页面根容器 */
|
||||
.visitor-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #e2f0ff 0%, #f9f9f9 50%);
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
/* 标签切换栏 */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
/* border-bottom: 1rpx solid rgba(0, 0, 0, 0.04); */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -261,10 +184,16 @@ const addInvitation = () => {
|
||||
width: 126rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 32rpx;
|
||||
/* background-color: #2f77fd; */
|
||||
background: linear-gradient(to bottom, #2F77FD, #CEDFFF);
|
||||
}
|
||||
|
||||
/* 列表区域 */
|
||||
.list-container {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 访客卡片 */
|
||||
.visitor-item {
|
||||
margin-top: 24rpx;
|
||||
@@ -374,9 +303,9 @@ const addInvitation = () => {
|
||||
|
||||
/* 新增邀请按钮 */
|
||||
.add-btn-wrapper {
|
||||
height: 148rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 20rpx 0;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
|
||||
Reference in New Issue
Block a user