crm-mobile/pages_personal/navConfig.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="底部导航栏设置">
        <!-- #ifndef MP-WEIXIN -->
        <button class="button white-btn" @click="handleSave">
          保存
        </button>
        <!-- #endif -->
      </wk-nav-bar>
			
      <view class="container">
        <view class="section">
          <view class="section-title">
            <text class="section-title__text">
              个性化导航栏设置
            </text>
            <text class="section-title__desc">
              （长按拖动调整顺序）
            </text>
          </view>
				
          <view class="wk-drag-sort">
            <view
              v-for="(item, index) in sortList"
              :id="`wk-drag-sort-item-` + index"
              :key="item.type"
              :class="{disabled: item.typeNum === 12}"
              class="wk-drag-sort-item"
              @touchstart="handleTouchstart($event, index)"
              @touchmove.stop.prevent="handleTouchmove($event, index)"
              @touchend="handleTouchend($event, index)"
              @tap.stop="handleRemove(index)">
              <view class="quick-item">
                <text :class="item.active_icon" class="icon" />
                <text class="text">
                  {{ item.name }}
                </text>
                <image
                  v-if="!item.disabled"
                  :src="$static('images/icon/status_invalid.png')"
                  class="control-icon" />
              </view>
            </view>
						
            <template v-if="sortList.length < 5">
              <view
                v-for="i in (5 - sortList.length)"
                :key="i"
                class="empty-item" />
            </template>
						
            <view
              :style="{
                left: moveLeft + 'px',
                top: moveTop + 'px',
                width: itemWidth + 'px',
                height: itemHeight + 'px',
                visibility: showMoveItem ? 'unset' : 'hidden'
              }"
              class="move-item">
              <view
                v-if="moveItemData"
                class="quick-item">
                <text :class="moveItemData.active_icon" class="icon" />
                <text
                  class="text">
                  {{ moveItemData.name }}
                </text>
              </view>
            </view>
          </view>
        </view>
				
        <view class="section">
          <view class="section-title">
            <text class="section-title__text">
              全部
            </text>
          </view>
          <view class="section-body">
            <view
              v-for="(item, index) in otherList"
              :key="item.type"
              class="quick-item"
              @click="handleAdd(index)">
              <text :class="item.active_icon" class="icon" />
              <text class="text">
                {{ item.name }}
              </text>
              <image
                :src="$static('images/icon/add_primary.png')"
                class="control-icon" />
            </view>
          </view>
        </view>
      </view>
			
      <!-- #ifdef MP-WEIXIN -->
      <view class="footer-btn-group">
        <button class="button" @click="handleSave">
          保存
        </button>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  import { GetNavConfig, SetNavConfig } from '@/api/base.js'
	
  import { mapMutations } from 'vuex'
  import { navLibList, getNavList } from '@/utils/data.js'
  import { DEFAULT_NAV_CONFIG } from '@/config.js'
  import dragSortMixins from '@/components/wk-drag-sort/mixins.js'
	
  export default {
    name: 'NavConfig',
    mixins: [dragSortMixins],
    data() {
      return {
        routerQuery: {},
        navConfig: {},
        configList: DEFAULT_NAV_CONFIG.nav
      }
    },
    computed: {
      otherList() {
        return navLibList.filter(o => !this.configList.includes(o.typeNum) && o.typeNum !== 4)
      },
      sortList() {
        return getNavList(this.configList)
      }
    },
    onLoad(options) {
      this.routerQuery = options
      this.initCom()
    },
    methods: {
			...mapMutations({
				setNavFooter: 'user/SET_NAV_FOOTER'
			}),
			initCom() {
				GetNavConfig().then(res => {
					this.navConfig = this.$isEmpty(res) ? {} : res[0]
					this.configList = this.navConfig.nav || DEFAULT_NAV_CONFIG.nav
					if (!this.configList.includes(12)) {
						this.configList.push(12)
					}
					if (this.configList.length > 5) {
						this.configList.splice(4, this.configList.length - 5)
					}
					if (!this.$isEmpty(this.navConfig)) {
						uni.setStorageSync('navConfig', this.navConfig)
					}
				}).catch(() => {
				})
			},
			
			handleRemove(index) {
				const item = this.sortList[index]
				if (item.typeNum === 12) return
				this.configList.splice(index, 1)
			},
			
			handleSort(list) {
				this.configList = list.map(o => o.typeNum)
			},
			
			handleAdd(index) {
				if (this.configList.length >= 5) {
					this.configList.splice(5)
					this.$toast('导航栏最多可以展示5个应用')
					return
				}
				const item = this.otherList[index]
				this.configList.push(item.typeNum)
			},
			
			handleSave() {
				if (this.configList.length < 3) {
					this.$toast('导航栏最少要展示3个应用')
					return
				}
				if (!this.configList.includes(12)) {
					this.$toast('导航栏必须包含"我的"')
					return
				}
				const params = {
					...this.navConfig,
					nav: this.configList
				}
				
				SetNavConfig([params]).then(() => {
					this.setNavFooter(params)
					uni.setStorageSync('navConfig', params)
					this.$Router.reLaunch('/pages/home/index')
				}).catch(() => {})
			}
    }
  }
</script>

<style scoped lang="scss">
	.container {
		flex: 1;
		
		.quick-item {
			position: relative;
			width: calc(25% - 20rpx);
			height: 150rpx;
			flex-direction: column;
			box-shadow: 0px 6rpx 18rpx rgba(232, 232, 233, 0.77);
			border-radius: 16rpx;
			background-color: white;
			margin: 10rpx;
			@include center;
			.icon {
				font-size: 46rpx;
				color: $theme-color;
			}
			.text {
				font-size: $wk-font-mini;
				margin-top: 10rpx;
			}
			.control-icon {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}
		.empty-item {
			width: calc(25% - 20rpx);
			height: 150rpx;
			box-shadow: unset;
			border: 1rpx dashed #999999;
			border-radius: 16rpx;
			margin: 10rpx;
		}
		
		.section {
			background-color: white;
			padding: 32rpx;
			.section-title {
				margin-bottom: 20rpx;
				.section-title__text {
					font-size: $wk-font-large;
					font-weight: bold;
					color: $dark;
				}
				.section-title__desc {
					font-size: $wk-font-base;
					color: $gray;
				}
			}
			
			.section-body {
				width: 100%;
				flex-wrap: wrap;
				@include left;
			}
			
			.wk-drag-sort {
				width: 100%;
				flex-wrap: wrap;
				@include left;
				.wk-drag-sort-item  {
					width: calc(25% - 20rpx);
					height: 150rpx;
					margin: 10rpx;
				}
				.quick-item {
					width: 100%;
					height: 100%;
					margin: 0;
				}
				.move-item {
					position: fixed;
					visibility: hidden;
					z-index: 10;
					will-change: top left;
				}
				.wk-drag-sort-item.disabled {
					.quick-item .icon {
						color: $theme-color;
					}
				}
			}
		}
	}
</style>