新增下拉刷新

This commit is contained in:
Zy
2026-08-20 09:29:12 +08:00
parent 42387c476d
commit ab868f8180
9 changed files with 97 additions and 445 deletions

View File

@@ -69,7 +69,7 @@
<script setup> <script setup>
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app' import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue' import TabsComponents from '@/components/tabs/tabs.vue'
import { getComplainList } from '@/api/complain.js' import { getComplainList } from '@/api/complain.js'
@@ -133,6 +133,10 @@ function init() {
}) })
}) })
.finally(() => { .finally(() => {
if (isRefresh) {
uni.stopPullDownRefresh()
isRefresh = false
}
isLoading.value = false isLoading.value = false
}) })
} }
@@ -156,6 +160,13 @@ function handleComplaint(id) {
}) })
} }
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
resetList()
})
function scrolltolower() { function scrolltolower() {
if (isLoading.value || !hasMore.value) { if (isLoading.value || !hasMore.value) {
return return

View File

@@ -71,7 +71,7 @@ import navBar from '@/components/navbar/navbar.vue'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { getInspectionList } from '@/api/insepction.js' import { getInspectionList } from '@/api/insepction.js'
import { parseTime } from '@/utils/time.js' import { parseTime } from '@/utils/time.js'
import { onShow } from '@dcloudio/uni-app' import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
const isComputed = (status: string) => { const isComputed = (status: string) => {
const awaitlist = ['未完成', '待执行', '执行中'] const awaitlist = ['未完成', '待执行', '执行中']
@@ -143,6 +143,10 @@ function getlist() {
}) })
}) })
.finally(() => { .finally(() => {
if (isRefresh) {
uni.stopPullDownRefresh()
isRefresh = false
}
isLoading.value = false isLoading.value = false
}) })
} }
@@ -188,10 +192,11 @@ function handleChangeTabs(val: number) {
getlist() getlist()
} }
// --------------------------------------------------------------------- // ---------------------------------------------------------------------
function init() {
onShow(() => {
hasMore.value = true
resetList() resetList()
}
onShow(() => {
init()
}) })
function resetList() { function resetList() {
list.value = [] list.value = []
@@ -201,6 +206,13 @@ function resetList() {
getlist() getlist()
} }
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
init()
})
// 返回上一页 // 返回上一页
const navBack = () => { const navBack = () => {
uni.navigateBack() uni.navigateBack()

View File

@@ -54,7 +54,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import TabsComponents from '@/components/tabs/tabs.vue' import TabsComponents from '@/components/tabs/tabs.vue'
import { onShow, onLoad } from '@dcloudio/uni-app' import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { InspectionListType, getInspectionList } from '@/api/insepction.js' import { InspectionListType, getInspectionList } from '@/api/insepction.js'
import { parseTime } from '@/utils/time.js' import { parseTime } from '@/utils/time.js'
@@ -129,6 +129,10 @@ function getlist() {
}) })
}) })
.finally(() => { .finally(() => {
if (isRefresh) {
uni.stopPullDownRefresh()
isRefresh = false
}
isLoading.value = false isLoading.value = false
}) })
} }
@@ -155,6 +159,13 @@ onLoad(options => {
activeValue.value = Number(options.type) activeValue.value = Number(options.type)
}) })
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
init()
})
onShow(() => { onShow(() => {
handleTabs(activeValue.value) handleTabs(activeValue.value)
}) })

View File

@@ -49,7 +49,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, nextTick, ref } from 'vue' import { computed, nextTick, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app' import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue' import TabsComponents from '@/components/tabs/tabs.vue'
import { getReplaceMainList } from '@/api/instrument.js' import { getReplaceMainList } from '@/api/instrument.js'
@@ -138,12 +138,23 @@ function getlist() {
}) })
.finally(() => { .finally(() => {
isLoading.value = false isLoading.value = false
if (isRefresh) {
isRefresh = false
uni.stopPullDownRefresh()
}
}) })
} }
onShow(() => { onShow(() => {
resetList() resetList()
}) })
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
resetList()
})
// 重置 // 重置
function resetList() { function resetList() {
infolist.value = [] infolist.value = []

View File

@@ -103,7 +103,7 @@
<script setup> <script setup>
import { ref, computed, nextTick } from 'vue' import { ref, computed, nextTick } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app' import { onReady, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue' import TabsComponents from '@/components/tabs/tabs.vue'
import NavBar from '@/components/navbar/navbar.vue' import NavBar from '@/components/navbar/navbar.vue'
import { getTicketHallList } from '@/api/ticket.js' import { getTicketHallList } from '@/api/ticket.js'
@@ -182,6 +182,10 @@ function getlist() {
}) })
.finally(() => { .finally(() => {
isLoading.value = false isLoading.value = false
if (isRefresh) {
uni.stopPullDownRefresh()
isRefresh.value = false
}
}) })
} }
@@ -254,6 +258,13 @@ function handleMain(id) {
} }
} }
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
init()
})
/* 预览图片 */ /* 预览图片 */
function handlePrivew(items, index) { function handlePrivew(items, index) {
if (items.length <= 0) return if (items.length <= 0) return

View File

@@ -80,7 +80,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { onReady, onShow, onLoad } from '@dcloudio/uni-app' import { onReady, onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue' import TabsComponents from '@/components/tabs/tabs.vue'
import NavBar from '@/components/navbar/navbar.vue' import NavBar from '@/components/navbar/navbar.vue'
import { getUserTicketlist } from '@/api/ticket.js' import { getUserTicketlist } from '@/api/ticket.js'
@@ -153,10 +153,14 @@ function getlist() {
hasMore.value = reportRecords.value.length < total.value hasMore.value = reportRecords.value.length < total.value
}) })
.catch(err => { .catch(err => {
uni.showToast({ icon: 'error', title: '网络异常' }) uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' })
}) })
.finally(() => { .finally(() => {
isLoading.value = false isLoading.value = false
if (isRefresh) {
uni.stopPullDownRefresh()
isRefresh = false
}
}) })
} }
onShow(() => { onShow(() => {
@@ -216,6 +220,14 @@ function handleComplted(row) {
} }
} }
} }
// 是否正在下拉刷新
let isRefresh = false
onPullDownRefresh(() => {
isRefresh = true
resetList()
})
/* 预览图片 */ /* 预览图片 */
function handlePrivew(imgs) { function handlePrivew(imgs) {
// if (imgs.length > 0) { // if (imgs.length > 0) {

View File

@@ -78,6 +78,12 @@
></image> ></image>
</view> </view>
</view> </view>
<view class="item">
<view class="label"> <text>预约时间</text> </view>
<view class="value">
<text> {{ repairInfo.orderDate }} </text>
</view>
</view>
</view> </view>
</view> </view>

View File

@@ -1,419 +0,0 @@
<template>
<view class="report-record-page page_padding">
<!-- 顶部导航栏 -->
<navBar @clickLeft="navBack" title="上报记录"></navBar>
<view class="hall_body flex-1 flex flex-col">
<!-- 状态筛选标签 -->
<TabsComponents
:tabslist="statusTabs"
:options="{ label: 'label', value: 'value' }"
@update="switchStatus"
></TabsComponents>
<!-- 类型筛选标签 -->
<view class="type-tabs">
<view
v-for="item in typeTabs"
:key="item.value"
class="type-tab-item"
:class="{ active: activeType === item.value }"
@tap="switchType(item.value)"
>
{{ item.label }}
</view>
</view>
<!-- 上报记录列表 -->
<scroll-view
class="record-list flex-1"
scroll-y
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
>
<!-- 空状态 -->
<view v-if="filteredRecords.length === 0" class="empty-state">
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无上报记录</text>
</view>
<!-- 记录卡片 -->
<view v-for="record in filteredRecords" :key="record.id" class="record-card">
<!-- 标题 + 状态标签 -->
<view class="card-header">
<text class="card-title">{{ record.title }}</text>
<view class="status-tag" :class="record.status">
{{ getStatusText(record.status) }}
</view>
</view>
<!-- 类型标签 -->
<view class="tag-group">
<view class="tag-item">{{ record.reportType }}</view>
<view class="tag-item">{{ record.category }}</view>
</view>
<!-- 内容 -->
<view class="card-content">
{{ record.content }}
</view>
<!-- 底部信息 -->
<view class="card-footer">
<text class="create-time">{{ record.createTime }}</text>
<text v-if="record.repairStatus !== 0" class="repairman"
>维修师傅:{{ record.repairman }}</text
>
<!-- <view class="share" v-if="record.repairStatus === 0">
<text>分配</text>
</view> -->
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import TabsComponents from '@/components/tabs/tabs.vue'
import NavBar from '@/components/navbar/navbar.vue'
// 导航栏/标签高度(适配不同设备)
const navHeight = ref(44)
const statusTabHeight = ref(88)
const typeTabHeight = ref(88)
// 筛选状态
const activeStatus = ref('all') // 全部/待分配/待解决/已完成
const activeType = ref('all') // 全部/公共报修/个人报修
// 状态筛选选项
const statusTabs = ref([
{ label: '全部', value: 'all' },
{ label: '待分配', value: 'pending' },
{ label: '待解决', value: 'processing' },
{ label: '已完成', value: 'completed' }
])
// 类型筛选选项
const typeTabs = ref([
{ label: '全部', value: 'all' },
{ label: '公共报修', value: 'public' },
{ label: '个人报修', value: 'private' }
])
// 模拟上报记录数据(实际项目替换为接口请求)
const reportRecords = ref([
{
id: 1,
title: '标题巴拉巴拉巴拉',
status: 'pending', // pending/processing/completed
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: '',
repairStatus: 0 // 0 待分配,1待解决 2已完成
},
{
id: 2,
title: '标题巴拉巴拉巴拉',
status: 'processing',
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: '张三',
repairStatus: 1 // 0 待分配,1待解决 2已完成
},
{
id: 3,
title: '标题巴拉巴拉巴拉',
status: 'completed',
reportType: '公共报修',
category: '路灯',
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
createTime: '2026-08-01 10:05:46',
repairman: '张三',
repairStatus: 2 // 0 待分配,1待解决 2已完成
}
])
// 筛选后的记录
const filteredRecords = computed(() => {
return reportRecords.value.filter(record => {
// 状态筛选
const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
// 类型筛选
const typeMatch =
activeType.value === 'all' ||
record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
return statusMatch && typeMatch
})
})
// 切换状态(全部/待分配/待解决/已完成)筛选
const switchStatus = value => {
activeStatus.value = value
}
// 切换类型(公共/个人)筛选
const switchType = value => {
activeType.value = value
}
// 获取状态文本
const getStatusText = status => {
const statusMap = {
pending: '待分配',
processing: '待解决',
completed: '已完成'
}
return statusMap[status] || ''
}
// 页面渲染完成后适配高度
onReady(() => {
// 可根据实际设备调整高度
uni.getDeviceInfo({
success: res => {
if (res.platform === 'ios') {
navHeight.value = 44
} else {
navHeight.value = 48
}
}
})
})
// 返回上一页
const navBack = () => {
uni.switchTab({
url: '/pages/my/my'
})
}
/* 0 待分配,1待解决 2已完成*/
function handleMain(id) {
const find = reportRecords.value.find(item => item.id === id)
if (find) {
const status = find.repairStatus
if (status === 2) {
uni.navigateTo({
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
})
} else {
uni.navigateTo({
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
})
}
}
}
/* 预览图片 */
function handlePrivew(imgs) {
// if (imgs.length > 0) {
// uni.previewImage({
// urls: imgs,
// success(e) {
// console.log(JSON.stringify(e))
// }
// })
// }
}
</script>
<style scoped>
.report-record-page {
width: 100%;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
box-sizing: border-box;
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
}
.hall_body {
padding: 0 40rpx;
overflow: hidden;
position: relative;
}
/* 状态筛选标签 */
.status-tabs {
display: flex;
/* background-color: #fff; */
padding: 0 40rpx;
height: 88rpx;
align-items: center;
}
/* 类型筛选标签 */
.type-tabs {
display: flex;
height: 48rpx;
/* background-color: #fff; */
margin: 20rpx 0;
justify-content: flex-start;
}
.type-tabs > .type-tab-item:not(:last-child) {
margin-right: 20rpx;
}
.type-tab-item {
width: 142rpx;
height: 48rpx;
border-radius: 24rpx;
border: 2rpx solid #999999;
font-weight: 400;
font-size: 28rpx;
color: #999999;
line-height: 48rpx;
text-align: center;
}
.type-tab-item.active {
color: #4d5dfa;
border: 2rpx solid #4d5dfa;
border-radius: 24rpx;
}
/* 记录列表 */
.record-list {
box-sizing: border-box;
padding-bottom: 40rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
}
/* 记录卡片 */
.record-card {
background-color: #fff;
border-radius: 16rpx;
padding: 34rpx 32rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.card-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20rpx;
}
.card-title {
margin-right: 20rpx;
font-weight: 450;
font-size: 32rpx;
color: #222222;
line-height: 40rpx;
}
/* 状态标签 */
.status-tag {
width: 82rpx;
height: 30rpx;
border-radius: 15rpx;
font-weight: 400;
font-size: 20rpx;
color: #ffffff;
line-height: 30rpx;
text-align: center;
line-height: 30rpx;
}
.status-tag.pending {
background-color: #e34d59; /* 待分配-红色 */
}
.status-tag.processing {
background-color: #09c2bd; /* 待解决-绿色 */
}
.status-tag.completed {
background-color: #4d5dfa; /* 已完成-蓝色 */
}
/* 类型标签组 */
.tag-group {
display: flex;
margin-bottom: 20rpx;
}
.tag-group > .tag-item:not(:last-child) {
margin-right: 20rpx;
}
.tag-item {
width: 112rpx;
height: 42rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 1rpx solid #999999;
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 42rpx;
text-align: center;
}
/* 内容 */
.card-content {
margin-bottom: 20rpx;
font-weight: 450;
font-size: 28rpx;
color: #666666;
line-height: 40rpx;
letter-spacing: 2rpx;
}
/* 图片 */
.card-image {
display: grid;
grid-template-columns: repeat(3, 1fr);
min-width: 186rpx;
min-height: 104rpx;
margin-bottom: 20rpx;
}
.images {
width: 186rpx;
height: 104rpx;
margin-right: 20rpx;
}
/* 底部信息 */
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #999;
}
.share {
width: 127rpx;
height: 44rpx;
background: #4d5dfa;
border-radius: 22rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
line-height: 44rpx;
text-align: center;
}
.repairman {
color: #999;
}
</style>

View File

@@ -88,7 +88,8 @@
"pages": [{ "pages": [{
"path": "toDays_inscpection", "path": "toDays_inscpection",
"style": { "style": {
"navigationBarTitleText": "今日巡检" "navigationBarTitleText": "今日巡检",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -101,7 +102,8 @@
"path": "inspection_record", "path": "inspection_record",
"style": { "style": {
"navigationBarTitleText": "巡检记录", "navigationBarTitleText": "巡检记录",
"navigationStyle": "custom" "navigationStyle": "custom",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -117,7 +119,8 @@
"pages": [{ "pages": [{
"path": "replacement_record", "path": "replacement_record",
"style": { "style": {
"navigationBarTitleText": "仪表换新记录" "navigationBarTitleText": "仪表换新记录",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -156,7 +159,8 @@
"path": "Details", "path": "Details",
"style": { "style": {
"navigationBarTitleText": "投诉详情", "navigationBarTitleText": "投诉详情",
"navigationBarBackgroundColor": "#f9f9f9" "navigationBarBackgroundColor": "#f9f9f9",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -187,7 +191,8 @@
"path": "hall", "path": "hall",
"style": { "style": {
"navigationBarTitleText": "工单大厅", "navigationBarTitleText": "工单大厅",
"navigationStyle": "custom" "navigationStyle": "custom",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -206,7 +211,8 @@
"path": "myticket", "path": "myticket",
"style": { "style": {
"navigationBarTitleText": "我的工单", "navigationBarTitleText": "我的工单",
"navigationStyle": "custom" "navigationStyle": "custom",
"enablePullDownRefresh": true
} }
}, },
{ {
@@ -215,15 +221,6 @@
"navigationBarTitleText": "维修完成", "navigationBarTitleText": "维修完成",
"navigationBarBackgroundColor": "#fff" "navigationBarBackgroundColor": "#fff"
} }
},
{
"path": "reportingRecord",
"style": {
"navigationBarTitleText": "上报记录",
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"onReachBottomDistance": 100
}
} }
] ]
}, },