zx_flk_app/pages/carFunctionSet/more.vue

<template>
	<view class="zx-container car-function-set-more">
		<view class="fn-wrap">
			<view class="title">
				{{ $t('固定导航栏') }}
				<text class="sort-num">{{ realActiveTabs.length }} / {{ MAX_TAB_LEN }}</text>
			</view>
			<!-- <draggable v-model="activeTabs" :delay="0" :animation="200" class="tab-item-container">
        <view v-for="(tab, index) in activeTabs" :class="['tab-item']" :key="index" @longpress="toggleEdit"
          @tap="deleteTab(tab)">
          <image v-if="tab.isLock && isActiveEdit" :src="icons.lock" class="right-icon" />
          <image v-if="getMovableItem(tab)" :src="icons.edit" class="right-icon" />
          <image :src="tab.iconUrl" class="icon" />
          <view :class="['name', getMovableItem(tab) && 'shake']">{{ tab.name }}</view>
        </view>
      </draggable> -->
			<basic-drag @changClick='changClick' @end='endFn'   @toggleEdit='toggleEdit' v-model="activeTabs" :width="700" :column="4"
				itemKey="name"></basic-drag>

		</view>
		<view class="fn-wrap">
			<view class="title">{{ $t('其他功能') }}</view>
			<view class="tab-item-container is-to-be-select">
				<view v-for="tab in toBeSelectTabs" :key="tab.name" class="tab-item" @longpress="toggleEdit"
					@tap="addItemTab(tab)">
					<image v-if="showAddIcon" :src="icons.add" class="right-icon" />
					<image :src="tab.iconUrl" class="icon" />
					<view class="name">{{ $t(tab.name) }}</view>
				</view>
			</view>
		</view>
		<view class="tips">{{ $t('长按拖动可调整顺序，可增减固定导航栏内容') }}</view>
		<view class="un-bind-btn" @tap="toUnbind">{{ $t('解除绑定') }}</view>
		<view v-if="popupControlShow" 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>
	</view>
</template>

<script>
	// import draggable from 'vuedraggable'
	import {
		QINIU_URL
	} from '@/common/constant'
	import BasicDrag from '@/components/basic-drag/index.vue';
	import {
		setFunctionTag,
		getFunctionTag,
	} from '@/common/storage.js';
	import controlMixin from '@/mixin/index';
	const ICONS = {
		lock: `${QINIU_URL}FgMCTZCySvEgLYgkzU65BUR4f4Ls`,
		edit: `${QINIU_URL}Fq3V1Zi5tKH7ibTwG1nO7N96CU8m`,
		add: `${QINIU_URL}FqLEWbMe8DcnQtNz6GdDDD87ObZK`,
		placeholder: `${QINIU_URL}FpKvfFNSDbx0d9RDwyGAQdFb7Kt6`
	}

	export default {
		mixins: [controlMixin],
		components: {
			// draggable
			BasicDrag
		},
		data() {
			const MAX_TAB_LEN = 4
			return {
				QINIU_URL,
				MAX_TAB_LEN,
				icons: ICONS,
				isActiveEdit: false,
				activeTabs: [],
				toBeSelectTabs: [],
			}
		},
		computed: {
			realActiveTabs() {
				return this.activeTabs.filter(tab => tab.name)
			},
			showAddIcon() {
				return this.isActiveEdit && this.realActiveTabs.length < this.MAX_TAB_LEN
			}
		},
		created() {
			this.initializeTabs()
		},
		methods: {
			endFn(list, removedTab) {
				console.log(list, removedTab,'list, removedTab');
				if (removedTab) {
					this.toBeSelectTabs.push(removedTab)
					this.activeTabs = list
					if (this.activeTabs.length < this.MAX_TAB_LEN) {
						this.isActiveEdit = true
					}
				}
				this.activeTabsSetFn()
			},
			getMovableItem(tab) {
				return this.isActiveEdit && !tab.isLock && !tab.isPlaceholder
			},
			initializeTabs() {
				const lang = v => this.$t(v)
				this.activeTabs = getFunctionTag().activeTag
				this.toBeSelectTabs = getFunctionTag().tag
			},
			toggleEdit(e) {
				console.log(e,'eeeeeee');
				this.isActiveEdit = e
			},
			addItemTab(tab) {
				// const typeArr=['tirePressure','batteryInfo','navigation']
				// const isOther=typeArr.findIndex(t => t === tab.type)!==-1
				// if(isOther){
				// 	const {name,type}=tab
				// 	this.setData({
				// 		popText:name,
				// 		cmdType:type,
				// 	})
				// 	this.tapBlueToothCmd()
				// }else{
				// 	this.tapOpenControl(tab)
				// }
				this.changClick(tab)
				if(!this.isActiveEdit) return
				const index = this.toBeSelectTabs.findIndex(t => t.name === tab.name)
				if (index !== -1) {
					const removedTab = this.toBeSelectTabs.splice(index, 1)[0]
					console.log(removedTab,index,this.realActiveTabs.length);
					this.activeTabs.push(removedTab)
					if (this.realActiveTabs.length == this.MAX_TAB_LEN) {
						this.isActiveEdit = false
					}
				}
				this.activeTabsSetFn()
			},

			//处理修改之后的数据
			activeTabsSetFn() {
				let obj = {
					activeTag: this.activeTabs,
					tag: this.toBeSelectTabs,
				}
				setFunctionTag(obj)
			},

			toUnbind() {
				uni.navigateTo({
					url: '/pages/carFunctionSet/unbind'
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/libs/css/layout.scss";

	.car-function-set-more {
		.fn-wrap {
			width: 100%;
			background: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			padding: 40rpx 0 48rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #060809;
				margin-bottom: 16rpx;
				padding-left: 40rpx;

				.sort-num {
					margin-left: 12rpx;
					width: 36rpx;
					font-family: Futura, Futura;
					font-size: 30rpx;
					color: #060809;
				}
			}

			.tab-item-container {
				display: flex;

				&.is-to-be-select {
					flex-wrap: wrap;
				}
			}

			.tab-item {
				text-align: center;
				width: 25%;
				position: relative;
				margin-top: 24rpx;

				.right-icon {
					position: absolute;
					right: 20rpx;
					top: 0;
					width: 40rpx;
					height: 40rpx;
					z-index: 9;
				}

				.icon {
					width: 112rpx;
					height: 112rpx;
					margin-bottom: 20rpx;
				}

				.name {
					font-size: 28rpx;
					color: #060809;

					&.shake {
						animation: shake 0.2s ease-in-out infinite;
					}
				}
			}
		}

		.tips {
			font-size: 24rpx;
			color: #060809;
			text-align: center;
			margin-top: 32rpx;
		}

		.un-bind-btn {
			position: absolute;
			bottom: 56rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 93%;
			padding: 24rpx;
			text-align: center;
			background: #E4E7EC;
			border-radius: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #060809;

			&:active {
				opacity: .7;
			}
		}
		.show-modal{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}
		.modal-info{
			background-color: #fff;
			padding: 20px;
			border-radius: 20px;
			width: 80%;
			max-width: 300px;
		}
		.modal-footer{
			width: 100%;
			align-items: center;
		}
		.show-btn{
			border-radius: 40rpx;
			width: 50%;
			/* width: 230rpx; */
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
		.cencel-btn-pop{
			color: #060809;
			background: #EBECEC;
			margin-right: 12rpx;
		}
		.ok-btn-pop{
			color: #FFFFFF;
			background: #060809;
		}
		.popup-title{
			font-weight: 600;
			font-size: 36rpx;
			color: #060809;
			text-align: center;
			margin-bottom:32rpx;
		}
		.popup-content{
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #828384;
			margin-bottom: 48rpx;
		}
	}
</style>