suta/pagesFengChang/addfengchang/index.vue

<template>
	<view class="page">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="page-box">
			<!-- 蜂场名称 -->
			<view>
				<view class="text-box">蜂场名称</view>
				<view>
					<u--input class="input-b" shape="circle" placeholder="请输入蜂场名称(5个字以内)" border="surround"
						v-model="form.name"></u--input>
				</view>
			</view>
			<!-- 蜂场地区 -->
			<view>
				<view class="text-box">蜂场地区</view>
				<view>
					<u-button @click="show = true" class="input-b" shape="circle"
						placeholder="请选择蜂场地区">{{form.area}}</u-button>
				</view>
			</view>
			<!-- 具体位置 -->
			<view>
				<view class="text-box">具体位置</view>
				<view @click="gotomap">
					<u--input class="input-b" shape="circle" placeholder="请选择具体位置" border="surround"
						v-model="form.address">{{form.address}}</u--input>
					<!-- <view class="input-b">{{form.lng}},{{form.lat}}</view> -->
				</view>
			</view>
			<!-- 蜂种 -->
			<view>
				<view class="text-box">蜂种</view>
				<view @click="showfengzhong = true">
					<u--input disabled class="input-b" shape="circle" placeholder="请选择蜂种" border="surround"
						v-model="form.bee_type_text"></u--input>
					<!-- <picker v-model="form.bee_type" :range="bee_type" @change="change">{{form.bee_type_text}}</picker> -->
				</view>
			</view>
			<!-- 蜜源 -->
			<view>
				<view class="text-box">蜜源</view>
				<view @click="showmiyuan = true">
					<u--input disabled class="input-b" shape="circle" placeholder="请选择蜜源" border="surround"
						v-model="form.honey_source_text"></u--input>
				</view>
			</view>
			<!-- 蜂场介绍 -->
			<view>
				<view class="text-box">蜂场介绍</view>
				<view>
					<u--input class="input-b" shape="circle" placeholder="请输入蜂场的介绍内容(150个字以内)" border="surround"
						v-model="form.remark" @change="change"></u--input>
				</view>
			</view>
			<!-- 照片 -->
			<view>
				<view class="text-box">照片</view>
				<view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
				</view>
			</view>
		</view>
		<view class="mag-box">
			<u-button @click="submit" size="large" shape="circle" text="保 存" color="#23693f"></u-button>
		</view>
		<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
			:columns="fengzhongcolumns"></u-picker>
		<u-picker @cancel="showmiyuan=false" @confirm="confirmmiyuan" :show="showmiyuan"
			:columns="miyuancolumns"></u-picker>
		<address-picker @cancel="show=false" :address-data="addressData" :show="show" :columns="columns"
			@confirm="confirm"></address-picker>


	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		name: 'FxIndex',

		data() {
			return {
				baseurl:'',
				form: {
					bee_type_text: '',
					area_id: '',
					area: '',
					honey_source_text: '',
					lng: '',
					lat: '',
					address: '',
					bee_type: '',
					honey_source: '',
					remark: '',
					images: '',
				},
				value: '',
				show: false,
				showfengzhong: false,
				fengzhongcolumns: [
					[]
				],
				showmiyuan: false,
				// 蜜源:1=百花蜜,2=油菜蜜,3=荆条蜜,4=荔枝蜜,5=枣花蜜,6=椴树蜜,7=槐花蜜,8=龙眼蜜,9=枇杷蜜,10=柑橘蜜,11=益母草蜜,12=葵花蜜,13=五味子蜜,14=夏枯草蜜,15=中草药蜜,16=狼牙蜜,17=王倍子蜜,18=其它蜜
				miyuancolumns: [
					[{
							text: '百花蜜',
							id: 1
						}, {
							text: '油菜蜜',
							id: 2
						},
						{
							text: '荆条蜜',
							id: 3
						},
						{
							text: '荔枝蜜',
							id: 4
						},
						{
							text: '枣花蜜',
							id: 5
						},
						{
							text: '椴树蜜',
							id: 6
						},
					]

				],
				columns: [],
				columnData: [],
				addressData: ['北京市', '北京市', '东城区'],
				fileList1: [],
				uploadfileList: [],
				title: '添加蜂场',
			};
		},
		mounted() {
			this.sourcelist()
			this.getdataList()
		},
	

		methods: {
			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)
				})
			},
			setfor(item) {
				const res = []
				Object.entries(item).forEach(([key, value]) => {
					res.push({
						text: value,
						id: key
					})
				});
				return res
			},
			gotomap() {
				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);
							// 处理其他失败情况  
						}
					},
				});
				// console.log("跳转到地图")
				// uni.navigateTo({
				// 	url: '/pagesFengChang/components/map',
				// })
			},

			submit() {
				console.log(this.form)
				this.form.images = this.uploadfileList.map(item => item).join(',')
				if (this.form.id) {
					request.put("/api/apiary/update/" + this.form.id, this.form).then(res => {
						console.log(res);
						if (res.data.code == 0) {
							uni.navigateBack()
						} else {
							uni.showModal({
								title: "提示",
								content: res.data.msg
							})
						}
					})
				} else {
					request.post("/api/apiary/add", this.form).then(res => {
						console.log(res);
						if (res.data.code == 0) {
							uni.navigateBack()
						} else {
							uni.showModal({
								title: "提示",
								content: res.data.msg
							})
						}
					})
				}

			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this[`uploadfileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event);
				let lists = [].concat(event.file)
				console.log(lists);
				let fileListLen = this[`fileList${event.name}`].length
				console.log(this[`fileList${event.name}`]);
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// uploadFilePromise(url) {
			// 	console.log(url);
			// 	var that = this
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: 'https://wx.beishaoyuan.com/', // 仅为示例，非真实的接口地址 
			// 			filePath: url,
			// 			name: 'file',
			// 			success: (res) => {
			// 				console.log(res)
			// 				const res2 = JSON.parse(res.data)
			// 				that.uploadfileList = that.uploadfileList.concat(res2.data.path)
			// 				resolve(res2.data)
			// 			}
			// 		});
			// 	})
			// },
			uploadFilePromise(url) {
				console.log('尝试上传的文件路径:', url);
				// 使用箭头函数确保this的上下文  
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://wx.beishaoyuan.com/api/index/upload', // 确保这是正确的上传接口路径  
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log(res,'0000');
							try {
								// 确保服务器返回的是JSON字符串  
								const res2 = JSON.parse(res.data);
								console.log('上传成功:', res2);
								// 确保res2的结构符合你的预期  
								if (res2 && res2.data && res2.data.path) {
									this.uploadfileList = this.uploadfileList.concat(res2.data.url);
								}
								resolve(res2.data);
							} catch (error) {
								console.error('解析服务器响应失败:', error);
								reject(error);
							}
						},
						fail: (error) => {
							// 使用errMsg而不是msg，这取决于实际的error对象结构  
							console.error('上传失败:', error.errMsg || error);
							reject(error.errMsg || error);
						},
					});
					// 注意这里不需要返回a，因为uni.uploadFile是一个异步操作  
				});
			},
			
			// const axios = require('axios');
			// const FormData = require('form-data');
			// const fs = require('fs');
			// let data = new FormData();
			// data.append('file', fs.createReadStream('/C:/Users/12607/Downloads/oi4OG5FQXQpRERqBguILQQ9OtNQE (1).jpg'));
			
			// let config = {
			//   method: 'post',
			//   maxBodyLength: Infinity,
			//   url: 'https://wx.beishaoyuan.com/api/index/upload',
			//   headers: { 
			//     'Cookie': 'think_lang=zh-cn', 
			//     ...data.getHeaders()
			//   },
			//   data : data
			// };
			
			// axios.request(config)
			// .then((response) => {
			//   console.log(JSON.stringify(response.data));
			// })
			// .catch((error) => {
			//   console.log(error);
			// });




			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
			},
			change() { // 输入框的值
				console.log('值')
			},
			getdataList() {
				//获取地区
				request.get("/api/index/getArea", {}).then(res => {
					console.log(res);
				})
			},


			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.form.area_id = e.areaId[2]
				// this.form.address = e.value.toString()
				this.form.area = e.value.toString()
				console.log(this.form.area_id, this.form.address)
				this.show = false
			},
			updateValue(newValue) {
				let marker = JSON.parse(newValue)
				console.log(marker, "options")
				this.form.lng = marker[0].longitude
				this.form.lat = marker[0].latitude
				console.log(this.form, "form")
				this.$forceUpdate()
			}
		},
		onLoad(option) {
			if (option.info) {
				this.form = JSON.parse(option.info)
				if(this.form.images){
					let imagesArray = this.form.images.split(',');
					let prefixedImagesArray = imagesArray.map(imagePath => ({url: `${imagePath.trim()}`}));  
					this.fileList1 = prefixedImagesArray 
				}
					
					console.log(this.fileList1);
				this.title = '编辑蜂场'
			} else {
				this.title = '添加蜂场'
			}
			uni.$on('newPages', (e) => {
				this.form.lng = e.value.longitude
				this.form.lat = e.value.latitude
			})
		},
		onUnload() {
			uni.$off('newPages')
		}
	};
</script>

<style lang="scss" scoped>
	.input-b {
		background-color: #f7f7f7;
	}

	.text-box {
		margin: 30rpx 0 20rpx 15rpx;
	}

	.page-box {
		padding: 180rpx 50rpx 280rpx;
	}

	.mag-box {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 89%;
		padding: 0 40rpx;
		margin-bottom: 50rpx;
	}

	.page {
		height: 100%;
		width: 100%;
		position: absolute;
		background-color: #ffff;
		color: #8888;
	}
</style>