巡检点上传图片修正
This commit is contained in:
Zy
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="report-record-page page_padding">
|
||||
<!-- 顶部导航栏 -->
|
||||
<NavBar title="工单大厅"></NavBar>
|
||||
<view class="hall_body flex-1 flex flex-col">
|
||||
<navBar @clickLeft="navBack" title="工单大厅"></navBar>
|
||||
<view class="hall_body flex flex-col">
|
||||
<view class="bgaction"> </view>
|
||||
<!-- 状态筛选标签 -->
|
||||
<TabsComponents
|
||||
:tabslist="statusTabs"
|
||||
@@ -24,23 +25,31 @@
|
||||
</view>
|
||||
|
||||
<!-- 上报记录列表 -->
|
||||
<scroll-view
|
||||
class="record-list flex-1"
|
||||
scroll-y
|
||||
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
|
||||
>
|
||||
<scroll-view class="record-list" scroll-y lower-threshold="60" @scrolltolower="scrolltolower">
|
||||
<!-- 空状态 -->
|
||||
<view v-if="filteredRecords.length === 0" class="empty-state">
|
||||
<view v-if="reportRecords.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
|
||||
v-for="(record, index) in reportRecords"
|
||||
:key="index"
|
||||
class="record-card"
|
||||
@tap="handleMain(record.id)"
|
||||
>
|
||||
<!-- 标题 + 状态标签 -->
|
||||
<view class="card-header">
|
||||
<text class="card-title">{{ record.title }}</text>
|
||||
<view class="status-tag" :class="record.status">
|
||||
{{ getStatusText(record.status) }}
|
||||
<view
|
||||
class="status-tag"
|
||||
:class="{
|
||||
pending: record.repairStatus === 0,
|
||||
processing: record.repairStatus === 1,
|
||||
completed: record.repairStatus === 2
|
||||
}"
|
||||
>
|
||||
{{ getStatusText(record.repairStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -55,8 +64,9 @@
|
||||
{{ record.content }}
|
||||
</view>
|
||||
<!-- 工单图片 -->
|
||||
<view class="card-image">
|
||||
<view class="card-image" v-if="record.images.length > 0">
|
||||
<image
|
||||
lazy-load
|
||||
v-for="(item, index) in record.images"
|
||||
:key="index"
|
||||
:src="item"
|
||||
@@ -83,26 +93,23 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, nextTick } 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 activeStatus = ref('0') // 全部/待分配/待解决/已完成
|
||||
const activeType = ref('all') // 全部/公共报修/个人报修
|
||||
|
||||
// 状态筛选选项
|
||||
const statusTabs = ref([
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '待分配', value: 'pending' },
|
||||
{ label: '待解决', value: 'processing' },
|
||||
{ label: '已完成', value: 'completed' }
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '待分配', value: 1 },
|
||||
{ label: '待解决', value: 2 },
|
||||
{ label: '已完成', value: 3 }
|
||||
])
|
||||
|
||||
// 类型筛选选项
|
||||
@@ -113,97 +120,105 @@ const typeTabs = ref([
|
||||
])
|
||||
|
||||
// 模拟上报记录数据（实际项目替换为接口请求）
|
||||
const reportRecords = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'pending', // pending/processing/completed
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
repairman: '',
|
||||
images: [
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93'
|
||||
],
|
||||
repairStatus: 0 // 0 待分配，1待解决 2已完成
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'processing',
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
repairman: '张三',
|
||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||
repairStatus: 1 // 0 待分配，1待解决 2已完成
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'completed',
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||
repairman: '张三',
|
||||
repairStatus: 2 // 0 待分配，1待解决 2已完成
|
||||
}
|
||||
])
|
||||
const reportRecords = ref([])
|
||||
|
||||
// 筛选后的记录
|
||||
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 queryParmas = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 5
|
||||
})
|
||||
const isLoading = ref(false) // 加载锁
|
||||
const hasMore = ref(true) // 是否还有更多数据
|
||||
const total = ref(21)
|
||||
function scrolltolower() {
|
||||
// 必须加这两个判断！
|
||||
if (isLoading.value || !hasMore.value) {
|
||||
return
|
||||
}
|
||||
queryParmas.value.pageNum += 1
|
||||
getlist()
|
||||
}
|
||||
function getlist() {
|
||||
// 1. 如果正在加载或没有更多数据，直接返回
|
||||
if (isLoading.value || !hasMore.value) return
|
||||
// 2. 开启锁
|
||||
isLoading.value = true
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const { pageNum, pageSize } = queryParmas.value
|
||||
|
||||
const startId = (pageNum - 1) * pageSize + 1
|
||||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||
const realId = startId + index // ✅ 修复 ID 错误
|
||||
|
||||
// ✅ 随机生成 0、1、2
|
||||
const randomStatus = Math.floor(Math.random() * 3)
|
||||
return {
|
||||
id: realId,
|
||||
title: '标题巴拉巴拉巴拉' + startId + 1,
|
||||
status: 'completed',
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||
repairman: '张三',
|
||||
repairStatus: randomStatus // 0 待分配，1待解决 2已完成
|
||||
}
|
||||
})
|
||||
|
||||
// 追加数据（正确方式）
|
||||
reportRecords.value = [...reportRecords.value, ...arr]
|
||||
// 判断是否还有更多
|
||||
hasMore.value = reportRecords.value.length < total.value
|
||||
isLoading.value = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
getlist()
|
||||
function resetList() {
|
||||
reportRecords.value = []
|
||||
queryParmas.value.pageNum = 1
|
||||
hasMore.value = true
|
||||
getlist()
|
||||
}
|
||||
// 切换状态（全部/待分配/待解决/已完成）筛选
|
||||
const switchStatus = value => {
|
||||
activeStatus.value = value
|
||||
resetList()
|
||||
}
|
||||
|
||||
// 切换类型（公共/个人）筛选
|
||||
const switchType = value => {
|
||||
activeType.value = value
|
||||
resetList()
|
||||
}
|
||||
|
||||
const statusMap = ['待分配', '待解决', '已完成']
|
||||
// 获取状态文本
|
||||
const getStatusText = status => {
|
||||
const statusMap = {
|
||||
pending: '待分配',
|
||||
processing: '待解决',
|
||||
completed: '已完成'
|
||||
}
|
||||
return statusMap[status] || ''
|
||||
}
|
||||
|
||||
// 页面渲染完成后适配高度
|
||||
onReady(() => {
|
||||
// 可根据实际设备调整高度
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
if (res.platform === 'ios') {
|
||||
navHeight.value = 44
|
||||
} else {
|
||||
navHeight.value = 48
|
||||
}
|
||||
// 返回上一页
|
||||
const navBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
/* 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) {
|
||||
@@ -219,18 +234,25 @@ function handlePrivew(imgs) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.report-record-page {
|
||||
.bgaction {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25%);
|
||||
}
|
||||
.report-record-page {
|
||||
height: 100vh;
|
||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
|
||||
}
|
||||
|
||||
.hall_body {
|
||||
flex: 1;
|
||||
padding: 0 40rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
/* 状态筛选标签 */
|
||||
.status-tabs {
|
||||
@@ -241,36 +263,6 @@ function handlePrivew(imgs) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-tab-item {
|
||||
/* flex: 1; */
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-right: 60rpx;
|
||||
text-align: left;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-tab-item.active {
|
||||
color: #4d5dfa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80rpx;
|
||||
height: 8rpx;
|
||||
background: linear-gradient(to bottom, #4d5dfa, #bac0fa);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
/* 类型筛选标签 */
|
||||
.type-tabs {
|
||||
display: flex;
|
||||
@@ -304,6 +296,8 @@ function handlePrivew(imgs) {
|
||||
.record-list {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 40rpx;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="report-record-page page_padding">
|
||||
<!-- 顶部导航栏 -->
|
||||
<NavBar title="我的工单"></NavBar>
|
||||
<navBar @clickLeft="navBack" title="我的工单"></navBar>
|
||||
<view class="hall_body flex-1 flex flex-col">
|
||||
<!-- 状态筛选标签 -->
|
||||
<TabsComponents
|
||||
@@ -27,15 +27,21 @@
|
||||
<scroll-view
|
||||
class="record-list flex-1"
|
||||
scroll-y
|
||||
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
|
||||
lower-threshold="60"
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
<!-- 空状态 -->
|
||||
<view v-if="filteredRecords.length === 0" class="empty-state">
|
||||
<view v-if="reportRecords.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
|
||||
v-for="(record, index) in reportRecords"
|
||||
@tap="handleComplted(record.id)"
|
||||
:key="index"
|
||||
class="record-card"
|
||||
>
|
||||
<!-- 标题 + 状态标签 -->
|
||||
<view class="card-header">
|
||||
<text class="card-title">{{ record.title }}</text>
|
||||
@@ -55,24 +61,24 @@
|
||||
{{ record.content }}
|
||||
</view>
|
||||
<!-- 工单图片 -->
|
||||
<view class="card-image">
|
||||
<!-- <view class="card-image">
|
||||
<image
|
||||
lazy-load
|
||||
v-for="(item, index) in record.images"
|
||||
:key="index"
|
||||
:src="item"
|
||||
class="images"
|
||||
mode="scaleToFill"
|
||||
@tap="handlePrivew(record.images)"
|
||||
></image>
|
||||
</view>
|
||||
</view -->
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<view class="card-footer">
|
||||
<text class="create-time">{{ record.createTime }}</text>
|
||||
<text v-if="record.repairStatus === 1" class="repairman"
|
||||
<text v-if="record.repairStatus === 2" class="repairman"
|
||||
>维修师傅：{{ record.repairman }}</text
|
||||
>
|
||||
<view class="share" v-if="record.repairStatus === 0">
|
||||
<view class="share" v-if="record.repairStatus === 1">
|
||||
<text>维修完成</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -121,7 +127,7 @@ const reportRecords = ref([
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
repairman: '',
|
||||
repairman: '张胜',
|
||||
images: [
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
@@ -129,46 +135,74 @@ const reportRecords = ref([
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93'
|
||||
],
|
||||
repairStatus: 0 // 0 待分配，1待解决 2已完成
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'processing',
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
repairman: '张三',
|
||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||
repairStatus: 1 // 0 待分配，1待解决 2已完成
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'completed',
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||
repairman: '张三',
|
||||
repairStatus: 2 // 0 待分配，1待解决 2已完成
|
||||
repairStatus: 1 // 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 queryParmas = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
value: ''
|
||||
})
|
||||
const isLoading = ref(false) // 加载锁
|
||||
const hasMore = ref(true) // 是否还有更多数据
|
||||
const total = ref(21)
|
||||
function scrolltolower() {
|
||||
// 必须加这两个判断！
|
||||
if (isLoading.value || !hasMore.value) {
|
||||
return
|
||||
}
|
||||
queryParmas.value.pageNum += 1
|
||||
getlist()
|
||||
}
|
||||
function getlist() {
|
||||
// 1. 如果正在加载或没有更多数据，直接返回
|
||||
if (isLoading.value || !hasMore.value) return
|
||||
// 2. 开启锁
|
||||
isLoading.value = true
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const { pageNum, pageSize } = queryParmas.value
|
||||
|
||||
const startId = (pageNum - 1) * pageSize + 1
|
||||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||
const realId = startId + index
|
||||
const randomStatus = Math.floor(Math.random() * 2)
|
||||
return {
|
||||
id: realId,
|
||||
title: '标题巴拉巴拉巴拉',
|
||||
status: 'processing', // pending/processing/completed
|
||||
reportType: '公共报修',
|
||||
category: '路灯',
|
||||
content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
createTime: '2026-08-01 10:05:46',
|
||||
repairman: '',
|
||||
images: [
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93',
|
||||
'https://picsum.photos/93'
|
||||
],
|
||||
repairStatus: randomStatus // 1待解决 2已完成
|
||||
}
|
||||
})
|
||||
// 追加数据（正确方式）
|
||||
reportRecords.value = [...reportRecords.value, ...arr]
|
||||
// 判断是否还有更多
|
||||
hasMore.value = reportRecords.value.length < total.value
|
||||
isLoading.value = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
getlist()
|
||||
function resetList() {
|
||||
reportRecords.value = []
|
||||
queryParmas.value.pageNum = 1
|
||||
hasMore.value = true
|
||||
getlist()
|
||||
}
|
||||
|
||||
// 切换状态（全部/待分配/待解决/已完成）筛选
|
||||
const switchStatus = value => {
|
||||
@@ -181,28 +215,34 @@ const switchType = value => {
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const statusMap = {
|
||||
processing: '待解决',
|
||||
completed: '已完成'
|
||||
}
|
||||
const getStatusText = status => {
|
||||
const statusMap = {
|
||||
processing: '待解决',
|
||||
completed: '已完成'
|
||||
}
|
||||
return statusMap[status] || ''
|
||||
}
|
||||
|
||||
// 页面渲染完成后适配高度
|
||||
onReady(() => {
|
||||
// 可根据实际设备调整高度
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
if (res.platform === 'ios') {
|
||||
navHeight.value = 44
|
||||
} else {
|
||||
navHeight.value = 48
|
||||
}
|
||||
// 返回上一页
|
||||
const navBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
// 1待解决 2已完成
|
||||
function handleComplted(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=myticket`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${true}&path=myticket`
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
/* 预览图片 */
|
||||
function handlePrivew(imgs) {
|
||||
// if (imgs.length > 0) {
|
||||
@@ -219,8 +259,7 @@ function handlePrivew(imgs) {
|
||||
<style scoped>
|
||||
.report-record-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||
@@ -302,6 +341,7 @@ function handlePrivew(imgs) {
|
||||
.record-list {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 40rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
|
||||
@@ -55,9 +55,10 @@ const form = ref({
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleSelecthouse() {
|
||||
console.log('compltee')
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
346
wuye-manager-uniapp/pageSubPack/ticket/repairMain.vue
Normal file
346
wuye-manager-uniapp/pageSubPack/ticket/repairMain.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="repairMain h-full">
|
||||
<view class="stop">
|
||||
<Stops :steps="stepList" :current="currentStep" color="#4d5dfa">
|
||||
<template #item="{ index, status, data }">
|
||||
<view
|
||||
class="items"
|
||||
:class="{
|
||||
active: currentStep >= index,
|
||||
nobottom: index >= stepList.length - 1
|
||||
}"
|
||||
>
|
||||
<view class="title">
|
||||
<text>{{ data.title }}</text>
|
||||
</view>
|
||||
<view class="flex justify-between">
|
||||
<span class="subtitle">{{ data.desc }}</span>
|
||||
<span class="subtime" v-if="currentStep > index">2026/08/01 10:30:35</span>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</Stops>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="info_title">
|
||||
<text>保修信息</text>
|
||||
</view>
|
||||
<view class="info_body">
|
||||
<view class="item">
|
||||
<view class="label"> <text>报修房屋</text> </view>
|
||||
<view class="value">
|
||||
<text>{{ repairInfo.houseName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>维修项目</text> </view>
|
||||
<view class="value">
|
||||
<text>{{ repairInfo.repairProject }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>标题</text> </view>
|
||||
<view class="value">
|
||||
<text> {{ repairInfo.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item descrition">
|
||||
<view class="label"> <text>问题描述</text> </view>
|
||||
<view class="value">
|
||||
<text>{{ repairInfo.descrtion }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>手机号</text> </view>
|
||||
<view class="value">
|
||||
<text> {{ repairInfo.phone }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>报修时间</text> </view>
|
||||
<view class="value">
|
||||
<text> {{ repairInfo.time }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item photobox">
|
||||
<view class="label"> <text>问题照片</text> </view>
|
||||
<view class="value">
|
||||
<image
|
||||
v-for="(item, index) in repairInfo.photo"
|
||||
:key="index"
|
||||
class="images"
|
||||
:src="item"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info" v-if="(currentStep >= 2 && prevPath === 'hall') || currentStep > 2">
|
||||
<view class="info_title">
|
||||
<text>维修信息</text>
|
||||
</view>
|
||||
<view class="info_body">
|
||||
<view class="item">
|
||||
<view class="label"> <text>姓名</text> </view>
|
||||
<view class="value"> {{ repairInfo.repairUser.name }} </view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>状态</text> </view>
|
||||
<view class="value"> {{ repairInfo.repairUser.status }} </view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>角色</text> </view>
|
||||
<view class="value"> {{ repairInfo.repairUser.role }} </view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label"> <text>手机号</text> </view>
|
||||
<view class="value"> {{ repairInfo.repairUser.phone }} </view>
|
||||
</view>
|
||||
<view class="" v-if="currentStep >= 3">
|
||||
<view class="item descrition flex-col">
|
||||
<view class="label"> <text>问题描述</text> </view>
|
||||
<view class="value"> {{ repairInfo.repairUser.descrtion }} </view>
|
||||
</view>
|
||||
<view class="item photobox">
|
||||
<view class="label"> <text>问题照片</text> </view>
|
||||
<view class="value">
|
||||
<image
|
||||
v-for="(item, index) in repairInfo.repairUser.photo"
|
||||
:key="index"
|
||||
class="images"
|
||||
:src="item"
|
||||
mode=""
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action_btn" @tap="handleSelecthouse" v-if="currentStep === 1">
|
||||
<text>分配</text>
|
||||
</view>
|
||||
<view class="action_btn" @tap="handleRepairCompluted" v-if="currentStep === 2 && Showbtn">
|
||||
<text>维修完成</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import Stops from '@/components/stops/stops.vue'
|
||||
// --------------------------------------
|
||||
/** 维修步骤：0提交 1分配 2维修完成 / 待解决 3记录完成 完成*/
|
||||
const currentStep = ref(2)
|
||||
|
||||
// 步骤数据
|
||||
const stepList = ref([
|
||||
{ title: '提交维修信息', desc: '提交报修成功', time: '2026/08/01 10:30:26' },
|
||||
{ title: '待分配', desc: '等待物业派单中', time: '2026/08/01 10:32:21' },
|
||||
{ title: '维修/待解决', desc: '维修人员进行维修', time: '2026/08/01 10:38:07' },
|
||||
{ title: '维修完成', desc: '填写维修记录', time: '2026/08/01 10:40:33' }
|
||||
])
|
||||
// --------------------------------------
|
||||
const queryParams = ref({
|
||||
id: null
|
||||
})
|
||||
const Showbtn = ref(false)
|
||||
const prevPath = ref('')
|
||||
const repairInfo = ref({
|
||||
houseName: '桂花园（别墅）2号楼2层',
|
||||
repairProject: '照明-路灯',
|
||||
title: '1栋楼下道路灯不亮了',
|
||||
descrtion: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
phone: '15688888888',
|
||||
time: '2023-08-01 15:30',
|
||||
photo: [
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80'
|
||||
],
|
||||
|
||||
repairUser: {
|
||||
name: '盘下但',
|
||||
status: '正常',
|
||||
role: '维修人员',
|
||||
phone: '15688888888',
|
||||
descrtion: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
photo: [
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80',
|
||||
'https://picsum.photos/80'
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(options => {
|
||||
queryParams.value.id = options.id
|
||||
Showbtn.value = JSON.parse(options.showbtn)
|
||||
prevPath.value = options.path
|
||||
})
|
||||
|
||||
// --------------------------------------
|
||||
/** 选择维修人员 */
|
||||
function handleSelecthouse() {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/ticket/shareUser',
|
||||
events: {
|
||||
backData: val => {
|
||||
currentStep.value += 1
|
||||
//api;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 跳转到维修完成 */
|
||||
function handleRepairCompluted() {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/ticket/repairCompleted'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.repairMain {
|
||||
padding: 20rpx 40rpx;
|
||||
background-color: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.stop {
|
||||
padding: 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
&:deep(.items) {
|
||||
height: 120rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
&.nobottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #4d5dfa;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 550;
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.subtime {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 报修信息
|
||||
.info {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 42rpx;
|
||||
padding-bottom: 34rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_title {
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 550;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
line-height: 88rpx;
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 46rpx;
|
||||
&.descrition {
|
||||
flex-direction: column;
|
||||
margin-bottom: 30rpx;
|
||||
.label {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.value {
|
||||
height: 162rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx 30rpx 26rpx 28rpx;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
&.photobox {
|
||||
flex-direction: column;
|
||||
.label {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
.images {
|
||||
margin: 10rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
line-height: 36rpx;
|
||||
width: 45%;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 36rpx;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action_btn {
|
||||
width: 670rpx;
|
||||
height: 80rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
background: #4d5dfa;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
415
wuye-manager-uniapp/pageSubPack/ticket/reportingRecord.vue
Normal file
415
wuye-manager-uniapp/pageSubPack/ticket/reportingRecord.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<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;
|
||||
gap: 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;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 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);
|
||||
gap: 20rpx;
|
||||
min-width: 186rpx;
|
||||
min-height: 104rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.images {
|
||||
width: 186rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
/* 底部信息 */
|
||||
.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>
|
||||
@@ -22,11 +22,16 @@
|
||||
</view>
|
||||
<!-- 已经选择人数 -->
|
||||
<view class="checkoutedUser_box">
|
||||
<text>已选(1/1)</text>
|
||||
<text>潘霞通</text>
|
||||
<text>已选({{ checkoutUserid ? 1 : 0 }}/1)</text>
|
||||
<text class="checkoutUseName" v-if="checkoutInfo">{{ checkoutInfo.name }}</text>
|
||||
</view>
|
||||
<!-- srcoll -->
|
||||
<scroll-view scroll-y="true" class="flex-1 overflow-auto">
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="flex-1 overflow-auto"
|
||||
lower-threshold="60"
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
<radio-group @change="radioChange">
|
||||
<label v-for="(item, index) in searchlist" :key="index">
|
||||
<view
|
||||
@@ -64,12 +69,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||||
import navBar from '@/components/navbar/navbar.vue'
|
||||
const Searching = ref(true)
|
||||
const queryParmas = ref({
|
||||
value: ''
|
||||
})
|
||||
/** 点击时切换到input,并聚焦 */
|
||||
function handleClick() {
|
||||
Searching.value = false
|
||||
@@ -80,77 +82,98 @@ function handleInput() {
|
||||
Searching.value = true
|
||||
}
|
||||
}
|
||||
function handleSearch() {
|
||||
console.log('search')
|
||||
}
|
||||
function handleSearch() {}
|
||||
// -----------------------------------------
|
||||
/* 选择列表 */
|
||||
const searchlist = ref([
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: 8
|
||||
const searchlist = ref([])
|
||||
|
||||
const queryParmas = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
value: ''
|
||||
})
|
||||
const isLoading = ref(false) // 加载锁
|
||||
const hasMore = ref(true) // 是否还有更多数据
|
||||
const total = ref(21)
|
||||
function scrolltolower() {
|
||||
// 必须加这两个判断！
|
||||
if (isLoading.value || !hasMore.value) {
|
||||
return
|
||||
}
|
||||
])
|
||||
queryParmas.value.pageNum += 1
|
||||
getlist()
|
||||
}
|
||||
function getlist() {
|
||||
// 1. 如果正在加载或没有更多数据，直接返回
|
||||
if (isLoading.value || !hasMore.value) return
|
||||
// 2. 开启锁
|
||||
isLoading.value = true
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
const { pageNum, pageSize } = queryParmas.value
|
||||
|
||||
const startId = (pageNum - 1) * pageSize + 1
|
||||
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||
const realId = startId + index
|
||||
const randomStatus = Math.floor(Math.random() * 3)
|
||||
return {
|
||||
name: '张三' + realId,
|
||||
roleName: '维修人员',
|
||||
phone: '19578012123',
|
||||
id: realId
|
||||
}
|
||||
})
|
||||
// 追加数据（正确方式）
|
||||
searchlist.value = [...searchlist.value, ...arr]
|
||||
// 判断是否还有更多
|
||||
hasMore.value = searchlist.value.length < total.value
|
||||
isLoading.value = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
getlist()
|
||||
function resetList() {
|
||||
reportRecords.value = []
|
||||
queryParmas.value.pageNum = 1
|
||||
hasMore.value = true
|
||||
getlist()
|
||||
}
|
||||
//searchlist----------------------
|
||||
const checkoutUserid = ref(null)
|
||||
const checkoutInfo = ref(null)
|
||||
function radioChange(val) {
|
||||
checkoutUserid.value = Number(val.detail.value)
|
||||
const find = searchlist.value.find(item => item.id === Number(val.detail.value))
|
||||
if (find) {
|
||||
checkoutInfo.value = find
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================================
|
||||
let eventChannel = null
|
||||
// 必须在 onMounted 里获取
|
||||
onMounted(() => {
|
||||
const instance = getCurrentInstance().proxy
|
||||
if (instance && instance.getOpenerEventChannel) {
|
||||
eventChannel = instance.getOpenerEventChannel()
|
||||
}
|
||||
})
|
||||
/* 确定派单 */
|
||||
function handleSelecthouse() {
|
||||
// api
|
||||
eventChannel.emit('backData', {
|
||||
checkoutUserid: checkoutUserid.value
|
||||
})
|
||||
// 3. 返回上一页
|
||||
uni.navigateBack()
|
||||
}
|
||||
// ===========================================
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shareUser {
|
||||
background-color: #f9f9f9;
|
||||
height: 100vh;
|
||||
|
||||
.shareBody {
|
||||
padding: 0 40rpx;
|
||||
@@ -180,6 +203,9 @@ function handleSelecthouse() {
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
height: 36rpx;
|
||||
.checkoutUseName {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
// 角色列表
|
||||
.item {
|
||||
|
||||
Reference in New Issue
Block a user