From 62235ef6fb5955e757cbce6d91226529c22d75c6 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 10:40:48 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E8=81=94=E7=B3=BB=E7=A4=BE=E5=8C=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mine/index.vue | 1740 ++++++++++++++++++++++--------------------
 1 file changed, 898 insertions(+), 842 deletions(-)

diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 7f8aee2..4231e67 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -1,843 +1,899 @@
-<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.pageUrl)">
-				<view class="button-content">
-					<image class="icon" :src='item.url' mode="aspectFit"></image>
-					<text class="label">{{item.name}}</text>
-				</view>
-				<u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
-			</view>
-		</view>
-
-		<!-- 修改用户信息弹窗 -->
-		<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
-			:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
-			cancel-color="#606266">
-			<view class="modal-content">
-				<!-- 未登录时显示授权按钮 -->
-				<view v-if="!isLogin" class="auth-section">
-					<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>
-
-		<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: '设置',
-						pageUrl: 'serviceNoticeList'
-					},
-					{
-						key: 6,
-						url: "/static/imgs/service/service_phone.png",
-						name: '联系社区',
-					},
-				],
-			}
-		},
-		onShow() {
-			this.initData();
-		},
-		methods: {
-			// 初始化数据
-			async initData() {
-				const token = uni.getStorageSync('token');
-				if (token) {
-					try {
-						const res = await get('/api/v1/app_auth/mine');
-						if (res && res.success) {
-							uni.setStorageSync('userInfo', res.data);
-							this.updateUserInfo(res.data);
-							this.isLogin = true;
-						} else {
-							this.clearUserData();
-						}
-					} catch (err) {
-						console.error('获取用户信息失败:', err);
-						this.clearUserData();
-					}
-				} else {
-					this.clearUserData();
-				}
-			},
-
-			// 更新用户信息
-			updateUserInfo(data) {
-				this.userInfo = {
-					nickName: data.name || data.nickName || '未命名用户',
-					avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
-					bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
-					phone: data.phone || ''
-				};
-
-				// 更新显示头像
-				this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
-
-				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 {
-					// 获取最新用户信息
-					const res = await get('/api/v1/app_auth/mine');
-					if (res && res.success) {
-						uni.setStorageSync('userInfo', res.data);
-						this.updateUserInfo(res.data);
-						this.isLogin = true;
-						this.showEditModal = false;
-						this.showPhoneButton = false;
-						uni.showToast({
-							title: '登录成功'
-						});
-					} else {
-						throw new Error(res.message || '获取用户信息失败');
-					}
-				} catch (err) {
-					uni.showToast({
-						title: '登录失败: ' + err.message,
-						icon: 'none'
-					});
-					console.error('登录完成处理失败:', err);
-				}
-			},
-
-			// 上传头像
-			async handleAvatarUpload(event) {
-				if (!this.isLogin) {
-					this.showEditModal = true;
-					return;
-				}
-
-				const {
-					file
-				} = event;
-				if (!file || !file.url) return;
-
-				this.uploading = true;
-
-				try {
-					// 检查文件大小
-					const fileInfo = await new Promise((resolve, reject) => {
-						uni.getFileInfo({
-							filePath: file.url,
-							success: resolve,
-							fail: reject
-						});
-					});
-
-					if (fileInfo.size > 2 * 1024 * 1024) {
-						throw new Error('图片大小不能超过2MB');
-					}
-
-					// 上传到服务器
-					const avatarUrl = await this.uploadAvatar(file.url);
-
-					// 更新用户信息
-					await this.updateUserAvatar(avatarUrl);
-
-					uni.showToast({
-						title: '头像上传成功'
-					});
-				} catch (error) {
-					console.error('头像上传失败:', error);
-					uni.showToast({
-						title: '头像上传失败: ' + error.message,
-						icon: 'none'
-					});
-				} finally {
-					this.uploading = false;
-				}
-			},
-
-			// 上传头像到服务器
-			uploadAvatar(filePath) {
-				return new Promise((resolve, reject) => {
-					uni.uploadFile({
-						url: `${BASE_URL}/api/v1/upload`,
-						filePath: filePath,
-						name: 'file',
-						header: {
-							'Authorization': `Bearer ${uni.getStorageSync('token')}`
-						},
-						success: (uploadRes) => {
-							try {
-								const res = JSON.parse(uploadRes.data);
-								if (res && res.success) {
-									resolve(`${IMAGE_BASE_URL}${res.data}`);
-								} else {
-									reject(new Error(res.message || '上传失败'));
-								}
-							} catch (e) {
-								reject(new Error('解析响应失败'));
-							}
-						},
-						fail: (err) => {
-							reject(new Error('上传失败: ' + JSON.stringify(err)));
-						}
-					});
-				});
-			},
-
-			// 上传头像到服务器
-			async updateUserAvatar(avatarUrl) {
-				try {
-					// 1. 提交修改请求
-					await post('/api/v1/app_auth/bind', {
-						avatar: avatarUrl,
-						introduce: this.formData.bio,
-						name: this.formData.name
-					});
-
-					// 2. 获取最新用户信息
-					const res = await get('/api/v1/app_auth/mine');
-					if (res && res.success) {
-						// 3. 更新本地存储和页面数据
-						uni.setStorageSync('userInfo', res.data);
-						this.updateUserInfo(res.data);
-					} else {
-						throw new Error(res.message || '获取用户信息失败');
-					}
-				} catch (err) {
-					console.error('更新头像失败:', err);
-					throw err;
-				}
-			},
-
-			// 删除头像
-			handleAvatarDelete() {
-				this.avatarList = [];
-				this.displayAvatar = '/static/imgs/index/nav.png';
-				this.userInfo.avatarUrl = '';
-			},
-
-			// 提交表单
-			async handleSubmit() {
-				if (!this.isLogin) return;
-
-				const {
-					name,
-					bio
-				} = this.formData;
-				const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
-
-				if (!name) {
-					uni.showToast({
-						title: '请输入姓名',
-						icon: 'none'
-					});
-					return;
-				}
-
-				uni.showLoading({
-					title: '提交中...'
-				});
-
-				try {
-					// 1. 提交修改请求
-					await post('/api/v1/app_auth/bind', {
-						avatar: avatarUrl,
-						introduce: bio,
-						name: name
-					});
-
-					// 2. 获取最新用户信息
-					const res = await get('/api/v1/app_auth/mine');
-					if (res && res.success) {
-						// 3. 更新本地存储和页面数据
-						uni.setStorageSync('userInfo', res.data);
-						this.updateUserInfo(res.data);
-
-						uni.hideLoading();
-						uni.showToast({
-							title: '修改成功'
-						});
-						this.showEditModal = false;
-					} else {
-						throw new Error(res.message || '获取用户信息失败');
-					}
-				} catch (err) {
-					uni.hideLoading();
-					uni.showToast({
-						title: '修改失败: ' + (err.message || '未知错误'),
-						icon: 'none'
-					});
-					console.error('修改失败:', err);
-				}
-			},
-
-			// 取消修改
-			handleCancel() {
-				this.showEditModal = false;
-			},
-
-			// 跳转页面
-			goPage(page) {
-				if (!this.checkLogin()) {
-					this.showEditModal = true;
-					return;
-				}
-
-				if (page) {
-					uni.navigateTo({
-						url: `/pages/${page}/index`
-					});
-				}
-			},
-
-			// 检查登录状态
-			checkLogin() {
-				const token = uni.getStorageSync('token');
-				if (!token) {
-					uni.showToast({
-						title: '请先登录',
-						icon: 'none'
-					});
-					return false;
-				}
-				return true;
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.profile-page {
-		background-color: #f5f7fa;
-		padding: 20rpx;
-		min-height: 100vh;
-		box-sizing: border-box;
-		padding-bottom: 120rpx;
-	}
-
-	.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;
-			}
-		}
-	}
+<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">
+			<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: '设置',
+						pageUrl: 'serviceNoticeList'
+					},
+					{
+						key: 6,
+						url: "/static/imgs/service/service_phone.png",
+						name: '联系社区',
+					},
+				],
+				communityPhone: '0513-59000051',
+				showPhoneDialog: false
+			}
+		},
+		onShow() {
+			this.initData();
+		},
+		methods: {
+			// 初始化数据
+			async initData() {
+				const token = uni.getStorageSync('token');
+				if (token) {
+					try {
+						const res = await get('/api/v1/app_auth/mine');
+						if (res && res.success) {
+							uni.setStorageSync('userInfo', res.data);
+							this.updateUserInfo(res.data);
+							this.isLogin = true;
+						} else {
+							this.clearUserData();
+						}
+					} catch (err) {
+						console.error('获取用户信息失败:', err);
+						this.clearUserData();
+					}
+				} else {
+					this.clearUserData();
+				}
+			},
+
+			// 更新用户信息
+			updateUserInfo(data) {
+				this.userInfo = {
+					nickName: data.name || data.nickName || '未命名用户',
+					avatarUrl: data.avatar || data.avatarUrl || '/static/imgs/index/nav.png',
+					bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
+					phone: data.phone || ''
+				};
+
+				// 更新显示头像
+				this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
+
+				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 {
+					// 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+						this.isLogin = true;
+						this.showEditModal = false;
+						this.showPhoneButton = false;
+						uni.showToast({
+							title: '登录成功'
+						});
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					uni.showToast({
+						title: '登录失败: ' + err.message,
+						icon: 'none'
+					});
+					console.error('登录完成处理失败:', err);
+				}
+			},
+
+			// 上传头像
+			async handleAvatarUpload(event) {
+				if (!this.isLogin) {
+					this.showEditModal = true;
+					return;
+				}
+
+				const {
+					file
+				} = event;
+				if (!file || !file.url) return;
+
+				this.uploading = true;
+
+				try {
+					// 检查文件大小
+					const fileInfo = await new Promise((resolve, reject) => {
+						uni.getFileInfo({
+							filePath: file.url,
+							success: resolve,
+							fail: reject
+						});
+					});
+
+					if (fileInfo.size > 2 * 1024 * 1024) {
+						throw new Error('图片大小不能超过2MB');
+					}
+
+					// 上传到服务器
+					const avatarUrl = await this.uploadAvatar(file.url);
+
+					// 更新用户信息
+					await this.updateUserAvatar(avatarUrl);
+
+					uni.showToast({
+						title: '头像上传成功'
+					});
+				} catch (error) {
+					console.error('头像上传失败:', error);
+					uni.showToast({
+						title: '头像上传失败: ' + error.message,
+						icon: 'none'
+					});
+				} finally {
+					this.uploading = false;
+				}
+			},
+
+			// 上传头像到服务器
+			uploadAvatar(filePath) {
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: `${BASE_URL}/api/v1/upload`,
+						filePath: filePath,
+						name: 'file',
+						header: {
+							'Authorization': `Bearer ${uni.getStorageSync('token')}`
+						},
+						success: (uploadRes) => {
+							try {
+								const res = JSON.parse(uploadRes.data);
+								if (res && res.success) {
+									resolve(`${IMAGE_BASE_URL}${res.data}`);
+								} else {
+									reject(new Error(res.message || '上传失败'));
+								}
+							} catch (e) {
+								reject(new Error('解析响应失败'));
+							}
+						},
+						fail: (err) => {
+							reject(new Error('上传失败: ' + JSON.stringify(err)));
+						}
+					});
+				});
+			},
+
+			// 上传头像到服务器
+			async updateUserAvatar(avatarUrl) {
+				try {
+					// 1. 提交修改请求
+					await post('/api/v1/app_auth/bind', {
+						avatar: avatarUrl,
+						introduce: this.formData.bio,
+						name: this.formData.name
+					});
+
+					// 2. 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						// 3. 更新本地存储和页面数据
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					console.error('更新头像失败:', err);
+					throw err;
+				}
+			},
+
+			// 删除头像
+			handleAvatarDelete() {
+				this.avatarList = [];
+				this.displayAvatar = '/static/imgs/index/nav.png';
+				this.userInfo.avatarUrl = '';
+			},
+
+			// 提交表单
+			async handleSubmit() {
+				if (!this.isLogin) return;
+
+				const {
+					name,
+					bio
+				} = this.formData;
+				const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
+
+				if (!name) {
+					uni.showToast({
+						title: '请输入姓名',
+						icon: 'none'
+					});
+					return;
+				}
+
+				uni.showLoading({
+					title: '提交中...'
+				});
+
+				try {
+					// 1. 提交修改请求
+					await post('/api/v1/app_auth/bind', {
+						avatar: avatarUrl,
+						introduce: bio,
+						name: name
+					});
+
+					// 2. 获取最新用户信息
+					const res = await get('/api/v1/app_auth/mine');
+					if (res && res.success) {
+						// 3. 更新本地存储和页面数据
+						uni.setStorageSync('userInfo', res.data);
+						this.updateUserInfo(res.data);
+
+						uni.hideLoading();
+						uni.showToast({
+							title: '修改成功'
+						});
+						this.showEditModal = false;
+					} else {
+						throw new Error(res.message || '获取用户信息失败');
+					}
+				} catch (err) {
+					uni.hideLoading();
+					uni.showToast({
+						title: '修改失败: ' + (err.message || '未知错误'),
+						icon: 'none'
+					});
+					console.error('修改失败:', err);
+				}
+			},
+
+			// 取消修改
+			handleCancel() {
+				this.showEditModal = false;
+			},
+
+			// 跳转页面
+			goPage(item) {
+				if (item.key === 6) { // 联系社区的特殊处理
+					this.handleContactCommunity();
+					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;
+				}
+
+				this.showPhoneDialog = true;
+			},
+
+			// 拨打社区电话
+			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;
+			}
+		}
+	}
 </style>
\ No newline at end of file

From 7a3a2d50daf59dd1b19bcd848b2fce843afa8bf4 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 12:03:59 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=92=E5=8A=A9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E8=AF=84=E8=AE=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue          |   4 +-
 pages/neighborDetail/index.vue | 702 ++++++++++++++++++---------------
 2 files changed, 383 insertions(+), 323 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2683ef8..8656f72 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -87,7 +87,7 @@
 							<view class="card-bg"></view>
 						</view>
 						<image class="card-icon" src="/static/imgs/index/bangzhu.png"
-							style="width: 76rpx;height: 76rpx;"></image>
+							style="width: 76rpx;height: 76rpx; bottom: 32rpx;" ></image>
 					</view>
 
 					<view class="service-card card-2" @click="goDetail('serviceTickets')" hover-class="card-hover">
@@ -503,7 +503,7 @@
 						width: 90rpx;
 						height: 90rpx;
 						right: 24rpx;
-						bottom: 24rpx;
+						bottom: 20rpx;
 						transition: all 0.3s ease;
 					}
 
diff --git a/pages/neighborDetail/index.vue b/pages/neighborDetail/index.vue
index 8867a8b..631c108 100644
--- a/pages/neighborDetail/index.vue
+++ b/pages/neighborDetail/index.vue
@@ -55,8 +55,7 @@
 								<!-- 只在一级评论显示折叠按钮 -->
 								<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
 									@click="toggleFold(comment.id)">
-									{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
-									{{ getChildCount(comment) }}条回复
+									{{ getChildCount(comment) }}条回复{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
 								</text>
 							</view>
 						</view>
@@ -84,234 +83,269 @@
 	</view>
 </template>
 
-<script>
-	import {
-		get,
-		post
-	} from '@/utils/request';
-	import {
-		formatTime
-	} from '@/utils/timeFormat';
-	// import uniIcons from '@/components/uni-icons/uni-icons.vue';
-
-	export default {
-		components: {
-			// uniIcons
-		},
-		data() {
-			return {
-				Id: '',
-				flatComments: [],
-				newComment: "",
-				replyingTo: null,
-				postData: {
-					histories: []
-				},
-				loading: false,
-				error: '',
-				submitting: false,
-				foldedComments: [], // 存储被折叠的评论ID
-				showLoadMore: false, // 是否显示加载更多
-				currentPage: 1,
-				pageSize: 10,
-			};
-		},
-		onLoad(options) {
-			if (options && options.Id) {
-				this.Id = options.Id;
-				this.getDetail();
-			} else {
-				this.error = '缺少内容ID';
-				this.loading = false;
-			}
-		},
-		methods: {
-			// 图片预览
-			previewImage(index) {
-				if (!this.postData.images || !this.postData.images.length) return;
-
-				uni.previewImage({
-					current: index,
-					urls: this.postData.images
-				});
-			},
-
-			// 检查评论是否有子评论
-			hasChildren(comment) {
-				return comment.children && comment.children.length > 0;
-			},
-
-			// 获取子评论数量
-			getChildCount(comment) {
-				if (!this.hasChildren(comment)) return 0;
-				return comment.children.length;
-			},
-
-			// 切换折叠状态
-			toggleFold(commentId) {
-				const index = this.foldedComments.indexOf(commentId);
-				if (index === -1) {
-					this.foldedComments.push(commentId);
-				} else {
-					this.foldedComments.splice(index, 1);
-				}
-				this.updateFlatComments();
-			},
-			
-			// 更新平铺评论列表（处理折叠逻辑）
-			updateFlatComments() {
-				const flattenWithFold = (comments, level = 0, parentFolded = false) => {
-					return comments.reduce((arr, comment) => {
-						// 只有一级评论才检查折叠状态
-						const isFolded = level === 0 && this.foldedComments.includes(comment.id);
-						const currentFolded = parentFolded || isFolded;
-
-						if (!parentFolded) {
-							arr.push({
-								...comment,
-								level,
-								isFolded
-							});
-						}
-
-						// 如果是一级评论且被折叠，则不显示子评论
-						if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
-							arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
-						}
-
-						return arr;
-					}, []);
-				};
-
-				this.flatComments = flattenWithFold(this.postData.histories || []);
-			},
-			// 加载更多评论
-			loadMoreComments() {
-				this.currentPage++;
-				// 这里应该调用API获取更多评论，示例中简化处理
-				this.getDetail();
-			},
-
-			// 获取帖子详情
-			async getDetail() {
-				try {
-					this.loading = true;
-					const res = await get(`/api/v1/apps/home/reciprocities/${this.Id}`, {
-						page: this.currentPage,
-						pageSize: this.pageSize
-					});
-					if (!res?.success) throw new Error(res?.message || '获取详情失败');
-
-					if (this.currentPage === 1) {
-						this.postData = res.data;
-					} else {
-						// 合并评论数据
-						this.postData.histories = [...this.postData.histories, ...res.data.histories];
-					}
-
-					this.updateFlatComments();
-					this.showLoadMore = (res.data.histories.length >= this.pageSize);
-				} catch (err) {
-					console.error('获取详情失败:', err);
-					this.error = '加载失败，请重试';
-				} finally {
-					this.loading = false;
-				}
-			},
-
-			formatTime(isoTime) {
-				if (!isoTime) return '';
-				return formatTime(isoTime); // 使用统一的格式化方法
-			},
-
-			// 计算总评论数
-			getTotalComments() {
-				const count = (comments) => {
-					return comments.reduce((total, comment) => {
-						return total + 1 + (comment.children ? count(comment.children) : 0);
-					}, 0);
-				};
-				return count(this.postData.histories || []);
-			},
-
-			// 提交评论/回复
-			async submitComment() {
-				const content = this.newComment.trim();
-				if (!content || this.submitting) return;
-
-				try {
-					this.submitting = true;
-					const requestData = {
-						content: content,
-						reciprocityId: this.postData.id,
-						rootHistoryId: this.replyingTo || 0
-					};
-
-					const response = await post(
-						'/api/v1/app_auth/reciprocities/send',
-						requestData
-					);
-
-					if (response.success) {
-						this.newComment = '';
-						this.replyingTo = null;
-						uni.showToast({
-							title: '评论成功',
-							icon: 'success',
-							duration: 1500
-						});
-						setTimeout(() => {
-							this.currentPage = 1;
-							this.getDetail();
-						}, 500);
-					} else {
-						throw new Error('评论提交失败，请重试');
-					}
-				} catch (err) {
-					console.error('评论失败:', err);
-					uni.showToast({
-						title: err.message || '评论失败，请重试',
-						icon: 'none',
-						duration: 2000
-					});
-				} finally {
-					this.submitting = false;
-				}
-			},
-
-			// 处理回复按钮点击
-			handleReply(commentId) {
-				this.replyingTo = commentId;
-				this.$nextTick(() => {
-					uni.createSelectorQuery().select('.comment-input')
-						.fields({
-							focus: true
-						}, () => {}).exec();
-				});
-			},
-
-			// 取消回复
-			cancelReply() {
-				this.replyingTo = null;
-				this.newComment = '';
-			},
-
-			// 获取被回复人的用户名
-			getReplyUsername(commentId) {
-				const findUser = (comments) => {
-					for (const c of comments) {
-						if (c.id === commentId) return c.pusherName;
-						if (c.children && c.children.length) {
-							const user = findUser(c.children);
-							if (user) return user;
-						}
-					}
-					return "";
-				};
-				return findUser(this.postData.histories);
-			}
-		}
-	};
+<script>
+  import {
+    get,
+    post
+  } from '@/utils/request';
+  import {
+    formatTime
+  } from '@/utils/timeFormat';
+  // import uniIcons from '@/components/uni-icons/uni-icons.vue';
+
+  export default {
+    components: {
+      // uniIcons
+    },
+    data() {
+      return {
+        Id: '',
+        flatComments: [],
+        newComment: "",
+        replyingTo: null,
+        postData: {
+          histories: []
+        },
+        loading: false,
+        error: '',
+        submitting: false,
+        foldedComments: [], // 存储被折叠的评论ID
+        showLoadMore: false, // 是否显示加载更多
+        currentPage: 1,
+        pageSize: 10,
+      };
+    },
+    onLoad(options) {
+      if (options && options.Id) {
+        this.Id = options.Id;
+        this.getDetail();
+      } else {
+        this.error = '缺少内容ID';
+        this.loading = false;
+      }
+    },
+    methods: {
+      // 检查用户是否已登录
+      checkLogin() {
+        const token = uni.getStorageSync('token'); // 假设token存储在本地
+        return !!token;
+      },
+      
+      // 跳转到登录页面
+      goToLogin() {
+        uni.showModal({
+          title: '提示',
+          content: '请先登录再进行评论',
+          confirmText: '前往登录',
+          success: (res) => {
+            if (res.confirm) {
+              uni.navigateTo({
+                url: '/pages/mine/index' // 替换为实际的个人中心页面路径
+              });
+            }
+          }
+        });
+      },
+      
+      // 图片预览
+      previewImage(index) {
+        if (!this.postData.images || !this.postData.images.length) return;
+
+        uni.previewImage({
+          current: index,
+          urls: this.postData.images
+        });
+      },
+
+      // 检查评论是否有子评论
+      hasChildren(comment) {
+        return comment.children && comment.children.length > 0;
+      },
+
+      // 获取子评论数量
+      getChildCount(comment) {
+        if (!this.hasChildren(comment)) return 0;
+        return comment.children.length;
+      },
+
+      // 切换折叠状态
+      toggleFold(commentId) {
+        const index = this.foldedComments.indexOf(commentId);
+        if (index === -1) {
+          this.foldedComments.push(commentId);
+        } else {
+          this.foldedComments.splice(index, 1);
+        }
+        this.updateFlatComments();
+      },
+      
+      // 更新平铺评论列表（处理折叠逻辑）
+      updateFlatComments() {
+        const flattenWithFold = (comments, level = 0, parentFolded = false) => {
+          return comments.reduce((arr, comment) => {
+            // 只有一级评论才检查折叠状态
+            const isFolded = level === 0 && this.foldedComments.includes(comment.id);
+            const currentFolded = parentFolded || isFolded;
+
+            if (!parentFolded) {
+              arr.push({
+                ...comment,
+                level,
+                isFolded
+              });
+            }
+
+            // 如果是一级评论且被折叠，则不显示子评论
+            if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
+              arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
+            }
+
+            return arr;
+          }, []);
+        };
+
+        this.flatComments = flattenWithFold(this.postData.histories || []);
+      },
+      // 加载更多评论
+      loadMoreComments() {
+        this.currentPage++;
+        // 这里应该调用API获取更多评论，示例中简化处理
+        this.getDetail();
+      },
+
+      // 获取帖子详情
+      async getDetail() {
+        try {
+          this.loading = true;
+          const res = await get(`/api/v1/apps/home/reciprocities/${this.Id}`, {
+            page: this.currentPage,
+            pageSize: this.pageSize
+          });
+          if (!res?.success) throw new Error(res?.message || '获取详情失败');
+
+          if (this.currentPage === 1) {
+            this.postData = res.data;
+          } else {
+            // 合并评论数据
+            this.postData.histories = [...this.postData.histories, ...res.data.histories];
+          }
+
+          this.updateFlatComments();
+          this.showLoadMore = (res.data.histories.length >= this.pageSize);
+        } catch (err) {
+          console.error('获取详情失败:', err);
+          this.error = '加载失败，请重试';
+        } finally {
+          this.loading = false;
+        }
+      },
+
+      formatTime(isoTime) {
+        if (!isoTime) return '';
+        return formatTime(isoTime); // 使用统一的格式化方法
+      },
+
+      // 计算总评论数
+      getTotalComments() {
+        const count = (comments) => {
+          return comments.reduce((total, comment) => {
+            return total + 1 + (comment.children ? count(comment.children) : 0);
+          }, 0);
+        };
+        return count(this.postData.histories || []);
+      },
+
+      // 提交评论/回复
+      async submitComment() {
+        // 检查用户是否已登录
+        if (!this.checkLogin()) {
+          this.goToLogin();
+		  this.newComment = "";
+          return;
+        }
+        
+        const content = this.newComment.trim();
+        if (!content || this.submitting) return;
+
+        try {
+          this.submitting = true;
+          const requestData = {
+            content: content,
+            reciprocityId: this.postData.id,
+            rootHistoryId: this.replyingTo || ""
+          };
+
+          const response = await post(
+            '/api/v1/app_auth/reciprocities/send',
+            requestData
+          );
+
+          if (response.success) {
+            this.newComment = '';
+            this.replyingTo = null;
+            uni.showToast({
+              title: '评论成功',
+              icon: 'success',
+              duration: 1500
+            });
+            setTimeout(() => {
+              this.currentPage = 1;
+              this.getDetail();
+            }, 500);
+          } else {
+            throw new Error('评论提交失败，请重试');
+          }
+        } catch (err) {
+          console.error('评论失败:', err);
+          uni.showToast({
+            title: err.message || '评论失败，请重试',
+            icon: 'none',
+            duration: 2000
+          });
+        } finally {
+          this.submitting = false;
+        }
+      },
+
+      // 处理回复按钮点击
+      handleReply(commentId) {
+        // 检查用户是否已登录
+        if (!this.checkLogin()) {
+          this.goToLogin();
+          return;
+        }
+        
+        this.replyingTo = commentId;
+        this.$nextTick(() => {
+          uni.createSelectorQuery().select('.comment-input')
+            .fields({
+              focus: true
+            }, () => {}).exec();
+        });
+      },
+
+      // 取消回复
+      cancelReply() {
+        this.replyingTo = null;
+        this.newComment = '';
+      },
+
+      // 获取被回复人的用户名
+      getReplyUsername(commentId) {
+        const findUser = (comments) => {
+          for (const c of comments) {
+            if (c.id === commentId) return c.pusherName;
+            if (c.children && c.children.length) {
+              const user = findUser(c.children);
+              if (user) return user;
+            }
+          }
+          return "";
+        };
+        return findUser(this.postData.histories);
+      }
+    }
+  };
 </script>
 <style lang="scss">
   /* 使用SCSS增强样式能力 */
@@ -322,33 +356,35 @@
   $border-color: #e2e8f0; // 更柔和的边框色
   $bg-color: #f7fafc; // 浅灰色背景
   $comment-bg: #ffffff; // 白色评论背景
-  $shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); // 小阴影
-  $shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); // 中等阴影
-  $radius-lg: 12px; // 大圆角
-  $radius-md: 8px; // 中圆角
-  $radius-sm: 4px; // 小圆角
+  $shadow-sm: 0 1rpx 3rpx rgba(0, 0, 0, 0.05); // 小阴影
+  $shadow-md: 0 4rpx 6rpx rgba(0, 0, 0, 0.08); // 中等阴影
+  $radius-lg: 24rpx; // 大圆角
+  $radius-md: 16rpx; // 中圆角
+  $radius-sm: 8rpx; // 小圆角
   $transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
 
   .content {
-    padding: 16px;
+    padding: 32rpx;
     background-color: $bg-color;
+    /* 增加底部内边距，确保内容不被输入框遮挡 */
+    padding-bottom: 240rpx;
     min-height: 100vh;
-    padding-bottom: 120px;
+    box-sizing: border-box;
   }
 
   /* 主帖样式优化 */
   .post-container {
     background-color: white;
     border-radius: $radius-lg;
-    padding: 24px;
-    margin-bottom: 20px;
+    padding: 48rpx;
+    margin-bottom: 40rpx;
     box-shadow: $shadow-sm;
     transition: $transition;
-    border: 1px solid $border-color;
+    border: 1rpx solid $border-color;
 
     &:hover {
       box-shadow: $shadow-md;
-      transform: translateY(-1px);
+      transform: translateY(-1rpx);
     }
 
     &:active {
@@ -359,15 +395,15 @@
   .post-header {
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 40rpx;
   }
 
   .avatar {
-    width: 48px;
-    height: 48px;
+    width: 96rpx;
+    height: 96rpx;
     border-radius: 50%;
-    margin-right: 16px;
-    border: 2px solid white;
+    margin-right: 32rpx;
+    border: 2rpx solid white;
     box-shadow: $shadow-sm;
     background-color: #f5f5f5;
     transition: $transition;
@@ -384,34 +420,34 @@
   }
 
   .username {
-    font-size: 16px;
+    font-size: 32rpx;
     font-weight: 600;
     color: $text-color;
     line-height: 1.5;
   }
 
   .time {
-    font-size: 13px;
+    font-size: 26rpx;
     color: $light-text;
     line-height: 1.5;
   }
 
   .post-content {
     .title {
-      font-size: 18px;
+      font-size: 36rpx;
       font-weight: 600;
       color: #1a1a1a;
-      margin-bottom: 16px;
+      margin-bottom: 32rpx;
       display: block;
       line-height: 1.6;
       letter-spacing: -0.01em;
     }
 
     .content-text {
-      font-size: 15px;
+      font-size: 30rpx;
       color: $text-color;
       line-height: 1.7;
-      margin-bottom: 20px;
+      margin-bottom: 40rpx;
       display: block;
       word-break: break-word;
     }
@@ -420,8 +456,8 @@
   .images {
     display: flex;
     flex-wrap: wrap;
-    gap: 12px;
-    margin-top: 16px;
+    gap: 24rpx;
+    margin-top: 32rpx;
   }
 
   .post-image {
@@ -443,17 +479,17 @@
 
     &.single-img {
       width: 100%;
-      height: 300px;
+      height: 600rpx;
     }
 
     &.double-img {
-      width: calc(50% - 6px);
-      height: 180px;
+      width: calc(50% - 12rpx);
+      height: 360rpx;
     }
 
     &.multi-img {
-      width: calc(33.33% - 8px);
-      height: 120px;
+      width: calc(33.33% - 16rpx);
+      height: 240rpx;
     }
   }
 
@@ -461,27 +497,27 @@
   .comments-container {
     background-color: white;
     border-radius: $radius-lg;
-    padding: 0 20px;
-    margin-bottom: 16px;
+    padding: 0 40rpx;
+    margin-bottom: 32rpx;
     box-shadow: $shadow-sm;
-    border: 1px solid $border-color;
+    border: 1rpx solid $border-color;
   }
 
   .comments-title {
-    font-size: 16px;
+    font-size: 32rpx;
     font-weight: 600;
     color: $text-color;
-    padding: 20px 0;
-    border-bottom: 1px solid $border-color;
+    padding: 40rpx 0;
+    border-bottom: 1rpx solid $border-color;
     position: relative;
 
     &::after {
       content: "";
       position: absolute;
       left: 0;
-      bottom: -1px;
-      width: 40px;
-      height: 2px;
+      bottom: -1rpx;
+      width: 80rpx;
+      height: 4rpx;
       background-color: $primary-color;
     }
   }
@@ -493,26 +529,27 @@
 
   .comment-item {
     position: relative;
-    padding: 20px 0;
-    border-bottom: 1px solid $border-color;
+    padding: 20rpx 0;
     transition: $transition;
-
-    &:hover {
-      background-color: rgba($primary-light, 0.3);
+    margin-bottom: 8rpx;
+    
+    &:not(:last-child) {
+      border-bottom: 1rpx solid rgba($border-color, 0.5);
     }
 
-    &:last-child {
-      border-bottom: none;
+    &:hover {
+      background-color: rgba($primary-light, 0.2);
+      border-radius: $radius-md;
     }
   }
 
   .comment-level-indicator {
     position: absolute;
-    top: 50px;
-    width: 2px;
-    background-color: #e5e5e5;
-    left: calc(30px + var(--indent) - 20px);
-    height: calc(100% - 50px);
+    top: 70rpx;
+    width: 4rpx;
+    background-color: rgba($border-color, 0.5);
+    left: calc(60rpx + var(--indent) - 40rpx);
+    height: calc(100% - 70rpx);
   }
 
   .comment-content-wrapper {
@@ -522,13 +559,13 @@
   }
 
   .comment-avatar {
-    width: 36px;
-    height: 36px;
+    width: 64rpx;
+    height: 64rpx;
     border-radius: 50%;
-    margin-right: 12px;
+    margin-right: 24rpx;
     flex-shrink: 0;
     background-color: #f5f5f5;
-    border: 1px solid $border-color;
+    border: 1rpx solid $border-color;
     transition: $transition;
 
     &:hover {
@@ -538,50 +575,52 @@
 
   .comment-main {
     flex: 1;
+    padding-top: 0;
   }
 
   .comment-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: 8rpx;
   }
 
   .comment-username {
-    font-size: 14px;
+    font-size: 28rpx;
     color: $text-color;
     font-weight: 500;
   }
 
   .comment-time {
-    font-size: 12px;
+    font-size: 24rpx;
     color: $light-text;
   }
 
   .comment-text {
-    font-size: 14px;
+    font-size: 28rpx;
     color: $text-color;
     line-height: 1.6;
-    margin-bottom: 12px;
-    padding: 4px 0;
+    margin-bottom: 12rpx;
+    padding: 8rpx 0;
     word-break: break-word;
   }
 
   .comment-actions {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 4px 0;
+    gap: 32rpx;
+    padding: 4rpx 0;
   }
 
   .reply-btn,
   .fold-btn {
-    font-size: 13px;
+    font-size: 24rpx;
     color: $primary-color;
-    padding: 4px 8px;
+    padding: 6rpx 12rpx;
     border-radius: $radius-sm;
     transition: $transition;
     cursor: pointer;
+    background-color: rgba($primary-color, 0.05);
 
     &:hover {
       background-color: rgba($primary-color, 0.1);
@@ -594,6 +633,11 @@
 
   .fold-btn {
     color: $light-text;
+    background-color: rgba($light-text, 0.05);
+    
+    &:hover {
+      background-color: rgba($light-text, 0.1);
+    }
   }
 
   /* 评论输入框样式优化 */
@@ -603,9 +647,9 @@
     left: 0;
     right: 0;
     background-color: white;
-    padding: 16px;
-    border-top: 1px solid $border-color;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
+    padding: 24rpx 32rpx;
+    border-top: 1rpx solid $border-color;
+    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
     z-index: 100;
   }
 
@@ -613,11 +657,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 12px;
+    padding: 16rpx 24rpx;
     background-color: $primary-light;
     border-radius: $radius-md;
-    margin-bottom: 12px;
-    font-size: 13px;
+    margin-bottom: 16rpx;
+    font-size: 26rpx;
   }
 
   .replying-text {
@@ -627,29 +671,30 @@
 
   .cancel-reply {
     color: $primary-color;
-    padding: 4px 8px;
+    padding: 8rpx 16rpx;
     border-radius: $radius-sm;
     cursor: pointer;
     transition: $transition;
+    background-color: rgba($primary-color, 0.1);
 
     &:hover {
-      background-color: rgba($primary-color, 0.1);
+      background-color: rgba($primary-color, 0.2);
     }
   }
 
   .input-wrapper {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16rpx;
   }
 
   .comment-input {
     flex: 1;
-    height: 48px;
-    padding: 0 16px;
-    font-size: 14px;
-    border: 1px solid $border-color;
-    border-radius: 24px;
+    height: 88rpx;
+    padding: 0 32rpx;
+    font-size: 28rpx;
+    border: 1rpx solid $border-color;
+    border-radius: 48rpx;
     background-color: #f5f5f5;
     transition: $transition;
     outline: none;
@@ -657,7 +702,7 @@
     &:focus {
       border-color: $primary-color;
       background-color: #fff;
-      box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
+      box-shadow: 0 0 0 4rpx rgba($primary-color, 0.1);
     }
 
     &::placeholder {
@@ -666,20 +711,20 @@
   }
 
   .send-btn {
-    min-width: 80px;
-    height: 48px;
+    min-width: 140rpx;
+    height: 88rpx;
     background-color: $primary-color;
     color: white;
     border: none;
-    border-radius: 24px;
-    font-size: 14px;
+    border-radius: 48rpx;
+    font-size: 28rpx;
     font-weight: 500;
     transition: $transition;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 16px;
+    padding: 0 32rpx;
 
     &:hover {
       background-color: darken($primary-color, 5%);
@@ -704,9 +749,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 16px 0;
+    padding: 32rpx 0;
     color: $light-text;
-    font-size: 14px;
+    font-size: 28rpx;
     cursor: pointer;
     transition: $transition;
 
@@ -715,13 +760,13 @@
     }
 
     text {
-      margin-right: 8px;
+      margin-right: 16rpx;
     }
   }
 
   /* 添加一些动画效果 */
   @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
+    from { opacity: 0; transform: translateY(20rpx); }
     to { opacity: 1; transform: translateY(0); }
   }
 
@@ -732,15 +777,30 @@
   /* 响应式调整 */
   @media (max-width: 480px) {
     .content {
-      padding: 12px;
+      padding: 24rpx;
+      padding-bottom: 220rpx;
     }
     
     .post-container {
-      padding: 16px;
+      padding: 32rpx;
     }
     
     .comment-input-container {
-      padding: 12px;
+      padding: 24rpx;
+    }
+    
+    .comment-item {
+      padding: 16rpx 0;
+      margin-bottom: 8rpx;
+    }
+    
+    .comment-avatar {
+      width: 56rpx;
+      height: 56rpx;
+    }
+    
+    .comment-text {
+      font-size: 26rpx;
     }
   }
 </style>
\ No newline at end of file

From e459fd740a6ea293cb3f18509c70fc591af23254 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 16:40:33 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E5=91=A8=E8=BE=B9=E6=9C=8D=E5=8A=A1?=
 =?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/aroundDetail/index.vue | 586 ++++++++++++++++++++++++++++++-----
 pages/neighbor/index.vue     | 407 ++++++++++++------------
 2 files changed, 718 insertions(+), 275 deletions(-)

diff --git a/pages/aroundDetail/index.vue b/pages/aroundDetail/index.vue
index dc8d5d4..308b21f 100644
--- a/pages/aroundDetail/index.vue
+++ b/pages/aroundDetail/index.vue
@@ -1,19 +1,123 @@
 <template>
-  <view class="kfc-container">
-    <!-- 顶部商品图片 -->
-	<view class="container-img">
-		<image
-		  class="kfc-bucket-img" 
-		  :src="detailInfo.storeCover" 
-		></image>
-	</view>
+  <view class="container">
+    <!-- 商品图片（带轻微圆角和阴影） -->
+    <view class="cover-container">
+      <image 
+        class="store-cover" 
+        :src="detailInfo.storeCover"
+        mode="aspectFill"
+      ></image>
+      <view class="cover-overlay"></view>
+    </view>
     
-    <!-- 店铺信息模块 -->
-    <view class="store-info">
-      <text class="store-name">{{ detailInfo.storeName }}</text>
-      <view class="business-hours">营业时间：<text>{{ detailInfo.openAt}}</text></view>
-      <view class="address">地址：<text>{{ detailInfo.storeAddress }}</text></view>
-      <view class="distance">距您{{ local }}米</view>
+    <!-- 店铺信息卡片 -->
+    <view class="store-card">
+      <view class="store-header">
+        <text class="store-name">{{ detailInfo.storeName }}</text>
+      </view>
+	  <!-- 价格和距离合并一行 -->
+	  <view class="price-distance-row">
+	    <view class="price-tag" v-if="detailInfo.price !== undefined">
+	      {{ detailInfo.price > 0 ? '¥' + detailInfo.price : '免费' }}
+	    </view>
+	    <view class="distance-badge">
+	      <u-icon name="map" color="#fff" size="24"></u-icon>
+	      <text>{{ formatDistance(local) }}</text>
+	    </view>
+	  </view>
+      
+      <!-- 标签展示 -->
+      <view class="tags-container" v-if="detailInfo.labels && detailInfo.labels.length">
+        <view class="tag" v-for="(tag, index) in detailInfo.labels" :key="index">
+          <u-icon name="tags" size="20" color="#8dbafc" style="margin-right: 6rpx;"></u-icon>
+          {{ tag }}
+        </view>
+      </view>
+      
+      <view class="divider dotted"></view>
+      
+      <view class="info-grid">
+        <view class="info-item">
+          <u-icon name="map" color="#8dbafc" size="36"></u-icon>
+          <view class="info-content">
+            <text class="info-label">详细地址</text>
+            <text class="info-value">{{ detailInfo.storeAddress }}</text>
+          </view>
+        </view>
+        
+        <view class="info-item" v-if="detailInfo.openAt">
+          <u-icon name="clock" color="#8dbafc" size="32"></u-icon>
+          <view class="info-content">
+            <text class="info-label">开放时间</text>
+            <text class="info-value">{{ detailInfo.openAt }}</text>
+          </view>
+        </view>
+		
+		<view class="info-item" v-if="detailInfo.concatPhone">
+		  <u-icon name="phone" color="#8dbafc" size="32"></u-icon>
+		  <view class="info-content">
+		    <text class="info-label">联系电话</text>
+		    <text class="info-value">{{ detailInfo.concatPhone }}</text>
+		  </view>
+		</view>
+        
+        <view class="info-item" v-if="detailInfo.content">
+          <u-icon name="info-circle" color="#8dbafc" size="36"></u-icon>
+          <view class="info-content">
+            <text class="info-label">详情介绍</text>
+            <text class="info-value">{{ detailInfo.content }}</text>
+          </view>
+        </view>
+        
+        <view class="info-item" v-if="detailInfo.remark">
+          <u-icon name="chat-fill" color="#8dbafc" size="36"></u-icon>
+          <view class="info-content">
+            <text class="info-label">备注信息</text>
+            <text class="info-value">{{ detailInfo.remark }}</text>
+          </view>
+        </view>
+        
+        <view class="info-item" v-if="detailInfo.link">
+          <u-icon name="link" color="#8dbafc" size="36"></u-icon>
+          <view class="info-content">
+            <text class="info-label">相关链接</text>
+            <text class="info-value">{{ detailInfo.link }}</text>
+          </view>
+        </view>
+      </view>
+      
+      <view class="divider dotted"></view>
+      
+	  <!-- 详情图片部分 -->
+	  <view class="detail-section" v-if="detailInfo.imgs && detailInfo.imgs.length">
+	    <text class="section-title">
+	      <u-icon name="photo-fill" color="#8dbafc" size="32" style="margin-right: 12rpx;"></u-icon>
+	      环境展示
+	    </text>
+	    <view class="image-grid">
+	      <image 
+	        class="detail-image"
+	        v-for="(img, index) in detailInfo.imgs"
+	        :key="index"
+	        :src="IMAGE_BASE_URL + img"
+	        mode="aspectFill"
+	        @click="previewImage(index)"
+	        lazy-load
+	      ></image>
+	    </view>
+	  </view>
+      
+      <!-- 地图导航按钮 -->
+      <view class="action-buttons">
+        <button class="nav-button" @click="openMap">
+          <u-icon name="map-fill" color="#fff" size="28"></u-icon>
+          <text>导航前往</text>
+        </button>
+        <button class="share-button" @click="handleShare">
+          <u-icon name="share-square" color="#8dbafc" size="28"></u-icon>
+          <text>分享</text>
+        </button>
+      </view>
     </view>
   </view>
 </template>
@@ -22,90 +126,416 @@
 import { get, post } from '@/utils/request';
 import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
 import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
+
 export default {
   data() {
     return {
-	  formatTime,
-	  IMAGE_BASE_URL,
-	  Id:null,
-      detailInfo: {},
-	  local:null,
+      formatTime,
+      IMAGE_BASE_URL,
+      Id: null,
+      defaultCover: '/static/images/default-store-cover.png',
+      detailInfo: {
+        storeName: '',
+        storeCover: '',
+        storeAddress: '',
+        openAt: '',
+        content: '',
+        labels: [],
+        remark: '',
+        detailImages: [],
+        id: '',
+        createdAt: '',
+        updatedAt: '',
+        deletedAt: 0,
+        createdId: '',
+        deletedId: '',
+        typeId: '',
+        longitude: '',
+        latitude: '',
+        price: 0,
+        sequence: 0,
+        link: '',
+        status: 1
+      },
+      local: null,
+    }
+  },
+  computed: {
+    statusText() {
+      const statusMap = {
+        1: '营业中',
+        2: '已关闭',
+        3: '即将开业',
+        0: '未知状态'
+      };
+      return statusMap[this.detailInfo.status] || `状态: ${this.detailInfo.status}`;
+    },
+    statusClass() {
+      const statusMap = {
+        1: 'status-open',
+        2: 'status-closed',
+        3: 'status-soon'
+      };
+      return statusMap[this.detailInfo.status] || 'status-default';
+    },
+    statusIcon() {
+      const iconMap = {
+        1: 'home-fill',
+        2: 'close-circle-fill',
+        3: 'clock-fill'
+      };
+      return iconMap[this.detailInfo.status] || 'question-circle-fill';
     }
   },
   onLoad(options) { 
-  	if (options && options.Id && options.local)  { 
-  		this.Id = options.Id;
-		this.local = options.local;
-  	}
+    if (options && options.Id && options.local) { 
+      this.Id = options.Id;
+      this.local = options.local;
+    }
   },
-  mounted(){
-	  this.getAroundDetail();
+  mounted() {
+    this.getAroundDetail();
   },
   methods: {
-	async getAroundDetail(){
-		try {
-			const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
-			if (!res || !res.success) {
-				throw new Error('获取详情失败');
-			}
-			res.data.storeCover = IMAGE_BASE_URL + res.data.storeCover;
-		    this.detailInfo = {...res.data};
-		} catch (err) {
-			console.error('获取详情失败:', err);
-		}
-		
-	}
+    formatDistance(distance) {
+      if (!distance) return '未知距离';
+      if (distance < 1000) {
+        return `${distance}米`;
+      } else {
+        return `${(distance / 1000).toFixed(1)}公里`;
+      }
+    },
+    
+    async getAroundDetail() {
+      try {
+        const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
+        if (!res || !res.success) {
+          throw new Error('获取详情失败');
+        }
+        
+        if (res.data.storeCover) {
+          res.data.storeCover = res.data.storeCover.startsWith('http') ? res.data.storeCover : IMAGE_BASE_URL + res.data.storeCover;
+        }
+        
+        this.detailInfo = {...this.detailInfo, ...res.data};
+      } catch (err) {
+        console.error('获取详情失败:', err);
+        uni.showToast({
+          title: '获取详情失败',
+          icon: 'none'
+        });
+      }
+    },
+    
+    openMap() {
+      const { latitude, longitude, storeName, storeAddress } = this.detailInfo;
+      if (latitude && longitude) {
+        uni.openLocation({
+          latitude: Number(latitude),
+          longitude: Number(longitude),
+          name: storeName,
+          address: storeAddress,
+          success: () => {
+            console.log('打开地图成功');
+          },
+          fail: (err) => {
+            console.error('打开地图失败:', err);
+            uni.showToast({
+              title: '打开地图失败',
+              icon: 'none'
+            });
+          }
+        });
+      } else {
+        uni.showToast({
+          title: '暂无位置信息',
+          icon: 'none'
+        });
+      }
+    },
+    
+    previewImage(index) {
+      if (!this.detailInfo.detailImages || !this.detailInfo.detailImages.length) return;
+      
+      uni.previewImage({
+        current: index,
+        urls: this.detailInfo.detailImages.map(img => img.startsWith('http') ? img : IMAGE_BASE_URL + img)
+      });
+    },
+    
+    handleShare() {
+      uni.showActionSheet({
+        itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
+        success: (res) => {
+          uni.showToast({
+            title: `已选择: ${res.tapIndex === 0 ? '微信' : res.tapIndex === 1 ? '朋友圈' : '复制链接'}`,
+            icon: 'none'
+          });
+        }
+      });
+    }
   }
 }
 </script>
 
-
 <style lang="scss" scoped>
-// 定义变量，便于统一修改和维护
-$primary-color: #999;
-$title-size: 36rpx;
-$text-size: 26rpx;
-$spacing: 30rpx;
-$border-radius: 10rpx;
+$primary-color: #8dbafc;
+$secondary-color: #00A699;
+$dark-color: #2D2D2D;
+$gray-color: #767676;
+$light-gray: #F7F7F7;
+$border-color: #EBEBEB;
+$success-color: #52c41a;
+$warning-color: #faad14;
+$danger-color: #ff4d4f;
 
-.kfc-container {
-  padding: 10px;
+$border-radius: 24rpx;
+$spacing: 32rpx;
+$card-padding: 40rpx;
+$shadow-light: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+$shadow-medium: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
+
+.container {
+  background-color: $light-gray;
+  min-height: 100vh;
+  padding-bottom: 80rpx;
   
-  .container-img{
-	  max-width: 750rpx;
-	  height: 500rpx;
-	  // 图片样式
-	  .kfc-bucket-img {
-	    width: 100%;
-		height: 100%;
-	    border-radius: $border-radius;
-	  }
-  }
-  
-  
-  
-  // 店铺信息样式
-  .store-info {
-    margin-top: $spacing;
+  .cover-container {
+    width: 100%;
+    height: 500rpx;
+    position: relative;
+    overflow: hidden;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     
-    .store-name {
-      font-size: $title-size;
-      font-weight: bold;
-      //margin-bottom: $spacing / 2;
-      display: block;
+    .store-cover {
+      width: 100%;
+      height: 100%;
+      transition: transform 0.5s ease;
     }
     
-    .business-hours,
-    .address,
-    .distance {
-      font-size: $text-size;
-      color: $primary-color;
-      margin-bottom: 5px;
-      display: block;
-	  text{
-		  color: #333;
-		  // font-weight: 900;
+    .store-cover:active {
+      transform: scale(1.02);
+    }
+    
+    .cover-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 160rpx;
+      background: linear-gradient(transparent, rgba(0,0,0,0.6));
+    }
+  }
+  
+  .store-card {
+    background: #FFFFFF;
+    border-radius: $border-radius;
+    margin: -60rpx $spacing 0;
+    padding: $card-padding;
+    position: relative;
+    z-index: 2;
+    box-shadow: $shadow-medium;
+    transition: transform 0.3s, box-shadow 0.3s;
+    
+    &:active {
+      transform: translateY(2rpx);
+      box-shadow: $shadow-light;
+    }
+    
+    .store-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 20rpx;
+      
+      .store-name {
+        font-size: 44rpx;
+        font-weight: 700;
+        color: $dark-color;
+        line-height: 1.3;
+        word-break: break-word;
+        flex: 1;
+      }
+      
+      
+    }
+	.price-distance-row {
+	  display: flex;
+	  align-items: center;
+	  margin-bottom: 30rpx;
+	  
+	  
+	  .price-tag {
+	    background: #f5f8ff;
+	    color: $primary-color;
+	    padding: 4rpx 16rpx;
+	    border-radius: 20rpx;
+	    font-size: 28rpx;
+	    font-weight: 600;
+	    margin-right: 12rpx;
+	    white-space: nowrap;
 	  }
+	  
+	  .distance-badge {
+	    background: $primary-color;
+	    border-radius: 40rpx;
+	    padding: 8rpx 20rpx;
+	    display: flex;
+	    align-items: center;
+	    color: white;
+	    font-size: 26rpx;
+	    white-space: nowrap;
+	    
+	    .u-icon {
+	      margin-right: 8rpx;
+	    }
+	  }
+	}
+    
+    .tags-container {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 24rpx;
+      gap: 12rpx;
+      
+      .tag {
+        background-color: #f0f7ff;
+        color: $primary-color;
+        padding: 8rpx 20rpx;
+        border-radius: 30rpx;
+        font-size: 26rpx;
+        border: 1rpx solid rgba($primary-color, 0.3);
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+    
+    .divider {
+      height: 2rpx;
+      margin: $spacing 0;
+      
+      &.dotted {
+        background: repeating-linear-gradient(to right, $border-color, $border-color 4rpx, transparent 4rpx, transparent 8rpx);
+      }
+    }
+    
+    .info-grid {
+      display: flex;
+      flex-direction: column;
+      
+      .info-item {
+        display: flex;
+        padding: 24rpx 0;
+        align-items: flex-start;
+        border-bottom: 2rpx dashed $border-color;
+        
+        &:last-child {
+          border-bottom: none;
+        }
+        
+        .u-icon {
+          margin-right: 20rpx;
+          margin-top: 4rpx;
+          flex-shrink: 0;
+        }
+        
+        .info-content {
+          flex: 1;
+          
+          .info-label {
+            display: block;
+            font-size: 26rpx;
+            color: $gray-color;
+            margin-bottom: 8rpx;
+            padding-left: 10rpx;
+          }
+          
+          .info-value {
+            display: block;
+            font-size: 28rpx;
+            color: $dark-color;
+            line-height: 1.6;
+            word-break: break-all;
+            padding-left: 10rpx;
+          }
+        }
+      }
+    }
+    
+    .action-buttons {
+      margin-top: 40rpx;
+      display: flex;
+      gap: 20rpx;
+      
+      button {
+        flex: 1;
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 50rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30rpx;
+        border: none;
+        transition: all 0.3s;
+        font-weight: 500;
+        
+        .u-icon {
+          margin-right: 10rpx;
+        }
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+      }
+      
+      .nav-button {
+        background: $primary-color;
+        color: white;
+        box-shadow: 0 6rpx 16rpx rgba(141, 186, 252, 0.4);
+      }
+      
+      .share-button {
+        background: #f0f7ff;
+        color: $primary-color;
+        border: 2rpx solid $primary-color;
+      }
+    }
+  }
+  
+  .detail-section {
+    margin-top: $spacing;
+    
+    .section-title {
+      display: flex;
+      align-items: center;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: $dark-color;
+      margin-bottom: 24rpx;
+    }
+    
+    .image-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20rpx;
+      margin-bottom: $spacing;
+    }
+    
+    .detail-image {
+      width: 100%;
+      height: 280rpx;
+      border-radius: 16rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s, box-shadow 0.3s;
+      overflow: hidden;
+    }
+    
+    .detail-image:active {
+      transform: scale(0.98);
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
     }
   }
 }
diff --git a/pages/neighbor/index.vue b/pages/neighbor/index.vue
index fbd2331..8f3fe39 100644
--- a/pages/neighbor/index.vue
+++ b/pages/neighbor/index.vue
@@ -1,104 +1,87 @@
-<template>
-	<view class="container">
-		<view class="nearby-page">
-
-			<!-- 附近美食模块 -->
-			<view class="section shadow" v-for="(item,index) in aroundList" :key="index">
-				<view class="section-header" @click="goPage('aroundList')">
-					<view class="section-title">{{item.label}}</view>
-					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
-				</view>
-				<view class="goods-list">
-					<view class="goods-item" v-for="i in item.serviceList" @click="goDetail(i.id,i.distance)">
-						<image class="goods-img" :src="`${IMAGE_BASE_URL}`+i.storeCover"></image>
-						<text class="goods-name">{{ i.storeName }}</text>
-						<view class="goods-distance">
-							<u-icon name="map" size="18" color="#c6d8fa"></u-icon>
-							{{ i.distance + '米'}}
-						</view>
-					</view>
-				</view>
-			</view>
-
-		</view>
-		<Footer></Footer>
-	</view>
-</template>
-
-<script>
-	import Footer from '@/components/footer_common.vue';
-	import {
-		get,
-		post
-	} from '@/utils/request';
-	import {
-		IMAGE_BASE_URL,
-		BASE_URL
-	} from '@/utils/config';
-	import {
-		formatTime,
-		formatRelativeTime
-	} from '@/utils/timeFormat';
-
-	export default {
-		components: {
-			Footer
-		},
-		data() {
+<template>
+	<view class="container">
+		<view class="nearby-page">
+			<!-- 附近美食模块 -->
+			<view class="section shadow" v-for="(item,index) in aroundList" :key="index">
+				<view class="section-header" @click="goPage('aroundList')">
+					<view class="section-title">{{item.label}}</view>
+					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
+				</view>
+				<!-- 优化：使用网格布局实现更稳定的四列 -->
+				<view class="goods-grid">
+					<view class="goods-item" v-for="i in item.serviceList" :key="i.id" 
+						@click="goDetail(i.id,i.distance)">
+						<image class="goods-img" :src="`${IMAGE_BASE_URL}`+i.storeCover" mode="aspectFill"></image>
+						<view class="goods-info">
+							<text class="goods-name">{{ i.storeName }}</text>
+							<view class="goods-distance">
+								<u-icon name="map" size="18" color="#c6d8fa"></u-icon>
+								<text>{{ formatDistance(i.distance) }} </text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<Footer></Footer>
+	</view>
+</template>
+
+<script>
+	import Footer from '@/components/footer_common.vue';
+	import { get, post } from '@/utils/request';
+	import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
+	import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
+
+	export default {
+		components: { Footer },
+		data() {
 			return {
-				IMAGE_BASE_URL,
-				aroundList:[],
-			}
-		},
-		onLoad() {
-
-		},
-		mounted() {
-			this.surroundingList();
-		},
-		methods: {
-			// 跳转不同页面
-			goDetail(id,local) {
-				uni.navigateTo({
-					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
-				});
-			},
-			async surroundingList() {
-				const position = await this.getCurrentPosition();
-				let params = {
-					current: 1,
-					pageSize: 10,
-					longitude: position.longitude,
-					latitude: position.latitude,
-
-					// statusArray:"2,3,4",
-				};
-				try {
-					const res = await get('/api/v1/apps/surrounding-type', params);
-					if (!res || !res.success) {
-						throw new Error('获取周边服务失败');
-					}
-					console.log("---res", res)
-			        this.aroundList = [...res.data];
-					// res.data.forEach(item => {
-					// 	let imgUrl = item.cover;
-					// 	if (!imgUrl.startsWith('http') && !imgUrl.startsWith('https')) {
-					// 		item.cover = IMAGE_BASE_URL + imgUrl;
-					// 	}
-					// })
-					// this.activityList = [...res.data];
-
-				} catch (err) {
-					console.error('获取周边服务失败:', err);
-				}
-
-			},
+				IMAGE_BASE_URL,
+				aroundList:[]
+			}
+		},
+		onLoad() {},
+		mounted() {
+			this.surroundingList();
+		},
+		methods: {
+			goDetail(id, local) {
+				uni.navigateTo({
+					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
+				});
+			},
+			formatDistance(distance) {
+			  if (!distance) return '未知距离';
+			  if (distance < 1000) {
+			    return `${distance}米`;
+			  } else {
+			    return `${(distance / 1000).toFixed(1)}公里`;
+			  }
+			},
+			async surroundingList() {
+				const position = await this.getCurrentPosition();
+				let params = {
+					current: 1,
+					pageSize: 10,
+					longitude: position.longitude,
+					latitude: position.latitude
+				};
+				try {
+					const res = await get('/api/v1/apps/surrounding-type', params);
+					if (!res || !res.success) {
+						throw new Error('获取周边服务失败');
+					}
+					this.aroundList = [...res.data];
+				} catch (err) {
+					console.error('获取周边服务失败:', err);
+				}
+			},
 			getCurrentPosition() {
 			    return new Promise((resolve, reject) => {
 			        uni.getLocation({
 			            type: 'wgs84',
 			            success: (res) => {
-			                console.log('当前位置:', res);
 			                resolve({
 			                    longitude: res.longitude,
 			                    latitude: res.latitude
@@ -114,106 +97,136 @@
 			            }
 			        });
 			    });
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		background: #f8faff;
-		padding-bottom: 400rpx;
-
-		.nearby-page {
-			padding: 20rpx;
-			width: 100%;
-			box-sizing: border-box;
-		}
-
-		// 优化后的section样式
-		.section {
-			margin: 30rpx 0; // 增大上下间距
-			padding: 20rpx;
-			border-radius: 16rpx; // 圆角更圆润
-			background-color: #fff;
-			transition: transform 0.3s ease; // 添加过渡效果
-
-			// 鼠标悬停效果
-			&:hover {
-				transform: translateY(-5rpx);
-			}
-		}
-
-		// 添加阴影效果
-		.shadow {
-			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08); // 更细腻的阴影
-		}
-
-		.section-header {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			margin-bottom: 20rpx;
-			padding: 0 10rpx;
-		}
-
-		.section-title {
-			font-size: 34rpx;
-			font-weight: 600;
-			color: #333;
-			/* 修正后的边框样式 */
-			border-left: 10rpx solid rgba(141, 186, 252, 0.55);
-			padding-left: 16rpx;
-		}
-
-		.goods-list {
-			display: flex;
-			flex-wrap: wrap;
-			// justify-content:;
-		}
-
-		.goods-item {
-			width: 23%;
-			text-align: center;
-			margin-bottom: 20rpx;
-		}
-
-		.goods-img {
-			width: 150rpx;
-			height: 150rpx;
-			border-radius: 12rpx;
-			// margin-bottom: 10rpx;
-			object-fit: cover; // 确保图片比例正确
-		}
-
-		.goods-name {
-			font-size: 24rpx;
-			display: block;
-			margin-bottom: 6rpx;
-			color: #333;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			text-align: left;
-		}
-
-		// 新增样式：使图标和文字在同一行显示
-		.goods-distance {
-			font-size: 22rpx;
-			color: #999;
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			text-align: right;
-
-			// 调整图标与文字之间的间距
-			.u-icon {
-				margin-right: 6rpx;
-				font-size: 18rpx;
-			}
-		}
-	}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background: #f8faff;
+		padding-bottom: 120rpx;
+	}
+
+	.nearby-page {
+		padding: 20rpx 24rpx;
+		width: 100%;
+		box-sizing: border-box;
+		flex: 1;
+	}
+
+	.section {
+		margin: 32rpx 0;
+		padding: 24rpx;
+		border-radius: 20rpx;
+		background-color: #fff;
+		transition: all 0.3s ease;
+		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+		
+		&:active {
+			transform: scale(0.98);
+		}
+	}
+
+	.section-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 24rpx;
+		padding: 0 10rpx;
+	}
+
+	.section-title {
+		font-size: 36rpx;
+		font-weight: 600;
+		color: #333;
+		border-left: 8rpx solid #8dbafc;
+		padding-left: 20rpx;
+		line-height: 1.4;
+	}
+
+	/* 优化：使用grid布局实现更稳定的四列分布 */
+	.goods-grid {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr); /* 强制四列布局 */
+		gap: 10rpx; /* 统一间距 */
+	}
+
+	.goods-item {
+		border-radius: 16rpx;
+		overflow: hidden;
+		background: #fff;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+		transition: transform 0.2s ease, box-shadow 0.2s ease;
+		
+		&:active {
+			transform: scale(0.96);
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	.goods-img {
+		width: 100%;
+		height: 160rpx; /* 优化图片高度比例 */
+		border-radius: 12rpx 12rpx 0 0;
+		display: block;
+		object-fit: cover; /* 确保图片不变形 */
+	}
+
+	.goods-info {
+		padding: 16rpx;
+	}
+
+	.goods-name {
+		font-size: 24rpx;
+		color: #333;
+		font-weight: 500;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 1.5;
+		margin-bottom: 8rpx;
+	}
+
+	.goods-distance {
+		font-size: 22rpx;
+		color: #666;
+		display: flex;
+		align-items: center;
+		
+		.u-icon {
+			margin-right: 4rpx;
+		}
+	}
+
+	/* 响应式优化：小屏幕自动调整为两列 */
+	@media (max-width: 750rpx) { /* 适配常见手机屏幕 */
+		.goods-grid {
+			grid-template-columns: repeat(2, 1fr); /* 小屏幕两列 */
+		}
+		
+		.goods-img {
+			height: 200rpx; /* 增加小屏幕图片高度 */
+		}
+		
+		.goods-name {
+			font-size: 26rpx; /* 增大字体 */
+		}
+	}
+
+	/* 针对超小屏幕的额外适配 */
+	@media (max-width: 375rpx) {
+		.goods-grid {
+			grid-template-columns: 1fr; /* 极小屏幕单列 */
+		}
+		
+		.goods-img {
+			height: 240rpx;
+		}
+	}
 </style>
\ No newline at end of file

From a2dda03fdbb9739f50976fcbc8aec2f8c66f005f Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 16:40:53 +0800
Subject: [PATCH 4/5] 12

---
 static/imgs/index/nav.png | Bin 4738 -> 2042 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/static/imgs/index/nav.png b/static/imgs/index/nav.png
index d4f4a5f2b15c9967f73c5a2a96f5c70e62febe1a..3b657bb78813c677277127c77614740ee4a48860 100644
GIT binary patch
literal 2042
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
YKbybpy{Fa&-T(jq07*qoM6N<$f=m0M(*OVf

literal 4738
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
QEC2ui07*qoM6N<$g6~=|jQ{`u


From 68354f01d4e9f129f41ffab6f2026572fdee70d3 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Mon, 28 Jul 2025 18:51:47 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=92=E5=8A=A9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E8=AF=84=E8=AE=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/aroundDetail/index.vue | 192 +++++++++++++++++---
 pages/aroundList/index.vue   | 328 ++++++++++++++++++++---------------
 pages/neighbor/index.vue     |  13 +-
 3 files changed, 366 insertions(+), 167 deletions(-)

diff --git a/pages/aroundDetail/index.vue b/pages/aroundDetail/index.vue
index 308b21f..5c41b9d 100644
--- a/pages/aroundDetail/index.vue
+++ b/pages/aroundDetail/index.vue
@@ -113,12 +113,22 @@
           <u-icon name="map-fill" color="#fff" size="28"></u-icon>
           <text>导航前往</text>
         </button>
-        <button class="share-button" @click="handleShare">
-          <u-icon name="share-square" color="#8dbafc" size="28"></u-icon>
-          <text>分享</text>
+        <button class="share-button" open-type="share" @click="handleShareClick">
+            <u-icon name="share-square" color="#8dbafc" size="28"></u-icon>
+            <text>分享</text>
         </button>
       </view>
     </view>
+	
+	<!-- 授权弹窗 -->
+	<u-modal 
+	    v-model="showLocationModal" 
+	    title="位置授权提示" 
+	    :content="locationModalContent"
+	    show-cancel-button
+	    @confirm="handleAuthConfirm"
+	    @cancel="handleAuthCancel"
+	></u-modal>
   </view>
 </template>
 
@@ -158,6 +168,10 @@ export default {
         status: 1
       },
       local: null,
+	  showLocationModal: false,
+	  locationModalContent: '我们需要获取您的位置信息，以便提供更精准的服务',
+	  userLocation: null,
+	  isRequestingLocation: false
     }
   },
   computed: {
@@ -188,10 +202,17 @@ export default {
     }
   },
   onLoad(options) { 
-    if (options && options.Id && options.local) { 
-      this.Id = options.Id;
-      this.local = options.local;
+    if (options?.Id) {
+        this.Id = options.Id;
+        this.local = options.local || null;
+        this.getAroundDetail();
     }
+        
+    // 启用分享功能
+    wx.showShareMenu({
+        withShareTicket: true,
+         menus: ['shareAppMessage', 'shareTimeline']
+    });
   },
   mounted() {
     this.getAroundDetail();
@@ -207,26 +228,147 @@ export default {
     },
     
     async getAroundDetail() {
-      try {
-        const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
-        if (!res || !res.success) {
-          throw new Error('获取详情失败');
-        }
-        
-        if (res.data.storeCover) {
-          res.data.storeCover = res.data.storeCover.startsWith('http') ? res.data.storeCover : IMAGE_BASE_URL + res.data.storeCover;
-        }
-        
-        this.detailInfo = {...this.detailInfo, ...res.data};
-      } catch (err) {
-        console.error('获取详情失败:', err);
-        uni.showToast({
-          title: '获取详情失败',
-          icon: 'none'
-        });
-      }
+          try {
+            const res = await get(`/api/v1/apps/surrounding/${this.Id}`);
+            if (res?.success) {
+              this.detailInfo = {
+                ...this.detailInfo,
+                ...res.data,
+                storeCover: res.data.storeCover?.startsWith('http') 
+                  ? res.data.storeCover 
+                  : IMAGE_BASE_URL + res.data.storeCover
+              };
+            }
+          } catch (error) {
+            console.error('获取详情失败:', error);
+            uni.showToast({ title: '获取详情失败', icon: 'none' });
+          }
     },
-    
+	
+	// 处理分享按钮点击
+	async handleShareClick() {
+	      this.isRequestingLocation = true;
+	      try {
+	        await this.checkLocationPermission();
+	      } catch (error) {
+	        console.error('位置授权异常:', error);
+	      } finally {
+	        this.isRequestingLocation = false;
+	      }
+	},
+	
+	// 检查位置权限
+	async checkLocationPermission() {
+	      const status = await this.getPermissionStatus();
+	      if (status === 'granted') {
+	        await this.getUserLocation();
+	        return;
+	      }
+	      
+	      if (status === 'none') {
+	        // 首次请求授权
+	        this.requestLocationPermission();
+	      } else {
+	        // 已拒绝过，显示提示
+	        this.showLocationModal = true;
+	    }
+	},
+	
+	// 获取权限状态
+	getPermissionStatus() {
+	      return new Promise((resolve) => {
+	        uni.getSetting({
+	          success: (res) => {
+	            if (res.authSetting['scope.userLocation'] === undefined) {
+	              resolve('none');
+	            } else if (res.authSetting['scope.userLocation']) {
+	              resolve('granted');
+	            } else {
+	              resolve('denied');
+	            }
+	          },
+	          fail: () => resolve('none')
+	        });
+	    });
+	},
+	
+	// 请求位置授权
+	requestLocationPermission() {
+	    uni.authorize({
+	        scope: 'scope.userLocation',
+	        success: () => this.getUserLocation(),
+	        fail: (err) => {
+	          console.error('授权失败:', err);
+	          this.showLocationModal = true;
+	        }
+	    });
+	},
+	
+	// 获取用户位置
+	getUserLocation() {
+	    return new Promise((resolve, reject) => {
+	        uni.getLocation({
+	          type: 'wgs84',
+	          success: (res) => {
+	            this.userLocation = {
+	              latitude: res.latitude,
+	              longitude: res.longitude
+	            };
+	            resolve(res);
+	          },
+	          fail: (err) => {
+	            console.error('获取位置失败:', err);
+	            reject(err);
+	          }
+	        });
+	    });
+	 },
+	 
+	// 处理授权确认
+	handleAuthConfirm() {
+	    uni.openSetting({
+	         success: (res) => {
+	           if (res.authSetting['scope.userLocation']) {
+	             this.getUserLocation().catch(() => {
+	               uni.showToast({ title: '获取位置失败', icon: 'none' });
+	             });
+	           }
+	           this.showLocationModal = false;
+	         }
+	    });
+	},
+	     
+	// 处理授权取消
+	handleAuthCancel() {
+	    this.showLocationModal = false;
+	    uni.showToast({ title: '已取消位置授权', icon: 'none' });
+	},
+	
+	// 微信分享好友
+	onShareAppMessage() {
+	    return {
+	        title: this.detailInfo.storeName || '发现一个好地方',
+	        path: `/pages/surrounding/detail?Id=${this.Id}`,
+	        imageUrl: this.detailInfo.storeCover,
+	        success: () => {
+	          this.logShareEvent();
+	        },
+	        fail: (err) => {
+	          console.error('分享失败:', err);
+	        }
+	    };
+	},
+	    
+	// 朋友圈分享
+	onShareTimeline() {
+	    return {
+	        title: this.detailInfo.storeName || '发现一个好地方',
+	        query: `Id=${this.Id}`,
+	        imageUrl: this.detailInfo.storeCover
+	    };
+	},
+	    
+
     openMap() {
       const { latitude, longitude, storeName, storeAddress } = this.detailInfo;
       if (latitude && longitude) {
diff --git a/pages/aroundList/index.vue b/pages/aroundList/index.vue
index d195d64..4a86a73 100644
--- a/pages/aroundList/index.vue
+++ b/pages/aroundList/index.vue
@@ -1,147 +1,195 @@
-<template>
-	<view class="container">
-		<view v-for="(item, index) in list" :key="index" class="shop-card" @click="goPage('aroundDetail')">
-			<u-cell :border="false" class="custom-cell">
-				<image slot="icon" :src="item.image" mode="aspectFill" class="cell-image"></image>
-				<view slot="title" class="cell-right">
-					<view class="shop-name">{{ item.name }}</view>
-					<view class="shop-info">
-						<!-- <text>★ {{ item.rating }} </text> -->
-						<text>人均¥{{ item.perCapita }}</text>
-						<text class="distance">直线{{ item.distance }}m</text>
-					</view>
-					<view class="desc-container">
-						<text class="desc">{{ "“" + item.desc + "”" }}</text>
-					</view>
-				</view>
-			</u-cell>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				list: [{
-						image: "/static/imgs/service/hema.png", // 假设图片放在 static 目录，根据实际路径调整
-						name: '肯德基（南通紫琅店）',
-						rating: 4.8,
-						monthSales: 4683,
-						perCapita: 30,
-						distance: 221,
-						desc: '超棒，同学们都说好吃'
-					},
-					{
-						image: "/static/imgs/service/hema.png",
-						name: '汉堡王（南通紫琅店）',
-						rating: 4.8,
-						monthSales: 4683,
-						perCapita: 30,
-						distance: 221,
-						desc: '超棒，同学们都说好吃'
-					},
-					{
-						image: "/static/imgs/service/hema.png",
-						name: '瑞幸咖啡（南通紫琅店）',
-						rating: 4.8,
-						monthSales: 4683,
-						perCapita: 30,
-						distance: 221,
-						desc: '超棒，同学们都说不错'
-					},
-					{
-						image: "/static/imgs/service/hema.png",
-						name: '绿茶餐厅',
-						rating: 4.8,
-						monthSales: 4683,
-						perCapita: 30,
-						distance: 221,
-						desc: '超棒，同学们都说好吃'
-					}
-				]
-			};
+<template>
+	<view class="container">
+		<view v-for="(item, index) in list" :key="index" class="shop-card" @click="goDetail(item.id,item.distance)">
+			<u-cell :border="false" class="custom-cell">
+				<image slot="icon" :src="`${IMAGE_BASE_URL}`+item.storeCover" mode="aspectFill" class="cell-image"></image>
+				<view slot="title" class="cell-right">
+					<view class="shop-name">{{ item.storeName }}</view>
+					<view class="shop-info">
+						<text class="price">{{ item.price > 0 ? `人均¥${item.price}` : '免费开放' }}</text>
+						<text class="distance">{{ formatDistance(item.distance) }}</text>
+					</view>
+					<view class="shop-desc" v-if="item.content">
+						<text>{{ truncateContent(item.content) }}</text>
+					</view>
+					<view class="open-time" v-if="item.openAt">
+						<u-icon name="clock" size="24" color="#8a8a8a"></u-icon>
+						<text>开放时间：{{ item.openAt }}</text>
+					</view>
+				</view>
+			</u-cell>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { get, post } from '@/utils/request';
+	import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
+	
+	export default {
+		data() {
+			return {
+				IMAGE_BASE_URL,
+				Id: null,
+				latitude: null,
+				longitude: null,
+				list: []
+			};
 		},
-		onLoad() {
-		
+		onLoad(options) {
+			if (options && options.Id && options.latitude && options.longitude) { 
+				this.Id = options.Id;
+				this.longitude = options.longitude;
+				this.latitude = options.latitude;
+			}
+		},
+		mounted() {
+			this.getAroundList();
 		},
 		methods: {
-			// 跳转不同页面
-			goPage(page) {
-				console.log("==进来", page)
-				uni.navigateTo({
-					url: `/pages/${page}/index`,
-					success: () => {
-						console.log('切换到tabBar页面成功');
-					},
-					fail: (err) => {
-						console.error('切换到tabBar页面失败:', err);
+			async getAroundList() {
+				let params = {
+					current: 1,
+					pageSize: 100,
+					longitude: this.longitude,
+					latitude: this.latitude,
+					typeId: this.Id,
+				}
+				try {
+					const res = await get('/api/v1/apps/surrounding', params);
+					if (!res || !res.success) {
+						throw new Error('获取列表失败');
 					}
+					this.list = res.data || [];
+				} catch (err) {
+					console.error('获取列表失败:', err);
+					uni.showToast({
+						title: '加载失败',
+						icon: 'none'
+					});
+				}
+			},
+			goDetail(id, local) {
+				uni.navigateTo({
+					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
 				});
 			},
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	.container {
-		padding: 10px;
-
-		.shop-card {
-			margin-bottom: 15px;
-			border-radius: 10px;
-			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
-			background-color: #fff;
-		}
-
-		.custom-cell {
-			display: flex;
-			align-items: center;
-			padding: 12px 15px;
-		}
-
-		.cell-image {
-			width: 80px;
-			height: 80px;
-			border-radius: 8px;
-		}
-
-		.cell-right {
-			display: flex;
-			flex-direction: column;
-			margin-left: 10px;
-
-			.shop-name {
-				font-size: 16px;
-				font-weight: bold;
-				margin-bottom: 4px;
-			}
-
-			.shop-info {
-				font-size: 12px;
-				color: #999;
-				margin-bottom: 4px;
-				display: flex;
-				flex-wrap: wrap;
-
-				.distance {
-					margin-left: auto;
-				}
-			}
-
-			.desc-container {
-				display: inline-block;
-				margin-top: 5px;
-			}
-
-			.desc {
-				font-size: 12px;
-				padding: 5px 10px;
-				color: rgba(128, 128, 128, 1);
-				background: rgba(229, 229, 229, 0.5);
-				border-radius: 4px;
-				display: inline-block;
-			}
-		}
-	}
+			formatDistance(distance) {
+				if (distance >= 1000) {
+					return `距离${(distance / 1000).toFixed(1)}km`;
+				}
+				return `距离${Math.round(distance)}m`;
+			},
+			truncateContent(content) {
+				if (content.length > 60) {
+					return content.substring(0, 60) + '...';
+				}
+				return content;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		padding: 20rpx;
+		background-color: #f8f9fa;
+		min-height: 100vh;
+	}
+
+	.shop-card {
+		margin-bottom: 24rpx;
+		border-radius: 16rpx;
+		background-color: #fff;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+		overflow: hidden;
+		transition: all 0.2s ease;
+		
+		&:active {
+			transform: scale(0.98);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	.custom-cell {
+		padding: 0;
+	}
+
+	.cell-image {
+		width: 240rpx;
+		height: 240rpx;
+		flex-shrink: 0;
+		background-color: #f5f5f5;
+	}
+
+	.cell-right {
+		padding: 24rpx;
+		flex: 1;
+	}
+
+	.shop-name {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #2c3e50;
+		margin-bottom: 12rpx;
+		line-height: 1.4;
+	}
+
+	.shop-info {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 12rpx;
+		font-size: 26rpx;
+		
+		.price {
+			color: #3498db;
+			font-weight: 500;
+			background-color: rgba(52, 152, 219, 0.1);
+			padding: 4rpx 12rpx;
+			border-radius: 6rpx;
+		}
+		
+		.distance {
+			color: #7f8c8d;
+			font-size: 24rpx;
+			display: flex;
+			align-items: center;
+			
+			&::before {
+				content: '';
+				display: inline-block;
+				width: 24rpx;
+				height: 24rpx;
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%237f8c8d"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
+				background-size: contain;
+				background-repeat: no-repeat;
+				margin-right: 6rpx;
+			}
+		}
+	}
+
+	.shop-desc {
+		font-size: 26rpx;
+		color: #555;
+		line-height: 1.6;
+		margin: 12rpx 0;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.open-time {
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+		color: #7f8c8d;
+		margin-top: 8rpx;
+		
+		.u-icon {
+			margin-right: 8rpx;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/neighbor/index.vue b/pages/neighbor/index.vue
index 8f3fe39..f598ef4 100644
--- a/pages/neighbor/index.vue
+++ b/pages/neighbor/index.vue
@@ -3,7 +3,7 @@
 		<view class="nearby-page">
 			<!-- 附近美食模块 -->
 			<view class="section shadow" v-for="(item,index) in aroundList" :key="index">
-				<view class="section-header" @click="goPage('aroundList')">
+				<view class="section-header" @click="goPage(item.id)">
 					<view class="section-title">{{item.label}}</view>
 					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
 				</view>
@@ -38,7 +38,9 @@
 		data() {
 			return {
 				IMAGE_BASE_URL,
-				aroundList:[]
+				aroundList:[],
+				longitude:null,
+				latitude:null,
 			}
 		},
 		onLoad() {},
@@ -51,6 +53,11 @@
 					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
 				});
 			},
+			goPage(id){
+				uni.navigateTo({
+					url: `/pages/aroundList/index?Id=${id}&latitude=${this.latitude}&longitude=${this.longitude}`,
+				});
+			},
 			formatDistance(distance) {
 			  if (!distance) return '未知距离';
 			  if (distance < 1000) {
@@ -61,6 +68,8 @@
 			},
 			async surroundingList() {
 				const position = await this.getCurrentPosition();
+				this.latitude = position.latitude;
+				this.longitude = position.longitude;
 				let params = {
 					current: 1,
 					pageSize: 10,