493 lines
12 KiB
Vue
493 lines
12 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 标签栏 -->
|
|
<view class="content">
|
|
<u-tabs
|
|
:list="tabList"
|
|
lineWidth="30"
|
|
lineColor="#3B8CFF"
|
|
:activeStyle="{
|
|
color: '#3B8CFF',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
}"
|
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
|
|
@change="handleTabChange"
|
|
></u-tabs>
|
|
</view>
|
|
|
|
<view class="content_wapper">
|
|
<view class="content_list">
|
|
<!-- 工单列表 -->
|
|
<view
|
|
v-for="(order, index) in filteredOrders"
|
|
:key="index"
|
|
class="order-item"
|
|
:class="{'order-item--special': order.status === 2}"
|
|
@click="goDetail(order)"
|
|
>
|
|
<view class="order-title">
|
|
<view class="title">
|
|
<view class="title-text">
|
|
<text :style="{color: getStatusColor(order.status)}">●</text>
|
|
<!-- <text> 我的工单 </text> -->
|
|
</view>
|
|
<u-tag
|
|
size="mini"
|
|
:text="getStatusText(order.status)"
|
|
:type="getStatusType(order.status)"
|
|
:style="{
|
|
backgroundColor: getStatusBgColor(order.status),
|
|
color: getStatusColor(order.status),
|
|
borderColor: getStatusColor(order.status)
|
|
}"
|
|
></u-tag>
|
|
</view>
|
|
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
|
</view>
|
|
<view class="order-description">{{ order.title }}</view>
|
|
<view class="order-meta">
|
|
<text class="meta-item">{{ order.label || '通用问题' }}</text>
|
|
<button
|
|
@click.stop="handleAction(order, $event)"
|
|
class="order-action"
|
|
v-if="order.status !== 3 "
|
|
>
|
|
删除
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态提示 -->
|
|
<view class="load-more" v-if="loading">
|
|
<u-loading-icon mode="circle" size="24"></u-loading-icon>
|
|
<text class="load-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 空状态提示 -->
|
|
<u-empty
|
|
textSize="24"
|
|
width="180px"
|
|
height="780px"
|
|
v-if="filteredOrders.length === 0 && !loading"
|
|
mode="data"
|
|
icon="/static/imgs/noData.png"
|
|
></u-empty>
|
|
|
|
<!-- 没有更多数据提示 -->
|
|
<view class="no-more" v-if="noMoreData && orders.length > 0 && filteredOrders.length != 0">
|
|
|
|
<text>没有更多数据了</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 发布工单按钮 -->
|
|
<view class="fab-container">
|
|
<view class="fab-button" @click="showPublishForm">
|
|
<text class="fab-icon">+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Footer from '@/components/footer_common.vue';
|
|
import { get, post,put , del } from '@/utils/request';
|
|
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
|
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
|
export default {
|
|
components: { Footer },
|
|
data() {
|
|
return {
|
|
tabList: [
|
|
{ name: '全部', value: '' },
|
|
{ name: '沟通中', value: 2 },
|
|
{ name: '已解决', value: 3 },
|
|
{ name: '驳回', value: 99 },
|
|
{ name: '待审核', value: 1 }
|
|
],
|
|
orders: [],
|
|
currentTab: '', // 默认显示全部
|
|
isLoading: false,
|
|
formatTime,
|
|
currentPage: 1, // 当前页码
|
|
pageSize: 10, // 每页数量
|
|
loading: false, // 加载状态
|
|
noMoreData: false, // 是否没有更多数据
|
|
};
|
|
},
|
|
mounted(){
|
|
this.getWorkOrderList();
|
|
// 绑定上拉加载事件
|
|
uni.$on('scrollToLower', this.loadMore);
|
|
},
|
|
beforeDestroy() {
|
|
// 移除事件监听
|
|
uni.$off('scrollToLower', this.loadMore);
|
|
},
|
|
computed: {
|
|
filteredOrders() {
|
|
if (this.currentTab === '') {
|
|
return this.orders;
|
|
} else {
|
|
return this.orders.filter(order => order.status === this.currentTab);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 新增：获取状态对应的颜色
|
|
getStatusColor(status) {
|
|
const colorMap = {
|
|
1: '#FF7D00', // 待审核-橙色
|
|
2: '#00B42A', // 进行中-绿色
|
|
3: '#86909C', // 已完成-灰色
|
|
99: '#F53F3F', // 驳回-红色
|
|
98: '#86909C' // 已撤回-灰色
|
|
};
|
|
return colorMap[status] || '#86909C';
|
|
},
|
|
|
|
// 新增：获取状态标签背景色
|
|
getStatusBgColor(status) {
|
|
const colorMap = {
|
|
1: 'rgba(255, 125, 0, 0.1)', // 待审核-浅橙
|
|
2: 'rgba(0, 180, 42, 0.1)', // 进行中-浅绿
|
|
3: 'rgba(134, 144, 156, 0.1)', // 已完成-浅灰
|
|
99: 'rgba(245, 63, 63, 0.1)', // 驳回-浅红
|
|
98: 'rgba(134, 144, 156, 0.1)' // 已撤回-浅灰
|
|
};
|
|
return colorMap[status] || 'rgba(134, 144, 156, 0.1)';
|
|
},
|
|
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
'': '全部',
|
|
1:'待审核',
|
|
2: '进行中',
|
|
3: '已完成',
|
|
99:'驳回',
|
|
98:'已撤回'
|
|
};
|
|
return statusMap[status] || '未知状态';
|
|
},
|
|
|
|
getStatusType(status) {
|
|
const typeMap = {
|
|
1:'warning',
|
|
2: 'success',
|
|
3: 'success',
|
|
99:'error',
|
|
98:'error'
|
|
};
|
|
return typeMap[status] || 'info';
|
|
},
|
|
|
|
handleBack() {
|
|
uni.navigateBack({ delta: 1 });
|
|
},
|
|
|
|
handleTabChange(index) {
|
|
this.currentTab = index.value;
|
|
this.resetList(); // 切换标签时重置列表
|
|
},
|
|
|
|
// 重置列表数据
|
|
resetList() {
|
|
this.currentPage = 1;
|
|
this.orders = [];
|
|
this.noMoreData = false;
|
|
this.getWorkOrderList();
|
|
},
|
|
|
|
showPublishForm() {
|
|
uni.showToast({
|
|
title: '即将打开发布工单表单',
|
|
icon: 'none'
|
|
});
|
|
uni.navigateTo({ url: '/pages/serviceTickets/index' });
|
|
},
|
|
|
|
handleAction(order, e) {
|
|
e.stopPropagation();
|
|
if (order.status !== 3 ) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除这个工单吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.withdrawOrder(order.id);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
async withdrawOrder(orderId) {
|
|
try {
|
|
const res = await del(`/api/v1/app_auth/work-order/${orderId}`);
|
|
if (res?.success) {
|
|
uni.showToast({ title: '工单已删除', icon: 'success' });
|
|
this.resetList(); // 撤回后重新加载列表
|
|
}
|
|
} catch (err) {
|
|
console.error('删除工单失败:', err);
|
|
uni.showToast({ title: '删除失败', icon: 'none' });
|
|
}
|
|
},
|
|
|
|
goDetail(i){
|
|
uni.setStorageSync("Detail",i)
|
|
uni.navigateTo({ url: '/pages/myTicketsDetail/index' });
|
|
},
|
|
|
|
// 加载更多数据
|
|
loadMore() {
|
|
if (this.loading || this.noMoreData) return;
|
|
this.currentPage += 1;
|
|
this.getWorkOrderList();
|
|
},
|
|
|
|
async getWorkOrderList(){
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
|
|
try {
|
|
const res = await get('/api/v1/app_auth/my/work-order', {
|
|
current: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
});
|
|
|
|
if (res?.success) {
|
|
const newData = res.data || [];
|
|
if (this.currentPage === 1) {
|
|
this.orders = newData;
|
|
} else {
|
|
this.orders = [...this.orders, ...newData];
|
|
}
|
|
|
|
// 判断是否还有更多数据
|
|
this.noMoreData = newData.length < this.pageSize;
|
|
}
|
|
} catch (err) {
|
|
console.error('获取工单列表失败:', err);
|
|
uni.showToast({ title: '加载列表失败', icon: 'none' });
|
|
// 加载失败时回退页码
|
|
if (this.currentPage > 1) {
|
|
this.currentPage -= 1;
|
|
}
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 丰富色彩的样式变量
|
|
$primary-color: #3B8CFF; // 主色调-蓝色
|
|
$secondary-color: #FF7D00; // 辅助色-橙色
|
|
$success-color: #00B42A; // 成功色-绿色
|
|
$danger-color: #F53F3F; // 危险色-红色
|
|
$gray-color: #86909C; // 灰色
|
|
$light-bg: #F7F8FA; // 页面背景
|
|
$card-bg: #FFFFFF; // 卡片背景
|
|
|
|
// 渐变色定义
|
|
$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
|
|
$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
|
|
|
|
.container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: $light-bg;
|
|
position: relative;
|
|
|
|
.content {
|
|
width: 100%;
|
|
padding: 15rpx 0;
|
|
background-color: $card-bg;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
|
|
::v-deep .u-tabs {
|
|
padding: 0 15rpx;
|
|
}
|
|
|
|
// 标签栏下划线动画
|
|
::v-deep .u-tabs__line {
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
}
|
|
|
|
.content_wapper {
|
|
width: 100%;
|
|
padding: 25rpx 0 140rpx;
|
|
box-sizing: border-box;
|
|
|
|
.content_list {
|
|
width: 100%;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
|
|
.order-item {
|
|
width: 90%;
|
|
margin: 0 0 25rpx;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
background-color: $card-bg;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
|
|
transform: translateY(-3rpx);
|
|
}
|
|
|
|
// 为进行中的工单添加特殊标识
|
|
&--special {
|
|
border-left: 6rpx solid $success-color;
|
|
}
|
|
|
|
.order-title {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15rpx;
|
|
|
|
.title-text {
|
|
color: #1D2129;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.date {
|
|
color: $gray-color;
|
|
font-size: 24rpx;
|
|
padding: 5rpx 10rpx;
|
|
background-color: rgba(134, 144, 156, 0.08);
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
.order-description {
|
|
font-size: 28rpx;
|
|
color: #1D2129;
|
|
line-height: 1.7;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px dashed #EEEEEE;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.order-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.meta-item {
|
|
color: $gray-color;
|
|
font-size: 24rpx;
|
|
padding: 3rpx 12rpx;
|
|
background-color: rgba(134, 144, 156, 0.08);
|
|
border-radius: 15rpx;
|
|
}
|
|
}
|
|
|
|
.order-action {
|
|
min-width: 130rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
background-color: $danger-color;
|
|
color: #fff;
|
|
border-radius: 28rpx;
|
|
font-size: 24rpx;
|
|
margin: 0;
|
|
padding: 0;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
background-color: #e02020;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 加载更多样式
|
|
.load-more {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
color: $gray-color;
|
|
font-size: 26rpx;
|
|
|
|
.load-text {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
|
|
// 没有更多数据样式
|
|
.no-more {
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
color: $gray-color;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 发布按钮增强
|
|
.fab-container {
|
|
position: fixed;
|
|
right: 40rpx;
|
|
bottom: 220rpx;
|
|
z-index: 100;
|
|
|
|
.fab-button {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 50%;
|
|
background: $gradient-primary;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 8rpx 20rpx rgba(59, 140, 255, 0.45);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 5rpx solid rgba(255, 255, 255, 0.3);
|
|
|
|
// &:hover {
|
|
// transform: scale(1.1) rotate(90deg);
|
|
// box-shadow: 0 10rpx 25rpx rgba(59, 140, 255, 0.55);
|
|
// }
|
|
}
|
|
|
|
.fab-icon {
|
|
color: white;
|
|
font-size: 65rpx;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
top: -4rpx; // 向上微调2rpx
|
|
}
|
|
}
|
|
}
|
|
</style> |