page_bigmember_pc/src/components/selector/AreaSelector.vue

<template>
  <selector-card
    class="area-selector"
    :cardType="selectorType"
    @onConfirm="onConfirm"
    @onCancel="onCancel">
    <div slot="header" :class="{ 's-header': selectorType === 'line' }">
      <slot name="header">选择区域</slot>
    </div>
    <AreaSelectorContent
      ref="content"
      :selectorType="selectorType"
      :showSearchInput="showSearchInput"
      :showSelectResult="showSelectResult"
      :onlyProvince="onlyProvince"
      :singleChoice="singleChoice"
      :initCityMap="initCityMap"
      :beforeTabClick="beforeTabClick"
      :comtype="comtype"
      @onChange="onChange"
    />
  </selector-card>
</template>

<script>
import SelectorCard from '@/components/selector/SelectorCard.vue'
import AreaSelectorContent from '@/components/selector/AreaSelectorContent.vue'
export default {
  name: 'area-selector',
  components: {
    SelectorCard,
    AreaSelectorContent
  },
  props: {
    selectorType: {
      type: String,
      default: 'card' // card/line
    },
    // 仅选中省份
    onlyProvince: {
      type: Boolean,
      default: false
    },
    singleChoice: { // 是否单选? 只有在selectorType=line下才会生效
      // type: Boolean,
      default: false
    },
    showSearchInput: { // 是否显示搜索 只有在selectorType=card下才会生效
      type: Boolean,
      default: true
    },
    showSelectResult: { // 是否显示选择结果 只有在selectorType=card下才会生效
      type: Boolean,
      default: false
    },
    beforeTabClick: Function,
    comtype: {
      type: String,
      default: ''
    },
    // 初始化城市数据
    // 刚进入页面需要被选中的城市数据
    initCityMap: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    content () {
      return this.$refs.content
    }
  },
  created () {},
  methods: {
    initList (map = {}) {
      return this.$refs.content.initIndexBarAndAreaMap(map)
    },
    setCitySelected (data) {
      return this.$refs.content.setCitySelected(data)
    },
    getSelectedCity () {
      return this.$refs.content.getSelectedCity()
    },
    onCancel () {
      this.$emit('onCancel')
    },
    onConfirm () {
      const selectedCity = this.getSelectedCity()
      this.$emit('onConfirm', selectedCity)
    },
    onChange (selected) {
      this.$emit('onChange', selected)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>