355 lines
8.0 KiB
Vue
355 lines
8.0 KiB
Vue
|
|
<template>
|
|
<view class="container">
|
|
<!-- 引入头部组件 -->
|
|
<view class="content">
|
|
<!-- 标签栏 -->
|
|
<u-tabs
|
|
:list="tabList"
|
|
lineWidth="30"
|
|
lineColor="#3B8CFF"
|
|
:activeStyle="{
|
|
color: '#303133',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
}"
|
|
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px"
|
|
@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" @click="goDetail(order)">
|
|
<view class="order-title">
|
|
<view class="title">
|
|
<view class="title-text">{{ order.title }}</view>
|
|
<u-tag
|
|
size="mini"
|
|
:text="getStatusText(order.status)"
|
|
:type="getStatusType(order.status)"
|
|
plain
|
|
></u-tag>
|
|
</view>
|
|
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
|
</view>
|
|
<view class="order-description">{{ order.content }}</view>
|
|
<button
|
|
@click.stop="handleAction(order)"
|
|
class="order-action"
|
|
v-if="order.status === 2"
|
|
>撤回</button>
|
|
</view>
|
|
|
|
<!-- 空状态提示 -->
|
|
<u-empty
|
|
textSize="24"
|
|
width="180px"
|
|
height="780px"
|
|
v-if="filteredOrders.length === 0"
|
|
mode="data"
|
|
icon="/static/imgs/noData.jpeg"
|
|
></u-empty>
|
|
</view>
|
|
</view>
|
|
<Footer></Footer>
|
|
|
|
<!-- 固定在右侧的发布工单按钮 -->
|
|
<view class="fab-container">
|
|
<view class="fab-button" @click="openPublishForm">
|
|
<text class="fab-icon">+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Footer from '@/components/footer_common.vue';
|
|
import { get, post } 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 }
|
|
],
|
|
orders: [],
|
|
currentTab: '', // 默认显示全部
|
|
isLoading: false,
|
|
formatTime,
|
|
};
|
|
},
|
|
computed: {
|
|
filteredOrders() {
|
|
if (this.currentTab === '') {
|
|
return this.orders;
|
|
} else {
|
|
return this.orders.filter(order => order.status === this.currentTab);
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getReciprocitiesList();
|
|
},
|
|
methods: {
|
|
// 获取状态对应的文本
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
'': '全部',
|
|
2: '进行中',
|
|
3: '已完成',
|
|
1: '待审核',
|
|
98:'已撤回'
|
|
};
|
|
return statusMap[status] || '未知状态';
|
|
},
|
|
|
|
// 获取状态对应的标签类型
|
|
getStatusType(status) {
|
|
const typeMap = {
|
|
1: 'warning',
|
|
2: 'warning',
|
|
3: 'success',
|
|
98:'error'
|
|
};
|
|
return typeMap[status] || 'info';
|
|
},
|
|
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
|
|
// 切换tabs
|
|
handleTabChange(index) {
|
|
console.log("======index",index)
|
|
this.currentTab = index.value;
|
|
},
|
|
|
|
// 打开发布工单功能
|
|
openPublishForm() {
|
|
uni.navigateTo({ url: '/pages/helpInfo/index' });
|
|
},
|
|
|
|
handleAction(order) {
|
|
// 阻止事件冒泡
|
|
event.stopPropagation();
|
|
|
|
if (order.status === 2) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要撤回该工单吗？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
// 这里调用撤回接口
|
|
// await post('/api/withdraw', { id: order.id });
|
|
|
|
// 本地更新状态
|
|
this.orders = this.orders.map(item =>
|
|
item.id === order.id ? { ...item, status: 3 } : item
|
|
);
|
|
|
|
uni.showToast({
|
|
title: '工单已撤回',
|
|
icon: 'success'
|
|
});
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '撤回失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
// 跳转详情
|
|
goDetail(i){
|
|
uni.setStorageSync("Detail",i)
|
|
uni.navigateTo({ url: '/pages/mySeekHelpDetail/index' });
|
|
},
|
|
|
|
// 获取列表接口
|
|
async getReciprocitiesList() {
|
|
if (this.isLoading) return;
|
|
this.isLoading = true;
|
|
|
|
try {
|
|
const res = await get('/api/v1/app_auth/my/reciprocities', {
|
|
current: 1,
|
|
pageSize: 10,
|
|
});
|
|
|
|
if (res?.success) {
|
|
this.orders = res.data || [];
|
|
}
|
|
} catch (err) {
|
|
console.error('获取我的求助失败:', err);
|
|
uni.showToast({
|
|
title: '加载列表失败',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 定义全局变量
|
|
$primary-color: #1890ff;
|
|
$light-bg: #f0f8ff;
|
|
$text-color: #333;
|
|
$sub-text-color: #3D3D3D;
|
|
$disabled-text-color: #999;
|
|
$fab-bg: $primary-color; // 发布按钮背景色
|
|
$fab-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3); // 按钮阴影效果
|
|
|
|
.container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
opacity: 1;
|
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
|
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
|
position: relative;
|
|
|
|
.content {
|
|
width: 100%;
|
|
position: absolute;
|
|
margin-top: 20rpx;
|
|
background-color: rgba(252, 252, 252, 0.8);
|
|
padding-bottom: 16rpx;
|
|
}
|
|
|
|
.content_wapper {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
margin-top: 120rpx;
|
|
background-color: rgba(252, 252, 252, 0.8);
|
|
|
|
.content_list {
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
.order-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
padding:40rpx 20rpx;
|
|
border-radius: 14.17px;
|
|
background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
|
|
box-shadow: 0px 2px 4px rgba(191, 218, 255, 0.58);
|
|
position: relative;
|
|
|
|
.order-title {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
width: 90%;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
.title-text{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 200rpx;
|
|
}
|
|
}
|
|
.date{
|
|
width: 40%;
|
|
font-weight: normal;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.order-description {
|
|
font-size: 26rpx;
|
|
color: $sub-text-color;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 30rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.order-action {
|
|
margin-top: 40rpx;
|
|
width: 120rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
background-color: $primary-color;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 右侧固定发布按钮样式
|
|
.fab-container {
|
|
position: fixed;
|
|
right: 20rpx;
|
|
bottom: 220rpx;
|
|
z-index: 100; // 确保按钮在最上层
|
|
transition: all 0.3s ease; // 动画过渡效果
|
|
|
|
// 悬停放大效果
|
|
&:hover .fab-button {
|
|
transform: scale(1.1);
|
|
box-shadow: $fab-shadow, 0 0 0 10rpx rgba(24, 144, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.fab-button {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: $fab-bg;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: $fab-shadow;
|
|
color: #fff;
|
|
font-size: 60rpx;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fab-icon {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
</style> |