pika_shangjia/machineAndCell/machineDetailEdit/machineDetailEdit.vue

<template>
	<view class="top">
		<view>
			<view class="machine-name">机柜名称</view>
			<view class="input-box ddflex">
				<input placeholder="输入机柜名称"/>
			</view>
		</view>
		<view>
			<view class="machine-name">所在地区</view>
			<view class="input-box ddflex">
				<input v-model="addressObj.name" :disabled="true" class="fflex" placeholder="选择所在地区"/>
				<view style="margin-left: 10rpx;" @click="chooseLocation">
					<image class="address-icon" src="../../static/pages/images/address-icon2.png"></image>
					<view class="address-label">定位</view>
				</view>
			</view>
		</view>
		
		<view class="select-label">
			请选择地址
		</view>
		
		<view>
			<view class="address-item">
				<view class="address-text">{{addressObj.address}}</view>
				<view class="address-text2">当前所在区域</view>
			</view>
			<view class="address-item" v-for="item in addressList" @click="selectAddress(item)">
				<view class="address-text">{{item.title}}</view>
				<view class="address-text2">{{item.address}}</view>
			</view>
		</view>
	
		
		<!-- 保存按钮 -->
		<view class="savepadding" style="height: 150rpx;"></view>
		<view class="savepadding submit-box">
			<view class="submit-btn" @click="jumpUrl('')">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	// 引入SDK核心类
	var QQMapWX = require("../../utils/qqmap.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				
				latitude:28.23529,
				longitude:112.93134,
				
				addressObj:{
					name:'',
					address:''
				},
				addressList:[]
			}
		},
		onLoad(options) {
			// 实例化API核心类
			QQMapWX.initMap();
			let location={
				latitude:this.latitude,
				longitude:this.longitude,
			}
			this.reverseGeocoder(location,true)
		},
		onShow() {
		
		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			chooseLocation() {
				var tha = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name) {
							tha.addressObj= res;
							tha.reverseGeocoder(res);
							console.log('地址数据》》》：', res);
						}
					}
				});
			},
			reverseGeocoder(location,init) {
				QQMapWX.reverseGeocoder(location, data => {
					if(init){
						this.addressObj.address = data.address
						this.addressObj.name = data.formatted_addresses.recommend
					}
					this.addressList = data.pois
					console.log('解析后的地址地址数据：', data);
				});
			},
			// 直接选择地址
			selectAddress(item){
				this.addressObj.address = item.address
				this.addressObj.name = item.title
				this.latitude = item.location.lat
				this.longitude = item.location.lng
				let location={
					latitude:this.latitude,
					longitude:this.longitude,
				}
				this.reverseGeocoder(location)
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./machineDetailEdit.css";
</style>