zx_flk_app/pages/index/components/control/control.vue

<template>
    <view class="container-view-contril">
		<scroll-view class="scroll-view flex-row" scroll-x="true">
			<view @tap="tapOpen" v-for="(item,index) of contrilList" :key="index" :data-item="item" class="contril-item flex-row">
				<img class="contril-item-img"  :src="item.isTurnOn==0?item.offUrl:item.iconUrl" alt="">
				<text >{{item.name}}</text>
			</view>
			<view class="contril-item flex-row" @tap="toMoreFunctionSet">
				<img class="contril-item-img" src="https://qiniu.bms16.com/Ft3pNyStT22LP8Ds1Mru2LoTHadx" alt="">
				<text>{{$t("更多功能")}}</text>
			</view>
		</scroll-view>
		<view v-if="popupShow" class="show-modal">
			<view class="modal-info">
				<view class="popup-title">{{$t(popText)}}</view>
				<view class="popup-content">{{$t("您确认")+$t(popText)}}</view>
				<view class="flex-row modal-footer">
					<view class="show-btn cencel-btn-pop" @tap="closePopup">{{$t("取消")}}</view>
					<view class="show-btn ok-btn-pop" @tap="tapBlueToothCmd">{{$t("确定")}}</view>
				</view>
			</view>
		</view>
		<!-- <u-popup v-model="popupShow" mode="center" border-radius="30" height="30%" length="60%">
			<view class="popup-title">开启车辆</view>
			<view class="popup-content">确定打开</view>
			<view class="flex-row">
				<view class="sure-btn cencel-btn" @tap="closePopup">取消</view>
				<view class="sure-btn ok-btn" >确定</view>
			</view>
		</u-popup> -->
		<!-- <view v-if="isShowMore" class="show-more">
			<view class="more-info">
				<view class="flex-row flex-between model-title">
					<view>{{$t("更多功能")}}</view>
					<view>
						<image style="width: 32rpx;height: 32rpx;" @tap="isShowMore = false"
							src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" />
					</view>
				</view>
				<view style="height: 300rpx;">
					<view data-url="test" @tap="navUrl" class="more-item flex-row">
						<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
						<text>{{$t("胎压")}}</text>
					</view>
					<view class="more-item flex-row">
						<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
						<text>{{$t("电池信息")}}</text>
					</view>
					<view @tap="navCarLocation" class="more-item flex-row">
						<img class="more-img" src="https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9" alt="">
						<text>{{$t("导航")}}</text>
					</view>
				</view>
				<view class="lift-btn-view">
					<view class="lift-btn">{{$t("解除绑定")}}</view>
				</view>
			</view>
		</view>
   -->
   
	</view>
</template>

<script>
	var app = getApp();
	var bluetooth = require('@/common/bluetooth.js');
	var config = require('@/common/config.js');
	var common = require('@/common/common.js');
	var http = require('@/common/http.js');
	import i18n from '@/locale/index.js'
	import {
			getFunctionTag,
			setFunctionTag
		} from '@/common/storage.js';
export default {
	props:{
		contrilList: {
			type: Array,
			default: () => []
		},
	},
	
    data() {
        return {
			popText:'',
			popupShow:false,
			controlType:null,//选择的车辆控制
			isShowMore:false,
			car_line:false
		};
    },
	mounted() {
		// this.contrilList = getFunctionTag().activeTag
	},
 
    /**
     * 组件的方法列表
     */
    methods: {
		tapOpen(e){
			console.log( getFunctionTag().activeTag, getFunctionTag());
			const {name,type} = e.currentTarget.dataset.item;
			this.setData({
				popText:name,
				cmdType:type,
				popupShow:true
			})
		},
		tapBlueToothCmd(){
			const car_info= uni.getStorageSync('car_info');

			// 判断车辆是否在线状态
			if (this.car_line) {
				if(this.cmdType=='batteryInfo'){
					uni.navigateTo({
						url:`/pages/batteryDetail/batteryDetail`
					})
				}else if(this.cmdType=='navigation'){
					const {
						address,
						latitude,
						longitude,
						car_name
					} =car_info
					uni.openLocation({
						latitude: latitude - 0,
						longitude: longitude - 0,
						scale: 15,
						name: car_name,
						address: address,
						success: function (res) {},
					})
				}else if(this.cmdType=='turnOnOrOff'){
					const switchType=this.contrilList.find(item => item.isTurnOn)
					const pData={
						car_sn:car_info.car_sn,
						switch:switchType
					}
					const me=this
					common.loading();
					http.postApi(config.API_FLK_CAR_SWITCH, pData, (resp) => {
						uni.hideLoading();
						if (resp.data.code === 200) {
							common.simpleToast(me.popText + '成功');
							const activeTag=me.contrilList.map(item=>{
								item.isTurnOn=(item.isTurnOn==1)?0:1
								item.name=i18n.t((item.isTurnOn==1)?'关机':'开机')
								return item
							})
							const tag=getFunctionTag().tag
							setFunctionTag({activeTag,tag})
							
						} else {
							common.simpleToast(resp.data.msg);
						}
					});
				}else{
					const testArr=[
						{type:'findCar',opt_type:1},
						{type:'openSeatBag',opt_type:0},
						{type:'openTailBox',opt_type:2},
						]
					const pData = testArr.find(i=>i.type===this.cmdType)
					const me=this
					common.loading();
					http.postApi(config.API_FLK_CAR_REMOTE_CONTROL, pData, (resp) => {
						uni.hideLoading();
						if (resp.data.code === 200) {
							common.simpleToast(me.popText + '成功');
						} else {
							common.simpleToast(resp.data.msg);
						}
					});
				}
			} else {
				const isTurnOn=this.contrilList.find(item => item.isTurnOn).isTurnOn==1
				const bluetoothCommands = {
					'turnOnOrOff': isTurnOn?bluetooth.turnOnCar:bluetooth.turnOffCar,
					'findCar': bluetooth.findCarCmd,
					'openSeatBag': bluetooth.openCarSeat,
					'openTailBox': bluetooth.openCarTrunk,
					'tirePressure': bluetooth.getCarPressure
				};
				
				const command = bluetoothCommands[this.cmdType];
				if (command) {
					command('900000997', () => {
						console.log(`发送${this.popText}指令结束`);
					});
				}
			}
			this.popupShow=false

		},
		closePopup(){
			this.popupShow=false
		},
		tapOpenMore(){
			// this.isShowMore=true
		},
		closeMore(){
			this.isShowMore=false
		},
		navUrl(url){
			// ifconsole.log(url,'sj');
		},
		navCarLocation(){
			//前往配置更多功能
			uni.navigateTo({
				url:'/pages/carLocation/carLocation'
			})
		},
		toMoreFunctionSet() {
			uni.navigateTo({
				url: '/pages/carFunctionSet/more'
			})
		}
	}
};
</script>
<style>
@import './control.css';
</style>