wx-starlock/pages/createKey/createKey.vue

<template>
  <view>
    <view class="tabs">
      <up-tabs
        :list="tabs"
        lineWidth="40rpx"
        lineHeight="5rpx"
        :current="current"
        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="current"
      @change="changeSwiper"
    >
      <swiper-item>
        <LockInput
          :value="permanentAccount"
          title="接收者"
          placeholder="请输入手机号或邮箱"
          @change-input="changeAccount('permanent', $event)"
        ></LockInput>
        <LockInput
          :value="permanentName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changeName('permanent', $event)"
        ></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>
        <LockInput
          :value="temporaryAccount"
          title="接收者"
          placeholder="请输入手机号或邮箱"
          @change-input="changeAccount('temporary', $event)"
        ></LockInput>
        <LockInput
          :value="temporaryName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changeName('temporary', $event)"
        ></LockInput>
        <view style="margin-top: 20rpx">
          <LockDatetimePicker
            title="生效时间"
            :value="startDate"
            :minDate="minDate"
            @change-time="changeTemporaryValidTime"
            :maxDate="maxDate"
          ></LockDatetimePicker>
          <LockDatetimePicker
            title="失效时间"
            :value="endDate"
            :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-item>
        <LockInput
          :value="singleAccount"
          title="接收者"
          placeholder="请输入手机号或邮箱"
          @change-input="changeAccount('single', $event)"
        ></LockInput>
        <LockInput
          :value="singleName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changeName('single', $event)"
        ></LockInput>
        <view class="text mt-5">单次钥匙有效期为1小时，只能使用一次</view>
        <view class="text" style="margin-bottom: 50rpx">
          小程序暂不支持邮箱登录，若接收者账号为邮箱可先使用星星锁APP登录，绑定手机号后可使用小程序登录
        </view>
        <view class="button" @click="createKey('single')">发送</view>
      </swiper-item>
      <swiper-item>
        <LockInput
          :value="cycleAccount"
          title="接收者"
          placeholder="请输入手机号或邮箱"
          @change-input="changeAccount('cycle', $event)"
        ></LockInput>
        <LockInput
          :value="cycleName"
          title="姓名"
          placeholder="请输入姓名"
          @change-input="changeName('cycle', $event)"
        ></LockInput>
        <view style="margin-top: 20rpx">
          <LockCycle @change="changeCycle"></LockCycle>
        </view>
        <view class="text mt-5">接收者可以在有效期内的固定时间段里，不限次数使用</view>
        <view class="text" style="margin-bottom: 50rpx"
          >小程序暂不支持邮箱登录，若接收者账号为邮箱可先使用星星锁APP登录，绑定手机号后可使用小程序登录</view
        >
        <view class="button" @click="createKey('cycle')">发送</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: '限时'
          },
          {
            name: '单次'
          },
          {
            name: '循环'
          }
        ],
        permanentName: '',
        permanentAccount: '',
        temporaryName: '',
        temporaryAccount: '',
        startDate: Number(new Date()),
        endDate: Number(new Date()),
        singleName: '',
        singleAccount: '',
        cycleName: '',
        cycleAccount: '',
        cycleStartTime: null,
        cycleEndTime: null,
        weekDays: [],
        minDate: Number(new Date()),
        maxDate: Number(4133951940000),
        current: 0,
        deviceInfo: null,
        pending: false
      }
    },
    computed: {
      ...mapState(useBluetoothStore, ['currentLockInfo']),
      ...mapState(useLockStore, ['keySearch'])
    },
    async onLoad() {
      this.deviceInfo = await this.getDeviceInfo()
    },
    methods: {
      ...mapActions(useBasicStore, ['getDeviceInfo', 'backAndToast', 'getNetworkType']),
      ...mapActions(useLockStore, ['getKeyList', 'updateKeySearch']),
      changeCycle(data) {
        this.cycleStartTime = data.startDate
        this.cycleEndTime = data.endDate
        this.weekDays = data.weekDays
      },
      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))) ||
          (type === 'single' &&
            !(test.email(this.singleAccount) || test.mobile(this.singleAccount))) ||
          (type === 'cycle' && !(test.email(this.cycleAccount) || test.mobile(this.cycleAccount)))
        ) {
          uni.showToast({
            title: '请输入格式正确的手机号或邮箱',
            icon: 'none'
          })
          return
        }

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

        if (type === 'cycle' && this.weekDays.length === 0) {
          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.endDate.toString()
          params.keyType = '2'
          params.receiverUsername = this.temporaryAccount
          params.startDate = this.startDate.toString()
        } else if (type === 'permanent') {
          params.keyNameForAdmin = this.permanentName
          params.startDate = new Date().getTime().toString()
          params.endDate = '0'
          params.keyType = '1'
          params.receiverUsername = this.permanentAccount
        } else if (type === 'single') {
          params.keyNameForAdmin = this.singleName
          params.startDate = new Date().getTime().toString()
          params.endDate = '0'
          params.keyType = '3'
          params.receiverUsername = this.singleAccount
        } else if (type === 'cycle') {
          params.keyNameForAdmin = this.cycleName
          params.startDate = this.cycleStartTime
          params.endDate = this.cycleEndTime
          params.keyType = '4'
          params.receiverUsername = this.cycleAccount
          params.weekDays = this.weekDays
          params.startTime = this.cycleStartTime
          params.endTime = this.cycleEndTime
        }
        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
      },
      changeAccount(type, e) {
        if (type === 'permanent') {
          this.permanentAccount = e
        } else if (type === 'temporary') {
          this.temporaryAccount = e
        } else if (type === 'single') {
          this.singleAccount = e
        } else if (type === 'cycle') {
          this.cycleAccount = e
        }
      },
      changeName(type, e) {
        if (type === 'permanent') {
          this.permanentName = e
        } else if (type === 'temporary') {
          this.temporaryName = e
        } else if (type === 'single') {
          this.singleName = e
        } else if (type === 'cycle') {
          this.cycleName = e
        }
      },
      changeTemporaryValidTime(e) {
        this.startDate = e
      },
      changeTemporaryInvalidTime(e) {
        this.endDate = e
      },
      clickTab(data) {
        this.current = data.index
      },
      changeSwiper(e) {
        this.current = 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>