storeDetail.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="content">
  3. <view class="page-content">
  4. <view class="header">
  5. <u-image width="160rpx" height="160rpx" :border-radius="10" src="/static/img/mddef.jpg"></u-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. uni.getLocation({
  86. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  87. success: function (res) {
  88. const latitude = res.latitude;
  89. const longitude = res.longitude;
  90. uni.openLocation({
  91. latitude: latitude,
  92. longitude: longitude,
  93. name: '贞观路站',
  94. address: '陕西省西安市未央区北二环贞观路',
  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. .store-info {
  116. display: flex;
  117. flex: 1;
  118. flex-direction: column;
  119. justify-content: space-between;
  120. padding: 0 20rpx;
  121. .name {
  122. font-size: 32rpx;
  123. color: #000;
  124. }
  125. .address{
  126. font-size: 26rpx;
  127. }
  128. .location {
  129. display: flex;
  130. align-items: center;
  131. font-size: 24rpx;
  132. .left {
  133. margin-right: 20rpx;
  134. }
  135. .icon {
  136. color: #999;
  137. margin-right: 5rpx;
  138. }
  139. }
  140. }
  141. }
  142. .store-mark{
  143. padding: 20rpx 0;
  144. width: 100%;
  145. .mark-item{
  146. padding: 10rpx 20rpx;
  147. border: 1px solid #eee;
  148. border-radius: 30rpx;
  149. margin-right: 20rpx;
  150. font-size: 24rpx;
  151. }
  152. }
  153. .store-server{
  154. padding: 20rpx 0;
  155. width: 100%;
  156. font-size: 24rpx;
  157. border-bottom: 1px solid #eee;
  158. text{
  159. margin-right: 30rpx;
  160. }
  161. }
  162. .store-rich{
  163. padding: 20rpx 0;
  164. width: 100%;
  165. display: flex;
  166. flex-direction: column;
  167. align-items: center;
  168. justify-content: center;
  169. }
  170. .store-line{
  171. border-bottom: 1px solid #eee;
  172. }
  173. .footer{
  174. width: 100%;
  175. display: flex;
  176. margin-bottom: 20rpx;
  177. justify-content: space-between;
  178. button{
  179. width: 45%;
  180. }
  181. }
  182. .pop-img{
  183. width: 100%;
  184. height: 100%;
  185. }
  186. }
  187. </style>