gas-cylinder-h5/pages/home/index.vue

<template>
	<!-- 首页 -->
	<view>
		<view class="card_gas_cylinder">气瓶安全追溯管理系统</view>
		<!-- <view class="card_port center_in">{{genreTitle}}</view> -->
		<view class="card_cylinder">
			<view class="card_bottle" v-for="(item,index) in stationList" :key="index" @click="scanCodes(item)">
				<view class="card_fiche" :style="{backgroundColor:item.color}">
					<span class="iconfont icon_image" :class="item.icon"></span>
					<view class="title_hint">{{item.title}}</view>
				</view>
			</view>
			<view class="card_bottle" @click="scanning">
				<view class="card_fiche" :style="{backgroundColor:'#67C23A'}">
					<span class="iconfont icon_image icon-saomachaxun"></span>
					<view class="title_hint">扫码查询气瓶流转信息</view>
				</view>
			</view>
			<view style="width: 40%;margin: 30rpx 0rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				stationList: [{
					id: 'Booking',
					title: '订气',
					icon: 'icon-lpg',
					color: '#f4b237',
				}],
				city:'',
				latitude:'',
				longitude:'',
			}
		},
		onShow() {
			this.getLocation()
		},
		mounted() {
			this.getLocation()
			var userInfo = this.$cache.getCache('userInfo')
			// console.log(userInfo, 25)
		},
		methods: {
			//获取经纬度
			getLocation() {
				console.log(24)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true,
					success: (res) => {
						console.log(res,9998)
						// #ifdef APP-PLUS
						this.city = res.address.city;
						// #endif
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						// #ifdef H5
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo', //逆地理编码接口地址。
							data: {
								key: '2eba463a7c621e888e478eee3f3209c9',
								//location：经纬度  lng ：经度  lat：纬度  
								location: this.longitude + ',' + this.latitude,
								radius: 1000,
								extensions: 'all',
								batch: false,
								roadlevel: 0
							},
							success: (res) => {
								console.log(res.data,326326);
								//详细地址信息
								if (res.statusCode == 200 && res.data.info == 'OK') {
									this.city = res.data.regeocode.addressComponent.city
								}
							}
						});
						// #endif
					},
				});
			},
			scanCodes(value) {
				if (value.id == 'Booking') {
					uni.navigateTo({
						url: '/pages/home/company'
					});
				}
			},
			// 扫码溯源
			scanning() {
				uni.navigateTo({
					url: '/pages/index/codeTracing'
				});
			}
		}
	}
</script>

<style lang="scss">
	.card_gas_cylinder {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #027DB4;
		padding: 50rpx 20rpx 0rpx 20rpx;
	}

	.card_port {
		font-size: 40rpx;
		font-weight: bold;
		color: #027DB4;
		padding-bottom: 20rpx;
	}

	.card_cylinder {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.card_bottle {
		margin: 30rpx 0rpx;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card_fiche {
		display: flex;
		align-items: center;
		flex-direction: column;
		// justify-content: center;
		justify-content: flex-end;
		width: 100%;
		height: 240rpx;
		background-color: #027DB4;
		border-radius: 26rpx;
	}

	.icon_image {
		color: #fff;
		font-size: 80rpx;
	}

	.title_hint {
		height: 80rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: #fff;
		width: 80%;
		text-align: center;
		font-size: 32rpx;
	}
</style>