|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <map
|
|
|
+ id="map"
|
|
|
+ :latitude="lat"
|
|
|
+ :longitude="lng"
|
|
|
+ scale="18"
|
|
|
+ show-compass
|
|
|
+ show-location
|
|
|
+ :markers="markers"
|
|
|
+ style="width: 100%; height:500rpx;">
|
|
|
+ </map>
|
|
|
+ <!-- 网点信息及设备 -->
|
|
|
+ <view class="details" v-if="stationData">
|
|
|
+ <view class="details-address">
|
|
|
+ <image src="/static/md-big-pic.png" class="store-pic"></image>
|
|
|
+ <view class="store-info">
|
|
|
+ <view>{{ stationData.name }}</view>
|
|
|
+ <view>{{ stationData.provinceName||'' }}{{ stationData.cityName||'' }}{{ stationData.districtName||'' }}{{ stationData.address||'' }}</view>
|
|
|
+ <view>
|
|
|
+ 营业时间:
|
|
|
+ <text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
|
|
|
+ {{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : ',' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 设备列表 -->
|
|
|
+ <view class="details-dev">
|
|
|
+ <view class="details-dev-box" v-for="item in deviceData">
|
|
|
+ <view class="details-dev-title">设备编号:<text>{{ item.srcDeviceCode }}</text></view>
|
|
|
+ <view class="details-dev-cons">
|
|
|
+ <view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
|
|
|
+ <view class="item-pic-con">
|
|
|
+ <text v-if="boxItem.flag==1" class="full-sign">已满</text>
|
|
|
+ <u-image mode="aspectFit" height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`" class="type-sign"></u-image>
|
|
|
+ </view>
|
|
|
+ <view class="dev-main">
|
|
|
+ <view>
|
|
|
+ {{ boxItem.rubbishTypeDictValue }}
|
|
|
+ </view>
|
|
|
+ <view class="rule-con">
|
|
|
+ {{ getRule(boxItem.rubbishType).rubbishWeight }}g/
|
|
|
+ <text class="goleNum">{{ getRule(boxItem.rubbishType).goleNum }}</text>
|
|
|
+ <image src="/static/ledou.png" class="ld-pic"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty v-if="deviceData.length==0" icon-size="60" text="暂无设备" mode="list" margin-top="120"></u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import { stationDetail, stationDevice } from '@/api/station.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stationId: '', // 网点id
|
|
|
+ stationNo: '', // 网点编号
|
|
|
+ lat: '',
|
|
|
+ lng: '',
|
|
|
+ mapCtx: null, // 地图对象
|
|
|
+ markers: [], // 标注点
|
|
|
+ stationData: null, // 网点信息
|
|
|
+ deviceData: [], // 设备信息
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.stationId = options.id
|
|
|
+ this.stationNo = options.stationNo
|
|
|
+ this.getStation() // 网点信息
|
|
|
+ this.getDevice() // 设备信息
|
|
|
+ // 开启分享
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 网点信息
|
|
|
+ getStation(){
|
|
|
+ // stationDetail({ id: this.stationId }).then(res => {
|
|
|
+ // if(res.status == 200){
|
|
|
+ // this.stationData = res.data
|
|
|
+ // this.markers = []
|
|
|
+ // this.markers.push({
|
|
|
+ // latitude: res.data.lat,
|
|
|
+ // longitude: res.data.lng,
|
|
|
+ // width: 30,
|
|
|
+ // height: 30,
|
|
|
+ // iconPath: "/static/store.png"
|
|
|
+ // })
|
|
|
+ // this.lng = res.data.lng
|
|
|
+ // this.lat = res.data.lat
|
|
|
+ // }else{
|
|
|
+ // this.stationData = null
|
|
|
+ // this.markers = []
|
|
|
+ // this.lng = ''
|
|
|
+ // this.lat = ''
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 设备信息
|
|
|
+ getDevice(){
|
|
|
+ // stationDevice({ stationNo: this.stationNo }).then(res => {
|
|
|
+ // if(res.status == 200){
|
|
|
+ // this.deviceData = res.data
|
|
|
+ // }else{
|
|
|
+ // this.deviceData = []
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 根据垃圾类型获取兑换规则
|
|
|
+ getRule(type){
|
|
|
+ let row = null
|
|
|
+ if(this.stationData.goldExRuleItemList){
|
|
|
+ row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
|
|
|
+ }
|
|
|
+ return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.content{
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ .details{
|
|
|
+ margin: 20upx;
|
|
|
+ .details-address{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 15upx;
|
|
|
+ box-shadow: 0upx 3upx 6upx #eee;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .store-pic{
|
|
|
+ width: 120rpx;
|
|
|
+ height:120rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .store-info{
|
|
|
+ >view{
|
|
|
+ font-size: 24upx;
|
|
|
+ padding: 5upx 0;
|
|
|
+ color: #666;
|
|
|
+ &:first-child{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details-dev{
|
|
|
+ .details-dev-box{
|
|
|
+ padding: 20upx 20upx 5upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 15upx;
|
|
|
+ box-shadow: 0upx 3upx 6upx #eee;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .details-dev-title{
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ padding: 10upx 0 20upx;
|
|
|
+ text{
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details-dev-cons{
|
|
|
+ padding: 10upx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .dev-item{
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > view{
|
|
|
+ padding: 25upx 10upx 15upx 0;
|
|
|
+ &:last-child{
|
|
|
+ view{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .u-tag{
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-pic-con{
|
|
|
+ position: relative;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ .full-sign{
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 4rpx 10rpx 14rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: url('/static/full-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transform: scale(0.8);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 68rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dev-main{
|
|
|
+ .rule-con{
|
|
|
+ color: #666;
|
|
|
+ font-size: 24upx;
|
|
|
+ .goleNum{
|
|
|
+ color: #eb0000;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ .ld-pic{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|