storeDetail.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. {{storeInfo.name}}
  9. </view>
  10. <view class="address">
  11. {{storeInfo.addrDetail}}
  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>{{storeInfo.beginTime}}-{{storeInfo.endTime}} 营业</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 网点标签 -->
  26. <view class="store-mark">
  27. <text v-for="(item,index) in storeInfo.labelList" :key="index" class="mark-item">
  28. {{item}}
  29. </text>
  30. </view>
  31. <view class="store-server">
  32. 服务项目:
  33. <text>标准速洗</text>
  34. <text>标准速洗</text>
  35. </view>
  36. <!-- 路线指引 -->
  37. <view class="store-rich store-line">
  38. <view class="line-title">
  39. * 路线指引 *
  40. </view>
  41. <view class="line-content">
  42. {{storeInfo.guidance}}
  43. </view>
  44. </view>
  45. <!-- 温馨提示 -->
  46. <view class="store-rich">
  47. <view class="line-title">
  48. * 温馨提示 *
  49. </view>
  50. <view class="line-content">
  51. {{storeInfo.reminder}}
  52. </view>
  53. </view>
  54. </view>
  55. <view class="footer">
  56. <button type="warn" plain @click="showPop=true">排队情况</button>
  57. <button type="warn" @click="openLocation">立刻导航</button>
  58. </view>
  59. <u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
  60. <image class="pop-img" :src="'/static/img/mddef.jpg'"></image>
  61. </u-popup>
  62. </view>
  63. </template>
  64. <script>
  65. import {getStoreDetail} from '@/api/store.js'
  66. export default {
  67. components: {
  68. },
  69. data() {
  70. return {
  71. showPop: false, // 是否显示排队弹窗
  72. storeInfo: {}
  73. }
  74. },
  75. onLoad(option) {
  76. if (option.id) {
  77. this.getStoreDetail(option.id)
  78. }
  79. },
  80. methods: {
  81. // 获取网点详情信息
  82. getStoreDetail (id) {
  83. uni.showLoading({
  84. title: '加载中...'
  85. })
  86. getStoreDetail({id:id}).then(res=>{
  87. uni.hideLoading()
  88. if (res.status == 200) {
  89. this.storeInfo = Object.assign({},res.data)
  90. if (this.storeInfo.addrDetail.indexOf("省") > 0 && this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") >
  91. 0) {
  92. this.storeInfo.addrDetail = this.storeInfo.addrDetail
  93. } else {
  94. if (this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") > 0) {
  95. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrDetail
  96. } else if (this.storeInfo.addrDetail.indexOf("区") > 0) {
  97. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDetail
  98. } else {
  99. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDistrictName + this.storeInfo.addrDetail
  100. }
  101. }
  102. this.storeInfo.distance = this.storeInfo.distanct && this.storeInfo.distanct.distance ? Math.round(this.storeInfo.distanct.distance / 1000) : ''
  103. } else {
  104. this.toashMsg(res.message)
  105. }
  106. })
  107. },
  108. // 获取排队情况
  109. getWaitPhone () {
  110. },
  111. // 打开导航位置信息界面
  112. openLocation () {
  113. let data = this.storeInfo
  114. uni.getLocation({
  115. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  116. success: function (res) {
  117. const latitude = res.latitude;
  118. const longitude = res.longitude;
  119. uni.openLocation({
  120. latitude: latitude,
  121. longitude: longitude,
  122. name: data.name,
  123. address: data.addrDetail,
  124. success: function () {
  125. console.log('success');
  126. }
  127. })
  128. }
  129. });
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss" scoped>
  135. .content{
  136. padding: 0 20rpx;
  137. .page-content{
  138. flex: 1;
  139. overflow-y: scroll;
  140. }
  141. .header {
  142. padding: 20rpx 0;
  143. display: flex;
  144. .store-info {
  145. display: flex;
  146. flex: 1;
  147. flex-direction: column;
  148. justify-content: space-between;
  149. padding: 0 20rpx;
  150. .name {
  151. font-size: 32rpx;
  152. color: #000;
  153. }
  154. .address{
  155. font-size: 26rpx;
  156. }
  157. .location {
  158. display: flex;
  159. align-items: center;
  160. font-size: 24rpx;
  161. .left {
  162. margin-right: 20rpx;
  163. }
  164. .icon {
  165. color: #999;
  166. margin-right: 5rpx;
  167. }
  168. }
  169. }
  170. }
  171. .store-mark{
  172. padding: 20rpx 0;
  173. width: 100%;
  174. .mark-item{
  175. padding: 10rpx 20rpx;
  176. border: 1px solid #eee;
  177. border-radius: 30rpx;
  178. margin-right: 20rpx;
  179. font-size: 24rpx;
  180. }
  181. }
  182. .store-server{
  183. padding: 20rpx 0;
  184. width: 100%;
  185. font-size: 24rpx;
  186. border-bottom: 1px solid #eee;
  187. text{
  188. margin-right: 30rpx;
  189. }
  190. }
  191. .store-rich{
  192. padding: 20rpx 0;
  193. width: 100%;
  194. display: flex;
  195. flex-direction: column;
  196. align-items: center;
  197. justify-content: center;
  198. }
  199. .store-line{
  200. border-bottom: 1px solid #eee;
  201. }
  202. .footer{
  203. width: 100%;
  204. display: flex;
  205. margin-bottom: 20rpx;
  206. justify-content: space-between;
  207. button{
  208. width: 45%;
  209. }
  210. }
  211. .pop-img{
  212. width: 100%;
  213. height: 100%;
  214. }
  215. }
  216. </style>