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

<template>
	<view class="main">
		<top-box :userinfo="userinfo" :days="days" keys="1"></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="indexes"
					: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-3)+'%'">
													{{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>
			<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback"
			:up="upOption"
			:height="(screenHeight-200)+'rpx'"
			>
			<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.stationName || ''}}</view>
					<view @click="makePhone(item.stationInfo.phoneNum)">
						<image src="../../static/icon4.png"></image>
						<view>电话</view>
					</view>
					<view @click="jumpmaps(item.stationInfo.lat,item.stationInfo.lng,item.stationInfo.address,item.stationInfo.name)">
						<image src="../../static/icon5.png"></image>
						<view>路线</view>
					</view>
				</view>
				<view class="battery-num">
					<view>可换电池</view>
					<view>{{item.batteryNum}}</view>
				</view>
			</view>
			</mescroll-body>
			<view class="grace-loading" @click="resetPosition" v-if="noposition">{{noposition}}</view>
		</view>
		<tab-bar></tab-bar>
	</view>

</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				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: 10,
					orderByWays: 'desc'
				},
				noData: null,
				stationDataVoList: [],
				isLoadAll: false,
				totalPages: 1, // 总页数
				upOption:{
					page:{
						size:1,
						num:0,
					},
					noMoreSize:2,
					empty:'暂无相关数据'
				},
				noposition:null,
				days:0,
				Authorize:false,
			}
		},
		onShow() {
			this.$store.dispatch("usersStatus").then(()=>{
				//微信用户第二次登录
				this.token=this.$store.state.users.token
				this.userinfo=this.$store.state.users
				this.getHomeCar()
				this.getUserDays()
				this.reloadList()
				this.noData=null
			}).catch(()=>{
				//微信用户首次登录
				this.noData='请先登录'
			});
		},
		onLoad() {
			let systemInfoSync = uni.getSystemInfoSync();
			this.screenHeight = systemInfoSync.screenHeight - 300;
		},
		mounted() {
			this.mapSelect()
		},
		methods: {
			//重新获取定位
			resetPosition(){
				this.mapSelect()
			},
			//获取加入天数
			getUserDays(){
				this.$http.getDays().then(res=>{
					if(res.code === 0){
						this.days=res.data
					}else{
						this.$utils.msg(res.msg);
					}
				})
			},
			//拨打电话
			makePhone(num) {
				uni.makePhoneCall({
					phoneNumber: num.toString(), //电话号码
				})
			},
			reloadList(){
				this.canReset && this.mescroll.resetUpScroll()
				this.canReset && this.mescroll.scrollTo(0,0)
				this.canReset = true
			},
			//获取换电站信息
			upCallback(page) {
				if(this.Authorize==true){
					this.params.page=page.num
					this.params.pageSize=page.size
					this.$http.homeStation(this.params).then(res => {
						// console.log(res.data)
						uni.hideLoading();
						if (res.code === 0) {
							this.totalPages = res.data.total
							if(page.num == 1) this.stationDataVoList = []
							this.stationDataVoList=this.stationDataVoList.concat(res.data.list)
							this.mescroll.endBySize(res.data.list.length, res.data.total);
						} else {
							this.mescroll.endErr();
						}
					})
				}else{
					this.mescroll.endErr();
				}
			},
			//获取车辆信息
			getHomeCar() {
				let params={
					page: 1,
					pageSize: 10,
					orderByWays: 'desc'
				}
				this.$http.homeCar(params).then(res => {
					if (res.code === 0) {
						if (res.data.length == 0) {
							this.noData = '暂无记录'
						} else {
							this.datalist = res.data
						}
					} else {
						this.$utils.msg(res.msg)
					}
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			//打开地图导航
			jumpmaps(lat,lng,address,name) {
				if (lat && lng && address && name) {
					uni.openLocation({
						latitude:lat,
						longitude:lng,
						name: name,
						address: address
					})
				} else {
					this.$utils.msg("位置信息丢失");
				}
			},
			//获取用户经纬度
			mapSelect() {
				uni.showLoading({
					title: '加载中'
				});
				const that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						that.params.lat = res.latitude
						that.params.lng = res.longitude
						that.Authorize=true
						that.noposition=null
						that.mescroll.resetUpScroll()
						console.log(res, 'getLocation')
						
					},
					fail: () => {
						uni.hideLoading();
						this.noposition='定位失败'
						that.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.hideLoading();
													this.noposition='授权失败'
													this.Authorize=false
												}
											},
										})
									}else{
										uni.hideLoading();
										this.noposition='授权失败'
										this.Authorize=false
									}
								},
							})
						}
						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;
		padding-top: 100rpx;
		height: 300rpx;
		color: #979797;
	}
	.main-box {
		padding: 0 30rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
		.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: left;
						padding-left: 10rpx;
						color: #6cc57d;
						font-size: 30rpx;
						padding-top: 2rpx;
					}
				}

				.plate-number {
					display: flex;

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

					view:first-child {
						font-weight: 600;
						font-size: 36rpx;
						padding-right: 15rpx;
					}
				}

				.battery-soc {
					display: flex;
					margin-bottom: 22rpx;
					view:first-child {
						width: 105rpx;
						font-size: 22rpx;
					}

					view:last-child {
						flex: 1;

						.strip {
							/* 父元素相对定位 */
							position: relative;
							width: 525rpx;
							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;
					}
				}
			}
		}

		.change-title {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			margin: 24rpx 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: 140rpx !important;
		}
		.change-box {
			width: 690rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(226,226,226,0.25);
			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>