巡检点上传图片修正
This commit is contained in:
261
wuye-manager-uniapp/components/filePicker/filePicker.vue
Normal file
261
wuye-manager-uniapp/components/filePicker/filePicker.vue
Normal file
@@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<view class="simple-uploader">
|
||||||
|
<!-- 图片列表 -->
|
||||||
|
<view class="image-list">
|
||||||
|
<!-- 已选图片 -->
|
||||||
|
<view v-for="(img, index) in innerList" :key="index" class="image-item">
|
||||||
|
<image :src="img.url || img" class="img" mode="aspectFill" @tap="preview(index)"></image>
|
||||||
|
<!-- 删除按钮 -->
|
||||||
|
<view class="delete-btn" @tap.stop="remove(index)">
|
||||||
|
<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<!-- 上传状态 -->
|
||||||
|
<view v-if="img.uploading" class="uploading-mask">
|
||||||
|
<text>上传中...</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 添加按钮 -->
|
||||||
|
<view class="add-btn" @tap="choose">
|
||||||
|
<uni-icons color="#a6a6a6" type="plusempty" size="25"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
|
||||||
|
// ======================
|
||||||
|
// Props(可配置)
|
||||||
|
// ======================
|
||||||
|
const props = defineProps({
|
||||||
|
// 双向绑定的图片列表
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
/** 多选 最多上传数量 默认9*/
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
// 选图来源:album(相册)/ camera(拍照)
|
||||||
|
sourceType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['album', 'camera']
|
||||||
|
},
|
||||||
|
// 图片大小:original(原图)/ compressed(压缩图)
|
||||||
|
sizeType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['compressed']
|
||||||
|
},
|
||||||
|
// 后端上传接口地址(必填)
|
||||||
|
uploadUrl: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 后端接收的文件字段名
|
||||||
|
fileFieldName: {
|
||||||
|
type: String,
|
||||||
|
default: 'file'
|
||||||
|
},
|
||||||
|
// ✅ 新增:上传时携带的额外参数
|
||||||
|
extraData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// ======================
|
||||||
|
// Emits
|
||||||
|
// ======================
|
||||||
|
const emit = defineEmits(['update:modelValue', 'success', 'fail', 'remove'])
|
||||||
|
|
||||||
|
// ======================
|
||||||
|
// 内部数据
|
||||||
|
// ======================
|
||||||
|
const innerList = ref([])
|
||||||
|
|
||||||
|
// 监听外部数据变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
newVal => {
|
||||||
|
innerList.value = newVal.map(item => {
|
||||||
|
if (typeof item === 'string') {
|
||||||
|
return { url: item }
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// ======================
|
||||||
|
// 核心方法
|
||||||
|
// ======================
|
||||||
|
|
||||||
|
// 1. 选择图片
|
||||||
|
function choose() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: props.limit,
|
||||||
|
sourceType: props.sourceType,
|
||||||
|
sizeType: props.sizeType,
|
||||||
|
success: async res => {
|
||||||
|
const tempPaths = res.tempFilePaths
|
||||||
|
|
||||||
|
// 如果没传上传接口,只返回临时路径
|
||||||
|
if (!props.uploadUrl) {
|
||||||
|
const newItems = tempPaths.map(path => ({ url: path }))
|
||||||
|
innerList.value = [...innerList.value, ...newItems]
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
innerList.value.map(i => i.url)
|
||||||
|
)
|
||||||
|
emit('success', { tempFilePaths: tempPaths })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 有上传接口,自动上传
|
||||||
|
for (const path of tempPaths) {
|
||||||
|
await uploadSingle(path)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log('选图失败', err)
|
||||||
|
emit('fail', err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 上传单张图片
|
||||||
|
async function uploadSingle(filePath) {
|
||||||
|
// 先添加到列表,标记为上传中
|
||||||
|
const tempItem = { url: filePath, uploading: true }
|
||||||
|
innerList.value = [...innerList.value, tempItem]
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: props.uploadUrl,
|
||||||
|
filePath: filePath,
|
||||||
|
name: props.fileFieldName,
|
||||||
|
// ✅ 新增:携带额外参数
|
||||||
|
formData: props.extraData,
|
||||||
|
success: res => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(res.data)
|
||||||
|
|
||||||
|
// 假设后端返回格式:{ code: 200, url: "https://xxx.com/xxx.png" }
|
||||||
|
// 如果你的后端返回格式不同,请在这里修改
|
||||||
|
if (data.code === 200 || data.url) {
|
||||||
|
const finalUrl = data.url || data.data?.url
|
||||||
|
// 更新列表,替换为网络 URL
|
||||||
|
const index = innerList.value.findIndex(item => item.url === filePath)
|
||||||
|
if (index !== -1) {
|
||||||
|
innerList.value[index] = { url: finalUrl, uploading: false }
|
||||||
|
}
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
innerList.value.map(i => i.url)
|
||||||
|
)
|
||||||
|
emit('success', { url: finalUrl, tempPath: filePath })
|
||||||
|
resolve(finalUrl)
|
||||||
|
} else {
|
||||||
|
throw new Error(data.msg || '上传失败')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('解析上传结果失败', e)
|
||||||
|
remove(innerList.value.findIndex(item => item.url === filePath))
|
||||||
|
emit('fail', e)
|
||||||
|
reject(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.error('上传失败', err)
|
||||||
|
remove(innerList.value.findIndex(item => item.url === filePath))
|
||||||
|
emit('fail', err)
|
||||||
|
reject(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 删除图片
|
||||||
|
function remove(index) {
|
||||||
|
const removed = innerList.value.splice(index, 1)[0]
|
||||||
|
emit(
|
||||||
|
'update:modelValue',
|
||||||
|
innerList.value.map(i => i.url)
|
||||||
|
)
|
||||||
|
emit('remove', { index, url: removed.url })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 预览图片
|
||||||
|
function preview(index) {
|
||||||
|
const urls = innerList.value.map(i => i.url)
|
||||||
|
uni.previewImage({
|
||||||
|
urls: urls,
|
||||||
|
current: index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.simple-uploader {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-item {
|
||||||
|
position: relative;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploading-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
<view class="nav-left" :style="{ width: leftWidth + 'px' }">
|
<view class="nav-left" :style="{ width: leftWidth + 'px' }">
|
||||||
<slot name="left">
|
<slot name="left">
|
||||||
<view class="back-btn" @click="goBack" v-if="showBack">
|
<view class="back-btn" @click="goBack" v-if="showBack">
|
||||||
<uni-icons type="left" size="20" color="inherit"></uni-icons>
|
<uni-icons type="left" size="22" color="inherit"></uni-icons>
|
||||||
<text v-if="backText" class="back-text">{{ backText }}</text>
|
<text v-if="backText" class="back-text">{{ backText }}</text>
|
||||||
</view>
|
</view>
|
||||||
</slot>
|
</slot>
|
||||||
@@ -70,11 +70,12 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
backText: '',
|
backText: '',
|
||||||
placeholder: true // 默认开启占位,防止遮挡
|
placeholder: true // 默认开启占位,防止遮挡
|
||||||
})
|
})
|
||||||
|
const emits = defineEmits(['clickLeft'])
|
||||||
// --- 状态 ---
|
// --- 状态 ---
|
||||||
const statusBarHeight = ref(0)
|
const statusBarHeight = ref(0)
|
||||||
const navBarHeight = ref(44)
|
const navBarHeight = ref(44)
|
||||||
const capsuleHeight = ref(0)
|
const capsuleHeight = ref(0)
|
||||||
|
const gap = ref(0)
|
||||||
|
|
||||||
// --- 计算属性 ---
|
// --- 计算属性 ---
|
||||||
const totalNavHeight = computed(() => statusBarHeight.value + navBarHeight.value)
|
const totalNavHeight = computed(() => statusBarHeight.value + navBarHeight.value)
|
||||||
@@ -108,8 +109,8 @@ const initNavBar = () => {
|
|||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
const menuInfo = uni.getMenuButtonBoundingClientRect()
|
const menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
if (menuInfo.top && menuInfo.height) {
|
if (menuInfo.top && menuInfo.height) {
|
||||||
const gap = menuInfo.top - statusBarHeight.value
|
gap.value = menuInfo.top - statusBarHeight.value
|
||||||
navBarHeight.value = (gap > 0 ? gap : 4) * 2 + menuInfo.height
|
navBarHeight.value = (gap.value > 0 ? gap.value : 4) * 2 + menuInfo.height
|
||||||
capsuleHeight.value = menuInfo.height
|
capsuleHeight.value = menuInfo.height
|
||||||
} else {
|
} else {
|
||||||
navBarHeight.value = 44
|
navBarHeight.value = 44
|
||||||
@@ -123,7 +124,7 @@ const initNavBar = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
uni.navigateBack()
|
emits('clickLeft')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -159,14 +160,14 @@ const goBack = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 20rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-left,
|
.nav-left,
|
||||||
.nav-right {
|
.nav-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -180,16 +181,20 @@ const goBack = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
font-size: 32rpx;
|
font-size: 25rpx;
|
||||||
font-weight: 500;
|
font-size: 28rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
.back-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-text {
|
.back-text {
|
||||||
|
|||||||
176
wuye-manager-uniapp/components/stops/stops.vue
Normal file
176
wuye-manager-uniapp/components/stops/stops.vue
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<view class="steps-vertical">
|
||||||
|
<view class="step-item" v-for="(item, index) in steps" :key="index">
|
||||||
|
<!-- 左侧:圆点 + 竖线 -->
|
||||||
|
<view class="step-left">
|
||||||
|
<!-- 圆点 -->
|
||||||
|
<view class="step-circle" :class="getClass(index)">
|
||||||
|
<!-- 插槽:自定义圆点 -->
|
||||||
|
<slot v-if="$slots.circle" name="circle" :index="index" :status="getStatus(index)">
|
||||||
|
</slot>
|
||||||
|
<view v-else-if="getStatus(index) === 'finish'">
|
||||||
|
<uni-icons type="checkmarkempty" size="15" :color="props.color"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text v-else-if="getStatus(index) === 'process'">{{ index + 1 }}</text>
|
||||||
|
<text v-else-if="getStatus(index) === 'wait'">{{ index + 1 }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 竖线(最后一条不显示) -->
|
||||||
|
<view
|
||||||
|
class="step-line"
|
||||||
|
:class="{ finish: getStatus(index) === 'finish' }"
|
||||||
|
v-if="index < steps.length - 1"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧:内容区域(支持插槽!) -->
|
||||||
|
<view class="step-right">
|
||||||
|
<!-- 默认标题 -->
|
||||||
|
<view
|
||||||
|
class="step-title"
|
||||||
|
:class="{ active: getStatus(index) !== 'wait' }"
|
||||||
|
v-if="!$slots.item"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 默认描述 -->
|
||||||
|
<view class="step-desc" v-if="item.desc && !$slots.item">
|
||||||
|
{{ item.desc }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 🔥 核心:自定义内容插槽 -->
|
||||||
|
<slot
|
||||||
|
name="item"
|
||||||
|
v-if="$slots.item"
|
||||||
|
:index="index"
|
||||||
|
:status="getStatus(index)"
|
||||||
|
:data="item"
|
||||||
|
></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// 步骤列表
|
||||||
|
steps: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// 当前步骤(从 0 开始)
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 主题色
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#007aff'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取状态:finish / process / wait
|
||||||
|
const getStatus = index => {
|
||||||
|
if (index < props.current) return 'finish'
|
||||||
|
if (index === props.current) return 'process'
|
||||||
|
return 'wait'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 样式类
|
||||||
|
const getClass = index => {
|
||||||
|
return 'step-circle-' + getStatus(index)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.step-item {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧 */
|
||||||
|
.step-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 圆点 */
|
||||||
|
.step-circle {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 10;
|
||||||
|
border: 3rpx solid transparent;
|
||||||
|
|
||||||
|
color: #999999;
|
||||||
|
border-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 已完成 */
|
||||||
|
.step-circle-finish {
|
||||||
|
background: transparent;
|
||||||
|
color: v-bind('props.color');
|
||||||
|
border-color: v-bind('props.color');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进行中 */
|
||||||
|
.step-circle-process {
|
||||||
|
border-color: v-bind('props.color');
|
||||||
|
color: #fff;
|
||||||
|
background: v-bind('props.color');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 待完成 */
|
||||||
|
.step-circle-wait {
|
||||||
|
color: #999999;
|
||||||
|
border-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 竖线 */
|
||||||
|
.step-line {
|
||||||
|
width: 4rpx;
|
||||||
|
height: 100%;
|
||||||
|
background: #e5e5e5;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line.finish {
|
||||||
|
background: v-bind('props.color');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧内容 */
|
||||||
|
.step-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title.active {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
class="tabs_items"
|
class="tabs_items"
|
||||||
:class="{
|
:class="{
|
||||||
active: item.value === currentActiveValue,
|
active: item.value === currentActiveValue,
|
||||||
line: showBottomLine
|
line: showBottomLine && item.value === currentActiveValue
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
@@ -62,7 +62,6 @@ const tabs = computed<TabItem[]>(() => {
|
|||||||
// ======================
|
// ======================
|
||||||
const currentActiveValue = ref<string | number>(props.activeValue ?? tabs.value[0]?.value ?? '')
|
const currentActiveValue = ref<string | number>(props.activeValue ?? tabs.value[0]?.value ?? '')
|
||||||
|
|
||||||
console.log(currentActiveValue)
|
|
||||||
// 事件
|
// 事件
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
update: [value: string | number]
|
update: [value: string | number]
|
||||||
@@ -90,11 +89,9 @@ const handleTabs = (item: TabItem) => {
|
|||||||
margin-right: 60rpx;
|
margin-right: 60rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
|
position: relative;
|
||||||
&.active {
|
&.active {
|
||||||
color: #4d5dfa;
|
color: #4d5dfa;
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.line {
|
&.line {
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -110,4 +107,5 @@ const handleTabs = (item: TabItem) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
"quickapp": {},
|
"quickapp": {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin": {
|
"mp-weixin": {
|
||||||
"appid": "wx4a49ad94e2b25927",
|
"appid": "wx40625124315d2de1",
|
||||||
"usingComponents": true,
|
"usingComponents": true,
|
||||||
"lazyCodeLoading": "requiredComponents"
|
"lazyCodeLoading": "requiredComponents"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<view class="detail_list flex flex-1 overflow-auto">
|
<view class="detail_list flex flex-1 overflow-auto">
|
||||||
<scroll-view scroll-y="true">
|
<scroll-view scroll-y="true">
|
||||||
<view class="item" v-for="(item, index) in list" :key="index">
|
<view class="item" v-for="(item, index) in list" :key="index" @tap="handleComplaint">
|
||||||
<view class="title flex items-center">
|
<view class="title flex items-center">
|
||||||
<text>{{ item.title }}</text>
|
<text>{{ item.title }}</text>
|
||||||
<view class="status padding" v-if="item.status === 0"> <text>待处理</text> </view>
|
<view class="status padding" v-if="item.status === 0"> <text>待处理</text> </view>
|
||||||
@@ -110,6 +110,12 @@ const list = [
|
|||||||
time: '2023-08-01 10:05:46'
|
time: '2023-08-01 10:05:46'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
function handleComplaint() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/complaint/Details_handle'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
|
|
||||||
<!-- submit -->
|
<!-- submit -->
|
||||||
<view v-if="info.status === 0" class="action_btn" @tap="handleSelecthouse">
|
<view v-if="info.status === 0" class="action_btn" @tap="handleSelecthouse">
|
||||||
<text>确定派单</text>
|
<text>处理</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
const info = ref({
|
const info = ref({
|
||||||
status: 1, //0待解决 1已完成
|
status: 0, //0待解决 1已完成
|
||||||
imgs: [
|
imgs: [
|
||||||
'https://picsum.photos/61',
|
'https://picsum.photos/61',
|
||||||
'https://picsum.photos/61',
|
'https://picsum.photos/61',
|
||||||
@@ -84,6 +84,11 @@ const info = ref({
|
|||||||
'https://picsum.photos/61'
|
'https://picsum.photos/61'
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
function handleSelecthouse() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/complaint/handle'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -35,6 +35,10 @@ function handleClick() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleSelecthouse() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -21,7 +21,12 @@
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<!-- srcoll -->
|
<!-- 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">
|
<radio-group @change="radioChange">
|
||||||
<label v-for="(item, index) in searchlist" :key="index">
|
<label v-for="(item, index) in searchlist" :key="index">
|
||||||
<view
|
<view
|
||||||
@@ -61,10 +66,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, getCurrentInstance } from 'vue'
|
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||||||
import navBar from '@/components/navbar/navbar.vue'
|
import navBar from '@/components/navbar/navbar.vue'
|
||||||
|
|
||||||
const Searching = ref(true)
|
const Searching = ref(true)
|
||||||
const queryParmas = ref({
|
|
||||||
value: ''
|
|
||||||
})
|
|
||||||
/** 点击时切换到input,并聚焦 */
|
/** 点击时切换到input,并聚焦 */
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
Searching.value = false
|
Searching.value = false
|
||||||
@@ -75,64 +78,72 @@ function handleInput() {
|
|||||||
Searching.value = true
|
Searching.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function handleSearch() {
|
function handleSearch() {}
|
||||||
console.log('search')
|
|
||||||
}
|
|
||||||
// -----------------------------------------
|
// -----------------------------------------
|
||||||
/* 选择列表 */
|
/* 选择列表 */
|
||||||
const searchlist = ref([
|
const searchlist = ref([])
|
||||||
{
|
|
||||||
name: '张三',
|
const queryParmas = ref({
|
||||||
roleName: '维修人员',
|
pageNum: 1,
|
||||||
phone: '19578012123',
|
pageSize: 10,
|
||||||
id: 1
|
value: ''
|
||||||
},
|
})
|
||||||
{
|
const isLoading = ref(false) // 加载锁
|
||||||
name: '张三',
|
const hasMore = ref(true) // 是否还有更多数据
|
||||||
roleName: '维修人员',
|
const total = ref(21)
|
||||||
phone: '19578012123',
|
function scrolltolower() {
|
||||||
id: 2
|
// 必须加这两个判断!
|
||||||
},
|
if (isLoading.value || !hasMore.value) {
|
||||||
{
|
return
|
||||||
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
|
|
||||||
}
|
}
|
||||||
])
|
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()
|
||||||
|
}
|
||||||
|
//=======================
|
||||||
const checkoutUserid = ref(null)
|
const checkoutUserid = ref(null)
|
||||||
|
const checkoutUserInfo = ref(null)
|
||||||
function radioChange(val) {
|
function radioChange(val) {
|
||||||
checkoutUserid.value = Number(val.detail.value)
|
checkoutUserid.value = Number(val.detail.value)
|
||||||
|
const find = searchlist.value.find(item => item.id === Number(val.detail.value))
|
||||||
|
if (find) {
|
||||||
|
checkoutUserInfo.value = find
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let eventChannel = null
|
let eventChannel = null
|
||||||
@@ -145,17 +156,20 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
function handleSelecthouse() {
|
function handleSelecthouse() {
|
||||||
|
if (eventChannel) {
|
||||||
eventChannel.emit('backData', {
|
eventChannel.emit('backData', {
|
||||||
userid: checkoutUserid.value,
|
userid: checkoutUserid.value,
|
||||||
username: '张三'
|
username: checkoutUserInfo.value.name
|
||||||
})
|
})
|
||||||
// 3. 返回上一页
|
// 3. 返回上一页
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.shareUser {
|
.shareUser {
|
||||||
|
height: 100vh;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
|
|
||||||
.shareBody {
|
.shareBody {
|
||||||
|
|||||||
@@ -16,20 +16,33 @@
|
|||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">标题</text>
|
<text class="label">标题</text>
|
||||||
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
|
<!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
|
||||||
<uni-easyinput v-model="form.title" placeholder="请输入内容" :inputBorder="false"></uni-easyinput>
|
<uni-easyinput
|
||||||
|
v-model="form.title"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
:inputBorder="false"
|
||||||
|
></uni-easyinput>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 问题描述 -->
|
<!-- 问题描述 -->
|
||||||
<view class="form-item-wenti">
|
<view class="form-item-wenti">
|
||||||
<text class="label">问题描述</text>
|
<text class="label">问题描述</text>
|
||||||
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
|
<!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
|
||||||
<uni-easyinput v-model="form.desc" placeholder="请描述你的问题" type="textarea"></uni-easyinput>
|
<uni-easyinput
|
||||||
|
v-model="form.desc"
|
||||||
|
placeholder="请描述你的问题"
|
||||||
|
type="textarea"
|
||||||
|
></uni-easyinput>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 手机号 -->
|
<!-- 手机号 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">手机号</text>
|
<text class="label">手机号</text>
|
||||||
<uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
|
<uni-easyinput
|
||||||
|
type="number"
|
||||||
|
v-model="form.phone"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
:inputBorder="false"
|
||||||
|
></uni-easyinput>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 图片上传 -->
|
<!-- 图片上传 -->
|
||||||
@@ -56,7 +69,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import{onLoad} from "@dcloudio/uni-app"
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
// import { onLoad, uniShowToast, uniNavigateBack, uniChooseImage, uniUploadFile } from '@dcloudio/uni-app'
|
// import { onLoad, uniShowToast, uniNavigateBack, uniChooseImage, uniUploadFile } from '@dcloudio/uni-app'
|
||||||
|
|
||||||
// 接收上个页面传的维修项目
|
// 接收上个页面传的维修项目
|
||||||
@@ -71,7 +84,7 @@ const form = ref({
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 页面加载时获取传参
|
// 页面加载时获取传参
|
||||||
onLoad((options) => {
|
onLoad(options => {
|
||||||
if (options.category && options.project) {
|
if (options.category && options.project) {
|
||||||
repairProject.value = `${options.category}-${options.project}`
|
repairProject.value = `${options.category}-${options.project}`
|
||||||
}
|
}
|
||||||
@@ -80,7 +93,7 @@ onLoad((options) => {
|
|||||||
// 选择项目页
|
// 选择项目页
|
||||||
const goBackSelect = () => {
|
const goBackSelect = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:"/pageSubPack/fault-reporting/repairSelect"
|
url: '/pageSubPack/fault-reporting/repairSelect'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,7 +103,7 @@ const chooseImage = () => {
|
|||||||
count: 3, // 最多选3张
|
count: 3, // 最多选3张
|
||||||
sizeType: ['original', 'compressed'],
|
sizeType: ['original', 'compressed'],
|
||||||
sourceType: ['album', 'camera'],
|
sourceType: ['album', 'camera'],
|
||||||
success: (res) => {
|
success: res => {
|
||||||
// 临时文件路径
|
// 临时文件路径
|
||||||
const tempFilePaths = res.tempFilePaths
|
const tempFilePaths = res.tempFilePaths
|
||||||
form.value.images = [...form.value.images, ...tempFilePaths]
|
form.value.images = [...form.value.images, ...tempFilePaths]
|
||||||
@@ -111,7 +124,7 @@ const chooseImage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 删除图片
|
// 删除图片
|
||||||
const deleteImage = (index) => {
|
const deleteImage = index => {
|
||||||
form.value.images.splice(index, 1)
|
form.value.images.splice(index, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -184,7 +197,8 @@ const submitForm = () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.input, .textarea {
|
.input,
|
||||||
|
.textarea {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
@@ -232,7 +246,7 @@ const submitForm = () => {
|
|||||||
}
|
}
|
||||||
.submit-btn {
|
.submit-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #4D5DFA;
|
background: #4d5dfa;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page_container inspection_main_box">
|
<view class="page_padding">
|
||||||
|
<view class="flex-1 flex-col flex inspection_main_box">
|
||||||
<view class="info_box">
|
<view class="info_box">
|
||||||
<view class="title_box flex items-center justify-between">
|
<view class="title_box flex items-center justify-between">
|
||||||
<view class="title flex items-center">
|
<view class="title flex items-center">
|
||||||
@@ -62,9 +63,10 @@
|
|||||||
<view class="inspection_items">
|
<view class="inspection_items">
|
||||||
<view class="label">巡检照片:</view>
|
<view class="label">巡检照片:</view>
|
||||||
<image
|
<image
|
||||||
|
lazy-load
|
||||||
class="inspection_photo"
|
class="inspection_photo"
|
||||||
v-for="(ite, ind) in item.photos"
|
v-for="(ite, ind) in item.photos"
|
||||||
:key="index"
|
:key="ind"
|
||||||
:src="ite"
|
:src="ite"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
></image>
|
></image>
|
||||||
@@ -73,6 +75,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -131,8 +134,16 @@ const result = ref([
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.inspection_main_box {
|
.page_padding {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
.inspection_main_box {
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
background: #f9f9f9;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.info_box {
|
.info_box {
|
||||||
padding: 40rpx 30rpx;
|
padding: 40rpx 30rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
@@ -181,6 +192,10 @@ const result = ref([
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
.inspecton_result_title {
|
.inspecton_result_title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
|
|||||||
@@ -1,7 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page_container inspection_record_box">
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="page_padding">
|
||||||
|
<view class="inspection_record_box flex-1 flex flex-col">
|
||||||
|
<navBar @clickLeft="navBack" title="巡检记录"></navBar>
|
||||||
|
|
||||||
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
<TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
|
||||||
<view class="record_body">
|
<scroll-view
|
||||||
|
class="record_body record-list"
|
||||||
|
scroll-y
|
||||||
|
lower-threshold="60"
|
||||||
|
@scrolltolower="scrolltolower"
|
||||||
|
>
|
||||||
<!-- v-for -->
|
<!-- v-for -->
|
||||||
<view class="record_item" v-for="(item, index) in list" :key="index">
|
<view class="record_item" v-for="(item, index) in list" :key="index">
|
||||||
<view class="time">
|
<view class="time">
|
||||||
@@ -32,12 +41,15 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import TabsComponents from '@/components/tabs/tabs.vue'
|
import TabsComponents from '@/components/tabs/tabs.vue'
|
||||||
|
import navBar from '@/components/navbar/navbar.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
const tabslist = [
|
const tabslist = [
|
||||||
{
|
{
|
||||||
name: '全部',
|
name: '全部',
|
||||||
@@ -52,13 +64,11 @@ const tabslist = [
|
|||||||
value: 2
|
value: 2
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
function handleChangeTabs(val: number) {
|
function handleChangeTabs(val: number) {}
|
||||||
console.log('选择了:', val)
|
|
||||||
}
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
const list = [
|
const list = ref([
|
||||||
{
|
{
|
||||||
day: '10月11日',
|
day: '10月11日',
|
||||||
list: [
|
list: [
|
||||||
@@ -77,87 +87,99 @@ const list = [
|
|||||||
user: '湖色'
|
user: '湖色'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
{
|
])
|
||||||
day: '10月12日',
|
|
||||||
|
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() * 2)
|
||||||
|
return {
|
||||||
|
day: '10月' + realId + '日',
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
title: '标题2',
|
title: '标题1',
|
||||||
status: 1,
|
status: randomStatus,
|
||||||
items: ['防火设施检查'],
|
items: ['设备巡检'],
|
||||||
time: '09:00:00-12:00:00',
|
time: '07:00:00-09:00:00',
|
||||||
user: '郧西'
|
user: '李兴'
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
day: '10月12日',
|
title: '标题3',
|
||||||
list: [
|
status: randomStatus,
|
||||||
{
|
items: ['设备巡检'],
|
||||||
title: '标题2',
|
time: '07:00:00-09:00:00',
|
||||||
status: 1,
|
user: '湖色'
|
||||||
items: ['防火设施检查'],
|
|
||||||
time: '09:00:00-12:00:00',
|
|
||||||
user: '郧西'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '10月12日',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: '标题2',
|
|
||||||
status: 1,
|
|
||||||
items: ['防火设施检查'],
|
|
||||||
time: '09:00:00-12:00:00',
|
|
||||||
user: '郧西'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '10月12日',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: '标题2',
|
|
||||||
status: 1,
|
|
||||||
items: ['防火设施检查'],
|
|
||||||
time: '09:00:00-12:00:00',
|
|
||||||
user: '郧西'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '10月12日',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: '标题2',
|
|
||||||
status: 1,
|
|
||||||
items: ['防火设施检查'],
|
|
||||||
time: '09:00:00-12:00:00',
|
|
||||||
user: '郧西'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
day: '10月12日',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: '标题2',
|
|
||||||
status: 1,
|
|
||||||
items: ['防火设施检查'],
|
|
||||||
time: '09:00:00-12:00:00',
|
|
||||||
user: '郧西'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
})
|
||||||
|
|
||||||
|
// 追加数据(正确方式)
|
||||||
|
list.value = [...list.value, ...arr]
|
||||||
|
// 判断是否还有更多
|
||||||
|
hasMore.value = list.value.length < total.value
|
||||||
|
isLoading.value = false
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
getlist()
|
||||||
|
function resetList() {
|
||||||
|
list.value = []
|
||||||
|
queryParmas.value.pageNum = 1
|
||||||
|
hasMore.value = true
|
||||||
|
getlist()
|
||||||
|
}
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
const navBack = () => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.inspection_record_box {
|
.inspection_record_box {
|
||||||
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
.record_body {
|
.record_body {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
.record_item {
|
.record_item {
|
||||||
& > .time {
|
& > .time {
|
||||||
width: 168rpx;
|
width: 168rpx;
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="inspection_upload_box page_container">
|
<view class="page_padding">
|
||||||
|
<view class="inspection_upload_box flex flex-col">
|
||||||
<view class="inspection_info_box">
|
<view class="inspection_info_box">
|
||||||
<view class="inspection_title flex flex-between">
|
<view class="inspection_title flex flex-between">
|
||||||
<view class="title flex">
|
<view class="title flex">
|
||||||
@@ -40,13 +41,18 @@
|
|||||||
<view class="header"> <text>巡检结果</text> </view>
|
<view class="header"> <text>巡检结果</text> </view>
|
||||||
<view class="info_body" :key="index" v-for="(item, index) in baseFormData">
|
<view class="info_body" :key="index" v-for="(item, index) in baseFormData">
|
||||||
<view class="info_title" style="margin-bottom: 20rpx"> {{ item.name }} </view>
|
<view class="info_title" style="margin-bottom: 20rpx"> {{ item.name }} </view>
|
||||||
<uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="150rpx">
|
<uni-forms :modelValue="item" :rules="rules" label-position="left" label-width="150">
|
||||||
<uni-forms-item label="巡检状态" required>
|
<uni-forms-item label="巡检状态" required>
|
||||||
<uni-data-checkbox v-model="item.status" :localdata="statuslist" />
|
<uni-data-checkbox
|
||||||
|
:disabled="item.complated"
|
||||||
|
v-model="item.status"
|
||||||
|
:localdata="statuslist"
|
||||||
|
/>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<uni-forms-item label="巡检描述">
|
<uni-forms-item label="巡检描述">
|
||||||
<uni-easyinput
|
<uni-easyinput
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
:disabled="item.complated"
|
||||||
:input-border="true"
|
:input-border="true"
|
||||||
v-model="item.desition"
|
v-model="item.desition"
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
@@ -55,22 +61,59 @@
|
|||||||
<uni-forms-item label="巡检时间">
|
<uni-forms-item label="巡检时间">
|
||||||
<uni-datetime-picker
|
<uni-datetime-picker
|
||||||
type="datetime"
|
type="datetime"
|
||||||
|
:disabled="item.complated"
|
||||||
return-type="timestamp"
|
return-type="timestamp"
|
||||||
v-model="item.datetimesingle"
|
v-model="item.datetimesingle"
|
||||||
/>
|
/>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<uni-forms-item label="巡检照片">
|
<!-- <uni-forms-item label="巡检照片">
|
||||||
<uni-file-picker v-model="item.files" file-mediatype="image">
|
<uni-file-picker
|
||||||
|
@delete="deleteFile"
|
||||||
|
@select="select"
|
||||||
|
mode="grid"
|
||||||
|
v-model="item.files"
|
||||||
|
:auto-upload="false"
|
||||||
|
:sourceType="['camera']"
|
||||||
|
file-mediatype="image"
|
||||||
|
>
|
||||||
<view class="filePicker flex-center">
|
<view class="filePicker flex-center">
|
||||||
<uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
|
<uni-icons color="#a6a6a6" type="plusempty" size="25"> </uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</uni-file-picker>
|
</uni-file-picker>
|
||||||
</uni-forms-item>
|
</uni-forms-item> -->
|
||||||
|
<view class="items_picker_box">
|
||||||
|
<view class="label"> 巡检照片 </view>
|
||||||
|
<view class="filePickerbox" v-if="!item.complated">
|
||||||
|
<filePicker
|
||||||
|
v-model="item.files"
|
||||||
|
:sourceType="['camera']"
|
||||||
|
file-field-name="file"
|
||||||
|
:extra-data="uploadParams"
|
||||||
|
@success="onUploadSuccess"
|
||||||
|
@fail="onUploadFail"
|
||||||
|
></filePicker>
|
||||||
|
</view>
|
||||||
|
<view class="filePickerbox showimagegrid" v-else>
|
||||||
|
<image
|
||||||
|
class="img"
|
||||||
|
mode="scaleToFill"
|
||||||
|
v-for="(ite, ind) in item.files"
|
||||||
|
lazy-load
|
||||||
|
:key="ind"
|
||||||
|
:src="ite"
|
||||||
|
@tap="previewImages(item.files, index)"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</uni-forms>
|
</uni-forms>
|
||||||
|
<view class="submitbox" @tap="handleSubmit(item.id)">
|
||||||
|
<text>提交</text>
|
||||||
|
</view>
|
||||||
<view class="line" v-if="index + 1 !== baseFormData.length"> </view>
|
<view class="line" v-if="index + 1 !== baseFormData.length"> </view>
|
||||||
</view>
|
</view>
|
||||||
<view class="submitbox">
|
<!-- <view class="submitbox">
|
||||||
<text>提交</text>
|
<text>提交</text>
|
||||||
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -78,6 +121,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
import filePicker from '@/components/filePicker/filePicker.vue'
|
||||||
|
|
||||||
const statuslist = [
|
const statuslist = [
|
||||||
{
|
{
|
||||||
@@ -97,14 +141,16 @@ const info = ref({
|
|||||||
id: index + ''
|
id: index + ''
|
||||||
}
|
}
|
||||||
let obj = {
|
let obj = {
|
||||||
id: obj1.id,
|
id: index,
|
||||||
name: obj1.name,
|
name: obj1.name,
|
||||||
desition: '', // 描述
|
desition: '', // 描述
|
||||||
datetimesingle: '', // 时间
|
datetimesingle: '', // 时间
|
||||||
status: 0, // 状态
|
status: 0, // 状态 0正常1异常
|
||||||
files: [], // 图片
|
files: [], // 图片
|
||||||
|
complated: false, // 巡检点完成检查
|
||||||
fileUrls: '' // 图片
|
fileUrls: '' // 图片
|
||||||
}
|
}
|
||||||
|
|
||||||
baseFormData.value.push(obj)
|
baseFormData.value.push(obj)
|
||||||
return obj1
|
return obj1
|
||||||
})
|
})
|
||||||
@@ -119,15 +165,68 @@ const rules = {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ----------------------------------------------
|
||||||
|
const uploadParams = ref({
|
||||||
|
type: 'repair', // 上传类型:报修
|
||||||
|
businessId: '123456', // 关联业务ID
|
||||||
|
userId: '789' // 用户ID
|
||||||
|
})
|
||||||
|
|
||||||
|
// 选择文件
|
||||||
|
function onUploadSuccess(e) {
|
||||||
|
console.log('上传成功', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUploadFail(e) {
|
||||||
|
console.log('上传失败', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
console.log('最终要提交的图片URL', imageList.value)
|
||||||
|
// 这里调用你的提交接口
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 提交巡检点 检查情况 */
|
||||||
|
function handleSubmit(id) {
|
||||||
|
console.log(typeof id, id, baseFormData.value)
|
||||||
|
const find = baseFormData.value.find(item => item.id === id)
|
||||||
|
if (find) {
|
||||||
|
find.complated = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 预览图片
|
||||||
|
* @param {Array} images - 所有图片的URL数组
|
||||||
|
* @param {Number} currentIndex - 当前点击的图片索引
|
||||||
|
*/
|
||||||
|
function previewImages(images, currentIndex) {
|
||||||
|
uni.previewImage({
|
||||||
|
urls: [
|
||||||
|
'https://picsum.photos/80',
|
||||||
|
'https://picsum.photos/80',
|
||||||
|
'https://picsum.photos/80',
|
||||||
|
'https://picsum.photos/80'
|
||||||
|
],
|
||||||
|
current: currentIndex
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.inspection_upload_box {
|
.inspection_upload_box {
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
.inspection_info_box {
|
.inspection_info_box {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 20rpx 40rpx;
|
padding: 20rpx 40rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
border-radius: 16rpx;
|
||||||
.inspection_title {
|
.inspection_title {
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
.title {
|
.title {
|
||||||
@@ -153,6 +252,7 @@ const rules = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.inspection_item_info_box {
|
.inspection_item_info_box {
|
||||||
|
width: 100%;
|
||||||
.inspection_item {
|
.inspection_item {
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -163,10 +263,13 @@ const rules = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.inspection_info_upload_box {
|
.inspection_info_upload_box {
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
border-radius: 16rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 30rpx 40rpx;
|
padding: 30rpx 40rpx;
|
||||||
min-height: 500rpx;
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
.header {
|
.header {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
@@ -184,10 +287,27 @@ const rules = {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1rpx dashed #ccc;
|
border: 1rpx dashed #ccc;
|
||||||
}
|
}
|
||||||
.filePicker {
|
.items_picker_box {
|
||||||
|
.label {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 12px 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showimagegrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
.img {
|
||||||
width: 160rpx;
|
width: 160rpx;
|
||||||
height: 160rpx;
|
height: 160rpx;
|
||||||
background: #f3f3f3;
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.submitbox {
|
.submitbox {
|
||||||
|
|||||||
@@ -1,24 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="today_inspection_page">
|
<view class="page_padding">
|
||||||
<!-- tabs -->
|
<view class="today_inspection_page flex flex-col">
|
||||||
<view class="tabs_box">
|
<!-- 状态筛选标签 -->
|
||||||
<view
|
<TabsComponents :tabslist="tabslist" @update="handleTabs"></TabsComponents>
|
||||||
v-for="(item, index) in tabslist"
|
|
||||||
:key="index"
|
|
||||||
@tap="handleTabs(item)"
|
|
||||||
class="tabs_items"
|
|
||||||
:class="{
|
|
||||||
active: item.value === activeValue
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- tabs -->
|
|
||||||
|
|
||||||
<!-- body -->
|
<!-- body -->
|
||||||
<view class="inspection_body">
|
<view class="inspection_body flex-1">
|
||||||
<view class="inspection_items" v-for="(item, index) in list" :key="index">
|
<view
|
||||||
|
class="inspection_items"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
@tap="gotoInspection(item)"
|
||||||
|
>
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<text class="subtitle">
|
<text class="subtitle">
|
||||||
<i></i>
|
<i></i>
|
||||||
@@ -27,7 +20,7 @@
|
|||||||
<text class="noactions" v-if="item.status === 0">未巡检</text>
|
<text class="noactions" v-if="item.status === 0">未巡检</text>
|
||||||
<text class="noactions alaway_actions" v-else>已巡检</text>
|
<text class="noactions alaway_actions" v-else>已巡检</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="inspection_item_box">
|
<view class="inspection_item_box flex">
|
||||||
<text class="inspection_item" v-for="(ite, index) in item.item" :key="index">
|
<text class="inspection_item" v-for="(ite, index) in item.item" :key="index">
|
||||||
{{ ite }}
|
{{ ite }}
|
||||||
</text>
|
</text>
|
||||||
@@ -39,18 +32,20 @@
|
|||||||
<view class="inspection_time">
|
<view class="inspection_time">
|
||||||
<text>巡检人:</text>
|
<text>巡检人:</text>
|
||||||
<text>{{ item.user }}</text>
|
<text>{{ item.user }}</text>
|
||||||
<view class="actions" v-if="item.status === 0" @tap="gotoInspection">
|
<view class="actions" v-if="item.status === 0">
|
||||||
<text>去巡检</text>
|
<text>去巡检</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
<!-- body -->
|
<!-- body -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<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'
|
||||||
// tabs =========================================================
|
// tabs =========================================================
|
||||||
const activeValue = ref(0)
|
const activeValue = ref(0)
|
||||||
const tabslist = ref([
|
const tabslist = ref([
|
||||||
@@ -59,36 +54,69 @@ const tabslist = ref([
|
|||||||
value: 0
|
value: 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已完成',
|
name: '未巡检',
|
||||||
value: 1
|
value: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已派单',
|
name: '已巡检',
|
||||||
value: 2
|
value: 2
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
// 点击事件
|
// 点击事件
|
||||||
const handleTabs = (val: { name: string; value: number }) => {
|
const handleTabs = (val: number) => {
|
||||||
activeValue.value = val.value
|
activeValue.value = val
|
||||||
}
|
}
|
||||||
// tabs =========================================================
|
// tabs =========================================================
|
||||||
// body =========================================================
|
// body =========================================================
|
||||||
/** 跳转到巡检上传页面 */
|
/** 跳转到巡检上传页面 */
|
||||||
const gotoInspection = () => {
|
// 0未巡检 1已巡检
|
||||||
console.log('upload')
|
const gotoInspection = row => {
|
||||||
|
if (row.status === 0) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pageSubPack/inspection/inspection_upload'
|
url: '/pageSubPack/inspection/inspection_upload'
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/inspection/inspection_main'
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// body =========================================================
|
// body =========================================================
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
{
|
||||||
address: '幸福苑小区- B1层地下车库',
|
address: '幸福苑小区- B1层地下车库',
|
||||||
time: '07:00:00 -09:00:00',
|
time: '07:00:00 -09:00:00',
|
||||||
item: ['防火设施安全巡检'],
|
item: [
|
||||||
|
'防火设施安全巡检',
|
||||||
|
'防火设施安全巡检',
|
||||||
|
'防火设施安全巡检',
|
||||||
|
'防火设施安全巡检',
|
||||||
|
'防火设施安全巡检'
|
||||||
|
],
|
||||||
user: '李相龙',
|
user: '李相龙',
|
||||||
status: 0 // 0未巡检 1已巡检
|
status: 0 // 0未巡检 1已巡检
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
address: '幸福苑小区- B2层地下车库',
|
||||||
|
time: '13:00:00 -15:00:00',
|
||||||
|
item: ['设备巡检'],
|
||||||
|
user: '李相龙',
|
||||||
|
status: 1 // 0未巡检 1已巡检
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '幸福苑小区- B2层地下车库',
|
||||||
|
time: '13:00:00 -15:00:00',
|
||||||
|
item: ['设备巡检'],
|
||||||
|
user: '李相龙',
|
||||||
|
status: 1 // 0未巡检 1已巡检
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '幸福苑小区- B2层地下车库',
|
||||||
|
time: '13:00:00 -15:00:00',
|
||||||
|
item: ['设备巡检'],
|
||||||
|
user: '李相龙',
|
||||||
|
status: 1 // 0未巡检 1已巡检
|
||||||
|
},
|
||||||
{
|
{
|
||||||
address: '幸福苑小区- B2层地下车库',
|
address: '幸福苑小区- B2层地下车库',
|
||||||
time: '13:00:00 -15:00:00',
|
time: '13:00:00 -15:00:00',
|
||||||
@@ -101,11 +129,16 @@ const list = ref([
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 页面容器 */
|
/* 页面容器 */
|
||||||
|
.page_padding {
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
.today_inspection_page {
|
.today_inspection_page {
|
||||||
padding: 20rpx 40rpx 40rpx;
|
background: #f9f9f9;
|
||||||
min-height: 100vh;
|
padding: 20rpx 40rpx;
|
||||||
max-height: 100vh;
|
|
||||||
background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
// tabs
|
// tabs
|
||||||
.tabs_box {
|
.tabs_box {
|
||||||
@@ -151,9 +184,8 @@ const list = ref([
|
|||||||
.inspection_items {
|
.inspection_items {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
padding: 40rpx;
|
padding: 40rpx;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -195,17 +227,20 @@ const list = ref([
|
|||||||
.inspection_item_box {
|
.inspection_item_box {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.inspection_item {
|
.inspection_item {
|
||||||
border: 1px solid #4d5dfa;
|
border: 1px solid #4d5dfa;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
padding: 0 14rpx;
|
padding: 0 14rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
border-radius: 198rpx 198rpx 198rpx 198rpx;
|
||||||
border: 2rpx solid #4d5dfa;
|
border: 2rpx solid #4d5dfa;
|
||||||
|
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #4d5dfa;
|
color: #4d5dfa;
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -81,9 +81,7 @@ function handleScan() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSubmit() {
|
function handleSubmit() {}
|
||||||
console.log(formData.value)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -53,9 +53,8 @@ import { ref, getCurrentInstance, onMounted } from 'vue'
|
|||||||
const Searching = ref(true)
|
const Searching = ref(true)
|
||||||
const queryParmas = ref({
|
const queryParmas = ref({
|
||||||
value: '',
|
value: '',
|
||||||
|
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 12
|
pageSize: 10
|
||||||
})
|
})
|
||||||
/** 点击时切换到input,并聚焦 */
|
/** 点击时切换到input,并聚焦 */
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
@@ -67,38 +66,69 @@ function handleInput() {
|
|||||||
Searching.value = true
|
Searching.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function handleSearch() {
|
function handleSearch() {}
|
||||||
console.log('search')
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkoutHouseid = ref(null)
|
const checkoutHouseid = ref(null)
|
||||||
|
const checkoutHouseInfo = ref(null)
|
||||||
/** 选择房屋,返回id*/
|
/** 选择房屋,返回id*/
|
||||||
function radioChange(res) {
|
function radioChange(res) {
|
||||||
checkoutHouseid.value = Number(res.detail.value)
|
checkoutHouseid.value = Number(res.detail.value)
|
||||||
|
const find = searchlist.value.find(item => item.id === Number(res.detail.value))
|
||||||
|
if (find) {
|
||||||
|
checkoutHouseInfo.value = find
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//
|
|
||||||
const searchlist = ref()
|
|
||||||
|
|
||||||
function getlist() {
|
|
||||||
const allnum = queryParmas.value.pageNum * queryParmas.value.pageSize
|
|
||||||
|
|
||||||
if (allnum < 50) {
|
|
||||||
searchlist.value = Array.from({ length: allnum }).map((_, index) => {
|
|
||||||
return {
|
|
||||||
address: 'A栋3单元301',
|
|
||||||
username: '里番',
|
|
||||||
id: index + 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getlist()
|
|
||||||
|
|
||||||
|
// -0---------------------------------------
|
||||||
|
const searchlist = ref([])
|
||||||
|
const isLoading = ref(false) // 加载锁
|
||||||
|
const hasMore = ref(true) // 是否还有更多数据
|
||||||
|
const total = ref(21)
|
||||||
function scrolltolower() {
|
function scrolltolower() {
|
||||||
|
// 必须加这两个判断!
|
||||||
|
if (isLoading.value || !hasMore.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
queryParmas.value.pageNum += 1
|
queryParmas.value.pageNum += 1
|
||||||
getlist()
|
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 错误
|
||||||
|
return {
|
||||||
|
id: realId,
|
||||||
|
username: '李赫',
|
||||||
|
address: 'A栋3单元3' + realId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 追加数据(正确方式)
|
||||||
|
searchlist.value = [...searchlist.value, ...arr]
|
||||||
|
// 判断是否还有更多
|
||||||
|
hasMore.value = searchlist.value.length < total.value
|
||||||
|
isLoading.value = false
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
getlist()
|
||||||
|
function resetList() {
|
||||||
|
searchlist.value = []
|
||||||
|
queryParmas.value.pageNum = 1
|
||||||
|
hasMore.value = true
|
||||||
|
getlist()
|
||||||
|
}
|
||||||
|
|
||||||
|
// -0---------------------------------------
|
||||||
let eventChannel = null
|
let eventChannel = null
|
||||||
// 必须在 onMounted 里获取
|
// 必须在 onMounted 里获取
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@@ -109,11 +139,11 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
function handleSelecthouse() {
|
function handleSelecthouse() {
|
||||||
// 2. 发送数据 (触发 A 页面定义的 'backData' 事件)
|
console.log(checkoutHouseInfo.value)
|
||||||
console.log(eventChannel)
|
if (!eventChannel) return
|
||||||
eventChannel.emit('backData', {
|
eventChannel.emit('backData', {
|
||||||
Houseid: checkoutHouseid.value,
|
Houseid: checkoutHouseid.value,
|
||||||
HouseName: 'A栋3单元301'
|
HouseName: checkoutHouseInfo.value.address
|
||||||
})
|
})
|
||||||
// 3. 返回上一页
|
// 3. 返回上一页
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page_container replacement_record_box flex flex-col">
|
<view class="page_padding">
|
||||||
|
<view class="replacement_record_box flex-1 flex flex-col">
|
||||||
<view class="nav flex items-center">
|
<view class="nav flex items-center">
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
<text class="title">仪表换新记录</text>
|
<text class="title">仪表换新记录</text>
|
||||||
@@ -13,7 +14,7 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<image src="/static/imgs/home.png" class="icon" mode=""></image>
|
<image lazy-load src="/static/imgs/home.png" class="icon" mode=""></image>
|
||||||
<view class="instrument_info">
|
<view class="instrument_info">
|
||||||
<view class="instrument_title">
|
<view class="instrument_title">
|
||||||
<text>{{ item.title }}</text>
|
<text>{{ item.title }}</text>
|
||||||
@@ -32,6 +33,10 @@
|
|||||||
<uni-load-more :status="statusmore"></uni-load-more>
|
<uni-load-more :status="statusmore"></uni-load-more>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="action_btn" @tap="handleClick">
|
||||||
|
<text>新增</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -73,54 +78,74 @@ function handleChangeTabs(val: number) {
|
|||||||
getlist()
|
getlist()
|
||||||
}
|
}
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
const infolist = ref([])
|
||||||
const queryParmas = ref({
|
const queryParmas = ref({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 15
|
pageSize: 10
|
||||||
})
|
})
|
||||||
const infolist = ref([])
|
const total = ref(21)
|
||||||
function scrolltolower() {
|
function scrolltolower() {
|
||||||
if (hasMore.value) {
|
// 必须加这两个判断!
|
||||||
|
if (isLoading.value || !hasMore.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
queryParmas.value.pageNum += 1
|
queryParmas.value.pageNum += 1
|
||||||
getlist()
|
getlist()
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function getlist() {
|
function getlist() {
|
||||||
uni.showLoading({
|
|
||||||
title: '加载中',
|
|
||||||
mask: true
|
|
||||||
})
|
|
||||||
// 1. 如果正在加载或没有更多数据,直接返回
|
// 1. 如果正在加载或没有更多数据,直接返回
|
||||||
if (isLoading.value || !hasMore.value) return
|
if (isLoading.value || !hasMore.value) return
|
||||||
// 2. 开启锁
|
// 2. 开启锁
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
const all = queryParmas.value.pageNum * queryParmas.value.pageSize
|
uni.showLoading({
|
||||||
if (all > 50) {
|
title: '加载中',
|
||||||
isLoading.value = false
|
mask: true
|
||||||
uni.hideLoading()
|
})
|
||||||
hasMore.value = false
|
const { pageNum, pageSize } = queryParmas.value
|
||||||
return
|
|
||||||
}
|
const startId = (pageNum - 1) * pageSize + 1
|
||||||
const arr = Array.from({ length: all }).map((_, index) => {
|
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||||
|
const realId = startId + index // ✅ 修复 ID 错误
|
||||||
|
|
||||||
|
// ✅ 随机生成 0、1、2
|
||||||
|
const randomStatus = Math.floor(Math.random() * 2)
|
||||||
return {
|
return {
|
||||||
title: 'M2栋3单元18' + index + '室(M2-3-1801)',
|
title: 'M2栋3单元18' + realId + '室(M2-3-1801)',
|
||||||
time: '2023-08-01 10:05:46',
|
time: '2023-08-01 10:05:46',
|
||||||
type: 1 //1水表 2电表
|
type: randomStatus //1水表 2电表
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
hasMore.value = true
|
|
||||||
nextTick(() => {
|
// 追加数据(正确方式)
|
||||||
infolist.value = [...infolist.value, ...arr]
|
infolist.value = [...infolist.value, ...arr]
|
||||||
|
// 判断是否还有更多
|
||||||
|
hasMore.value = infolist.value.length < total.value
|
||||||
isLoading.value = false
|
isLoading.value = false
|
||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
})
|
|
||||||
}
|
}
|
||||||
getlist()
|
getlist()
|
||||||
|
function resetList() {
|
||||||
|
infolist.value = []
|
||||||
|
queryParmas.value.pageNum = 1
|
||||||
|
hasMore.value = true
|
||||||
|
getlist()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/instrument/addreplacement'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.replacement_record_box {
|
.replacement_record_box {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
.nav {
|
.nav {
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
@@ -139,7 +164,6 @@ getlist()
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #4d5dfa;
|
|
||||||
.instrument_items {
|
.instrument_items {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
@@ -174,5 +198,18 @@ getlist()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action_btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #4d5dfa;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 80rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,26 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="report-record-page">
|
<view class="report-record-page page_padding">
|
||||||
<view class="status-bar"></view>
|
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<uni-nav-bar
|
<navBar @clickLeft="navBack" title="上报记录"></navBar>
|
||||||
left-icon="back"
|
<view class="hall_body flex-1 flex flex-col">
|
||||||
title="上报记录"
|
<view class="bgaction"> </view>
|
||||||
backgroundColor="transparent"
|
|
||||||
:border= "false"
|
|
||||||
@clickLeft="navBack"/>
|
|
||||||
|
|
||||||
<!-- 状态筛选标签 -->
|
<!-- 状态筛选标签 -->
|
||||||
<view class="status-tabs">
|
<TabsComponents
|
||||||
<view
|
:tabslist="statusTabs"
|
||||||
v-for="item in statusTabs"
|
:options="{ label: 'label', value: 'value' }"
|
||||||
:key="item.value"
|
@update="switchStatus"
|
||||||
class="status-tab-item"
|
></TabsComponents>
|
||||||
:class="{ active: activeStatus === item.value }"
|
|
||||||
@tap="switchStatus(item.value)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 类型筛选标签 -->
|
<!-- 类型筛选标签 -->
|
||||||
<view class="type-tabs">
|
<view class="type-tabs">
|
||||||
@@ -37,27 +26,35 @@
|
|||||||
|
|
||||||
<!-- 上报记录列表 -->
|
<!-- 上报记录列表 -->
|
||||||
<scroll-view
|
<scroll-view
|
||||||
class="record-list"
|
class="record-list flex-1"
|
||||||
scroll-y
|
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>
|
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||||||
<text class="empty-text">暂无上报记录</text>
|
<text class="empty-text">暂无上报记录</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 记录卡片 -->
|
<!-- 记录卡片 -->
|
||||||
<view
|
<view
|
||||||
v-for="record in filteredRecords"
|
v-for="(record, index) in reportRecords"
|
||||||
:key="record.id"
|
:key="index"
|
||||||
class="record-card"
|
class="record-card"
|
||||||
|
@tap="handleMain(record.id)"
|
||||||
>
|
>
|
||||||
<!-- 标题 + 状态标签 -->
|
<!-- 标题 + 状态标签 -->
|
||||||
<view class="card-header">
|
<view class="card-header">
|
||||||
<text class="card-title">{{ record.title }}</text>
|
<text class="card-title">{{ record.title }}</text>
|
||||||
<view class="status-tag" :class="record.status">
|
<view
|
||||||
{{ getStatusText(record.status) }}
|
class="status-tag"
|
||||||
|
:class="{
|
||||||
|
pending: record.repairStatus === 0,
|
||||||
|
processing: record.repairStatus === 1,
|
||||||
|
completed: record.repairStatus === 2
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ getStatusText(record.repairStatus) }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -71,25 +68,40 @@
|
|||||||
<view class="card-content">
|
<view class="card-content">
|
||||||
{{ record.content }}
|
{{ record.content }}
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 工单图片 -->
|
||||||
|
<!-- <view class="card-image">
|
||||||
|
<image
|
||||||
|
v-for="(item, index) in record.images"
|
||||||
|
:key="index"
|
||||||
|
lazy-load
|
||||||
|
:src="item"
|
||||||
|
class="images"
|
||||||
|
mode="scaleToFill"
|
||||||
|
@tap="handlePrivew(record.images)"
|
||||||
|
></image>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
<!-- 底部信息 -->
|
<!-- 底部信息 -->
|
||||||
<view class="card-footer">
|
<view class="card-footer">
|
||||||
<text class="create-time">{{ record.createTime }}</text>
|
<text class="create-time">{{ record.createTime }}</text>
|
||||||
<text v-if="record.repairman" class="repairman">维修师傅:{{ record.repairman }}</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>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import {onReady} from "@dcloudio/uni-app"
|
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('all') // 全部/待分配/待解决/已完成
|
||||||
@@ -111,101 +123,144 @@ const typeTabs = ref([
|
|||||||
])
|
])
|
||||||
|
|
||||||
// 模拟上报记录数据(实际项目替换为接口请求)
|
// 模拟上报记录数据(实际项目替换为接口请求)
|
||||||
const reportRecords = ref([
|
const reportRecords = ref([])
|
||||||
{
|
|
||||||
id: 1,
|
const queryParmas = ref({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
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 {
|
||||||
|
id: realId,
|
||||||
title: '标题巴拉巴拉巴拉',
|
title: '标题巴拉巴拉巴拉',
|
||||||
status: 'pending', // pending/processing/completed
|
status: 'pending', // pending/processing/completed
|
||||||
reportType: '公共报修',
|
reportType: '公共报修',
|
||||||
category: '路灯',
|
category: '路灯',
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
||||||
createTime: '2026-08-01 10:05:46',
|
createTime: '2026-08-01 10:05:46',
|
||||||
repairman: ''
|
repairman: '张三' + realId,
|
||||||
},
|
images: [
|
||||||
{
|
'https://picsum.photos/93',
|
||||||
id: 2,
|
'https://picsum.photos/93',
|
||||||
title: '标题巴拉巴拉巴拉',
|
'https://picsum.photos/93',
|
||||||
status: 'processing',
|
'https://picsum.photos/93',
|
||||||
reportType: '公共报修',
|
'https://picsum.photos/93'
|
||||||
category: '路灯',
|
],
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
repairStatus: randomStatus // 0 待分配,1待解决 2已完成
|
||||||
createTime: '2026-08-01 10:05:46',
|
|
||||||
repairman: '张三'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: '标题巴拉巴拉巴拉',
|
|
||||||
status: 'completed',
|
|
||||||
reportType: '公共报修',
|
|
||||||
category: '路灯',
|
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
|
||||||
createTime: '2026-08-01 10:05:46',
|
|
||||||
repairman: '张三'
|
|
||||||
}
|
}
|
||||||
])
|
|
||||||
|
|
||||||
// 筛选后的记录
|
|
||||||
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
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
// 追加数据(正确方式)
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0-------------------------------
|
||||||
// 切换状态(全部/待分配/待解决/已完成)筛选
|
// 切换状态(全部/待分配/待解决/已完成)筛选
|
||||||
const switchStatus = (value) => {
|
const switchStatus = value => {
|
||||||
activeStatus.value = value
|
activeStatus.value = value
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换类型(公共/个人)筛选
|
// 切换类型(公共/个人)筛选
|
||||||
const switchType = (value) => {
|
const switchType = value => {
|
||||||
activeType.value = value
|
activeType.value = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const statusMap = ['待分配', '待解决', '已完成']
|
||||||
|
// 获取状态文本
|
||||||
|
const getStatusText = status => {
|
||||||
|
return statusMap[status] || ''
|
||||||
|
}
|
||||||
// 返回上一页
|
// 返回上一页
|
||||||
const navBack = () => {
|
const navBack = () => {
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url:"/pages/my/my"
|
url: '/pages/my/my'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
/* 0 待分配,1待解决 2已完成*/
|
||||||
// 获取状态文本
|
function handleMain(id) {
|
||||||
const getStatusText = (status) => {
|
const find = reportRecords.value.find(item => item.id === id)
|
||||||
const statusMap = {
|
if (find) {
|
||||||
pending: '待分配',
|
const status = find.repairStatus
|
||||||
processing: '待解决',
|
if (status === 2) {
|
||||||
completed: '已完成'
|
uni.navigateTo({
|
||||||
}
|
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
|
||||||
return statusMap[status] || ''
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// 页面渲染完成后适配高度
|
|
||||||
onReady(() => {
|
|
||||||
// 可根据实际设备调整高度
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: (res) => {
|
|
||||||
if (res.platform === 'ios') {
|
|
||||||
navHeight.value = 44
|
|
||||||
} else {
|
} else {
|
||||||
navHeight.value = 48
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.report-record-page {
|
.bgaction {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 20%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%)
|
z-index: 0;
|
||||||
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25%);
|
||||||
}
|
}
|
||||||
.status-bar{
|
.report-record-page {
|
||||||
width: 100%;
|
height: 100vh;
|
||||||
height: 46px;
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hall_body {
|
||||||
|
padding: 0 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
/* 状态筛选标签 */
|
/* 状态筛选标签 */
|
||||||
.status-tabs {
|
.status-tabs {
|
||||||
@@ -216,66 +271,40 @@ onReady(() => {
|
|||||||
align-items: center;
|
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 {
|
.type-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 48rpx;
|
||||||
/* background-color: #fff; */
|
/* background-color: #fff; */
|
||||||
padding: 20rpx 0rpx;
|
margin: 20rpx 0;
|
||||||
margin-top: 10rpx;
|
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
margin: 0rpx 40rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-tab-item {
|
.type-tab-item {
|
||||||
padding: 12rpx 30rpx;
|
width: 142rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
border: 2rpx solid #999999;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999;
|
color: #999999;
|
||||||
border: 2rpx solid #999;
|
line-height: 48rpx;
|
||||||
border-radius: 198rpx;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-tab-item.active {
|
.type-tab-item.active {
|
||||||
color: #4D5DFA;
|
color: #4d5dfa;
|
||||||
border: 2rpx solid #4D5DFA;
|
border: 2rpx solid #4d5dfa;
|
||||||
border-radius: 198rpx;
|
border-radius: 24rpx;
|
||||||
/* background-color: #007AFF; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 记录列表 */
|
/* 记录列表 */
|
||||||
.record-list {
|
.record-list {
|
||||||
padding: 20rpx 40rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态 */
|
/* 空状态 */
|
||||||
@@ -298,7 +327,7 @@ onReady(() => {
|
|||||||
.record-card {
|
.record-card {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 30rpx;
|
padding: 34rpx 32rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
@@ -311,54 +340,80 @@ onReady(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
|
font-weight: 450;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 状态标签 */
|
/* 状态标签 */
|
||||||
.status-tag {
|
.status-tag {
|
||||||
padding: 6rpx 16rpx;
|
width: 82rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
border-radius: 12rpx;
|
color: #ffffff;
|
||||||
color: #fff;
|
line-height: 30rpx;
|
||||||
border-radius: 198rpx;
|
text-align: center;
|
||||||
|
line-height: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag.pending {
|
.status-tag.pending {
|
||||||
background-color: #E34D59; /* 待分配-红色 */
|
background-color: #e34d59; /* 待分配-红色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag.processing {
|
.status-tag.processing {
|
||||||
background-color: #09C2BD; /* 待解决-绿色 */
|
background-color: #09c2bd; /* 待解决-绿色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-tag.completed {
|
.status-tag.completed {
|
||||||
background-color: #4D5DFA; /* 已完成-蓝色 */
|
background-color: #4d5dfa; /* 已完成-蓝色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 类型标签组 */
|
/* 类型标签组 */
|
||||||
.tag-group {
|
.tag-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15rpx;
|
gap: 20rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-item {
|
.tag-item {
|
||||||
padding: 6rpx 20rpx;
|
width: 112rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
|
border: 1rpx solid #999999;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #999999;
|
||||||
border: 1rpx solid #999;
|
line-height: 42rpx;
|
||||||
border-radius: 8rpx;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容 */
|
/* 内容 */
|
||||||
.card-content {
|
.card-content {
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 20rpx;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部信息 */
|
/* 底部信息 */
|
||||||
@@ -368,9 +423,21 @@ onReady(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
|
||||||
|
|
||||||
.repairman {
|
font-weight: 400;
|
||||||
color: #999;
|
font-size: 28rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
.share {
|
||||||
|
width: 127rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
background: #4d5dfa;
|
||||||
|
border-radius: 22rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -29,7 +29,9 @@
|
|||||||
|
|
||||||
<!-- 退出登录按钮 -->
|
<!-- 退出登录按钮 -->
|
||||||
<view class="logout-btn-wrap">
|
<view class="logout-btn-wrap">
|
||||||
<button class="logout-btn" :disabled="!phoneNumber || !passwordNumber" @tap="handleLogout">退出登录</button>
|
<button class="logout-btn" :disabled="!phoneNumber || !passwordNumber" @tap="handleLogout">
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -43,7 +45,7 @@ const phoneNumber = ref('15699991212') // 绑定手机号
|
|||||||
const passwordNumber = ref('')
|
const passwordNumber = ref('')
|
||||||
|
|
||||||
// 页面加载时可从接口获取用户信息
|
// 页面加载时可从接口获取用户信息
|
||||||
onLoad((option) => {
|
onLoad(option => {
|
||||||
// console.log('option',option)
|
// console.log('option',option)
|
||||||
passwordNumber.value = option.newPassword
|
passwordNumber.value = option.newPassword
|
||||||
const userInfo = uni.getStorageSync('tempChangePwdParams')
|
const userInfo = uni.getStorageSync('tempChangePwdParams')
|
||||||
@@ -55,7 +57,7 @@ onLoad((option) => {
|
|||||||
// 返回上一页
|
// 返回上一页
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url:"/pages/my/my"
|
url: '/pages/my/my'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,7 +82,7 @@ const handleLogout = () => {
|
|||||||
content: '确定要退出当前账号吗?',
|
content: '确定要退出当前账号吗?',
|
||||||
confirmText: '确定',
|
confirmText: '确定',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
success: (res) => {
|
success: res => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
confirmLogout() // 确认退出
|
confirmLogout() // 确认退出
|
||||||
}
|
}
|
||||||
@@ -201,7 +203,7 @@ const confirmLogout = () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
background-color: #4D5DFA;
|
background-color: #4d5dfa;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="report-record-page page_padding">
|
<view class="report-record-page page_padding">
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<NavBar title="工单大厅"></NavBar>
|
<navBar @clickLeft="navBack" title="工单大厅"></navBar>
|
||||||
<view class="hall_body flex-1 flex flex-col">
|
<view class="hall_body flex flex-col">
|
||||||
|
<view class="bgaction"> </view>
|
||||||
<!-- 状态筛选标签 -->
|
<!-- 状态筛选标签 -->
|
||||||
<TabsComponents
|
<TabsComponents
|
||||||
:tabslist="statusTabs"
|
:tabslist="statusTabs"
|
||||||
@@ -24,23 +25,31 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 上报记录列表 -->
|
<!-- 上报记录列表 -->
|
||||||
<scroll-view
|
<scroll-view class="record-list" scroll-y lower-threshold="60" @scrolltolower="scrolltolower">
|
||||||
class="record-list flex-1"
|
|
||||||
scroll-y
|
|
||||||
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
|
|
||||||
>
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
<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>
|
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||||||
<text class="empty-text">暂无上报记录</text>
|
<text class="empty-text">暂无上报记录</text>
|
||||||
</view>
|
</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">
|
<view class="card-header">
|
||||||
<text class="card-title">{{ record.title }}</text>
|
<text class="card-title">{{ record.title }}</text>
|
||||||
<view class="status-tag" :class="record.status">
|
<view
|
||||||
{{ getStatusText(record.status) }}
|
class="status-tag"
|
||||||
|
:class="{
|
||||||
|
pending: record.repairStatus === 0,
|
||||||
|
processing: record.repairStatus === 1,
|
||||||
|
completed: record.repairStatus === 2
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ getStatusText(record.repairStatus) }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -55,8 +64,9 @@
|
|||||||
{{ record.content }}
|
{{ record.content }}
|
||||||
</view>
|
</view>
|
||||||
<!-- 工单图片 -->
|
<!-- 工单图片 -->
|
||||||
<view class="card-image">
|
<view class="card-image" v-if="record.images.length > 0">
|
||||||
<image
|
<image
|
||||||
|
lazy-load
|
||||||
v-for="(item, index) in record.images"
|
v-for="(item, index) in record.images"
|
||||||
:key="index"
|
:key="index"
|
||||||
:src="item"
|
:src="item"
|
||||||
@@ -83,26 +93,23 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, nextTick } from 'vue'
|
||||||
import { onReady } from '@dcloudio/uni-app'
|
import { onReady } 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'
|
||||||
|
|
||||||
// 导航栏/标签高度(适配不同设备)
|
// 导航栏/标签高度(适配不同设备)
|
||||||
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 activeType = ref('all') // 全部/公共报修/个人报修
|
||||||
|
|
||||||
// 状态筛选选项
|
// 状态筛选选项
|
||||||
const statusTabs = ref([
|
const statusTabs = ref([
|
||||||
{ label: '全部', value: 'all' },
|
{ label: '全部', value: 0 },
|
||||||
{ label: '待分配', value: 'pending' },
|
{ label: '待分配', value: 1 },
|
||||||
{ label: '待解决', value: 'processing' },
|
{ label: '待解决', value: 2 },
|
||||||
{ label: '已完成', value: 'completed' }
|
{ label: '已完成', value: 3 }
|
||||||
])
|
])
|
||||||
|
|
||||||
// 类型筛选选项
|
// 类型筛选选项
|
||||||
@@ -113,40 +120,43 @@ const typeTabs = ref([
|
|||||||
])
|
])
|
||||||
|
|
||||||
// 模拟上报记录数据(实际项目替换为接口请求)
|
// 模拟上报记录数据(实际项目替换为接口请求)
|
||||||
const reportRecords = ref([
|
const reportRecords = ref([])
|
||||||
{
|
|
||||||
id: 1,
|
const queryParmas = ref({
|
||||||
title: '标题巴拉巴拉巴拉',
|
pageNum: 1,
|
||||||
status: 'pending', // pending/processing/completed
|
pageSize: 5
|
||||||
reportType: '公共报修',
|
})
|
||||||
category: '路灯',
|
const isLoading = ref(false) // 加载锁
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
const hasMore = ref(true) // 是否还有更多数据
|
||||||
createTime: '2026-08-01 10:05:46',
|
const total = ref(21)
|
||||||
repairman: '',
|
function scrolltolower() {
|
||||||
images: [
|
// 必须加这两个判断!
|
||||||
'https://picsum.photos/93',
|
if (isLoading.value || !hasMore.value) {
|
||||||
'https://picsum.photos/93',
|
return
|
||||||
'https://picsum.photos/93',
|
}
|
||||||
'https://picsum.photos/93',
|
queryParmas.value.pageNum += 1
|
||||||
'https://picsum.photos/93'
|
getlist()
|
||||||
],
|
}
|
||||||
repairStatus: 0 // 0 待分配,1待解决 2已完成
|
function getlist() {
|
||||||
},
|
// 1. 如果正在加载或没有更多数据,直接返回
|
||||||
{
|
if (isLoading.value || !hasMore.value) return
|
||||||
id: 2,
|
// 2. 开启锁
|
||||||
title: '标题巴拉巴拉巴拉',
|
isLoading.value = true
|
||||||
status: 'processing',
|
uni.showLoading({
|
||||||
reportType: '公共报修',
|
title: '加载中',
|
||||||
category: '路灯',
|
mask: true
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
})
|
||||||
createTime: '2026-08-01 10:05:46',
|
const { pageNum, pageSize } = queryParmas.value
|
||||||
repairman: '张三',
|
|
||||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
const startId = (pageNum - 1) * pageSize + 1
|
||||||
repairStatus: 1 // 0 待分配,1待解决 2已完成
|
const arr = Array.from({ length: pageSize }).map((_, index) => {
|
||||||
},
|
const realId = startId + index // ✅ 修复 ID 错误
|
||||||
{
|
|
||||||
id: 3,
|
// ✅ 随机生成 0、1、2
|
||||||
title: '标题巴拉巴拉巴拉',
|
const randomStatus = Math.floor(Math.random() * 3)
|
||||||
|
return {
|
||||||
|
id: realId,
|
||||||
|
title: '标题巴拉巴拉巴拉' + startId + 1,
|
||||||
status: 'completed',
|
status: 'completed',
|
||||||
reportType: '公共报修',
|
reportType: '公共报修',
|
||||||
category: '路灯',
|
category: '路灯',
|
||||||
@@ -154,56 +164,61 @@ const reportRecords = ref([
|
|||||||
createTime: '2026-08-01 10:05:46',
|
createTime: '2026-08-01 10:05:46',
|
||||||
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||||
repairman: '张三',
|
repairman: '张三',
|
||||||
repairStatus: 2 // 0 待分配,1待解决 2已完成
|
repairStatus: randomStatus // 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
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 追加数据(正确方式)
|
||||||
|
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 => {
|
const switchStatus = value => {
|
||||||
activeStatus.value = value
|
activeStatus.value = value
|
||||||
|
resetList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换类型(公共/个人)筛选
|
// 切换类型(公共/个人)筛选
|
||||||
const switchType = value => {
|
const switchType = value => {
|
||||||
activeType.value = value
|
activeType.value = value
|
||||||
|
resetList()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const statusMap = ['待分配', '待解决', '已完成']
|
||||||
// 获取状态文本
|
// 获取状态文本
|
||||||
const getStatusText = status => {
|
const getStatusText = status => {
|
||||||
const statusMap = {
|
|
||||||
pending: '待分配',
|
|
||||||
processing: '待解决',
|
|
||||||
completed: '已完成'
|
|
||||||
}
|
|
||||||
return statusMap[status] || ''
|
return statusMap[status] || ''
|
||||||
}
|
}
|
||||||
|
// 返回上一页
|
||||||
// 页面渲染完成后适配高度
|
const navBack = () => {
|
||||||
onReady(() => {
|
uni.navigateBack()
|
||||||
// 可根据实际设备调整高度
|
}
|
||||||
uni.getSystemInfo({
|
/* 0 待分配,1待解决 2已完成*/
|
||||||
success: res => {
|
function handleMain(id) {
|
||||||
if (res.platform === 'ios') {
|
const find = reportRecords.value.find(item => item.id === id)
|
||||||
navHeight.value = 44
|
if (find) {
|
||||||
|
const status = find.repairStatus
|
||||||
|
if (status === 2) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
navHeight.value = 48
|
uni.navigateTo({
|
||||||
|
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${false}&path=hall`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
/* 预览图片 */
|
/* 预览图片 */
|
||||||
function handlePrivew(imgs) {
|
function handlePrivew(imgs) {
|
||||||
@@ -219,18 +234,25 @@ function handlePrivew(imgs) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.report-record-page {
|
.bgaction {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 20%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
height: 100%;
|
||||||
max-height: 100vh;
|
z-index: 0;
|
||||||
overflow: hidden;
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25%);
|
||||||
box-sizing: border-box;
|
}
|
||||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
.report-record-page {
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 25.71%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hall_body {
|
.hall_body {
|
||||||
|
flex: 1;
|
||||||
padding: 0 40rpx;
|
padding: 0 40rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
/* 状态筛选标签 */
|
/* 状态筛选标签 */
|
||||||
.status-tabs {
|
.status-tabs {
|
||||||
@@ -241,36 +263,6 @@ function handlePrivew(imgs) {
|
|||||||
align-items: center;
|
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 {
|
.type-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -304,6 +296,8 @@ function handlePrivew(imgs) {
|
|||||||
.record-list {
|
.record-list {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: 40rpx;
|
padding-bottom: 40rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态 */
|
/* 空状态 */
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="report-record-page page_padding">
|
<view class="report-record-page page_padding">
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<NavBar title="我的工单"></NavBar>
|
<navBar @clickLeft="navBack" title="我的工单"></navBar>
|
||||||
<view class="hall_body flex-1 flex flex-col">
|
<view class="hall_body flex-1 flex flex-col">
|
||||||
<!-- 状态筛选标签 -->
|
<!-- 状态筛选标签 -->
|
||||||
<TabsComponents
|
<TabsComponents
|
||||||
@@ -27,15 +27,21 @@
|
|||||||
<scroll-view
|
<scroll-view
|
||||||
class="record-list flex-1"
|
class="record-list flex-1"
|
||||||
scroll-y
|
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>
|
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||||||
<text class="empty-text">暂无上报记录</text>
|
<text class="empty-text">暂无上报记录</text>
|
||||||
</view>
|
</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">
|
<view class="card-header">
|
||||||
<text class="card-title">{{ record.title }}</text>
|
<text class="card-title">{{ record.title }}</text>
|
||||||
@@ -55,24 +61,24 @@
|
|||||||
{{ record.content }}
|
{{ record.content }}
|
||||||
</view>
|
</view>
|
||||||
<!-- 工单图片 -->
|
<!-- 工单图片 -->
|
||||||
<view class="card-image">
|
<!-- <view class="card-image">
|
||||||
<image
|
<image
|
||||||
|
lazy-load
|
||||||
v-for="(item, index) in record.images"
|
v-for="(item, index) in record.images"
|
||||||
:key="index"
|
:key="index"
|
||||||
:src="item"
|
:src="item"
|
||||||
class="images"
|
class="images"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
@tap="handlePrivew(record.images)"
|
|
||||||
></image>
|
></image>
|
||||||
</view>
|
</view -->
|
||||||
|
|
||||||
<!-- 底部信息 -->
|
<!-- 底部信息 -->
|
||||||
<view class="card-footer">
|
<view class="card-footer">
|
||||||
<text class="create-time">{{ record.createTime }}</text>
|
<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
|
>维修师傅:{{ record.repairman }}</text
|
||||||
>
|
>
|
||||||
<view class="share" v-if="record.repairStatus === 0">
|
<view class="share" v-if="record.repairStatus === 1">
|
||||||
<text>维修完成</text>
|
<text>维修完成</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -121,6 +127,57 @@ const reportRecords = ref([
|
|||||||
category: '路灯',
|
category: '路灯',
|
||||||
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
||||||
createTime: '2026-08-01 10:05:46',
|
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: 1 // 1待解决 2已完成
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
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: '',
|
repairman: '',
|
||||||
images: [
|
images: [
|
||||||
'https://picsum.photos/93',
|
'https://picsum.photos/93',
|
||||||
@@ -129,46 +186,23 @@ const reportRecords = ref([
|
|||||||
'https://picsum.photos/93',
|
'https://picsum.photos/93',
|
||||||
'https://picsum.photos/93'
|
'https://picsum.photos/93'
|
||||||
],
|
],
|
||||||
repairStatus: 0 // 0 待分配,1待解决 2已完成
|
repairStatus: randomStatus // 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 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
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
// 追加数据(正确方式)
|
||||||
|
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 => {
|
const switchStatus = value => {
|
||||||
@@ -181,28 +215,34 @@ const switchType = value => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 获取状态文本
|
// 获取状态文本
|
||||||
const getStatusText = status => {
|
|
||||||
const statusMap = {
|
const statusMap = {
|
||||||
processing: '待解决',
|
processing: '待解决',
|
||||||
completed: '已完成'
|
completed: '已完成'
|
||||||
}
|
}
|
||||||
|
const getStatusText = status => {
|
||||||
return statusMap[status] || ''
|
return statusMap[status] || ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// 页面渲染完成后适配高度
|
// 返回上一页
|
||||||
onReady(() => {
|
const navBack = () => {
|
||||||
// 可根据实际设备调整高度
|
uni.navigateBack()
|
||||||
uni.getSystemInfo({
|
}
|
||||||
success: res => {
|
// 1待解决 2已完成
|
||||||
if (res.platform === 'ios') {
|
function handleComplted(id) {
|
||||||
navHeight.value = 44
|
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 {
|
} else {
|
||||||
navHeight.value = 48
|
uni.navigateTo({
|
||||||
|
url: `/pageSubPack/ticket/repairMain?id=${id}&showbtn=${true}&path=myticket`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
/* 预览图片 */
|
/* 预览图片 */
|
||||||
function handlePrivew(imgs) {
|
function handlePrivew(imgs) {
|
||||||
// if (imgs.length > 0) {
|
// if (imgs.length > 0) {
|
||||||
@@ -219,8 +259,7 @@ function handlePrivew(imgs) {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.report-record-page {
|
.report-record-page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
height: 100vh;
|
||||||
max-height: 100vh;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||||
@@ -302,6 +341,7 @@ function handlePrivew(imgs) {
|
|||||||
.record-list {
|
.record-list {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: 40rpx;
|
padding-bottom: 40rpx;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 空状态 */
|
/* 空状态 */
|
||||||
|
|||||||
@@ -55,9 +55,10 @@ const form = ref({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
/** 返回上一页 */
|
||||||
function handleSelecthouse() {
|
function handleSelecthouse() {
|
||||||
console.log('compltee')
|
console.log('compltee')
|
||||||
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
<!-- 已经选择人数 -->
|
<!-- 已经选择人数 -->
|
||||||
<view class="checkoutedUser_box">
|
<view class="checkoutedUser_box">
|
||||||
<text>已选(1/1)</text>
|
<text>已选({{ checkoutUserid ? 1 : 0 }}/1)</text>
|
||||||
<text>潘霞通</text>
|
<text class="checkoutUseName" v-if="checkoutInfo">{{ checkoutInfo.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
<!-- srcoll -->
|
<!-- 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">
|
<radio-group @change="radioChange">
|
||||||
<label v-for="(item, index) in searchlist" :key="index">
|
<label v-for="(item, index) in searchlist" :key="index">
|
||||||
<view
|
<view
|
||||||
@@ -64,12 +69,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, getCurrentInstance } from 'vue'
|
||||||
import navBar from '@/components/navbar/navbar.vue'
|
import navBar from '@/components/navbar/navbar.vue'
|
||||||
const Searching = ref(true)
|
const Searching = ref(true)
|
||||||
const queryParmas = ref({
|
|
||||||
value: ''
|
|
||||||
})
|
|
||||||
/** 点击时切换到input,并聚焦 */
|
/** 点击时切换到input,并聚焦 */
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
Searching.value = false
|
Searching.value = false
|
||||||
@@ -80,77 +82,98 @@ function handleInput() {
|
|||||||
Searching.value = true
|
Searching.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function handleSearch() {
|
function handleSearch() {}
|
||||||
console.log('search')
|
|
||||||
}
|
|
||||||
// -----------------------------------------
|
// -----------------------------------------
|
||||||
/* 选择列表 */
|
/* 选择列表 */
|
||||||
const searchlist = ref([
|
const searchlist = ref([])
|
||||||
{
|
|
||||||
name: '张三',
|
const queryParmas = ref({
|
||||||
roleName: '维修人员',
|
pageNum: 1,
|
||||||
phone: '19578012123',
|
pageSize: 10,
|
||||||
id: 1
|
value: ''
|
||||||
},
|
})
|
||||||
{
|
const isLoading = ref(false) // 加载锁
|
||||||
name: '张三',
|
const hasMore = ref(true) // 是否还有更多数据
|
||||||
roleName: '维修人员',
|
const total = ref(21)
|
||||||
phone: '19578012123',
|
function scrolltolower() {
|
||||||
id: 2
|
// 必须加这两个判断!
|
||||||
},
|
if (isLoading.value || !hasMore.value) {
|
||||||
{
|
return
|
||||||
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
|
|
||||||
}
|
}
|
||||||
])
|
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 checkoutUserid = ref(null)
|
||||||
|
const checkoutInfo = ref(null)
|
||||||
function radioChange(val) {
|
function radioChange(val) {
|
||||||
checkoutUserid.value = Number(val.detail.value)
|
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() {
|
function handleSelecthouse() {
|
||||||
// api
|
// api
|
||||||
|
eventChannel.emit('backData', {
|
||||||
|
checkoutUserid: checkoutUserid.value
|
||||||
|
})
|
||||||
// 3. 返回上一页
|
// 3. 返回上一页
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
|
// ===========================================
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.shareUser {
|
.shareUser {
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
.shareBody {
|
.shareBody {
|
||||||
padding: 0 40rpx;
|
padding: 0 40rpx;
|
||||||
@@ -180,6 +203,9 @@ function handleSelecthouse() {
|
|||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 36rpx;
|
line-height: 36rpx;
|
||||||
height: 36rpx;
|
height: 36rpx;
|
||||||
|
.checkoutUseName {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// 角色列表
|
// 角色列表
|
||||||
.item {
|
.item {
|
||||||
|
|||||||
@@ -98,7 +98,8 @@
|
|||||||
{
|
{
|
||||||
"path": "inspection_record",
|
"path": "inspection_record",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "巡检记录"
|
"navigationBarTitleText": "巡检记录",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -143,8 +144,7 @@
|
|||||||
{
|
{
|
||||||
"path": "handle",
|
"path": "handle",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "处理投诉",
|
"navigationBarTitleText": "处理投诉"
|
||||||
"navigationBarBackgroundColor": "#f9f9f9"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -176,6 +176,12 @@
|
|||||||
"navigationBarTitleText": "分配派单"
|
"navigationBarTitleText": "分配派单"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "repairMain",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "维修详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "myticket",
|
"path": "myticket",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -189,6 +195,13 @@
|
|||||||
"navigationBarTitleText": "维修完成",
|
"navigationBarTitleText": "维修完成",
|
||||||
"navigationBarBackgroundColor": "#fff"
|
"navigationBarBackgroundColor": "#fff"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "reportingRecord",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "上报记录",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -75,15 +75,15 @@
|
|||||||
<view class="statistics-wrap">
|
<view class="statistics-wrap">
|
||||||
<view class="statistics-item" @click="goToInspectionRecord">
|
<view class="statistics-item" @click="goToInspectionRecord">
|
||||||
<text class="num">25</text>
|
<text class="num">25</text>
|
||||||
<text class="label">全部巡检点</text>
|
<text class="label">全部巡检</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="statistics-item" @click="goToDaysInspection">
|
<view class="statistics-item" @click="goToDaysInspection">
|
||||||
<text class="num">5</text>
|
<text class="num">5</text>
|
||||||
<text class="label">待巡检点</text>
|
<text class="label">待巡检</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="statistics-item">
|
<view class="statistics-item">
|
||||||
<text class="num">25</text>
|
<text class="num">25</text>
|
||||||
<text class="label">已巡检点</text>
|
<text class="label">已巡检</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 第二行 -->
|
<!-- 第二行 -->
|
||||||
<view class="function-row" style="margin-top: 2px">
|
<view class="function-row" style="margin-top: 2px">
|
||||||
<view class="function-item">
|
<view class="function-item" @tap="goToComplaint">
|
||||||
<image class="item-icon" src="/static/imgs/complaint.png" mode="aspectFit"></image>
|
<image class="item-icon" src="/static/imgs/complaint.png" mode="aspectFit"></image>
|
||||||
<text class="item-text">投诉处理</text>
|
<text class="item-text">投诉处理</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -173,6 +173,12 @@ const goToInspectionRecord = () => {
|
|||||||
url: '/pageSubPack/inspection/inspection_record'
|
url: '/pageSubPack/inspection/inspection_record'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 跳转到 投诉处理
|
||||||
|
const goToComplaint = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/complaint/Details'
|
||||||
|
})
|
||||||
|
}
|
||||||
// 故障上报
|
// 故障上报
|
||||||
const goToReport = () => {
|
const goToReport = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
@@ -200,9 +206,8 @@ const clickItem = index => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content-class {
|
.content-class {
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
padding-bottom: 100rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-height: 110vh;
|
min-height: 100vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.nar-top {
|
.nar-top {
|
||||||
|
|||||||
@@ -1,17 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="contentStyle" style="">
|
<view class="contentStyle" style="">
|
||||||
<view class="status-bar"></view>
|
<view class="status-bar"></view>
|
||||||
<uni-nav-bar title="我的" backgroundColor="transparent" :border="false">
|
<uni-nav-bar title="我的" backgroundColor="transparent" :border="false"> </uni-nav-bar>
|
||||||
</uni-nav-bar>
|
|
||||||
<scroll-view class="page" scroll-y>
|
<scroll-view class="page" scroll-y>
|
||||||
<view class="topBox">
|
<view class="topBox">
|
||||||
<view class="name">
|
<view class="name">
|
||||||
<image src="/static/imgs/touxiang.png" class="img" />
|
<image src="/static/imgs/touxiang.png" class="img" />
|
||||||
<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 60rpx;">
|
<span
|
||||||
<span style="font-size: 36rpx;font-weight: 600;">
|
style="padding: 5rpx 5rpx; display: flex; flex-direction: column; line-height: 60rpx"
|
||||||
|
>
|
||||||
|
<span style="font-size: 36rpx; font-weight: 600">
|
||||||
{{ loginName }}
|
{{ loginName }}
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 26rpx;color:#666666;">
|
<span style="font-size: 26rpx; color: #666666">
|
||||||
{{ phoneNum }}
|
{{ phoneNum }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@@ -20,49 +21,54 @@
|
|||||||
<view class="contentBox">
|
<view class="contentBox">
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<view class="list-container">
|
<view class="list-container">
|
||||||
<view class="list-item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
|
<view
|
||||||
|
class="list-item"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
@click="onItemClick(item)"
|
||||||
|
>
|
||||||
<image :src="item.icon" class="item-icon" />
|
<image :src="item.icon" class="item-icon" />
|
||||||
<view class="item-content">
|
<view class="item-content">
|
||||||
<text class="item-title">{{ item.title }}</text>
|
<text class="item-title">{{ item.title }}</text>
|
||||||
<span class="item-desc" v-if="item.desc"><span
|
<span class="item-desc" v-if="item.desc"
|
||||||
style="align-self: flex-end;font-size: 24rpx;vertical-align: baseline;">{{ item.desc }}</span></span>
|
><span style="align-self: flex-end; font-size: 24rpx; vertical-align: baseline">{{
|
||||||
|
item.desc
|
||||||
|
}}</span></span
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-arrow"></view>
|
<view class="item-arrow"></view>
|
||||||
<!-- <image src="http://47.104.199.163:9090/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
|
<!-- <image src="http://47.104.199.163:9090/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import { ref } from 'vue'
|
||||||
ref
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
|
const list = ref([
|
||||||
const list = ref([{
|
{
|
||||||
icon: "/static/imgs/shangbao.png",
|
icon: '/static/imgs/shangbao.png',
|
||||||
title: "上报记录"
|
title: '上报记录'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "/static/imgs/xunjian.png",
|
icon: '/static/imgs/xunjian.png',
|
||||||
title: "巡检记录",
|
title: '巡检记录'
|
||||||
// desc: "您可以在这里添加家人、朋友、租客~"
|
// desc: "您可以在这里添加家人、朋友、租客~"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "http://47.104.199.163:9090/images/propertyImgs/setting.png",
|
icon: '/static/imgs/xunjian.png',
|
||||||
title: "设置"
|
title: '仪表换新'
|
||||||
|
// desc: "您可以在这里添加家人、朋友、租客~"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'http://47.104.199.163:9090/images/propertyImgs/setting.png',
|
||||||
|
title: '设置'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
const loginName = ref("wangh")
|
const loginName = ref('wangh')
|
||||||
const phoneNum = ref('156*****1212')
|
const phoneNum = ref('156*****1212')
|
||||||
|
|
||||||
// --方法----
|
// --方法----
|
||||||
@@ -72,19 +78,23 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 返回
|
// 返回
|
||||||
const onItemClick = (item) => {
|
const onItemClick = item => {
|
||||||
if (item.title == '上报记录') {
|
if (item.title == '上报记录') {
|
||||||
uni.redirectTo({
|
uni.navigateTo({
|
||||||
url: '/pageSubPack/report-record/report-record',
|
url: '/pageSubPack/report-record/report-record'
|
||||||
});
|
})
|
||||||
} else if (item.title == '巡检记录') {
|
} else if (item.title == '巡检记录') {
|
||||||
uni.redirectTo({
|
uni.navigateTo({
|
||||||
url: '',
|
url: '/pageSubPack/inspection/inspection_record'
|
||||||
});
|
})
|
||||||
|
} else if (item.title == '仪表换新') {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pageSubPack/instrument/replacement_record'
|
||||||
|
})
|
||||||
} else if (item.title == '设置') {
|
} else if (item.title == '设置') {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: '/pageSubPack/setting/setting',
|
url: '/pageSubPack/setting/setting'
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -94,7 +104,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%)
|
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topBox {
|
.topBox {
|
||||||
@@ -121,7 +131,6 @@
|
|||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
top: 16rpx;
|
top: 16rpx;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -133,18 +142,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
|
||||||
bottom: 30rpx;
|
bottom: 30rpx;
|
||||||
left: 30rpx;
|
left: 30rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.contentBox {
|
.contentBox {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.status-bar {
|
.status-bar {
|
||||||
@@ -191,8 +195,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* 超出隐藏 */
|
/* 超出隐藏 */
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-arrow {
|
.item-arrow {
|
||||||
@@ -204,10 +206,6 @@
|
|||||||
margin-right: 10rpx;
|
margin-right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user