景徳镇旅游微信小程序
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.

291 lines
6.7 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="Locations">
  3. <map
  4. style="width: 100%;height: 60vh"
  5. :layer-style='5'
  6. :show-location='true'
  7. :latitude="position.latitude"
  8. :longitude="position.longitude"
  9. :markers="spotGuideMarkers"
  10. :scale="scale"
  11. @markertap="markertap"
  12. @callouttap='callouttap'>
  13. </map>
  14. <view class="tabs">
  15. <view class=""
  16. v-for="(item, index) in tabs"
  17. :key="index"
  18. @click="setSpotGuideIndex(index)"
  19. :class="{act : spotGuideIndex == index}">
  20. {{ item }}
  21. </view>
  22. </view>
  23. <!-- '文化遗产', '找厕所', '找美食', '找民宿' -->
  24. <!-- v-if="spotGuideIndex != 1" -->
  25. <view class="Locations-list">
  26. <view class="main" v-if="spotGuideIndex == 0 && area">
  27. <image
  28. class="main-image"
  29. :src="area.areaImage"
  30. mode="aspectFill"></image>
  31. <view class="info">
  32. <view class="title">
  33. {{ area.areaName }}
  34. </view>
  35. <view class="tips">
  36. {{ spotGuide.length }}个遗产点
  37. </view>
  38. <view class="btn">
  39. <image src="/static/image/tourGuide/a.png"
  40. mode=""></image>
  41. <text class=""
  42. @click="textToSpeech(area.areaBrief)">
  43. 语音讲解
  44. </text>
  45. </view>
  46. </view>
  47. <view class="controls">
  48. <!-- <view class="f">
  49. <image src="/static/image/tourGuide/f.png" mode=""></image>
  50. </view> -->
  51. <view class="btn"
  52. @click="show = !show">
  53. <text class="">
  54. {{ show ? '收起' : '展开' }}
  55. </text>
  56. <uv-icon
  57. :name="show ? 'arrow-up' : 'arrow-down'"
  58. size="30rpx"></uv-icon>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="list"
  63. v-if="show">
  64. <view class="main"
  65. v-for="(item, index) in spotGuide"
  66. :key="index">
  67. <image
  68. class="main-image"
  69. :src="item.spotImage"
  70. mode="aspectFill"></image>
  71. <view class="info">
  72. <view class="title">
  73. {{ item.spotName }}
  74. </view>
  75. <view class="tips" v-if="item.distance > 1">
  76. 距离您{{ item.distance }}km
  77. </view>
  78. <view class="tips" v-else>
  79. 距离您{{ item.distance * 1000 }}m
  80. </view>
  81. </view>
  82. <view class="controls">
  83. <view class="f"
  84. style="transform: scale(1.3);"
  85. v-if="item.categoryId != 0">
  86. <image
  87. :src="`/static/image/tourGuide/${item.categoryId}.png`" mode=""></image>
  88. </view>
  89. <view class="f">
  90. <image
  91. @click="openLocation(item)"
  92. src="/static/image/tourGuide/f.png" mode=""></image>
  93. </view>
  94. <view
  95. v-if="item.categoryId == 0"
  96. class="f">
  97. <image
  98. @click="textToSpeech"
  99. src="/static/image/tourGuide/a.png" mode=""></image>
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. </view>
  105. <!-- '路径定制', -->
  106. </view>
  107. </template>
  108. <script>
  109. // var plugin = requirePlugin("WechatSI")
  110. // "plugins" : {
  111. // "WechatSI" : {
  112. // "version" : "0.3.1",
  113. // "provider" : "wx069ba97219f66d99"
  114. // }
  115. // }
  116. import { mapState, mapGetters } from 'vuex'
  117. export default {
  118. props : ['spotGuide', 'spotGuideMarkers', 'area'],
  119. data() {
  120. return {
  121. latitude: 23.106574, //纬度
  122. longitude: 113.324587, //经度
  123. scale: 12, //缩放级别
  124. show : true,
  125. context : uni.createInnerAudioContext(),
  126. tabs : ['文化遗产',
  127. // '路径定制',
  128. '找厕所'
  129. , '找美食', '找民宿'],
  130. }
  131. },
  132. computed : {
  133. // ...mapGetters(['spotGuide', 'spotGuideMarkers']),
  134. ...mapState(['position', 'spotGuideIndex']),
  135. },
  136. methods: {
  137. // 修改前选择的菜单,0-景点 1-美食店铺 2-民宿 3-厕所
  138. setSpotGuideIndex(index){
  139. this.$store.commit('setSpotGuideIndex', index)
  140. },
  141. textToSpeech(){
  142. console.log('textToSpeech');
  143. let self = this
  144. plugin.textToSpeech({
  145. lang: "zh_CN",
  146. tts: true,
  147. content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带,北起瓷都大桥、昌江大道,南至昌江大桥、西至沿江西路,东至莲社路、胜利路。 自宋以来,景德镇先民“沿河建窑,因窑成市”,渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理,形成了世界建筑史上绝无仅有的老城格局,成就了中国“东方瓷国”的盛誉,陶瓷成为了中国走向世界,世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰,是“一带一路”海上陶瓷之路的零公里起点,是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺,讲好景德镇故事,传播中国声音的“窗口”和“名片”。",
  148. success: function(res) {
  149. self.context.src = res.filename;
  150. self.context.play()
  151. },
  152. fail: function(res) {
  153. console.log("fail tts", res)
  154. }
  155. })
  156. },
  157. //地图点击事件
  158. markertap(e) {
  159. console.log("===你点击了标记点===", e)
  160. let spot = this.spotGuideMarkers[e.markerId]
  161. uni.openLocation({
  162. latitude: spot.latitude,
  163. longitude: spot.longitude,
  164. })
  165. },
  166. openLocation(n){
  167. uni.openLocation({
  168. latitude: n.spotLatitude,
  169. longitude: n.spotLongitude,
  170. })
  171. },
  172. //地图点击事件
  173. callouttap(e) {
  174. console.log('地图点击事件', e)
  175. },
  176. }
  177. }
  178. </script>
  179. <style scoped lang="scss">
  180. .Locations{
  181. .tabs{
  182. display: flex;
  183. &>view{
  184. flex: 1;
  185. margin: 20rpx 10rpx;
  186. padding: 20rpx 10rpx;
  187. background-color: #F8E2E2;
  188. color: #C83741;
  189. border-radius: 40rpx;
  190. font-size: 24rpx;
  191. text-align: center;
  192. }
  193. .act{
  194. background-color: #C83741;
  195. color: #fff;
  196. }
  197. }
  198. .Locations-list{
  199. .main{
  200. display: flex;
  201. margin: 20rpx;
  202. .main-image{
  203. width: 150rpx;
  204. height: 150rpx;
  205. border-radius: 20rpx;
  206. }
  207. .info{
  208. margin-left: 20rpx;
  209. .title{
  210. font-size: 30rpx;
  211. font-weight: 900;
  212. }
  213. .tips{
  214. font-size: 24rpx;
  215. color: #999999;
  216. margin-top: 10rpx;
  217. }
  218. }
  219. .controls{
  220. margin-left: auto;
  221. display: flex;
  222. flex-direction: column;
  223. justify-content: center;
  224. align-items: center;
  225. .f{
  226. image{
  227. width: 50rpx;
  228. height: 50rpx;
  229. }
  230. }
  231. }
  232. .btn{
  233. padding: 10rpx;
  234. font-size: 22rpx;
  235. color: $uni-color;
  236. border: 1rpx solid $uni-color;
  237. background-color: #F4E4C4;
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. margin-top: 10rpx;
  242. border-radius: 15rpx;
  243. image{
  244. width: 25rpx;
  245. height: 25rpx;
  246. }
  247. text{
  248. margin: 0 10rpx;
  249. }
  250. }
  251. }
  252. .list{
  253. padding-left: 40rpx;
  254. .main{
  255. align-items: center;
  256. .main-image{
  257. width: 140rpx;
  258. height: 140rpx;
  259. }
  260. .controls{
  261. flex-direction: row;
  262. .f{
  263. margin: 30rpx;
  264. image{
  265. width: 40rpx;
  266. height: 40rpx;
  267. }
  268. }
  269. }
  270. }
  271. }
  272. }
  273. }
  274. </style>