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 ref="addressEdit" v-show="isEdit" :data="setData" :height100="true" :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 {
        setData: {},
        isEdit: false
      }
    },
    mounted () {
      let data = this.baseUtils.deepCopy(this.$store.state.mobileAddress.address.data)
      data && data.content.length > 0 ? this.isEdit = false : this.isEdit = true
    },
    computed: {
      isSend () {
        return false
      },
      isPersonal () {
        return false
      }
    },
    methods: {
      editClick (item, type) {
        this.isEdit = type
        if (item) {
          this.setData = item
        }
        if (type === false) {
          this.$refs.addressView.initList()
        }
        this.$nextTick(() => {
          this.$refs.addressEdit.refleshSc()
        })
      }
    }
  }
</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 - 0.98rem);
    }
  }
</style>