|
|
|
@ -1,63 +1,130 @@ |
|
|
|
<!-- 报事记录 --> |
|
|
|
<template> |
|
|
|
<view class="content"> |
|
|
|
<!-- 顶部切换标签 --> |
|
|
|
<view class="tab-container"> |
|
|
|
<view |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: tabValue === 0 }" |
|
|
|
@click="switchTab(0)" |
|
|
|
> |
|
|
|
<text class="tab-text">待处理</text> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: tabValue === 1 }" |
|
|
|
@click="switchTab(1)" |
|
|
|
> |
|
|
|
<text class="tab-text">处理中</text> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: tabValue === 2 }" |
|
|
|
@click="switchTab(2)" |
|
|
|
> |
|
|
|
<text class="tab-text">已处理</text> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: tabValue === 3 }" |
|
|
|
@click="switchTab(3)" |
|
|
|
> |
|
|
|
<text class="tab-text">不予处理</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 下拉刷新容器 --> |
|
|
|
<scroll-view |
|
|
|
class="content" |
|
|
|
class="scroll-container" |
|
|
|
scroll-y="true" |
|
|
|
refresher-enabled |
|
|
|
:refresher-triggered="isRefreshing" |
|
|
|
@refresherrefresh="refreshData" |
|
|
|
@scrolltolower="loadMore" |
|
|
|
refresher-enabled="true" |
|
|
|
:refresher-triggered="refreshing" |
|
|
|
@refresherrefresh="onRefresh" |
|
|
|
@scrolltolower="onLoadMore" |
|
|
|
:style="{ height: 'calc(100vh - 120rpx)' }" |
|
|
|
> |
|
|
|
<!-- 提醒列表 --> |
|
|
|
<view class="reminder-list"> |
|
|
|
<!-- 空状态 --> |
|
|
|
<view v-if="reminderList.length === 0 && !loading" class="empty-state"> |
|
|
|
<text class="empty-text">暂无数据</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 提醒项目列表 --> |
|
|
|
<view |
|
|
|
v-for="(item, index) in reminderList" |
|
|
|
:key="index" |
|
|
|
class="reminder-item" |
|
|
|
@click="handleItemClick(item)" |
|
|
|
> |
|
|
|
<view class="conItem" v-for="(item, index) in repairList" :key="index"> |
|
|
|
<view class="conItemTitle"> |
|
|
|
<image :src="srcUrl(item.feedbackType)" class="titleImg"></image> |
|
|
|
<text class="titleName">{{ feedbackTypeText(item.feedbackType) }}</text> |
|
|
|
<!-- 卡片头部 --> |
|
|
|
<view class="card-header"> |
|
|
|
<view class="header-left"> |
|
|
|
<image |
|
|
|
:src="getTypeIcon(item.feedbackType)" |
|
|
|
class="type-icon" |
|
|
|
></image> |
|
|
|
<text class="type-name">{{ |
|
|
|
getTypeName(item.feedbackType) |
|
|
|
}}</text> |
|
|
|
</view> |
|
|
|
<view class="conItemCon"> |
|
|
|
<view class="repairInfo"> |
|
|
|
<view class="infoRow"> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 卡片内容 --> |
|
|
|
<view class="card-content"> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="label">问题描述：</text> |
|
|
|
<text class="value">{{ item.faultDescribe }}</text> |
|
|
|
</view> |
|
|
|
<view class="infoRow"> |
|
|
|
<text class="label">图片/视频：</text> |
|
|
|
<view |
|
|
|
class="image-preview-item" |
|
|
|
v-for="(u, t) in item.images" |
|
|
|
:key="t" |
|
|
|
@click="previewImage(item.images, t)" |
|
|
|
> |
|
|
|
<view class="info-row" v-if="item.images && item.images.length > 0"> |
|
|
|
<text class="label">图片：</text> |
|
|
|
<view class="image-container"> |
|
|
|
<image |
|
|
|
:src="u.url" |
|
|
|
class="problemImage" |
|
|
|
v-for="(img, imgIndex) in item.images" |
|
|
|
:key="imgIndex" |
|
|
|
:src="img.url" |
|
|
|
class="problem-image" |
|
|
|
mode="aspectFill" |
|
|
|
@click.stop="previewImage(item.images, imgIndex)" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="infoRow"> |
|
|
|
<text class="label">报事人：</text> |
|
|
|
<text class="value">{{ item.graduateName }}</text> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="label">位置：</text> |
|
|
|
<text class="value">{{ item.position || "" }}</text> |
|
|
|
</view> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="label">上报人：</text> |
|
|
|
<text class="value">{{ item.graduateName || "" }}</text> |
|
|
|
</view> |
|
|
|
<view class="infoRow"> |
|
|
|
<text class="label">报事人电话：</text> |
|
|
|
<text class="value">{{ item.telephone }}</text> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="label">上报人电话：</text> |
|
|
|
<text class="value">{{ item.telephone || "" }}</text> |
|
|
|
</view> |
|
|
|
<view class="infoRow"> |
|
|
|
<view class="info-row"> |
|
|
|
<text class="label">上报时间：</text> |
|
|
|
<text class="value">{{ item.createTime }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="actionButtons"> |
|
|
|
<button class="btn process" @click="handleProcess(item)">处理</button> |
|
|
|
<!-- <button class="btn dispatch" @click="handleDispatch(item)"> |
|
|
|
派单 |
|
|
|
</button> --> |
|
|
|
|
|
|
|
<!-- 操作按钮 --> |
|
|
|
<view class="action-buttons" > |
|
|
|
<button class="btn process" @click.stop="handleProcess(item)"> |
|
|
|
处理 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 加载更多提示 --> |
|
|
|
<view v-if="loading" class="loading-more"> |
|
|
|
<text>加载中...</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 没有更多数据提示 --> |
|
|
|
<view v-if="noMore && reminderList.length > 0" class="no-more"> |
|
|
|
<text>没有更多数据了</text> |
|
|
|
</view> |
|
|
|
<view style="text-align: center" v-if="isLoading">加载中...</view> |
|
|
|
<view v-else-if="repairList.length <= 0" class="no-data"> 暂无数据~ </view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -65,99 +132,96 @@ import { listReport } from "@/pages/api"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isRefreshing: false, |
|
|
|
feedbackTypeOptions: [ |
|
|
|
{ value: 1, label: "安全问题", url: "/static/img/维修列表里.png" }, |
|
|
|
{ value: 2, label: "卫生问题", url: "/static/img/列表里图标.png" }, |
|
|
|
{ value: 3, label: "服务问题", url: "/static/img/问题投诉列表里.png" }, |
|
|
|
{ value: 4, label: "噪音问题", url: "/static/img/列表里图标.png" }, |
|
|
|
{ value: 5, label: "体验问题", url: "/static/img/列表里图标.png" }, |
|
|
|
{ value: 6, label: "其他", url: "/static/img/问题投诉列表里.png" }, |
|
|
|
], |
|
|
|
tabValue: 0, // 默认选中待处理 |
|
|
|
refreshing: false, |
|
|
|
loading: false, |
|
|
|
noMore: false, |
|
|
|
isLoading: false, |
|
|
|
repairList: [], |
|
|
|
form: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
unreadCount: 0, |
|
|
|
reminderList: [], |
|
|
|
// 类型配置 |
|
|
|
typeConfig: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
name: "报修", |
|
|
|
icon: "/static/img/维修列表里.png", |
|
|
|
}, |
|
|
|
total: "", |
|
|
|
}; |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
name: "报事", |
|
|
|
icon: "/static/img/列表里图标.png", |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.getList(); |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
name: "投诉", |
|
|
|
icon: "/static/img/问题投诉列表里.png", |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
processStatusText() { |
|
|
|
return (state) => { |
|
|
|
switch (state) { |
|
|
|
case 0: |
|
|
|
return "待处理"; |
|
|
|
case 1: |
|
|
|
return "处理中"; |
|
|
|
case 2: |
|
|
|
return "已处理"; |
|
|
|
case 3: |
|
|
|
return "不予处理"; |
|
|
|
default: |
|
|
|
return ""; |
|
|
|
} |
|
|
|
}; |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
name: "建议", |
|
|
|
icon: "/static/img/巡检记录列表里.png", |
|
|
|
}, |
|
|
|
feedbackTypeText() { |
|
|
|
return (type) => { |
|
|
|
const feedbackTypeObj = this.feedbackTypeOptions.find( |
|
|
|
(item) => item.value === type |
|
|
|
); |
|
|
|
return feedbackTypeObj ? feedbackTypeObj.label : ""; |
|
|
|
}; |
|
|
|
{ |
|
|
|
value: 5, |
|
|
|
name: "其他", |
|
|
|
icon: "/static/img/问题投诉列表里.png", |
|
|
|
}, |
|
|
|
srcUrl() { |
|
|
|
return (type) => { |
|
|
|
const feedbackTypeObj = this.feedbackTypeOptions.find( |
|
|
|
(item) => item.value === type |
|
|
|
); |
|
|
|
return feedbackTypeObj ? feedbackTypeObj.url : ""; |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.loadReminderList(); |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// 页面显示时刷新数据 |
|
|
|
this.refreshData(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 计算未读消息数量 |
|
|
|
unreadCount() { |
|
|
|
return this.reminderList.filter((item) => item.hasUnread).length; |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 报事列表 |
|
|
|
async getList() { |
|
|
|
const res = await listReport(this.form); |
|
|
|
if (res.code === 200) { |
|
|
|
this.repairList = res.rows; |
|
|
|
this.total = res.total; |
|
|
|
if (res.total <= this.form.pageSize * this.form.pageNum) { |
|
|
|
this.noMore = true; |
|
|
|
} |
|
|
|
this.isLoading = false; |
|
|
|
this.isRefreshing = false; |
|
|
|
if (this.form.pageNum == 1) { |
|
|
|
this.repairList = res.rows; |
|
|
|
} else { |
|
|
|
this.repairList = [...this.repairList, ...res.rows]; |
|
|
|
} |
|
|
|
} |
|
|
|
onChange(name) { |
|
|
|
this.tabValue = name; |
|
|
|
console.log(name); |
|
|
|
}, |
|
|
|
|
|
|
|
// 刷新数据 |
|
|
|
refreshData() { |
|
|
|
this.isRefreshing = true; |
|
|
|
this.noMore = false; // 新增 |
|
|
|
this.repairList = []; |
|
|
|
this.form.pageNum = 1; // 重置页码到第一页 |
|
|
|
this.getList(); |
|
|
|
this.pageNum = 1; |
|
|
|
this.noMore = false; |
|
|
|
this.loadReminderList(true); |
|
|
|
}, |
|
|
|
// 加载更多数据（分页） |
|
|
|
loadMore() { |
|
|
|
if (this.isLoading || this.noMore) return; // 新增 noMore 判断 |
|
|
|
this.isLoading = true; |
|
|
|
this.form.pageNum++; |
|
|
|
this.getList(); |
|
|
|
|
|
|
|
// 切换标签 |
|
|
|
switchTab(value) { |
|
|
|
this.tabValue = value; |
|
|
|
this.pageNum = 1; |
|
|
|
this.noMore = false; |
|
|
|
this.reminderList = []; |
|
|
|
this.loadReminderList(true); |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取类型名称 |
|
|
|
getTypeName(type) { |
|
|
|
const name = this.typeConfig.find((item) => item.value === type)?.name; |
|
|
|
return name || ""; |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取类型图标 |
|
|
|
getTypeIcon(type) { |
|
|
|
const icon = this.typeConfig.find((item) => item.value === type)?.icon; |
|
|
|
return icon || "/static/img/巡检记录列表里.png"; |
|
|
|
}, |
|
|
|
previewImage(item, index) { |
|
|
|
|
|
|
|
// 预览图片 |
|
|
|
previewImage(images, index) { |
|
|
|
uni.previewImage({ |
|
|
|
current: index, |
|
|
|
urls: item.map((item) => item.url), |
|
|
|
urls: images.map((img) => img.url), |
|
|
|
success: (res) => { |
|
|
|
console.log("预览成功"); |
|
|
|
}, |
|
|
|
@ -166,14 +230,112 @@ export default { |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理按钮点击 |
|
|
|
handleProcess(item) { |
|
|
|
console.log("处理项目:", item); |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pagesA/bsPage/bsHandle?id=${item.id}`, |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleDispatch(item) { |
|
|
|
console.log("派单", item); |
|
|
|
// 派单逻辑 |
|
|
|
|
|
|
|
// 加载提醒列表 |
|
|
|
async loadReminderList(isRefresh = false) { |
|
|
|
if (this.loading) return; |
|
|
|
|
|
|
|
this.loading = true; |
|
|
|
|
|
|
|
try { |
|
|
|
const res = await listReport({ |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize: this.pageSize, |
|
|
|
state: |
|
|
|
this.tabValue == 0 |
|
|
|
? 0 |
|
|
|
: this.tabValue == 1 |
|
|
|
? 1 |
|
|
|
: this.tabValue == 2 |
|
|
|
? 2 |
|
|
|
: 3, // 0: 待处理, 1: 已处理, 2: 不予处理 |
|
|
|
}); |
|
|
|
|
|
|
|
if (res.code === 200) { |
|
|
|
const data = res.rows || []; |
|
|
|
|
|
|
|
if (isRefresh) { |
|
|
|
this.reminderList = data; |
|
|
|
this.pageNum = 1; |
|
|
|
} else { |
|
|
|
this.reminderList = [...this.reminderList, ...data]; |
|
|
|
} |
|
|
|
|
|
|
|
// 判断是否还有更多数据 |
|
|
|
if (data.length < this.pageSize) { |
|
|
|
this.noMore = true; |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error("加载提醒列表失败:", error); |
|
|
|
} finally { |
|
|
|
this.loading = false; |
|
|
|
this.refreshing = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 下拉刷新 |
|
|
|
async onRefresh() { |
|
|
|
this.pageNum = 1; |
|
|
|
this.refreshing = true; |
|
|
|
this.noMore = false; |
|
|
|
await this.loadReminderList(true); |
|
|
|
}, |
|
|
|
|
|
|
|
// 上拉加载更多 |
|
|
|
async onLoadMore() { |
|
|
|
if (this.noMore || this.loading) return; |
|
|
|
|
|
|
|
this.pageNum++; |
|
|
|
await this.loadReminderList(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理项目点击 |
|
|
|
async handleItemClick(item) { |
|
|
|
console.log("点击提醒项目:", item); |
|
|
|
|
|
|
|
try { |
|
|
|
// 调用API标记为已读 |
|
|
|
if (item.hasUnread) { |
|
|
|
await markReminderRead(item.id); |
|
|
|
item.hasUnread = false; |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error("标记已读失败:", error); |
|
|
|
// 即使API失败，也更新本地状态 |
|
|
|
item.hasUnread = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 格式化时间 |
|
|
|
formatTime(time) { |
|
|
|
const now = new Date(); |
|
|
|
const targetTime = new Date(time); |
|
|
|
const diff = now - targetTime; |
|
|
|
const oneDay = 24 * 60 * 60 * 1000; |
|
|
|
|
|
|
|
if (diff < oneDay && targetTime.toDateString() === now.toDateString()) { |
|
|
|
return "今天"; |
|
|
|
} else { |
|
|
|
return targetTime |
|
|
|
.toLocaleString("zh-CN", { |
|
|
|
year: "numeric", |
|
|
|
month: "2-digit", |
|
|
|
day: "2-digit", |
|
|
|
hour: "2-digit", |
|
|
|
minute: "2-digit", |
|
|
|
second: "2-digit", |
|
|
|
}) |
|
|
|
.replace(/\//g, "-"); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -183,53 +345,148 @@ export default { |
|
|
|
.content { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
background-color: rgba(248, 248, 248, 1); |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-container { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
border-bottom: 1rpx solid #eee; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
position: relative; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item.active { |
|
|
|
color: #08b3b3; |
|
|
|
} |
|
|
|
|
|
|
|
// .tab-item.active::after { |
|
|
|
// content: ''; |
|
|
|
// position: absolute; |
|
|
|
// bottom: -20rpx; |
|
|
|
// left: 50%; |
|
|
|
// transform: translateX(-50%); |
|
|
|
// width: 60rpx; |
|
|
|
// height: 4rpx; |
|
|
|
// background-color: #08B3B3; |
|
|
|
// border-radius: 2rpx; |
|
|
|
// } |
|
|
|
|
|
|
|
.tab-text { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.conItem { |
|
|
|
.tab-item.active .tab-text { |
|
|
|
color: #08b3b3; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.pageNum-header { |
|
|
|
background-color: #fff; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
border-bottom: 1rpx solid #eee; |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
z-index: 100; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.pageNum-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.unread-badge { |
|
|
|
position: absolute; |
|
|
|
top: 10rpx; |
|
|
|
right: 30rpx; |
|
|
|
background-color: #f44336; |
|
|
|
color: #fff; |
|
|
|
font-size: 20rpx; |
|
|
|
padding: 4rpx 12rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
min-width: 32rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.scroll-container { |
|
|
|
width: 100%; |
|
|
|
border-radius: 10rpx; |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.reminder-list { |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 16rpx; |
|
|
|
margin: 20rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|
|
|
} |
|
|
|
|
|
|
|
.reminder-item { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 30rpx; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.reminder-item:active { |
|
|
|
transform: scale(0.98); |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.reminder-item-line { |
|
|
|
height: 1rpx; |
|
|
|
background-color: #f0f0f0; |
|
|
|
width: 80%; |
|
|
|
} |
|
|
|
|
|
|
|
.reminder-item:active { |
|
|
|
transform: scale(0.98); |
|
|
|
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.conItemTitle { |
|
|
|
.card-header { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.header-left { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.titleImg { |
|
|
|
.type-icon { |
|
|
|
width: 38rpx; |
|
|
|
height: 38rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.titleName { |
|
|
|
color: rgba(0, 0, 0, 1); |
|
|
|
.type-name { |
|
|
|
font-size: 28rpx; |
|
|
|
text-align: left; |
|
|
|
margin-left: 10rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.conItemCon { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.repairInfo { |
|
|
|
width: 100%; |
|
|
|
background-color: rgba(249, 249, 249, 1); |
|
|
|
.card-content { |
|
|
|
background-color: #f9f9f9; |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 10rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.infoRow { |
|
|
|
.info-row { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
margin-bottom: 15rpx; |
|
|
|
@ -237,6 +494,10 @@ export default { |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.info-row:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
color: #a9afba; |
|
|
|
font-size: 28rpx; |
|
|
|
@ -246,28 +507,32 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
color: rgba(0, 0, 0, 1); |
|
|
|
color: #333; |
|
|
|
font-size: 26rpx; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.problemImage { |
|
|
|
.image-container { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 10rpx; |
|
|
|
margin-top: 5rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.problem-image { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
margin-top: 5rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.actionButtons { |
|
|
|
.action-buttons { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20rpx; |
|
|
|
margin-left: auto; |
|
|
|
gap: 20rpx; |
|
|
|
width: fit-content; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
@ -275,16 +540,43 @@ export default { |
|
|
|
height: 52rpx; |
|
|
|
line-height: 46rpx; |
|
|
|
border-radius: 52rpx; |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
color: rgba(8, 179, 179, 1); |
|
|
|
background-color: #fff; |
|
|
|
color: #08b3b3; |
|
|
|
font-size: 28rpx; |
|
|
|
text-align: center; |
|
|
|
font-family: AlibabaPuHui-regular; |
|
|
|
border: 2rpx solid rgba(8, 179, 179, 1); |
|
|
|
border: 2rpx solid #08b3b3; |
|
|
|
} |
|
|
|
|
|
|
|
.btn.process { |
|
|
|
border-color: #08b3b3; |
|
|
|
color: #08b3b3; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-more, |
|
|
|
.no-more { |
|
|
|
text-align: center; |
|
|
|
padding: 30rpx; |
|
|
|
color: #999; |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-state { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 100rpx 30rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.dispatch { |
|
|
|
border-color: #ff8c00; |
|
|
|
color: #ff8c00; |
|
|
|
.empty-icon { |
|
|
|
font-size: 80rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
