products/uni-shop/components/address-picker/main.vue

<template>
  <view class="screen_all">
    <view class="screen_all" @click="open">
      <slot></slot>
    </view>
    <view
        class="address-picker flex"
        :class="[show?'picker-show':'picker-hide']"
    >
      <view @click="cancel" class="flex-1"></view>
      <view class="address-picker-bottom"
            :class="[show?'bottom-show':'bottom-hide']"
      >
        <view class="address-picker-header row">
          <view @click="cancel" class="address-picker-control address-picker-cancel center">取消</view>
          <view class="flex-all-1"></view>
          <view @click="confirm" class="address-picker-control address-picker-confirm center">确定</view>
        </view>
        <view class="address-picker-content">
          <picker-view
              :value="vValue"
              class="picker-view"
              @change="changeColumn"
          >
            <picker-view-column>
              <view class="picker-column flex jCenter" v-for="(item,index) in province" :key="index"><view class="picker-view-line-1">{{item.name}}</view></view>
            </picker-view-column>
            <picker-view-column>
              <view  class="picker-column flex jCenter" v-for="(item,index) in city" :key="index"><view class="picker-view-line-1">{{item.name}}</view></view>
            </picker-view-column>
            <picker-view-column>
              <view  class="picker-column flex jCenter" v-for="(item,index) in area" :key="index"><view class="picker-view-line-1">{{item.name}}</view></view>
            </picker-view-column>
          </picker-view>
        </view>
        <!-- iphoneX的兼容 -->
        <view :style="{height: footerHeight+'px'}"></view>

      </view>

    </view>
  </view>
</template>

<script>
import mixins from './mixins/index';
import props from "./props";
export default {
  name: "address-picker",
  mixins,
  props
}
</script>

<style scoped src="./style.scss" lang="scss">

</style>