From d65a23d7275739ba3d7b10aaf1574ee8caffcc75 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Tue, 5 Aug 2025 15:19:33 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=A4=B4=E5=83=8F?=
 =?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/mine/index.vue | 1874 +++++++++++++++++++++---------------------
 1 file changed, 941 insertions(+), 933 deletions(-)

diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index fc8bb00..562907c 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -1,934 +1,942 @@
-<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>
-						<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)">
-				<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">
-					<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 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" 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="120" border="bottom">
-						</u-input>
-						<view class="word-count">{{formData.bio.length}}/200</view>
-					</view>
-				</view>
-			</view>
-		</u-modal>
-
-		<u-modal 
-		    :show="showPhoneDialog" 
-		    title="联系社区" 
-		    confirm-text="拨打" 
-		    cancel-text="取消" 
-		    @confirm="callCommunityPhone"
-		    @cancel="showPhoneDialog = false"
-		    :closeOnClickOverlay="true"> 
-		    <view class="phone-dialog-content">
-		        <text>社区电话：</text>
-		        <text class="phone-number">{{communityPhone}}</text>
-		    </view>
-		</u-modal>
-
-		<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 {
-				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: '设置'
-					},
-					{
-						key: 6,
-						url: "/static/imgs/service/service_phone.png",
-						name: '联系社区',
-					},
-				],
-				communityPhone: '0513-59000051',
-				showPhoneDialog: false
-			}
-		},
-		onShow() {
-			this.initData();
-		},
-		methods: {
-			handleCloseModal() {
-				this.showPhoneDialog = false;
-			},
-			// 初始化数据
-			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) {
-				// 显示时拼接IMAGE_BASE_URL
-				const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
-
-				this.userInfo = {
-					nickName: data.name || data.nickName || '未命名用户',
-					avatarUrl: avatarUrl,
-					bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
-					phone: data.phone || ''
-				};
-
-				// 更新显示头像
-				this.displayAvatar = this.userInfo.avatarUrl;
-
-				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');
-			},
-
-			// 处理编辑点击
-			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;
-			},
-
-			// 获取用户信息
-			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 {
-					// 获取最新用户信息
-					this.showEditModal = false;
-					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 > 3 * 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(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;
-				console.log("====", this.avatarList)
-				let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
-
-				if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
-					avatarUrl = avatarUrl.replace(IMAGE_BASE_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);
-						this.showEditModal = false;
-
-						uni.hideLoading();
-						uni.showToast({
-							title: '修改成功'
-						});
-
-					} 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(item) {
-				if (item.key === 6) { // 联系社区的特殊处理
-					this.handleContactCommunity();
-					
-					return;
-				}
-
-				if (item.key === 5) { // 设置的特殊处理
-					this.handleEditClick(); // 调用编辑用户信息的方法
-					return;
-				}
-
-				if (!this.checkLogin()) {
-					this.showEditModal = true;
-					return;
-				}
-
-				if (item.pageUrl) {
-					uni.navigateTo({
-						url: `/pages/${item.pageUrl}/index`
-					});
-				}
-			},
-
-			// 处理联系社区点击
-			handleContactCommunity() {
-				if (!this.checkLogin()) {
-				        this.showEditModal = true;
-				        return;
-				    }
-				    
-				uni.showModal({
-				    title: '联系社区',
-				    content: '是否要拨打社区电话：' + this.communityPhone,
-				    confirmText: '拨打',
-				    cancelText: '取消',
-				    success: (res) => {
-				        if (res.confirm) {
-				            this.callCommunityPhone();
-				        }
-				    }
-				});
-			},
-
-			// 拨打社区电话
-			callCommunityPhone() {
-				uni.makePhoneCall({
-					phoneNumber: this.communityPhone,
-					success: () => {
-						console.log('拨打电话成功');
-					},
-					fail: (err) => {
-						uni.showToast({
-							title: '拨打电话失败',
-							icon: 'none'
-						});
-						console.error('拨打电话失败:', err);
-					}
-				});
-				this.showPhoneDialog = false;
-			},
-
-			// 检查登录状态
-			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;
-	}
-
-	.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;
-		}
-	}
-
-	.avatar-section {
-		margin-bottom: 20rpx;
-
-		.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);
-			}
-
-			.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);
-			}
-
-			.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-section {
-		width: 100%;
-		align-items: center;
-		text-align: center;
-		margin-bottom: 30rpx;
-
-		.name {
-			font-size: 36rpx;
-			font-weight: 600;
-			color: #333;
-		}
-
-		.phone {
-			color: #999;
-			font-size: 24rpx;
-		}
-	}
-
-	.description-card {
-		background: #f8f9fa;
-		border-radius: 12rpx;
-		padding: 24rpx;
-		width: 100%;
-		text-align: center;
-
-		.title {
-			font-size: 28rpx;
-			color: #666;
-			margin-bottom: 12rpx;
-			display: block;
-		}
-
-		.content {
-			font-size: 26rpx;
-			color: #999;
-			line-height: 1.5;
-		}
-	}
-
-	.function-card {
-		background: #fff;
-		border-radius: 16rpx;
-		padding: 0 30rpx;
-		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
-
-		.button-item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 28rpx 0;
-			border-bottom: 1rpx solid #f2f3f5;
-
-			&:active {
-				background-color: #f8f8f8;
-			}
-
-			&:last-child {
-				border-bottom: none;
-			}
-
-			.button-content {
-				display: flex;
-				align-items: center;
-				flex: 1;
-			}
-
-			.icon {
-				width: 48rpx;
-				height: 48rpx;
-				margin-right: 24rpx;
-			}
-
-			.label {
-				font-size: 30rpx;
-				color: #333;
-				flex: 1;
-			}
-		}
-	}
-
-	.modal-content {
-		padding: 0 30rpx;
-		width: 90%;
-		margin: 0 auto;
-		max-height: 70vh;
-		overflow-y: auto;
-
-		/* 编辑表单区域 */
-		.edit-section {
-			padding: 20rpx 0;
-
-			.form-item {
-				margin-bottom: 40rpx;
-
-				.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;
-			}
-		}
-
-		.phone-dialog-content {
-			padding: 40rpx;
-			text-align: center;
-			font-size: 32rpx;
-
-			.phone-number {
-				font-weight: bold;
-				color: #2979ff;
-				margin-left: 10rpx;
-			}
-		}
-	}
+<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" @click="onAvatarClick"></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)">
+                <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">
+                    <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 class="edit-section">
+                    <view class="form-item">
+                        <text class="form-label">头像：</text>
+                        <view class="avatar-upload-container" @click="onAvatarClick">
+                            <view class="avatar-preview">
+                                <image 
+                                    v-if="avatarList.length > 0" 
+                                    :src="avatarList[0].url" 
+                                    mode="aspectFill" 
+                                    class="avatar-img">
+                                </image>
+                                <view v-else class="avatar-placeholder">
+                                    <u-icon name="plus" color="#c0c4cc" size="28"></u-icon>
+                                    <text class="placeholder-text">点击上传</text>
+                                </view>
+                                <view v-if="avatarList.length > 0" class="avatar-delete" @click.stop="handleAvatarDelete">
+                                    <u-icon name="close" color="#fff" size="26"></u-icon>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="upload-tip">点击上传，支持拍照或从相册选择</view>
+                    </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="120" border="bottom">
+                        </u-input>
+                        <view class="word-count">{{formData.bio.length}}/200</view>
+                    </view>
+                </view>
+            </view>
+        </u-modal>
+        <u-modal 
+            :show="showPhoneDialog" 
+            title="联系社区" 
+            confirm-text="拨打" 
+            cancel-text="取消" 
+            @confirm="callCommunityPhone"
+            @cancel="showPhoneDialog = false"
+            :closeOnClickOverlay="true"> 
+            <view class="phone-dialog-content">
+                <text>社区电话：</text>
+                <text class="phone-number">{{communityPhone}}</text>
+            </view>
+        </u-modal>
+        <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 {
+                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: '设置'
+                    },
+                    {
+                        key: 6,
+                        url: "/static/imgs/service/service_phone.png",
+                        name: '联系社区',
+                    },
+                ],
+                communityPhone: '0513-59000051',
+                showPhoneDialog: false
+            }
+        },
+        onShow() {
+            this.initData();
+        },
+        methods: {
+            // 新增：点击头像触发上传
+            onAvatarClick() {
+                if (!this.isLogin) {
+                    this.showEditModal = true;
+                    return;
+                }
+                
+                // 如果正在上传，则不处理
+                if (this.uploading) return;
+                
+                // 调用选择图片方法
+                uni.chooseImage({
+                    count: 1, // 只选一张
+                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+                    success: (res) => {
+                        // 选择成功后，获取临时文件路径
+                        const tempFilePaths = res.tempFilePaths;
+                        if (tempFilePaths && tempFilePaths.length > 0) {
+                            // 构造一个类似file对象的结构，用于handleAvatarUpload
+                            const file = {
+                                url: tempFilePaths[0]
+                            };
+                            // 调用上传方法
+                            this.handleAvatarUpload({ file });
+                        }
+                    },
+                    fail: (err) => {
+                        console.error('选择图片失败', err);
+                        uni.showToast({
+                            title: '选择图片失败',
+                            icon: 'none'
+                        });
+                    }
+                });
+            },
+            
+            // 其他方法保持不变...
+            handleCloseModal() {
+                this.showPhoneDialog = false;
+            },
+            // 初始化数据
+            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) {
+                // 显示时拼接IMAGE_BASE_URL
+                const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
+                this.userInfo = {
+                    nickName: data.name || data.nickName || '未命名用户',
+                    avatarUrl: avatarUrl,
+                    bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
+                    phone: data.phone || ''
+                };
+                // 更新显示头像
+                this.displayAvatar = this.userInfo.avatarUrl;
+                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');
+            },
+            // 处理编辑点击
+            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;
+            },
+            // 获取用户信息
+            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: '登录中...'
+                });
+                this.showEditModal = false;
+                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 {
+                    // 获取最新用户信息
+                    this.showEditModal = false;
+                    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.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 > 3 * 1024 * 1024) {
+                        throw new Error('图片大小不能超过3MB');
+                    }
+                    // 上传到服务器
+                    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(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() {
+                uni.showModal({
+                    title: '提示',
+                    content: '确定要删除当前头像吗？',
+                    confirmText: '删除',
+                    cancelText: '取消',
+                    success: (res) => {
+                        if (res.confirm) {
+                            this.avatarList = [];
+                            this.displayAvatar = '/static/imgs/index/nav.png';
+                            this.userInfo.avatarUrl = '';
+                            uni.showToast({
+                                title: '已删除',
+                                icon: 'none'
+                            });
+                        }
+                    }
+                });
+            },
+            // 提交表单
+            async handleSubmit() {
+                if (!this.isLogin) return;
+                const {
+                    name,
+                    bio
+                } = this.formData;
+                
+                let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
+                if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
+                    avatarUrl = avatarUrl.replace(IMAGE_BASE_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);
+                        this.showEditModal = false;
+                        uni.hideLoading();
+                        uni.showToast({
+                            title: '修改成功'
+                        });
+                    } 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(item) {
+                if (item.key === 6) { // 联系社区的特殊处理
+                    this.handleContactCommunity();
+                    return;
+                }
+                if (item.key === 5) { // 设置的特殊处理
+                    this.handleEditClick(); // 调用编辑用户信息的方法
+                    return;
+                }
+                if (!this.checkLogin()) {
+                    this.showEditModal = true;
+                    return;
+                }
+                if (item.pageUrl) {
+                    uni.navigateTo({
+                        url: `/pages/${item.pageUrl}/index`
+                    });
+                }
+            },
+            // 处理联系社区点击
+            handleContactCommunity() {
+                if (!this.checkLogin()) {
+                        this.showEditModal = true;
+                        return;
+                    }
+                    
+                uni.showModal({
+                    title: '联系社区',
+                    content: '是否要拨打社区电话：' + this.communityPhone,
+                    confirmText: '拨打',
+                    cancelText: '取消',
+                    success: (res) => {
+                        if (res.confirm) {
+                            this.callCommunityPhone();
+                        }
+                    }
+                });
+            },
+            // 拨打社区电话
+            callCommunityPhone() {
+                uni.makePhoneCall({
+                    phoneNumber: this.communityPhone,
+                    success: () => {
+                        console.log('拨打电话成功');
+                    },
+                    fail: (err) => {
+                        uni.showToast({
+                            title: '拨打电话失败',
+                            icon: 'none'
+                        });
+                        console.error('拨打电话失败:', err);
+                    }
+                });
+                this.showPhoneDialog = false;
+            },
+            // 检查登录状态
+            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;
+    }
+    .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;
+        }
+    }
+    .avatar-section {
+        margin-bottom: 20rpx;
+        .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);
+            }
+            .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);
+            }
+            .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-section {
+        width: 100%;
+        align-items: center;
+        text-align: center;
+        margin-bottom: 30rpx;
+        .name {
+            font-size: 36rpx;
+            font-weight: 600;
+            color: #333;
+        }
+        .phone {
+            color: #999;
+            font-size: 24rpx;
+        }
+    }
+    .description-card {
+        background: #f8f9fa;
+        border-radius: 12rpx;
+        padding: 24rpx;
+        width: 100%;
+        text-align: center;
+        .title {
+            font-size: 28rpx;
+            color: #666;
+            margin-bottom: 12rpx;
+            display: block;
+        }
+        .content {
+            font-size: 26rpx;
+            color: #999;
+            line-height: 1.5;
+        }
+    }
+    .function-card {
+        background: #fff;
+        border-radius: 16rpx;
+        padding: 0 30rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+        .button-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 28rpx 0;
+            border-bottom: 1rpx solid #f2f3f5;
+            &:active {
+                background-color: #f8f8f8;
+            }
+            &:last-child {
+                border-bottom: none;
+            }
+            .button-content {
+                display: flex;
+                align-items: center;
+                flex: 1;
+            }
+            .icon {
+                width: 48rpx;
+                height: 48rpx;
+                margin-right: 24rpx;
+            }
+            .label {
+                font-size: 30rpx;
+                color: #333;
+                flex: 1;
+            }
+        }
+    }
+    .modal-content {
+        padding: 0 30rpx;
+        width: 90%;
+        margin: 0 auto;
+        max-height: 70vh;
+        overflow-y: auto;
+        /* 编辑表单区域 */
+        .edit-section {
+            padding: 20rpx 0;
+            .form-item {
+                margin-bottom: 40rpx;
+                .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;
+                }
+            }
+        }
+        /* 授权登录区域 */
+        .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;
+            }
+        }
+        .phone-dialog-content {
+            padding: 40rpx;
+            text-align: center;
+            font-size: 32rpx;
+            .phone-number {
+                font-weight: bold;
+                color: #2979ff;
+                margin-left: 10rpx;
+            }
+        }
+    }
+    
+    // 头像上传容器
+    .avatar-upload-container {
+        width: 160rpx;
+        height: 160rpx;
+        margin: 0 auto;
+        position: relative;
+        border-radius: 8rpx;
+        overflow: hidden;
+    }
+    
+    // 头像预览区域
+    .avatar-preview {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        border-radius: 8rpx;
+        overflow: hidden;
+        background-color: #f5f7fa;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .avatar-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        .avatar-placeholder {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #c0c4cc;
+            
+            .placeholder-text {
+                font-size: 24rpx;
+                margin-top: 10rpx;
+            }
+        }
+        
+        .avatar-delete {
+            position: absolute;
+            top: -10rpx;
+            right: -10rpx;
+            width: 40rpx;
+            height: 40rpx;
+            background-color: #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);
+        }
+    }
 </style>
\ No newline at end of file

From 4022a1ebcdab0a257ffeaec40913a9f227725cec Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 6 Aug 2025 17:55:50 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=9B=B8=E5=85=B3=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue           |    8 +-
 pages/myTickets/index.vue       |   57 +-
 pages/myTicketsDetail/index.vue |   60 +-
 pages/serviceTickets/index.vue  | 1129 +++++++++++++++++--------------
 4 files changed, 718 insertions(+), 536 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index e68885b..0426f69 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -96,7 +96,7 @@
 							<text class="card-desc">维修方便便捷</text>
 							<view class="card-bg"></view>
 						</view>
-						<image class="card-icon" src="/static/imgs/index/weixiu.png"></image>
+						<image class="card-icon" src="/static/imgs/index/weixiu.png" style="width: 80rpx;height: 80rpx;bottom: 32rpx;"></image>
 					</view>
 
 					<!-- <view class="service-card large card-3" @click="goDetail('neighborList')" hover-class="card-hover">
@@ -522,13 +522,13 @@
 
 					&.card-2 {
 						.card-bg {
-							background: #ff7e7e;
-							top: -30rpx;
+							background: #5b9cf8;
+							top: -50rpx;
 							right: -30rpx;
 						}
 
 						.card-icon {
-							filter: drop-shadow(0 4rpx 8rpx rgba(255, 126, 126, 0.3));
+							filter: drop-shadow(0 4rpx 8rpx rgba(91, 156, 248, 0.3));
 						}
 					}
 
diff --git a/pages/myTickets/index.vue b/pages/myTickets/index.vue
index 4209bbe..169e143 100644
--- a/pages/myTickets/index.vue
+++ b/pages/myTickets/index.vue
@@ -42,7 +42,7 @@
 						 <view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
 					</view>
 					<view class="order-description">{{ order.title }}</view>
-					<button @click="handleAction(order)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
+					<button @click.stop="handleAction(order, $event)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
 				</view>
 			</view>
 			<!-- 空状态提示 -->
@@ -73,7 +73,7 @@
 <script>
 	// import Header from '@/components/header_common.vue';
 	import Footer from '@/components/footer_common.vue';
-	import { get, post } from '@/utils/request';
+	import { get, post,put } from '@/utils/request';
 	import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
 	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
 	export default {
@@ -116,7 +116,7 @@
 					2: '进行中',
 					3: '已完成',
 					99:'驳回',
-					98:'已删除'
+					98:'已撤回'
 				};
 				return statusMap[status] || '未知状态';
 			},
@@ -153,22 +153,41 @@
 				uni.navigateTo({ url: '/pages/serviceTickets/index' });
 			},
 			// 工单操作处理
-			handleAction(order) {
-				if (order.actionText === '撤回') {
-					uni.showModal({
-						title: '提示',
-						content: '确定要撤回这个工单吗？',
-						success: (res) => {
-							if (res.confirm) {
-								// 执行撤回逻辑
-								uni.showToast({
-									title: '工单已撤回',
-									icon: 'success'
-								});
-							}
-						}
-					});
-				}
+			handleAction(order, e) {
+			  // 阻止事件冒泡
+			  e.stopPropagation();
+			  
+			  if (order.status == 1 || order.status == 2 || order.status == 99) {
+			    uni.showModal({
+			      title: '提示',
+			      content: '确定要撤回这个工单吗？',
+			      success: (res) => {
+			        if (res.confirm) {
+			          // 执行撤回逻辑
+			          this.withdrawOrder(order.id);
+			        }
+			      }
+			    });
+			  }
+			},
+			async withdrawOrder(orderId) {
+			  try {
+			   const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
+			    if (res?.success) {
+			      uni.showToast({
+			        title: '工单已撤回',
+			        icon: 'success'
+			      });
+			      // 刷新列表
+			      this.getWorkOrderList();
+			    }
+			  } catch (err) {
+			    console.error('撤回工单失败:', err);
+			    uni.showToast({
+			      title: '撤回失败',
+			      icon: 'none'
+			    });
+			  }
 			},
 			goDetail(i){
 				uni.setStorageSync("Detail",i)
diff --git a/pages/myTicketsDetail/index.vue b/pages/myTicketsDetail/index.vue
index 340b9df..953578f 100644
--- a/pages/myTicketsDetail/index.vue
+++ b/pages/myTicketsDetail/index.vue
@@ -3,18 +3,37 @@
 		
 		<!-- 图片区域 - 编辑状态下可修改 -->
 		<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 class="img-container">
+		    <!-- 非编辑状态显示服务器图片 -->
+		    <image 
+		      class="work-order-img" 
+		      :src="`${IMAGE_BASE_URL}${detailObj.images[0]}`" 
+		      mode="widthFix"
+		      lazy-load="true"
+		      v-if="!isEditing && detailObj.images && detailObj.images.length > 0"
+		    ></image>
+		    
+		    <!-- 编辑状态显示本地选择的图片 -->
+		    <image 
+		      class="work-order-img" 
+		      :src="workOrderImg" 
+		      mode="widthFix"
+		      lazy-load="true"
+		      v-if="isEditing && workOrderImg"
+		    ></image>
+		    
+		    <!-- 没有图片时的占位 -->
+		    <view class="empty-placeholder" v-if="(!detailObj.images || detailObj.images.length === 0) && !isEditing">
+		      <u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
+		      <text class="empty-text">暂无图片</text>
+		    </view>
+		    
+		    <!-- 编辑状态的上传按钮 -->
+		    <view class="upload-btn" @click="uploadImage" v-if="isEditing">
+		      <u-icon name="camera" size="28" color="#fff"></u-icon>
+		      <text class="upload-text">{{ workOrderImg ? '更换图片' : '上传图片' }}</text>
+		    </view>
+		  </view>
 		</view>
 		
 		<!-- 标题与日期 -->
@@ -298,7 +317,22 @@
 			margin-bottom: 0;
 		}
 	}
-	
+	.empty-placeholder {
+	  width: 100%;
+	  height: 300rpx;
+	  display: flex;
+	  flex-direction: column;
+	  justify-content: center;
+	  align-items: center;
+	  background-color: #f5f7fa;
+	  border-radius: 8rpx;
+	  
+	  .empty-text {
+	    margin-top: 16rpx;
+	    font-size: 28rpx;
+	    color: #909399;
+	  }
+	}
 	/* 页面容器 */
 	.work-order-detail {
 		background-color: $bg-color;
diff --git a/pages/serviceTickets/index.vue b/pages/serviceTickets/index.vue
index be1bc58..1e318c6 100644
--- a/pages/serviceTickets/index.vue
+++ b/pages/serviceTickets/index.vue
@@ -1,516 +1,645 @@
 <template>
-	<view class="container">
-		<view class="content">
-			<!-- 选择区域 -->
-			<view class="form-item">
-				<view class="label" @click="showTypeSelect = true" style="margin-bottom: 0;">
-					<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
-					选择区域
-					<view class="select-box">
-						{{ workOrderArea || '请选择' }}
-						<u-icon name="arrow-down" color="#999" size="30"></u-icon>
-					</view>
-				</view> 
-				<u-picker 
-				     :show="showTypeSelect" 
-					 :columns="areaList" 
-					 keyName="title"
-					 @confirm="handleTypeConfirm"
-					 @cancel="showTypeSelect = false">
-				</u-picker>
-			</view>
-			
-			<!-- 工单分类 -->
-			<view class="form-item">
-				<view class="label" @click="showSelect = true" style="margin-bottom: 0;">
-					<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="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="container">
+    <view class="content">
+      <!-- 选择区域 -->
+      <view class="form-item">
+        <view class="label" @click="showTypeSelect = true" style="margin-bottom: 0;">
+          <u-icon name="list" color="#3B8CFF" size="38"></u-icon>
+          选择区域
+          <view class="select-box">
+            {{ workOrderArea || '请选择' }}
+            <u-icon name="arrow-down" color="#999" size="30"></u-icon>
+          </view>
+        </view>
+        <u-picker :show="showTypeSelect" :columns="areaList" keyName="title" @confirm="handleTypeConfirm"
+          @cancel="showTypeSelect = false">
+        </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="form-item">
+        <view class="label" @click="showSelect = true" style="margin-bottom: 0;">
+          <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="submit-button">
-				<u-button type="primary" @click="handleSubmit" shape="circle">提交工单</u-button>
-			</view>
-		</view>
-		<Footer></Footer>
-	</view>
+      <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">
+          <view class="upload-list">
+            <view class="upload-item" v-for="(item, index) in fileList" :key="index">
+              <image v-if="!item.isVideo" :src="item.url" mode="aspectFill" @click="previewImage(index)"></image>
+              <video v-else :src="item.url" controls></video>
+              <view class="delete-btn" @click="handleDelete(index)">
+                <u-icon name="close" color="#fff" size="24"></u-icon>
+              </view>
+            </view>
+            <view class="upload-btn" @click="showUploadAction" v-if="fileList.length < 8">
+              <u-icon name="plus" size="40" color="#c0c4cc"></u-icon>
+            </view>
+          </view>
+        </view>
+        <text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
+      </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>
+
+    <!-- 上传操作菜单 -->
+    <u-action-sheet 
+      :list="actionList" 
+      v-model="showActionSheet" 
+      @click="handleActionClick"
+    ></u-action-sheet>
+  </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: '',
-				workOrderArea:'',
-				workOrderAreaID:'',
-				showSelect: false,
-				showTypeSelect:false,
-				categoryList: [],
-				workOrderLocation: '',
-				expectedTime: '',
-				uploadedImages: [],
-				uploadedVideos: [],
-				videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
-				areaList:[],
-			};
-		},
-		mounted() {
-			this.getOrderList();
-	        this.getOrderTypeList();
-		},
-		methods: {
-			handleBack() {
-				uni.navigateBack({
-					delta: 1
-				});
+import Footer from '@/components/footer_common.vue';
+import { get, post } from '@/utils/request';
+import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
+import uActionSheet from 'uview-ui/components/u-action-sheet/u-action-sheet';
+
+export default {
+  components: {
+    Footer,uActionSheet
+  },
+  data() {
+    return {
+      workOrderContent: '',
+      concatName: '',
+      customerPhone: '',
+      fileList: [],
+      workOrderCategory: '',
+      workOrderCategoryID: '',
+      workOrderArea: '',
+      workOrderAreaID: '',
+      showSelect: false,
+      showTypeSelect: false,
+      categoryList: [],
+      workOrderLocation: '',
+      expectedTime: '',
+      uploadedImages: [],
+      uploadedVideos: [],
+      videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
+      areaList: [],
+      
+      // 上传相关
+      showActionSheet: false,
+      actionList: [
+        { text: '拍照', value: 'camera' },
+        { text: '从相册选择', value: 'album' }
+      ]
+    };
+  },
+  mounted() {
+    this.getOrderList();
+    this.getOrderTypeList();
+  },
+  methods: {
+    // 显示上传选项
+    showUploadAction() {
+      uni.showActionSheet({
+        itemList: ['拍照', '从相册选择'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            this.chooseMedia('camera');
+          } else {
+            this.chooseMedia('album');
+          }
+        }
+      });
+    },
+    
+    // 处理上传选项选择
+    handleActionClick(index) {
+      const action = this.actionList[index].value;
+      if (action === 'camera') {
+        this.chooseMedia('camera');
+      } else {
+        this.chooseMedia('album');
+      }
+    },
+    
+    // 选择媒体文件
+	async chooseMedia(sourceType) {
+	  try {
+	    // 1. 选择图片
+	    const res = await new Promise((resolve, reject) => {
+	      uni.chooseImage({
+	        count: 8 - this.fileList.length,
+	        sourceType: [sourceType === 'camera' ? 'camera' : 'album'],
+	        success: resolve,
+	        fail: reject
+	      });
+	    });
+	    
+	    // 2. 添加到预览列表
+	    const newFiles = res.tempFilePaths.map(url => ({
+	      url,
+	      isVideo: false,
+	      status: 'uploading'
+	    }));
+	    this.fileList = [...this.fileList, ...newFiles];
+	    
+	    // 3. 逐个上传文件
+	    for (const file of newFiles) {
+	      await this.uploadFile(file);
+	    }
+	    
+	  } catch (err) {
+	    console.error('选择图片失败:', err);
+	    uni.showToast({ title: '选择图片失败', icon: 'none' });
+	  }
+	},
+	_chooseMedia(sourceType) {
+	  uni.chooseMedia({
+	    count: 8 - this.fileList.length,
+	    mediaType: ['image', 'video'],
+	    sourceType: [sourceType],
+	    success: async (res) => {
+	      // 添加到预览列表
+	      const newFiles = res.tempFiles.map(file => ({
+	        url: file.tempFilePath,
+	        isVideo: file.fileType === 'video',
+	        status: 'uploading' // 新增上传状态
+	      }));
+	      this.fileList = [...this.fileList, ...newFiles];
+	      
+	      // 逐个上传文件
+	      for (const file of newFiles) {
+	        await this.uploadFile(file); // 等待上传完成
+	      }
+	    }
+	  });
+	},
+    
+    // 上传文件
+    uploadFiles(files) {
+      files.forEach(file => {
+        this.uploadFile(file).then(res => {
+          const index = this.fileList.findIndex(item => item.url === file.url);
+          if (index !== -1) {
+            this.$set(this.fileList, index, {
+              ...file,
+              status: 'success',
+              serverUrl: res
+            });
+            
+            if (file.isVideo) {
+              this.uploadedVideos.push(res.replace(BASE_URL, ''));
+            } else {
+              this.uploadedImages.push(res.replace(BASE_URL, ''));
+            }
+          }
+        }).catch(err => {
+          const index = this.fileList.findIndex(item => item.url === file.url);
+          if (index !== -1) {
+            this.$set(this.fileList, index, {
+              ...file,
+              status: 'failed'
+            });
+          }
+          console.error('上传失败:', err);
+        });
+      });
+    },
+    
+    // 单个文件上传
+	async uploadFile(file) {
+	  try {
+		const res = await new Promise((resolve, reject) => {
+		  uni.uploadFile({
+			url: `${BASE_URL}/api/v1/upload`,
+			filePath: file.url,
+			name: 'file',
+			header: { 
+			  'Authorization': `Bearer ${uni.getStorageSync('token')}`,
+			  'Content-Type': 'multipart/form-data'
 			},
-
-			// 文件上传相关方法
-			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);
+			success: (uploadRes) => {
+			  try {
+				const data = JSON.parse(uploadRes.data);
+				if (data.success) {
+				  resolve(data.data); // 使用服务器返回的完整URL
 				} else {
-					const imageIndex = this.uploadedImages.indexOf(file.url);
-					if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
+				  reject(data.message || '上传失败');
 				}
-
-				this.fileList.splice(index, 1);
+			  } catch (e) {
+				reject('解析响应失败');
+			  }
 			},
+			fail: (err) => reject(err)
+		  });
+		});
 
-			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,
-					orderAreaId:this.workOrderAreaID,
-					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'
-					});
-				}
-			},
-			
-			resetForm() {
-				this.workOrderContent = '';
-				this.concatName = '';
-				this.customerPhone = '';
-				this.workOrderCategoryID = '';
-				this.workOrderCategory = '';
-				this.workOrderLocation = '';
-				this.fileList = [];
-				this.uploadedImages = [];
-				this.uploadedVideos = [];
-				this.workOrderArea = '';
-				this.workOrderAreaID = '';
-			},
-
-			handleConfirm(e) {
-				this.workOrderCategory = e.value[0].label;
-				this.workOrderCategoryID = e.value[0].id;
-				this.showSelect = false;
-			},
-			
-			handleTypeConfirm(e) {
-				this.workOrderArea = e.value[0].title;
-				this.workOrderAreaID = e.value[0].id;
-				this.showTypeSelect = 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'
-					});
-				}
-			},
-			
-			// 获取工作区域
-			async getOrderTypeList(){
-				try {
-					const res = await get('/api/v1/apps/work-order-area');
-					if (res?.success) {
-						this.areaList = [
-							[...res.data]
-						]
-					}
-				} catch (err) {
-					console.error('获取工作区域失败:', err);
-					uni.showToast({
-						title: '获取工作区域失败',
-						icon: 'none'
-					});
-				}
-			}
+		// 更新文件状态
+		const index = this.fileList.findIndex(f => f.url === file.url);
+		if (index !== -1) {
+		  this.$set(this.fileList, index, {
+			...file,
+			status: 'success',
+			serverUrl: res // 存储服务器返回的URL
+		  });
+		  
+		  // 添加到提交数组
+		  if (file.isVideo) {
+			this.uploadedVideos.push(res);
+		  } else {
+			this.uploadedImages.push(res);
+		  }
 		}
-	};
+		
+	  } catch (err) {
+		console.error('上传失败:', err);
+		const index = this.fileList.findIndex(f => f.url === file.url);
+		if (index !== -1) {
+		  this.$set(this.fileList, index, { 
+			...file, 
+			status: 'failed',
+			error: err.message || err 
+		  });
+		}
+		uni.showToast({ 
+		  title: `上传失败: ${err.message || err}`, 
+		  icon: 'none' 
+		});
+	  }
+	},
+    
+    // 预览图片
+    previewImage(index) {
+      const images = this.fileList
+        .filter(item => !item.isVideo)
+        .map(item => item.url);
+      
+      uni.previewImage({
+        current: index,
+        urls: images
+      });
+    },
+    
+    // 删除文件
+    handleDelete(index) {
+      const file = this.fileList[index];
+      
+      if (file.serverUrl) {
+        if (file.isVideo) {
+          const videoIndex = this.uploadedVideos.indexOf(file.serverUrl.replace(BASE_URL, ''));
+          if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
+        } else {
+          const imageIndex = this.uploadedImages.indexOf(file.serverUrl.replace(BASE_URL, ''));
+          if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
+        }
+      }
+      
+      this.fileList.splice(index, 1);
+    },
+
+    // 其他原有方法保持不变...
+    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,
+        orderAreaId: this.workOrderAreaID,
+        address: this.workOrderLocation,
+        images: this.uploadedImages,
+        videos: this.uploadedVideos,
+      };
+
+      console.log('提交数据:', submitData);
+
+      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'
+        });
+      }
+    },
+
+    resetForm() {
+      this.workOrderContent = '';
+      this.concatName = '';
+      this.customerPhone = '';
+      this.workOrderCategoryID = '';
+      this.workOrderCategory = '';
+      this.workOrderLocation = '';
+      this.fileList = [];
+      this.uploadedImages = [];
+      this.uploadedVideos = [];
+      this.workOrderArea = '';
+      this.workOrderAreaID = '';
+    },
+
+    handleConfirm(e) {
+      this.workOrderCategory = e.value[0].label;
+      this.workOrderCategoryID = e.value[0].id;
+      this.showSelect = false;
+    },
+
+    handleTypeConfirm(e) {
+      this.workOrderArea = e.value[0].title;
+      this.workOrderAreaID = e.value[0].id;
+      this.showTypeSelect = 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'
+        });
+      }
+    },
+
+    async getOrderTypeList() {
+      try {
+        const res = await get('/api/v1/apps/work-order-area');
+        if (res?.success) {
+          this.areaList = [
+            [...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;
-				}
-			}
-		}
-	}
+.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;
+        
+        .upload-list {
+          display: flex;
+          flex-wrap: wrap;
+          margin: -5rpx;
+          
+          .upload-item, .upload-btn {
+            width: 160rpx;
+            height: 160rpx;
+            margin: 5rpx;
+            position: relative;
+            background: #f8f8f8;
+            border-radius: 8rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            
+            image, video {
+              width: 100%;
+              height: 100%;
+            }
+            
+            .delete-btn {
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 40rpx;
+              height: 40rpx;
+              background: rgba(0, 0, 0, 0.5);
+              border-radius: 0 0 0 8rpx;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          
+          .upload-btn {
+            border: 1rpx dashed #c0c4cc;
+          }
+        }
+      }
+
+      .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

From 9f052c8cc85c168a9545daa09ee172f69da089df Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Wed, 6 Aug 2025 18:05:09 +0800
Subject: [PATCH 3/3] 1

---
 pages/myTicketsDetail/index.vue | 431 ++++++++++++++++----------------
 1 file changed, 209 insertions(+), 222 deletions(-)

diff --git a/pages/myTicketsDetail/index.vue b/pages/myTicketsDetail/index.vue
index 953578f..f118b7d 100644
--- a/pages/myTicketsDetail/index.vue
+++ b/pages/myTicketsDetail/index.vue
@@ -1,41 +1,5 @@
 <template>
 	<view class="work-order-detail">
-		
-		<!-- 图片区域 - 编辑状态下可修改 -->
-		<view class="image-area card">
-		  <view class="img-container">
-		    <!-- 非编辑状态显示服务器图片 -->
-		    <image 
-		      class="work-order-img" 
-		      :src="`${IMAGE_BASE_URL}${detailObj.images[0]}`" 
-		      mode="widthFix"
-		      lazy-load="true"
-		      v-if="!isEditing && detailObj.images && detailObj.images.length > 0"
-		    ></image>
-		    
-		    <!-- 编辑状态显示本地选择的图片 -->
-		    <image 
-		      class="work-order-img" 
-		      :src="workOrderImg" 
-		      mode="widthFix"
-		      lazy-load="true"
-		      v-if="isEditing && workOrderImg"
-		    ></image>
-		    
-		    <!-- 没有图片时的占位 -->
-		    <view class="empty-placeholder" v-if="(!detailObj.images || detailObj.images.length === 0) && !isEditing">
-		      <u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
-		      <text class="empty-text">暂无图片</text>
-		    </view>
-		    
-		    <!-- 编辑状态的上传按钮 -->
-		    <view class="upload-btn" @click="uploadImage" v-if="isEditing">
-		      <u-icon name="camera" size="28" color="#fff"></u-icon>
-		      <text class="upload-text">{{ workOrderImg ? '更换图片' : '上传图片' }}</text>
-		    </view>
-		  </view>
-		</view>
-		
 		<!-- 标题与日期 -->
 		<view class="title-area card">
 			<view class="title-wrap">
@@ -50,7 +14,6 @@
 		<view class="content card">
 			<view class="label">
 				<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>
@@ -58,7 +21,6 @@
 			</view>
 			<view class="label">
 				<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>
@@ -66,7 +28,6 @@
 			</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>
@@ -74,7 +35,6 @@
 			</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>
@@ -87,6 +47,65 @@
 				/>
 			</view>
 		</view>
+		<!-- 图片区域 - 支持多张展示和编辑 -->
+		<view class="image-area card">
+		  <view class="img-container">
+		    <!-- 非编辑状态显示服务器图片 -->
+		    <scroll-view 
+		      class="image-scroll" 
+		      scroll-x="true" 
+		      v-if="!isEditing && detailObj.images && detailObj.images.length > 0"
+		    >
+		      <view class="image-list">
+		        <image 
+		          class="work-order-img" 
+		          v-for="(img, index) in detailObj.images" 
+		          :key="index"
+		          :src="`${IMAGE_BASE_URL}${img}`" 
+		          mode="aspectFill"
+		          lazy-load="true"
+		          @click="previewImage(index)"
+		        ></image>
+		      </view>
+		    </scroll-view>
+		    
+		    <!-- 编辑状态显示本地选择的图片 -->
+		    <scroll-view 
+		      class="image-scroll" 
+		      scroll-x="true" 
+		      v-if="isEditing && localImages.length > 0"
+		    >
+		      <view class="image-list">
+		        <view class="image-item" v-for="(img, index) in localImages" :key="index">
+		          <image 
+		            class="work-order-img" 
+		            :src="img" 
+		            mode="aspectFill"
+		            lazy-load="true"
+		          ></image>
+		          <view class="delete-btn" @click="removeImage(index)">
+		            <u-icon name="close" size="20" color="#fff"></u-icon>
+		          </view>
+		        </view>
+		      </view>
+		    </scroll-view>
+		    
+		    <!-- 没有图片时的占位 -->
+		    <view class="empty-placeholder" v-if="(!detailObj.images || detailObj.images.length === 0) && !isEditing">
+		      <u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
+		      <text class="empty-text">暂无图片</text>
+		    </view>
+		    
+		    <!-- 编辑状态的上传按钮 -->
+		    <view class="upload-btn-container" v-if="isEditing">
+		      <view class="upload-btn" @click="uploadImage">
+		        <u-icon name="camera" size="28" color="#fff"></u-icon>
+		        <text class="upload-text">{{ localImages.length > 0 ? '添加更多' : '上传图片' }}</text>
+		      </view>
+		      <text class="upload-tip" v-if="localImages.length > 0">最多可上传9张</text>
+		    </view>
+		  </view>
+		</view>
 		
 		<!-- 操作按钮 -->
 		<view class="btn-group">
@@ -124,44 +143,85 @@
 				formatTime,
 				isEditing: false,  // 编辑状态
 				isLoading: false,  // 加载状态
-				workOrderImg: '',  // 编辑时的图片
+				localImages: [],   // 本地选择的图片数组
 				// 编辑状态下的临时数据
 				editLabel: '',
 				editAddress: '',
 				editTitle: '',
-				editContactName: '', // 新增：联系人
-				editContactPhone: '', // 新增：联系电话
+				editContactName: '',
+				editContactPhone: '',
 				detailObj: {},
-				tempImagePath: ''  // 临时存储上传的图片路径
+				tempImagePaths: []  // 临时存储上传的图片路径
 			};
 		},
 		mounted() {
 			let obj = uni.getStorageSync("Detail");
 			this.detailObj = {...obj};
-			this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
+			// 初始化本地图片数组
+			if (this.detailObj.images && this.detailObj.images.length > 0) {
+				this.localImages = this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`);
+			}
 			// 初始化新增字段
 			this.editContactName = this.detailObj.concatName || '';
 			this.editContactPhone = this.detailObj.customerPhone || '';
 		},
 		methods: {
-			// 上传图片到服务器
+			// 预览图片
+			previewImage(index) {
+				uni.previewImage({
+					current: index,
+					urls: this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`)
+				});
+			},
+			
+			// 上传图片
 			uploadImage() {
+				const maxCount = 9 - this.localImages.length;
+				if (maxCount <= 0) {
+					uni.showToast({
+						title: '最多只能上传9张图片',
+						icon: 'none'
+					});
+					return;
+				}
+				
 				uni.chooseImage({
-					count: 1,
-					success: async (res) => {
-						const tempFilePaths = res.tempFilePaths[0];
-						this.tempImagePath = tempFilePaths;
-						this.workOrderImg = tempFilePaths;
-						uni.showToast({
-							title: '图片已更换',
-							icon: 'success'
-						});
+					count: maxCount,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						this.tempImagePaths = [...this.tempImagePaths, ...res.tempFilePaths];
+						this.localImages = [...this.localImages, ...res.tempFilePaths];
 					}
 				});
 			},
 			
+			// 删除图片
+			removeImage(index) {
+				this.localImages.splice(index, 1);
+				// 如果是新上传的图片，也从tempImagePaths中移除
+				if (index >= this.localImages.length - this.tempImagePaths.length) {
+					this.tempImagePaths.splice(index - (this.localImages.length - this.tempImagePaths.length), 1);
+				}
+			},
+			
 			// 上传图片到服务器
-			async uploadImageToServer(filePath) {
+			async uploadImagesToServer() {
+				const uploadedPaths = [];
+				for (const filePath of this.tempImagePaths) {
+					try {
+						const path = await this.uploadSingleImage(filePath);
+						uploadedPaths.push(path);
+					} catch (error) {
+						console.error('图片上传失败:', error);
+						throw error;
+					}
+				}
+				return uploadedPaths;
+			},
+			
+			// 上传单张图片
+			uploadSingleImage(filePath) {
 				return new Promise((resolve, reject) => {
 					uni.uploadFile({
 						url: `${BASE_URL}/api/v1/upload`,
@@ -174,7 +234,7 @@
 							try {
 								const res = JSON.parse(uploadRes.data);
 								if (res && res.success) {
-									resolve(res.data); // 只返回路径部分
+									resolve(res.data);
 								} else {
 									reject(new Error(res.message || '上传失败'));
 								}
@@ -207,9 +267,16 @@
 						let images = this.detailObj.images;
 						
 						// 如果有新图片上传
-						if (this.tempImagePath) {
-							const uploadedPath = await this.uploadImageToServer(this.tempImagePath);
-							images = [uploadedPath]; // 替换为新的图片
+						if (this.tempImagePaths.length > 0) {
+							const uploadedPaths = await this.uploadImagesToServer();
+							// 合并原有图片和新上传的图片
+							const originalPaths = this.localImages
+								.filter(img => img.startsWith(IMAGE_BASE_URL))
+								.map(img => img.replace(IMAGE_BASE_URL, ''));
+							images = [...originalPaths, ...uploadedPaths];
+						} else if (this.localImages.length === 0) {
+							// 用户删除了所有图片
+							images = [];
 						}
 						
 						const requestData = {
@@ -218,8 +285,8 @@
 							title: this.editTitle,
 							images: images,
 							status: 1,
-							concatName: this.editContactName, // 新增：联系人
-							customerPhone: this.editContactPhone // 新增：联系电话
+							concatName: this.editContactName,
+							customerPhone: this.editContactPhone
 						};
 						
 						const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, requestData);
@@ -237,7 +304,7 @@
 							});
 							
 							this.isEditing = false;
-							this.tempImagePath = ''; // 清空临时图片路径
+							this.tempImagePaths = []; // 清空临时图片路径
 						} else {
 							uni.showToast({
 								title: res.message || '修改失败',
@@ -259,9 +326,14 @@
 			// 撤回/取消操作
 			async handleWithdraw() {
 				if (this.isEditing) {
-					// 取消编辑状态，不发送请求
+					// 取消编辑状态，恢复原始数据
 					this.isEditing = false;
-					this.tempImagePath = '';
+					this.tempImagePaths = [];
+					if (this.detailObj.images && this.detailObj.images.length > 0) {
+						this.localImages = this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`);
+					} else {
+						this.localImages = [];
+					}
 					return;
 				}
 				
@@ -286,7 +358,7 @@
 
 <style lang="scss" scoped>
 	/* 基础变量优化 */
-	$primary-color: #409EFF; // 更舒适的蓝色
+	$primary-color: #409EFF;
 	$success-color: #67C23A;
 	$warning-color: #F56C6C;
 	$text-color: #303133;
@@ -317,102 +389,6 @@
 			margin-bottom: 0;
 		}
 	}
-	.empty-placeholder {
-	  width: 100%;
-	  height: 300rpx;
-	  display: flex;
-	  flex-direction: column;
-	  justify-content: center;
-	  align-items: center;
-	  background-color: #f5f7fa;
-	  border-radius: 8rpx;
-	  
-	  .empty-text {
-	    margin-top: 16rpx;
-	    font-size: 28rpx;
-	    color: #909399;
-	  }
-	}
-	/* 页面容器 */
-	.work-order-detail {
-		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;
-		}
-		
-		.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 {
@@ -425,37 +401,76 @@
 			border-radius: 8rpx;
 			overflow: hidden;
 			background-color: $bg-color;
+			min-height: 200rpx;
+		}
+		
+		.image-scroll {
+			width: 100%;
+			white-space: nowrap;
+		}
+		
+		.image-list {
+			display: inline-flex;
+			gap: 16rpx;
+		}
+		
+		.image-item {
+			position: relative;
+			width: 200rpx;
+			height: 200rpx;
+			border-radius: 8rpx;
+			overflow: hidden;
 		}
 		
 		.work-order-img {
-			width: 100%;
+			width: 200rpx;
+			height: 200rpx;
 			border-radius: 8rpx;
-			transition: $transition;
-			// 加载占位效果
-			&:empty {
-				height: 300rpx;
-				background-color: $bg-color;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: $light-text;
+		}
+		
+		.delete-btn {
+			position: absolute;
+			right: 8rpx;
+			top: 8rpx;
+			width: 36rpx;
+			height: 36rpx;
+			background: rgba(0, 0, 0, 0.5);
+			border-radius: 50%;
+			@include flex-center;
+			justify-content: center;
+		}
+		
+		.empty-placeholder {
+			width: 100%;
+			height: 300rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background-color: #f5f7fa;
+			border-radius: 8rpx;
+			
+			.empty-text {
+				margin-top: 16rpx;
+				font-size: 28rpx;
+				color: #909399;
 			}
 		}
 		
+		.upload-btn-container {
+			margin-top: 20rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 10rpx;
+		}
+		
 		.upload-btn {
-			position: absolute;
-			right: 16rpx;
-			bottom: 16rpx;
-			background: rgba(0, 0, 0, 0.5);
-			padding: 8rpx 16rpx;
+			background: $primary-color;
+			padding: 12rpx 24rpx;
 			border-radius: 24rpx;
 			@include flex-center;
 			transition: $transition;
-			cursor: pointer;
-			
-			&:hover {
-				background: rgba(0, 0, 0, 0.7);
-			}
 			
 			.upload-text {
 				color: #fff;
@@ -463,9 +478,20 @@
 				margin-left: 6rpx;
 			}
 		}
+		
+		.upload-tip {
+			font-size: 24rpx;
+			color: $light-text;
+		}
+	}
+	
+	/* 其他样式保持不变 */
+	.work-order-detail {
+		background-color: $bg-color;
+		min-height: 100vh;
+		padding: 0 30rpx 40rpx;
 	}
 	
-	/* 标题区域优化 */
 	.title-area {
 		@include card;
 		display: flex;
@@ -477,11 +503,6 @@
 			width: 100%;
 		}
 		
-		.title-icon {
-			margin-right: 12rpx;
-			flex-shrink: 0;
-		}
-		
 		.title {
 			font-size: 34rpx;
 			color: $text-color;
@@ -495,17 +516,12 @@
 			padding-top: 4rpx;
 		}
 		
-		.date-icon {
-			margin-right: 6rpx;
-		}
-		
 		.date {
 			font-size: 26rpx;
 			color: $light-text;
 		}
 	}
 	
-	/* 内容区域优化 */
 	.content {
 		@include card;
 		
@@ -532,10 +548,6 @@
 				flex-shrink: 0;
 			}
 			
-			.label-name u-icon {
-				margin-right: 8rpx;
-			}
-			
 			& > text {
 				font-size: 28rpx;
 				color: $text-color;
@@ -583,7 +595,6 @@
 		}
 	}
 	
-	/* 按钮区域优化 */
 	.btn-group {
 		display: flex;
 		gap: 24rpx;
@@ -608,28 +619,4 @@
 			}
 		}
 	}
-	
-	/* 适配小屏幕 */
-	@media (max-width: 375px) {
-		$font-base: 28rpx;
-		
-		.header {
-			padding: 18rpx;
-			
-			.avatar {
-				width: 80rpx;
-				height: 80rpx;
-			}
-		}
-		
-		.btn-group {
-			padding: 20rpx 5rpx;
-			
-			.action-btn {
-				height: 80rpx;
-				line-height: 80rpx;
-				font-size: 28rpx;
-			}
-		}
-	}
 </style>
\ No newline at end of file