SmartBeehive/pages/Apiary/AddApiary.vue

<template>
	<view class="page">
		<u-navbar title="添加蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' :title-bold='true'
			title-size='36' height='45' id="navbar">
		</u-navbar>
		<view class="tit">
			蜂场名称
		</view>
		<view class="iptbox">
			<input type="text" class="ips" v-model="code" placeholder="请输入蜂场名称（5个字以内）"
				placeholder-class="my-placeholder" />

		</view>

		<view class="tit">
			具体位置
		</view>
		<view class="iptbox" @click="chooseAddress()">
			<input type="text" class="ips" v-model="form.address" placeholder="请选择蜂场具体位置" placeholder-class="my-placeholder"
				disabled />
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			养殖蜂种
		</view>
		<view class="iptbox" @click="showfengzhong = true">
			<input type="text" class="ips" v-model="code" placeholder="请选择养殖蜂种" placeholder-class="my-placeholder"  disabled/>
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			采集蜜源
		</view>
		<view class="iptbox" @click="showmiyuan = true">
			<input type="text" class="ips" v-model="code" placeholder="请选择采集蜜源" placeholder-class="my-placeholder" disabled/>
			<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
		</view>
		<view class="tit">
			照片
		</view>
			<view class="imgbox" @click="btn" v-if="userImgs==''">
				<view class="">
					
				</view>
				<image src="https://api.ccttiot.com/smartmeter/img/static/uLpiGDDDvBwk7hOhOtVp" mode="" v-if=""></image>
				
			</view>
			<view class="imgbox" v-else>
				<image :src="userImgs" mode="" v-if=""></image>
				
			</view>
			<u-select v-model="showfengzhong" :list="fengzhongcolumns" title='选择蜂种' @confirm="confirm"></u-select>
			<u-select v-model="showmiyuan" :list="miyuancolumns" title='选择蜜源' @confirm="confirm"></u-select>
			<view class="btn">
				确认添加
			</view>
		<!-- <u-picker @cancel="showmiyuan=false" @confirm="confirmmiyuan" :show="showmiyuan"
			:columns="miyuancolumns"></u-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #FAFDFD",
				},
				code: '',
				fengzhongcolumns: [
					
				],
				miyuancolumns: [
					{
							label: '百花蜜',
							value: 1
						}, {
							label: '油菜蜜',
							value: 2
						},
						{
							label: '荆条蜜',
							value: 3
						},
						{
							label: '荔枝蜜',
							value: 4
						},
						{
							label: '枣花蜜',
							value: 5
						},
						{
							label: '椴树蜜',
							value: 6
						},
				
				],
				showfengzhong:false,
				showmiyuan:false,
				form: {
					lat: 0,
					lng: 0,
					address: '',
				},
				
				userImgs: '',
				token: '',
				sn:'',
				upurl:'https://api.ccttiot.com/'
			}
		},
		onLoad() {

		},
		onShow() {
			this.getQiniuToken()
			this.getfengzhongcolumns()
			this.getmiyuancolumns()
		},
		methods: {
			getQiniuToken() {
					this.$u.get("/common/qiniu/uploadInfo").then((res) => {
						if (res.code == 200) {
						this.token=res.token
						
						}
					});
				// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
				// 	console.log(res.data);
				// 	this.token = res.data.token
				// }).catch(err => {
				// 	console.log(err)
				// })
				
			},
			getfengzhongcolumns() {
					let data ={
						dictType:'apiary_bee_type'
					}
					this.$u.get("/common/getDictByType?",data).then((res) => {
						if (res.code == 200) {
						this.fengzhongcolumns = res.data.map(item => ({
						          value: item.dictValue,
						          label: item.dictLabel
						      }));
						
						}
					});
				
			},
			getmiyuancolumns() {
					let data ={
						dictType:'apiary_honey_type'
					}
					this.$u.get("/common/getDictByType?",data).then((res) => {
						if (res.code == 200) {
						this.miyuancolumns = res.data.map(item => ({
						          value: item.dictValue,
						          label: item.dictLabel
						      }));
						
						}
					});
				
				
			},
			addApiary(){
				let data ={
					
				}
				this.$u.get('/farm/apiary',data ).then((res) => {
				
					if (res.code === 200) {
						uni.navigateBack({
							delta: 1 // delta值为1时表示返回的页面层数
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
				
					}
				})
			},
			btn() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 1,
					type: 'all',
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles
						// let tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths)
						// tempFilePaths.forEach(item=>{
						// 	// 上传图片到七牛云
						
						// })
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								console.log(res,'resres');
								let str = JSON.parse(res.data)
								console.log(str.key)
								_this.userImgs = _this.upurl +'/'+ str.key
								
							}
						});
					}
				})
			
			},
			confirmfengzhong(e) {
				console.log(e);
				this.form.bee_type = e.value[0].id
				this.form.bee_type_text = e.value[0].text
			
				this.showfengzhong = false
			},
			confirmmiyuan(e) {
				this.form.honey_source = e.value[0].id
				this.form.honey_source_text = e.value[0].text
				this.showmiyuan = false
			},
			sourcelist() {
				request.put("/api/apiary/info", {}).then(res => {
					this.fengzhongcolumns[0] = this.setfor(res.data.data.bee_type)
					this.miyuancolumns[0] = this.setfor(res.data.data.honey_source)
				})
			},
			chooseAddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.form.lng = res.longitude
						this.form.lat = res.latitude
						this.form.address = res.address
					},
					fail: function(err) {
						// 检查错误消息，看是否是用户取消了位置选择  
						if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) {
							uni.showToast({
								title: '您取消了位置选择',
								icon: 'none'
							});
						} else {
							console.log('选择位置失败', err);
							// 处理其他失败情况  
						}
					},
				});

			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFDFD;
	}

	.page {
		padding-bottom: 200rpx;
		// position: relative;
		width: 750rpx;
		.btn{
			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;
		}
		.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;
			}
		}
		.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;

			.ips {
				width: 630rpx;

			}

			image {
				width: 18rpx;
				height: 32rpx;
			}

			.my-placeholder {
				font-weight: 400;
				font-size: 32rpx;
				color: #808080;
			}
		}
	}
</style>