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> |