locationPick/pages/index/pointPick/pointPick.vue

<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item class="content" label="名称" required name="pointName">
					<input v-model="valiFormData.pointName" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item class="content" label="坐标" required name="location">
					<view class="uni-input-wrapper">
						<input v-model="valiFormData.location" placeholder="" />
						<button class="mini" size="mini" @click="getLocation">定位</button>
					</view>
				</uni-forms-item>
				<uni-forms-item label="图片">
					<view class="example-body">
						<jade-image-upload
							:list="media"
							:control="control"
							:columnType="columnType"
							:maxCount="maxCount"
							:compressSize="compressSize"
							:compressQuality="compressQuality"
							:compressWidth="compressWidth"
							:imageSize="imageSize"
							:sourceType="sourceType"
							@chooseFile="chooseFile"
							@imgDelete="mediaDelete"
						></jade-image-upload>
						<!-- 数据变化的JSON  -->
						<!-- <view style="padding: 20rpx; box-sizing: border-box; display: flex; flex-direction: column">
							图片上传： -->
						<!-- #ifdef H5 -->
						<!-- <view style="padding: 20rpx; word-break: break-all">{{ media.length ? media : '暂无数据' }}</view> -->
						<!-- #endif -->
						<!-- #ifndef H5  -->
						<!-- <view style="padding: 20rpx; word-break: break-all">{{ media.length ? JSON.stringify(media) : '暂无数据' }}</view> -->
						<!-- #endif -->
						<!-- </view> -->
					</view>
				</uni-forms-item>
				<uni-forms-item class="content" label="备注" name="remark">
					<input type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			arrs:[],
			lon: 114.57,
			lat: 38.04,
			locations: [],
			locationss: [
				{
					points: [],
					color: '#0000AA',
					width: 20,
					arrowLine: true
				},
				{
					points: [
						{ latitude: 38.044231770833335, longitude: 115.56865288628472 },
						{ latitude: 39.044231770833335, longitude: 116.56865288628472 },
						{ latitude: 40.044231770833335, longitude: 117.56865288628472 },
						{ latitude: 41.044231770833335, longitude: 118.56865288628472 },
						{ latitude: 42.044231770833335, longitude: 119.56865288628472 },
						{ latitude: 43.044231770833335, longitude: 120.56865288628472 }
					],
					width: 10,
					color: '#00aa29',
					arrowLine: true
				}
			],
			control: true,
			columnType: 'other',
			maxCount: 6,
			compressSize: 0.2,
			imageSize: 2,
			compressQuality: 0.8,
			compressWidth: 375,
			sourceType: ['album'],

			uploadTask: null,
			media: [], //数据源
			// 校验表单数据
			valiFormData: {
				pointName: '',
				lon: '',
				lat: '',
				remark: '',
				img: '',
				location:''
			},
			// 校验规则
			rules: {
				pointName: {
					rules: [
						{
							required: true,
							errorMessage: '名称不能为空'
						}
					]
				},
				location: {
					rules: [
						{
							required: true,
							errorMessage: '坐标不能为空'
						}
					]
				}
			}
		};
	},
	computed: {},
	onLoad() {},
	onReady() {},
	methods: {
		//上传
		chooseFile(e) {
			this.uploadFileToServe(e);
		},
		//中断上传并删除
		mediaDelete(e) {
			this.uploadTask ? this.uploadTask.abort() : '';
			this.media.splice(e, 1);
		},
		//上传逻辑处理
		uploadFileToServe(urlList) {
			if (!urlList || urlList.length <= 0) {
				return;
			}
			//以七牛云为例
			// uni.request({
			// 	url: 'qiniu', //后端接口，仅为示例，并非真实接口地址。
			// 	method: 'GET',
			// 	success: (res) => {
			// let token = res.data.data; //拿到必须的token
			urlList.forEach((item) => {
				this.uploadTask = uni.uploadFile({
					url: 'https://zb.aitto.net/prod-api/common/upload', //上传接口，仅为示例
					filePath: item.src,
					name: 'file',
					// formData: {
					// 	token: token
					// },
					success: (res) => {
						let data = JSON.parse(res.data); //返回的数据
						console.log(data);
						if (data.code != 200) {
							item.status = 'error';
							item.progress = '上传失败';
						} else {
							item.status = 'success';
							item.progress = '上传成功';
							item.src = data.fileName;
						}
					}
				});
				this.uploadTask.onProgressUpdate((res) => {
					item.percent = res.progress;
					this.media.splice(item.index, 1, item);
				});
			});
			// 	}
			// });
		},

		submit(ref) {
			let this_ = this;
			this.$refs[ref]
				.validate()
				.then((res) => {
					console.log(this_.media);
					let arr = [];
					if (this_.media && this_.media.length) {
						this_.media.forEach((item) => {
							arr.push(item.src);
						});
					}
					this_.valiFormData.img = arr.join(',');
					uni.request({
						header: { 'Content-Type': 'application/json' },
						url: 'https://zb.aitto.net/prod-api/mobile/point', //仅为示例，并非真实接口地址。
						data: this_.valiFormData,
						method: 'POST',
						success: (res) => {
							console.log(res.data);
						}
					});
					console.log('success', this_.valiFormData);
					uni.showToast({
						title: `保存成功`
					});
				})
				.catch((err) => {
					console.log('err', err);
				});
		},
		getLocation() {
			let this_ = this;
			uni.getLocation({
				type: 'gcj02',
				altitude:true,
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this_.valiFormData.lon = res.longitude;
					this_.valiFormData.lat = res.latitude;
					this_.valiFormData.location = '经度:' + res.longitude + ',纬度:' + res.latitude;
				}
			});
		},
		
	}
};
</script>

<style lang="scss">
.example {
	padding: 15px;
	background-color: #fff;
}

.segmented-control {
	margin-bottom: 15px;
}

.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

.form-item {
	display: flex;
	align-items: center;
}

.button {
	display: flex;
	align-items: center;
	height: 35px;
	margin-left: 10px;
}
.content {
	display: flex;
	align-items: center;
}
.uni-input-wrapper {
	display: flex;
	flex-direction: inherit;

	.mini {
		font-size: 22rpx;
	}
}
</style>