MoeNovaClient/pages/crowdFunding/receivingAddress.vue

<template>
  <view class="address-list-page">
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <text class="fa fa-angle-left"></text>
      </view>
      <view class="navbar-center"> 收货地址 </view>
      <view class="navbar-right">
        <view class="add-btn blick-btn-animation" @click="goAdd">新增</view>
      </view>
    </view>

    <view class="address-card" v-for="item in addressList" :key="item.id">
      <view class="left">
        <view class="row">
        <text class="name">{{ item.name }}</text>
        <text class="mobile">{{ item.mobile }}</text>
        <text class="default" v-if="item.isDefault">默认</text>
        <!-- <image class="edit" src="@/static/icon/edit.png" @click="goEdit(item)" /> -->
      </view>
      <view class="address two-omit">{{ item.fullAddress }}</view>
      </view>
      <view class="right">
        <image src="@/static/icon/sy_icon_fabiao.png" @click="goEdit(item)" />
      </view>
    </view>
  </view>	
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          id: 1,
          name: "戴驿宸",
          mobile: "17788196551",
          isDefault: true,
          fullAddress: "浙江省 杭州市 滨江区 西兴街道 启悦府",
        },
        {
          id: 2,
          name: "戴驿宸",
          mobile: "17788196551",
          isDefault: false,
          fullAddress: "浙江省 杭州市 滨江区 西兴街道 启悦府",
        },
        {
          id: 3,
          name: "戴驿宸",
          mobile: "17788196551",
          isDefault: false,
          fullAddress: "浙江省 杭州市 滨江区 西兴街道 启悦府",
        },
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goAdd() {
      uni.navigateTo({ url: "/pages/crowdFunding/addressEdit" });
    },
    goEdit(item) {
      uni.navigateTo({ url: "/pages/crowdFunding/addressEdit?id=" + item.id });
    },
  },
};
</script>

<style lang="scss">
.address-list-page {
  min-height: 100vh;
  background: #f6faf6;

  /* 自定义导航栏样式 */
  .custom-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(90rpx + var(--status-bar-height));
    padding: 0 20rpx;
    padding-top: var(--status-bar-height);
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;

    .navbar-left {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .fa-angle-left {
        font-size: 48rpx;
        color: #333;
      }
    }

    .navbar-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-weight: bold;
      color: #1f1f1f;
    }

    .navbar-right {
      .add-btn {
        background: #1f1f1f;
        color: #acf934;
        border-radius: 32rpx;
        padding: 6rpx 32rpx; 
        display: flex;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }

  .address-card {
    background: #fff;
    border-radius: 18rpx;
    margin: 32rpx;
    padding: 32rpx;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
        height: 100%;
        .row {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      .name {
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 18rpx;
      }

      .mobile {
        font-size: 32rpx;
        margin-right: 18rpx;
      }

      .default {
        font-size: 22rpx;
        color: #fff;
        background: #1f1f1f;
        border-radius: 8rpx;
        padding: 2rpx 12rpx;
        margin-right: 12rpx;
      }

      .edit {
        width: 32rpx;
        height: 32rpx;
        margin-left: auto;
      }
    }

    .address {
      font-size: 26rpx;
      color: #666;
    }
    }
    .right{
      width: 100rpx;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>