wx-starlock/pages/createKey/createKey.vue

<template>
  <view>
    <view class="tabs">
      <up-tabs :list="tabs" lineWidth="40rpx" lineHeight="5rpx" :current="currnetIndex" 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="currnetIndex" @change="changeSwiper">
      <swiper-item>
        <LockInput :value="permanentAccount" title="接收者账号" placeholder="请输入手机号或邮箱"
                   @changeInput="changePermanentAccountInput"></LockInput>
        <LockInput :value="permanentName" title="钥匙名称" placeholder="请输入钥匙名称"
                   @changeInput="changePermanentNmaeInput"></LockInput>
        <view class="text">接收者可使用此小程序开关锁</view>
        <view class="button" @click="createKey('permanent')">发送钥匙</view>
      </swiper-item>
      <swiper-item :style="{height: deviceInfo.windowHeight - 44 + 'px'}">
        <LockInput :value="temporaryAccount" title="接收者账号" placeholder="请输入手机号或邮箱"
                   @changeInput="changeTemporaryAccountInput"></LockInput>
        <LockInput :value="temporaryName" title="钥匙名称" placeholder="请输入钥匙名称"
                   @changeInput="changeTemporaryNameInput"></LockInput>
        <view style="margin-top: 20rpx">
          <LockDatetimePicker title="生效时间" :value="temporaryValidTime" :minDate="minDate"
                              placeholder="请选择失效时间" @changeTime="changeTemporaryValidTime"></LockDatetimePicker>
          <LockDatetimePicker title="失效时间" :value="temporaryInvalidTime" :minDate="minDate"
                              placeholder="请选择失效时间" @changeTime="changeTemporaryInvalidTime"></LockDatetimePicker>
        </view>
        <view class="text">接收者在有效期内可以不限次数使用</view>
        <view class="button" @click="createKey('temporary')">发送钥匙</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>

import { mapActions, mapState } from 'pinia'
import { useBasicStore } from '@/stores/basic'
import LockInput from '@/components/LockInput/LockInput.vue'
import LockDatetimePicker from '@/components/LockDatetimePicker/LockDatetimePicker.vue'
import { createPsaawordRequest } from '@/api/keyboardPwd'
import { useBluetoothStore } from '@/stores/bluetooth'
import { useLockStore } from '@/stores/lock'
import { test } from 'uview-plus'
import { createKeyRequest } from '@/api/key'

export default {
  data () {
    return {
      tabs: [{
        name: '永久'
      }, {
        name: '限时'
      }],
      permanentName: '',
      permanentAccount: '',
      temporaryName: '',
      temporaryAccount: '',
      temporaryValidTime: Number(new Date()),
      temporaryInvalidTime: Number(new Date()),
      minDate: Number(new Date()),
      currnetIndex: 0,
      deviceInfo: null,
      pending: false
    }
  },
  components: {
    LockInput,
    LockDatetimePicker
  },
  computed: {
    ...mapState(useBluetoothStore, ['currentLockInfo']),
    ...mapState(useLockStore, ['keySearch']),
  },
  async onLoad () {
    this.deviceInfo = await this.getDeviceInfo()
    this.temporaryInvalidTime = this.setTime()
  },
  methods: {
    ...mapActions(useBasicStore, ['getDeviceInfo', 'backAndToast']),
    ...mapActions(useLockStore, ['getKeyList', 'updateKeySearch']),
    setTime () {
      const now = new Date()
      now.setMinutes(0, 0, 0)
      now.setDate(now.getDate() + 3)

      return now.getTime()
    },
    async createKey (type, createUser = false) {

      if ((type === 'temporary' && !(test.email(this.temporaryAccount) || test.mobile(this.temporaryAccount))) ||
          (type === 'permanent' && !(test.email(this.permanentAccount) || test.mobile(this.permanentAccount)))) {
        uni.showToast({
          title: '请输入格式正确的手机号或邮箱',
          icon: 'none'
        })
        return
      }

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

      if(type === 'temporary' && this.temporaryValidTime >= this.temporaryInvalidTime) {
        uni.showToast({
          title: '失效时间必须大于生效时间',
          icon: 'none'
        })
        return
      }

      if (this.pending) {
        return
      }
      this.pending = true

      let params = {
        faceAuthentication: '2',
        isRemoteUnlock: '2',
        lockId: this.currentLockInfo.lockId,
        keyRight: '0',
        remarks: '',
        countryCode: '86',
        createUser: '0'
      }
      if(createUser) {
        params.createUser = '1'
        params.usernameType = test.mobile(this.temporaryAccount) ? '1' : '2'
      }
      if (type === 'temporary') {
        params.keyNameForAdmin = this.temporaryName
        params.endDate = this.temporaryInvalidTime.toString()
        params.keyType = '2'
        params.receiverUsername = this.temporaryAccount
        params.startDate = this.temporaryValidTime.toString()
      } else {
        params.keyNameForAdmin = this.permanentName
        params.startDate = new Date().getTime().toString()
        params.endDate = '0'
        params.keyType = '1'
        params.receiverUsername = this.permanentAccount
      }
      const { code, message } = await createKeyRequest(params)
      if (code === 0) {
        this.updateKeySearch({
          ...this.keySearch,
          pageNo: 1
        })
        this.getKeyList(this.keySearch)
        this.backAndToast('钥匙已发送')
      } else if(code === 425) {
        this.pending = false
        await this.createKey(type, true)
      } else {
        uni.showToast({
          title: message,
          icon: 'none'
        })
      }
      this.pending = false
    },
    changePermanentAccountInput (e) {
      this.permanentAccount = e
    },
    changePermanentNmaeInput (e) {
      this.permanentName = e
    },
    changeTemporaryNameInput (e) {
      this.temporaryName = e
    },
    changeTemporaryAccountInput (e) {
      this.temporaryAccount = e
    },
    changeTemporaryValidTime (e) {
      this.temporaryValidTime = e
    },
    changeTemporaryInvalidTime (e) {
      this.temporaryInvalidTime = e
    },
    clickTab (data) {
      this.currnetIndex = data.index
    },
    changeSwiper (e) {
      this.currnetIndex = 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>