From 65125a6465914ff35691dd6901bc9b6cd3a4ad46 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Sat, 1 Nov 2025 21:13:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9C=B0=E5=9B=BE=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E9=9B=86=E6=88=90=E5=88=B0=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加可交互的地图卡片组件，支持显示位置标记和地址信息
在工作和租房详情页中集成地图组件，当有经纬度时显示地图
优化callPhone组件，增加悬浮窗模式并添加动画效果
将createBrowseRecordParams参数从orderId改为formId以保持一致性
---
 components/base/mapCard.vue           | 168 ++++++++++++++++++++++++++++++++++
 components/user/callPhone.vue         | 121 +++++++++++++++++++++++-
 config/browseConfig.js                |   4 +-
 pages_order/renting/rentingDetail.vue |  74 +++++++++------
 pages_order/work/workDetail.vue       |  37 ++++++--
 static/image/location-marker.svg      |   4 +
 6 files changed, 362 insertions(+), 46 deletions(-)
 create mode 100644 components/base/mapCard.vue
 create mode 100644 static/image/location-marker.svg

diff --git a/components/base/mapCard.vue b/components/base/mapCard.vue
new file mode 100644
index 0000000..6fe5029
--- /dev/null
+++ b/components/base/mapCard.vue
@@ -0,0 +1,168 @@
+<template>
+	<view class="map-card">
+		<!-- 地图区域 -->
+		<view class="map-container">
+			<map 
+				:latitude="latitude" 
+				:longitude="longitude" 
+				:markers="markers"
+				:show-location="false"
+				:enable-zoom="false"
+				:enable-scroll="false"
+				:enable-rotate="false"
+				:enable-overlooking="false"
+				:enable-traffic="false"
+				class="map"
+				@tap="onMapTap"
+			></map>
+		</view>
+		
+		<!-- 地址信息区域 -->
+		<view class="address-container">
+			<view class="address-name">{{ addressName }}</view>
+			<view class="address-detail" v-if="addressDetail">{{ addressDetail }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'MapCard',
+	props: {
+		// 纬度
+		latitude: {
+			type: [Number, String],
+			required: true,
+			default: 39.908823
+		},
+		// 经度
+		longitude: {
+			type: [Number, String], 
+			required: true,
+			default: 116.397470
+		},
+		// 地址名称
+		addressName: {
+			type: String,
+			required: true,
+			default: '位置信息'
+		},
+		// 地址详情（可选）
+		addressDetail: {
+			type: String,
+			default: ''
+		},
+		// 地图高度
+		mapHeight: {
+			type: [Number, String],
+			default: 300
+		},
+		// 是否可点击
+		clickable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		// 地图标记点
+		markers() {
+			return [{
+				id: 1,
+				latitude: Number(this.latitude),
+				longitude: Number(this.longitude),
+				iconPath: '/static/image/location-marker.svg',
+				width: 30,
+				height: 30,
+				callout: {
+					content: this.addressName,
+					color: '#333333',
+					fontSize: 12,
+					borderRadius: 4,
+					bgColor: '#ffffff',
+					padding: 8,
+					display: 'ALWAYS'
+				}
+			}]
+		}
+	},
+	methods: {
+		// 地图点击事件
+		onMapTap() {
+			if (this.clickable) {
+				this.$emit('mapClick', {
+					latitude: this.latitude,
+					longitude: this.longitude,
+					addressName: this.addressName
+				});
+				
+				// 打开地图导航
+				this.openLocation();
+			}
+		},
+		
+		// 打开地图导航
+		openLocation() {
+			uni.openLocation({
+				latitude: Number(this.latitude),
+				longitude: Number(this.longitude),
+				name: this.addressName,
+				address: this.addressDetail || this.addressName,
+				success: () => {
+					console.log('打开地图成功');
+				},
+				fail: (err) => {
+					console.error('打开地图失败:', err);
+					uni.showToast({
+						title: '打开地图失败',
+						icon: 'none'
+					});
+				}
+			});
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.map-card {
+	background: $uni-bg-color;
+	border-radius: $uni-border-radius-lg;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	margin: $uni-spacing-row-base;
+}
+
+.map-container {
+	position: relative;
+	height: 300rpx;
+	
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.address-container {
+	padding: $uni-spacing-row-lg $uni-spacing-row-base;
+	background: $uni-bg-color;
+	
+	.address-name {
+		font-size: $uni-font-size-lg;
+		color: $uni-text-color;
+		font-weight: 500;
+		margin-bottom: $uni-spacing-col-sm;
+		line-height: 1.4;
+	}
+	
+	.address-detail {
+		font-size: $uni-font-size-sm;
+		color: $uni-text-color-grey;
+		line-height: 1.4;
+	}
+}
+
+// 点击态效果
+.map-card:active {
+	background: $uni-bg-color-hover;
+}
+</style>
\ No newline at end of file
diff --git a/components/user/callPhone.vue b/components/user/callPhone.vue
index 8dd2f96..92e4c80 100644
--- a/components/user/callPhone.vue
+++ b/components/user/callPhone.vue
@@ -1,8 +1,19 @@
 <template>
-	<view class="phone" v-if="phone" @click.stop="callPhone">
-		<image src="/static/image/home/phone.png" mode="widthFix"></image>
-		{{ title || '联系' + ta[sexName] }}
-	</view>
+	<view>
+        <!-- 普通模式 -->
+        <view v-if="!showModel" class="phone" v-show="phone" @click.stop="callPhone">
+            <image src="/static/image/home/phone.png" mode="widthFix"></image>
+            {{ title || '联系' + ta[sexName] }}
+        </view>
+        
+        <!-- 悬浮窗模式 -->
+        <view v-else v-show="phone" class="phone-modal" @click.stop="callPhone">
+            <view class="phone-modal-content">
+                <image src="/static/image/home/phone.png" mode="widthFix"></image>
+                <text class="phone-modal-text">{{ title || '联系' + ta[sexName] }}</text>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
@@ -11,7 +22,37 @@
 	import { mapState } from 'vuex'
 	export default {
 		mixins: [mixinsSex, rewardedVideoAdMixin],
-		props: ['phone', 'title', 'sexName', 'type', 'phoneTitle', 'pid'],
+		props: {
+			phone: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				default: ''
+			},
+			sexName: {
+				type: String,
+				default: ''
+			},
+			type: {
+				type: String,
+				default: ''
+			},
+			phoneTitle: {
+				type: String,
+				default: ''
+			},
+			pid: {
+				type: [String, Number],
+				default: ''
+			},
+			// 显示模式：false-普通模式，true-悬浮窗模式
+			showModel: {
+				type: Boolean,
+				default: false
+			}
+		},
 		data() {
 			return {
 				// 视频广告相关数据已移至混入中
@@ -117,6 +158,7 @@
 </script>
 
 <style scoped lang="scss">
+	// 普通模式样式
 	.phone {
 		background-color: rgba($uni-color, 0.2);
 		color: $uni-color;
@@ -130,4 +172,73 @@
 			height: 20rpx;
 		}
 	}
+	
+	// 悬浮窗模式样式
+	.phone-modal {
+		position: fixed;
+		bottom: calc(140rpx + env(safe-area-inset-bottom));
+		right: 30rpx;
+		z-index: 999;
+		
+		.phone-modal-content {
+			background: linear-gradient(135deg, $uni-color 0%, rgba($uni-color, 0.8) 100%);
+			color: #ffffff;
+			padding: 20rpx 30rpx;
+			border-radius: 50rpx;
+			box-shadow: 0 8rpx 24rpx rgba($uni-color, 0.3);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 160rpx;
+			transition: all 0.3s ease;
+			
+			&:active {
+				transform: scale(0.95);
+				box-shadow: 0 4rpx 12rpx rgba($uni-color, 0.4);
+			}
+			
+			image {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 12rpx;
+				filter: brightness(0) invert(1); // 将图标变为白色
+			}
+			
+			.phone-modal-text {
+				font-size: 28rpx;
+				font-weight: 500;
+				white-space: nowrap;
+			}
+		}
+		
+		// 悬浮窗呼吸动画效果
+		&::before {
+			content: '';
+			position: absolute;
+			top: -10rpx;
+			left: -10rpx;
+			right: -10rpx;
+			bottom: -10rpx;
+			background: rgba($uni-color, 0.2);
+			border-radius: 60rpx;
+			animation: pulse 2s infinite;
+			z-index: -1;
+		}
+	}
+	
+	// 呼吸动画
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+			opacity: 0.7;
+		}
+		50% {
+			transform: scale(1.1);
+			opacity: 0.3;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 0.7;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/config/browseConfig.js b/config/browseConfig.js
index b50c4db..59a44ef 100644
--- a/config/browseConfig.js
+++ b/config/browseConfig.js
@@ -117,11 +117,11 @@ export function getBrowseRecordConfig(itemType) {
 }
 
 // 创建浏览记录参数的工具函数
-export function createBrowseRecordParams(orderId, itemType = 'dynamic') {
+export function createBrowseRecordParams(formId, itemType = 'dynamic') {
   const config = getBrowseRecordConfig(itemType)
   
   return {
-    orderId: orderId,
+    formId: formId,
     type: config.type,
     category: config.category
   }
diff --git a/pages_order/renting/rentingDetail.vue b/pages_order/renting/rentingDetail.vue
index f36ff5b..9b8ce9c 100644
--- a/pages_order/renting/rentingDetail.vue
+++ b/pages_order/renting/rentingDetail.vue
@@ -83,38 +83,48 @@
 						</span>
 					</view>
 				</view> -->
-				<view class="flex-sb">
-					<view>
-						<span class="font-b">小区：</span>
-						<span class="font-c">
-							<uni-icons type="paperplane" size="12" />
-							{{ detail.address }}
-						</span>
-					</view>
-				</view>
-				
-				
-				<!-- <view 
-				style="margin-left: auto;"
-				class="d-btn" @click="clickService">
-					<span>打电话</span>
-				</view> -->
-				
-				<view style="width: 160rpx;font-size: 26rpx;
-				margin-left: auto;
-				height: 50rpx;">
-					<callPhone
-					:phone="detail.phone" 
-					type="1"
-					:phoneTitle="detail.title"
-					:pid="detail.id"
-					title="联系房东"/>
+				<!-- <view class="flex-sb">
+				<view>
+					<span class="font-b">小区：</span>
+					<span class="font-c">
+						<uni-icons type="paperplane" size="12" />
+						{{ detail.address }}
+					</span>
 				</view>
-				
-			</view>
-
+			</view> -->
+			
+			
+			<!-- <view 
+			style="margin-left: auto;"
+			class="d-btn" @click="clickService">
+				<span>打电话</span>
+			</view> -->
+			
+			
+            <callPhone
+            :phone="detail.phone" 
+            type="1"
+            :phoneTitle="detail.title"
+            :pid="detail.id"
+            title="联系房东"
+            :showModel="true"/>
+			
 		</view>
 
+	</view>
+
+	<!-- 地图位置信息 -->
+	<view style="padding: 20rpx;background-color: #FFF;">
+		<mapCard
+			v-if="detail.latitude && detail.longitude"
+			:address-name="detail.address"
+			:latitude="detail.latitude"
+			:longitude="detail.longitude"
+			:address-detail="detail.title"
+			@mapClick="onMapClick"
+		/>
+	</view>
+
 		<!-- <view class="b-fiexd flex" style="height: 98rpx; z-index: 2;">
 			<view style="padding-left: 20rpx;">
 				<image src="/static/logo.png" class="radius80 test" />
@@ -143,10 +153,12 @@
 <script>
 	import mixinsList from '@/mixins/list.js'
 	import commentList from '../components/list/comment/commentList.vue'
+	import mapCard from '@/components/base/mapCard.vue'
 	export default {
 		mixins: [mixinsList],
 		components : {
 			commentList,
+			mapCard,
 		},
 		data() {
 			return {
@@ -180,6 +192,10 @@
 			this.getDetail()
 		},
 		methods: {
+			// 地图点击事件
+			onMapClick(data) {
+				console.log('地图点击事件:', data);
+			},
 			clickShare() {
 				uni.share({
 					provider: 'weixin',
diff --git a/pages_order/work/workDetail.vue b/pages_order/work/workDetail.vue
index 3ada30c..9efe281 100644
--- a/pages_order/work/workDetail.vue
+++ b/pages_order/work/workDetail.vue
@@ -50,13 +50,25 @@
 				</view>
 			</view>
 			
-			<view class="address">
+			<!-- 工作地址地图卡片 -->
+			<view class="address-section" v-if="detail.latitude && detail.longitude">
+				<view class="title2">
+					工作地址
+				</view>
+				<mapCard 
+					:latitude="detail.latitude"
+					:longitude="detail.longitude"
+					:address-name="detail.address"
+					:address-detail="detail.addressDetail"
+					@mapClick="onMapClick"
+				/>
+			</view>
+			
+			<!-- 备用地址显示（当没有经纬度时） -->
+			<view class="address" v-else>
 				<view class="title2">
 					工作地址
 				</view>
-				<!-- 
-					深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东
-					-->
 				<view class="line"
 				style="justify-content: space-between;">
 					{{ detail.address }}
@@ -66,12 +78,6 @@
 					name="arrow-right"
 					></uv-icon>
 				</view>
-				
-				<!-- <view class="tag-list">
-					<view>
-						距您14.6千米
-					</view>
-				</view> -->
 			</view>
 			
 			<view class="info">
@@ -117,10 +123,12 @@
 <script>
 	import mixinsList from '@/mixins/list.js'
 	import commentList from '../components/list/comment/commentList.vue'
+	import mapCard from '@/components/base/mapCard.vue'
 	export default {
 		mixins: [mixinsList],
 		components : {
 			commentList,
+			mapCard,
 		},
 		data() {
 			return {
@@ -175,6 +183,11 @@
 					}
 				})
 			},
+			
+			// 地图点击事件处理
+			onMapClick(mapData) {
+				console.log('工作地址地图点击:', mapData);
+			}
 		}
 	}
 </script>
@@ -236,6 +249,10 @@
 			}
 		}
 		
+		.address-section{
+			padding: 30rpx 0;
+		}
+		
 		.info{
 			margin: 20rpx 0;
 			.text{
diff --git a/static/image/location-marker.svg b/static/image/location-marker.svg
new file mode 100644
index 0000000..530493e
--- /dev/null
+++ b/static/image/location-marker.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15 2C10.0294 2 6 6.02944 6 11C6 18.25 15 28 15 28C15 28 24 18.25 24 11C24 6.02944 19.9706 2 15 2Z" fill="#5baaff" stroke="#ffffff" stroke-width="2"/>
+  <circle cx="15" cy="11" r="4" fill="#ffffff"/>
+</svg>
\ No newline at end of file