store.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <view class="content">
  3. <map
  4. id="map"
  5. :latitude="lat"
  6. :longitude="lng"
  7. scale="18"
  8. show-compass
  9. show-location
  10. :markers="markers"
  11. style="width: 100%; height:500rpx;">
  12. </map>
  13. <!-- 网点信息及设备 -->
  14. <view class="details" v-if="stationData">
  15. <view class="details-address">
  16. <image src="/static/md-big-pic.png" class="store-pic"></image>
  17. <view class="store-info">
  18. <view>{{ stationData.name }}</view>
  19. <view>{{ stationData.provinceName }}{{ stationData.cityName }}{{ stationData.districtName }}{{ stationData.address }}</view>
  20. <view>
  21. 营业时间:
  22. <text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
  23. {{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
  24. </text>
  25. </view>
  26. </view>
  27. </view>
  28. <!-- 设备列表 -->
  29. <view class="details-dev">
  30. <view class="details-dev-box" v-for="item in deviceData">
  31. <view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
  32. <view class="details-dev-cons">
  33. <view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
  34. <view class="item-pic-con">
  35. <text v-if="boxItem.flag==1" class="full-sign">已满</text>
  36. <u-image mode="aspectFit" height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`" class="type-sign"></u-image>
  37. </view>
  38. <view class="dev-main">
  39. <view>
  40. {{ boxItem.rubbishTypeDictValue }}
  41. </view>
  42. <view class="rule-con">
  43. {{ getRule(boxItem.rubbishType).rubbishWeight }}g/
  44. <text class="goleNum">{{ getRule(boxItem.rubbishType).goleNum }}</text>
  45. <image src="/static/ledou.png" class="ld-pic"></image>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <u-empty v-if="deviceData.length==0" text="暂无设备" mode="list" margin-top="120"></u-empty>
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import { stationDetail, stationDevice } from '@/api/station.js'
  58. export default {
  59. data() {
  60. return {
  61. stationId: '', // 网点id
  62. stationNo: '', // 网点编号
  63. lat: '',
  64. lng: '',
  65. mapCtx: null, // 地图对象
  66. markers: [], // 标注点
  67. stationData: null, // 网点信息
  68. deviceData: [], // 设备信息
  69. };
  70. },
  71. onLoad(options) {
  72. this.stationId = options.id
  73. this.stationNo = options.stationNo
  74. this.getStation() // 网点信息
  75. this.getDevice() // 设备信息
  76. },
  77. methods: {
  78. // 网点信息
  79. getStation(){
  80. stationDetail({ id: this.stationId }).then(res => {
  81. if(res.status == 200){
  82. this.stationData = res.data
  83. this.markers = []
  84. this.markers.push({
  85. latitude: res.data.lat,
  86. longitude: res.data.lng,
  87. width: 30,
  88. height: 30,
  89. iconPath: "/static/store.png"
  90. })
  91. this.lng = res.data.lng
  92. this.lat = res.data.lat
  93. }else{
  94. this.stationData = null
  95. this.markers = []
  96. this.lng = ''
  97. this.lat = ''
  98. }
  99. })
  100. },
  101. // 设备信息
  102. getDevice(){
  103. stationDevice({ stationNo: this.stationNo }).then(res => {
  104. if(res.status == 200){
  105. this.deviceData = res.data
  106. }else{
  107. this.deviceData = []
  108. }
  109. })
  110. },
  111. // 根据垃圾类型获取兑换规则
  112. getRule(type){
  113. let row = null
  114. if(this.stationData.goldExRuleItemList){
  115. row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
  116. }
  117. return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss">
  123. .content{
  124. width: 100%;
  125. padding: 0;
  126. .details{
  127. margin: 20upx;
  128. .details-address{
  129. display: flex;
  130. align-items: center;
  131. padding: 20upx;
  132. background: #FFFFFF;
  133. border-radius: 15upx;
  134. box-shadow: 0upx 3upx 6upx #eee;
  135. margin-bottom: 20upx;
  136. .store-pic{
  137. width: 130rpx;
  138. height:130rpx;
  139. margin-right: 20rpx;
  140. }
  141. .store-info{
  142. >view{
  143. font-size: 24upx;
  144. padding: 5upx 0;
  145. color: #666;
  146. &:first-child{
  147. font-weight: bold;
  148. font-size: 30upx;
  149. color: #333;
  150. }
  151. }
  152. }
  153. }
  154. .details-dev{
  155. .details-dev-box{
  156. padding: 20upx 20upx 5upx;
  157. background: #FFFFFF;
  158. border-radius: 15upx;
  159. box-shadow: 0upx 3upx 6upx #eee;
  160. margin-bottom: 20upx;
  161. .details-dev-title{
  162. border-bottom: 1px solid #F8F8F8;
  163. padding: 10upx 0 20upx;
  164. text{
  165. color: #666;
  166. }
  167. }
  168. .details-dev-cons{
  169. padding: 10upx 0;
  170. display: flex;
  171. flex-wrap: wrap;
  172. .dev-item{
  173. width: 50%;
  174. display: flex;
  175. align-items: center;
  176. > view{
  177. padding: 25upx 10upx 15upx 0;
  178. &:last-child{
  179. view{
  180. display: flex;
  181. align-items: center;
  182. .u-tag{
  183. margin-left: 10upx;
  184. }
  185. }
  186. }
  187. }
  188. .item-pic-con{
  189. position: relative;
  190. padding-left: 30rpx;
  191. .full-sign{
  192. font-size: 24rpx;
  193. padding: 4rpx 10rpx 14rpx;
  194. color: #fff;
  195. background: url('/static/full-bg.png') no-repeat;
  196. background-size: 100% 100%;
  197. transform: scale(0.8);
  198. position: absolute;
  199. left: 0;
  200. top: 0;
  201. width: 68rpx;
  202. height: 55rpx;
  203. z-index: 9;
  204. }
  205. }
  206. .dev-main{
  207. .rule-con{
  208. color: #666;
  209. font-size: 24upx;
  210. .goleNum{
  211. color: #eb0000;
  212. font-size: 26rpx;
  213. font-weight: bold;
  214. margin-left: 4rpx;
  215. }
  216. .ld-pic{
  217. width: 30rpx;
  218. height: 30rpx;
  219. margin-left: 6rpx;
  220. }
  221. }
  222. }
  223. }
  224. }
  225. }
  226. }
  227. }
  228. }
  229. </style>