storeDetail.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  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="storeInfo?storeInfo.icon:''"></u-image>
  6. <view class="store-info">
  7. <view class="name">
  8. {{storeInfo ?storeInfo.name : ''}}
  9. </view>
  10. <view class="address">
  11. {{storeInfo?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>{{storeInfo?storeInfo.distance:''}}km</text>
  17. </view>
  18. <view class="right">
  19. <u-icon class="icon" size="32" name="clock"></u-icon>
  20. <text>{{storeInfo?storeInfo.beginTime:''}}-{{storeInfo?storeInfo.endTime:''}} 营业</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 网点标签 -->
  26. <view class="store-mark">
  27. <text v-for="(item,index) in labelList" :key="index" class="mark-item">
  28. {{item}}
  29. </text>
  30. </view>
  31. <view class="store-server">
  32. 服务项目:
  33. <text v-for="item in storeInfo.itemVOList" :key="item.id">{{item.itemName}}</text>
  34. </view>
  35. <!-- 路线指引 -->
  36. <view class="store-rich store-line">
  37. <view class="line-title">
  38. * 路线指引 *
  39. </view>
  40. <view class="line-content">
  41. <u-parse :html="storeInfo&&storeInfo.guidance?storeInfo.guidance:''"></u-parse>
  42. </view>
  43. </view>
  44. <!-- 温馨提示 -->
  45. <view class="store-rich">
  46. <view class="line-title">
  47. * 温馨提示 *
  48. </view>
  49. <view class="line-content">
  50. <u-parse :html="storeInfo&&storeInfo.reminder?storeInfo.reminder:''"></u-parse>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="footer">
  55. <button type="warn" plain @click="getWaitPhoto">排队情况</button>
  56. <button type="warn" @click="openLocation">立刻导航</button>
  57. </view>
  58. <u-popup v-model="showPop" mode="center" width="90%" height="60%" closeable>
  59. <image class="pop-img" :src="waitPhoto"></image>
  60. </u-popup>
  61. </view>
  62. </template>
  63. <script>
  64. import {getStoreDetail, getWaitPhoto} from '@/api/store.js'
  65. export default {
  66. components: {
  67. },
  68. data() {
  69. return {
  70. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  71. currentPosition: {
  72. lat: '36.636193',
  73. lng: '101.760521'
  74. },
  75. showPop: false, // 是否显示排队弹窗
  76. storeInfo: null, // 网点详细信息
  77. labelList: [], // 网点标签
  78. waitPhoto: '' // 排队照片
  79. }
  80. },
  81. onLoad(option) {
  82. // 获取当前经纬度
  83. let _this = this
  84. uni.getLocation({
  85. type: 'wgs84', // 默认wgs84
  86. success: function(res) {
  87. _this.currentPosition.lat = res.latitude;
  88. _this.currentPosition.lng = res.longitude;
  89. // 查询门店信息
  90. if (option.id) {
  91. _this.getStoreDetail(option.id)
  92. }
  93. },
  94. fail: function(res) {
  95. console.log(res)
  96. // 查询门店信息
  97. if (option.id) {
  98. _this.getStoreDetail(option.id)
  99. }
  100. },
  101. });
  102. },
  103. methods: {
  104. // 获取网点详情信息
  105. getStoreDetail (id) {
  106. uni.showLoading({
  107. title: '加载中...'
  108. })
  109. let params = {
  110. id: id,
  111. lat: this.currentPosition.lat,
  112. lng: this.currentPosition.lng
  113. }
  114. getStoreDetail(params).then(res=>{
  115. uni.hideLoading()
  116. if (res.status == 200) {
  117. this.storeInfo = Object.assign({},res.data)
  118. if (this.storeInfo.addrDetail.indexOf("省") > 0 && this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") >
  119. 0) {
  120. this.storeInfo.addrDetail = this.storeInfo.addrDetail
  121. } else {
  122. if (this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") > 0) {
  123. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrDetail
  124. } else if (this.storeInfo.addrDetail.indexOf("区") > 0) {
  125. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDetail
  126. } else {
  127. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDistrictName + this.storeInfo.addrDetail
  128. }
  129. }
  130. this.getOptionName()
  131. this.storeInfo.distance = this.storeInfo.distanct && this.storeInfo.distanct.distance ? Math.round(this.storeInfo.distanct.distance / 1000) : ''
  132. } else {
  133. this.toashMsg(res.message)
  134. }
  135. })
  136. },
  137. // 匹配数据字典 获取相应的name
  138. getOptionName () {
  139. console.log(222)
  140. let storeLabelList = this.$store.state.vuex_storeLabel // 网点标签数据字典列表
  141. let arr = []
  142. this.storeInfo.labelList.map(item =>{
  143. let p = storeLabelList.find((i) => {
  144. return i.code == item
  145. })
  146. if (p) {
  147. arr.push(p.dispName)
  148. }
  149. })
  150. this.labelList = arr
  151. },
  152. // 获取排队情况
  153. getWaitPhoto () {
  154. uni.showLoading({
  155. title: '加载中...',
  156. mask: true
  157. })
  158. let deviceNo = this.storeInfo.deviceVOList && this.storeInfo.deviceVOList.length? this.storeInfo.deviceVOList[0].deviceNo :''
  159. getWaitPhoto({deviceNo:deviceNo}).then(res=>{
  160. uni.hideLoading()
  161. if(res.status==200) {
  162. this.waitPhoto = res.data
  163. this.showPop=true
  164. } else {
  165. this.toashMsg(res.message)
  166. }
  167. })
  168. },
  169. // 打开导航位置信息界面
  170. openLocation () {
  171. let data = this.storeInfo
  172. uni.getLocation({
  173. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  174. success: function (res) {
  175. const latitude = res.latitude;
  176. const longitude = res.longitude;
  177. uni.openLocation({
  178. latitude: latitude,
  179. longitude: longitude,
  180. name: data.name,
  181. address: data.addrDetail,
  182. success: function () {
  183. console.log('success');
  184. }
  185. })
  186. }
  187. });
  188. }
  189. }
  190. }
  191. </script>
  192. <style lang="scss" scoped>
  193. .content{
  194. padding: 0 20rpx;
  195. width: 100%;
  196. .page-content{
  197. flex: 1;
  198. overflow-y: scroll;
  199. }
  200. .header {
  201. padding: 20rpx 0;
  202. display: flex;
  203. .store-info {
  204. display: flex;
  205. flex: 1;
  206. flex-direction: column;
  207. justify-content: space-between;
  208. padding: 0 20rpx;
  209. .name {
  210. font-size: 32rpx;
  211. color: #000;
  212. }
  213. .address{
  214. font-size: 26rpx;
  215. }
  216. .location {
  217. display: flex;
  218. align-items: center;
  219. font-size: 24rpx;
  220. .left {
  221. margin-right: 20rpx;
  222. }
  223. .icon {
  224. color: #999;
  225. margin-right: 5rpx;
  226. }
  227. }
  228. }
  229. }
  230. .store-mark{
  231. padding: 20rpx 0;
  232. width: 100%;
  233. .mark-item{
  234. padding: 10rpx 20rpx;
  235. border: 1px solid #eee;
  236. border-radius: 30rpx;
  237. margin-right: 20rpx;
  238. font-size: 24rpx;
  239. }
  240. }
  241. .store-server{
  242. padding: 20rpx 0;
  243. width: 100%;
  244. font-size: 24rpx;
  245. border-bottom: 1px solid #eee;
  246. text{
  247. margin-right: 30rpx;
  248. }
  249. }
  250. .store-rich{
  251. padding: 20rpx 0;
  252. width: 100%;
  253. display: flex;
  254. flex-direction: column;
  255. align-items: center;
  256. justify-content: center;
  257. }
  258. .store-line{
  259. border-bottom: 1px solid #eee;
  260. }
  261. .footer{
  262. width: 100%;
  263. display: flex;
  264. margin-bottom: 20rpx;
  265. justify-content: space-between;
  266. button{
  267. width: 45%;
  268. }
  269. }
  270. .pop-img{
  271. width: 100%;
  272. height: 100%;
  273. }
  274. }
  275. </style>