zx_flk_app/pages/index/index.vue

<template>
	<view>
		<!-- #ifdef APP -->
		<u-no-network zIndex='9999' @retry='retry'></u-no-network>
		<!-- #endif -->
		<view v-if="isConnected">
			<block v-if="isLogin && car_info.car_sn">
				<view class="container-view">
					<!-- #ifdef MP-WEIXIN -->
					<view :style="{height: `${statusBarHeight + 30}px`}"></view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view :style="{height: `${statusBarHeight}px`}"></view>
					<!-- #endif -->
					<!-- <navBar type="index" /> -->
					<view class="flex-row flex-between align-center padding_about_40">
						<view class="car-name-view" @tap="navSwitchCar">
							<text class="text" style="margin-right: 10rpx;">{{car_info.car_name}}</text>
							<img src="https://qiniu.bms16.com/FoSXDpVGvbdmwbX3CMUBvR7X4IzI"
								style="width: 14rpx;height: 14rpx;" alt="">
						</view>
						<view @click="routerLink('/pages/message/index?isSys=0')" class="news">
							<view v-if="newsList.device_count > 0" class="num">
								{{ newsList.device_count}}
							</view>
							<image src="https://qiniu.bms16.com/FtlfBtBE5-TeTI5EdrciX_u8u_Sx"
								style="width: 48rpx;height: 48rpx;" mode=""></image>
						</view>
					</view>
					<view v-if="isOverdueShow" class="overdue-view flex-row flex-between">
						<view class="overdue-view-text flex-row">
							<text class="overdue-text-left">您已逾期
								<text class="overdue-num">
									<block v-if="orderInfo.hire_duration_time">
										{{orderInfo.hire_duration_time.day > 0 ? orderInfo.hire_duration_time.day :'' }}<text
											v-if="orderInfo.hire_duration_time.day>0">日</text>{{orderInfo.hire_duration_time.hour > 0 ? orderInfo.hire_duration_time.hour :'' }}<text
											v-if="orderInfo.hire_duration_time.hour>0">小时</text>{{orderInfo.hire_duration_time.minute > 0 ? orderInfo.hire_duration_time.minute :'' }}<text
											v-if="orderInfo.hire_duration_time.minute>0">分</text>
									</block>
								</text>
							</text>
							<text style="font-size: 24rpx;opacity: 0.5;">请及时续费或归还车辆</text>
						</view>
						<view @click="routerLink('/pages/order/order')" class="renew-btn">去续费</view>
					</view>
					<view class="car-img-view" >
						<view class="flex-row flex-between" style="align-items: center;">
							<text class="quantity flex-row">{{car_info.soc}} <text
									style="font-size: 28rpx;font-weight: 500;">%</text></text>
							<view @tap.stop="tapReturnCar" class="return-car-btn flex-row">
								<image style="width: 46rpx;height: 46rpx;" src="https://qiniu.bms16.com/FtyG7Gq2QBaVVrZmTnmZFzXhE5nN" mode=""></image>
								<view style="margin-left: 12rpx;">我要还车</view>
							</view>
						</view>
						<view class="quantity-view flex-row">
							<u-line-progress style="width: 100rpx;" active-color="#2ADA62" height="10"
								:show-percent="false" :percent="car_info.soc"></u-line-progress>
							<view class="quantity-text flex-row">
								<view style="font-weight:400;font-size: 22rpx;width: 44rpx;">{{$t("续航")}}</view>
								<view style="font-size: 36rpx;">{{formatDistance(car_info.remain_mail) }}<text style="font-size: 30rpx;">{{car_info.remain_mail ? car_info.remain_mail>1000?'km':'m' :'km'}}</text></view>
							</view>
						</view>
						<!-- <img :src="car_info.model_images||'https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX'" style="width: 100%;height: 526rpx;" alt=""> -->
						<!-- <img :src="'https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX'"
							style="width: 100%;height: 526rpx;" alt=""> -->
							<view class="custom-swiper-view">
								<u-swiper @click="toMoreInfoPage" v-if="car_image.length!=0" :list="car_image"  :autoplay="false" mode="none"
									 :height="480" bgColor="transparent" class="custom-swiper">
								</u-swiper>
								<image @click="toMoreInfoPage" v-else style="width: 100%;height: 480rpx;" src="https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX" mode="">
								</image>
							</view>
							
						<view class="flex-row align-center update-time-view">
							<text  style="margin-right: 10rpx;">{{car_info.online==1&&car_info.acc_state==1?$t("车辆已开机"): $t("车辆已关机")}} </text>
							<text v-if="car_info.heart_time != 0" style="margin-right: 10rpx;">{{$t("更新于")}} {{tools.formatTime( car_info.heart_time|| '')}}</text>
							<img :src="'https://qiniu.bms16.com/'+(isBluethConnect?'Fk3f9H_o-1Wq2xXx7I_xo7bxK1xJ':'FsL6XWGoIhfsVB7jRg6EGFVsuaTZ')"
								:style="{width: (isBluethConnect?32:24)+'rpx',height: '32rpx'}" alt="">
						</view>
					</view>
					<Control :contrilList="contrilList" @toBluetooth="inductiveUnlockHandle" @loadCarDetail="loadCarDetail"/>
					
			
					<view :class="['flex-row', 'flex-between', 'map-card-view',car_info.exchange_package_info && car_info.exchange_package_info.activity_time?'height_362':'height_260']">
						<MapCard :car_info="car_info" :height="!!(car_info.exchange_package_info && car_info.exchange_package_info.activity_time)"/>
			
						<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">{{car_info.current_mail}}<text class="font_24">km</text>
								</view>
							</view>
			
							<view v-if="car_info.exchange_package_info && car_info.exchange_package_info.activity_time" 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 v-if="car_info.package_type == 1" class="card-top-text">
									{{calculateRemainingDays(car_info.exchange_package_info.expire_time)}} <text
										class="font_24">{{$t("天")}}</text>
								</view>
								<view v-if="car_info.package_type == 2" class=" card-top-text">{{item.last_num}} <text
										class="font_24">{{$t("次")}}</text></view>
								<view v-if="car_info.package_type == 3" class=" card-top-text">
									{{item.total_day}}{{$t("天")}}/{{item.last_num}} <text
										class="font_24">{{$t("次")}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <custom-switch :defaultPosition="'right'" :width="'400rpx'"
					    :height="'96rpx'"  v-model="switchValue" :fetchData="loadData"></custom-switch> -->
					<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">{{isBluethConnect?$t("蓝牙配对成功"):$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">{{car_info.share_num + $t("个家庭账号")}}</view>
							</view>
							<img class="icon_style_28" src="https://qiniu.bms16.com/FqnbZ2iKHmzCGJA8XD30sf5g_CAm"
								alt="">
						</view>
						<view @click="srcFn(`/pages/deviceInfo/deviceInfo`)" 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("软件版本") + (car_info.firmware||'')}}</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-else>
				<UnleasedPages :model_list="model_list" :img_list="img_list" />
			</block>
			<BluetoothUnlockAuth ref="bluetoothUnlockAuth" />
			<CustomTabbar @changCar='changCar' curt-tab="home" />
			<AndroidUnlockAuth :authStepList="authStepList" :value="isShowPermission" @closePermission="closePermission"
				v-if="isShowPermission && (platform === 'android')" />
			<IosUnlockAuth :authStepList="authStepList" :value="isShowPermission" @closePermission="closePermission"
				v-else-if="isShowPermission && (platform === 'ios')" />
		</view>
		<returnCar :isShowReturnCar="isShowReturnCar" typePage="index" @closeShowReturnCarBtn="()=>isShowReturnCar=false"
			@navStoreBtn="navStoreBtn" @immediatelyReturnBtn="immediatelyReturnBtn" />
	</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 config = require('@/common/config.js');
	var config_gyq = require('@/common/config_gyq.js');
	var common = require('@/common/common.js');
	var http = require('@/common/http.js');
	var request = require('@/common/request.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 AndroidUnlockAuth from './components/AndroidUnlockAuth.vue'
	import IosUnlockAuth from './components/IosUnlockAuth.vue'
	import ReturnCar from '@/component/returnCar/returnCar';
	
	import {
		getFunctionTag,
	} from '@/common/storage.js';
	import permision from "@/js_sdk/wa-permission/permission.js"
	let bluetooth = require('@/common/bluetooth.js');

	export default {
		data() {
			return {
				isModel: false,
				isConnected: false,
				statusBarHeight: 0,
				newsList: {},
				img_list: [],
				isLogin: false,
				isOverdueShow: false,
				contrilList: [],
				isTrackOrAll: true,
				model_list: [],
				car_list: [], //用户车辆列表
				car_sn: '', //当前车辆编号
				isHideInduction: true,
				car_info: {
					exchange_package_info: {
						activity_time: 0
					}
				},
				platform: 'android', //手机型号
				isShowPermission: false, //是否打开权限弹窗
				statusBarHeight: 0,
				isBluethConnect: false, //当前是否蓝牙连接或者配对
				isOpenAllPermission: false, //所有蓝牙配对所需权限是否已开启
				isShowReturnCar:false,
				overdueData:{},
				car_image:[]
			};
		},
		computed: {},
		components: {
			Control,
			MapCard,
			CustomTabbar,
			UnleasedPages,
			BluetoothUnlockAuth,
			AndroidUnlockAuth,
			IosUnlockAuth,
			ReturnCar
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
			let _this = this
			// #ifdef APP
			uni.getNetworkType({
				success: (res) => {
					if (res.networkType == 'none') {
						this.isConnected = false;
					} else {
						this.isConnected = true;
					}
				}
			});
			uni.onNetworkStatusChange((res) => {
				_this.isConnected = res.isConnected
				if (res.isConnected) {
					_this.init()
				}
			});
			// #endif

			// #ifndef APP
			this.isConnected = true
			_this.init()
			// #endif

		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// #ifdef APP
			uni.getNetworkType({
				success: (res) => {
					if (res.networkType != 'none') {
						this.init()
					}
				}
			});
			// #endif
			// #ifndef APP
			this.init()
			// #endif

		},

		// 分享给好友
		onShareAppMessage: function(res) { //发送给朋友
			return {
				title: this.appConfig.app_name,
				path: 'pages/index/index',
			}
		},
		methods: {
			
			init() {
				
				this.loadModelList()
				this.contrilList = getFunctionTag().activeTag
				const user_token = storage.getUserToken()
				this.car_info = uni.getStorageSync('car_info') || {};
				const app = getApp();
				this.isBluethConnect =  app.globalData.nearLockCheck
				if (!user_token) return
				this.newsNumFn()
				this.isLogin = true
				this.loadUserCarList()
				// #ifdef APP
					//蓝牙配对所需权限  运行小程序需要隐藏
					// const permissionArr = permision.requestAndroidPermissions(this.platform)
					// console.log(permissionArr, 'permissionArr');
					// this.setData({
					// 	authStepList: permissionArr
					// })
					// permissionArr.map(item => {
					// 	if (!item.state) this.isOpenAllPermission = true
					// })
				// #endif

				// if (!this.car_info.car_sn) {

				// } else {
				// 	this.loadCarDetail(this.car_info.car_sn)
				// }
			},
			retry() {
				
			},
			async newsNumFn() {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_MESSAGE_UNREAD_COUNT, {})
				if (data.code == 200) {
					this.newsList = data.data
				}
			},
	
			changCar(e) {
				this.car_info = e
			},
			routerLink(url) {
				uni.navigateTo({
					url
				})
			},
			loadIsLogin() {
				uni.navigateTo({
					url: '/pages/loginRegister/login',
				})
			},
			toMoreInfoPage() {
				uni.navigateTo({
					url: '/pages/moreInfo/moreInfo',
				});
			},
			navTravelingTrack() {
				uni.navigateTo({
					url: '/pages/travelingTrack/travelingTrack?longitude=' + this.longitude + '&latitude=' + this
						.latitude,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			inductiveUnlockHandle() {
				uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
				// console.log(!this.isOpenAllPermission,this.isBluethConnect,'this.isBluethConnect');
				// if(this.isBluethConnect){
				// 	uni.navigateTo({ url: '/pages/bluetoothUnlock/unlockSet' })
				// }else{
				// 	if(!this.isOpenAllPermission){
				// 		common.simpleToast('所需权限开启成功,前往开启蓝牙配对...');
				// 		uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
				// 	}else{
				// 		this.setData({
				// 			isShowPermission:true,
				// 		})	
				// 	}
				// }

			},
			closePermission() {
				this.setData({
					isShowPermission: false
				})
			},
			showInduction() {
				this.isHideInduction = true
			},
			loadModelList() {
				if (this.isModel) {
					return
				}
				this.isModel = true
				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);
					}
				})
			},
			srcFn(url) {
				uni.navigateTo({
					url: url
				});
			},
			navToPage(e) {
				const me = this
				const url = e.currentTarget.dataset.url;
				if (!url) {
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			loadUserCarList() {
				const me = this
				http.postApi(config.API_FLK_CAR_DEVICE_LIST, {}, (resp) => {
					if (resp.data.code === 200) {
						const list = resp.data.data.list
						let isCar = false
						let itemCar = {}
						for (let i = 0; i < list.length; i++) {
							let item = list[i];
							if (item.car_sn == this.car_info.car_sn) {
								isCar = true
								itemCar = item
							}
						}
						if (!isCar) {

							if (list.length > 0) {
								uni.removeStorageSync('car_info')
								me.setData({
									car_list: list,
									car_sn: list[0].car_sn || '',
								})
								me.loadCarDetail(list[0].car_sn)
							} else {
								uni.removeStorageSync('car_info')
								this.car_info = {}
							}
						} else {
							me.loadCarDetail(itemCar.car_sn)
						}
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
			loadCarDetail(car_sn) {
				const me = this
				http.postApi(config.API_FLK_CAR_DETAIL, {
					car_sn
				}, (resp) => {
					uni.hideLoading();
					console.log(resp.data)
					if (resp.data.code === 200) {
						resp.data.data.car_sn = car_sn
						const _car_image=resp.data.data.model_images?resp.data.data.model_images.split(','):[]
						me.setData({
							car_info: resp.data.data,
							car_image:_car_image
						})
						uni.setStorageSync('car_info', this.car_info);
						console.log(_car_image, 'this.car_info------------------');
						//判断逾期
						if (!resp.data.data.sold_time) return
						let time = Math.ceil(resp.data.data.hire_end_time - Math.floor(new Date()) / 1000) / 60
						if (time > 0) {
							this.isOverdueShow = true
							this.car_info.hire_end_time = common.getTimeToDay(time)
						} else {
							this.isOverdueShow = false
						}

					} 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}`,
				})
			},
			formatDistance(distanceMeters) {
				console.log(distanceMeters,'distanceMeters');
				// 判断距离是否超过1000米  
				// let distanceMeters=Number(_distanceMeters)
				if (distanceMeters >= 1000) {
					// 如果超过1000米，则转换为千米并返回  
					return (distanceMeters / 1000).toFixed(1);
				} else {
					// 否则直接返回米  
					try {
						return distanceMeters;
					} catch (error) {
						return 0;
					}
					
				}
			},
			navStoreBtn() {
				const {
					latitude,
					longitude,
					address,
					model_name
				} = this.car_info
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name: model_name,
					address: address,
					success: function(res) {}
				});
			},
			tapReturnCar() {
				this.overdueMoneyFn(this.car_info.car_sn)
				this.setData({
					isShowReturnCar: true
				})
			},
			//逾期费用计算
			async overdueMoneyFn(car_sn) {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_CAR_OVERDUE_MONEY, {
					car_sn
				})
				if (data.code == 200) {
					this.overdueData = data.data
				} else {
					common.simpleToast(data.msg)
				}
			},
			immediatelyReturnBtn() {
				const {
					car_sn,
					model_id
				} = this.car_info
				//提交还车图片
				uni.navigateTo({
					url: `/pages/activation/activation?isReturnCar=${true}&model_id=${model_id}&car_sn=${car_sn}&isOverdue=${this.isOverdueShow}&overdueMoney=${this.overdueData.money}&overdueTime=${this.overdueData.time}&type=index`
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	@import './index.css';

	.news {
		position: relative;
		margin-right: 20rpx;

		.num {
			position: absolute;
			right: -6rpx;
			top: -6rpx;
			min-width: 28rpx;
			height: 28rpx;
			font-size: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			line-height: 1;
			background-color: #FA2918;
			border-radius: 50%;
			z-index: 99;
		}
	}
</style>