wxapp_shuibei/components/addressWindow/index.vue

<template>
	<view>
		<view class="address-window" :class="address.address == true ? 'on' : ''">
			<view class='title'>
				<view class=""></view>
				<view class="">选择地址</view>
				<image @tap='close' src="/static/images/shop/close@2x.png" mode=""></image>
			</view>
			
			<view class='list'>
				<view class='item' :class='active == index ? "active" : ""'
					v-for="(item, index) in addressList" @tap='tapAddress(index, item.id)' :key='index'>
					<view class='address'>
						<view class='address-t'><text>{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</text><view v-if="item.isDefault" class="default">默认</view></view>
						<view class='name'>{{ item.realName }}<text class='phone'>{{
							item.phone }}</text></view>
						
					</view>
					
				</view>
			</view>
			<!-- 无地址 -->
			<view class='pictrue' v-if="!is_loading && !addressList.length">
				<image src='/static/images/noAddress.png'></image>
			</view>
			<view class="addressBnt-btn">
				<view class='addressBnt' @tap='goAddressPages'>添加地址</view>
			</view>
			
		</view>
		<view class='mask' catchtouchmove="true" :hidden='address.address == false' @tap='close'></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getAddressList } from '@/api/user.js';

const props = defineProps({
  pagesUrl: {
    type: String,
    default: '',
  },
  address: {
    type: Object,
    default: () => ({
      address: true,
      addressId: 0,
    }),
  },
  isLog: {
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(['OnChangeAddress', 'changeClose', 'changeTextareaStatus', 'OnDefaultAddress']);

const active = ref(0);
const is_loading = ref(true);
const addressList = ref([]);

// 对外暴露获取地址的方法
defineExpose({
	fetchAddressList
});

function tapAddress(e, addressid) {
  active.value = e;
  let a = {};
  for (let i = 0, leng = addressList.value.length; i < leng; i++) {
    if (addressList.value[i].id == addressid) {
      a = addressList.value[i];
    }
  }
  emit('OnChangeAddress', a);
}

function close() {
  emit('changeClose');
  emit('changeTextareaStatus');
}

function goAddressPages() {
  emit('changeClose');
  emit('changeTextareaStatus');
  uni.navigateTo({
    url: props.pagesUrl
  });
}

function fetchAddressList() {
  getAddressList({
    page: 1,
    limit: 5
  }).then(res => {
    let list = res.data.list;
    addressList.value = list;
    is_loading.value = false;
    let defaultAddress = {};
    // 处理默认选中项
    if (!props.address.addressId) return;
    for (let i = 0, leng = list.length; i < leng; i++) {
      if (list[i].id == props.address.addressId) {
        active.value = i;
        defaultAddress = list[i];
      }
    }
    emit('OnDefaultAddress', defaultAddress);
  }).catch((error) => {
		console.error('fetchAddressList', error)
	})
}

// 监听 address.address 打开时刷新列表
// watch(() => props.address.address, (val) => {
//   if (val) {
//     fetchAddressListFn();
//   }
// }, { immediate: true });

</script>

<style scoped lang="scss">
.address-window {
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 0 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 101;
	transform: translate3d(0, 100%, 0);
	transition: all .3s cubic-bezier(.25, .5, .5, .9);
}

.address-window.on {
	transform: translate3d(0, 0, 0);
}

.address-window .title {
	color: #333333;
	font-size: 36rpx;
	font-weight: bold;
	height: 100rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	image,view:first-child{
		width: 32rpx;
		height: 32rpx;
	}
}

.address-window .list {
	padding: 0 32rpx;
}
.address-window .list .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F9F7F0;
	border-radius: 16rpx;
	border-bottom: 2px solid transparent;
	padding: 16rpx;
	margin-bottom: 24rpx;
	&:last-child {
		margin-bottom: 0;
	}
}
.address-window .list .active {
	background: rgba(248,192,8,0.1);
	border: 2rpx solid #F8C008;
}
.address-window .list .item .address {
	flex: 1;
	margin-right: 16rpx;
}
.default {
	width: 64rpx;
	height: 40rpx;
	color: #333333;
	font-size: 24rpx;
	background: #F8C008;
	border-radius: 8rpx;
	text-align: center;
	line-height: 40rpx;
	flex-shrink: 0;
}

.address-window .list .item .address .name {
	font-size: 28rpx;
	
	color: #666666;
	margin-top: 16rpx;
}

.address-window .list .item .address .name .phone {
	margin-left: 18rpx;
}
.address-t {
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: nowrap;
}
.addressBnt-btn {
	padding: 22rpx 32rpx;
}

.address-window .addressBnt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	
	line-height: 88rpx;
	
	background: #F8C008;
	border-radius: 16rpx;
}

.address-window .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 0 auto;
}

.address-window .pictrue image {
	width: 100%;
	height: 100%;
}
</style>