153 lines
3.4 KiB
Vue
153 lines
3.4 KiB
Vue
<template>
|
||
<view class="order-notice-page">
|
||
<!-- 列表 -->
|
||
<scroll-view class="order-list" scroll-y>
|
||
<!-- 单个工单项 -->
|
||
<view
|
||
class="order-item"
|
||
v-for="(item, index) in orderList"
|
||
:key="index"
|
||
@click="goToDetail(item.id)"
|
||
>
|
||
<!-- 工单标题栏（含未读红点） -->
|
||
<view class="order-header">
|
||
<text class="order-title">你有新的维修工单</text>
|
||
<view class="unread-dot" v-if="item.unread"></view>
|
||
</view>
|
||
|
||
<!-- 工单内容 -->
|
||
<view class="order-content">
|
||
<text class="content-title">{{ item.title }}</text>
|
||
<text class="content-desc">{{ item.desc }}</text>
|
||
</view>
|
||
<view class="line-class"></view>
|
||
|
||
<!-- 详情入口 -->
|
||
<view class="order-detail">
|
||
<text class="detail-text">详情</text>
|
||
<uni-icons type="right" size="14" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空数据占位 -->
|
||
<view class="empty-tip" v-if="orderList.length === 0">
|
||
<text>暂无新的维修工单</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
// 模拟工单数据（可替换为接口请求）
|
||
const orderList = ref([
|
||
{
|
||
id: 1,
|
||
unread: true, // 是否未读（显示红点）
|
||
title: '标题巴拉巴拉',
|
||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。'
|
||
},
|
||
{
|
||
id: 2,
|
||
unread: false, // 已读（无红点）
|
||
title: '标题巴拉巴拉',
|
||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。'
|
||
}
|
||
])
|
||
|
||
// 点击跳转工单详情页
|
||
const goToDetail = (orderId) => {
|
||
uni.navigateTo({
|
||
url: `/pages/repair-detail/repair-detail?id=${orderId}` // 替换为你的详情页路径
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.order-notice-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
// 工单列表
|
||
.order-list {
|
||
padding: 10px 0px;
|
||
height: calc(100vh - 44px);
|
||
|
||
// 单个工单项
|
||
.order-item {
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
|
||
// 工单标题栏（含未读红点）
|
||
.order-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
.order-title {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// 未读红点
|
||
.unread-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: #ff3b30;
|
||
}
|
||
}
|
||
|
||
// 工单内容
|
||
.order-content {
|
||
margin-bottom: 12px;
|
||
|
||
.content-title {
|
||
font-size: 14px;
|
||
color: #666;
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.content-desc {
|
||
font-size: 13px;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
display: block;
|
||
}
|
||
}
|
||
.line-class{
|
||
border: 1px solid #d4d4d4;
|
||
}
|
||
|
||
// 详情入口
|
||
.order-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 20rpx;
|
||
|
||
.detail-text {
|
||
font-size: 13px;
|
||
color: #999;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 空数据提示
|
||
.empty-tip {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
</style> |