From 4648a3bee638e9a99d2d80b66f8833b261a2db91 Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期四, 25 九月 2025 22:39:24 +0800
Subject: [PATCH] feat:设计 app ui
---
app/pages/index.vue | 605 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 580 insertions(+), 25 deletions(-)
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4646807..5539ffa 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,43 +1,598 @@
<template>
- <view class="content">
- <image class="logo" src="@/static/logo.png"></image>
- <view class="text-area">
- <text class="title">Hello RuoYi</text>
+ <view class="home-container">
+ <!-- 椤堕儴鐢ㄦ埛淇℃伅鍖哄煙 -->
+ <view class="user-info-section">
+ <view class="user-info-content">
+ <view class="user-details">
+ <view class="user-name">{{ userName || '鏈櫥褰�' }}</view>
+ <view class="vehicle-info">
+ <text v-if="boundVehicle">鍏宠仈杞︾墝鍙凤細{{ boundVehicle }}</text>
+ <text v-else>鏈粦瀹氳溅鐗屽彿</text>
+ </view>
+ </view>
+ <button
+ class="bind-vehicle-btn"
+ @click="goToBindVehicle"
+ >
+ {{ boundVehicle ? '鏇存崲杞﹁締' : '缁戝畾杞﹁締' }}
+ </button>
+ </view>
</view>
+
+ <!-- 娑堟伅鍏ュ彛 -->
+ <view class="message-entry" @click="goToMessages">
+ <view class="message-icon">
+ <uni-icons type="chat" size="24" color="#007AFF"></uni-icons>
+ </view>
+ <view class="message-text">娑堟伅涓績</view>
+ <view class="unread-dot" v-if="unreadMessageCount > 0">{{ unreadMessageCount }}</view>
+ <view class="arrow">
+ <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
+ </view>
+ </view>
+
+ <!-- 姝ｅ湪杩愯鐨勪换鍔℃爣棰� -->
+ <view class="running-tasks-header">
+ <text class="header-title">姝ｅ湪杩愯鐨勪换鍔�</text>
+ </view>
+
+ <!-- 姝ｅ湪杩愯鐨勪换鍔″垪琛� -->
+ <scroll-view class="running-tasks-section" scroll-y="true">
+ <view class="task-list">
+ <view class="task-item" v-for="task in runningTasks" :key="task.id">
+ <view class="task-main" @click="viewTaskDetail(task)">
+ <view class="task-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view>
+ <view class="task-info">
+ <view class="info-row">
+ <view class="info-item">
+ <view class="label">浠诲姟缂栧彿:</view>
+ <view class="value">{{ task.taskNo }}</view>
+ </view>
+ <view class="info-item">
+ <view class="label">浠诲姟鐘舵��:</view>
+ <view class="value">{{ getStatusText(task.status) }}</view>
+ </view>
+ </view>
+ <view class="info-row">
+ <view class="info-item">
+ <view class="label">鍑哄彂鍦�:</view>
+ <view class="value">{{ task.startLocation }}</view>
+ </view>
+ <view class="info-item">
+ <view class="label">鐩殑鍦�:</view>
+ <view class="value">{{ task.endLocation }}</view>
+ </view>
+ </view>
+ <view class="info-row">
+ <view class="info-item">
+ <view class="label">鍑哄彂鏃堕棿:</view>
+ <view class="value">{{ task.startTime }}</view>
+ </view>
+ <view class="info-item">
+ <view class="label">鎵ц浜哄憳:</view>
+ <view class="value">{{ task.assignee }}</view>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <view class="task-actions">
+ <button
+ class="action-btn"
+ :class="{ disabled: isActionDisabled(task, 'depart') }"
+ @click="handleTaskAction(task, 'depart')"
+ v-if="task.status !== 'completed'"
+ >
+ 鍑哄彂
+ </button>
+ <button
+ class="action-btn"
+ :class="{ disabled: isActionDisabled(task, 'arrive') }"
+ @click="handleTaskAction(task, 'arrive')"
+ v-if="task.status !== 'completed'"
+ >
+ 宸插埌杈�
+ </button>
+ <button
+ class="action-btn"
+ :class="{ disabled: isActionDisabled(task, 'return') }"
+ @click="handleTaskAction(task, 'return')"
+ v-if="task.status !== 'completed'"
+ >
+ 杩旂▼
+ </button>
+ <button
+ class="action-btn"
+ :class="{ disabled: isActionDisabled(task, 'settle') }"
+ @click="handleTaskAction(task, 'settle')"
+ v-if="task.status !== 'completed'"
+ >
+ 缁撶畻
+ </button>
+ <button
+ class="action-btn primary"
+ :class="{ disabled: isActionDisabled(task, 'complete') }"
+ @click="handleTaskAction(task, 'complete')"
+ v-if="task.status !== 'completed'"
+ >
+ 宸插畬鎴�
+ </button>
+ </view>
+ </view>
+
+ <view class="no-data" v-if="runningTasks.length === 0">
+ <uni-icons type="info" size="40" color="#ccc"></uni-icons>
+ <text>鏆傛棤姝ｅ湪杩愯鐨勪换鍔�</text>
+ </view>
+ </view>
+ </scroll-view>
</view>
</template>
<script>
+ import { mapState } from 'vuex'
+
export default {
- onLoad: function() {
+ data() {
+ return {
+ // 妯℃嫙鐢ㄦ埛缁戝畾鐨勮溅杈嗕俊鎭�
+ boundVehicle: '绮12345', // 妯℃嫙宸茬粦瀹氳溅杈�
+
+ // 妯℃嫙娑堟伅鏁版嵁
+ messages: [
+ {
+ id: 1,
+ type: 'create', // 鍒涘缓鎴愬姛
+ content: 'TD 1011 骞垮窞澶╂渤->骞垮窞涓滅珯锛屾椂闂达細13锛�20 浠诲姟鍒涘缓鎴愬姛',
+ time: '2023-05-15 13:20',
+ read: false,
+ taskId: 1
+ },
+ {
+ id: 2,
+ type: 'push', // 浠诲姟鎺ㄩ��
+ content: 'TD1021 骞垮窞澶╂渤->骞垮窞涓滅珯锛屾椂闂达細13锛�20 鍑哄彂锛岃鍙婃椂澶勭悊',
+ time: '2023-05-15 13:25',
+ read: false,
+ taskId: 2
+ },
+ {
+ id: 3,
+ type: 'status', // 浠诲姟鐘舵�佸彉鏇�
+ content: 'TD1021 骞垮窞澶╂渤->骞垮窞涓滅珯锛屾椂闂达細13锛�20锛屼换鍔℃鍦ㄨ浆杩愪腑',
+ time: '2023-05-15 14:30',
+ read: true,
+ taskId: 2
+ },
+ {
+ id: 4,
+ type: 'create', // 鍒涘缓鎴愬姛
+ content: 'TD 1022 娣卞湷鍗楀北->娣卞湷绂忕敯锛屾椂闂达細15锛�10 浠诲姟鍒涘缓鎴愬姛',
+ time: '2023-05-15 15:10',
+ read: false,
+ taskId: 3
+ },
+ {
+ id: 5,
+ type: 'push', // 浠诲姟鎺ㄩ��
+ content: 'TD1023 娣卞湷鍗楀北->娣卞湷绂忕敯锛屾椂闂达細16锛�00 鍑哄彂锛岃鍙婃椂澶勭悊',
+ time: '2023-05-15 16:00',
+ read: true,
+ taskId: 4
+ }
+ ],
+
+ // 妯℃嫙姝ｅ湪杩愯鐨勪换鍔″垪琛�
+ taskList: [
+ {
+ id: 1,
+ title: '绱ф�ョ淮淇换鍔�',
+ type: 'maintenance', // 缁翠慨淇濆吇
+ startLocation: '骞垮窞甯傚ぉ娌冲尯XX璺�123鍙�',
+ endLocation: '骞垮窞甯傜櫧浜戝尯YY璺�456鍙�',
+ startTime: '2023-05-15 15:00',
+ assignee: '寮犱笁',
+ status: 'pending',
+ vehicle: '绮12345',
+ taskNo: 'RW20230515001'
+ },
+ {
+ id: 2,
+ title: '瀹氭湡淇濆吇浠诲姟',
+ type: 'maintenance', // 缁翠慨淇濆吇
+ startLocation: '娣卞湷甯傚崡灞卞尯XX璺�789鍙�',
+ endLocation: '娣卞湷甯傜鐢板尯YY璺�999鍙�',
+ startTime: '2023-05-14 10:00',
+ assignee: '鏉庡洓',
+ status: 'processing',
+ vehicle: '绮67890',
+ taskNo: 'RW20230514002'
+ },
+ {
+ id: 5,
+ title: '鎬ユ晳杞繍浠诲姟',
+ type: 'emergency', // 鎬ユ晳杞繍
+ startLocation: '骞垮窞甯傝秺绉�鍖哄尰闄㈣矾1鍙�',
+ endLocation: '骞垮窞甯傛捣鐝犲尯鍖婚櫌璺�2鍙�',
+ startTime: '2023-05-16 14:00',
+ assignee: '寮犲尰鐢�,鏉庢姢澹�',
+ status: 'pending',
+ vehicle: '绮33333',
+ taskNo: 'RW20230516005'
+ },
+ {
+ id: 6,
+ title: '绂忕杞︿换鍔�',
+ type: 'welfare', // 绂忕杞�
+ startLocation: '骞垮窞甯傝崝婀惧尯绀惧尯璺�10鍙�',
+ endLocation: '骞垮窞甯傚ぉ娌冲尯鍏昏�侀櫌璺�20鍙�',
+ startTime: '2023-05-17 08:00',
+ assignee: '鐜嬪徃鏈�',
+ status: 'processing',
+ vehicle: '绮44444',
+ taskNo: 'RW20230517006'
+ }
+ ]
+ }
+ },
+ computed: {
+ ...mapState({
+ userName: state => state.user.name
+ }),
+
+ // 姝ｅ湪杩愯鐨勪换鍔★紙寰呭鐞嗗拰澶勭悊涓殑浠诲姟锛�
+ runningTasks() {
+ return this.taskList.filter(task =>
+ task.status === 'pending' || task.status === 'processing'
+ );
+ },
+
+ // 鏈娑堟伅鏁伴噺
+ unreadMessageCount() {
+ return this.messages.filter(message => !message.read).length;
+ }
+ },
+ methods: {
+ // 璺宠浆鍒扮粦瀹氳溅杈嗛〉闈�
+ goToBindVehicle() {
+ // 璺宠浆鍒扮粦瀹氳溅杈嗙殑椤甸潰
+ this.$tab.navigateTo('/pages/bind-vehicle');
+ },
+
+ // 璺宠浆鍒版秷鎭〉闈�
+ goToMessages() {
+ this.$tab.switchTab('/pages/message/index');
+ },
+
+ // 鏌ョ湅浠诲姟璇︽儏
+ viewTaskDetail(task) {
+ // 璺宠浆鍒颁换鍔¤鎯呴〉闈�
+ this.$tab.navigateTo(`/pages/task/detail?id=${task.id}`);
+ },
+
+ // 鍒ゆ柇鎿嶄綔鎸夐挳鏄惁绂佺敤
+ isActionDisabled(task, action) {
+ // 鏍规嵁浠诲姟鐘舵�佸拰鎿嶄綔绫诲瀷鍒ゆ柇鏄惁绂佺敤
+ switch (action) {
+ case 'depart':
+ return task.status !== 'pending';
+ case 'arrive':
+ return task.status !== 'processing';
+ case 'return':
+ return task.status !== 'processing';
+ case 'settle':
+ return task.status !== 'processing';
+ case 'complete':
+ return task.status !== 'processing';
+ default:
+ return false;
+ }
+ },
+
+ // 澶勭悊浠诲姟鎿嶄綔
+ handleTaskAction(task, action) {
+ if (this.isActionDisabled(task, action)) {
+ return;
+ }
+
+ switch (action) {
+ case 'depart':
+ // 鍑哄彂鎿嶄綔锛屾牴鎹换鍔＄被鍨嬫樉绀轰笉鍚岀殑纭淇℃伅
+ let departMessage = '纭畾瑕佹爣璁颁负宸插嚭鍙戝悧锛�';
+ if (task.type !== 'maintenance' && task.type !== 'refuel' && task.type !== 'inspection') {
+ departMessage = '鍙戝嚭鍘荤洰鐨勫湴,纭锛�';
+ }
+ this.$modal.confirm(departMessage).then(() => {
+ task.status = 'processing';
+ this.$modal.showToast('宸插嚭鍙�');
+ // 杩欓噷鍙互璋冪敤API鏇存柊浠诲姟鐘舵��
+ }).catch(() => {});
+ break;
+ case 'arrive':
+ // 宸插埌杈炬搷浣�
+ this.$modal.confirm('宸茬粡鍒拌揪鐩殑鍦帮紝纭锛�').then(() => {
+ this.$modal.showToast('宸插埌杈�');
+ // 杩欓噷鍙互璋冪敤API鏇存柊浠诲姟鐘舵��
+ }).catch(() => {});
+ break;
+ case 'return':
+ // 杩旂▼鎿嶄綔
+ this.$modal.confirm('鐜板湪宸茬粡杩旂▼涓紝纭锛�').then(() => {
+ this.$modal.showToast('杩旂▼涓�');
+ // 杩欓噷鍙互璋冪敤API鏇存柊浠诲姟鐘舵��
+ }).catch(() => {});
+ break;
+ case 'settle':
+ // 缁撶畻鎿嶄綔锛岃烦杞埌缁撶畻椤甸潰
+ this.$tab.navigateTo(`/pages/task/settlement?id=${task.id}`);
+ break;
+ case 'complete':
+ // 宸插畬鎴愭搷浣�
+ this.$modal.confirm('浠诲姟鏄惁宸茬粡鍏ㄩ儴瀹屾垚锛岀‘璁わ紵').then(() => {
+ task.status = 'completed';
+ this.$modal.showToast('浠诲姟宸插畬鎴�');
+ // 杩欓噷鍙互璋冪敤API鏇存柊浠诲姟鐘舵��
+ }).catch(() => {});
+ break;
+ }
+ },
+
+ getStatusText(status) {
+ const statusMap = {
+ 'pending': '寰呭鐞�',
+ 'processing': '澶勭悊涓�',
+ 'completed': '宸插畬鎴�'
+ }
+ return statusMap[status] || '鏈煡'
+ },
+
+ getTaskTypeText(type) {
+ const typeMap = {
+ 'maintenance': '缁翠慨淇濆吇',
+ 'refuel': '鍔犳补',
+ 'inspection': '宸℃',
+ 'emergency': '鎬ユ晳杞繍',
+ 'welfare': '绂忕杞�'
+ }
+ return typeMap[type] || '鏈煡绫诲瀷'
+ }
}
}
</script>
-<style>
- .content {
+<style lang="scss">
+ .home-container {
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ height: 100vh;
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
+ // 闅愯棌婊氬姩鏉′絾淇濇寔婊氬姩鍔熻兘
+ ::-webkit-scrollbar {
+ display: none;
+ width: 0 !important;
+ height: 0 !important;
+ background: transparent;
+ }
+
+ // Firefox婊氬姩鏉￠殣钘�
+ * {
+ scrollbar-width: none; /* Firefox */
+ }
+
+ // IE/Edge婊氬姩鏉￠殣钘�
+ * {
+ -ms-overflow-style: none; /* IE 10+ */
+ }
}
-
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
+
+ // 鐢ㄦ埛淇℃伅鍖哄煙
+ .user-info-section {
+ background-color: white;
+ border-radius: 15rpx;
+ padding: 30rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+ flex-shrink: 0; // 闃叉鏀剁缉
+
+ .user-info-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .user-details {
+ .user-name {
+ font-size: 36rpx;
+ font-weight: bold;
+ margin-bottom: 10rpx;
+ color: #333;
+ }
+
+ .vehicle-info {
+ font-size: 28rpx;
+ color: #666;
+ }
+ }
+
+ .bind-vehicle-btn {
+ background-color: #007AFF;
+ color: white;
+ border-radius: 10rpx;
+ padding: 15rpx 30rpx;
+ font-size: 28rpx;
+ }
+ }
}
-
- .text-area {
+
+ // 娑堟伅鍏ュ彛
+ .message-entry {
display: flex;
- justify-content: center;
+ align-items: center;
+ background-color: white;
+ border-radius: 15rpx;
+ padding: 30rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+ position: relative;
+
+ .message-icon {
+ margin-right: 20rpx;
+ }
+
+ .message-text {
+ flex: 1;
+ font-size: 32rpx;
+ color: #333;
+ }
+
+ .unread-dot {
+ position: absolute;
+ top: 15rpx;
+ right: 60rpx;
+ background-color: #ff4d4f;
+ color: white;
+ border-radius: 50%;
+ width: 32rpx;
+ height: 32rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20rpx;
+ }
+
+ .arrow {
+ margin-left: 20rpx;
+ }
}
-
- .title {
- font-size: 36rpx;
- color: #8f8f94;
+
+ // 姝ｅ湪杩愯鐨勪换鍔℃爣棰�
+ .running-tasks-header {
+ margin-bottom: 20rpx;
+ flex-shrink: 0; // 闃叉鏀剁缉
+
+ .header-title {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ }
}
-</style>
+
+ // 姝ｅ湪杩愯鐨勪换鍔″垪琛�
+ .running-tasks-section {
+ flex: 1;
+ background-color: white;
+ border-radius: 15rpx;
+ padding: 30rpx;
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+ // 闅愯棌婊氬姩鏉′絾淇濇寔婊氬姩鍔熻兘
+ ::-webkit-scrollbar {
+ display: none;
+ width: 0 !important;
+ height: 0 !important;
+ background: transparent;
+ }
+
+ // Firefox婊氬姩鏉￠殣钘�
+ * {
+ scrollbar-width: none; /* Firefox */
+ }
+
+ // IE/Edge婊氬姩鏉￠殣钘�
+ * {
+ -ms-overflow-style: none; /* IE 10+ */
+ }
+
+ .task-list {
+ .task-item {
+ background-color: #fafafa;
+ border-radius: 15rpx;
+ margin-bottom: 30rpx;
+ overflow: hidden;
+
+ .task-main {
+ padding: 30rpx;
+ border-bottom: 1rpx solid #f0f0f0;
+
+ .task-title {
+ font-size: 32rpx;
+ font-weight: bold;
+ margin-bottom: 20rpx;
+ }
+
+ .task-info {
+ .info-row {
+ display: flex;
+ margin-bottom: 15rpx;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .info-item {
+ flex: 1;
+ display: flex;
+
+ .label {
+ font-size: 26rpx;
+ color: #666;
+ margin-right: 10rpx;
+ white-space: nowrap;
+ }
+
+ .value {
+ font-size: 26rpx;
+ flex: 1;
+ word-break: break-all;
+ }
+ }
+ }
+ }
+ }
+
+ .task-actions {
+ display: flex;
+ padding: 20rpx;
+
+ .action-btn {
+ flex: 1;
+ height: 70rpx;
+ border-radius: 10rpx;
+ font-size: 26rpx;
+ margin: 0 5rpx;
+ background-color: #f0f0f0;
+ color: #333;
+
+ &.primary {
+ background-color: #007AFF;
+ color: white;
+ }
+
+ &.disabled {
+ opacity: 0.5;
+ }
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ .no-data {
+ text-align: center;
+ padding: 100rpx 0;
+ color: #999;
+
+ text {
+ display: block;
+ margin-top: 20rpx;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1