mtsd/sqxp-wx/pages/client/address/address.vue

<template>
  <view class="page client-theme client-subpage">
    <view v-if="loading" class="state">
      <ClientSkeleton variant="list" :rows="4" />
    </view>
    <template v-else>
      <view class="client-subpage-hero">
        <text class="client-subpage-hero__title">收货地址</text>
        <text class="client-subpage-hero__sub">管理配送地址，保障送货上门</text>
      </view>
      <view v-if="list.length === 0" class="empty-wrap">
        <image class="empty-image" :src="IMG_EMPTY" mode="aspectFit" />
        <text class="empty-text">暂无收货地址</text>
        <text class="empty-hint">添加后便于配送员联系与送货</text>
        <button class="add-btn" type="default" @click="goAdd">新增收货地址</button>
      </view>
      <view v-else class="list-shell">
        <!-- #ifdef H5 -->
        <view class="list-scroll list-scroll--h5" @scroll.passive="onH5ListScroll">
          <view class="list-inner">
            <view v-for="item in list" :key="item.id" class="card" hover-class="card--pressed" :hover-stay-time="100">
              <view class="card-main" @click="goEdit(item)">
                <view class="card-top">
                  <text class="name">{{ item.contactPerson }}</text>
                  <PhoneDialInline
                    class="phone-wrap"
                    :phone="item.contactPhone"
                    color="#0a9f6d"
                    hide-icon
                  />
                  <view v-if="item.isDefault" class="tag-default">默认</view>
                </view>
                <text class="addr-line">{{ fullRegion(item) }}{{ item.detailAddress }}</text>
              </view>
              <view class="card-actions">
                <text
                  v-if="!item.isDefault"
                  class="act"
                  @click.stop="handleSetDefault(item.id)"
                >设为默认</text>
                <text class="act" @click.stop="goEdit(item)">编辑</text>
                <text class="act danger" @click.stop="handleDelete(item)">删除</text>
              </view>
            </view>
            <view v-if="loadingMore" class="list-footer-tip">加载中...</view>
            <view v-else-if="!hasMore && list.length > 0" class="list-footer-tip muted">没有更多了</view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <scroll-view
          scroll-y
          class="list-scroll"
          :show-scrollbar="true"
          :enable-flex="true"
          :lower-threshold="100"
          @scrolltolower="onScrollToLower"
        >
          <view class="list-inner">
            <view v-for="item in list" :key="item.id" class="card" hover-class="card--pressed" :hover-stay-time="100">
              <view class="card-main" @click="goEdit(item)">
                <view class="card-top">
                  <text class="name">{{ item.contactPerson }}</text>
                  <PhoneDialInline
                    class="phone-wrap"
                    :phone="item.contactPhone"
                    color="#0a9f6d"
                    hide-icon
                  />
                  <view v-if="item.isDefault" class="tag-default">默认</view>
                </view>
                <text class="addr-line">{{ fullRegion(item) }}{{ item.detailAddress }}</text>
              </view>
              <view class="card-actions">
                <text
                  v-if="!item.isDefault"
                  class="act"
                  @click.stop="handleSetDefault(item.id)"
                >设为默认</text>
                <text class="act" @click.stop="goEdit(item)">编辑</text>
                <text class="act danger" @click.stop="handleDelete(item)">删除</text>
              </view>
            </view>
            <view v-if="loadingMore" class="list-footer-tip">加载中...</view>
            <view v-else-if="!hasMore && list.length > 0" class="list-footer-tip muted">没有更多了</view>
          </view>
        </scroll-view>
        <!-- #endif -->
        <view class="footer-bar">
          <button class="add-btn-bottom" type="default" @click="goAdd">新增收货地址</button>
        </view>
      </view>
    </template>
    <view v-if="deleteDialogVisible" class="delete-dialog-mask" @click="closeDeleteDialog">
      <view class="delete-dialog" @click.stop>
        <view class="delete-dialog__icon">!</view>
        <text class="delete-dialog__title">删除收货地址</text>
        <text class="delete-dialog__desc">删除后将无法恢复，确定继续吗？</text>
        <view class="delete-dialog__actions">
          <view class="delete-dialog__action delete-dialog__action--cancel" @click="closeDeleteDialog">取消</view>
          <button
            class="delete-dialog__action delete-dialog__action--danger"
            :disabled="deleting"
            :loading="deleting"
            @click="confirmDelete"
          >
            删除
          </button>
        </view>
      </view>
    </view>
  </view>
</template>



<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import PhoneDialInline from '@/components/phone-dial-inline.vue'
import ClientSkeleton from '@/components/client/client-skeleton.vue'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { IMG_EMPTY } from '@/utils/staticAsset'

const userStore = useUserStore()
const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const hasMore = ref(true)
const nextPage = ref(1)
const deleteDialogVisible = ref(false)
const deleting = ref(false)
const deletingItem = ref(null)

const PAGE_SIZE = 20

function prioritizeDefaultAddress(items = []) {
  if (!Array.isArray(items) || items.length <= 1) return items
  const sorted = [...items]
  sorted.sort((a, b) => Number(!!b?.isDefault) - Number(!!a?.isDefault))
  return sorted
}

/** reset=true：从第一页重新拉（onShow、删改后）；false：滚动加载下一页 */
async function fetchList(reset = true) {
  if (reset) {
    loading.value = true
    list.value = []
    nextPage.value = 1
    hasMore.value = true
  } else {
    if (!hasMore.value || loadingMore.value || loading.value) return
    loadingMore.value = true
  }

  const page = reset ? 1 : nextPage.value

  try {
    const res = await request({
      url: '/mini/client/addresses',
      method: 'GET',
      data: { page, pageSize: PAGE_SIZE }
    })
    const body = parseResponseJson(res)
    if (body.code === 200 && body.data) {
      const d = body.data
      const items = Array.isArray(d.list) ? d.list : []
      const totalPages = Number(d.totalPages ?? 0)
      if (reset) {
        list.value = prioritizeDefaultAddress(items)
      } else {
        const merged = [...list.value]
        const seen = new Set(merged.map((x) => x.id))
        for (const it of prioritizeDefaultAddress(items)) {
          if (it.id && !seen.has(it.id)) {
            merged.push(it)
            seen.add(it.id)
          }
        }
        list.value = prioritizeDefaultAddress(merged)
      }
      hasMore.value = totalPages > 0 ? page < totalPages : items.length >= PAGE_SIZE
      nextPage.value = page + 1
    } else if (reset) {
      list.value = []
      hasMore.value = false
    }
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

function onScrollToLower() {
  void fetchList(false)
}

/** H5：用原生滚动替代 scroll-view，避免路由返回时 uni useScrollViewLoader 访问已销毁节点报错 */
function onH5ListScroll(e) {
  const el = e && e.target
  if (!el || typeof el.scrollTop !== 'number') return
  const { scrollTop, scrollHeight, clientHeight } = el
  if (scrollHeight - scrollTop - clientHeight < 100) {
    void fetchList(false)
  }
}

function fullRegion(addr) {
  const p = addr.province || ''
  const c = addr.city || ''
  const d = addr.district || ''
  return `${p}${c}${d}`
}

function goAdd() {
  uni.navigateTo({ url: '/pages/client/address/edit' })
}

function goEdit(item) {
  uni.navigateTo({ url: `/pages/client/address/edit?id=${encodeURIComponent(item.id)}` })
}

async function handleSetDefault(id) {
  try {
    const res = await request({
      url: `/mini/client/addresses/${id}/set-default`,
      method: 'POST'
    })
    const body = parseResponseJson(res)
    if (body.code === 200) {
      uni.showToast({ title: '已设为默认', icon: 'success' })
      await fetchList(true)
    } else {
      uni.showToast({ title: body.message || '操作失败', icon: 'none' })
    }
  } catch {
    uni.showToast({ title: '网络异常', icon: 'none' })
  }
}

function handleDelete(item) {
  deletingItem.value = item
  deleteDialogVisible.value = true
}

function closeDeleteDialog(force = false) {
  if (deleting.value && !force) return
  deleteDialogVisible.value = false
  deletingItem.value = null
}

async function confirmDelete() {
  const item = deletingItem.value
  if (!item?.id || deleting.value) return
  deleting.value = true
  try {
    const req = await request({
      url: `/mini/client/addresses/${item.id}`,
      method: 'DELETE'
    })
    const body = parseResponseJson(req)
    if (body.code === 200) {
      uni.showToast({ title: '已删除', icon: 'success' })
      closeDeleteDialog(true)
      await fetchList(true)
    } else {
      uni.showToast({ title: body.message || '删除失败', icon: 'none' })
    }
  } catch {
    uni.showToast({ title: '网络异常', icon: 'none' })
  } finally {
    deleting.value = false
  }
}

onShow(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    uni.showToast({ title: '仅客户可访问', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1200)
    return
  }
  void fetchList(true)
})
</script>



<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f8f7;
}
</style>

<style lang="scss" scoped>
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  box-sizing: border-box;
  overflow: hidden;
}

.card--pressed {
  opacity: 0.94;
}

.state {
  flex: 1;
  min-height: 0;
  padding: 0;
}

.empty-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88rpx 40rpx 40rpx;
  box-sizing: border-box;
  overflow-y: auto;

  .empty-image {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 12rpx;
  }

  .empty-text {
    font-size: 30rpx;
    color: var(--c-text);
    margin-bottom: 8rpx;
    text-align: center;
  }

  .empty-hint {
    font-size: 24rpx;
    color: var(--c-muted);
    margin-bottom: 28rpx;
    text-align: center;
  }
}

.add-btn,
.add-btn-bottom {
  width: 100%;
  max-width: 600rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(145deg, #14b86f, #0a9f6d);
  color: #ffffff;
  border-radius: 44rpx;
  font-size: 30rpx;
  border: none;
  font-weight: 700;
}

.add-btn-bottom {
  max-width: none;
  margin: 0;
}

.list-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list-scroll {
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* #ifdef H5 */
.list-scroll--h5 {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* #endif */

.list-inner {
  padding: 24rpx 32rpx 16rpx;
  padding-bottom: calc(24rpx + 180rpx + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.list-footer-tip {
  text-align: center;
  font-size: 24rpx;
  color: #9ba8a2;
  padding: 24rpx 12rpx 32rpx;

  &.muted {
    color: #c7d6cf;
  }
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  flex-shrink: 0;
  padding: 16rpx 32rpx;
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: var(--c-bg);
  box-shadow: none;
  border-top: 1rpx solid rgba(220, 235, 228, 0.65);
  box-sizing: border-box;
}

.card {
  background: var(--c-card);
  border-radius: var(--c-radius-card);
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: none;
  border: 1rpx solid var(--c-border);
}

.card-main {
  padding: 28rpx 24rpx 20rpx;
}

.card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 12rpx;

  .name {
    font-size: 30rpx;
    font-weight: 700;
    color: var(--c-text);
  }

  .phone-wrap :deep(.phone-dial-inline__text) {
    font-size: 28rpx;
    color: var(--c-muted);
  }

  .tag-default {
    font-size: 22rpx;
    color: var(--c-brand-green);
    background: var(--c-brand-green-soft);
    padding: 0 16rpx;
    min-height: 44rpx;
    border-radius: 999rpx;
    display: inline-flex;
    align-items: center;
  }
}

.addr-line {
  font-size: 26rpx;
  color: var(--c-muted);
  line-height: 1.5;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32rpx;
  padding: 16rpx 24rpx;
  border-top: 1rpx solid rgba(220, 235, 228, 0.65);
  background: #ffffff;

  .act {
    font-size: 26rpx;
    color: var(--c-brand-green);
  }

  .danger {
    color: #ee0a24;
  }
}

.delete-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(18, 28, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
}

.delete-dialog {
  width: 100%;
  max-width: 620rpx;
  background: #ffffff;
  border-radius: 26rpx;
  padding: 40rpx 34rpx 32rpx;
  box-sizing: border-box;
  box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15);
}

.delete-dialog__icon {
  width: 76rpx;
  height: 76rpx;
  margin: 0 auto 20rpx;
  border-radius: 50%;
  background: #fff1f0;
  color: #ee0a24;
  font-size: 42rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-dialog__title {
  display: block;
  text-align: center;
  color: var(--c-text);
  font-size: 34rpx;
  font-weight: 700;
}

.delete-dialog__desc {
  display: block;
  margin-top: 14rpx;
  text-align: center;
  color: var(--c-muted);
  font-size: 26rpx;
  line-height: 1.6;
}

.delete-dialog__actions {
  margin-top: 28rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16rpx;
}

.delete-dialog__action {
  width: 100%;
  min-height: 76rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  box-sizing: border-box;
}

.delete-dialog__action--cancel {
  background: #f4f7f6;
  color: #5b6b64;
  border: 1rpx solid #ddebe5;
}

.delete-dialog__action--danger {
  background: linear-gradient(145deg, #ff6565, #ee0a24);
  color: #ffffff;
}

.delete-dialog__action--danger[disabled] {
  color: #ffffff !important;
  opacity: 0.92;
}
</style>