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="请输入手机号或邮箱"
          @change-input="changePermanentAccountInput"
        ></LockInput>
        <LockInput
          :value="permanentName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changePermanentNameInput"
        ></LockInput>
        <view class="text" style="margin-top: 40rpx">接收者可使用此小程序开关锁</view>
        <view class="text" style="margin-bottom: 50rpx"
          >小程序暂不支持邮箱登录，若接收者账号为邮箱可先使用星星锁APP登录，绑定手机号后可使用小程序登录</view
        >
        <view class="button" @click="createKey('permanent')">发送</view>
      </swiper-item>
      <swiper-item :style="{ height: deviceInfo.windowHeight - 44 + 'px' }">
        <LockInput
          :value="temporaryAccount"
          title="接收者"
          placeholder="请输入手机号或邮箱"
          @change-input="changeTemporaryAccountInput"
        ></LockInput>
        <LockInput
          :value="temporaryName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changeTemporaryNameInput"
        ></LockInput>
        <view style="margin-top: 20rpx">
          <LockDatetimePicker
            title="生效时间"
            :value="temporaryValidTime"
            :minDate="minDate"
            @change-time="changeTemporaryValidTime"
            :maxDate="maxDate"
          ></LockDatetimePicker>
          <LockDatetimePicker
            title="失效时间"
            :value="temporaryInvalidTime"
            :minDate="minDate"
            @change-time="changeTemporaryInvalidTime"
            :maxDate="maxDate"
          ></LockDatetimePicker>
        </view>
        <view class="text" style="margin-top: 40rpx">接收者在有效期内可以不限次数使用</view>
        <view class="text" style="margin-bottom: 50rpx"
          >小程序暂不支持邮箱登录，若接收者账号为邮箱可先使用星星锁APP登录，绑定手机号后可使用小程序登录</view
        >
        <view class="button" @click="createKey('temporary')">发送</view>
      </swiper-item>
    </swiper>
  </view>
</template>

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

  export default {
    components: {
      LockInput,
      LockDatetimePicker
    },
    data() {
      return {
        tabs: [
          {
            name: '永久'
          },
          {
            name: '限时'
          }
        ],
        permanentName: '',
        permanentAccount: '',
        temporaryName: '',
        temporaryAccount: '',
        temporaryValidTime: Number(new Date()),
        temporaryInvalidTime: Number(new Date()),
        minDate: Number(new Date()),
        maxDate: Number(4133951940000),
        currnetIndex: 0,
        deviceInfo: null,
        pending: false
      }
    },
    computed: {
      ...mapState(useBluetoothStore, ['currentLockInfo']),
      ...mapState(useLockStore, ['keySearch'])
    },
    async onLoad() {
      this.deviceInfo = await this.getDeviceInfo()
      // this.temporaryInvalidTime = this.setTime()
    },
    methods: {
      ...mapActions(useBasicStore, ['getDeviceInfo', 'backAndToast', 'getNetworkType']),
      ...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.temporaryValidTime >= this.temporaryInvalidTime) {
          uni.showToast({
            title: '失效时间必须大于生效时间',
            icon: 'none'
          })
          return
        }

        const netWork = await this.getNetworkType()
        if (!netWork) {
          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) {
          uni.reportEvent('create_key', {})
          this.updateKeySearch({
            ...this.keySearch,
            pageNo: 1
          })
          this.getKeyList(this.keySearch)
          this.backAndToast('钥匙已发送')
        } else if (code === 425) {
          this.pending = false
          uni.showModal({
            title: '提示',
            content: `是否发送电子钥匙给未注册账号\n${params.receiverUsername}`,
            success: async res => {
              if (res.confirm) {
                await this.createKey(type, true)
              }
            }
          })
        } else {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
        this.pending = false
      },
      changePermanentAccountInput(e) {
        this.permanentAccount = e
      },
      changePermanentNameInput(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 {
    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>