zx_flk_app/pages/index/index.vue

<template>
	<view >
		<block >
			<view class="container-view">
			<view class="flex-row flex-between align-center padding_about_40">
				<view class="car-name-view" @tap="navSwitchCar">
					<text style="margin-right: 10rpx;">{{car_info.car_name}}</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="overdue-view flex-row flex-between">
				<view class="overdue-view-text flex-row">
					<text class="overdue-text-left">您已逾期 <text class="overdue-num">38</text>天</text>
					<text style="font-size: 24rpx;opacity: 0.5;">请及时续费或归还车辆</text>
				</view>
				<view class="renew-btn">去续费</view>
			</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("更新于")}} {{car_info.heart_time}}11-25 23:05 </text>
					<img src="https://qiniu.bms16.com/FsL6XWGoIhfsVB7jRg6EGFVsuaTZ" style="width: 24rpx;height: 32rpx;" alt="">
				</view>
			</view>
			<Control :contrilList="contrilList" />
			<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 @tap="navToPage"  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" @tap="inductiveUnlockHandle">
						<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 @tap="navToPage"  data-url="/pages/userManagement/userManagement"  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 @tap="navToPage" 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>
			</view>
		</block>
		<block v-if="false">
			<UnleasedPages :model_list="model_list" :img_list="img_list" />
		</block>
		<BluetoothUnlockAuth ref="bluetoothUnlockAuth" />
		<CustomTabbar curt-tab="home"/>
	</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<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 UnleasedPages from './components/unleasedPages/unleasedPages'
	import CustomTabbar from '@/component/customTabbar/index';
	import BluetoothUnlockAuth from '../bluetoothUnlock/bluetoothUnlockAuth.vue'
import {
		getFunctionTag,
	} from '@/common/storage.js';

	export default {
		data() {
			return {
				contrilList:[],
				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,
				model_list:[],
				car_list:[],//用户车辆列表
				car_sn:'',//当前车辆编号
				car_info:{}
			};
		},
		computed: {},
		components: {
			Control,
			MapCard,
			CustomTabbar,
			UnleasedPages,
			BluetoothUnlockAuth
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			const user_token = storage.getUserToken()
				if (!user_token) {
					this.loadIsLogin()
					return
				}
			this.loadModelList()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.contrilList = getFunctionTag().activeTag
			const user_token = storage.getUserToken()
				if (!user_token) {
					this.loadIsLogin()
					return
				}
			this.loadUserCarList()
		},
		// 分享给好友
		onShareAppMessage: function(res) { //发送给朋友
			return {
				title: this.appConfig.app_name,
				path: 'pages/index/index',
			}
		},
		methods: {
			loadIsLogin(){
				uni.showModal({
					title: '提示',
					content: '您还未登录，请先登录',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/loginRegister/login',
							})
						}
					},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			connectBluetooth(){
				var device = {
					mac_id: "900000997",
					btid: "900000997",
					btkey: "900000997",
					bt_type: "ZXCar",
					device_type: "ZXCar"
				};
			},
			
			navTravelingTrack(){
				uni.navigateTo({
					url: '/pages/travelingTrack/travelingTrack?longitude=' + this.longitude +'&latitude=' + this.latitude,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			inductiveUnlockHandle() {
				this.$refs.bluetoothUnlockAuth.open();
			},
			loadModelList() {
				const me = this
				http.postApi(config.API_RECOMMEND_CAR_MODEL_LIST, {}, (resp) => {
					if (resp.data.code === 200) {
						const list=resp.data.data
						const img_list=resp.data.data.map(item=>item.image)
						me.setData({
							model_list:list,
							img_list:img_list
						})
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			navToPage(e) {
				const me = this
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
				// if (me.userInfo.is_auth - 0 == 1 && me.userInfo.status - 0 == 2) {
				// 	uni.navigateTo({
				// 		url: url
				// 	});
				// } else if (me.userInfo.is_auth - 0 == 1 && me.userInfo.status - 0 != 2) {
				// 	uni.showModal({
				// 		title: '身份认证提示',
				// 		content: '尚未完成身份认证，是否进行身份认证?',
				// 		cancelText: '取消',
				// 		confirmText: '确定',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				me.loadFaceToken()
				// 			}
				// 		},
				// 		fail: function(res) {},
				// 		complete: function(res) {},
				// 	})
				// } else {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '您还未登录，请先登录',
				// 		showCancel: true,
				// 		cancelText: '取消',
				// 		confirmText: '确定',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				//#ifdef MP-ALIPAY
				// 				uni.navigateTo({
				// 					url: '/pages/phoneLogin/phoneLogin',
				// 				})
				// 				//#endif
				// 				//#ifdef MP-WEIXIN
				// 				uni.navigateTo({
				// 					url: '/pages/login/login',
				// 				})
				// 				//#endif
				// 			}
				// 		},
				// 		fail: function(res) {},
				// 		complete: function(res) {},
				// 	})
				// }
			},
			loadUserCarList(){
				const me = this
				common.loading()
				http.postApi(config.API_FLK_CAR_DEVICE_LIST, {}, (resp) => {
					uni.hideLoading();
					if (resp.data.code === 200) {
						const list=resp.data.data.list
						if(list.length > 0){
							me.setData({
								car_list:list,
								car_sn:list[0].car_sn||'',
							})
							me.loadCarDetail(list[0].car_sn)
						}
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			loadCarDetail(car_sn){
				const me = this
				common.loading()
				http.postApi(config.API_FLK_CAR_DETAIL, {car_sn}, (resp) => {
					uni.hideLoading();
					if (resp.data.code === 200) {
						resp.data.data.car_sn = car_sn
						me.setData({
							car_info:resp.data.data,
						})
						uni.setStorageSync('car_info', this.car_info);
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			navSwitchCar(){
				const me=this
				//如果租/购多个车辆的话可以切换当前车辆
				uni.navigateTo({
					url:  `/pages/carList/carList?list=${encodeURIComponent(JSON.stringify(me.car_list))}&car_sn=${me.car_sn}`,
				})
			}

		}
	};
</script>

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