171 lines
4.2 KiB
Vue
171 lines
4.2 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="保 存" color="#23693f"></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: [
|
||
// '中华蜂','意大利蜂','东北黑蜂'
|
||
[]
|
||
],
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
async xinzeng(){ //! 点击保存
|
||
// 发请求，提示用户
|
||
const res = await request.post('/api/beehive/add',this.form)
|
||
if(res.data.code === 0){
|
||
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
|
||
})
|
||
}
|
||
},
|
||
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> |