352 lines
7.0 KiB
Vue
352 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="device-detail">
|
|||
|
|
<view class="bj">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<view class="tabback" style="background-color: #fff;">
|
|||
|
|
<view class="rtjt" @click="btnback">{{ $i18n.t('cancel') }}</view>
|
|||
|
|
<view class="name">{{ $i18n.t('addDevice') }}</view>
|
|||
|
|
<view style="width: 36rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="" style="background-color: #F3F5F6;">
|
|||
|
|
<!-- 扫描说明文字 -->
|
|||
|
|
<view class="scan-tip">
|
|||
|
|
<text>{{ $i18n.t('tapToScanTip') }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 扫码按钮区域 -->
|
|||
|
|
<view class="scan-container">
|
|||
|
|
<view class="scan-button" @click="scanQRCode">
|
|||
|
|
<!-- 外框四角 -->
|
|||
|
|
<view class="outer-corner top-left"></view>
|
|||
|
|
<view class="outer-corner top-right"></view>
|
|||
|
|
<view class="outer-corner bottom-left"></view>
|
|||
|
|
<view class="outer-corner bottom-right"></view>
|
|||
|
|
<image style="width: 400rpx;height: 400rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u4RbO9t9LQQEsfaua9k2" mode=""></image>
|
|||
|
|
<!-- 中间扫描框图标 -->
|
|||
|
|
<!-- <view class="scan-icon">
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 选项列表 -->
|
|||
|
|
<view class="options-list">
|
|||
|
|
<view class="option-item" @click="manualInput">
|
|||
|
|
<view class="option-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uqJHqdW3tH8Ijxhwqk7u" mode="aspectFill"></image>️</view>
|
|||
|
|
<view class="option-text">{{ $i18n.t('manualInputCode') }}</view>
|
|||
|
|
<view class="option-arrow">〉</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isFlashlightOn: false,
|
|||
|
|
cameraPosition: 'back',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
scanQRCode() {
|
|||
|
|
uni.scanCode({
|
|||
|
|
onlyFromCamera: true,
|
|||
|
|
scanType: ['qrCode'],
|
|||
|
|
success: res => {
|
|||
|
|
console.log(res);
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/subpackage/device/deviceaddroom?deviceId=' + res.result
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: err => {
|
|||
|
|
console.error('扫描失败：', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('scanFailed'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击返回上一级
|
|||
|
|
btnback(){
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换手电筒
|
|||
|
|
toggleFlashlight() {
|
|||
|
|
this.isFlashlightOn = !this.isFlashlightOn;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.isFlashlightOn ? this.$i18n.t('flashOn') : this.$i18n.t('flashOff'),
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 手动输入代码
|
|||
|
|
manualInput() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/subpackage/device/shoudongadd'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加第三方设备
|
|||
|
|
addThirdParty() {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('thirdPartyFeature'),
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 相机扫描成功
|
|||
|
|
onScanCode(e) {
|
|||
|
|
console.log('扫描结果:', e.detail);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('scanSuccess') + ': ' + e.detail.result,
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
// 这里可以处理扫描到的二维码数据
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 相机初始化完成
|
|||
|
|
onCameraInitDone(e) {
|
|||
|
|
console.log('相机初始化完成');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 相机错误
|
|||
|
|
onCameraError(e) {
|
|||
|
|
console.log('相机错误:', e.detail);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('cameraStartFailed'),
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.bj{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50vh;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
background-color: #0F0F0F;
|
|||
|
|
}
|
|||
|
|
.tabback {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 126rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 1rpx solid #D8D8D8;
|
|||
|
|
margin-top: 102rpx;
|
|||
|
|
border-radius: 30rpx 30rpx 0 0;
|
|||
|
|
.rtjt {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.name {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.device-detail {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-tip {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40rpx 20rpx;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 40rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-button {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 600rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.12);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.outer-corner {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border: 4rpx solid #999;
|
|||
|
|
|
|||
|
|
&.top-left {
|
|||
|
|
top: 30rpx;
|
|||
|
|
left: 30rpx;
|
|||
|
|
border-right: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.top-right {
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
border-left: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.bottom-left {
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
left: 30rpx;
|
|||
|
|
border-right: none;
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.bottom-right {
|
|||
|
|
bottom: 30rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
border-left: none;
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scan-icon {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.qr-frame {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.corner {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
border: 3rpx solid #999;
|
|||
|
|
|
|||
|
|
&.tl {
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-right: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.tr {
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-left: none;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.bl {
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-right: none;
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.br {
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-left: none;
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes scan {
|
|||
|
|
0% {
|
|||
|
|
top: 20rpx;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
top: 580rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flashlight-btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin: 40rpx 0;
|
|||
|
|
|
|||
|
|
.flashlight-icon {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background-color: #333;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: #007aff;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.options-list {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
.option-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
|
|||
|
|
.option-icon {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
image{
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-text {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.option-arrow {
|
|||
|
|
color: #ccc;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|