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

<template>
	<view class="main">
		<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" v-for="(item,index) in stationDataVoList" :key="item.stationInfo.id">
				<view class="title">{{item.stationInfo.stationName}}</view>
				<view class="tags">
					<view>常去地点</view>
					<view>24小时营业</view>
				</view>
				<view class="piclist">
					<view v-for="(img,index) in item.urlList" :key="index">
						<image :src="img"></image>
					</view>
				</view>
				<view class="address">
					<view v-if="item.stationInfo.distance">{{item.stationInfo.distance >= 1000 ? (item.stationInfo.distance/1000).toFixed(1)+'km' : item.stationInfo.distance+'m'}} · {{item.stationInfo.address}}</view>
					<view v-else>{{item.stationInfo.address}}</view>
					<view @click="makePhone(item.stationInfo.phoneNum)">
						<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>{{item.batteryNum}}</view>
				</view>
			</view>
		</view>
		<view class="grace-loading" v-if="isLoadAll">{{ loadingTxt }}</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: null,
					lng: null,
					page: 1,
					pageSize: 1,
					orderByWays: 'desc'
				},
				noData: null,
				stationDataVoList: [],
				isLoadAll: false,
				totalPages: 1, // 总页数
				loadingTxt: '加载中...',
				pageState:0,
			}
		},
		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;
			});
		},
		beforeMount() {
			this.mapSelect()
		},
		mounted() {
			this.getHomePage()
		},
		onReachBottom() {
			this.pageState=1
			if (this.totalPages <= this.params.page) {
				if(this.$storage.getJson("token")!=null){
					this.$utils.msg('没有更多了...')
				}
			} else {
				this.params.page++
				this.$utils.msg('数据加载中...')
				this.getStationInfo() // 每次滑动请求接口，实现上拉加载更多数据
			}
		},
		methods: {
			//拨打电话
			makePhone(num) {
				uni.makePhoneCall({
					phoneNumber: num.toString(), //电话号码
				})
			},
			//获取换电站信息
			getStationInfo() {
				this.$http.homepage(this.params).then(res => {
					console.log(res)
					if (res.code === 0) {
						if (res.data.stationDataVoList.list.length == 0) {
							this.loadingTxt = '暂无数据'
						} else {
							if(this.pageState === 1){
								this.stationDataVoList = [...this.stationDataVoList, ...res.data.stationDataVoList.list]
							}else{
								this.stationDataVoList = res.data.stationDataVoList.list
							}
						}
					} else {
						this.loadingTxt = '暂无数据'
						// this.$utils.msg(res.msg)
					}
				})
			},
			//获取车辆信息
			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
						}
						if (res.data.stationDataVoList.list.length == 0) {
							this.loadingTxt = '暂无数据'
							this.isLoadAll = true;
						} else {
							this.stationDataVoList = res.data.stationDataVoList.list
							this.totalPages = res.data.stationDataVoList.total
						}
					} else {
						this.noData = '暂无记录'
						this.loadingTxt = '暂无数据'
						this.isLoadAll = true;
						let token = this.$storage.getJson("token");
						if(token == null){
							this.$utils.msg('请先登录')
						}else{
							this.$utils.msg(res.msg)
						}
					}
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			//打开地图导航
			jumpmaps() {
				if (this.params.lat && this.params.lng) {
					uni.openLocation({
						latitude: this.params.lat,
						longitude: this.params.lng,
						name: '渝北区风暴之眼电竞酒店(机场路南)',
						address: '重庆市重庆市渝北区汇流路1号'
					})
				} else {
					this.$utils.msg("未获取到您的位置信息");
				}
			},
			//获取用户经纬度
			mapSelect() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						that.params.lat = res.latitude
						that.params.lng = res.longitude
						console.log(res, 'getLocation')
						that.getStationInfo()
					},
					fail: () => {
					},
				})
			},
			//提示用户打开位置信息
			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.params.lat === null && this.params.lng === null) {
							uni.showToast({
								title: '请开启您手机的位置信息!',
								icon: 'none',
								duration: 5000,
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '调用授权窗口失败',
							icon: 'none',
							duration: 1000,
						})
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		height: 100vh;
	}
	.authorization {
		width: 640rpx;
		height: 840rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.grace-loading{
		position: relative;
		text-align: center;
		margin-top: 200rpx;
		color: #979797;
	}
	.main-box {
		padding: 0 30rpx 30rpx 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:last-child{
			margin-bottom: 100rpx !important;
		}
		.change-box {
			width: 690rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			margin-bottom: 30rpx;
			.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>