shop.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <template>
  2. <view class="content">
  3. <map class="map" scale="16" :latitude="Number(lat)" :longitude="Number(lng)" :markers="markers"></map>
  4. <view class="item flex-y-center">
  5. <image class="icon" :src="URL+obj.thumb"></image>
  6. <view class="">
  7. <text class="item-title">{{obj.title||''}}</text>
  8. <view class="announcement">
  9. {{obj.announcement||''}}
  10. </view>
  11. </view>
  12. </view>
  13. <view class="item box-pack-between">
  14. <view class="flex-y-center">
  15. <view class="iconfont icon-dianhua"></view>
  16. <text>{{obj.tel||''}}</text>
  17. </view>
  18. <view class="boda" @click="tel">
  19. <!-- <image class="img" src="../../static/images/dianhua.png" mode=""></image> -->
  20. </view>
  21. </view>
  22. <view class="flex-y-center item box-pack-between" style="padding-bottom: 27rpx;">
  23. <view class="flex">
  24. <view class="iconfont icon-dizhi"></view>
  25. <text>{{obj.address}}</text>
  26. </view>
  27. <view class="flex-y-center map-dd" @click="Location" :style="{color:setColor}">
  28. <text>导航到店</text>
  29. <view class="iconfont icon-jiantou"></view>
  30. </view>
  31. </view>
  32. <block v-if="obj.content">
  33. <view class="shop-desc">
  34. <view class="shop-desc-title flex-y-center">
  35. 商家介绍
  36. </view>
  37. <mp-html :content="obj.content" />
  38. </view>
  39. <view class="" style="height:70px;"></view>
  40. <view class="box-pack-between flex-y-center logo-pf">
  41. <view class="flex-y-center left" :style="{color:setColor}">
  42. <text class="iconfont icon-service"></text><text>商家热线</text>
  43. </view>
  44. <view class="right" @click="tel" :style="{background:setColor}">
  45. 一键拨号
  46. </view>
  47. </view>
  48. </block>
  49. </view>
  50. </template>
  51. <script>
  52. import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html'
  53. export default {
  54. components: {
  55. mpHtml
  56. },
  57. data() {
  58. return {
  59. obj: {},
  60. markers: [],
  61. store_id: "",
  62. lat: "",
  63. lng: "",
  64. URL: getApp().globalData.URL,
  65. setColor: "",
  66. }
  67. },
  68. onLoad(e) {
  69. uni.setNavigationBarColor({
  70. frontColor: '#ffffff',
  71. backgroundColor: this.$store.state.color,
  72. })
  73. this.setColor = this.$store.state.color;
  74. this.store_id = uni.getStorageSync('store_id')
  75. this.system();
  76. },
  77. onShareAppMessage(e) {
  78. return {}
  79. },
  80. methods: {
  81. look() {
  82. window.location.href = this.obj.url;
  83. },
  84. tel(e) {
  85. uni.makePhoneCall({
  86. phoneNumber: this.obj.tel //仅为示例
  87. });
  88. },
  89. Location() {
  90. // #ifdef MP-WEIXIN
  91. uni.openLocation({
  92. latitude: Number(this.lat),
  93. longitude: Number(this.lng),
  94. scale: 18,
  95. address: this.obj.address,
  96. name: this.obj.title,
  97. fail: function() {
  98. uni.getSetting({
  99. success: function(e) {
  100. e.authSetting["scope.location"] ? console.log("取消") : uni
  101. .showModal({
  102. title: "提示",
  103. content: "您拒绝了获取地址授权,部分功能无法使用,点击确定重新获取授权。",
  104. showCancel: !1,
  105. success: function(e) {
  106. e.confirm && uni.openSetting({
  107. success: function(e) {
  108. e.authSetting[
  109. "scope.location"
  110. ];
  111. },
  112. fail: function(e) {}
  113. });
  114. }
  115. });
  116. }
  117. });
  118. }
  119. })
  120. // #endif
  121. // #ifdef MP-ALIPAY
  122. my.openLocation({
  123. longitude: this.lng,
  124. latitude: this.lat,
  125. address: this.obj.address,
  126. name: this.obj.title,
  127. scale: 18
  128. })
  129. // #endif
  130. },
  131. system() {
  132. this.$http.request('xcx/system', {
  133. store_id: this.store_id,
  134. table_id: ""
  135. }, "", "", ).then(res => {
  136. console.log(res, "res")
  137. this.obj = res.data;
  138. let markers = [];
  139. let subscribe = res.data.set.coordinates.split(',');
  140. this.lat = subscribe[0];
  141. this.lng = subscribe[1];
  142. markers.push({
  143. id: 1,
  144. latitude: subscribe[0],
  145. longitude: subscribe[1],
  146. title: res.data.title,
  147. iconPath: this.URL + res.data.thumb,
  148. width: 50,
  149. height: 50,
  150. });
  151. this.markers = markers;
  152. console.log(this.markers, "this.markers")
  153. })
  154. },
  155. }
  156. }
  157. </script>
  158. <style lang="scss">
  159. page {
  160. background: #F1F1F1;
  161. font-size: 24rpx;
  162. }
  163. .iconfont {
  164. margin-right: 20rpx;
  165. }
  166. .icon-service {
  167. font-size: 50rpx;
  168. }
  169. .icon-jiantou {
  170. font-size: 24rpx;
  171. }
  172. .map-dd {
  173. min-width: 157rpx;
  174. }
  175. .item-title {
  176. font-size: 32rpx;
  177. }
  178. .shop-desc {
  179. padding: 0rpx 30rpx;
  180. font-size: 26rpx;
  181. background: #FFFFFF;
  182. margin-top: 10rpx;
  183. }
  184. .shop-desc-title {
  185. height: 86rpx;
  186. background: rgba(255, 255, 255, 1);
  187. font-size: 32rpx;
  188. font-family: PingFangSC-Medium;
  189. color: rgba(20, 31, 51, 1);
  190. border-bottom: 1rpx solid #F1F1F1;
  191. }
  192. .content {
  193. .map {
  194. width: 100%;
  195. height: 600rpx;
  196. }
  197. .item {
  198. padding: 20rpx 30rpx;
  199. font-size: 26rpx;
  200. background: #FFFFFF;
  201. .icon {
  202. width: 80rpx;
  203. height: 80rpx;
  204. margin-right: 20rpx;
  205. min-width: 80rpx;
  206. }
  207. .boda {
  208. border-left: 1px solid #fff;
  209. .img {
  210. width: 40rpx;
  211. height: 40rpx;
  212. margin-left: 10px;
  213. }
  214. }
  215. }
  216. .logo-pf {
  217. position: fixed;
  218. width: 100%;
  219. bottom: 0;
  220. padding: 20rpx;
  221. border-top: 1rpx solid #F1F1F1;
  222. background-color: #FFFFFF;
  223. .left {
  224. font-size: 30rpx;
  225. .icon {
  226. width: 80rpx;
  227. height: 80rpx;
  228. }
  229. .announcement {
  230. font-size: 26rpx;
  231. }
  232. }
  233. .right {
  234. width: 200rpx;
  235. height: 70rpx;
  236. line-height: 70rpx;
  237. background: #007AFF;
  238. text-align: center;
  239. font-size: 26rpx;
  240. border-radius: 4rpx;
  241. color: #FFFFFF;
  242. }
  243. }
  244. }
  245. </style>