From 59551ae26a64726abbccdf9dc0723eb8615e7dc1 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 22 Jul 2025 14:11:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/chatPage.vue         |    4 +-
 pages/index/index.vue           |   11 +-
 pages/mine/index.vue            | 1463 +++++++++++++++++--------------
 pages/myTicketsDetail/index.vue |  497 ++++++++---
 pages/serviceTickets/index.vue  |  841 ++++++++++--------
 5 files changed, 1627 insertions(+), 1189 deletions(-)

diff --git a/pages/chat/chatPage.vue b/pages/chat/chatPage.vue
index 146b9f2..c27a487 100644
--- a/pages/chat/chatPage.vue
+++ b/pages/chat/chatPage.vue
@@ -92,8 +92,10 @@
 					const defaultValue=this.generateMiniProgramUUID()
 					wx.setStorageSync('userId', defaultValue)
 					this.userId=defaultValue
+				}else{
+					this.userId=value
 				}
-				this.userId=value
+				
 			} catch (e) {
 				console.log(e)
 				const defaultValue=this.generateMiniProgramUUID()
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f6d4a7a..065acb4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -52,19 +52,19 @@
 					</view>
 					<view class="weather-footer">
 					    <view class="footer-item">
-					        <text class="footer-icon">🌬️东风</text>
+					        <text class="footer-icon">️风向</text>
 					        <text class="footer-text">{{weather.wind}}</text>
 					    </view>
 					    <view class="footer-item">
-					        <text class="footer-icon">💧湿度</text>
+					        <text class="footer-icon">湿度</text>
 					        <text class="footer-text">{{weather.humidity}}%</text>
 					    </view>
 					    <view class="footer-item">
-					        <text class="footer-icon">🌫️空气质量</text>
+					        <text class="footer-icon">️空气质量</text>
 					        <text class="footer-text">{{weather.quality}}</text>
 					    </view>
 					    <view class="footer-item">
-					        <text class="footer-icon">☀️紫外线</text>
+					        <text class="footer-icon">️紫外线</text>
 					        <text class="footer-text">{{weather.uv_index}}</text>
 					    </view>
 					</view>
@@ -389,7 +389,8 @@
 				        flex: 1;
 				        
 				        .footer-icon {
-				            font-size: 24rpx;
+				            font-size: 28rpx;
+							font-weight:500;
 				            margin-bottom: 6rpx;
 				        }
 				        
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 0189ad4..7f8aee2 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -1,714 +1,843 @@
 <template>
-  <view class="profile-page">
-    <!-- 用户信息区域 -->
-    <view class="user-info-card">
-      <view class="user-info">
-        <view class="avatar-section">
-          <view class="avatar-wrapper">
-            <image class="avatar" :src="userInfo.avatarUrl || '/static/imgs/index/nav.png'"
-              mode="aspectFill"></image>
-            <view class="edit-icon" @click="handleEditClick">
-              <u-icon name="edit-pen" color="#fff" size="24"></u-icon>
-            </view>
-          </view>
-        </view>
-        <view class="name-section" @click="handleEditClick">
-          <view class="name">{{userInfo.nickName || '未登录用户'}}</view>
-		  <view class="phone">{{userInfo.phone || ''}}</view>
-        </view>
-        <view class="description-card">
-          <text class="title">个人简介</text>
-          <text class="content">{{userInfo.bio || '这家伙很懒，什么都没有写~'}}</text>
-        </view>
-      </view>
-    </view>
+	<view class="profile-page">
+		<!-- 用户信息区域 -->
+		<view class="user-info-card">
+			<view class="user-info">
+				<view class="avatar-section">
+					<view class="avatar-wrapper">
+						<image class="avatar" :src="userInfo.avatarUrl || '/static/imgs/index/nav.png'"
+							mode="aspectFill"></image>
+						<view class="edit-icon" @click="handleEditClick">
+							<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
+						</view>
+						<u-loading-icon v-if="uploading" mode="circle" color="#2979ff" size="28"></u-loading-icon>
+					</view>
+				</view>
+				<view class="name-section" @click="handleEditClick">
+					<view class="name">{{userInfo.nickName || '未登录用户'}}</view>
+					<view class="phone">{{userInfo.phone || ''}}</view>
+				</view>
+				<view class="description-card">
+					<text class="title">个人简介</text>
+					<text class="content">{{userInfo.bio || '这家伙很懒，什么都没有写~'}}</text>
+				</view>
+			</view>
+		</view>
 
-    <!-- 功能按钮区域 -->
-    <view class="function-card">
-      <view class="button-item" v-for="(item, index) in choseList" :key="index" @click="goPage(item.pageUrl)">
-        <view class="button-content">
-          <image class="icon" :src='item.url' mode="aspectFit"></image>
-          <text class="label">{{item.name}}</text>
-        </view>
-        <u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
-      </view>
-    </view>
+		<!-- 功能按钮区域 -->
+		<view class="function-card">
+			<view class="button-item" v-for="(item, index) in choseList" :key="index" @click="goPage(item.pageUrl)">
+				<view class="button-content">
+					<image class="icon" :src='item.url' mode="aspectFit"></image>
+					<text class="label">{{item.name}}</text>
+				</view>
+				<u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
+			</view>
+		</view>
 
-    <!-- 修改用户信息弹窗 -->
-    <u-modal :show="showEditModal" 
-             :title="isLogin ? '修改用户信息' : '微信授权登录'" 
-             :show-confirm-button="isLogin"
-             :show-cancel-button="isLogin" 
-             @confirm="handleSubmit" 
-             @cancel="handleCancel" 
-             confirm-color="#2979ff"
-             cancel-color="#606266">
-      <view class="modal-content">
-        <!-- 未登录时显示授权按钮 -->
-        <view v-if="!isLogin" class="auth-section">
-          <button v-if="!showPhoneButton" 
-                  class="auth-button" 
-                  open-type="getUserInfo"
-                  @getuserinfo="onGetUserInfo">
-            微信一键登录
-          </button>
-          <button v-if="showPhoneButton" 
-                  type="default" 
-                  open-type="getPhoneNumber" 
-                  @getphonenumber="getPhoneNumber"
-                  class="auth-button phone-button">
-            授权获取手机号
-          </button>
-        </view>
+		<!-- 修改用户信息弹窗 -->
+		<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
+			:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
+			cancel-color="#606266">
+			<view class="modal-content">
+				<!-- 未登录时显示授权按钮 -->
+				<view v-if="!isLogin" class="auth-section">
+					<view class="auth-title">请先登录以使用完整功能</view>
+					<button v-if="!showPhoneButton" class="auth-button" open-type="getUserInfo"
+						@getuserinfo="onGetUserInfo">
+						<image class="wechat-icon" src="/static/imgs/wechat.png"></image>
+						微信一键登录
+					</button>
+					<button v-if="showPhoneButton" type="default" open-type="getPhoneNumber"
+						@getphonenumber="getPhoneNumber" class="auth-button phone-button">
+						<image class="phone-icon" src="/static/imgs/phone.png"></image>
+						授权获取手机号
+					</button>
+					<view class="auth-tip">登录即表示同意《用户协议》和《隐私政策》</view>
+				</view>
 
-        <!-- 已登录时显示编辑表单 -->
-        <view v-else>
-          <view class="form-item">
-            <text class="form-label">头像：</text>
-            <u-upload 
-                     :file-list="avatarList" 
-                     :max-count="1" 
-                     @afterRead="handleAvatarUpload"
-                     @delete="handleAvatarDelete" 
-                     width="160" 
-                     height="160" 
-                     preview-full-image>
-            </u-upload>
-          </view>
+				<!-- 已登录时显示编辑表单 -->
+				<view v-else class="edit-section">
+					<view class="form-item">
+						<text class="form-label">头像：</text>
+						<u-upload :file-list="avatarList" :max-count="1" @afterRead="handleAvatarUpload"
+							@delete="handleAvatarDelete" width="160" height="160" preview-full-image>
+							<view slot="delete" class="custom-delete">
+								<u-icon name="close" color="#fff" size="24"></u-icon>
+							</view>
+						</u-upload>
+						<view class="upload-tip">点击上传，建议尺寸1:1</view>
+					</view>
 
-          <view class="form-item">
-            <text class="form-label">姓名：</text>
-            <u-input v-model="formData.name" placeholder="请输入姓名" border="bottom"></u-input>
-          </view>
+					<view class="form-item">
+						<text class="form-label">姓名：</text>
+						<u-input v-model="formData.name" placeholder="请输入姓名" border="bottom" clearable></u-input>
+					</view>
 
-          <view class="form-item">
-            <text class="form-label">简介：</text>
-            <u-input 
-                    v-model="formData.bio" 
-                    type="textarea" 
-                    placeholder="请输入简介" 
-                    :maxlength="200"
-                    height="320">
-            </u-input>
-          </view>
-        </view>
-      </view>
-    </u-modal>
+					<view class="form-item">
+						<text class="form-label">简介：</text>
+						<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"
+							height="120" border="bottom">
+						</u-input>
+						<view class="word-count">{{formData.bio.length}}/200</view>
+					</view>
+				</view>
+			</view>
+		</u-modal>
 
-    <Footer></Footer>
-  </view>
+		<Footer></Footer>
+	</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 Footer from '@/components/footer_common.vue';
+	import {
+		get,
+		post
+	} from '@/utils/request';
+	import {
+		IMAGE_BASE_URL,
+		BASE_URL
+	} from '@/utils/config';
 
-export default {
-  components: {
-    Footer
-  },
-  data() {
-    return {
-      isLogin: false,
-      showEditModal: false,
-      showPhoneButton: false,
-      avatarList: [],
-      formData: {
-        name: "",
-        bio: "",
-      },
-      userInfo: {
-        nickName: "",
-        avatarUrl: "",
-        bio: "",
-        phone: ""
-      },
-      choseList: [
-        {
-          key: 1,
-          url: "/static/imgs/service/service_list.png",
-          name: '全部工单',
-          pageUrl: 'myTickets'
-        },
-        {
-          key: 2,
-          url: "/static/imgs/service/service_help.png",
-          name: '我的求助',
-          pageUrl: 'mySeekHelp'
-        },
-        {
-          key: 3,
-          url: "/static/imgs/service/service_service.png",
-          name: '周边服务',
-          pageUrl: 'neighbor'
-        },
-        {
-          key: 4,
-          url: "/static/imgs/service/service_friend.png",
-          name: '共享空间预约',
-          pageUrl: 'meetingList'
-        },
-        {
-          key: 5,
-          url: "/static/imgs/service/service_notice.png",
-          name: '设置',
-          pageUrl: 'serviceNoticeList'
-        },
-        {
-          key: 6,
-          url: "/static/imgs/service/service_phone.png",
-          name: '联系社区',
-        },
-      ],
-    }
-  },
-  onShow() {
-    this.initData();
-  },
-  methods: {
-    // 初始化数据
-    async initData() {
-      const token = uni.getStorageSync('token');
-      if (token) {
-        try {
-          const res = await get('/api/v1/app_auth/mine');
-          if (res && res.success) {
-            uni.setStorageSync('userInfo', res.data);
-            this.updateUserInfo(res.data);
-            this.isLogin = true;
-          } else {
-            this.clearUserData();
-          }
-        } catch (err) {
-          console.error('获取用户信息失败:', err);
-          this.clearUserData();
-        }
-      } else {
-        this.clearUserData();
-      }
-    },
-    
-    // 更新用户信息
-    updateUserInfo(data) {
-      this.userInfo = {
-        nickName: data.name || data.nickName || '未命名用户',
-        avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
-        bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
-        phone: data.phone || ''
-      };
-      
-      this.formData = {
-        name: this.userInfo.nickName,
-        bio: this.userInfo.bio
-      };
-      
-      if (this.userInfo.avatarUrl) {
-        this.avatarList = [{ url: this.userInfo.avatarUrl }];
-      }
-    },
-    
-    // 清除用户数据
-    clearUserData() {
-      this.isLogin = false;
-      this.userInfo = {
-        nickName: '未登录用户',
-        avatarUrl: '/static/imgs/index/nav.png',
-        bio: '这家伙很懒，什么都没有写~'
-      };
-      this.formData = { name: '', bio: '' };
-      this.avatarList = [];
-      uni.removeStorageSync('token');
-      uni.removeStorageSync('userInfo');
-    },
+	export default {
+		components: {
+			Footer
+		},
+		data() {
+			return {
+				isLogin: false,
+				showEditModal: false,
+				showPhoneButton: false,
+				avatarList: [],
+				formData: {
+					name: "",
+					bio: "",
+				},
+				userInfo: {
+					nickName: "",
+					avatarUrl: "",
+					bio: "",
+					phone: ""
+				},
+				uploading: false,
+				displayAvatar: '/static/imgs/index/nav.png',
+				choseList: [{
+						key: 1,
+						url: "/static/imgs/service/service_list.png",
+						name: '全部工单',
+						pageUrl: 'myTickets'
+					},
+					{
+						key: 2,
+						url: "/static/imgs/service/service_help.png",
+						name: '我的求助',
+						pageUrl: 'mySeekHelp'
+					},
+					{
+						key: 3,
+						url: "/static/imgs/service/service_service.png",
+						name: '周边服务',
+						pageUrl: 'neighbor'
+					},
+					{
+						key: 4,
+						url: "/static/imgs/service/service_friend.png",
+						name: '共享空间预约',
+						pageUrl: 'meetingList'
+					},
+					{
+						key: 5,
+						url: "/static/imgs/service/service_notice.png",
+						name: '设置',
+						pageUrl: 'serviceNoticeList'
+					},
+					{
+						key: 6,
+						url: "/static/imgs/service/service_phone.png",
+						name: '联系社区',
+					},
+				],
+			}
+		},
+		onShow() {
+			this.initData();
+		},
+		methods: {
+			// 初始化数据
+			async initData() {
+				const token = uni.getStorageSync('token');
+				if (token) {
+					try {
+						const res = await get('/api/v1/app_auth/mine');
+						if (res && res.success) {
+							uni.setStorageSync('userInfo', res.data);
+							this.updateUserInfo(res.data);
+							this.isLogin = true;
+						} else {
+							this.clearUserData();
+						}
+					} catch (err) {
+						console.error('获取用户信息失败:', err);
+						this.clearUserData();
+					}
+				} else {
+					this.clearUserData();
+				}
+			},
 
-    // 处理编辑点击
-    handleEditClick() {
-      if (!this.isLogin) {
-        this.showEditModal = true;
-        return;
-      }
-      
-      // 已登录时填充表单数据
-      this.formData = {
-        name: this.userInfo.nickName,
-        bio: this.userInfo.bio
-      };
-      
-      if (this.userInfo.avatarUrl) {
-        this.avatarList = [{ url: this.userInfo.avatarUrl }];
-      } else {
-        this.avatarList = [];
-      }
-      
-      this.showEditModal = true;
-    },
+			// 更新用户信息
+			updateUserInfo(data) {
+				this.userInfo = {
+					nickName: data.name || data.nickName || '未命名用户',
+					avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
+					bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
+					phone: data.phone || ''
+				};
 
-    // 获取用户信息
-    onGetUserInfo(e) {
-      if (e.detail.userInfo) {
-        this.userInfo.nickName = e.detail.userInfo.nickName;
-        this.userInfo.avatarUrl = e.detail.userInfo.avatarUrl;
-        this.wxLogin();
-      } else {
-        uni.showToast({
-          title: '您拒绝了授权',
-          icon: 'none'
-        });
-        this.showEditModal = false;
-      }
-    },
-    
-    // 微信登录获取code
-    wxLogin() {
-      uni.showLoading({ title: '登录中...' });
-      
-      uni.login({
-        provider: 'weixin',
-        success: (loginRes) => {
-          this.sendLoginRequest(loginRes.code);
-        },
-        fail: (err) => {
-          uni.hideLoading();
-          uni.showToast({
-            title: '微信登录失败',
-            icon: 'none'
-          });
-          console.error('微信登录失败:', err);
-        }
-      });
-    },
-    
-    // 发送登录请求
-    async sendLoginRequest(code) {
-      try {
-        const res = await post('/api/v1/apps/login/weixins', { code: code });
-        
-        if (res.success) {
-          uni.setStorageSync('token', res.data.access_token);
-          
-          if (!res.data.phone) {
-            this.showPhoneButton = true;
-            uni.showToast({
-              title: '请授权获取手机号',
-              icon: 'none'
-            });
-          } else {
-            await this.loginComplete(res.data);
-          }
-        } else {
-          throw new Error(res.message || '登录失败');
-        }
-      } catch (err) {
-        uni.hideLoading();
-        uni.showToast({
-          title: '登录失败，请稍后再试',
-          icon: 'none'
-        });
-        console.error('登录接口错误:', err);
-      }
-    },
-    
-    // 获取手机号
-    async getPhoneNumber(e) {
-      if (e.detail.errMsg !== "getPhoneNumber:ok") {
-        uni.showToast({
-          title: '获取手机号失败',
-          icon: 'none'
-        });
-        return;
-      }
-      
-      uni.showLoading({ title: '获取手机号中...' });
-      
-      try {
-        const res = await post('/api/v1/app_auth/weixin/bind_phone', {
-          code: e.detail.code
-        });
-        
-        if (res.success) {
-          await this.loginComplete(res.data);
-        } else {
-          throw new Error(res.message || '绑定手机号失败');
-        }
-      } catch (err) {
-        uni.hideLoading();
-        uni.showToast({
-          title: '绑定手机号失败',
-          icon: 'none'
-        });
-        console.error('绑定手机号失败:', err);
-      }
-    },
-    
-    // 登录完成处理
-    async loginComplete(data) {
-      try {
-        // 获取最新用户信息
-        const res = await get('/api/v1/app_auth/mine');
-        if (res && res.success) {
-          uni.setStorageSync('userInfo', res.data);
-          this.updateUserInfo(res.data);
-          this.isLogin = true;
-          this.showEditModal = false;
-          this.showPhoneButton = false;
-          uni.showToast({ title: '登录成功' });
-        } else {
-          throw new Error(res.message || '获取用户信息失败');
-        }
-      } catch (err) {
-        uni.showToast({
-          title: '登录失败: ' + err.message,
-          icon: 'none'
-        });
-        console.error('登录完成处理失败:', err);
-      }
-    },
+				// 更新显示头像
+				this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
 
-    // 上传头像
-    async handleAvatarUpload(event) {
-      if (!this.isLogin) {
-        this.showEditModal = true;
-        return;
-      }
-      
-      const { file } = event;
-      if (!file || !file.url) return;
-      
-      try {
-        uni.showLoading({ title: '上传中...' });
-        
-        // 检查文件大小
-        const fileInfo = await new Promise((resolve, reject) => {
-          uni.getFileInfo({
-            filePath: file.url,
-            success: resolve,
-            fail: reject
-          });
-        });
-        
-        if (fileInfo.size > 2 * 1024 * 1024) {
-          throw new Error('图片大小不能超过2MB');
-        }
-        
-        const avatarUrl = await this.uploadAvatar(file.url);
-        this.avatarList = [{ url: avatarUrl }];
-        this.userInfo.avatarUrl = avatarUrl;
-        
-        uni.hideLoading();
-      } catch (error) {
-        uni.hideLoading();
-        uni.showToast({
-          title: '头像上传失败: ' + error.message,
-          icon: 'none'
-        });
-      }
-    },
-    
-    // 上传头像到服务器
-    uploadAvatar(filePath) {
-      return new Promise((resolve, reject) => {
-        uni.uploadFile({
-          url: `${BASE_URL}/api/v1/upload`,
-          filePath: filePath,
-          name: 'file',
-          header: {
-            'Authorization': `Bearer ${uni.getStorageSync('token')}`
-          },
-          success: (uploadRes) => {
-            try {
-              const res = JSON.parse(uploadRes.data);
-              if (res && res.success) {
-                resolve(`${IMAGE_BASE_URL}${res.data}`);
-              } else {
-                reject(new Error(res.message || '上传失败'));
-              }
-            } catch (e) {
-              reject(new Error('解析响应失败'));
-            }
-          },
-          fail: (err) => {
-            reject(new Error('上传失败: ' + JSON.stringify(err)));
-          }
-        });
-      });
-    },
+				this.formData = {
+					name: this.userInfo.nickName,
+					bio: this.userInfo.bio
+				};
 
-    // 删除头像
-    handleAvatarDelete() {
-      this.avatarList = [];
-      this.userInfo.avatarUrl = '';
-    },
+				if (this.userInfo.avatarUrl) {
+					this.avatarList = [{
+						url: this.userInfo.avatarUrl
+					}];
+				}
+			},
 
-    // 提交表单
-    async handleSubmit() {
-      if (!this.isLogin) return;
-      
-      const { name, bio } = this.formData;
-      const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
-      
-      if (!name) {
-        uni.showToast({
-          title: '请输入姓名',
-          icon: 'none'
-        });
-        return;
-      }
-      
-      uni.showLoading({ title: '提交中...' });
-      
-      try {
-        // 1. 提交修改请求
-        await post('/api/v1/app_auth/bind', {
-          avatar: avatarUrl,
-          introduce: bio,
-          name: name
-        });
-        
-        // 2. 获取最新用户信息
-        const res = await get('/api/v1/app_auth/mine');
-        if (res && res.success) {
-          // 3. 更新本地存储和页面数据
-          uni.setStorageSync('userInfo', res.data);
-          this.updateUserInfo(res.data);
-          
-          uni.hideLoading();
-          uni.showToast({ title: '修改成功' });
-          this.showEditModal = false;
-        } else {
-          throw new Error(res.message || '获取用户信息失败');
-        }
-      } catch (err) {
-        uni.hideLoading();
-        uni.showToast({
-          title: '修改失败: ' + (err.message || '未知错误'),
-          icon: 'none'
-        });
-        console.error('修改失败:', err);
-      }
-    },
+			// 清除用户数据
+			clearUserData() {
+				this.isLogin = false;
+				this.userInfo = {
+					nickName: '未登录用户',
+					avatarUrl: '/static/imgs/index/nav.png',
+					bio: '这家伙很懒，什么都没有写~'
+				};
+				this.formData = {
+					name: '',
+					bio: ''
+				};
+				this.avatarList = [];
+				uni.removeStorageSync('token');
+				uni.removeStorageSync('userInfo');
+			},
 
-    // 取消修改
-    handleCancel() {
-      this.showEditModal = false;
-    },
+			// 处理编辑点击
+			handleEditClick() {
+				if (!this.isLogin) {
+					this.showEditModal = true;
+					return;
+				}
 
-    // 跳转页面
-    goPage(page) {
-      if (!this.checkLogin()) {
-        this.showEditModal = true;
-        return;
-      }
+				// 已登录时填充表单数据
+				this.formData = {
+					name: this.userInfo.nickName,
+					bio: this.userInfo.bio
+				};
 
-      if (page) {
-        uni.navigateTo({
-          url: `/pages/${page}/index`
-        });
-      }
-    },
-    
-    // 检查登录状态
-    checkLogin() {
-      const token = uni.getStorageSync('token');
-      if (!token) {
-        uni.showToast({
-          title: '请先登录',
-          icon: 'none'
-        });
-        return false;
-      }
-      return true;
-    }
-  }
-}
+				if (this.userInfo.avatarUrl) {
+					this.avatarList = [{
+						url: this.userInfo.avatarUrl
+					}];
+				} else {
+					this.avatarList = [];
+				}
+
+				this.showEditModal = true;
+			},
+
+			// 获取用户信息
+			onGetUserInfo(e) {
+				if (e.detail.userInfo) {
+					this.userInfo.nickName = e.detail.userInfo.nickName;
+					this.userInfo.avatarUrl = e.detail.userInfo.avatarUrl;
+					this.wxLogin();
+				} else {
+					uni.showToast({
+						title: '您拒绝了授权',
+						icon: 'none'
+					});
+					this.showEditModal = false;
+				}
+			},
+
+			// 微信登录获取code
+			wxLogin() {
+				uni.showLoading({
+					title: '登录中...'
+				});
+
+				uni.login({
+					provider: 'weixin',
+					success: (loginRes) => {
+						this.sendLoginRequest(loginRes.code);
+					},
+					fail: (err) => {
+						uni.hideLoading();
+						uni.showToast({
+							title: '微信登录失败',
+							icon: 'none'
+						});
+						console.error('微信登录失败:', err);
+					}
+				});
+			},
+
+			// 发送登录请求
+			async sendLoginRequest(code) {
+				try {
+					const res = await post('/api/v1/apps/login/weixins', {
+						code: code
+					});
+
+					if (res.success) {
+						uni.setStorageSync('token', res.data.access_token);
+
+						if (!res.data.phone) {
+							this.showPhoneButton = true;
+							uni.showToast({
+								title: '请授权获取手机号',
+								icon: 'none'
+							});
+						} else {
+							await this.loginComplete(res.data);
+						}
+					} else {
+						throw new Error(res.message || '登录失败');
+					}
+				} catch (err) {
+					uni.hideLoading();
+					uni.showToast({
+						title: '登录失败，请稍后再试',
+						icon: 'none'
+					});
+					console.error('登录接口错误:', err);
+				}
+			},
+
+			// 获取手机号
+			async getPhoneNumber(e) {
+				if (e.detail.errMsg !== "getPhoneNumber:ok") {
+					uni.showToast({
+						title: '获取手机号失败',
+						icon: 'none'
+					});
+					return;
+				}
+
+				uni.showLoading({
+					title: '获取手机号中...'
+				});
+
+				try {
+					const res = await post('/api/v1/app_auth/weixin/bind_phone', {
+						code: e.detail.code
+					});
+
+					if (res.success) {
+						await this.loginComplete(res.data);
+					} else {
+						throw new Error(res.message || '绑定手机号失败');
+					}
+				} catch (err) {
+					uni.hideLoading();
+					uni.showToast({
+						title: '绑定手机号失败',
+						icon: 'none'
+					});
+					console.error('绑定手机号失败:', err);
+				}
+			},
+
+			// 登录完成处理
+			async loginComplete(data) {
+				try {
+					// 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+						this.isLogin = true;
+						this.showEditModal = false;
+						this.showPhoneButton = false;
+						uni.showToast({
+							title: '登录成功'
+						});
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					uni.showToast({
+						title: '登录失败: ' + err.message,
+						icon: 'none'
+					});
+					console.error('登录完成处理失败:', err);
+				}
+			},
+
+			// 上传头像
+			async handleAvatarUpload(event) {
+				if (!this.isLogin) {
+					this.showEditModal = true;
+					return;
+				}
+
+				const {
+					file
+				} = event;
+				if (!file || !file.url) return;
+
+				this.uploading = true;
+
+				try {
+					// 检查文件大小
+					const fileInfo = await new Promise((resolve, reject) => {
+						uni.getFileInfo({
+							filePath: file.url,
+							success: resolve,
+							fail: reject
+						});
+					});
+
+					if (fileInfo.size > 2 * 1024 * 1024) {
+						throw new Error('图片大小不能超过2MB');
+					}
+
+					// 上传到服务器
+					const avatarUrl = await this.uploadAvatar(file.url);
+
+					// 更新用户信息
+					await this.updateUserAvatar(avatarUrl);
+
+					uni.showToast({
+						title: '头像上传成功'
+					});
+				} catch (error) {
+					console.error('头像上传失败:', error);
+					uni.showToast({
+						title: '头像上传失败: ' + error.message,
+						icon: 'none'
+					});
+				} finally {
+					this.uploading = false;
+				}
+			},
+
+			// 上传头像到服务器
+			uploadAvatar(filePath) {
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: `${BASE_URL}/api/v1/upload`,
+						filePath: filePath,
+						name: 'file',
+						header: {
+							'Authorization': `Bearer ${uni.getStorageSync('token')}`
+						},
+						success: (uploadRes) => {
+							try {
+								const res = JSON.parse(uploadRes.data);
+								if (res && res.success) {
+									resolve(`${IMAGE_BASE_URL}${res.data}`);
+								} else {
+									reject(new Error(res.message || '上传失败'));
+								}
+							} catch (e) {
+								reject(new Error('解析响应失败'));
+							}
+						},
+						fail: (err) => {
+							reject(new Error('上传失败: ' + JSON.stringify(err)));
+						}
+					});
+				});
+			},
+
+			// 上传头像到服务器
+			async updateUserAvatar(avatarUrl) {
+				try {
+					// 1. 提交修改请求
+					await post('/api/v1/app_auth/bind', {
+						avatar: avatarUrl,
+						introduce: this.formData.bio,
+						name: this.formData.name
+					});
+
+					// 2. 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						// 3. 更新本地存储和页面数据
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					console.error('更新头像失败:', err);
+					throw err;
+				}
+			},
+
+			// 删除头像
+			handleAvatarDelete() {
+				this.avatarList = [];
+				this.displayAvatar = '/static/imgs/index/nav.png';
+				this.userInfo.avatarUrl = '';
+			},
+
+			// 提交表单
+			async handleSubmit() {
+				if (!this.isLogin) return;
+
+				const {
+					name,
+					bio
+				} = this.formData;
+				const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
+
+				if (!name) {
+					uni.showToast({
+						title: '请输入姓名',
+						icon: 'none'
+					});
+					return;
+				}
+
+				uni.showLoading({
+					title: '提交中...'
+				});
+
+				try {
+					// 1. 提交修改请求
+					await post('/api/v1/app_auth/bind', {
+						avatar: avatarUrl,
+						introduce: bio,
+						name: name
+					});
+
+					// 2. 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						// 3. 更新本地存储和页面数据
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+
+						uni.hideLoading();
+						uni.showToast({
+							title: '修改成功'
+						});
+						this.showEditModal = false;
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					uni.hideLoading();
+					uni.showToast({
+						title: '修改失败: ' + (err.message || '未知错误'),
+						icon: 'none'
+					});
+					console.error('修改失败:', err);
+				}
+			},
+
+			// 取消修改
+			handleCancel() {
+				this.showEditModal = false;
+			},
+
+			// 跳转页面
+			goPage(page) {
+				if (!this.checkLogin()) {
+					this.showEditModal = true;
+					return;
+				}
+
+				if (page) {
+					uni.navigateTo({
+						url: `/pages/${page}/index`
+					});
+				}
+			},
+
+			// 检查登录状态
+			checkLogin() {
+				const token = uni.getStorageSync('token');
+				if (!token) {
+					uni.showToast({
+						title: '请先登录',
+						icon: 'none'
+					});
+					return false;
+				}
+				return true;
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-.profile-page {
-  background-color: #f5f7fa;
-  padding: 20rpx;
-  min-height: 100vh;
-  box-sizing: border-box;
-  padding-bottom: 120rpx;
-}
+	.profile-page {
+		background-color: #f5f7fa;
+		padding: 20rpx;
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding-bottom: 120rpx;
+	}
 
-.user-info-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 40rpx 30rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+	.user-info-card {
+		background: #fff;
+		border-radius: 16rpx;
+		padding: 40rpx 30rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
 
-  .user-info {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
+		.user-info {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+	}
 
-.avatar-section {
-  margin-bottom: 20rpx;
+	.avatar-section {
+		margin-bottom: 20rpx;
 
-  .avatar-wrapper {
-    position: relative;
-    width: 140rpx;
-    height: 140rpx;
+		.avatar-wrapper {
+			position: relative;
+			width: 140rpx;
+			height: 140rpx;
 
-    .avatar {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      border: 4rpx solid #fff;
-      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-    }
+			.avatar {
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				border: 4rpx solid #fff;
+				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+			}
 
-    .edit-icon {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      background: #2979ff;
-      width: 48rpx;
-      height: 48rpx;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-    }
-  }
-}
+			.edit-icon {
+				position: absolute;
+				right: 0;
+				bottom: 0;
+				background: #2979ff;
+				width: 48rpx;
+				height: 48rpx;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+			}
 
-.name-section {
-  // display: flex;
-  width: 100%;
-  align-items: center;
-  text-align: center;
-  margin-bottom: 30rpx;
+			.u-loading-icon {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				background: rgba(0, 0, 0, 0.3);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 1;
+			}
+		}
+	}
 
-  .name {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #333;
-    // margin-right: 12rpx;
-  }
-  .phone{
-	color: #999;  
-	font-size: 24rpx;
-  }
-	  
-}
+	.name-section {
+		width: 100%;
+		align-items: center;
+		text-align: center;
+		margin-bottom: 30rpx;
 
-.description-card {
-  background: #f8f9fa;
-  border-radius: 12rpx;
-  padding: 24rpx;
-  width: 100%;
-  text-align: center;
+		.name {
+			font-size: 36rpx;
+			font-weight: 600;
+			color: #333;
+		}
 
-  .title {
-    font-size: 28rpx;
-    color: #666;
-    margin-bottom: 12rpx;
-    display: block;
-  }
+		.phone {
+			color: #999;
+			font-size: 24rpx;
+		}
+	}
 
-  .content {
-    font-size: 26rpx;
-    color: #999;
-    line-height: 1.5;
-  }
-}
+	.description-card {
+		background: #f8f9fa;
+		border-radius: 12rpx;
+		padding: 24rpx;
+		width: 100%;
+		text-align: center;
 
-.function-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 0 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+		.title {
+			font-size: 28rpx;
+			color: #666;
+			margin-bottom: 12rpx;
+			display: block;
+		}
 
-  .button-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 28rpx 0;
-    border-bottom: 1rpx solid #f2f3f5;
+		.content {
+			font-size: 26rpx;
+			color: #999;
+			line-height: 1.5;
+		}
+	}
 
-    &:active {
-      background-color: #f8f8f8;
-    }
+	.function-card {
+		background: #fff;
+		border-radius: 16rpx;
+		padding: 0 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
 
-    &:last-child {
-      border-bottom: none;
-    }
+		.button-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 28rpx 0;
+			border-bottom: 1rpx solid #f2f3f5;
 
-    .button-content {
-      display: flex;
-      align-items: center;
-      flex: 1;
-    }
+			&:active {
+				background-color: #f8f8f8;
+			}
 
-    .icon {
-      width: 48rpx;
-      height: 48rpx;
-      margin-right: 24rpx;
-    }
+			&:last-child {
+				border-bottom: none;
+			}
 
-    .label {
-      font-size: 30rpx;
-      color: #333;
-      flex: 1;
-    }
-  }
-}
+			.button-content {
+				display: flex;
+				align-items: center;
+				flex: 1;
+			}
 
-.modal-content {
-  padding: 0 30rpx;
-  width: 90%;
-  margin: 0 auto;
+			.icon {
+				width: 48rpx;
+				height: 48rpx;
+				margin-right: 24rpx;
+			}
 
-  .form-item {
-    margin-bottom: 40rpx;
+			.label {
+				font-size: 30rpx;
+				color: #333;
+				flex: 1;
+			}
+		}
+	}
 
-    .form-label {
-      display: block;
-      font-size: 28rpx;
-      color: #606266;
-      margin-bottom: 16rpx;
-    }
-  }
+	.modal-content {
+		padding: 0 30rpx;
+		width: 90%;
+		margin: 0 auto;
+		max-height: 70vh;
+		overflow-y: auto;
 
-  .auth-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 40rpx 0;
+		/* 编辑表单区域 */
+		.edit-section {
+			padding: 20rpx 0;
 
-    .auth-button {
-      width: 100%;
-      height: 80rpx;
-      line-height: 80rpx;
-      background: #07C160;
-      color: #fff;
-      font-size: 26rpx;
-      border-radius: 40rpx;
-      margin-bottom: 20rpx;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+			.form-item {
+				margin-bottom: 40rpx;
 
-      &::after {
-        border: none;
-      }
-              
-      &.phone-button {
-        background: #2979ff;
-        margin-top: 20rpx;
-      }
-              
-      &:active {
-        opacity: 0.8;
-      }
-    } 
-  }
-}
+				.form-label {
+					display: block;
+					font-size: 28rpx;
+					color: #606266;
+					margin-bottom: 16rpx;
+					font-weight: 500;
+				}
+
+				.upload-tip {
+					font-size: 24rpx;
+					color: #999;
+					margin-top: 10rpx;
+					text-align: center;
+				}
+
+				.word-count {
+					text-align: right;
+					font-size: 24rpx;
+					color: #999;
+					margin-top: 10rpx;
+				}
+			}
+
+			/* 自定义删除按钮样式 */
+			.custom-delete {
+				position: absolute;
+				top: -10rpx;
+				right: -10rpx;
+				width: 40rpx;
+				height: 40rpx;
+				background: #f56c6c;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 10;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+			}
+		}
+
+		/* 授权登录区域 */
+		.auth-section {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 40rpx 0;
+
+			.auth-title {
+				font-size: 32rpx;
+				color: #333;
+				margin-bottom: 40rpx;
+				text-align: center;
+				font-weight: 500;
+			}
+
+			.auth-button {
+				width: 100%;
+				height: 90rpx;
+				line-height: 90rpx;
+				background: #07C160;
+				color: #fff;
+				font-size: 30rpx;
+				border-radius: 45rpx;
+				margin-bottom: 30rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+				box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+
+				&::after {
+					border: none;
+				}
+
+				&.phone-button {
+					background: #2979ff;
+					box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+				}
+
+				&:active {
+					opacity: 0.9;
+				}
+
+				.wechat-icon, .phone-icon {
+					width: 40rpx;
+					height: 40rpx;
+					margin-right: 15rpx;
+				}
+			}
+
+			.auth-tip {
+				font-size: 24rpx;
+				color: #999;
+				margin-top: 20rpx;
+				text-align: center;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/myTicketsDetail/index.vue b/pages/myTicketsDetail/index.vue
index 4e60e18..340b9df 100644
--- a/pages/myTicketsDetail/index.vue
+++ b/pages/myTicketsDetail/index.vue
@@ -1,44 +1,69 @@
 <template>
 	<view class="work-order-detail">
-		<!-- 头部用户信息区域 -->
-		<view class="header">
-			<image class="avatar" :src="detailObj.customerPortrait" mode="aspectFill"></image>
-			<text class="username">{{detailObj.customerName}}</text>
-		</view>
 		
 		<!-- 图片区域 - 编辑状态下可修改 -->
-		<view class="image-area">
-			<image class="work-order-img" :src="`${IMAGE_BASE_URL}`+detailObj.images[0]" mode="widthFix" v-if="!isEditing"></image>
-			<view v-else>
-				<image class="work-order-img" :src="workOrderImg" mode="widthFix"></image>
-				<view class="upload-btn" @click="uploadImage">
-					<u-icon name="camera" size="40" color="#fff"></u-icon>
+		<view class="image-area card">
+			<view class="img-container">
+				<image 
+					class="work-order-img" 
+					:src="!isEditing ? `${IMAGE_BASE_URL}${detailObj.images[0] || ''}` : workOrderImg" 
+					mode="widthFix"
+					:lazy-load="true"
+				></image>
+				<view class="upload-btn" @click="uploadImage" v-if="isEditing">
+					<u-icon name="camera" size="28" color="#fff"></u-icon>
 					<text class="upload-text">更换图片</text>
 				</view>
 			</view>
 		</view>
 		
 		<!-- 标题与日期 -->
-		<view class="title-area">
-			<text class="title" >{{detailObj.label}}</text>
-			<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD")}}</text>
+		<view class="title-area card">
+			<view class="title-wrap">
+				<text class="title" :class="{empty: !detailObj.label}">{{detailObj.label || '未设置标题'}}</text>
+			</view>
+			<view class="date-wrap">
+				<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD") || '未知时间'}}</text>
+			</view>
 		</view>
 		
 		<!-- 工单详情内容 - 编辑状态下可修改 -->
-		<view class="content">
+		<view class="content card">
 			<view class="label">
-				<text>工单地点：</text>
-				<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.address}}</text>
-				<input class="edit-input" v-model="editAddress" v-else placeholder="请输入地点" />
+				<view class="label-name">
+					<!-- <u-icon name="map-marker" size="24" color="#409EFF"></u-icon> -->
+					<text>工单地点：</text>
+				</view>
+				<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.address}">{{detailObj.address || '未填写'}}</text>
+				<input class="edit-input" v-model="editAddress" v-else placeholder="请输入工单地点" />
 			</view>
 			<view class="label">
-				<text>工单内容：</text>
-				<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.title}}</text>
+				<view class="label-name">
+					<!-- <u-icon name="user" size="24" color="#409EFF"></u-icon> -->
+					<text>联系人：</text>
+				</view>
+				<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.concatName}">{{detailObj.concatName || '未填写'}}</text>
+				<input class="edit-input" v-model="editContactName" v-else placeholder="请输入联系人" />
+			</view>
+			<view class="label">
+				<view class="label-name">
+					<!-- <u-icon name="phone" size="24" color="#409EFF"></u-icon> -->
+					<text>联系电话：</text>
+				</view>
+				<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.customerPhone}">{{detailObj.customerPhone || '未填写'}}</text>
+				<input class="edit-input" v-model="editContactPhone" v-else placeholder="请输入联系电话" type="number" />
+			</view>
+			<view class="label label-content">
+				<view class="label-name">
+					<!-- <u-icon name="file-text" size="24" color="#409EFF"></u-icon> -->
+					<text>工单内容：</text>
+				</view>
+				<text v-if="!isEditing" style="font-weight: normal; white-space: pre-line;" :class="{empty: !detailObj.title}">{{detailObj.title || '未填写'}}</text>
 				<textarea 
 					class="edit-textarea" 
 					v-model="editTitle" 
 					v-else 
-					placeholder="请输入内容"
+					placeholder="请输入工单详细内容"
 					auto-height
 				/>
 			</view>
@@ -49,15 +74,17 @@
 			<u-button 
 				@click="handleModify" 
 				:type="isEditing ? 'success' : 'primary'" 
-				class="action-btn"
+				class="action-btn primary-btn"
 				:loading="isLoading"
+				shape="circle"
 			>
 				{{isEditing ? '保存修改' : '修改'}}
 			</u-button>
 			<u-button 
 				@click="handleWithdraw" 
-				:type="isEditing ? 'default' : 'primary'" 
+				:type="isEditing ? 'default' : 'warning'" 
 				class="action-btn"
+				shape="circle"
 			>
 				{{isEditing ? '取消编辑' : '撤回'}}
 			</u-button>
@@ -83,6 +110,8 @@
 				editLabel: '',
 				editAddress: '',
 				editTitle: '',
+				editContactName: '', // 新增：联系人
+				editContactPhone: '', // 新增：联系电话
 				detailObj: {},
 				tempImagePath: ''  // 临时存储上传的图片路径
 			};
@@ -91,6 +120,9 @@
 			let obj = uni.getStorageSync("Detail");
 			this.detailObj = {...obj};
 			this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
+			// 初始化新增字段
+			this.editContactName = this.detailObj.concatName || '';
+			this.editContactPhone = this.detailObj.customerPhone || '';
 		},
 		methods: {
 			// 上传图片到服务器
@@ -145,6 +177,8 @@
 					this.editLabel = this.detailObj.label;
 					this.editAddress = this.detailObj.address;
 					this.editTitle = this.detailObj.title;
+					this.editContactName = this.detailObj.concatName;
+					this.editContactPhone = this.detailObj.customerPhone;
 					this.isEditing = true;
 				} else {
 					// 保存修改
@@ -164,7 +198,9 @@
 							address: this.editAddress,
 							title: this.editTitle,
 							images: images,
-							status:1
+							status: 1,
+							concatName: this.editContactName, // 新增：联系人
+							customerPhone: this.editContactPhone // 新增：联系电话
 						};
 						
 						const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, requestData);
@@ -203,6 +239,14 @@
 			
 			// 撤回/取消操作
 			async handleWithdraw() {
+				if (this.isEditing) {
+					// 取消编辑状态，不发送请求
+					this.isEditing = false;
+					this.tempImagePath = '';
+					return;
+				}
+				
+				// 撤回工单
 				const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, {status:98});
 				
 				if (res && res.success) {
@@ -222,146 +266,335 @@
 </script>
 
 <style lang="scss" scoped>
-	/* 原有样式保持不变 */
-	// 定义变量
-	$primary-color: #007AFF;
-	$success-color: #4cd964;
-	$warning-color: #FF9500;
-	$text-color: #333;
-	$subtext-color: #999;
-	$border-radius: 10rpx;
-	$padding-base: 15rpx;
-	$font-base: 32rpx;
+	/* 基础变量优化 */
+	$primary-color: #409EFF; // 更舒适的蓝色
+	$success-color: #67C23A;
+	$warning-color: #F56C6C;
+	$text-color: #303133;
+	$subtext-color: #606266;
+	$light-text: #909399;
+	$border-color: #E4E7ED;
+	$bg-color: #F5F7FA;
+	$card-bg: #FFFFFF;
+	$border-radius: 12rpx;
+	$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+	$transition: all 0.2s ease;
 
-	// 定义 mixin
+	/* 工具类 */
 	@mixin flex-center {
 		display: flex;
 		align-items: center;
 	}
-
+	
+	@mixin card {
+		background: $card-bg;
+		border-radius: $border-radius;
+		box-shadow: $shadow;
+		padding: 30rpx;
+		margin-bottom: 24rpx;
+		transition: $transition;
+		
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	
+	/* 页面容器 */
 	.work-order-detail {
-		padding: $padding-base;
-		width: 90%;
-		margin: 0 auto;
-		border-radius: 10rpx;
-		box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.25);
-
-		.header {
-			@include flex-center;
-			margin-bottom: $padding-base;
-
-			.avatar {
-				width: 80rpx;
-				height: 80rpx;
-				border-radius: 50%;
-				margin-right: 10rpx;
-			}
-
-			.username {
-				font-size: $font-base;
-				font-weight: bold;
-				color: $text-color;
-			}
+		background-color: $bg-color;
+		min-height: 100vh;
+		padding: 0 30rpx 40rpx;
+	}
+	
+	/* 导航栏 */
+	.navbar {
+		@include flex-center;
+		height: 100rpx;
+		width: 100%;
+		padding: 0 10rpx;
+		background: $card-bg;
+		border-bottom: 1px solid $border-color;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		margin-bottom: 24rpx;
+		
+		.nav-title {
+			font-size: 36rpx;
+			color: $text-color;
+			font-weight: 500;
+			flex: 1;
+			text-align: center;
+			margin-left: -36rpx; // 抵消图标宽度
+		}
+	}
+	
+	/* 头部用户信息 */
+	.header {
+		@include card;
+		display: flex;
+		align-items: center;
+		padding: 24rpx 30rpx;
+		
+		.avatar {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			background-color: $bg-color;
+			border: 2rpx solid #F0F2F5;
 		}
 		
-		.image-area {
-			position: relative;
-			margin-bottom: $padding-base;
+		.user-info {
+			margin-left: 24rpx;
+			flex: 1;
 		}
-
+		
+		.user-name-wrap {
+			@include flex-center;
+			margin-bottom: 8rpx;
+		}
+		
+		.username {
+			font-size: 34rpx;
+			color: $text-color;
+			font-weight: 500;
+		}
+		
+		.status-tag {
+			margin-left: 12rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+		}
+		
+		.contact-info {
+			@include flex-center;
+			font-size: 28rpx;
+		}
+		
+		.info-icon {
+			margin-right: 6rpx;
+		}
+		
+		.user-phone {
+			color: $subtext-color;
+		}
+	}
+	
+	/* 图片区域优化 */
+	.image-area {
+		@include card;
+		padding: 24rpx;
+		
+		.img-container {
+			position: relative;
+			width: 100%;
+			border-radius: 8rpx;
+			overflow: hidden;
+			background-color: $bg-color;
+		}
+		
 		.work-order-img {
 			width: 100%;
-			border-radius: $border-radius;
+			border-radius: 8rpx;
+			transition: $transition;
+			// 加载占位效果
+			&:empty {
+				height: 300rpx;
+				background-color: $bg-color;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: $light-text;
+			}
 		}
 		
 		.upload-btn {
 			position: absolute;
-			bottom: 20rpx;
-			right: 20rpx;
-			background: rgba(0, 0, 0, 0.6);
-			padding: 8rpx 20rpx;
-			border-radius: 30rpx;
+			right: 16rpx;
+			bottom: 16rpx;
+			background: rgba(0, 0, 0, 0.5);
+			padding: 8rpx 16rpx;
+			border-radius: 24rpx;
 			@include flex-center;
+			transition: $transition;
+			cursor: pointer;
+			
+			&:hover {
+				background: rgba(0, 0, 0, 0.7);
+			}
 			
 			.upload-text {
 				color: #fff;
-				font-size: 24rpx;
-				margin-left: 8rpx;
+				font-size: 26rpx;
+				margin-left: 6rpx;
 			}
 		}
-
-		.title-area {
+	}
+	
+	/* 标题区域优化 */
+	.title-area {
+		@include card;
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+		
+		.title-wrap {
 			@include flex-center;
-			justify-content: space-between;
-			margin-bottom: $padding-base;
-			border-bottom: 2rpx solid $subtext-color;
-			height: 70rpx;
-			line-height: 70rpx;
-
-			.title {
-				font-size: $font-base + 2rpx;
-				font-weight: bold;
-				color: $text-color;
-				max-width: 70%;
+			width: 100%;
+		}
+		
+		.title-icon {
+			margin-right: 12rpx;
+			flex-shrink: 0;
+		}
+		
+		.title {
+			font-size: 34rpx;
+			color: $text-color;
+			font-weight: 500;
+			line-height: 1.5;
+		}
+		
+		.date-wrap {
+			@include flex-center;
+			align-self: flex-end;
+			padding-top: 4rpx;
+		}
+		
+		.date-icon {
+			margin-right: 6rpx;
+		}
+		
+		.date {
+			font-size: 26rpx;
+			color: $light-text;
+		}
+	}
+	
+	/* 内容区域优化 */
+	.content {
+		@include card;
+		
+		.label {
+			display: flex;
+			width: 100%;
+			margin-bottom: 28rpx;
+			align-items: flex-start;
+			padding-bottom: 28rpx;
+			border-bottom:1rpx dashed $border-color;
+			
+			&:last-child {
+				margin-bottom: 0;
+				padding-bottom: 0;
+				border-bottom: none;
 			}
 			
-			.title-input {
-				font-size: $font-base + 2rpx;
-				font-weight: bold;
-				color: $text-color;
-				width: 70%;
-				padding: 10rpx;
-				background: #f8f8f8;
-				border-radius: 8rpx;
-			}
-
-			.date {
-				font-size: $font-base - 4rpx;
+			.label-name {
+				@include flex-center;
+				min-width: 160rpx;
+				font-weight: 500;
 				color: $subtext-color;
-			}
-		}
-
-		.content {
-			margin-bottom: $padding-base;
-			line-height: 50rpx;
-			font-size: 24rpx;
-
-			.label {
-				text {
-					font-weight: bold;
-				}
-				margin-bottom: 20rpx;
+				font-size: 28rpx;
+				flex-shrink: 0;
 			}
 			
-			.edit-input {
-				width: 95%;
-				padding: 10rpx;
-				background: #f8f8f8;
-				border-radius: 8rpx;
-				margin-top: 5rpx;
+			.label-name u-icon {
+				margin-right: 8rpx;
 			}
 			
-			.edit-textarea {
-				width: 95%;
-				padding: 10rpx;
-				background: #f8f8f8;
-				border-radius: 8rpx;
-				margin-top: 5rpx;
-				min-height: 150rpx;
+			& > text {
+				font-size: 28rpx;
+				color: $text-color;
+				line-height: 1.6;
+				flex: 1;
 			}
 		}
-
-		.btn-group {
-			@include flex-center;
-			justify-content: space-around;
-			margin-top: 30rpx;
-			gap:30rpx;
-
-			.action-btn {
-				width: 30%;  // 调整为原来的一半
+		
+		.label-content {
+			align-items: flex-start;
+			
+			& > text {
+				white-space: pre-line;
+				word-break: break-all;
+			}
+		}
+		
+		.edit-input, .edit-textarea {
+			flex: 1;
+			padding: 12rpx 16rpx;
+			background: $bg-color;
+			border-radius: 8rpx;
+			border: 1px solid $border-color;
+			font-size: 28rpx;
+			color: $text-color;
+			line-height: 1.5;
+			transition: $transition;
+			
+			&:focus {
+				border-color: $primary-color;
+				background: #fff;
+				outline: none;
+				box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+			}
+		}
+		
+		.edit-textarea {
+			min-height: 180rpx;
+			resize: none;
+		}
+		
+		.empty {
+			color: $light-text;
+			font-style: italic;
+		}
+	}
+	
+	/* 按钮区域优化 */
+	.btn-group {
+		display: flex;
+		gap: 24rpx;
+		padding: 30rpx 10rpx 20rpx;
+		background-color: transparent;
+		
+		.action-btn {
+			flex: 1;
+			height: 90rpx;
+			line-height: 90rpx;
+			font-size: 30rpx;
+			font-weight: 500;
+			border-radius: 45rpx;
+			transition: $transition;
+		}
+		
+		.primary-btn {
+			background-color: $primary-color;
+			
+			&:active {
+				background-color: #3A8EE6;
+			}
+		}
+	}
+	
+	/* 适配小屏幕 */
+	@media (max-width: 375px) {
+		$font-base: 28rpx;
+		
+		.header {
+			padding: 18rpx;
+			
+			.avatar {
+				width: 80rpx;
 				height: 80rpx;
-				border-radius: 40rpx;
-				font-size: $font-base - 4rpx;
+			}
+		}
+		
+		.btn-group {
+			padding: 20rpx 5rpx;
+			
+			.action-btn {
+				height: 80rpx;
+				line-height: 80rpx;
+				font-size: 28rpx;
 			}
 		}
 	}
diff --git a/pages/serviceTickets/index.vue b/pages/serviceTickets/index.vue
index c0bfb7e..313bf4b 100644
--- a/pages/serviceTickets/index.vue
+++ b/pages/serviceTickets/index.vue
@@ -1,390 +1,463 @@
-<template>
-	<view class="container">
-		<view class="conent">
-			<view class="form-item">
-				<view class="label">
-					<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
-					工单内容
-				</view>
-				<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
-				<view class="voice-icon">
-					<u-icon name="mic" color="#409EFF" size="36"></u-icon>
-				</view>
-			</view>
-			<!-- 上传照片/视频 -->
-			<view class="form-item">
-				<view class="label">
-					<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
-					上传照片/视频
-				</view>
-				<view class="upload-area">
-					<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
-						width="200" height="200" accept="image/*,video/*" :previewFullImage="true">
-					</u-upload>
-				</view>
-				<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
-			</view>
-
-			<!-- 工单分类 -->
-			<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
-				<view class="label" @click="showSelect = true">
-					工单类型
-					<view @click="showPicker = true" class="select-box">
-						{{ workOrderCategory || '请选择' }}
-						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
-					</view>
-				</view>
-				<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
-					@cancel="handleCancel">
-				</u-picker>
-			</view>
-
-			<!-- 工单地点 -->
-			<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
-				<view class="label">
-					<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
-					工作地点
-				</view>
-				<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
-			</view>
-
-			<!-- 提交按钮 -->
-			<view class="submit-button">
-				<u-button type="primary" @click="handleSubmit">提交</u-button>
-			</view>
-		</view>
-		<Footer></Footer>
-	</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';
-	export default {
-		components: {
-			Footer
-		},
-		data() {
-			return {
-				workOrderContent: '',
-				fileList: [],
-				workOrderCategory: '',
-				workOrderCategoryID: '',
-				showSelect: false,
-				categoryList: [],
-				workOrderLocation: '',
-				expectedTime: '',
-				uploadedImages: [], // 专门存储图片URL
-				uploadedVideos: [], // 专门存储视频URL
-				videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
-			};
-		},
-		mounted() {
-			this.getOrderList();
-		},
-		methods: {
-			handleBack() {
-				uni.navigateBack({
-					delta: 1
-				});
-			},
-
-			// 文件上传相关方法
-			handleAfterRead(event) {
-				const {
-					file
-				} = event;
-				let files = [].concat(file);
-
-				// 检查文件数量和类型
-				if (this.fileList.length + files.length > 8) {
-					uni.showToast({
-						title: '最多只能上传8个文件',
-						icon: 'none'
-					});
-					return;
-				}
-
-				files.forEach(item => {
-					// 检查文件类型
-					const extension = this.getFileExtension(item.url);
-					const isVideo = this.videoFormats.includes(extension.toLowerCase());
-
-					// 添加到文件列表
-					this.fileList.push({
-						...item,
-						status: 'uploading',
-						message: '上传中...',
-						isVideo: isVideo
-					});
-
-					// 开始上传
-					this.uploadFile(item, isVideo);
-				});
-			},
-
-			// 获取文件扩展名
-			getFileExtension(filename) {
-				return filename.split('.').pop().split('?')[0];
-			},
-
-			handleDelete(event) {
-				const {
-					index
-				} = event;
-				const file = this.fileList[index];
-
-				// 从对应数组中删除
-				if (file.isVideo) {
-					const videoIndex = this.uploadedVideos.indexOf(file.url);
-					if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
-				} else {
-					const imageIndex = this.uploadedImages.indexOf(file.url);
-					if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
-				}
-
-				this.fileList.splice(index, 1);
-			},
-
-			async uploadFile(file, isVideo) {
-				try {
-					const fullUrl = await this.uploadAvatar(file.url);
-					const relativePath = fullUrl.replace(BASE_URL, '');
-
-					// 更新文件状态
-					const fileIndex = this.fileList.findIndex(item => item.url === file.url);
-					if (fileIndex !== -1) {
-						this.fileList[fileIndex] = {
-							...this.fileList[fileIndex],
-							status: 'success',
-							message: '上传成功',
-							url: fullUrl, // 预览用完整URL
-							relativeUrl: relativePath, // 存储相对路径
-							isVideo: isVideo
-						};
-
-						// 存储相对路径到对应数组
-						if (isVideo) {
-							this.uploadedVideos.push(relativePath);
-						} else {
-							this.uploadedImages.push(relativePath);
-						}
-					}
-				} catch (error) {
-					const fileIndex = this.fileList.findIndex(item => item.url === file.url);
-					if (fileIndex !== -1) {
-						this.fileList[fileIndex] = {
-							...this.fileList[fileIndex],
-							status: 'failed',
-							message: '上传失败'
-						};
-					}
-					uni.showToast({
-						title: `${isVideo ? '视频' : '图片'}上传失败: ${error.message}`,
-						icon: 'none'
-					});
-				}
-			},
-
-			uploadAvatar(filePath) {
-				return new Promise((resolve, reject) => {
-					uni.uploadFile({
-						url: `${BASE_URL}/api/v1/upload`,
-						filePath: filePath,
-						name: 'file',
-						header: {
-							'Authorization': `Bearer ${uni.getStorageSync('token')}`
-						},
-						success: (uploadRes) => {
-							try {
-								const res = JSON.parse(uploadRes.data);
-								if (res && res.success) {
-									resolve(`${IMAGE_BASE_URL}${res.data}`);
-								} else {
-									reject(new Error(res.message || '上传失败'));
-								}
-							} catch (e) {
-								reject(new Error('解析响应失败'));
-							}
-						},
-						fail: (err) => {
-							reject(new Error('上传失败: ' + JSON.stringify(err)));
-						}
-					});
-				});
-			},
-
-			async handleSubmit() {
-				if (!this.workOrderContent) {
-					uni.showToast({
-						title: '请填写工单内容',
-						icon: 'none'
-					});
-					return;
-				}
-
-				if (!this.workOrderCategory) {
-					uni.showToast({
-						title: '请选择工单类型',
-						icon: 'none'
-					});
-					return;
-				}
-
-				if (!this.workOrderLocation) {
-					uni.showToast({
-						title: '请填写工作地点',
-						icon: 'none'
-					});
-					return;
-				}
-
-				const submitData = {
-					title: this.workOrderContent,
-					orderTypeId: this.workOrderCategoryID,
-					address: this.workOrderLocation,
-					images: this.uploadedImages, // 只包含图片
-					videos: this.uploadedVideos, // 只包含视频·
-				};
-
-				console.log('提交数据:', submitData);
-
-				// 调用API保存信息
-				const res = await post('/api/v1/app_auth/work-order', submitData);
-
-				uni.hideLoading();
-
-				if (res && res.success) {
-					uni.showToast({
-						title: '提交成功',
-						icon: 'success',
-						duration: 2000
+<template>
+	<view class="container">
+		<view class="content">
+			<view class="form-item">
+				<view class="label">
+					<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
+					工单内容
+				</view>
+				<textarea v-model="workOrderContent" placeholder="请输入工单详细内容..." class="textarea" />
+				<view class="voice-icon">
+					<u-icon name="mic" color="#409EFF" size="36"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 联系人信息 -->
+			<view class="form-item contact-info">
+				<view class="contact-row">
+					<view class="label">
+						<u-icon name="account" color="#3B8CFF" size="38"></u-icon>
+						联系人
+					</view>
+					<input v-model="concatName" placeholder="请输入联系人姓名" class="contact-input" />
+				</view>
+				<view class="contact-row">
+					<view class="label">
+						<u-icon name="phone" color="#3B8CFF" size="38"></u-icon>
+						电话
+					</view>
+					<input v-model="customerPhone" placeholder="请输入联系人电话" class="contact-input" type="number" />
+				</view>
+			</view>
+			
+			<!-- 上传照片/视频 -->
+			<view class="form-item">
+				<view class="label">
+					<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
+					上传照片/视频
+				</view>
+				<view class="upload-area">
+					<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
+						width="160" height="160" accept="image/*,video/*" :previewFullImage="true">
+					</u-upload>
+				</view>
+				<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
+			</view>
+
+			<!-- 工单分类 -->
+			<view class="form-item">
+				<view class="label" @click="showSelect = true">
+					<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
+					工单类型
+					<view class="select-box">
+						{{ workOrderCategory || '请选择' }}
+						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
+					</view>
+				</view>
+				<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
+					@cancel="handleCancel">
+				</u-picker>
+			</view>
+
+			<!-- 工单地点 -->
+			<view class="form-item">
+				<view class="label">
+					<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
+					工作地点
+				</view>
+				<textarea v-model="workOrderLocation" placeholder="请输入详细工作地点..." class="textarea" />
+			</view>
+
+			<!-- 提交按钮 -->
+			<view class="submit-button">
+				<u-button type="primary" @click="handleSubmit" shape="circle">提交工单</u-button>
+			</view>
+		</view>
+		<Footer></Footer>
+	</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';
+	export default {
+		components: {
+			Footer
+		},
+		data() {
+			return {
+				workOrderContent: '',
+				concatName: '',  // 新增联系人姓名字段
+				customerPhone: '',  // 新增联系人电话字段
+				fileList: [],
+				workOrderCategory: '',
+				workOrderCategoryID: '',
+				showSelect: false,
+				categoryList: [],
+				workOrderLocation: '',
+				expectedTime: '',
+				uploadedImages: [],
+				uploadedVideos: [],
+				videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
+			};
+		},
+		mounted() {
+			this.getOrderList();
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+
+			// 文件上传相关方法
+			handleAfterRead(event) {
+				const {
+					file
+				} = event;
+				let files = [].concat(file);
+
+				if (this.fileList.length + files.length > 8) {
+					uni.showToast({
+						title: '最多只能上传8个文件',
+						icon: 'none'
 					});
-					this.workOrderContent = null;
-					this.workOrderCategoryID = null;
-				    this.workOrderCategory = null;
-					this.workOrderLocation = null;
-					this.fileList = [];
-					this.uploadedImages = [];
-					this.uploadedVideos = [];
+					return;
+				}
+
+				files.forEach(item => {
+					const extension = this.getFileExtension(item.url);
+					const isVideo = this.videoFormats.includes(extension.toLowerCase());
+
+					this.fileList.push({
+						...item,
+						status: 'uploading',
+						message: '上传中...',
+						isVideo: isVideo
+					});
+
+					this.uploadFile(item, isVideo);
+				});
+			},
+
+			getFileExtension(filename) {
+				return filename.split('.').pop().split('?')[0];
+			},
+
+			handleDelete(event) {
+				const {
+					index
+				} = event;
+				const file = this.fileList[index];
+
+				if (file.isVideo) {
+					const videoIndex = this.uploadedVideos.indexOf(file.url);
+					if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
+				} else {
+					const imageIndex = this.uploadedImages.indexOf(file.url);
+					if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
+				}
+
+				this.fileList.splice(index, 1);
+			},
+
+			async uploadFile(file, isVideo) {
+				try {
+					const fullUrl = await this.uploadAvatar(file.url);
+					const relativePath = fullUrl.replace(BASE_URL, '');
+
+					const fileIndex = this.fileList.findIndex(item => item.url === file.url);
+					if (fileIndex !== -1) {
+						this.fileList[fileIndex] = {
+							...this.fileList[fileIndex],
+							status: 'success',
+							message: '上传成功',
+							url: fullUrl,
+							relativeUrl: relativePath,
+							isVideo: isVideo
+						};
+
+						if (isVideo) {
+							this.uploadedVideos.push(relativePath);
+						} else {
+							this.uploadedImages.push(relativePath);
+						}
+					}
+				} catch (error) {
+					const fileIndex = this.fileList.findIndex(item => item.url === file.url);
+					if (fileIndex !== -1) {
+						this.fileList[fileIndex] = {
+							...this.fileList[fileIndex],
+							status: 'failed',
+							message: '上传失败'
+						};
+					}
+					uni.showToast({
+						title: `${isVideo ? '视频' : '图片'}上传失败: ${error.message}`,
+						icon: 'none'
+					});
+				}
+			},
+
+			uploadAvatar(filePath) {
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: `${BASE_URL}/api/v1/upload`,
+						filePath: filePath,
+						name: 'file',
+						header: {
+							'Authorization': `Bearer ${uni.getStorageSync('token')}`
+						},
+						success: (uploadRes) => {
+							try {
+								const res = JSON.parse(uploadRes.data);
+								if (res && res.success) {
+									resolve(`${IMAGE_BASE_URL}${res.data}`);
+								} else {
+									reject(new Error(res.message || '上传失败'));
+								}
+							} catch (e) {
+								reject(new Error('解析响应失败'));
+							}
+						},
+						fail: (err) => {
+							reject(new Error('上传失败: ' + JSON.stringify(err)));
+						}
+					});
+				});
+			},
+
+			async handleSubmit() {
+				if (!this.workOrderContent) {
+					uni.showToast({
+						title: '请填写工单内容',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				if (!this.concatName) {
+					uni.showToast({
+						title: '请填写联系人姓名',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				if (!this.customerPhone) {
+					uni.showToast({
+						title: '请填写联系电话',
+						icon: 'none'
+					});
+					return;
+				}
+
+				if (!this.workOrderCategory) {
+					uni.showToast({
+						title: '请选择工单类型',
+						icon: 'none'
+					});
+					return;
+				}
+
+				if (!this.workOrderLocation) {
+					uni.showToast({
+						title: '请填写工作地点',
+						icon: 'none'
+					});
+					return;
+				}
+
+				const submitData = {
+					title: this.workOrderContent,
+					concatName: this.concatName,  // 新增联系人姓名
+					customerPhone: this.customerPhone,  // 新增联系人电话
+					orderTypeId: this.workOrderCategoryID,
+					address: this.workOrderLocation,
+					images: this.uploadedImages,
+					videos: this.uploadedVideos,
+				};
+
+				console.log('提交数据:', submitData);
+
+				// 调用API保存信息
+				const res = await post('/api/v1/app_auth/work-order', submitData);
+
+				uni.hideLoading();
+
+				if (res && res.success) {
+					uni.showToast({
+						title: '提交成功',
+						icon: 'success',
+						duration: 2000
+					});
+					this.resetForm();
 					setTimeout(()=>{
 						uni.navigateTo({
 							url: `/pages/myTickets/index`,
 						});
-					},1000)
-
-				} else {
-					uni.showToast({
-						title: res?.message || '提交失败',
-						icon: 'none'
-					});
-				}
-			},
-
-			// 用户点击"确定"时触发
-			handleConfirm(e) {
-				this.workOrderCategory = e.value[0].label;
-				this.workOrderCategoryID = e.value[0].id;
-				this.showSelect = false;
-			},
-
-			// 用户点击"取消"时触发
-			handleCancel() {
-				this.showSelect = false;
-			},
-
-			//获取工单类型
-			async getOrderList() {
-				try {
-					const res = await get('/api/v1/apps/work-order-type');
-					if (res?.success) {
-						this.categoryList = [
-							[...res.data]
-						]
-					}
-				} catch (err) {
-					console.error('获取工单类型失败:', err);
-					uni.showToast({
-						title: '获取工单类型失败',
-						icon: 'none'
-					});
-				}
-			},
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	.container {
-		width: 100%;
-		height: 130vh;
-		opacity: 1;
-		background: rgba(210, 227, 255, 1);
-		position: relative;
-
-		.conent {
-			width: 100%;
-			position: absolute;
-			margin-top: 20rpx;
-
-			.form-item {
-				margin-bottom: 20px;
-				height: 400rpx;
-				width: 95%;
-				margin: 0 auto;
-				margin-bottom: 20rpx;
-				background: #fff;
-				padding: 20rpx;
-				display: flex;
-				flex-direction: column;
-				position: relative;
-
-				.label {
-					font-size: 32rpx;
-					color: #333;
-					margin-bottom: 30px;
-					display: flex;
-					white-space: nowrap;
-				}
-
-				.select-box {
-					display: flex;
-					align-items: center;
-					margin-left: 30rpx;
-					color: #999;
-				}
-
-				.voice-icon {
-					position: absolute;
-					right: 30rpx;
-					bottom: 20rpx;
-				}
-
-				.upload-area {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					height: 100px;
-				}
-
-				.note {
-					font-size: 20rpx;
-					color: #999;
-					margin-top: 60rpx;
-				}
-
-				.submit-button {
-					text-align: center;
-					margin-top: 20px;
-				}
-			}
-		}
-	}
+					},1000)
+				} else {
+					uni.showToast({
+						title: res?.message || '提交失败',
+						icon: 'none'
+					});
+				}
+			},
+			
+			resetForm() {
+				this.workOrderContent = '';
+				this.concatName = '';
+				this.customerPhone = '';
+				this.workOrderCategoryID = '';
+				this.workOrderCategory = '';
+				this.workOrderLocation = '';
+				this.fileList = [];
+				this.uploadedImages = [];
+				this.uploadedVideos = [];
+			},
+
+			handleConfirm(e) {
+				this.workOrderCategory = e.value[0].label;
+				this.workOrderCategoryID = e.value[0].id;
+				this.showSelect = false;
+			},
+
+			handleCancel() {
+				this.showSelect = false;
+			},
+
+			async getOrderList() {
+				try {
+					const res = await get('/api/v1/apps/work-order-type');
+					if (res?.success) {
+						this.categoryList = [
+							[...res.data]
+						]
+					}
+				} catch (err) {
+					console.error('获取工单类型失败:', err);
+					uni.showToast({
+						title: '获取工单类型失败',
+						icon: 'none'
+					});
+				}
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		width: 100%;
+		min-height: 100vh;
+		background: #f5f7fa;
+		padding-bottom: 120rpx;
+		
+		.content {
+			padding: 20rpx;
+			
+			.form-item {
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 24rpx;
+				margin-bottom: 24rpx;
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+				
+				.label {
+					font-size: 32rpx;
+					color: #333;
+					font-weight: 500;
+					margin-bottom: 24rpx;
+					display: flex;
+					align-items: center;
+					
+					.u-icon {
+						margin-right: 12rpx;
+					}
+				}
+				
+				.textarea {
+					width: 95%;
+					height: 180rpx;
+					padding: 16rpx;
+					background: #f8f8f8;
+					border-radius: 8rpx;
+					font-size: 28rpx;
+				}
+				
+				.voice-icon {
+					position: absolute;
+					right: 40rpx;
+					bottom: 40rpx;
+				}
+				
+				.select-box {
+					margin-left: auto;
+					color: #666;
+					display: flex;
+					align-items: center;
+					font-size: 28rpx;
+					
+					.u-icon {
+						margin-left: 8rpx;
+					}
+				}
+				
+				.upload-area {
+					margin-top: 16rpx;
+				}
+				
+				.note {
+					font-size: 24rpx;
+					color: #999;
+					margin-top: 24rpx;
+					display: block;
+				}
+			}
+			
+			.contact-info {
+				.contact-row {
+					display: flex;
+					align-items: center;
+					margin-bottom: 20rpx;
+					
+					&:last-child {
+						margin-bottom: 0;
+					}
+					
+					.label {
+						margin-bottom: 0;
+						width: 160rpx;
+						flex-shrink: 0;
+					}
+					
+					.contact-input {
+						flex: 1;
+						padding: 16rpx;
+						background: #f8f8f8;
+						border-radius: 8rpx;
+						font-size: 28rpx;
+					}
+				}
+			}
+			
+			.submit-button {
+				margin-top: 40rpx;
+				
+				.u-button {
+					height: 88rpx;
+					font-size: 32rpx;
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file