<template>
<view class="page">
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
:title-bold='true' height='45' id="navbar">
</u-navbar>
<view class="tit">
扫描二维码
</view>
<view class="iptbox">
<view v-if="title == '添加蜂箱'" class="qrcode" @click="btnqrcode">
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
</view>
<view v-else class="qrcode">
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
</view>
<input v-if="title == '添加蜂箱'" type="text" class="ips" v-model="sn" placeholder="请扫描蜂箱上的二维码" style="margin-left: 32rpx;"
placeholder-class="my-placeholder" />
<input v-else type="text" class="ips" v-model="sn" disabled="true" placeholder="请扫描蜂箱上的二维码" style="margin-left: 32rpx;"
placeholder-class="my-placeholder" />
</view>
<view class="tit">
自定义蜂箱名称
</view>
<view class="iptbox">
<input type="text" class="ips" v-model="name" placeholder="请输入蜂箱的自定义名称"
placeholder-class="my-placeholder" />
</view>
<view class="tit">
所属蜂场
</view>
<view class="iptbox" @click="showmiyuan = true">
<input type="text" class="ips" v-model="fc" placeholder="请选择所属蜂场" placeholder-class="my-placeholder"
disabled />
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
</view>
<view class="tit">
设备ID或视频流地址
</view>
<view class="iptbox">
<input type="text" class="ips" v-model="videoStream" placeholder="请输入设备ID或视频流地址"
placeholder-class="my-placeholder"/>
</view>
<view class="btn" @click="btnadd" v-if="title == '添加蜂箱'">
确认添加
</view>
<view class="btn" @click="btnedit" v-else>
确认修改
</view>
<view class="btns" @click="btndel" v-if="title != '添加蜂箱'">
删除蜂场
</view>
<!-- 选择蜂场 -->
<u-select v-model="showmiyuan" :list="miyuancolumns" title='选择蜂场' @confirm="confirmmy"></u-select>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
title: "添加蜂箱",
sn: '',
name: '',
videoStream: '',
fc: '',
fcid:'',
showmiyuan: false,
miyuancolumns: [],
pagesum: 1,
pagesize: 99,
beehiveId:'',
code:''
}
},
onLoad(option) {
if(option.tit){
this.title = option.tit
this.beehiveId = option.beehiveId
this.geteditxq()
}else{
this.title = '添加蜂箱'
}
this.getmiyuancolumns()
},
onShow() {
},
methods: {
btndel() {
let that = this;
uni.showModal({
title: "提示",
content: '确定要删除此蜂箱?请谨慎操作',
success: function(res) {
if (res.confirm) {
that.$u.delete(`/farm/beehive/${that.beehiveId}`).then(res => {
if (res.code == 200) {
uni.showToast({
title: '删除蜂箱成功',
icon: 'success',
duration: 1000
});
setTimeout(() => {
uni.navigateBack({
delta:2
});
}, 1500);
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
.catch(error => {
console.error('删除蜂场失败:', error);
uni.showToast({
title: '删除蜂场失败，请稍后再试',
icon: 'none',
duration: 2000
});
});
}
}
});
},
// 修改部分
geteditxq(){
this.$u.get(`/farm/beehive/${this.beehiveId}`).then(res => {
if (res.code == 200) {
this.sn = res.data.sn
this.name = res.data.name
this.fc = res.data.apiaryName
this.videoStream = res.data.videoStream
this.fcid = res.data.apiaryId
}
})
},
btnedit(){
let data = {
beehiveId:this.beehiveId,
apiaryId:this.fcid,
name:this.name,
videoStream:this.videoStream
}
this.$u.put(`/farm/beehive`,data).then(res => {
if (res.code == 200) {
uni.showToast({
title: '修改成功',
icon: 'success',
duration:1000
})
setTimeout(()=>{
uni.navigateBack()
},1500)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
},
// 修改结束// 修改结束// 修改结束// 修改结束// 修改结束
btnqrcode(){
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
this.sn = res.result
},
fail: err => {
console.error('扫描失败：', err)
uni.showToast({
title: '扫描失败',
icon: 'none'
})
}
})
},
confirmmy(e){
this.fc = e[0].label
this.fcid = e[0].value
},
getmiyuancolumns() {
let data = {
pageNum: this.pagesum,
pageSize: this.pagesize
};
this.$u.get('/farm/apiary/list', data).then((res) => {
if (res.code === 200) {
this.miyuancolumns = res.rows.map(item => ({
value: item.apiaryId,
label: item.name
}))
} else {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// })
}
})
},
btnadd() {
let data = {
sn:this.sn,
name:this.name,
apiaryId:this.fcid,
videoStream:this.videoStream
}
this.$u.put('farm/beehive/bind', data).then(res => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000
})
setTimeout(()=>{
uni.navigateBack()
},1500)
}else if(res.code == 401){
uni.navigateTo({
url:'/pages/login/login'
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
}
// addApiary(){
// uni.navigateTo({
// url:'/pages/Apiary/AddApiary'
// })
// }
}
}
</script>
<style lang="scss">
page {
background-color: #F4FAF8;
}
.page {
// position: relative;
width: 750rpx;
.tit {
margin-top: 40rpx;
margin-left: 50rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.imgbox {
margin-top: 28rpx;
margin-left: 46rpx;
image {
width: 412rpx;
height: 222rpx;
}
}
.btns {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 50rpx;
width: 658rpx;
height: 88rpx;
background: #D8D8D8;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-weight: 500;
font-size: 32rpx;
color: #808080;
}
.btn {
margin: 160rpx auto;
margin-bottom: 0;
// position: fixed;
display: flex;
align-items: center;
justify-content: center;
// bottom: 100rpx;
// left: 46rpx;
width: 658rpx;
height: 88rpx;
background: #FFCC25;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
}
.iptbox {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 22rpx;
margin: 28rpx auto 0;
width: 658rpx;
height: 88rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.qrcode {
padding-right: 20rpx;
border-right: 2rpx solid #D8D8D8;
image {
width: 54rpx;
height: 54rpx;
}
}
.ips {
width: 630rpx;
}
image {
width: 18rpx;
height: 32rpx;
}
.my-placeholder {
font-weight: 400;
font-size: 32rpx;
color: #808080;
}
}
}
</style>