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&#45;&#45;image width="150" height="75" :src="img1" />-->
<!--				</div>-->

<!--			</div>-->

<!--		</div>-->
		<view class="u-demo-block__content">
			<view class="u-page__upload-item">
				<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
				></u-upload>
			</view>
		</view>
		</u--form>

	  </view>
</template>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>-->
<script>
	import actCategoryService from "@/api/flowable/actCategoryService"
	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 {
				fileList1: [],
				inputForm:{
					latitude:'',
					longitude:'',
					files:[]
				},
				show: false,//是否弹窗
				img1: '',
				img2: 'https://img01.yzcdn.cn/vant/cat.jpeg',
				imgFlag: '',//点击的是哪张图片
				timer: null

			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				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: lists[i].url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://www.example.com/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			getConfig() {
				this.initWeixin();
			},
			async initWeixin() {
				try {
					// 从后端获取签名参数
					let res = await actCategoryService.getSignature();
					console.log('res', res);

					// 初始化参数
					const appId = 'wxa79f618dcaf992f7';
					const timestamp = res.timestamp;
					const nonceStr = res.nonceStr;
					const signature = res.signature;

					// 确保参数成功赋值后执行 wx.config
					if (timestamp && nonceStr && signature) {
						wx.config({
							debug: false, // 开启调试模式
							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函数
							console.log('验证失败:', res);
						});
					} else {
						console.error('获取签名参数失败，无法配置 wx.config');
					}
				} catch (error) {
					console.error('初始化微信JS-SDK失败:', error);
				}
			},

			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
                let _this = this
				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>