Leo_Ding/JinShan_uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码修改

Browse Source
This commit is contained in:
qiuyuan 2025-08-12 16:47:10 +08:00
parent 2a48964efb
commit 1d16210f89
7 changed files with 431 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
components/gx-copyright.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<view class="copyright-section" :style="{bottom: footerHeight}"> <view class="copyright-section">
<view class="copyright-content"> <view class="copyright-content">
<text style="color: #ddd;padding-right: 20rpx;">——</text> <text style="color: #ddd;padding-right: 20rpx;">——</text>
<image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image> <image src="/static/imgs/index/logo.png" class="logo" mode="aspectFit"></image>
@ -14,43 +15,34 @@
<script> <script>
export default { export default {
name: 'gx-copyright', name: 'gx-copyright',
props: {
footerHeight: {
type: String,
default: '130rpx' // 默认footer高度
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.copyright-section { .copyright-section {
position: fixed; position: relative; /* 改为相对定位 */
left: 0; width: 100%;
right: 0; padding: 20rpx 0;
bottom: 0; background-color: transparent;
width: 100%; opacity: 0.6;
padding: 20rpx 0; margin-top: 40rpx; /* 增加一些顶部间距 */
background-color:transparent;
opacity: 0.6;
// z-index: 90; /* 确保在footer下方 */
.copyright-content { .copyright-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.logo { .logo {
width: 150rpx; width: 150rpx;
height: 50rpx; height: 50rpx;
margin-right: 0rpx; margin-right: 0rpx;
}
.copyright-text {
font-size: 24rpx;
color: #999;
padding-left: 20rpx;
}
} }
.copyright-text {
font-size: 24rpx;
color: #999;
padding-left: 20rpx;
}
}
} }
</style> </style>

15
pages/index/index.vue
View File

@ -110,14 +110,11 @@
</view> </view>
</view> </view>
</view> </view>
<view style="margin: 120rpx 0;">
<Copyright/>
</view>
</view> </view>
<!-- 底部导航 --> <!-- 底部导航 -->
<Copyright/>
<Footer></Footer> <Footer></Footer>
</view> </view>
</template> </template>
@ -272,9 +269,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
background: #f8faff; background: #f8faff;
min-height: 100vh; // min-height: 100vh;
padding-bottom: 120rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: #f5f7fa;
padding: 20rpx;
// min-height: 100vh;
box-sizing: border-box;
padding-bottom: calc(190rpx);
.content-wrapper { .content-wrapper {
width: 92%; width: 92%;

2
pages/mine/index.vue
View File

@ -668,7 +668,7 @@
padding: 20rpx; padding: 20rpx;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 120rpx; padding-bottom: 190rpx;
} }
.user-info-card { .user-info-card {
background: #fff; background: #fff;

328
pages/mySeekHelp/index.vue
View File

@ -1,15 +1,13 @@
<template> <template>
<view class="container"> <view class="container">
<!-- 引入头部组件 --> <!-- 标签栏 -->
<view class="content"> <view class="content">
<!-- 标签栏 -->
<u-tabs <u-tabs
:list="tabList" :list="tabList"
lineWidth="30" lineWidth="30"
lineColor="#3B8CFF" lineColor="#3B8CFF"
:activeStyle="{ :activeStyle="{
color: '#303133', color: '#3B8CFF',
fontWeight: 'bold', fontWeight: 'bold',
transform: 'scale(1.05)' transform: 'scale(1.05)'
}" }"
@ -17,48 +15,67 @@
color: '#606266', color: '#606266',
transform: 'scale(1)' transform: 'scale(1)'
}" }"
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
@change="handleTabChange" @change="handleTabChange"
></u-tabs> ></u-tabs>
</view> </view>
<view class="content_wapper"> <view class="content_wapper">
<view class="content_list"> <view class="content_list">
<!-- 工单列表 --> <!-- 工单列表 -->
<view v-for="(order, index) in filteredOrders" :key="index" class="order-item" @click="goDetail(order)"> <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="order-title">
<view class="title"> <view class="title">
<view class="title-text">{{ order.title }}</view> <view class="title-text">
<u-tag <text :style="{color: getStatusColor(order.status)}">●</text>
size="mini" <text> {{order.title}}</text>
:text="getStatusText(order.status)" </view>
:type="getStatusType(order.status)" <u-tag
plain size="mini"
></u-tag> :text="getStatusText(order.status)"
</view> :type="getStatusType(order.status)"
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view> :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>
<view class="order-description">{{ order.content }}</view> <view class="order-description">{{ order.content }}</view>
<button <view class="order-meta">
@click.stop="handleAction(order)" <!-- <text class="meta-item">{{ order.label || '通用问题' }}</text> -->
class="order-action" <button
v-if="order.status === 2" @click.stop="handleAction(order, $event)"
>撤回</button> class="order-action"
v-if="order.status == 2"
>
撤回
</button>
</view>
</view> </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>
<!-- 空状态提示 -->
<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> <Footer></Footer>
<!-- 固定在右侧的发布工单按钮 --> <!-- 发布工单按钮 -->
<view class="fab-container"> <view class="fab-container">
<view class="fab-button" @click="openPublishForm"> <view class="fab-button" @click="openPublishForm">
<text class="fab-icon">+</text> <text class="fab-icon">+</text>
@ -103,6 +120,30 @@
this.getReciprocitiesList(); this.getReciprocitiesList();
}, },
methods: { 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) { getStatusText(status) {
const statusMap = { const statusMap = {
@ -119,7 +160,7 @@
getStatusType(status) { getStatusType(status) {
const typeMap = { const typeMap = {
1: 'warning', 1: 'warning',
2: 'warning', 2: 'success',
3: 'success', 3: 'success',
98:'error' 98:'error'
}; };
@ -134,7 +175,6 @@
// 切换tabs // 切换tabs
handleTabChange(index) { handleTabChange(index) {
console.log("======index",index)
this.currentTab = index.value; this.currentTab = index.value;
}, },
@ -143,10 +183,8 @@
uni.navigateTo({ url: '/pages/helpInfo/index' }); uni.navigateTo({ url: '/pages/helpInfo/index' });
}, },
handleAction(order) { handleAction(order, e) {
// 阻止事件冒泡 e.stopPropagation();
event.stopPropagation();
if (order.status === 2) { if (order.status === 2) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -213,143 +251,179 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 定义全局变量 // 丰富色彩的样式变量
$primary-color: #1890ff; $primary-color: #3B8CFF; // 主色调-蓝色
$light-bg: #f0f8ff; $secondary-color: #FF7D00; // 辅助色-橙色
$text-color: #333; $success-color: #00B42A; // 成功色-绿色
$sub-text-color: #3D3D3D; $danger-color: #F53F3F; // 危险色-红色
$disabled-text-color: #999; $gray-color: #86909C; // 灰色
$fab-bg: $primary-color; // 发布按钮背景色 $light-bg: #F7F8FA; // 页面背景
$fab-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3); // 按钮阴影效果 $card-bg: #FFFFFF; // 卡片背景
// 渐变色定义
$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
.container { .container {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
opacity: 1; background-color: $light-bg;
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; position: relative;
.content { .content {
width: 100%; width: 100%;
position: absolute; padding: 15rpx 0;
margin-top: 20rpx; background-color: $card-bg;
background-color: rgba(252, 252, 252, 0.8); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
padding-bottom: 16rpx; 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 { .content_wapper {
width: 100%; width: 100%;
height: auto; padding: 25rpx 0 140rpx;
position: absolute; box-sizing: border-box;
margin-top: 120rpx;
background-color: rgba(252, 252, 252, 0.8);
.content_list { .content_list {
width: 100%; width: 100%;
padding: 0 20rpx; padding: 0 25rpx;
box-sizing: border-box; box-sizing: border-box;
.order-item { .order-item {
display: flex; width: 90%;
flex-direction: column; margin: 0 auto 25rpx;
width: 95%; border-radius: 16rpx;
margin: 20rpx auto; padding: 30rpx;
border-radius: 10rpx; background-color: $card-bg;
margin-bottom: 40rpx; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
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; 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 { .order-title {
font-size: 28rpx; font-size: 28rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title{ align-items: center;
width: 90%; margin-bottom: 25rpx;
font-weight: bold;
.title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8rpx; gap: 15rpx;
.title-text{
white-space: nowrap; .title-text {
overflow: hidden; color: #1D2129;
text-overflow: ellipsis; font-weight: 600;
max-width: 200rpx; font-size: 28rpx;
} }
} }
.date{
width: 40%; .date {
font-weight: normal; color: $gray-color;
text-align: right; font-size: 24rpx;
padding: 5rpx 10rpx;
background-color: rgba(134, 144, 156, 0.08);
border-radius: 6rpx;
} }
} }
.order-description { .order-description {
font-size: 26rpx; font-size: 28rpx;
color: $sub-text-color; color: #1D2129;
margin-top: 10rpx; line-height: 1.7;
margin-bottom: 30rpx; margin-bottom: 30rpx;
display: -webkit-box; padding-bottom: 20rpx;
-webkit-box-orient: vertical; border-bottom: 1px dashed #EEEEEE;
overflow: hidden; word-break: break-word;
text-overflow: ellipsis; }
-webkit-line-clamp: 2;
line-height: 50rpx; .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 { .order-action {
margin-top: 40rpx; min-width: 130rpx;
width: 120rpx; height: 56rpx;
height: 40rpx; line-height: 56rpx;
line-height: 40rpx; background-color: $danger-color;
text-align: center;
background-color: $primary-color;
color: #fff; color: #fff;
border-radius: 10rpx; border-radius: 28rpx;
font-size: 24rpx; font-size: 24rpx;
margin-top: 20rpx; margin: 0;
position: absolute; padding: 0;
right: 20rpx; transition: all 0.2s;
bottom: 20rpx;
&:hover {
background-color: #e02020;
transform: scale(1.05);
}
} }
} }
} }
} }
// 右侧固定发布按钮样式 // 发布按钮增强
.fab-container { .fab-container {
position: fixed; position: fixed;
right: 20rpx; right: 40rpx;
bottom: 220rpx; bottom: 220rpx;
z-index: 100; // 确保按钮在最上层 z-index: 100;
transition: all 0.3s ease; // 动画过渡效果
// 悬停放大效果 .fab-button {
&:hover .fab-button { width: 130rpx;
transform: scale(1.1); height: 130rpx;
box-shadow: $fab-shadow, 0 0 0 10rpx rgba(24, 144, 255, 0.1); 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-button { .fab-icon {
width: 100rpx; color: white;
height: 100rpx; font-size: 65rpx;
border-radius: 50%; font-weight: bold;
background-color: $fab-bg; line-height: 1;
display: flex; text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
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> </style>

338
pages/myTickets/index.vue
View File

@ -1,15 +1,13 @@
<template> <template>
<view class="container"> <view class="container">
<!-- 引入头部组件 --> <!-- 标签栏 -->
<view class="content"> <view class="content">
<!-- 标签栏 -->
<u-tabs <u-tabs
:list="tabList" :list="tabList"
lineWidth="30" lineWidth="30"
lineColor="#3B8CFF" lineColor="#3B8CFF"
:activeStyle="{ :activeStyle="{
color: '#303133', color: '#3B8CFF',
fontWeight: 'bold', fontWeight: 'bold',
transform: 'scale(1.05)' transform: 'scale(1.05)'
}" }"
@ -17,32 +15,51 @@
color: '#606266', color: '#606266',
transform: 'scale(1)' transform: 'scale(1)'
}" }"
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:60px" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px"
@change="handleTabChange" @change="handleTabChange"
></u-tabs> ></u-tabs>
</view> </view>
<view class="content_wapper"> <view class="content_wapper">
<view class="content_list"> <view class="content_list">
<!-- 工单列表 --> <!-- 工单列表 -->
<view v-for="(order, index) in filteredOrders" :key="index" class="order-item" <view
@click="goDetail(order)"> 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="order-title">
<view class="title"> <view class="title">
<view class="title-text">我的工单</view> <view class="title-text">
<text :style="{color: getStatusColor(order.status)}">●</text>
<!-- <text> 我的工单 </text> -->
</view>
<u-tag <u-tag
size="mini" size="mini"
:text="getStatusText(order.status)" :text="getStatusText(order.status)"
:type="getStatusType(order.status)" :type="getStatusType(order.status)"
plain :style="{
backgroundColor: getStatusBgColor(order.status),
color: getStatusColor(order.status),
borderColor: getStatusColor(order.status)
}"
></u-tag> ></u-tag>
</view> </view>
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view> <view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
</view> </view>
<view class="order-description">{{ order.title }}</view> <view class="order-description">{{ order.title }}</view>
<button @click.stop="handleAction(order, $event)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button> <view class="order-meta">
<text class="meta-item">{{ order.label || '通用问题' }}</text>
<button
@click.stop="handleAction(order, $event)"
class="order-action"
v-if="order.status == 1 || order.status == 2 || order.status == 99"
>
撤回
</button>
</view>
</view> </view>
</view> </view>
<!-- 空状态提示 --> <!-- 空状态提示 -->
@ -54,32 +71,26 @@
mode="data" mode="data"
icon="/static/imgs/noData.jpeg" icon="/static/imgs/noData.jpeg"
></u-empty> ></u-empty>
</view> </view>
<Footer></Footer> <Footer></Footer>
<!-- 新增的发布工单按钮 --> <!-- 发布工单按钮 -->
<view class="fab-container"> <view class="fab-container">
<view class="fab-button" @click="showPublishForm"> <view class="fab-button" @click="showPublishForm">
<text class="fab-icon">+</text> <text class="fab-icon">+</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
// import Header from '@/components/header_common.vue';
import Footer from '@/components/footer_common.vue'; import Footer from '@/components/footer_common.vue';
import { get, post,put } from '@/utils/request'; import { get, post,put } from '@/utils/request';
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config'; import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
import { formatTime, formatRelativeTime } from '@/utils/timeFormat'; import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
export default { export default {
components: { components: { Footer },
Footer
},
data() { data() {
return { return {
tabList: [ tabList: [
@ -108,7 +119,30 @@
} }
}, },
methods: { 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) { getStatusText(status) {
const statusMap = { const statusMap = {
'': '全部', '': '全部',
@ -121,7 +155,6 @@
return statusMap[status] || '未知状态'; return statusMap[status] || '未知状态';
}, },
// 获取状态对应的标签类型
getStatusType(status) { getStatusType(status) {
const typeMap = { const typeMap = {
1:'warning', 1:'warning',
@ -132,87 +165,70 @@
}; };
return typeMap[status] || 'info'; return typeMap[status] || 'info';
}, },
handleBack() { handleBack() {
uni.navigateBack({ uni.navigateBack({ delta: 1 });
delta: 1 // 返回上一级页面
});
}, },
// 切换tabs
handleTabChange(index) { handleTabChange(index) {
console.log("======index",index)
this.currentTab = index.value; this.currentTab = index.value;
}, },
// 显示发布工单表单
showPublishForm() { showPublishForm() {
// 这里可以添加打开发布表单的逻辑
uni.showToast({ uni.showToast({
title: '即将打开发布工单表单', title: '即将打开发布工单表单',
icon: 'none' icon: 'none'
}); });
uni.navigateTo({ url: '/pages/serviceTickets/index' }); uni.navigateTo({ url: '/pages/serviceTickets/index' });
}, },
// 工单操作处理
handleAction(order, e) {
// 阻止事件冒泡
e.stopPropagation();
handleAction(order, e) {
e.stopPropagation();
if (order.status == 1 || order.status == 2 || order.status == 99) { if (order.status == 1 || order.status == 2 || order.status == 99) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要撤回这个工单吗？', content: '确定要撤回这个工单吗？',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
// 执行撤回逻辑
this.withdrawOrder(order.id); this.withdrawOrder(order.id);
} }
} }
}); });
} }
}, },
async withdrawOrder(orderId) { async withdrawOrder(orderId) {
try { try {
const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98}); const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
if (res?.success) { if (res?.success) {
uni.showToast({ uni.showToast({ title: '工单已撤回', icon: 'success' });
title: '工单已撤回',
icon: 'success'
});
// 刷新列表
this.getWorkOrderList(); this.getWorkOrderList();
} }
} catch (err) { } catch (err) {
console.error('撤回工单失败:', err); console.error('撤回工单失败:', err);
uni.showToast({ uni.showToast({ title: '撤回失败', icon: 'none' });
title: '撤回失败',
icon: 'none'
});
} }
}, },
goDetail(i){ goDetail(i){
uni.setStorageSync("Detail",i) uni.setStorageSync("Detail",i)
uni.navigateTo({ url: '/pages/myTicketsDetail/index' }); uni.navigateTo({ url: '/pages/myTicketsDetail/index' });
}, },
// 请求列表接口
async getWorkOrderList(){ async getWorkOrderList(){
if (this.isLoading) return; if (this.isLoading) return;
this.isLoading = true; this.isLoading = true;
try { try {
const res = await get('/api/v1/app_auth/my/work-order', { const res = await get('/api/v1/app_auth/my/work-order', {
current: 1, current: 1,
pageSize: 10, pageSize: 10,
}); });
if (res?.success) { if (res?.success) {
this.orders = res.data || []; this.orders = res.data || [];
} }
} catch (err) { } catch (err) {
console.error('获取我的求助失败:', err); console.error('获取我的求助失败:', err);
uni.showToast({ uni.showToast({ title: '加载列表失败', icon: 'none' });
title: '加载列表失败',
icon: 'none'
});
} finally { } finally {
this.isLoading = false; this.isLoading = false;
} }
@ -222,157 +238,179 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 定义全局变量 // 丰富色彩的样式变量
$primary-color: #1890ff; $primary-color: #3B8CFF; // 主色调-蓝色
$light-bg: #f0f8ff; $secondary-color: #FF7D00; // 辅助色-橙色
$text-color: #333; $success-color: #00B42A; // 成功色-绿色
$sub-text-color: #3D3D3D; $danger-color: #F53F3F; // 危险色-红色
$disabled-text-color: #999; $gray-color: #86909C; // 灰色
$fab-color: #1890ff; // 发布按钮颜色 $light-bg: #F7F8FA; // 页面背景
$card-bg: #FFFFFF; // 卡片背景
// 渐变色定义
$gradient-primary: linear-gradient(135deg, $primary-color, #5aa7ff);
$gradient-active: linear-gradient(135deg, #e6f7ff, #ccf0ff);
.container { .container {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
/* 占满整个视口高度 */ background-color: $light-bg;
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; position: relative;
.content { .content {
width: 100%; width: 100%;
position: absolute; padding: 15rpx 0;
margin-top: 20rpx; background-color: $card-bg;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
background-color: rgba(252, 252, 252, 0.8); position: sticky;
padding-bottom: 16rpx; 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 { .content_wapper {
width: 100%; width: 100%;
height: auto; padding: 25rpx 0 140rpx;
position: absolute; box-sizing: border-box;
margin-top: 120rpx;
background-color: rgba(252, 252, 252, 0.8);
padding-bottom: 10vh;
.content_list { .content_list {
width: 100%; width: 100%;
padding: 0 20rpx; padding: 0 25rpx;
box-sizing: border-box; box-sizing: border-box;
.order-item { .order-item {
display: flex;
flex-direction: column;
width: 90%; width: 90%;
margin: 20rpx auto; margin: 0 0 25rpx;
border-radius: 10rpx; border-radius: 16rpx;
margin-bottom: 40rpx; padding: 30rpx;
padding:40rpx 20rpx; background-color: $card-bg;
border-radius: 14.17px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
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; 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 { .order-title {
font-size: 28rpx; font-size: 28rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title{ align-items: center;
width: 90%; margin-bottom: 25rpx;
font-weight: bold;
.title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8rpx; gap: 15rpx;
.title-text{ .title-text {
white-space: nowrap; color: #1D2129;
overflow: hidden; font-weight: 600;
text-overflow: ellipsis; font-size: 28rpx;
max-width: 200rpx;
} }
}
.date{
width: 40%;
font-weight: normal;
text-align: right;
} }
.date {
color: $gray-color;
font-size: 24rpx;
padding: 5rpx 10rpx;
background-color: rgba(134, 144, 156, 0.08);
border-radius: 6rpx;
}
} }
.order-description { .order-description {
font-size: 26rpx; font-size: 28rpx;
color: $sub-text-color; color: #1D2129;
margin-top: 10rpx; line-height: 1.7;
margin-bottom: 30rpx; margin-bottom: 30rpx;
display: -webkit-box; padding-bottom: 20rpx;
-webkit-box-orient: vertical; border-bottom: 1px dashed #EEEEEE;
overflow: hidden; word-break: break-word;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-height: 50rpx;
} }
.order-status { .order-meta {
font-size: 22rpx; display: flex;
color: $text-color; justify-content: space-between;
margin-top: 10rpx; align-items: center;
width: 100rpx;
.meta-item {
color: $gray-color;
font-size: 24rpx;
padding: 3rpx 12rpx;
background-color: rgba(134, 144, 156, 0.08);
border-radius: 15rpx;
}
} }
.order-action { .order-action {
margin-top: 40rpx; min-width: 130rpx;
width: 120rpx; height: 56rpx;
height: 40rpx; line-height: 56rpx;
line-height: 40rpx; background-color: $danger-color;
text-align: center;
background-color: $primary-color;
color: #fff; color: #fff;
border-radius: 10rpx; border-radius: 28rpx;
font-size: 24rpx; font-size: 24rpx;
margin-top: 20rpx; margin: 0;
position: absolute; padding: 0;
right: 20rpx; transition: all 0.2s;
bottom: 20rpx;
&:hover {
background-color: #e02020;
transform: scale(1.05);
}
} }
} }
} }
} }
// 新增的发布按钮样式 // 发布按钮增强
.fab-container { .fab-container {
position: fixed; position: fixed;
right: 20rpx; right: 40rpx;
bottom: 220rpx; bottom: 220rpx;
z-index: 100; z-index: 100;
// 添加悬停动画
&:hover .fab-button { .fab-button {
transform: scale(1.1); width: 130rpx;
height: 130rpx;
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-button { .fab-icon {
width: 100rpx; color: white;
height: 100rpx; font-size: 65rpx;
border-radius: 50%; font-weight: bold;
background-color: $fab-color; line-height: 1;
display: flex; text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
justify-content: center; }
align-items: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.fab-icon {
color: white;
font-size: 60rpx;
font-weight: bold;
} }
} }
</style> </style>

2
pages/neighbor/index.vue
View File

@ -120,7 +120,7 @@
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background: #f8faff; background: #f8faff;
padding-bottom: 120rpx; padding-bottom: calc(100rpx + 40rpx + 40rpx);
} }
.nearby-page { .nearby-page {

2
pages/neighborList/index.vue
View File

@ -140,7 +140,7 @@
// height: 100vh; // height: 100vh;
// padding: 70rpx 0; // padding: 70rpx 0;
// margin-top: 90rpx; // margin-top: 90rpx;
padding-bottom: 400rpx; padding-bottom: calc(190rpx + 100rpx + 80rpx);
.neighbor_head { .neighbor_head {
width: 100%; width: 100%;