crm-mobile/pages_crm/userDefined.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="自定义筛选项">
        <!-- #ifndef MP-WEIXIN -->
        <view class="button white-btn" @click="handleSave">
          确定
        </view>
        <!-- #endif -->
      </wk-nav-bar>
			
      <view class="container">
        <view
          v-if="chooseList.length > 0"
          class="section choose-list">
          <view class="section-title">
            已选择项
          </view>
          <view class="section-body">
            <view
              v-for="(item, index) in chooseList"
              :key="index"
              class="field-item"
              @click="handleRemove(index)">
              <view class="field-item_icon choose">
                <text class="wk wk-check icon" />
              </view>
              <view class="field-item_text">
                <text class="text">
                  {{ item.name }}
                </text>
                <image :src="$static('images/icon/sort.png')" alt="" class="sort-icon" />
              </view>
            </view>
          </view>
        </view>
				
        <view class="section other-list">
          <view class="section-title">
            其他可选项
          </view>
          <view class="section-body">
            <view
              v-for="(item, index) in otherList"
              :key="index"
              class="field-item"
              @click="handleChoose(index)">
              <view class="field-item_icon" />
              <view class="field-item_text">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
			
      <!-- #ifdef MP-WEIXIN -->
      <view class="footer-btn-group">
        <button class="button" @click="handleSave">
          确定
        </button>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  export default {
    name: 'UserDefined',
    data() {
      return {
        bridge: {},
        chooseList: [],
        otherList: []
      }
    },
    onLoad() {
      this.bridge = getApp().globalData.filterBridge
      this.chooseList = this.bridge.choose || []
      this.otherList = this.bridge.other || []
    },
    methods: {
      handleChoose(index) {
        const arr = this.otherList.splice(index, 1)
        this.chooseList.push(arr[0])
      },
      handleRemove(index) {
        const arr = this.chooseList.splice(index, 1)
        this.otherList.push(arr[0])
      },
			
      handleSave() {
        uni.$emit('select-defined', {
          guid: this.bridge.guid,
          choose: this.chooseList,
          other: this.otherList
        })
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
	.container {
		flex: 1;
		overflow-y: auto;
		
		.section {
			.section-title {
				font-size: 24rpx;
				padding: 15rpx 30rpx;
			}
			.section-body {
				background-color: white;
				padding: 0 30rpx;
				.field-item {
					width: 100%;
					@include left;
					
					.field-item_icon {
						width: 38rpx;
						height: 38rpx;
						border: 1rpx solid #ccc;
						border-radius: 50%;
						margin-right: 22rpx;
						@include center;
						.icon {
							font-size: 22rpx;
						}
						
						&.choose {
							background-color: $theme-color;
							border-color: $theme-color;
							.icon {
								color: white;
							}
						}
					}
					.field-item_text {
						flex: 1;
						font-size: 30rpx;
						color: $dark;
						border-bottom: 1rpx solid $border-color;
						padding: 24rpx 0;
						@include left;
						
						.text {
							flex: 1;
						}
						
						.sort-icon {
							width: 30rpx;
							height: 20rpx;
						}
					}
				}

				.field-item:last-child .field-item_text {
					border-bottom: 0 none;
				}
			}
		}
	}
</style>