yshop-pro-uniapp/pages/address/address.vue

<template>
  <Header :scroll-top="scrollTop">
    {{ pageTitle }}
  </Header>
  <view
      class="address-list"
      v-if="list.length>0">
    <uv-swipe-action>
      <uv-swipe-action-item
          v-for="(item, index) in list"
          :key="item.id"
          :options="options"
          @click="showModal( item)"
      >
        <AddressItem
            :address-item="item"
            :border="index!==list.length - 1"
            @edit="goEditorAddress"
            @click="handleClick" />
      </uv-swipe-action-item>
    </uv-swipe-action>
  </view>
  <Empty
      :iconSrc="emptyAddressIcon"
      v-else
  >
    您还没有新增地址~
  </Empty>
  <view class="form-buttons">
    <view class="btn">
      <uv-button
          round
          block
          type="primary"
          @tap="goCreateAddress"
      >
        新增地址
      </uv-button>
    </view>
  </view>
  <ReturnTop :scroll-top="scrollTop" />
  <Modal
      ref="delModalRef"
      content="确认要删除地址吗？"
      @confirm="doDeleteRequest" />
</template>

<script setup>
import { ref, unref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import Empty from '@/components/Empty/index.vue'
import { emptyAddressIcon } from "@/utils/images";
import { getAddressDel, getAddressList, } from '@/api/address'
import { useRouter } from "@/hooks/useRouter";
import Header from "@/components/Header/index.vue"
import ReturnTop from "@/components/ReturnTop/index.vue";
import { useScroll } from "@/hooks/useScroll";
import Modal from "@/components/Modal/index.vue";
import UvSwipeAction from "@/uni_modules/uv-swipe-action/components/uv-swipe-action/uv-swipe-action.vue";
import UvSwipeActionItem from "@/uni_modules/uv-swipe-action/components/uv-swipe-action-item/uv-swipe-action-item.vue";
import AddressItem from "@/pages/address/component/AddressItem.vue";
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
import { usePaging } from "@/hooks/usePaging";
import { emitter } from "@/utils/emitter";

// ================================= hooks =============================================
const {push, goBack, getParams} = useRouter()
const {scrollTop} = useScroll()

const actionType = ref(undefined) // 页面状态是选择还是管理 'select' | undefined
const pageTitle = computed(() => actionType.value === 'select' ? '选择地址' : '地址管理') // 页面title
// swipe配置
const options = ref([{
  // text: '删 除',
  icon: 'trash',
  style: {
    backgroundColor: '#EE6D46'
  }
}])

onLoad((option) => {
  const params = getParams?.(option)
  actionType.value = params?.type
})

onShow(() => {
  refreshPage?.()
})
// ============================== 用户地址列表相关 =================================
const {list, refreshPage} = usePaging({
  request: getAddressList,
  // load: true
});


/**
 * 去创建地址
 */
function goCreateAddress() {
  push?.({url: '/pages/createAddress/createAddress'}, {
    data: {
      type: actionType.value
    }
  })
}

/**
 * 去修改地址
 * @param address
 */
function goEditorAddress(address) {
  push?.({url: '/pages/createAddress/createAddress'}, {
    data: {
      type: actionType.value,
      address
    }
  })
}

/**
 * 处理选择状态下返回
 * @param item
 */
function handleClick(item) {
  if (actionType.value === 'select') {
    emitter.emit('selectAddress', item)
    goBack?.({delta: 1})
  }
}


// ============================ 删除相关 ============================
const delModalRef = ref()
const prepareData = ref(undefined)

/**
 * 打开弹窗
 */
function showModal(data) {
  prepareData.value = data
  unref(delModalRef).show()
}

/**
 * 删除地址
 */
async function doDeleteRequest() {
  await getAddressDel(prepareData.value)
  await refreshPage?.()
}
</script>

<style lang="scss">
@import "../../style/images";

.address-list {
  padding-bottom: 100rpx;
}

.form-buttons {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 0;
}

.form-buttons .btn {
  width: 90%;
  margin: 0 auto;
}

</style>