<template>
|
<view class="container">
|
<view class="title">我的设备</view>
|
<uni-icons type="plusempty" size="50" style="margin-left: auto;
|
border:1rpx black solid;
|
border-radius:50%;
|
" @click="scanDevice"></uni-icons>
|
<uni-icons type="person-filled" size="70" style="margin-right: 30rpx;"></uni-icons>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref
|
} from 'vue';
|
import {
|
bindDevice
|
} from '@/api/index.js'
|
// 传递给后端的参数
|
const state = {
|
productId:"",
|
facilityCode:"",
|
signature:""
|
}
|
// 扫描设备获取sn
|
const scanDevice = () => {
|
uni.scanCode({
|
scanType: ['qrCode', 'barCode'], // 扫码类型为二维码或条形码
|
success: function(res) {
|
// 扫码成功后的回调
|
let temp = JSON.parse(res.result);
|
state.facilityCode=temp.DeviceName;
|
state.productId=temp.ProductId;
|
state.signature=temp.Signature;
|
bindDevice(state).then((res)=>{
|
if(res.code === 200){
|
// 刷新页面
|
uni.redirectTo({
|
url:"/pages/layout/index"
|
})
|
}else{
|
uni.showToast({
|
title: '设备绑定失败',
|
icon: 'fail'
|
})
|
}
|
})
|
},
|
fail: function(err) {
|
// 扫码失败后的回调
|
uni.showToast({
|
title: '扫描失败',
|
icon: 'fail',
|
})
|
}
|
});
|
}
|
</script>
|
|
<style scoped lang="scss">
|
template {
|
font-size: 16px; // 设置根字体大小
|
}
|
|
.container {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20px;
|
background-color: #d5d5d5;
|
width: 100%; // 确保容器宽度占满整个屏幕宽度
|
|
.title {
|
flex-grow: 1; // 让标题元素占据剩余空间
|
text-align: center;
|
font-size: 1.125rem; // 使用rem单位定义字体大小
|
font-weight: bold;
|
text-align: left;
|
color: #000000;
|
white-space: nowrap; // 防止文本换行
|
overflow: hidden; // 隐藏溢出文本
|
text-overflow: ellipsis; // 使用省略号表示溢出文本
|
}
|
|
// 可以添加媒体查询来调整不同屏幕尺寸下的样式
|
@media (max-width: 600px) {
|
.title {
|
font-size: 1rem; // 在小屏幕上减小字体大小
|
}
|
}
|
}
|
</style>
|
