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" @click="selectAddress(item)" :style="isSelectAddress && selectedAddress && selectedAddress.id === item.id ? 'border-color: #000000;' : ''">
      <view class="left">
        <view class="row">
        <text class="name">{{ item.realname }}</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.area }}</view>
      </view>
      <view class="right" @click.stop="goEdit(item)">
        <image src="@/static/icon/sy_icon_fabiao.png" />
      </view>
    </view>
  </view>	
</template>

<script>
export default {
  data() {
    return {
      addressList: [ ],
      isSelectAddress: false,
      selectedAddress: null,
      selectedSpec:null,
      detail:null
    };
  },
  onLoad(options) { 
 
    if (options.isSelectAddress == true || options.isSelectAddress == 'true') {
      this.isSelectAddress = true;
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('acceptDataFromOpener', (data) => {
        this.selectedSpec = data.selectedSpec;
        this.detail = data.detail;
        console.log('接收到的数据:', this.selectedSpec, this.detail);
      });
    } 
    
  },
  onShow() {
    this.getAddressList();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goAdd() {
      uni.navigateTo({ url: "/pages/crowdFunding/addressEdit" });
    },
    goEdit(item) {
      uni.navigateTo({ url: "/pages/crowdFunding/addressEdit?id=" + item.id });
    },
    selectAddress(item) {
      if (this.isSelectAddress) {
        this.selectedAddress = item; 
        uni.navigateTo({
				url: '/pages/crowdFunding/orderConfirm',
				success: function(res) {
					// 通过 eventChannel 向被打开页面传送数据
					res.eventChannel.emit('acceptDataFromOpener', { selectedSpec: this.selectedSpec, detail: this.detail });

          res.eventChannel.emit('acceptAddress', item);
				}.bind(this)
			});
      }
    },
    getAddressList() {
      uni.request({
				url: this.$apiHost + '/Address/getlist',
				method: 'GET',
				data: {
					id: this.projectId,
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey

				},
				success: (res) => {
					if (res.data ) {
            this.addressList = res.data.list;
            console.log(this.addressList,"地址列表");
						// 可根据接口返回字段设置isFavorite等
					}
				}
			});
    },
  },
};
</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: 16rpx 20rpx;
    padding: 32rpx;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2rpx solid transparent;
    .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: 90rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>