mall-web-ssr/pages/mobile/user/address.vue

<template>
  <div class="logistics-wrapper">
    <div class="logistics-content" id="logisticsContent">
      <address-view ref="addressView" v-show="!isEdit" :isSend="isSend" @isEditEvent="editClick"></address-view>
      <address-edit v-show="isEdit" :data="setData" :isPersonal="isPersonal" :isSend="isSend" @isEditEvent="editClick"></address-edit>
    </div>
  </div>
</template>

<script type="text/javascript">
  import { AddressView, AddressEdit } from '~components/mobile/base'
  export default {
    name: 'NoSendAddress',
    layout: 'mobile',
    middleware: 'authenticated',
    fetch({store}) {
      return Promise.all([
        store.dispatch('mobileAddress/loadAddressData', {count: 10, page: 1, isSend: false, sorting: { 'num': 'ASC' }})
      ])
    },
    components: {
      AddressView,
      AddressEdit
    },
    data () {
      return {
        isEdit: false,
        setData: {}
      }
    },
    computed: {
      isSend () {
        return false
      },
      isPersonal () {
        return true
      }
    },
    methods: {
      editClick (item, type) {
        this.isEdit = type
        if (item) {
          this.setData = item
        }
        if (type === false) {
          this.$refs.addressView.initList()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @mixin Fixed() {
    position: fixed;
    bottom: 0.98rem;
    left: 0;
    right: 0;
    top: 1.26rem;
  }
  .logistics-wrapper {
    @include Fixed();
    z-index: 111;
    background: #f1f3f6;
    .logistics-content {
      overflow-y: scroll;
      height: calc(100vh - 1.26rem)
    }
  }
</style>