租房小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

469 lines
16 KiB

3 months ago
  1. <template>
  2. <view class="Locations">
  3. <map style="width: 100%;height: 60vh" :layer-style='5' :show-location='true' :latitude="position.latitude"
  4. :longitude="position.longitude" :markers="spotGuideMarkers" :scale="scale" @markertap="markertap" id="mapId"
  5. @callouttap="callouttap">
  6. </map>
  7. <!-- <view class="tabs">
  8. <view class=""
  9. v-for="(item, index) in tabs"
  10. :key="index"
  11. @click="setSpotGuideIndex(index)"
  12. :class="{act : spotGuideIndex == index}">
  13. {{ item }}
  14. </view>
  15. </view> -->
  16. <uv-tabs :list="houseTypeList" :activeStyle="{ color: '#1EC77A', fontWeight: 600 }" lineColor="#1EC77A"
  17. lineHeight="8rpx" lineWidth="50rpx" keyName="title" :current="currentHouseType"
  18. @click="onClickHouseType"></uv-tabs>
  19. <view class="Locations-list">
  20. <!-- 房源列表 -->
  21. <view v-if="list.length > 0">
  22. <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"
  23. v-for="(item, index) in list" :key="index">
  24. <view class="se-pos se-w-260 se-h-180">
  25. <image v-if="item.iconImage" class="se-a-80 se-pos-lt" :src="item.iconImage" mode=""></image>
  26. <image class="se-w-260 se-h-180 se-br-10" :src="item.images[0]" mode=""></image>
  27. </view>
  28. <view class="se-pl-10 se-w-p-100">
  29. <view class="se-c-black se-fs-28">
  30. {{ item.title }}
  31. </view>
  32. <view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
  33. <text>{{ item.homeType }}</text>
  34. <text>{{ item.timeGo }}</text>
  35. </view>
  36. <view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
  37. <template v-if="item.iconTitles.length > 0">
  38. <view class="se-flex">
  39. <view
  40. 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"
  41. v-for="(items, indexs) in item.iconTitles" :key="indexs">
  42. {{ items }}
  43. </view>
  44. </view>
  45. </template>
  46. <template v-else>
  47. <view></view>
  48. </template>
  49. <view class="se-c-66 se-flex se-flex-ai-c">
  50. <uv-icon name="eye"></uv-icon>
  51. <text class="se-ml-5 se-fs-18">{{ item.num }}</text>
  52. </view>
  53. </view>
  54. <view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
  55. <text class="se-c-red se-fs-24 se-fw-6 se-toe-1">{{ item.price }}/{{ item.unit }}</text>
  56. <text class="se-c-66 se-fs-22 se-toe-1">{{ item.address }}</text>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <uv-empty v-else text="该景区没有哦" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import { housePageList, houseType } from "@/common/api.js"
  67. export default {
  68. data() {
  69. return {
  70. scale: 12, //缩放级别
  71. show: true,
  72. context: uni.createInnerAudioContext(),
  73. tabs: ['遗产文化', '找美食', '找民宿', '找厕所'],
  74. spotGuideIndex: 0, // 当前选中的菜单索引
  75. position: {
  76. latitude: 23.106574,
  77. longitude: 113.324587
  78. },
  79. areaId: null, // 当前选中的区域ID
  80. // 房源列表相关数据
  81. list: [],
  82. classId: null,
  83. pageNo: 1,
  84. pageSize: 10,
  85. houseTypeList: [], // 房源类型列表
  86. currentHouseType: 0 // 当前选中的房源类型索引
  87. }
  88. },
  89. computed: {
  90. spotGuideMarkers() {
  91. let markers = [];
  92. this.list.forEach((item, index) => {
  93. if (item.latitude && item.longitude) {
  94. markers.push({
  95. id: index,
  96. latitude: item.latitude,
  97. longitude: item.longitude,
  98. iconPath: '/static/image/tourGuide/marker.png',
  99. width: 30,
  100. height: 30,
  101. callout: {
  102. content: item.spotName,
  103. color: '#000000',
  104. fontSize: 14,
  105. borderRadius: 5,
  106. bgColor: '#ffffff',
  107. padding: 5,
  108. display: 'BYCLICK'
  109. }
  110. });
  111. }
  112. });
  113. return markers;
  114. },
  115. },
  116. created() {
  117. this.getCurrentLocation()
  118. this.onHousePageList()
  119. this.onHouseType() // 获取房源类型
  120. this.onHousePageList() // 加载房源列表
  121. },
  122. onPullDownRefresh() {
  123. let that = this
  124. that.pageNo = 1
  125. that.list = []
  126. that.onHousePageList()
  127. },
  128. onReachBottom() {
  129. let that = this
  130. that.pageNo = that.pageNo + 1
  131. that.onHousePageList()
  132. },
  133. methods: {
  134. // 获取当前位置
  135. getCurrentLocation() {
  136. const that = this;
  137. uni.getLocation({
  138. type: 'wgs84',
  139. success: function (res) {
  140. console.log('当前位置的经度:' + res.longitude);
  141. console.log('当前位置的纬度:' + res.latitude);
  142. that.position.latitude = res.latitude;
  143. that.position.longitude = res.longitude;
  144. // 更新地图位置
  145. that.onHousePageList();
  146. },
  147. fail: function (err) {
  148. console.error('获取位置失败:', err);
  149. uni.showToast({
  150. title: '获取位置失败',
  151. icon: 'none'
  152. });
  153. }
  154. });
  155. },
  156. //点击tab栏
  157. clickTabs({ index, name }) {
  158. this.currentArea = index
  159. if (this.areaList[index]) {
  160. this.areaId = this.areaList[index].id
  161. }
  162. this.onHousePageList()
  163. this.$nextTick(() => {
  164. this.selectArea()
  165. })
  166. },
  167. setSpotGuideIndex(index) {
  168. this.spotGuideIndex = index
  169. this.onHousePageList()
  170. },
  171. textToSpeech() {
  172. console.log('textToSpeech');
  173. let self = this
  174. // self.context.src = this.$config.baseUrl + '/info/textToAudio?text=' + "你好"
  175. // self.context.play()
  176. // return
  177. plugin.textToSpeech({
  178. lang: "zh_CN",
  179. tts: true,
  180. content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带,北起瓷都大桥、昌江大道,南至昌江大桥、西至沿江西路,东至莲社路、胜利路。 自宋以来,景德镇先民“沿河建窑,因窑成市”,渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理,形成了世界建筑史上绝无仅有的老城格局,成就了中国“东方瓷国”的盛誉,陶瓷成为了中国走向世界,世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰,是“一带一路”海上陶瓷之路的零公里起点,是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺,讲好景德镇故事,传播中国声音的“窗口”和“名片”。",
  181. success: function (res) {
  182. self.context.src = res.filename;
  183. self.context.play()
  184. },
  185. fail: function (res) {
  186. console.log("fail tts", res)
  187. }
  188. })
  189. },
  190. //地图点击事件
  191. markertap(e) {
  192. console.log("markertap===你点击了标记点===", e)
  193. let event = this.list[e.markerId]
  194. this.onDetail(event)
  195. // uni.openLocation({
  196. // latitude: spot.latitude,
  197. // longitude: spot.longitude,
  198. // })
  199. // BYCLICK隐藏
  200. // ALWAYS显示
  201. // this.$store.commit('setDisplay',
  202. // this.spotGuideMarkers[e.markerId].id)
  203. // this.$forceUpdate()
  204. // this.spotGuideMarkers.forEach((n, i) => {
  205. // if(i == e.markerId){
  206. // // 显示气泡
  207. // n.callout.display = 'ALWAYS'
  208. // }else{
  209. // // 隐藏气泡
  210. // n.callout.display = 'BYCLICK'
  211. // }
  212. // })
  213. },
  214. openLocation(n) {
  215. uni.openLocation({
  216. latitude: n.spotLatitude,
  217. longitude: n.spotLongitude,
  218. })
  219. },
  220. //地图点击事件
  221. callouttap(e) {
  222. console.log('callouttap地图点击事件', e)
  223. let spot = this.spotGuideMarkers[e.markerId]
  224. uni.openLocation({
  225. latitude: spot.latitude,
  226. longitude: spot.longitude,
  227. })
  228. },
  229. toUrl(item) {
  230. console.log(item);
  231. if (item.categoryId == 0) {
  232. this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`)
  233. }
  234. },
  235. // 点击按钮将地图中心移动到指定定位点
  236. moveTolocation(latitude, longitude) {
  237. let mapObjs = uni.createMapContext('mapId', this)
  238. mapObjs.moveToLocation(
  239. {
  240. latitude,
  241. longitude
  242. },
  243. {
  244. complete: res => {
  245. console.log('移动完成:', res)
  246. }
  247. })
  248. // this.onRegionChange('',true)
  249. },
  250. // 点击景区,选择最近的一个景点
  251. selectArea() {
  252. let item = this.spotGuide[0]
  253. if (item && item.spotLatitude && item.spotLongitude) {
  254. this.moveTolocation(item.spotLatitude, item.spotLongitude)
  255. }
  256. },
  257. clickAreaDetail(id) {
  258. uni.navigateTo({
  259. url: '/pages_order/service/areaDetail?id=' + id
  260. })
  261. },
  262. // 获取房源类型列表
  263. onHouseType() {
  264. houseType({}).then(response => {
  265. console.info('houseType', response)
  266. this.houseTypeList = response.result
  267. }).catch(error => {
  268. })
  269. },
  270. // 点击房源类型
  271. onClickHouseType(event) {
  272. console.info(event)
  273. let that = this
  274. that.pageNo = 1
  275. that.classId = event.id
  276. that.currentHouseType = event.index
  277. that.list = []
  278. that.onHousePageList()
  279. },
  280. // 获取房源列表
  281. onHousePageList() {
  282. let that = this
  283. let params = {
  284. classId: that.classId,
  285. pageNo: that.pageNo,
  286. pageSize: that.pageSize
  287. }
  288. // 如果有位置信息,添加到参数中
  289. if (that.position.latitude && that.position.longitude) {
  290. params.latitude = that.position.latitude
  291. params.longitude = that.position.longitude
  292. }
  293. housePageList(params).then((response) => {
  294. console.info("房源列表数据", response.result.records)
  295. response.result.records.forEach((items, indexs) => {
  296. if (items.image) {
  297. items.images = items.image.split(',')
  298. } else {
  299. items.images = []
  300. }
  301. if (items.homeImage) {
  302. items.homeImages = items.homeImage.split(',')
  303. } else {
  304. items.homeImages = []
  305. }
  306. if (items.iconTitle) {
  307. items.iconTitles = items.iconTitle.split(',')
  308. } else {
  309. items.iconTitles = []
  310. }
  311. })
  312. that.list = that.list.concat(response.result.records)
  313. }).catch((error) => {
  314. })
  315. },
  316. // 点击房源详情
  317. onDetail(event) {
  318. uni.navigateTo({
  319. url: "/pages_subpack/detail/index?id=" + event.id
  320. })
  321. },
  322. }
  323. }
  324. </script>
  325. <style scoped lang="scss">
  326. .Locations {
  327. .tabs {
  328. display: flex;
  329. &>view {
  330. flex: 1;
  331. margin: 20rpx 10rpx;
  332. padding: 20rpx 10rpx;
  333. background-color: #e8f7f0;
  334. color: #1EC77A;
  335. border-radius: 40rpx;
  336. font-size: 24rpx;
  337. text-align: center;
  338. }
  339. .act {
  340. background-color: #1EC77A;
  341. color: #fff;
  342. }
  343. }
  344. .Locations-list {
  345. .main {
  346. display: flex;
  347. margin: 20rpx;
  348. .main-image {
  349. width: 150rpx;
  350. height: 150rpx;
  351. border-radius: 20rpx;
  352. }
  353. .info {
  354. margin-left: 20rpx;
  355. .title {
  356. font-size: 30rpx;
  357. font-weight: 900;
  358. }
  359. .tips {
  360. font-size: 24rpx;
  361. color: #999999;
  362. margin-top: 10rpx;
  363. }
  364. }
  365. .controls {
  366. margin-left: auto;
  367. display: flex;
  368. flex-direction: column;
  369. justify-content: center;
  370. align-items: center;
  371. .f {
  372. image {
  373. width: 50rpx;
  374. height: 50rpx;
  375. }
  376. }
  377. }
  378. .btn {
  379. padding: 10rpx;
  380. font-size: 22rpx;
  381. color: #1EC77A;
  382. border: 1rpx solid #1EC77A;
  383. background-color: #e8f7f0;
  384. display: flex;
  385. justify-content: center;
  386. align-items: center;
  387. margin-top: 10rpx;
  388. border-radius: 15rpx;
  389. image {
  390. width: 25rpx;
  391. height: 25rpx;
  392. }
  393. text {
  394. margin: 0 10rpx;
  395. }
  396. }
  397. }
  398. .list {
  399. padding-left: 40rpx;
  400. .main {
  401. align-items: center;
  402. .main-image {
  403. width: 140rpx;
  404. height: 140rpx;
  405. }
  406. .controls {
  407. flex-direction: row;
  408. .f {
  409. margin: 30rpx;
  410. image {
  411. width: 40rpx;
  412. height: 40rpx;
  413. }
  414. }
  415. }
  416. }
  417. }
  418. }
  419. }
  420. </style>