usky-web-mobile/src/pages/business/zhaf/signIn/index.vue

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="人员签到" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="signIn">
        <view
          class="signIn-button round mb30"
          :class="`bg-${themeColor.name}`"
          :style="{
            background: state.signInType === 1 ? themeColor.color : '#999999',
          }"
          @click="handleInsert()"
        >
          <view class="pt40 font20">{{ state.signInType === 1 ? "签到" : "签退" }}</view>
          <view class="mt5">{{ state.operateDate.split(" ")[1] }}</view>
        </view>
        <view class="signIn-address" v-if="state.address">
          <view class="iconfont oaIcon-address icon mt2" :class="`text-${themeColor.name}`"></view>
          <view class="ml5">{{ state.address }}</view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch, onUnload } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, inject } from "vue";
import { add, getStatus } from "@/api/business/zhaf/signIn.js";

const { proxy } = getCurrentInstance();
const themeColor = computed(() => {
  return proxy.$settingStore.themeColor;
});

const state = reactive({
  address: "", //准确位置信息
  deviceCode: uni.getSystemInfoSync().deviceId, //设备编号
  signInType: 1, //签到类型(0:已签到 1:已签退)
  operateDate: proxy.$time.getFormatterDate(new Date()), //操作时间
  operateCode: 0, //操作类型
  longitude: "", //经度
  latitude: "", //纬度
  remarks: "", //备注
});
const inter = reactive({
  interLocation: null,
  interOperateDate: null,
});

function handleInsert() {
  add({
    deviceCode: state.deviceCode,
    signInType: state.signInType === 0 ? 1 : 0,
    operateCode: state.operateCode,
    longitude: state.longitude,
    latitude: state.latitude,
    remarks: state.remarks,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      proxy.$modal.msgSuccess(state.signInType === 1 ? "签到成功" : "签退成功");
      getStatusApi(); //调用人员状态查询接口
    }
  });
}

/**
 * @人员状态查询
 * @接口查询
 */
function getStatusApi() {
  getStatus().then((res) => {
    if (res.status == "SUCCESS" && res.data != null) {
      state.signInType = res.data.operateType;
    }
  });
}

function getLocation() {
  uni.getLocation({
    type: "gcj02",
    geocode: true,
    highAccuracyExpireTime: 5000,
    success: (res) => {
      console.log(res);
      state.longitude = res.longitude;
      state.latitude = res.latitude;
      state.address = res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;
    },
    fail: (res) => {
      console.log(res);
    },
  });
}

onLoad(() => {
  getStatusApi(); //调用人员状态查询接口

  //#ifdef APP-PLUS
  inter.interLocation = setInterval(getLocation(), 1000 * 10);
  //#endif
  inter.interOperateDate = setInterval(() => {
    state.operateDate = proxy.$time.getFormatterDate(new Date());
  }, 1000);
});

onUnload(() => {
  //#ifdef APP-PLUS
  clearInterval(inter.interLocation); //销毁之前定时器
  //#endif
  clearInterval(inter.interOperateDate); //销毁之前定时器
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss">
.signIn {
  padding-top: 45%;
  //#ifdef MP-WEIXIN
  padding-top: 45%;
  //#endif

  &-button {
    width: 135px;
    height: 135px;
    text-align: center;
    margin: auto;
  }

  &-address {
    display: flex;
    justify-content: center;
    margin: auto;
  }
}
</style>