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="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>