gy-app-shop/pages/oneselfUser/relationDevice/index.vue

151 lines
3.1 KiB
Vue

<style lang="scss" scoped>
.entrySn-ctn{
width: 100%;
height: 100%;
// background-color: $bgColor;
:not(not) {
box-sizing: border-box;
}
}
.prompt{
padding: $paddingTB 0;
text-align: center;
// margin-top: 40rpx;
&-title{
font-size: 40rpx;
font-weight: 550;
padding-bottom: 30rpx;
}
&-text{
color: #ccc;
}
}
.write-code-ctn{
border:1px solid #aaa;
width: 600rpx;
height: 80rpx;
margin: 20rpx auto;
display: flex;
align-items: center;
justify-content: center;
.write-code{
display: flex;
justify-content: center;
&-input{
// margin-top: 6rpx;
width: 500rpx;
}
}
}
.phone{
padding-top: 16rpx;
color: #ccc;
font-size: 24rpx;
text-align: center;
}
.bottom-btn{
position: absolute;
bottom: 30rpx;
width: 100%;
display: flex;
justify-content: center;
button{
width: 80%;
border-radius: 20rpx;
}
}
</style>
<template>
<view class="entrySn-ctn">
<!-- <view class="header">
<view class="header-state">
<view class="header-state-shape">
</view>
</view>
</view> -->
<view class="prompt">
<view class="prompt-title">关联设备SN码</view>
<view class="prompt-text">请扫码录入/手动输入设备SN码</view>
</view>
<view class="write-code-ctn" :style="{borderColor:inputState?'#4A74C5':'#aaa'}">
<view class="write-code">
<input class="write-code-input" @focus="inputState=true" @blur="inputState=false" v-model="inputVal" placeholder="输入设备SN码" />
<!-- <tui-icon name="scan" :size="22" @tap="scanCodeFn"></tui-icon> -->
<u-icon name="scan" @tap="scanCodeFn" color="#808080" :size="40"></u-icon>
</view>
</view>
<view class="bottom-btn" >
<button type="primary" @tap="bindBatteryFn">确认绑定</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userNo:"",
// inputVal:"QD00A12005B001C00004",
inputVal:"",
inputState:false,
type:""
};
},
onLoad(e) {
this.userNo = e.userNo;
this.type = e.type;
if(!!e.userBatterySn) this.inputVal = e.userBatterySn;
},
onReady() {},
methods: {
// 绑定/解绑电池
bindBatteryFn(){
let obj = {
batterySn:this.inputVal,
loginName:this.userNo
};
if (this.type ==="bind") {
this.$api.toolMange.bindBattery(obj).then((res)=>{
if (res.code===0) {
this.tui.toast(res.msg,3000,'success');
setTimeout(()=>{
uni.switchTab({
url:"../../../view/my"
})
},1500)
} else{
this.tui.toast(res.msg,3000);
}
})
} else if(this.type ==="unbind"){
this.$api.toolMange.unbindBattery(obj).then((res)=>{
if (res.code===0) {
this.tui.toast(res.msg,3000,'success');
setTimeout(()=>{
uni.switchTab({
url:"../../../view/my"
})
},1500)
} else{
this.tui.toast(res.msg,3000);
}
})
}
},
scanCodeFn(){
let _this = this;
// 调起条码扫描
uni.scanCode({
scanType: ['barCode','qrCode'],
success: function (res) {
_this.inputVal = res.result;
}
});
}
},
computed: {},
components: {}
};
</script>