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" class="contril-item flex-row">
				<img class="contril-item-img"  src="https://qiniu.bms16.com/FmDQhes8TGJh0GZB1Hu3yePuUsRw" alt="">
				<text>{{$t("开机")}}</text>
			</view>
			<view @tap="tapOpen" class="contril-item flex-row">
				<img class="contril-item-img" src="https://qiniu.bms16.com/FjoP6k55xhNkbJa-Zm582KQcbuy8" alt="">
				<text>{{$t("闪灯鸣笛")}}</text>
			</view>
			<view @tap="tapOpen" class="contril-item flex-row">
				<img class="contril-item-img" src="https://qiniu.bms16.com/FsUx45Qk6skjrCZuFHHMcqp6WR_I" alt="">
				<text>{{$t("打开座桶")}}</text>
			</view>
			<view @tap="tapOpen" class="contril-item flex-row">
				<img class="contril-item-img" src="https://qiniu.bms16.com/FjgrfPEufqSzOxb6Aobuc_bbbtJE" alt="">
				<text>{{$t("打开尾箱")}}</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("开启车辆")}}</view>
				<view class="popup-content">{{$t("确定打开")}}</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" >{{$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 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>
// component/nomore/nomore.js
export default {
    data() {
        return {
			contrilList:[
				{text:'开机',imgSrc:'https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9'},
				{text:'闪灯鸣笛',imgSrc:'https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9'},
				{text:'闪灯鸣笛',imgSrc:'https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9'},
				{text:'闪灯鸣笛',imgSrc:'https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9'},
				{text:'闪灯鸣笛',imgSrc:'https://qiniu.bms16.com/FgxiD-W96FGvgyLI_kXUfWVDYLQ9'},
				],
			popupShow:false,
			controlType:null,//选择的车辆控制
			isShowMore:false
		};
    },
    /**
     * 组件的属性列表
     */
    props: {
    },
    /**
     * 组件的方法列表
     */
    methods: {
		tapOpen(){
			this.popupShow=true
		},
		closePopup(){
			this.popupShow=false
		},
		navCarLocation(){
			uni.navigateTo({
				url:'/pages/carLocation/carLocation'
			})
		},
		toMoreFunctionSet() {
			uni.navigateTo({
				url: '/pages/carFunctionSet/more'
			})
		}
	}
};
</script>
<style>
@import './control.css';
</style>