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

<template>
	<!-- 首页 -->
	<view class="card_index_bgc">
		<view class="head_address" :style="{paddingTop:topHight + 40 + 'rpx'}" @click="goSelectAddress">
			<u-icon name="map" size="23"></u-icon>
			<view class="add_title">{{address || '定位中...'}}</view>
			<u-icon name="arrow-right" size="16"></u-icon>
		</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>
				<view class="title_hint">{{item.title}}</view>
			</view>
			<view class="card_bottle" @click="scanning">
				<view class="card_fiche" :style="{backgroundColor:'#195eea'}">
					<span class="iconfont icon_image icon-saomachaxun"></span>
				</view>
				<view class="title_hint">气瓶流转信息</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: '#1ee94d',
				}],
				city: '',
				latitude: '',
				longitude: '',
				address: '',
				addressList: {},
				topHight: '',
				token: ''
			}
		},
		created() {
			var city1 = this.$cache.getCache('city')
			var district2 = this.$cache.getCache('district')
			if (!city1 && !district2) {
				this.getLocation()
			} else {
				if (city1) {
					this.address = city1
				} else if (district2) {
					this.address = district2
				}
			}
			this.topHight = uni.getSystemInfoSync().statusBarHeight
			uni.$on('selectArea', () => {
				this.$nextTick(() => {
					var city1 = this.$cache.getCache('city')
					var district2 = this.$cache.getCache('district')
					if (district2) {
						this.address = district2
					} else if (city1) {
						this.address = city1
					}
				})
			})
		},
		mounted() {
			var token = this.$cache.getToken()
			this.token = token
		},
		methods: {
			//获取经纬度
			getLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true,
					success: (res) => {
						this.addressList = res
						this.$cache.setCache('longitude', res)
						if (!this.address) {
							this.address = res.address.district
							this.$cache.setCache('city', res.address.city)
							this.$cache.setCache('district', res.address.district)
						}
					},
				});
			},
			scanCodes(value) {
				if (this.token) {
					if (value.id == 'Booking') {
						uni.navigateTo({
							url: '/pages/home/company'
						});
					}
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 选择地区
			goSelectAddress() {
				uni.navigateTo({
					url: '/pages/home/locationArea'
				});
			},
			// 扫码溯源
			scanning() {
				uni.navigateTo({
					url: '/pages/index/codeTracing'
				});
			}
		}
	}
</script>

<style lang="scss">
	.card_index_bgc {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		background-image: linear-gradient(#a9e3f1, #f3f4f6, #ffffff);
	}

	.head_address {
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.add_title {
		font-size: 30rpx;
		font-weight: 600;
		margin: 0rpx 5rpx;
	}

	.card_gas_cylinder {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #027DB4;
		padding: 10rpx 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;
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

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

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

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

	.title_hint {
		margin-top: 10rpx;
		color: #606266;
		width: 90%;
		text-align: center;
		font-size: 26rpx;
	}
</style>