storeDetail.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="content">
  3. <view class="page-content">
  4. <view class="header">
  5. <image class="list-img" :src="'../../static/img/mddef.jpg'"></image>
  6. <view class="store-info">
  7. <view class="name">
  8. 贞观路站
  9. </view>
  10. <view class="address">
  11. 陕西省西安市未央区北二环贞观路
  12. </view>
  13. <view class="location">
  14. <view class="left">
  15. <uni-icons class="icon" size="16" type="paperplane"></uni-icons>
  16. <text>0.1km</text>
  17. </view>
  18. <view class="right">
  19. <u-icon class="icon" size="32" name="clock"></u-icon>
  20. <text>8:00-22:00 营业</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 网点标签 -->
  26. <view class="store-mark">
  27. <text class="mark-item">
  28. 30分钟内免费洗车
  29. </text>
  30. <text class="mark-item">
  31. 30分钟内免费洗车
  32. </text>
  33. </view>
  34. <view class="store-server">
  35. 服务项目:
  36. <text>标准速洗</text>
  37. <text>标准速洗</text>
  38. </view>
  39. <!-- 路线指引 -->
  40. <view class="store-rich store-line">
  41. <view class="line-title">
  42. * 路线指引 *
  43. </view>
  44. </view>
  45. <!-- 温馨提示 -->
  46. <view class="store-rich">
  47. <view class="line-title">
  48. * 温馨提示 *
  49. </view>
  50. </view>
  51. </view>
  52. <view class="footer">
  53. <button type="warn" plain @click="showPop=true">排队情况</button>
  54. <button type="warn" @click="openLocation">立刻导航</button>
  55. </view>
  56. <u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
  57. <image class="pop-img" :src="'../../static/img/mddef.jpg'"></image>
  58. </u-popup>
  59. </view>
  60. </template>
  61. <script>
  62. export default {
  63. components: {
  64. },
  65. data() {
  66. return {
  67. showPop: false, // 是否显示排队弹窗
  68. storeInfo: {
  69. latitude: '34.29318',
  70. longitude: '108.96712',
  71. }
  72. }
  73. },
  74. onLoad(option) {
  75. if (option.id) {
  76. this.getStoreDetail(option.id)
  77. }
  78. },
  79. methods: {
  80. // 获取网点详情信息
  81. getStoreDetail (id) {
  82. },
  83. // 打开导航位置信息界面
  84. openLocation () {
  85. // let latitude = this.storeInfo.latitude
  86. // let longitude = this.storeInfo.longitude
  87. uni.getLocation({
  88. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  89. success: function (res) {
  90. const latitude = res.latitude;
  91. const longitude = res.longitude;
  92. uni.openLocation({
  93. latitude: latitude,
  94. longitude: longitude,
  95. success: function () {
  96. console.log('success');
  97. }
  98. })
  99. }
  100. });
  101. }
  102. }
  103. }
  104. </script>
  105. <style lang="scss" scoped>
  106. .content{
  107. padding: 0 20rpx;
  108. .page-content{
  109. flex: 1;
  110. overflow-y: scroll;
  111. }
  112. .header {
  113. padding: 20rpx 0;
  114. display: flex;
  115. width: 100%;
  116. height: 200rpx;
  117. .list-img {
  118. width: 20%;
  119. height: 100%;
  120. margin-right: 10rpx;
  121. }
  122. .store-info {
  123. height: 100%;
  124. display: flex;
  125. flex: 1;
  126. flex-direction: column;
  127. justify-content: space-between;
  128. margin-right: 10rpx;
  129. .name {
  130. font-size: 32rpx;
  131. color: #000;
  132. }
  133. .address{
  134. font-size: 26rpx;
  135. }
  136. .location {
  137. display: flex;
  138. align-items: center;
  139. font-size: 24rpx;
  140. .left {
  141. margin-right: 20rpx;
  142. }
  143. .icon {
  144. color: #999;
  145. margin-right: 10rpx;
  146. }
  147. }
  148. }
  149. }
  150. .store-mark{
  151. padding: 20rpx 0;
  152. width: 100%;
  153. .mark-item{
  154. padding: 10rpx 20rpx;
  155. border: 1px solid #eee;
  156. border-radius: 30rpx;
  157. margin-right: 20rpx;
  158. font-size: 24rpx;
  159. }
  160. }
  161. .store-server{
  162. padding: 20rpx 0;
  163. width: 100%;
  164. font-size: 24rpx;
  165. border-bottom: 1px solid #eee;
  166. text{
  167. margin-right: 30rpx;
  168. }
  169. }
  170. .store-rich{
  171. padding: 20rpx 0;
  172. width: 100%;
  173. display: flex;
  174. flex-direction: column;
  175. align-items: center;
  176. justify-content: center;
  177. }
  178. .store-line{
  179. border-bottom: 1px solid #eee;
  180. }
  181. .footer{
  182. width: 100%;
  183. display: flex;
  184. margin-bottom: 20rpx;
  185. justify-content: space-between;
  186. button{
  187. width: 45%;
  188. }
  189. }
  190. .pop-img{
  191. width: 100%;
  192. height: 100%;
  193. }
  194. }
  195. </style>