zk-driver-wechat-applet/pages/index/index.vue

<template>
	<view>
		<top-box :token="token" :userinfo="userinfo"></top-box>
		<view class="main-box">
			<view class="carinfo">
				<view class="norecord" v-if="noData">{{noData}}</view>
				<uni-swiper-dot :info="datalist" :current="current" field="content" mode="default"
					:dots-styles="dotsStyles">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in datalist" :key="index">
							<view class="swiper-item">
								<view class="plate">
									<view>车牌号</view>
									<view>
										<image src="../../static/icon1.png"></image>
									</view>
									<view>电池AI云管理监控中</view>
								</view>
								<view class="plate-number">
									<view>{{item.plate || '暂无信息'}}</view>
									<view>
										<image src="../../static/icon2.png"></image>
									</view>
								</view>
								<view class="battery-soc">
									<view>电池SOC</view>
									<view>
										<view class="strip">
											<!-- 第二层进度条的颜色 -->
											<view class="blue" :style="'width:'+item.soc+'%'">
												<!-- （进度条显示的图片  样式：根据父元素进行相对定位 ，本身绝对定位 ） -->
												<text class="protext" :style="'left:'+item.soc+'%'"></text>
												<view class="pronumber" :style="'left:'+(item.soc-6)+'%'">
													{{item.soc || 0}}%
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="battery-info">
									<view>
										<view>{{item.drivingMileage || 0}}km</view>
										<view>已行驶里程</view>
									</view>
									<view>
										<view>{{item.current || 0}}km</view>
										<view>预计剩余里程</view>
									</view>
									<view>
										<view>{{item.voltage || 0}}V</view>
										<view>电压</view>
									</view>
									<view>
										<view>{{item.drivingMileage || 0}}A</view>
										<view>电流</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>

			<view class="change-title">
				<view>
					<image src="../../static/icon3.png"></image>
				</view>
				<view>换电站信息</view>
			</view>
			<view class="change-box">
				<view class="title">三江新区沙坪换电站</view>
				<view class="tags">
					<view>常去地点</view>
					<view>24小时营业</view>
				</view>
				<view class="piclist">
					<view>
						<image src="../../static/pic.jpg"></image>
					</view>
					<view>
						<image src="../../static/pic.jpg"></image>
					</view>
				</view>
				<view class="address">
					<view>876m · 四川省宜宾市三江新区沙坪镇沙溪街道89号</view>
					<view @click="jumptest">
						<image src="../../static/icon4.png"></image>
						<view>电话</view>
					</view>
					<view @click="jumpmaps">
						<image src="../../static/icon5.png"></image>
						<view>路线</view>
					</view>
				</view>
				<view class="battery-num">
					<view>可换电池</view>
					<view>8</view>
				</view>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isAuthShow: false,
				token: null,
				userinfo: null,
				latitude: 29.632675, //纬度参数
				longitude: 106.569374, //经度参数
				datalist: [],
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(88, 190, 107,0.6)',
					selectedBackgroundColor: 'rgba(88, 190, 107,0.9)',
				},
				params: {
					lat: undefined,
					lng: undefined,
					page: 1,
					pageSize: 1,
					orderByWays: 'desc'
				},
				noData:null,
			}
		},
		onShow() {
			this.$store.dispatch("usersToken").then(() => {
				//微信用户第二次登录
				this.isAuthShow = false;
				this.token = this.$store.getters.getToken;
				this.userinfo = this.$store.getters.getUser;
			}).catch(() => {
				//微信用户首次登录
				this.isAuthShow = true;
			});
		},
		onLoad() {
			this.mapSelect()
		},
		mounted() {
			this.getHomePage()
		},
		onReachBottom(){
			
		},
		methods: {
			jumptest(){
				uni.navigateTo({
					url:'/pages/scan/index'
				})
			},
			//获取车辆信息
			getHomePage() {
				this.$http.homepage(this.params).then(res => {
					console.log(res)
					if(res.code === 0){
						if(res.data.vehDataVoList.length==0){
							this.noData='暂无记录'
						}else{
							this.datalist = res.data.vehDataVoList
						}
					}else{
						this.noData='暂无记录'
						this.$utils.msg(res.msg)
					}
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			//打开地图导航
			jumpmaps() {
				if (this.latitude && this.longitude) {
					uni.openLocation({
						latitude: 29.632675,
						longitude: 106.569374,
						name: '渝北区风暴之眼电竞酒店(机场路南)',
						address: '重庆市重庆市渝北区汇流路1号'
					})
				} else {
					this.$utils.msg("未获取到您的位置信息");
				}
			},
			//获取用户经纬度
			mapSelect() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						that.latitude = res.latitude
						that.longitude = res.longitude
						console.log(res, 'getLocation')
					},
					fail: () => {
						this.getMapLocation()
					},
				})
			},
			//提示用户打开位置信息
			getMapLocation() {
				uni.getSetting({
					success: (res) => {
						var status = res.authSetting
						if (!status['scope.userLocation']) {
							// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
							uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
								success: (tip) => {
									if (tip.confirm) {
										// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
										uni.openSetting({
											success: (data) => {
												// 如果用户授权了地理信息在，则提示授权成功
												if (data.authSetting[
														'scope.userLocation'] ===
													true) {
													uni.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000,
													})
													// 授权成功后，然后再次chooseLocation获取信息
													this.mapSelect()
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000,
													})
												}
											},
										})
									}
								},
							})
						}
						if (status['scope.userLocation'] === true && this.latitude === null && this
							.longitude === null) {
							uni.showToast({
								title: '请开启您手机的位置信息!',
								icon: 'none',
								duration: 5000,
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '调用授权窗口失败',
							icon: 'none',
							duration: 1000,
						})
					},
				})
			},
			//扫码进入换电信息页面
			toscan() {
				uni.switchTab({
					url: '/pages/scan/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authorization {
		width: 640rpx;
		height: 840rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.main-box {
		padding: 0 30rpx;
		.carinfo {
			width: 100%;
			height: 350rpx;
		}
		.norecord{
			text-align: center;
			color: #86909c;
			position: relative;
			top: 40%;
		}
		.swiper-box {
			height: 380rpx;
			.swiper-item {
				width: 690rpx;
				height: 350rpx;
				padding: 32rpx;
				box-sizing: border-box;
				background-image: url('https://xcx.xnymzx.com/zkstation/car-bg.png');
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.plate {
					display: flex;
					justify-content: space-between;
					view:first-child {
						flex: 1;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						vertical-align: middle;
					}

					view:last-child {
						width: 280rpx;
						text-align: right;
						color: #6cc57d;
						font-size: 30rpx;
					}
				}

				.plate-number {
					display: flex;
					image {
						width: 26rpx;
						height: 26rpx;
						vertical-align: middle;
					}
					view:first-child {
						font-weight: 600;
						font-size: 32rpx;
						padding-right: 15rpx;
					}
				}
				.battery-soc {
					display: flex;

					view:first-child {
						width: 138rpx;
					}
					view:last-child {
						flex: 1;
						.strip {
							/* 父元素相对定位 */
							position: relative;
							width: 480rpx;
							height: 18rpx;
							background-color: #fff;
							top: 10rpx;
						}
						.blue {
							height: 18rpx;
							background-color: #ff7d00;
							font-size: 28rpx;
						}
						.protext {
							width: 2rpx;
							height: 32rpx;
							background: #86909c;
							/* 子元素绝对定位   */
							position: absolute;
							/* 定位方向：属性值 */
							top: -9rpx
						}
						.pronumber {
							font-size: 26rpx;
							font-weight: bold;
							position: absolute;
							/* 定位方向：属性值 */
							top: 30rpx;
						}
					}
				}
				.battery-info {
					display: flex;
					justify-content: space-between;

					text-align: center;
					line-height: 36rpx;

					view>view:first-child {
						font-weight: bold;
					}

					view>view:last-child {
						color: #939da7;
						font-size: 26rpx;
						margin-top: 8rpx;
					}
				}
			}
		}

		.change-title {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			margin: 30rpx 0;

			image {
				width: 9rpx;
				height: 39rpx;
			}

			view:first-child {
				padding-right: 12rpx;
			}

			view:last-child {
				font-weight: bold;
				font-size: 32rpx;
				line-height: 32rpx;
			}
		}

		.change-box {
			width: 690rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.title {
				font-weight: bold;
				color: #110d2e;
				font-size: 34rpx;
			}

			.tags {
				display: flex;

				view {
					background: #f5f5f5;
					color: #979797;
					font-size: 24rpx;
					padding: 8rpx 15rpx;
					margin: 15rpx 12rpx 15rpx 0rpx;
					border-radius: 5rpx;
				}
			}

			.piclist {
				display: flex;
				justify-content: space-between;
				margin: 18rpx 0rpx;
				width: 630rpx;
				overflow: hidden;

				// view{
				// 	margin-right: 15rpx;
				// }
				image {
					width: 298rpx;
					height: 189rpx;
					box-sizing: border-box;
					border-radius: 15rpx;
				}
			}

			.address {
				display: flex;
				justify-content: space-between;
				text-align: center;
				color: #86909c;
				font-size: 24rpx;

				view:first-child {
					width: 445rpx;
					text-align: left;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.battery-num {
				color: #86909c;
				font-size: 30rpx;
				margin-top: 12rpx;
				display: flex;
				line-height: 36rpx;

				view:last-child {
					color: #000000;
					font-weight: 600;
					margin-left: 15rpx;
					font-size: 36rpx;
				}
			}
		}
	}
</style>