wxapp_shuibei/components/addressWindow/index.vue

<template>
	<view>
		<view class="address-window" :class="address.address == true ? 'on' : ''">
			<view class='title'>选择地址<text class='iconfont icon-guanbi' @tap='close'></text></view>
			<view class='list'>
				<view class='item acea-row row-between-wrapper' :class='active == index ? "font-color" : ""'
					v-for="(item, index) in addressList" @tap='tapAddress(index, item.id)' :key='index'>
					<text class='iconfont icon-ditu' :class='active == index ? "font-color" : ""'></text>
					<view class='address'>
						<view class='name' :class='active == index ? "font-color" : ""'>{{ item.realName }}<text class='phone'>{{
							item.phone }}</text></view>
						<view class='line1'>{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
					</view>
					<text class='iconfont icon-complete' :class='active == index ? "font-color" : ""'></text>
				</view>
			</view>
			<!-- 无地址 -->
			<view class='pictrue' v-if="!is_loading && !addressList.length">
				<image src='/static/images/noAddress.png'></image>
			</view>
			<view class='addressBnt bg-color' @tap='goAddressPages'>添加地址</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-color: #fff;
	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 {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	height: 123rpx;
	line-height: 123rpx;
	position: relative;
}

.address-window .title .iconfont {
	position: absolute;
	right: 30rpx;
	color: #8a8a8a;
	font-size: 35rpx;
}

.address-window .list .item {
	margin-left: 30rpx;
	padding-right: 30rpx;
	border-bottom: 1px solid #eee;
	height: 129rpx;
	font-size: 25rpx;
	color: #333;
}

.address-window .list .item .iconfont {
	font-size: 37rpx;
	color: #2c2c2c;
}

.address-window .list .item .iconfont.icon-complete {
	font-size: 30rpx;
	color: #fff;
}

.address-window .list .item .address {
	width: 560rpx;
}

.address-window .list .item .address .name {
	font-size: 28rpx;
	font-weight: bold;
	color: #282828;
	margin-bottom: 4rpx;
}

.address-window .list .item .address .name .phone {
	margin-left: 18rpx;
}

.address-window .addressBnt {
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	width: 690rpx;
	height: 86rpx;
	border-radius: 43rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 85rpx auto;
}

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

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