Liuyi
2024-12-20 d470e67ac1997882502b75cbfdaf359626cfaaa8
pages/station/index.vue
@@ -12,17 +12,19 @@
            <block v-for="(item,index) in sendWaterSiteList" :key='index'>
               <view class="item">
                  <view class="item-img">
                     <image src="../../static/logo.png" alt=''></image>
                     <image v-if="item.image" :src="baseUrl + '/upload' + item.image" alt='' mode="aspectFit"></image>
                     <image v-else src="../../static/images/station/facilityImg.svg" alt='' mode="aspectFit"></image>
                  </view>
                  <view class="item-info">
                     <view class="info-name">{{item.name}}</view>
                     <view class="info-addr" @click="openMap(item.latitude,item.longitude)">
                        <text class="addr-text">地址:{{item.address}}</text>
                        <view>
                           <image src="../../static/images/index/icon22.png" alt=''></image>
                           <image src="../../static/images/index/icon22.svg" alt=''></image>
                           <text>{{item.distanceValue}}km</text>
                        </view>
                     </view>
                     <view class="info-phone" @click="toCall(item.phone)">电话:{{ item.phone}}</view>
                  </view>
               </view>
            </block>
@@ -32,17 +34,19 @@
            <block v-for="(item,index) in facilitySiteList" :key='index'>
               <view class="item">
                  <view class="item-img">
                     <image src="../../static/logo.png" alt=''></image>
                     <image v-if="item.image" :src="baseUrl + '/upload' + item.image" alt='' mode="aspectFit"></image>
                     <image v-else src="../../static/images/station/facilityImg.svg" alt='' mode="aspectFit"></image>
                  </view>
                  <view class="item-info">
                     <view class="info-name">{{item.name}}</view>
                     <view class="info-addr">
                        <text class="addr-text">地址:{{item.address}}</text>
                        <view @click="openMap(item.latitude,item.longitude)">
                           <image src="../../static/images/index/icon22.png" alt=''></image>
                           <image src="../../static/images/index/icon22.svg" alt=''></image>
                           <text>{{item.distanceValue}}km</text>
                        </view>
                     </view>
                     <view class="info-phone" @click="toCall(item.phone)">电话:{{ item.phone}}</view>
                  </view>
               </view>
            </block>
@@ -54,6 +58,9 @@
<script setup>
   import { onMounted, ref } from 'vue'
   import { siteApi } from '../../api/index.js'
   import { BASE_URL } from '../../config/baseUrl.js';
   const baseUrl = ref(BASE_URL)
   const isNav = ref(2)//1:送水点;2:设备点
   const isActive = ref({borderBottom:`3px solid #226AC9`})
   const userLocation = ref()
@@ -94,6 +101,19 @@
         longitude: parseFloat(lon),
         scale:18
      })
   }
   function toCall(phone){
         // #ifdef MP-WEIXIN
         wx.makePhoneCall({
            phoneNumber: phone,
            success: function() {
               console.log("拨打电话成功!")
            },
            fail: function() {
               console.log("拨打电话失败!")
            }
         })
         // #endif
   }
   onMounted(async() =>{
      userLocation.value = JSON.parse(uni.getStorageSync('userLocation'))
@@ -143,26 +163,28 @@
            padding:0 32rpx;
            box-sizing: border-box;
            .item{
               height:200rpx;
               height:230rpx;
               width:100%;
               background-color: #FFFFFF;
               border-radius: 24rpx;
               padding:0 20rpx;
               padding:36rpx 20rpx;
               margin-bottom:20rpx;
               box-sizing: border-box;
               display: flex;
               align-items:center;
               .item-img{
                  image{
                     width:130rpx;
                     height: 130rpx;
                     width:140rpx;
                     height: 140rpx;
                  }
               }
               .item-info{
               height:100%;
                  display: flex;
                  flex-direction: column;
                  margin-left:20rpx;
                  justify-content: space-between;
               overflow: hidden;
                  .info-name{
                     color:#222c35;
                  }
@@ -190,6 +212,10 @@
                        }
                     }
                  }
               .info-phone{
                  font-size:26rpx;
                  color: #778bce;
               }
               }
            }
         }