web
2025-07-11 ae00f214aaeb74d8f3c8e9c6fb0a8c793816f892
pages/device/index.vue
@@ -12,7 +12,8 @@
                  <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>
@@ -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) {