car-wash-front/src/pages-wash/device/index.vue

<template>
  <view :class="['page']">
    <view class="device-header">
      <view class="device-header_name">
        <text>洗车机编号：No.{{ state.device?.shortId }}</text>
      </view>
      <view class="device-header_fun">
        <view class="device-header_func-tag" v-for="f in state.device?.functionList" :key="f" style="margin-right: 10px;">
          <uv-tags :text="f" size="mini" plain plainFill bgColor="#19A497" color="white"></uv-tags>
        </view>
      </view>
      <view class="device-header_fun">
        <uv-tags plain size="mini" type="primary" :text="fmtDictName('WashDevice.state',state.device.state)"></uv-tags>
      </view>

    </view>
    <view class="device-body">
      <view class="device-body_ops" @click="debounceStartStopDevice">
        <text v-if="state.device.state==='idle'">启动设备</text>
        <text v-else>停止设备</text>
      </view>

      <view class=device-body_guide>
        <view>●点击上方【启动设备】按钮启动设备；
        </view>
        <view>●设备启动后，请在设备功能面板按下功能按键以选择服务项目；
        </view>
        <view>●洗车过程中再次按下功能按键可以暂停功能，暂停过程中将停止计费，如需恢复请再次按下功能按键；
        </view>
        <view>●洗车结束后，请按下结算按键或小程序【停止设备】按钮，设备停止运行之后将结束计费；
        </view>
        <view>●请在洗车完成后尽快将车辆驶离工位以方便后续用户，谢谢配合。
        </view>

      </view>
      <!--      <view class="device-body_ops-time">{{ state.time }}</view>-->
    </view>

    <login-bar class="w100 text-center"></login-bar>
  </view>
</template>

<script setup lang="ts">
import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
import {reactive, ref} from "vue";
import {debounce, fmtDictName} from "@/utils/common";
import {get, post} from "@/utils/https";
import {checkLogin, fetchToken, tryLogin} from "@/utils/auth";
import LoginBar from "@/components/login-bar/index.vue";

const initState = () => ({
  device: {
    functions: [],
    deviceName: '',
    state: ''
  },
  time: "00:00:00",
  start: new Date(),
  deviceId:null
})

const state = reactive(initState())

onHide(() => {
  Object.assign(state, initState());
})

onLoad((options: any) => {
  // uni.showModal({
  //   title:'onLoad,'+options?.shortId
  // })
  console.log("device onLoad>>>>", options)
  let id = options?.shortId;
  if (!id) {
    let query = decodeURIComponent(options.q);
    let scanTime = options.scancode_time;
    console.log(query, scanTime)
    if (query) {
      id = query.split("#")[1].split("?")[0]
      state.deviceId =id;
    } else {
      return;
    }
  }
  state.device = getApp<any>().globalData.last.device;
  checkLogin().then((token) => {
    setTimeout(() => {
      loadDeviceDetail(id);
    }, 200)
  }).catch(e=>{
    console.error("onLoad 校验登录失败，自动跳转登录页")
    uni.navigateTo({
      url:`/pages-user/login/index?shortId=${state.deviceId}&redirectUrl=/pages-wash/device/index`
    })
  })
});


onShow(() => {
  addListener();
  // uni.showToast({
  //   title:'onShow,'
  // })
  checkLogin().then(()=>{
    // uni.showToast({
    //   title:'onShow,loaded'
    // })
    if (!state.deviceId) {
      console.log("deviceId",getApp<any>().globalData.deviceId)
      let deviceId = getApp<any>().globalData.deviceId;
      if (deviceId) {
        loadDeviceDetail(deviceId);
      }
    }else{
      loadDeviceDetail(state.deviceId);
    }
  }).catch(e=>{
    console.error("校验登录失败，自动跳转登录页")
    uni.navigateTo({
      url:`/pages-user/login/index?shortId=${state.deviceId}&redirectUrl=/pages-wash/device/index`
    })
  })


})



const addListener = () => {
  uni.$on('login', function (data) {
      if(state.deviceId && data.isLogin){
        loadDeviceDetail(state.deviceId);
      }
  })

  uni.$on('logout', function (data) {
  })
}

const removeListener = () => {
  uni.$off('logout');
  uni.$off('login');
}


const loadDeviceDetail = (id: any) => {
  state.deviceId =id;
  let ft = fetchToken();
  console.log("device token ",ft)
  get(`/wash-device/queryDevice/${id}`).then((res: any) => {
    if (res.currentUserId && res.currentUserId != getApp<any>().globalData.user.id) {
      uni.showToast({
        title: '设备已被占用',
        icon: 'error'
      })
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }, 2000)
    }
    res.functionList = res.functions?.split("|") || []
    state.device = res;
    getApp<any>().globalData.deviceId = id;
  }).catch(e => {
    console.error(e)
  })
  // countTime();
}

const handleNavigateBack = () => {
  uni.navigateBack();
}

const debounceStartStopDevice = debounce(() => {
  handleClickDevice();
}, 600)

const handleClickDevice = () => {
  uni.showModal({
    title: '提示',
    content: state.device?.state === 'idle' ? '确定启动设备开始洗车吗？' : '确定停止设备终止本次服务吗？',
    success: (res) => {
      if (res.confirm) {
        if (state.device?.state === 'idle') {
          uni.showLoading({
            title: "启动中",
            mask: true,
          });
          post(`/wash-device/startDevice/${state.device?.shortId}`).then((res: any) => {
            uni.hideLoading();
            uni.showToast({
              title: '设备启动成功'
            })
            state.device.state = 'busy'
          })
        } else {
          uni.showLoading({
            title: "停止中",
            mask: true,
          });
          post(`/wash-device/stopDevice/${state.device?.shortId}`).then((res: any) => {
            uni.hideLoading();
            uni.showToast({
              title: '设备停机成功'
            })
            state.device.state = 'idle'
          })
        }
      }
    }
  });

}

const countTime = () => {
  setInterval(() => {
    let delta = new Date().getTime() - state.start.getTime();
    delta = delta / 1000;
    let hour = (delta / 3600).toFixed(0);
    let min = ((delta % 3600) / 60).toFixed(0);
    let second = ((delta % 3600) % 60).toFixed(0);
    state.time = [
      Number(hour) > 9 ? hour : `0${hour}`,
      Number(min) > 9 ? min : `0${min}`,
      Number(second) > 9 ? second : `0${second}`
    ].join(":")
  }, 1000)
}


</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  width: 100%;
  background-color: #f6f7fa;
}

.device-header {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &_name {
    font-weight: 500;
    margin: 15rpx 0;
  }

  &_fun {
    font-size: 13px;
    color: #7a7a7a;
    margin: 10rpx 0;
    display: inline-flex;

    &-tag {
      margin-right: 10px;
    }
  }

}

.device-body {
  flex-grow: 1;
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  &_ops {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    background-color: $uni-color-primary;
    color: white;
    font-size: 28px;
    font-weight: 500;
  }

  &_guide {
    width: 80%;
    margin-top: 40px;
    font-size: 14px;
  }
}
</style>