From fd143bb3271ef205d0ed9aa68dfef3d18619f6e1 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Tue, 11 Mar 2025 23:08:42 +0800
Subject: [PATCH] 1

---
 pages.json                            |   8 +
 pages/home/index.vue                  |  22 +-
 pages_subpack/tourGuide/tourGuide.vue | 470 ++++++++++++++++++++++++++++++++++
 utils/oss-upload/oss/index.js         |  10 -
 utils/oss-upload/oss/web.js           |  63 -----
 5 files changed, 496 insertions(+), 77 deletions(-)
 create mode 100644 pages_subpack/tourGuide/tourGuide.vue
 delete mode 100644 utils/oss-upload/oss/web.js

diff --git a/pages.json b/pages.json
index 48ffa37..7f5a9eb 100644
--- a/pages.json
+++ b/pages.json
@@ -169,6 +169,14 @@
 						"navigationBarBackgroundColor": "#ffffff",
 						"navigationBarTextStyle": "black"
 					}
+				},
+				{
+					"path": "tourGuide/tourGuide",
+					"style": {
+						"navigationBarTitleText": "地图导览",
+						"navigationBarBackgroundColor": "#1EC77A",
+						"navigationBarTextStyle": "white"
+					}
 				}
 			]
 		}
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 34dc4c3..81b91ae 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -184,6 +184,17 @@
 				commonIndexIndexIcon({}).then(response=>{
 					console.info('onCommonIndexIndexIcon',response)
 					that.nav = response.result
+					// 检查是否已存在地图导览入口
+					let hasMapGuide = that.nav.some(item => item.url === '/pages_subpack/tourGuide/tourGuide')
+					if(!hasMapGuide) {
+						// 添加地图导览入口
+						that.nav.push({
+							id: 'map_guide',
+							title: '地图导览',
+							image: 'https://tennis-oss.xzaiyp.top/2024-12-08/9704d4a0-e8d8-40fc-a2b6-28b928013a60.png',
+							url: '/pages_subpack/tourGuide/tourGuide'
+						})
+					}
 				}).catch(error=>{
 					
 				})
@@ -260,10 +271,13 @@
 			},
 			
 			handleAreaChange(){
-				uni.chooseAddress({
-					success(res) {
-						console.info(res)
-					}
+				// uni.chooseAddress({
+				// 	success(res) {
+				// 		console.info(res)
+				// 	}
+				// })
+				uni.navigateTo({
+					url:"/pages_subpack/tourGuide/tourGuide"
 				})
 				// this.$refs.citySelectRef.open()
 			},
diff --git a/pages_subpack/tourGuide/tourGuide.vue b/pages_subpack/tourGuide/tourGuide.vue
new file mode 100644
index 0000000..9cb4f87
--- /dev/null
+++ b/pages_subpack/tourGuide/tourGuide.vue
@@ -0,0 +1,470 @@
+<template>
+    <view class="Locations">
+
+        <map style="width: 100%;height: 60vh" :layer-style='5' :show-location='true' :latitude="position.latitude"
+            :longitude="position.longitude" :markers="spotGuideMarkers" :scale="scale" @markertap="markertap" id="mapId"
+            @callouttap="callouttap">
+        </map>
+
+
+        <!-- <view class="tabs">
+			<view class=""
+			v-for="(item, index) in tabs"
+			:key="index"
+			@click="setSpotGuideIndex(index)"
+			:class="{act : spotGuideIndex == index}">
+				{{ item }}
+			</view>
+		</view> -->
+
+        <uv-tabs :list="houseTypeList" :activeStyle="{ color: '#1EC77A', fontWeight: 600 }" lineColor="#1EC77A"
+            lineHeight="8rpx" lineWidth="50rpx" keyName="title" :current="currentHouseType"
+            @click="onClickHouseType"></uv-tabs>
+
+
+        <view class="Locations-list">
+            <!-- 房源列表 -->
+            <view v-if="list.length > 0">
+                <view @click="onDetail(item)" class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex"
+                    v-for="(item, index) in list" :key="index">
+                    <view class="se-pos se-w-260 se-h-180">
+                        <image v-if="item.iconImage" class="se-a-80 se-pos-lt" :src="item.iconImage" mode=""></image>
+                        <image class="se-w-260 se-h-180 se-br-10" :src="item.images[0]" mode=""></image>
+                    </view>
+                    <view class="se-pl-10 se-w-p-100">
+                        <view class="se-c-black se-fs-28">
+                            {{ item.title }}
+                        </view>
+                        <view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
+                            <text>{{ item.homeType }}</text>
+                            <text>{{ item.timeGo }}年</text>
+                        </view>
+                        <view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
+                            <template v-if="item.iconTitles.length > 0">
+                                <view class="se-flex">
+                                    <view
+                                        class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5 se-mr-10"
+                                        v-for="(items, indexs) in item.iconTitles" :key="indexs">
+                                        {{ items }}
+                                    </view>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view></view>
+                            </template>
+                            <view class="se-c-66 se-flex se-flex-ai-c">
+                                <uv-icon name="eye"></uv-icon>
+                                <text class="se-ml-5 se-fs-18">{{ item.num }}</text>
+                            </view>
+                        </view>
+                        <view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
+                            <text class="se-c-red se-fs-24 se-fw-6 se-toe-1">￥{{ item.price }}元/{{ item.unit }}</text>
+                            <text class="se-c-66 se-fs-22 se-toe-1">{{ item.address }}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <uv-empty v-else text="该景区没有哦" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
+        </view>
+
+
+    </view>
+</template>
+
+<script>
+import { housePageList, houseType } from "@/common/api.js"
+export default {
+    data() {
+        return {
+            scale: 12, //缩放级别
+            show: true,
+            context: uni.createInnerAudioContext(),
+            tabs: ['遗产文化', '找美食', '找民宿', '找厕所'],
+            spotGuideIndex: 0, // 当前选中的菜单索引
+            position: {
+                latitude: 23.106574,
+                longitude: 113.324587
+            },
+            areaId: null, // 当前选中的区域ID
+            // 房源列表相关数据
+            list: [],
+            classId: null,
+            pageNo: 1,
+            pageSize: 10,
+            houseTypeList: [], // 房源类型列表
+            currentHouseType: 0 // 当前选中的房源类型索引
+        }
+    },
+    computed: {
+        spotGuideMarkers() {
+            let markers = [];
+            this.list.forEach((item, index) => {
+                if (item.latitude && item.longitude) {
+                    markers.push({
+                        id: index,
+                        latitude: item.latitude,
+                        longitude: item.longitude,
+                        iconPath: '/static/image/tourGuide/marker.png',
+                        width: 30,
+                        height: 30,
+                        callout: {
+                            content: item.spotName,
+                            color: '#000000',
+                            fontSize: 14,
+                            borderRadius: 5,
+                            bgColor: '#ffffff',
+                            padding: 5,
+                            display: 'BYCLICK'
+                        }
+                    });
+                }
+            });
+            return markers;
+        },
+    },
+    created() {
+        this.getCurrentLocation()
+        this.onHousePageList()
+        this.onHouseType() // 获取房源类型
+        this.onHousePageList() // 加载房源列表
+    },
+    onPullDownRefresh() {
+        let that = this
+        that.pageNo = 1
+        that.list = []
+        that.onHousePageList()
+    },
+    onReachBottom() {
+        let that = this
+        that.pageNo = that.pageNo + 1
+        that.onHousePageList()
+    },
+    methods: {
+        // 获取当前位置
+        getCurrentLocation() {
+            const that = this;
+            uni.getLocation({
+                type: 'wgs84',
+                success: function (res) {
+                    console.log('当前位置的经度：' + res.longitude);
+                    console.log('当前位置的纬度：' + res.latitude);
+                    that.position.latitude = res.latitude;
+                    that.position.longitude = res.longitude;
+                    // 更新地图位置
+                    that.onHousePageList();
+                },
+                fail: function (err) {
+                    console.error('获取位置失败：', err);
+                    uni.showToast({
+                        title: '获取位置失败',
+                        icon: 'none'
+                    });
+                }
+            });
+        },
+
+        //点击tab栏
+        clickTabs({ index, name }) {
+            this.currentArea = index
+            if (this.areaList[index]) {
+                this.areaId = this.areaList[index].id
+            }
+            this.onHousePageList()
+            this.$nextTick(() => {
+                this.selectArea()
+            })
+        },
+        setSpotGuideIndex(index) {
+            this.spotGuideIndex = index
+            this.onHousePageList()
+        },
+        textToSpeech() {
+            console.log('textToSpeech');
+
+            let self = this
+
+            // self.context.src = this.$config.baseUrl + '/info/textToAudio?text=' + "你好"
+            // self.context.play()
+
+            // return
+
+            plugin.textToSpeech({
+                lang: "zh_CN",
+                tts: true,
+                content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带，北起瓷都大桥、昌江大道，南至昌江大桥、西至沿江西路，东至莲社路、胜利路。 自宋以来，景德镇先民“沿河建窑，因窑成市”，渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理，形成了世界建筑史上绝无仅有的老城格局，成就了中国“东方瓷国”的盛誉，陶瓷成为了中国走向世界，世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰，是“一带一路”海上陶瓷之路的零公里起点，是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺，讲好景德镇故事，传播中国声音的“窗口”和“名片”。",
+                success: function (res) {
+                    self.context.src = res.filename;
+                    self.context.play()
+                },
+                fail: function (res) {
+                    console.log("fail tts", res)
+                }
+            })
+        },
+        //地图点击事件
+        markertap(e) {
+            console.log("markertap===你点击了标记点===", e)
+
+            let event = this.list[e.markerId]
+            // let spot = this.spotGuideMarkers[e.markerId]
+
+            this.onDetail(event)
+
+            // uni.openLocation({
+            // 	latitude: spot.latitude,
+            // 	longitude: spot.longitude,
+            // })
+
+            // BYCLICK隐藏
+            // ALWAYS显示
+
+            // this.$store.commit('setDisplay', 
+            // this.spotGuideMarkers[e.markerId].id)
+
+
+            // this.$forceUpdate()
+
+            // this.spotGuideMarkers.forEach((n, i) => {
+            // 	if(i == e.markerId){
+            // 		// 显示气泡
+            // 		n.callout.display = 'ALWAYS'
+            // 	}else{
+            // 		// 隐藏气泡
+            // 		n.callout.display = 'BYCLICK'
+            // 	}
+            // })
+        },
+        openLocation(n) {
+            uni.openLocation({
+                latitude: n.spotLatitude,
+                longitude: n.spotLongitude,
+            })
+        },
+        //地图点击事件
+        callouttap(e) {
+            console.log('callouttap地图点击事件', e)
+            let spot = this.spotGuideMarkers[e.markerId]
+            uni.openLocation({
+                latitude: spot.latitude,
+                longitude: spot.longitude,
+            })
+        },
+        toUrl(item) {
+            console.log(item);
+            if (item.categoryId == 0) {
+                this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`)
+            }
+        },
+        // 点击按钮将地图中心移动到指定定位点
+        moveTolocation(latitude, longitude) {
+            let mapObjs = uni.createMapContext('mapId', this)
+            mapObjs.moveToLocation(
+                {
+                    latitude,
+                    longitude
+                },
+                {
+                    complete: res => {
+                        console.log('移动完成:', res)
+                    }
+                })
+            // this.onRegionChange('',true)
+        },
+        // 点击景区，选择最近的一个景点
+        selectArea() {
+            let item = this.spotGuide[0]
+            if (item && item.spotLatitude && item.spotLongitude) {
+                this.moveTolocation(item.spotLatitude, item.spotLongitude)
+            }
+        },
+        clickAreaDetail(id) {
+            uni.navigateTo({
+                url: '/pages_order/service/areaDetail?id=' + id
+            })
+        },
+
+        // 获取房源类型列表
+        onHouseType() {
+            houseType({}).then(response => {
+                console.info('houseType', response)
+                this.houseTypeList = response.result
+            }).catch(error => {
+
+            })
+        },
+        // 点击房源类型
+        onClickHouseType(event) {
+            console.info(event)
+            let that = this
+            that.pageNo = 1
+            that.classId = event.id
+            that.currentHouseType = event.index
+            that.list = []
+            that.onHousePageList()
+        },
+        // 获取房源列表
+        onHousePageList() {
+            let that = this
+            let params = {
+                classId: that.classId,
+                pageNo: that.pageNo,
+                pageSize: that.pageSize
+            }
+
+            // 如果有位置信息，添加到参数中
+            if (that.position.latitude && that.position.longitude) {
+                params.latitude = that.position.latitude
+                params.longitude = that.position.longitude
+            }
+
+            housePageList(params).then((response) => {
+                console.info("房源列表数据", response.result.records)
+                response.result.records.forEach((items, indexs) => {
+                    if (items.image) {
+                        items.images = items.image.split(',')
+                    } else {
+                        items.images = []
+                    }
+                    if (items.homeImage) {
+                        items.homeImages = items.homeImage.split(',')
+                    } else {
+                        items.homeImages = []
+                    }
+                    if (items.iconTitle) {
+                        items.iconTitles = items.iconTitle.split(',')
+                    } else {
+                        items.iconTitles = []
+                    }
+                })
+                that.list = that.list.concat(response.result.records)
+            }).catch((error) => {
+
+            })
+        },
+        // 点击房源详情
+        onDetail(event) {
+            uni.navigateTo({
+                url: "/pages_subpack/detail/index?id=" + event.id
+            })
+        },
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.Locations {
+
+    .tabs {
+        display: flex;
+
+        &>view {
+            flex: 1;
+            margin: 20rpx 10rpx;
+            padding: 20rpx 10rpx;
+            background-color: #e8f7f0;
+            color: #1EC77A;
+            border-radius: 40rpx;
+            font-size: 24rpx;
+            text-align: center;
+        }
+
+        .act {
+            background-color: #1EC77A;
+            color: #fff;
+        }
+    }
+
+    .Locations-list {
+        .main {
+            display: flex;
+            margin: 20rpx;
+
+            .main-image {
+                width: 150rpx;
+                height: 150rpx;
+                border-radius: 20rpx;
+            }
+
+            .info {
+                margin-left: 20rpx;
+
+                .title {
+                    font-size: 30rpx;
+                    font-weight: 900;
+                }
+
+                .tips {
+                    font-size: 24rpx;
+                    color: #999999;
+                    margin-top: 10rpx;
+                }
+            }
+
+            .controls {
+                margin-left: auto;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                .f {
+                    image {
+                        width: 50rpx;
+                        height: 50rpx;
+                    }
+                }
+            }
+
+            .btn {
+                padding: 10rpx;
+                font-size: 22rpx;
+                color: #1EC77A;
+                border: 1rpx solid #1EC77A;
+                background-color: #e8f7f0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: 10rpx;
+                border-radius: 15rpx;
+
+                image {
+                    width: 25rpx;
+                    height: 25rpx;
+                }
+
+                text {
+                    margin: 0 10rpx;
+                }
+            }
+        }
+
+        .list {
+            padding-left: 40rpx;
+
+            .main {
+                align-items: center;
+
+                .main-image {
+                    width: 140rpx;
+                    height: 140rpx;
+                }
+
+                .controls {
+                    flex-direction: row;
+
+                    .f {
+                        margin: 30rpx;
+
+                        image {
+                            width: 40rpx;
+                            height: 40rpx;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/utils/oss-upload/oss/index.js b/utils/oss-upload/oss/index.js
index 024eb80..91b7093 100644
--- a/utils/oss-upload/oss/index.js
+++ b/utils/oss-upload/oss/index.js
@@ -2,10 +2,6 @@
  * 阿里云OSS工具类
  */
 import OSSConfig from "@/utils/oss-upload/oss/OSSConfig.js"
-//支持web端
-import {
-	uploadFileToOSS
-} from '@/utils/oss-upload/oss/web.js'
 import ossConfig from '@/config.js'
 
 /**
@@ -93,9 +89,6 @@ export function ossUploadImage({
 		count: 1,
 		sizeType,
 		success(res) {
-			// #ifdef H5
-			return uploadFileToOSS(res.tempFiles[0]).then(success).catch(fail)
-			// #endif
 			ossUpload(res.tempFilePaths[0], key, folder).then(success).catch(fail)
 		},
 		fail
@@ -123,9 +116,6 @@ export function ossUploadVideo({
 		maxDuration,
 		camera,
 		success(res) {
-			// #ifdef H5
-			return uploadFileToOSS(res.tempFile).then(success).catch(fail)
-			// #endif
 			ossUpload(res.tempFilePath, key, folder).then(success).catch(fail)
 		},
 		fail
diff --git a/utils/oss-upload/oss/web.js b/utils/oss-upload/oss/web.js
deleted file mode 100644
index dfaab6e..0000000
--- a/utils/oss-upload/oss/web.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// 此方法适用于web
-import OSS from "ali-oss"
-import config from '@/config.js'
-
-/**
- * 生成一个随机的Key
- */
-function storeKey() {
-  let s = [];
-  let hexDigits = "0123456789abcdef";
-  for (let i = 0; i < 36; i++) {
-    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
-  }
-  s[14] = "4";
-  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
-  s[8] = s[13] = s[18] = s[23] = "-";
-  return s.join("");
-}
-
-/**
- * 根据当天日期在OSS端生成文件夹
- */
-function storeFolder() {
-  const date = new Date();
-  const formatNumber = n => {
-    n = n.toString()
-    return n[1] ? n : '0' + n
-  }
-  return [date.getFullYear(), date.getMonth() + 1, date.getDate()].map(formatNumber).join('-')
-}
-
-
-export function uploadFileToOSS(file) {
-	
-	uni.showLoading({
-	    title: '上传中...'
-	});
-	
-	return new Promise((resolve,reject) => {
-		// 创建OSS实例
-		const client = new OSS(config.aliOss.config);
-		
-		// 设置文件名和文件目录
-		const suffix = '.' + file.name.split('.').pop();
-		let key = storeFolder()
-		if(key[key.length - 1] != '/') key += '/'
-		const fileName = key + storeKey() + suffix; // 注意：文件名需要是唯一的  
-		
-		// 使用put接口上传文件  
-		client.multipartUpload(fileName, file, {
-			headers: {
-			  'Content-Disposition': 'inline',
-			  'Content-Type': file.type
-			}
-		}).then(res => {
-			uni.hideLoading();
-			resolve(config.aliOss.url + res.name);
-		}).catch(err => {
-			uni.hideLoading();
-			reject(err)
-		})
-	})
-}
\ No newline at end of file