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

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { request, parseResponseJson } from '@/utils/request';
import PhoneDialInline from '@/components/phone-dial-inline.vue';
import { IMG_EMPTY } from '@/utils/staticAsset';
const userStore = useUserStore();
const list = ref([]);
const sortedList = computed(() => {
    const raw = Array.isArray(list.value) ? list.value : [];
    return raw
        .map((it, idx) => ({ it, idx }))
        .sort((a, b) => {
        const ad = a.it?.isDefault ? 1 : 0;
        const bd = b.it?.isDefault ? 1 : 0;
        if (ad !== bd)
            return bd - ad;
        return a.idx - b.idx;
    })
        .map((x) => x.it);
});
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;
async function fetchList() {
    const reset = arguments.length === 0 || arguments[0] === 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/supplier/pickup-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) ? d : (Array.isArray(d.list) ? d.list : []);
            const totalPages = Array.isArray(d) ? 0 : Number(d.totalPages ?? 0);
            if (reset) {
                list.value = items;
            }
            else {
                const seen = new Set(list.value.map((x) => x.id));
                for (const it of items) {
                    if (it.id && !seen.has(it.id)) {
                        list.value.push(it);
                        seen.add(it.id);
                    }
                }
            }
            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);
}
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/supplier/address/edit' });
}
function goEdit(item) {
    uni.navigateTo({ url: `/pages/supplier/address/edit?id=${item.id}` });
}
async function handleSetDefault(id) {
    try {
        const res = await request({
            url: `/mini/supplier/addresses/${id}/set-default`,
            method: 'POST'
        });
        const body = parseResponseJson(res);
        if (body.code === 200) {
            uni.showToast({ title: '已设为默认', icon: 'success' });
            await fetchList();
        }
        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/supplier/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(() => {
    if (!userStore.isLoggedIn) {
        uni.reLaunch({ url: '/pages/login/login' });
        return;
    }
    if (!userStore.isSupplier) {
        uni.showToast({ title: '仅供应商可访问', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1200);
        return;
    }
    void fetchList(true);
});
</script>

<template>
  <view class="page client-theme client-subpage">
    <view v-if="loading" class="state">
      <ClientSkeleton variant="list" :rows="3" />
    </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 sortedList" :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 sortedList" :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>

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

<style lang="scss" scoped>
/* 供应商主题色（与 sanqiang-supplier-ui-demo 一致） */
$supplier: #0a9f6d;

.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;
  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);
  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>