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>
    </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">{{ 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'

const ICONS = {
  lock: `${QINIU_URL}FgMCTZCySvEgLYgkzU65BUR4f4Ls`,
  edit: `${QINIU_URL}Fq3V1Zi5tKH7ibTwG1nO7N96CU8m`,
  add: `${QINIU_URL}FqLEWbMe8DcnQtNz6GdDDD87ObZK`,
  placeholder: `${QINIU_URL}FpKvfFNSDbx0d9RDwyGAQdFb7Kt6`
}

export default {
  components: {
    // draggable
  },
  data() {
    const MAX_TAB_LEN = 4
    return {
      QINIU_URL,
      MAX_TAB_LEN,
      icons: ICONS,
      isActiveEdit: false,
      placeholderTab: {
        name: '',
        icon: ICONS.placeholder,
        isLock: false,
        isPlaceholder: true
      },
      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: {
    getMovableItem(tab) {
      return this.isActiveEdit && !tab.isLock && !tab.isPlaceholder
    },
    initializeTabs() {
      const lang = v => this.$t(v)
      this.activeTabs = [
        { name: lang('开机'), iconUrl: `${QINIU_URL}Fp5T9lSNakoiioji6S7W4DmFQ_ys`, isLock: true },
        { name: lang('闪灯鸣笛'), iconUrl: `${QINIU_URL}FpeQsDh2dbeTullNLI-HhWj4WAQS` },
        { name: lang('打开座桶'), iconUrl: `${QINIU_URL}FppwhbFzrEmDeJQgZJtDTu6WOoMZ` },
        { name: lang('打开尾箱'), iconUrl: `${QINIU_URL}Fv3KLuYWEeV5IM4_2sMbmur7yZtz` }
      ]
      this.toBeSelectTabs = [
        { name: lang('胎压'), iconUrl: `${QINIU_URL}FmbcjmvoB4J3CT1hrbjNX4kxv9Zq` },
        { name: lang('点出信息'), iconUrl: `${QINIU_URL}Fnx_4tLoq1ytvVA0UemepWisI73A` },
        { name: lang('导航'), iconUrl: `${QINIU_URL}FrA_ouJtDp-39g7rMBI0EYr2czVE` }
      ]
      this.addPlaceholders()
    },
    toggleEdit() {
      this.isActiveEdit = !this.isActiveEdit
    },
    deleteTab(tab) {
      if (tab.isLock) return
      const index = this.activeTabs.findIndex(t => t.name === tab.name)
      if (index !== -1) {
        const removedTab = this.activeTabs.splice(index, 1)[0]
        this.toBeSelectTabs.push(removedTab)
        this.addPlaceholders()
      }
    },
    addItemTab(tab) {
      const index = this.toBeSelectTabs.findIndex(t => t.name === tab.name)
      if (index !== -1) {
        const removedTab = this.toBeSelectTabs.splice(index, 1)[0]
        const placeholderIndex = this.activeTabs.findIndex(v => v.isPlaceholder)
        this.activeTabs.splice(placeholderIndex, 1, removedTab)
        if (this.realActiveTabs.length > this.MAX_TAB_LEN - 1) {
          this.isActiveEdit = false
        }
      }
    },
    addPlaceholders() {
      while (this.activeTabs.length < this.MAX_TAB_LEN) {
        this.activeTabs.push({ ...this.placeholderTab })
      }
    },
    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>