storeDetail.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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" v-if="storeInfo&&storeInfo.guidance">
  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" v-if="storeInfo&&storeInfo.reminder">
  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" :loading="loading" plain @click="getWaitPhoto">排队情况</button>
  56. <button type="warn" @click="openLocation">立刻导航</button>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import {getStoreDetail, getWaitPhoto} from '@/api/store.js'
  62. export default {
  63. components: {
  64. },
  65. data() {
  66. return {
  67. // 用户拒绝授权位置信息时默认展示青海西宁位置地图
  68. currentPosition: {
  69. lat: '36.636193',
  70. lng: '101.760521'
  71. },
  72. storeInfo: null, // 网点详细信息
  73. labelList: [], // 网点标签
  74. loading: false // 是否显示排队按钮loading
  75. }
  76. },
  77. onLoad(option) {
  78. // 获取当前经纬度
  79. let _this = this
  80. this.pageInit()
  81. uni.getLocation({
  82. type: 'wgs84', // 默认wgs84
  83. success: function(res) {
  84. _this.currentPosition.lat = res.latitude;
  85. _this.currentPosition.lng = res.longitude;
  86. // 查询门店信息
  87. if (option.id) {
  88. _this.getStoreDetail(option.id)
  89. }
  90. },
  91. fail: function(res) {
  92. console.log(res)
  93. // 查询门店信息
  94. if (option.id) {
  95. _this.getStoreDetail(option.id)
  96. }
  97. },
  98. });
  99. },
  100. methods: {
  101. pageInit () {
  102. this.storeInfo = null
  103. this.labelList = []
  104. this.loading = false
  105. },
  106. // 获取网点详情信息
  107. getStoreDetail (id) {
  108. uni.showLoading({
  109. title: '加载中...'
  110. })
  111. let params = {
  112. id: id,
  113. lat: this.currentPosition.lat,
  114. lng: this.currentPosition.lng
  115. }
  116. getStoreDetail(params).then(res=>{
  117. uni.hideLoading()
  118. if (res.status == 200) {
  119. this.storeInfo = Object.assign({},res.data)
  120. if (this.storeInfo.addrDetail.indexOf("省") > 0 && this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") >
  121. 0) {
  122. this.storeInfo.addrDetail = this.storeInfo.addrDetail
  123. } else {
  124. if (this.storeInfo.addrDetail.indexOf("市") > 0 && this.storeInfo.addrDetail.indexOf("区") > 0) {
  125. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrDetail
  126. } else if (this.storeInfo.addrDetail.indexOf("区") > 0) {
  127. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDetail
  128. } else {
  129. this.storeInfo.addrDetail = this.storeInfo.addrProvinceName + this.storeInfo.addrCityName + this.storeInfo.addrDistrictName + this.storeInfo.addrDetail
  130. }
  131. }
  132. this.getOptionName()
  133. this.storeInfo.distance = this.storeInfo.distanct && this.storeInfo.distanct.distance ? Math.round(this.storeInfo.distanct.distance / 1000) : ''
  134. } else {
  135. }
  136. })
  137. },
  138. // 匹配数据字典 获取相应的name
  139. getOptionName () {
  140. console.log(222)
  141. let storeLabelList = this.$store.state.vuex_storeLabel // 网点标签数据字典列表
  142. let arr = []
  143. this.storeInfo.labelList.map(item =>{
  144. let p = storeLabelList.find((i) => {
  145. return i.code == item
  146. })
  147. if (p) {
  148. arr.push(p.dispName)
  149. }
  150. })
  151. this.labelList = arr
  152. },
  153. // 获取排队情况
  154. getWaitPhoto () {
  155. this.loading = true
  156. let deviceNo = this.storeInfo.deviceVOList && this.storeInfo.deviceVOList.length? this.storeInfo.deviceVOList[0].deviceNo :''
  157. getWaitPhoto({deviceNo:deviceNo}).then(res=>{
  158. this.loading = false
  159. if(res.status==200) {
  160. if (res.data) {
  161. // 预览图片
  162. uni.previewImage({
  163. urls: [res.data],
  164. longPressActions: {
  165. itemList: ['发送给朋友', '保存图片', '收藏'],
  166. success: function(data) {
  167. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  168. },
  169. fail: function(err) {
  170. console.log(err.errMsg);
  171. }
  172. }
  173. });
  174. } else {
  175. this.toashMsg('暂无数据')
  176. }
  177. }
  178. })
  179. },
  180. // 打开导航位置信息界面
  181. openLocation () {
  182. let data = this.storeInfo
  183. let _this = this
  184. uni.getLocation({
  185. type: 'gcj02', //返回可以用于uni.openLocation的经纬度
  186. success: function (res) {
  187. const latitude = data.lat;
  188. const longitude = data.lng;
  189. uni.openLocation({
  190. latitude: latitude,
  191. longitude: longitude,
  192. name: data.name,
  193. address: data.addrDetail,
  194. success: function () {
  195. console.log('success');
  196. }
  197. })
  198. },
  199. fail:function(){
  200. _this.toashMsg('获取位置信息失败,请先授权开启定位功能!')
  201. }
  202. });
  203. }
  204. }
  205. }
  206. </script>
  207. <style lang="scss">
  208. page{
  209. height: 100%;
  210. }
  211. .content{
  212. padding: 0 20rpx;
  213. width: 100%;
  214. height: 100%;
  215. display: flex;
  216. flex-direction: column;
  217. .page-content{
  218. flex: 1;
  219. overflow-y: scroll;
  220. }
  221. .header {
  222. padding: 20rpx 0;
  223. display: flex;
  224. .store-info {
  225. display: flex;
  226. flex: 1;
  227. flex-direction: column;
  228. justify-content: space-between;
  229. padding: 0 20rpx;
  230. .name {
  231. font-size: 32rpx;
  232. color: #000;
  233. }
  234. .address{
  235. font-size: 26rpx;
  236. }
  237. .location {
  238. display: flex;
  239. align-items: center;
  240. font-size: 24rpx;
  241. .left {
  242. margin-right: 20rpx;
  243. }
  244. .icon {
  245. color: #999;
  246. margin-right: 5rpx;
  247. }
  248. }
  249. }
  250. }
  251. .store-mark{
  252. padding: 20rpx 0;
  253. width: 100%;
  254. .mark-item{
  255. padding: 10rpx 20rpx;
  256. border: 1px solid #eee;
  257. border-radius: 30rpx;
  258. margin-right: 20rpx;
  259. font-size: 24rpx;
  260. }
  261. }
  262. .store-server{
  263. padding: 20rpx 0;
  264. width: 100%;
  265. font-size: 24rpx;
  266. border-bottom: 1px solid #eee;
  267. text{
  268. margin-right: 30rpx;
  269. }
  270. }
  271. .store-rich{
  272. padding: 20rpx 0;
  273. width: 100%;
  274. display: flex;
  275. flex-direction: column;
  276. align-items: center;
  277. justify-content: center;
  278. }
  279. .store-line{
  280. border-bottom: 1px solid #eee;
  281. }
  282. .footer{
  283. width: 100%;
  284. display: flex;
  285. margin-bottom: 20rpx;
  286. justify-content: space-between;
  287. button{
  288. width: 45%;
  289. }
  290. }
  291. .pop-img{
  292. width: 100%;
  293. height: 100%;
  294. }
  295. }
  296. </style>