396 lines
13 KiB
Vue
396 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<view class="tabs">
|
||
<up-tabs
|
||
:list="tabs"
|
||
lineWidth="40rpx"
|
||
lineHeight="5rpx"
|
||
:current="current"
|
||
lineColor="#4777ee"
|
||
@click="clickTab"
|
||
:inactiveStyle="{ color: '#a3a3a3', fontSize: '32rpx', fontWeight: 'bold' }"
|
||
:activeStyle="{ color: '#4777ee', fontSize: '32rpx', fontWeight: 'bold' }"
|
||
>
|
||
</up-tabs>
|
||
</view>
|
||
<swiper
|
||
:style="{ height: deviceInfo.windowHeight - 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'
|
||
import { transportType } from '@/constant/transportType'
|
||
|
||
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', 'keyId']),
|
||
...mapState(useLockStore, ['keySearch'])
|
||
},
|
||
async onLoad() {
|
||
this.deviceInfo = await this.getDeviceInfo()
|
||
},
|
||
methods: {
|
||
...mapActions(useBasicStore, ['getDeviceInfo', 'backAndToast', 'getNetworkType']),
|
||
...mapActions(useLockStore, ['getKeyList', 'updateKeySearch']),
|
||
...mapActions(useBluetoothStore, ['addLockUser', 'convertWeekdaysToNumber']),
|
||
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, data, message } = await createKeyRequest(params)
|
||
if (code === 0) {
|
||
// #ifdef MP-WEIXIN
|
||
uni.reportEvent('create_key', {})
|
||
// #endif
|
||
this.updateKeySearch({
|
||
...this.keySearch,
|
||
pageNo: 1
|
||
})
|
||
this.getKeyList(this.keySearch)
|
||
this.backAndToast('钥匙已发送')
|
||
if (this.currentLockInfo.transportType === transportType.TRANSPORT_TENCENT_YUN) {
|
||
this.addLockUser({
|
||
name: this.currentLockInfo.name,
|
||
keyId: this.keyId,
|
||
authUid: this.currentLockInfo.uid.toString(),
|
||
uid: data.receiverUid.toString(),
|
||
openMode: 1,
|
||
keyType: params.keyType,
|
||
startDate: params.startDate.toString(),
|
||
expireDate: params.endDate.toString(),
|
||
useCountLimit: params.keyType === '3' ? 1 : 0xffff,
|
||
isRound: params.keyType === '4' ? 1 : 0,
|
||
weekRound: params.keyType === '4' ? this.convertWeekdaysToNumber(params.weekDays) : 0,
|
||
startHour: params.keyType === '4' ? new Date(params.startDate).getHours() : 0,
|
||
startMin: params.keyType === '4' ? new Date(params.startDate).getMinutes() : 0,
|
||
endHour: params.keyType === '4' ? new Date(params.endDate).getHours() : 0,
|
||
endMin: params.keyType === '4' ? new Date(params.endDate).getMinutes() : 0,
|
||
role: 0,
|
||
password: (Math.floor(Math.random() * 900000) + 100000).toString()
|
||
})
|
||
}
|
||
} 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 {
|
||
padding: 0 32rpx;
|
||
font-size: 26rpx;
|
||
color: #262626;
|
||
}
|
||
|
||
.button {
|
||
width: 686rpx;
|
||
height: 100rpx;
|
||
margin-left: 32rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: #4777ee;
|
||
border-radius: 64rpx;
|
||
}
|
||
</style>
|