259 lines
7.2 KiB
Vue
259 lines
7.2 KiB
Vue
<template>
|
||
<view class="container" :class="[`${themeInfo.theme}-theme`]">
|
||
<navBar></navBar>
|
||
<view class="box">
|
||
<view class="top-box">
|
||
<view class="number">
|
||
{{ lockDetail.lockerName }}
|
||
</view>
|
||
<view class="detail">
|
||
{{ $t("detail.store") }}： {{ lockDetail.siteName }} <br>
|
||
{{ $t("detail.unit") }}： {{ lockDetail.unitTypeName }}<br>
|
||
<view v-if="lockDetail.orderStartStatus == 2 && lockDetail.refundLockerStatus === 0">{{ $t("detail.remain", { days: lockDetail.remainingDays }) }}</view>
|
||
<view style="color: red;" v-else>
|
||
{{ $t('common.status') }}：
|
||
<template v-if="lockDetail.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
|
||
<template v-else-if="lockDetail.refundLockerStatus === 1">{{ $t("unlock.cancelPending") }}</template>
|
||
<template v-else-if="lockDetail.refundLockerStatus === 2">{{ $t("unlock.outComplete") }}</template>
|
||
<template v-else-if="lockDetail.refundLockerStatus === 3">{{ $t("unlock.disapproval") }}</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="!state.isTTlock || (state.tryPWDCount > tryPWDCountMAX)">
|
||
<view class="paw">
|
||
{{ lockPwd?.password }}{{ lockPwd?.password?'#':'' }}
|
||
</view>
|
||
<view class="tip">
|
||
{{ $t("door.pwd") }} <br>
|
||
{{ $t("door.valid") }}
|
||
</view>
|
||
</template>
|
||
<button class="refresh" @click="RemoteOpen" v-if="state.isTTlock">
|
||
{{ $t("door.Unlock") }}
|
||
</button>
|
||
<button class="refresh" @click="GetLockPwd" v-if="!state.isTTlock || (state.tryPWDCount > tryPWDCountMAX)">
|
||
<uv-icon name="reload" size="24" :color="themeInfo.iconColor"></uv-icon>
|
||
{{ $t("door.refreshPwd") }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import navBar from '@/components/navBar.vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useOrderApi } from '@/Apis/order.js'
|
||
import { useLockApi } from '@/Apis/lock.js'
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
// 国际化配置
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n();
|
||
const { themeInfo } = useMainStore();
|
||
const getApi = useOrderApi()
|
||
const getLockApi = useLockApi()
|
||
const orderId = ref()
|
||
const lockMac = ref()
|
||
const lockDetail = ref([])
|
||
const lockPwd = ref([])
|
||
const tryPWDCountMAX = 3
|
||
const state = reactive({
|
||
isTTlock: false, // 是否是通通锁 TT锁可以使用远程开门,
|
||
tryPWDCount: 0, // 尝试动态次数,
|
||
})
|
||
|
||
onLoad((params) => {
|
||
orderId.value = params.id
|
||
lockMac.value = params.lockmac
|
||
state.tryPWDCount = 0
|
||
GetOrderDetail()
|
||
|
||
})
|
||
// 获取锁的信息
|
||
function GetOrderDetail() {
|
||
uni.showLoading()
|
||
getApi.GetOrderById({ orderId: orderId.value }).then(res=>{
|
||
lockDetail.value = res.data
|
||
if([3, 7].includes(Number(lockDetail.value.lockTypeId))){
|
||
state.isTTlock = true
|
||
}else{
|
||
GetLockPwd()
|
||
}
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
|
||
// 获取锁的密码
|
||
function RemoteOpen() {
|
||
uni.showLoading({mask:true})
|
||
getLockApi.RemoteOpen({ lockMac: lockMac.value,input: '',siteId:lockDetail.value.siteId }).then(res => {
|
||
state.tryPWDCount++
|
||
if(res.data.isSuccess) {
|
||
uni.showToast({
|
||
title:t('door.UnlockSuccessful'),
|
||
duration:3000,
|
||
icon:'none'
|
||
})
|
||
uni.hideLoading()
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:res.data.message,
|
||
duration:3000,
|
||
icon:'none'
|
||
})
|
||
|
||
}
|
||
})
|
||
}
|
||
// 获取锁的密码
|
||
function GetLockPwd() {
|
||
uni.showLoading({mask:true})
|
||
getLockApi.GetDyncPwdByMac({ lockMac: lockMac.value,siteId:lockDetail.value.siteId }).then(res => {
|
||
state.tryPWDCount++
|
||
if(!res.data.password ) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:res.data.message,
|
||
duration:3000,
|
||
icon:'none'
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
lockPwd.value = res.data
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/static/style/theme.scss';
|
||
.container {
|
||
height: 100vh;
|
||
background: linear-gradient(0.00deg, var(--left-linear) 0%, var(--right-linear) 94.004%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
.box {
|
||
position: relative;
|
||
width: 680rpx;
|
||
border-image-width: 14rpx;
|
||
border-image-slice: 72;
|
||
border-image-repeat: repeat;
|
||
border-image-outset: 20rpx;
|
||
background: #fff;
|
||
border-radius: 26rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.top-box {
|
||
width: 710rpx;
|
||
background: linear-gradient(180.00deg, var(--left-linear), var(--right-linear) 100%);
|
||
border-radius: 26rpx;
|
||
margin-top: -2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx;
|
||
|
||
& > .number {
|
||
padding: 0 40rpx;
|
||
color: var(--text-color);
|
||
font-size: 64rpx;
|
||
font-weight: bold;
|
||
width: 50%;
|
||
line-height: 1;
|
||
word-break: break-all;
|
||
}
|
||
& > .detail {
|
||
flex: 1;
|
||
color: var(--text-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 4px;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
|
||
background-size: 14px 14px;
|
||
}
|
||
}
|
||
.paw {
|
||
width: 556.16rpx;
|
||
height: 128rpx;
|
||
margin-top: 78rpx;
|
||
background: var(--active-color);
|
||
border-radius: 64rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
letter-spacing: 8px;
|
||
font-size: 65rpx;
|
||
font-weight: 700;
|
||
color: var(--text-color);
|
||
}
|
||
.tip {
|
||
margin-top: 80rpx;
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
color: var(--blackOrWhite);
|
||
letter-spacing: 1px;
|
||
}
|
||
.refresh {
|
||
width: 520rpx;
|
||
position: relative;
|
||
background: var(--btn-color1);
|
||
border-radius: 12rpx;
|
||
padding: 14rpx 0;
|
||
margin: 50rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: var(--text-color);
|
||
|
||
::v-deep .uv-icon {
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
.container.golden-theme {
|
||
background: #FFFFFF;
|
||
|
||
::v-deep .back .left span,
|
||
::v-deep .back .left text {
|
||
color: var(--bg-color) !important;
|
||
}
|
||
|
||
.box {
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.top-box::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 4px;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(#FFFFFF 0px, #FFFFFF 5px, transparent 5px, transparent);
|
||
background-size: 14px 14px;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
</style> |