crm-mobile/pages/home/quickConfig.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="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">
                <image :src="$static(item.img)" class="img" />
                <text class="text">
                  {{ item.label }}
                </text>
                <image
                  :src="$static('images/icon/status_invalid.png')"
                  class="control-icon" />
              </view>
            </view>
						
            <template v-if="sortList.length < 4">
              <view
                v-for="i in (4 - 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">
                <image
                  :src="$static(moveItemData.img)"
                  class="img" />
                <text
                  class="text">
                  {{ moveItemData.label }}
                </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 in otherList"
              :key="item.type"
              class="quick-item"
              @click="handleAdd(item)">
              <image :src="$static(item.img)" class="img" />
              <text class="text">
                {{ item.label }}
              </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 dragSortMixins from '@/components/wk-drag-sort/mixins.js'
  import { quickListLib, getQuickList } from '@/utils/data.js'
  import { DEFAULT_NAV_CONFIG } from '@/config.js'
	
  export default {
    name: 'HomeQuickConfig',
    mixins: [dragSortMixins],
    data() {
      return {
        routerQuery: {},
        navConfig: {},
        configList: DEFAULT_NAV_CONFIG.quick
      }
    },
    computed: {
      otherList() {
        return quickListLib.filter(o => !this.configList.includes(o.typeNum))
      },
      sortList() {
        return getQuickList(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.quick || DEFAULT_NAV_CONFIG.quick
					if (!this.$isEmpty(this.navConfig)) {
						uni.setStorageSync('navConfig', this.navConfig)
					}
				}).catch(() => {
				})
			},
			
			handleRemove(index) {
				console.log('remove', index)
				this.clearMoveItem() // 悬浮结束
				this.configList.splice(index, 1)
			},
			
			handleSort(list) {
				this.configList = list.map(o => o.typeNum)
			},
			
			handleAdd(item) {
				if (this.configList.length >= 4) {
					this.$toast('首页只能添加4个快捷入口')
					return
				}
				this.configList.push(item.typeNum)
			},
			
			handleSave() {
				if (this.configList.length !== 4) {
					this.$toast('首页需要添加4个快捷入口')
					return
				}
				const params = {
					...this.navConfig,
					quick: this.configList
				}
				SetNavConfig([params]).then(() => {
					this.setNavFooter(params)
					uni.setStorageSync('navConfig', params)
					this.$Router.navigateBack()
				}).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;
			.img {
				width: 64rpx;
				height: 64rpx;
			}
			.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;
				}
			}
		}
	}
</style>