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>

          <!-- 目前版本中小程序slot兼容有神坑 -->
          <wk-drag-sort
            :list="quickList"
            class="wk-drag-sort"
            @sort="handleSort">
            <template v-slot:default="{ scopeData }">
              <view class="quick-item">
                <image :src="$static(scopeData.data.img)" class="img" />
                <text class="text">
                  {{ scopeData.data.label }}
                </text>
                <image
                  :src="$static('images/icon/status_invalid.png')"
                  class="control-icon"
                  @touchstart.stop
                  @click.stop="handleRemove(scopeData.$index)" />
              </view>
            </template>
						
            <template v-if="quickList.length < 4">
              <view
                v-for="i in (4 - quickList.length)"
                :key="i"
                class="move-item empty" />
            </template>
						
            <view slot="move" slot-scope="scopeData" class="quick-item">
              <image
                :src="$static(scopeData.data.img)"
                class="img" />
              <text
                class="text">
                {{ scopeData.data.label }}
              </text>
            </view>
          </wk-drag-sort>	
        </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 { quickListLib, getQuickList } from './data.js'
  export default {
    name: 'HomeQuickConfig',
    data() {
      return {
        routerQuery: {},
        configList: ['customer', 'business', 'task', 'log']
      }
    },
    computed: {
      otherList() {
        return quickListLib.filter(o => !this.configList.includes(o.type))
      },
      quickList() {
        return getQuickList(this.configList)
      }
    },
    onLoad(options) {
      this.routerQuery = options
      this.initCom()
    },
    methods: {
      initCom() {
      },
			
      handleRemove(index) {
        this.configList.splice(index, 1)
      },
			
      handleSort(list) {
        this.configList = list.map(o => o.type)
      },
			
      handleAdd(item) {
        if (this.configList.length >= 4) {
          this.$toast('首页只能添加4个快捷入口')
          return
        }
        this.configList.push(item.type)
      }
    }
  }
</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 {
				box-shadow: unset;
				border: 1rpx dashed #999999;
			}
		}
		
		.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;
			}
			
			::v-deep .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;
				}
				
			}
		}
	}
</style>