web
2025-07-11 ae00f214aaeb74d8f3c8e9c6fb0a8c793816f892
pages/device/index.vue
@@ -12,11 +12,12 @@
                  <view class="item-info">
                     <view class="info-name">
                        <view class="name">{{item.facilityName}}</view>
                        <view class="btn" @click="handleQushui(item.id)">取水</view>
                        <view class="btn" v-if="item.state === 2" @click="handleQushui(item.id)">取水</view>
                        <view v-else>设备使用中...</view>
                     </view>
                     <view class="info-addr" @click="openMap(item.lat,item.lon)">
                        <text class="addr-text">地址:{{item.address}}</text>
                        <view>
                        <view class="addr-icon">
                           <image src="../../static/images/icon-point.svg" alt=''></image>
                           <text>{{item.distanceValue}}km</text>
                        </view>
@@ -28,11 +29,12 @@
      </view>
      <uni-popup ref="qushuiDialog" type="dialog">
         <uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="请输入取水量" 
            :before-close="true"
            @confirm="dialogConfirm"
            @close="dialogClose"
         >
            <view>
               <input v-model="qushuiNum" placeholder="请输入取水量(L)" />
               <input v-model="qushuiNum" placeholder="请输入取水量(m³)" />
            </view>
         </uni-popup-dialog>
      </uni-popup>
@@ -42,14 +44,16 @@
<script setup>
   import{ ref, onMounted } from 'vue'
   import Navbar from '../../components/navbar/navbar.vue'
   import { getFacitily } from '@/api/index.js'
   import { getFacitily, getWater } from '@/api/index.js'
   import { BASE_URL } from '../../config/index.js'
   
   const userLocation = ref()
   const facitilyList = ref([])
   const qushuiDialog = ref()
   const facitilyId = ref()
   const facilityId = ref()
   const qushuiNum = ref()
   let timer = null
   
   const getFacitilyList = () => {
      const data = {
@@ -63,23 +67,61 @@
            facitilyList.value = res.data.list
         }
      })
      // 重新挂在定时器
      clearInterval(timer)
      timer = setInterval(() => {
         getFacitilyList()
      }, 10000)
   }
   
   // 取水
   const handleQushui = (id) => {
      facitilyId.value = id
      facilityId.value = id
      qushuiDialog.value.open()
   }
   
   // 取消
   const dialogClose = () => {
      facitilyId.value = ''
      facilityId.value = ''
      qushuiNum.value = ''
      qushuiDialog.value.close()
   }
   
   // 确认
   const dialogConfirm = () => {
      let reg = /^(0|([1-9][0-9]*))(\.[\d]+)?$/
      if(!reg.test(qushuiNum.value)) {
         uni.showToast({
            title:'取水量为大于零的数字',
            icon:'none'
         })
         return
      }
      const data = {
         facilityId: facilityId.value,
         amount: Number(qushuiNum.value)
      }
      getWater(data).then(res => {
         if(res.code === 200) {
            uni.showToast({
               title:res.data,
               icon:'success'
            })
            dialogClose()
            getFacitilyList()
         }else{
            uni.showToast({
               title:res.msg,
               icon:'error'
            })
         }
      }).catch(err => {
         uni.showToast({
            title:'指令发送失败,请稍后重试',
            icon:'error'
         })
      })
   }
   
   //打开地图导航
@@ -102,6 +144,7 @@
               lon: res.longitude
            }
            uni.setStorageSync('userLocation',JSON.stringify(userLocation.value))
            getFacitilyList()
         },
         fail:(err) =>{
            locationToast()
@@ -112,7 +155,7 @@
   const locationToast = () => {
      uni.showModal({
         title: "请求授权当前位置",
         content: "请求获取您的位置,加载附近饮水设备信息!",
         content: "请求获取您的位置,加载附近取水设备信息!",
         confirmText: "前往设置",
         success: (res) => {
            if (res.confirm) {
@@ -198,21 +241,24 @@
                  align-items:center;
                  .addr-text{
                     width:340rpx;
                     flex-shrink: 0;
                     height:80rpx;
                     color: #6a6e75;
                     font-size:26rpx;
                  }
                  view{
                  .addr-icon{
                     width: 150rpx;
                     flex-shrink: 0;
                     display: flex;
                     justify-content: space-between;
                     align-items:center;
                     justify-content: flex-end;
                     image{
                        width:50rpx;
                        height:50rpx;
                        width: 40rpx;
                        height: 40rpx;
                     }
                     text{
                        color: #6a6e75;
                        font-size:26rpx;
                        font-size:22rpx;
                     }
                  }
               }