zx_flk_app/pages/index/index.vue

<template>
	<view class="container-view">
		<view class="flex-row flex-between align-center padding_about_40">
			<view class="car-name-view">
				<text style="margin-right: 10rpx;">小米</text>
				<img src="https://qiniu.bms16.com/FoSXDpVGvbdmwbX3CMUBvR7X4IzI" style="width: 14rpx;height: 14rpx;" alt="">
			</view>
			<img src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx" style="width: 48rpx;height: 48rpx;" alt="">
		</view>
		<view class="car-img-view">
			<view class="quantity-view flex-row">
				<text class="quantity flex-row">88 <text style="font-size: 28rpx;font-weight: 500;">%</text></text>
				<u-line-progress style="width: 100rpx;" active-color="#2ADA62" height="10" :show-percent="false" :percent="70"></u-line-progress>
				<text class="quantity-text flex-row">
					<text style="font-weight:400;font-size: 22rpx;">{{$t("续航")}}</text>
					<text style="font-size: 36rpx;">54</text><text style="font-size: 30rpx;">km</text> 
				</text>
			</view>
			<img src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" style="width: 100%;height: 526rpx;" alt="">
			<view class="flex-row align-center update-time-view" >
				<text style="margin-right: 10rpx;">{{$t("车辆已关机")}} </text>
				<text style="margin-right: 10rpx;">{{$t("更新于")}} 11-25 23:05 </text>
				<img src="https://qiniu.bms16.com/FsL6XWGoIhfsVB7jRg6EGFVsuaTZ" style="width: 24rpx;height: 32rpx;" alt="">
			</view>
		</view>
		<Control/>
		<view class="flex-row flex-between map-card-view" >
			<MapCard latitude="23.099994" longitude="113.324004" :carAddress="carAddress" :carLocation="carLocation"/>
			<view class="card-right">
				<view class="card-bg" @tap="navTravelingTrack">
					<view class="flex-row flex-between card-top-title">
						<view class="flex-row align-center">
							<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FkrcMCV__HraZ0W0NBNdEZPIlwss" alt="">
							<text class="margin_l_8">{{isTrackOrAll?'最近骑行':'总里程'}}</text>
						</view>
						<view @tap.stop="isTrackOrAll=!isTrackOrAll"><img style="width: 24rpx;height: 20rpx;" src="https://qiniu.bms16.com/FltPK-o7KGS3dQ2pfQHXGSxOdzaN" alt=""></view>
					</view>
					<view class="card-top-text">27.4<text class="font_24">km</text></view>
				</view>
				<view class="card-bg">
					<view class="flex-row card-top-title">
						<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FtalApKa3STyruaBxxRB4O9hHXyE" alt="">
						<text class="margin_l_8">{{$t("换电套餐")}}</text>
					</view>
					<view class=" card-top-text">30 <text class="font_24">{{$t("天")}}</text></view>
				</view>
			</view>
		</view>
		<view class="config-view">
			<view class="flex-row config-car-view">
				<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/Ftzyvs5whxDdMFksYChHaWKVb0Uk" alt=""></view>
				<view class="flex-row config-text-view">
					<view class="flex-row font_w_600">{{$t("感应解锁")}}</view>
					<view class="flex-row tip-text-config">{{$t("请先链接蓝牙")}}</view>
				</view>
				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
			</view>
			<view class="flex-row config-car-view">
				<view class="margin_r_20"><img class="icon_style_64"  src="https://qiniu.bms16.com/FhKkijkN__9UzhYNgamBFSggIlYo" alt=""></view>
				<view class="flex-row config-text-view">
					<view class="flex-row font_w_600">{{$t("用车人管理")}}</view>
					<view class="flex-row tip-text-config">{{$t("个家庭账号")}}</view>
				</view>
				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
			</view>
			<view class="flex-row config-car-view">
				<view class="margin_r_20"><img class="icon_style_64" src="https://qiniu.bms16.com/FsAg6mHEBJfbtpgIHBrDdNiPo1iH" alt=""></view>
				<view class="flex-row config-text-view">
					<view class="flex-row font_w_600">{{$t("设备信息")}}</view>
					<view class="flex-row tip-text-config">{{$t("软件版本")}}</view>
				</view>
				<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm" alt="">
			</view>
		</view>
		<view style="height: 264rpx;"></view>
		<CustomTabbar />
	</view>
</template>

<script>
	var app = getApp();
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	import Control from './components/control/control'
	import MapCard from './components/mapCard/mapCard'
	import CustomTabbar from '@/component/customTabbar/index';
	


	export default {
		data() {
			return {
				carLocation: [{
					id: 1345,
					latitude: 23.099994,
					longitude: 113.324004,
					iconPath: 'https://qiniu.bms16.com/FjzP68_NSPJbde_JraN5dJRnyqqJ',
					width: 60,
					height: 60,
					customCallout: {
						display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
					},
				}], // 标记点
				carAddress:'普宁升记炒饭肠粉百...',
				isTrackOrAll:true
			};
		},
		computed: {},
		components: {
			Control,
			MapCard,
			CustomTabbar
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
		},
		// 分享给好友
		onShareAppMessage: function(res) { //发送给朋友
			return {
				title: this.appConfig.app_name,
				path: 'pages/index/index',
			}
		},
		methods: {
			navTravelingTrack(){
				uni.navigateTo({
					url: '/pages/travelingTrack/travelingTrack?longitude=' + this.longitude +'&latitude=' + this.latitude,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			}

		}
	};
</script>

<style>
	@import './index.css';
</style>