192 lines
4.3 KiB
Vue
192 lines
4.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="page-box">
|
||
<!-- 扫描二维码 -->
|
||
<view>
|
||
<view class="text-box">扫描二维码</view>
|
||
<view class="scan-boxview">
|
||
<u--input class="input-b" shape="circle" placeholder="请扫描蜂箱上的二维码" border="surround"
|
||
v-model="form.qrcode">
|
||
</u--input>
|
||
<image @click="gotomap" class="scan-img" src="/static/16994973961877418353.png" />
|
||
</view>
|
||
</view>
|
||
<!-- 自定义蜂箱 -->
|
||
<view>
|
||
<view class="text-box">自定义蜂箱</view>
|
||
<view>
|
||
<u--input class="input-b" shape="circle" placeholder="请输入蜂箱的自定义名称" border="surround"
|
||
v-model="form.name"></u--input>
|
||
</view>
|
||
</view>
|
||
<!-- 所属蜂场 -->
|
||
<view>
|
||
<view class="text-box">所属蜂场</view>
|
||
<view @click="showfengzhong = true">
|
||
<u--input style="background-color: #f7f7f7;" disabled shape="circle" placeholder="请选择蜂场"
|
||
border="surround" v-model="form.apiary_id_text"></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="mag-box">
|
||
<u-button @click="xinzeng" size="large" shape="circle" :text="text" :color="computedColor" ></u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
|
||
:columns="fengzhongcolumns"></u-picker>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../../utils/request';
|
||
export default {
|
||
name: 'FxIndex',
|
||
onLoad() {
|
||
this.listData()
|
||
},
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
form: {
|
||
name: '', //蜂箱名称
|
||
qrcode: '', // 扫码的内容
|
||
apiary_id_text: '', // text
|
||
apiary_id: '' // id
|
||
},
|
||
showfengzhong: false,
|
||
fengzhongcolumns: [
|
||
// '中华蜂','意大利蜂','东北黑蜂'
|
||
[]
|
||
],
|
||
text:'保 存',
|
||
};
|
||
},
|
||
computed: {
|
||
computedColor() {
|
||
if (this.text === '保 存') {
|
||
return '#23693f';
|
||
} else {
|
||
return '#ccc';
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
async xinzeng() {
|
||
if(this.text == '保 存'){
|
||
this.text = '保存中'
|
||
const res = await request.post('/api/beehive/add', this.form)
|
||
if (res.data.code === 0) {
|
||
this.text = '保 存'
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
this.form = {
|
||
name: '', //蜂箱名称
|
||
qrcode: '', // 扫码的内容
|
||
apiary_id_text: '', // text
|
||
apiary_id: '' // id
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(()=>{
|
||
this.text = '保 存'
|
||
|
||
},1000)
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: '保存中',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
}
|
||
},
|
||
|
||
gotomap() {
|
||
wx.scanCode({
|
||
onlyFromCamera: false, // 是否仅从相机启动，默认false
|
||
scanType: ['qrCode', 'barCode'], // 可以指定扫描的类型，比如二维码或者条形码，默认二者都有
|
||
success: res => { // 扫描成功后的回调
|
||
console.log(res.result, '成功结果') // 打印扫描结果
|
||
this.form.qrcode = res.result
|
||
},
|
||
fail: res => { // 扫描失败后的回调
|
||
console.log(res, '失败结果') // 打印错误信息
|
||
}
|
||
})
|
||
},
|
||
confirmfengzhong(e) {
|
||
console.log(e);
|
||
this.form.apiary_id = e.value[0].id
|
||
this.form.apiary_id_text = e.value[0].text
|
||
|
||
this.showfengzhong = false
|
||
},
|
||
listData() {
|
||
request.get('/api/apiary/index', {
|
||
page: this.page
|
||
}).then(res => {
|
||
res.data.data.forEach(item => {
|
||
this.fengzhongcolumns[0].push({
|
||
text: item.name,
|
||
id: item.id
|
||
})
|
||
})
|
||
console.log(res)
|
||
console.log(res.data.data[0].id)
|
||
console.log(res.data.data[0].name)
|
||
console.log(this.fengzhongcolumns, '数组')
|
||
})
|
||
// console.log(res.data.data)
|
||
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.scan-boxview {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.scan-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.input-b {
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.text-box {
|
||
margin: 30rpx 0 20rpx 15rpx;
|
||
}
|
||
|
||
.page-box {
|
||
padding: 20rpx 50rpx;
|
||
}
|
||
|
||
.mag-box {
|
||
margin: 50rpx 0;
|
||
}
|
||
|
||
.page {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
background-color: #ffff;
|
||
color: #8888;
|
||
}
|
||
</style> |