xg_total_process_master_cloud_h5/pages/test/local/LocationDemo.vue

<template>
	<view>
	<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left"
		ref="inputForm">
		<u-form-item label="地理位置" prop="actualDrawerEmailAddress"
		             :rules="[
			     ]">
		    <view class="button-container">
				<button @click="getLocation">获取位置</button>
		    </view>
		</u-form-item>
		<u-form-item label="经度" prop="longitude" borderBottom>
			<u--input v-model="inputForm.longitude"  clearable></u--input>
		</u-form-item>
		<u-form-item label="纬度" prop="latitude" borderBottom>
			<u--input v-model="inputForm.latitude"  clearable></u--input>
		</u-form-item>

		<div class="container">
			<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
				<button class="clickBtn" @click="goToFilm('camera')">拍摄</button>
				<button class="clickBtn" @click="goToFilm('album')">从相册选择</button>
			</van-popup>
			<div class="img_box">
				<div class="left_box" @click="boxClick">
					<u--image width="150" height="75" :src="img1" />
				</div>

			</div>

		</div>
		</u--form>

	  </view>
</template>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>-->
<script>
	import wx from 'weixin-js-sdk';
	import UImage from "../../../uni_modules/uview-ui/components/u--image/u--image";

	export default {
		name: 'LocationComponent',
		components: {UImage},
		mounted() {
			this.getConfig()
		},
		data () {
			return {
				inputForm:{
					latitude:'',
					longitude:'',
					files:[]
				},
				show: false,//是否弹窗
				img1: '',
				img2: 'https://img01.yzcdn.cn/vant/cat.jpeg',
				imgFlag: '',//点击的是哪张图片
				timer: null

			}
		},
		methods: {
			getConfig() {
				this.initWeixin();
			},
			initWeixin() {
				this.inputForm.latitude = ''
				this.inputForm.longitude = ''
				// 假设这些参数是从后端获取的
				const appId = 'wx96885ba58675d910';
				const timestamp = '1724144081';
				const nonceStr = '1142148534';
				const signature = '494260AF76E8A6ECB89356A463C2031402873A3D';

				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: appId, // 必填，公众号的唯一标识
					timestamp: timestamp, // 必填，生成签名的时间戳
					nonceStr: nonceStr, // 必填，生成签名的随机串
					signature: signature, // 必填，签名
					jsApiList: ['getLocation','chooseImage',
						'uploadImage',
						'getLocalImgData',
						'downloadImage'] // 必填，需要使用的JS接口列表
				});

				wx.ready(function () {
					// 可以在这里调用其他API
					wx.openLocation({
						latitude: 0, // 纬度，浮点数，范围为90 ~ -90
						longitude: 0, // 经度，浮点数，范围为180 ~ -180。
						name: '', // 位置名
						address: '', // 地址详情说明
						scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
						infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
					});
					wx.checkJsApi({
						jsApiList: [
							'chooseImage',
							'previewImage',
							'uploadImage',
							'downloadImage'
						],
						success: function (res) {
							if (res.checkResult.getLocation == true) {
								wxChooseImage();
							}
						}
					});
				});

				wx.error(function (res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					console.log('验证失败:', res);
				});
			},
			getLocation() {
				wx.getLocation({
					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回火星坐标，可传入'gcj02'
					success:  (res)=> {
						let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						console.log('纬度:', latitude, '经度:', longitude);
						// 处理你的逻辑
						this.inputForm.latitude = res.latitude
						this.inputForm.longitude = res.longitude
						console.log('纬度:', this.inputForm, '经度:', this.longitude);

					},
					fail: function (err) {
						// 调用失败
						console.error('获取位置失败:', err);
					}
				});
			},
			chooseImage(){
				wx.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						let localIds = res.localIds; // 返回选定照片的本地ID列表（手机上操作就是手机端的ID列表，是一个数组），localId可以作为img标签的src属性显示图片
						wx.uploadImage({
							localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: function (result) {
								let serverId = result.serverId; // 返回图片的服务器端ID
								// 可以将serverId传给后台，用于存放在自己服务器上
							}
						});
					},
					fail: function() {},
					complete: function() {}
				});
			},
			wxChooseImage() {
				wx.chooseImage({
					success: function(res) {
						var localId = res.localIds;
						function upload() {
							//图片上传
							wx.uploadImage({
								localId: localId[i],
								success: function(res) {
									var serverId = res.serverIdl;
									//图片上传完成之后，进行图片的下载，图片上传完成之后会返回一个在腾讯服务器的存放的图片的ID--->serverId
									wx.downloadImage({
										serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
										isShowProgressTips: 1, // 默认为1，显示进度提示
										success: function (res) {
											var localId = res.localId; // 返回图片下载后的本地ID

											//通过下载的本地的ID获取的图片的base64数据，通过对数据的转换进行图片的保存
											wx.getLocalImgData({
												localId: localId, // 图片的localID
												success: function (res) {
													var localData = res.localData; // localData是图片的base64数据，可以用img标签显示

													//通过ajax来将base64数据转换成图片保存在本地
													$.ajax({
													});
												}
											});
										}
									});
								},
								fail: function(res) {
								}
							});
						}
					}
				});
			},
			boxClick () {
				this.show = true
			},
			goToFilm (sourceType) {
				this.show = false
				console.log(sourceType);
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
					sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有 ['album', 'camera']
					success: (res) => {
						var localIds = res.localIds;// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						var localId=localIds[0];
						wx.uploadImage({
							localId: localId,// 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1,// 默认为1，显示进度提示
							success: function (res) {
								var serverId = res.serverId;// 返回图片的服务器端ID
								wx.getLocalImgData({
									localId: localId,// 图片的localID
									success: function (res) {
										var localData = res.localData;// localData是图片的base64数据，可以用img标签显示
										this.img1 = localData
										console.log('img1',this.img1)
									}
								});
							}
						})
						// this.timer = window.setTimeout(() => {
						// 	wx.uploadImage({
						// 		localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
						// 		isShowProgressTips: 1, // 默认为1，显示进度提示
						// 		success: (res) => {
						// 			let serverId = res.serverId; // 返回图片的服务器端ID
						//
						//
						// 		}
						// 	})
						// }, 100);

					},

					fail: (err) => {
						console.log('chooseImage失败', err);
					},

					complete: () => {
						console.log('chooseImage接口调用完成');
					}
				});
			},

		}
	}
</script>

<style>
</style>