suta/pagesFengXiang/pages/addfengxiang/index.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>