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 @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>
</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';
	const ICONS = {
		lock: `${QINIU_URL}FgMCTZCySvEgLYgkzU65BUR4f4Ls`,
		edit: `${QINIU_URL}Fq3V1Zi5tKH7ibTwG1nO7N96CU8m`,
		add: `${QINIU_URL}FqLEWbMe8DcnQtNz6GdDDD87ObZK`,
		placeholder: `${QINIU_URL}FpKvfFNSDbx0d9RDwyGAQdFb7Kt6`
	}

	export default {
		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) {
				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) {
				this.isActiveEdit = e
			},
			addItemTab(tab) {
				const index = this.toBeSelectTabs.findIndex(t => t.name === tab.name)
				if (index !== -1) {
					const removedTab = this.toBeSelectTabs.splice(index, 1)[0]
					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;
			}
		}
	}
</style>