修改并优化了一些功能及bug
This commit is contained in:
@@ -1,10 +1,23 @@
|
||||
<template>
|
||||
<view class=" page padding">
|
||||
<view class="padding radius bg-white list-list margin-bottom" v-for="item in hiddenDangerList"
|
||||
<!-- 顶部状态筛选 Tab -->
|
||||
<scroll-view class="status-tabs" scroll-x :show-scrollbar="false">
|
||||
<view class="status-tabs-inner">
|
||||
<view v-for="(tab, index) in statusTabs" :key="index" class="status-tab-item"
|
||||
:class="{ 'status-tab-active': activeTab === index }" @click="activeTab = index">
|
||||
<text class="status-tab-text">{{ tab.label }}</text>
|
||||
<view v-if="activeTab === index" class="status-tab-bar"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view v-if="filteredList.length === 0" class="empty-tip text-gray text-center padding">暂无数据</view>
|
||||
|
||||
<view class="padding radius bg-white list-list margin-bottom" v-for="item in filteredList"
|
||||
:key="item.hazardId">
|
||||
<view class="flex justify-between margin-bottom">
|
||||
<view class="text-bold text-black">{{item.title}}</view>
|
||||
<view class="text-blue">{{item.statusName}}</view>
|
||||
<view class="text-blue" style="white-space: nowrap; flex-shrink: 0; margin-left: 16rpx;">{{item.statusName}}</view>
|
||||
</view>
|
||||
<view class="flex margin-bottom">
|
||||
<view class="text-gray">隐患等级:</view>
|
||||
@@ -56,12 +69,12 @@
|
||||
</view>
|
||||
<scroll-view class="popup-body" scroll-y>
|
||||
<view class="flex margin-bottom">
|
||||
<view class="text-gray">隐患图片/视频</view>
|
||||
<view class="text-gray">隐患图片</view>
|
||||
<view class="text-red">*</view>
|
||||
</view>
|
||||
<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="10"></up-upload>
|
||||
<view class="text-gray text-sm">必填:请上传现场照片或者视频作为隐患证据</view>
|
||||
<view class="text-gray text-sm">必填:请上传现场照片作为隐患证据</view>
|
||||
<view class="ai-btn-wrapper margin-top">
|
||||
<button class="ai-analyze-btn" :loading="aiAnalyzing" :disabled="aiAnalyzing" @click="handleAiAnalyze">
|
||||
<text v-if="!aiAnalyzing" class="cuIcon-magic ai-btn-icon"></text>
|
||||
@@ -685,12 +698,31 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 状态筛选 Tab
|
||||
const statusTabs = ref([
|
||||
{ label: '全部状态', value: '' },
|
||||
{ label: '待验收', value: '待验收' },
|
||||
{ label: '待整改', value: '待整改' },
|
||||
{ label: '待交办', value: '待交办' },
|
||||
{ label: '验收通过', value: '验收通过' }
|
||||
]);
|
||||
const activeTab = ref(0);
|
||||
|
||||
// 根据选中 tab 过滤列表
|
||||
const filteredList = computed(() => {
|
||||
const currentTab = statusTabs.value[activeTab.value];
|
||||
if (!currentTab || !currentTab.value) {
|
||||
return hiddenDangerList.value;
|
||||
}
|
||||
return hiddenDangerList.value.filter(item => item.statusName === currentTab.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #EBF2FC;
|
||||
padding-top: 100rpx; // 给顶部固定Tab留出空间
|
||||
padding-bottom: 120rpx; // 给底部按钮留出空间
|
||||
}
|
||||
|
||||
@@ -730,6 +762,8 @@
|
||||
.level-tag {
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 轻微隐患
|
||||
@@ -991,6 +1025,54 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 状态筛选 Tab 样式
|
||||
.status-tabs {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
white-space: nowrap;
|
||||
background: #fff;
|
||||
padding: 0 10rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.status-tabs-inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.status-tab-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 28rpx;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-tab-active .status-tab-text {
|
||||
color: #2667E9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-tab-bar {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
background: #2667E9;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user