shouhuo.vue

<template>
  <div class="container">
    <template v-if="addresses.length">
      <van-cell v-for="(address, index) in addresses" :key="index" isLink @click="navigateToAddress(address.id)">
        <template #title>
          <div class="cell-title">
            <div>{{ address.receiver }}</div>
            <div class="cell-mobile">{{ address.mobile }}</div>
            <van-tag v-if="address.amount == 1" size="mini" type="warning">默认收货地址</van-tag>
          </div>
        </template>
        <template #label>
          <text class="cell-address">{{ address.address }}</text>
        </template>
      </van-cell>
    </template>
    <van-empty v-else description="暂未填写过收货地址" />
    <div class="btn11">
      <var-button @click="goToAddAddress" block size="large" type="primary">+ 新增收货地址</var-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request'; // 假设您有一个请求工具
import { useRouter } from 'vue-router';
const addresses = ref([]);
const router = useRouter();

const getAddress = async () => {
  try {
    const res = await request.get("/system/address/list", {});
    addresses.value = res?.rows || [];
  } catch (error) {
    console.error('获取地址失败:', error);
  }
};

const goToAddAddress = () => {
  router.push('/user/addaddRess');
};

const navigateToAddress = (id) => {
  router.push(`/user/addaddRess?id=${id}`);
};

getAddress();
</script>

<style scoped lang="scss">
.container {
  padding: 5px;
  background-color: #f5f5f5;
  min-height: 100vh;

  .btn11 {
    width: 100%;
    margin-top: 50px;
  }

  .cell-title {
    display: flex;
    align-items: center;
  }

  .cell-mobile {
    margin-left: 10px;
  }

  .cell-address {
    font-size: 14px;
    color: #999;
  }
}
</style>