wx-starlock/pages/createCard/createCard.vue

<template>
  <view>
    <view class="tabs">
      <up-tabs
        :list="tabs"
        lineWidth="40rpx"
        lineHeight="5rpx"
        :current="currentIndex"
        lineColor="#63b8af"
        @click="clickTab"
        :inactiveStyle="{ color: '#a3a3a3', fontSize: '32rpx', fontWeight: 'bold' }"
        :activeStyle="{ color: '#63b8af', fontSize: '32rpx', fontWeight: 'bold' }"
      >
      </up-tabs>
    </view>
    <swiper
      :style="{ height: deviceInfo.screenHeight - deviceInfo.safeArea.top - 44 + 'px' }"
      v-if="deviceInfo"
      :list="tabs"
      :autoplay="false"
      :circular="true"
      :current="currentIndex"
      @change="changeSwiper"
    >
      <swiper-item>
        <LockInput
          :value="permanentName"
          title="姓名"
          placeholder="请输入"
          @change-input="changeName('permanent', $event)"
        ></LockInput>
        <view class="mt-3">
          <LockSwitch
            :value="permanentAdmin"
            title="是否为管理员"
            @change="changeAdmin('permanent', $event)"
          ></LockSwitch>
        </view>
        <view class="mt-3 mb-3">
          <LockSwitch
            :value="permanentCoerced"
            title="胁迫卡"
            @change="changeCoerced('permanent', $event)"
            :placeholder="placeholder"
          ></LockSwitch>
        </view>
        <view class="button" @click="create('permanent')">下一步</view>
      </swiper-item>
      <swiper-item :style="{ height: deviceInfo.windowHeight - 44 + 'px' }">
        <LockInput
          :value="temporaryName"
          title="姓名"
          placeholder="请输入"
          @change-input="changeName('temporary', $event)"
        ></LockInput>
        <view class="mt-3">
          <LockDatetimePicker
            title="生效时间"
            :value="temporaryStartTime"
            :minDate="minDate"
            :maxDate="maxDate"
            type="datehour"
            @change-time="changeDate('temporaryStartTime', $event)"
          ></LockDatetimePicker>
        </view>
        <view class="mt-3">
          <LockDatetimePicker
            title="失效时间"
            :value="temporaryEndTime"
            :minDate="minDate"
            :maxDate="maxDate"
            type="datehour"
            @change-time="changeDate('temporaryEndTime', $event)"
          ></LockDatetimePicker>
        </view>
        <view class="mt-3">
          <LockSwitch
            :value="temporaryAdmin"
            title="是否为管理员"
            @change="changeAdmin('temporary', $event)"
          ></LockSwitch>
        </view>
        <view class="mt-3 mb-3">
          <LockSwitch
            :value="temporaryCoerced"
            title="胁迫卡"
            @change="changeCoerced('temporary', $event)"
            :placeholder="placeholder"
          ></LockSwitch>
        </view>
        <view class="button" @click="create('temporary')">下一步</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { checkCardNameRequest } from '@/api/card'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const $basic = useBasicStore()
  const $bluetooth = useBluetoothStore()
  const $user = useUserStore()

  const tabs = [
    {
      name: '永久'
    },
    {
      name: '限时'
    }
  ]

  const permanentName = ref('')
  const permanentAdmin = ref(false)
  const permanentCoerced = ref(false)

  const temporaryName = ref('')
  const temporaryStartTime = ref(Number(new Date()))
  const temporaryEndTime = ref(Number(new Date()))
  const temporaryAdmin = ref(false)
  const temporaryCoerced = ref(false)

  const minDate = ref(Number(new Date()))
  const maxDate = ref(Number(4133951940000))
  const currentIndex = ref(0)
  const deviceInfo = ref(null)
  const placeholder =
    '当被胁迫要求强行开锁时，使用胁迫卡会触发报警，报警信息会推送给管理员，该功能需要锁联网。\n请不要将胁迫卡用于日常开锁'

  onLoad(async () => {
    deviceInfo.value = await $basic.getDeviceInfo()
    temporaryStartTime.value = setTime()
    temporaryEndTime.value = setTime()
    minDate.value = Number(getNextFullHour())
    maxDate.value = Number(getFutureTimestamp())
  })

  const getNextFullHour = () => {
    const now = new Date()
    const currentHour = now.getHours()
    now.setHours(currentHour)
    now.setMinutes(0)
    now.setSeconds(0)
    now.setMilliseconds(0)

    return now
  }

  const getFutureTimestamp = () => {
    const currentDate = new Date()

    const year = currentDate.getFullYear()
    const month = currentDate.getMonth()
    const day = currentDate.getDate()

    const futureDate = new Date(year + 3, month, day, 23, 0, 0)

    return futureDate.getTime()
  }

  const setTime = () => {
    const now = new Date()
    now.setMinutes(0, 0, 0)

    return now.getTime()
  }

  const create = async type => {
    if (
      (type === 'temporary' && temporaryName.value === '') ||
      (type === 'permanent' && permanentName.value === '')
    ) {
      uni.showToast({
        title: '名称不能为空',
        icon: 'none'
      })
      return
    }

    if (type === 'temporary' && temporaryStartTime.value > temporaryEndTime.value) {
      uni.showToast({
        title: '失效时间要大于生效时间',
        icon: 'none'
      })
      return
    }

    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }

    let params = {
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      cardNo: 0,
      operate: 0,
      userCountLimit: 0xffff
    }

    if (type === 'permanent') {
      params = {
        ...params,
        cardName: permanentName.value,
        isAdmin: permanentAdmin.value ? 1 : 0,
        isForce: permanentCoerced.value ? 1 : 0,
        weekDays: [],
        isRound: 0,
        startDate: 0,
        cardType: 1,
        endDate: 0,
        startTime: '00:00',
        endTime: '00:00'
      }
    } else {
      params = {
        ...params,
        cardName: temporaryName.value,
        isAdmin: temporaryAdmin.value ? 1 : 0,
        isForce: temporaryCoerced.value ? 1 : 0,
        weekDays: [],
        cardType: 2,
        isRound: 0,
        startDate: temporaryStartTime.value,
        endDate: temporaryEndTime.value,
        startTime: '00:00',
        endTime: '00:00'
      }
    }

    const { code, message } = await checkCardNameRequest({
      lockId: $bluetooth.currentLockInfo.lockId,
      cardName: params.cardName
    })
    if (code === 0) {
      $basic.routeJump({
        name: 'bindCard',
        params: {
          card: JSON.stringify(params)
        },
        events: {
          refresherList() {
            eventChannel.emit('refresherList', {})
          }
        }
      })
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }

  const changeName = (type, event) => {
    if (type === 'permanent') {
      permanentName.value = event
    } else {
      temporaryName.value = event
    }
  }

  const changeDate = (type, event) => {
    if (type === 'temporaryStartTime') {
      temporaryStartTime.value = event
    } else {
      temporaryEndTime.value = event
    }
  }

  const changeAdmin = (type, event) => {
    if (type === 'permanent') {
      permanentAdmin.value = event.detail.value
    } else {
      temporaryAdmin.value = event.detail.value
    }
  }

  const changeCoerced = (type, event) => {
    if (type === 'permanent') {
      permanentCoerced.value = event.detail.value
    } else {
      temporaryCoerced.value = event.detail.value
    }
  }

  const clickTab = data => {
    currentIndex.value = data.index
  }

  const changeSwiper = e => {
    currentIndex.value = e.detail.current
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>

<style lang="scss" scoped>
  .tabs {
    display: flex;
    justify-content: center;
  }

  .text {
    margin-top: 40rpx;
    margin-bottom: 50rpx;
    color: #262626;
    font-size: 26rpx;
    padding: 0 32rpx;
  }

  .button {
    border-radius: 64rpx;
    width: 686rpx;
    margin-left: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #63b8af;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
</style>