1.效果

2.子组件在components里面创建组件AddreessWindow

<template>
	<view style="position: relative;z-index: 999999 !important;">
		<view class="address-window" :class="value === true ? 'on' : ''">
			<view class="title">
				<view>选择地址
				</view>
				<view style="position: absolute;right: 20rpx;top: 39rpx;">
					<u-icon name="close" color="#666" size="20" @click="closeAddress"></u-icon>
				</view>
			</view>
			<view class="list" v-if="addressList.length">
				<view class="item acea-row row-between-wrapper" :class="item.id === checked ? 'font-color-green' : ''"
					v-for="(item, addressIndex) in addressList" @click="tapAddress(addressIndex)" :key="addressIndex">
					<u-icon name="map" :color="item.id === checked?'#99CC00':'#000'" size="20"></u-icon>
					<!-- <text class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-green' : ''"></text> -->
					<view class="addressTxt">
						<view class="name" :class="item.id === checked ? 'font-color-green' : ''">
							{{ 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="item.id === checked ? 'font-color-green' : ''"></text> -->
					<u-icon name="checkmark" v-if="item.id === checked" color="#99CC00" size="20"></u-icon>
				</view>
			</view>
			<view class="pictrue" v-if="addressList.length < 1">
				<!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/noAddress.png`" class="image" /> -->
				<u-empty textSize='36rpx' text="空空如也" textColor='#A8D61E' width='512' height='251' mode="list"
					:icon="`${imgUrl}empty.png`"></u-empty>
			</view>
			<view class="addressBnt bg-color-red"
				style="background-color:#99CC00 !important;color: #FFFFFF !important; font-size: 31rpx !important;"
				@click="goAddressPages">新加地址</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="value === false" @click="closeAddress"></view>
	</view>
</template>
<script>
	// import { getAddressList } from '@/api/dsIndexApi.js'

	export default {
		name: 'AddressWindow',
		props: {
			value: Boolean,
			checked: Number,
			timer: Number
		},
		data: function() {
			return {
				imgUrl: '',
				addressList: [],
				current: 0,
				cartId: 0,
				pinkId: 0,
				couponId: 0,
			}
		},
		mounted: function() {
			this.imgUrl = this.$VUE_APP_IMG_URL;
		},
		created() {
			// console.
		},
		methods: {
			getAddressList: function() {
				let that = this;
				that.addressList = [{
						id: 1,
						realName: '哈哈嗝',
						phone: '14708291001',
						province: "四川省",
						city: "成都市",
						district: "武侯区",
						detail: "阳光大道",

					},
					{
						id: 2,
						realName: '张三',
						phone: '14708291000',
						province: "四川省",
						city: "成都市",
						district: "武侯区",
						detail: "大悦城",

					}
				]
				//   getAddressList().then(res => {
				// // console.log('获取地址额列表',res)
				//     that.addressList = res.data;
				//   })
			},

			closeAddress() {
				this.$emit('input', false)
			},
			goAddressPages: function() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
				this.$emit('redirect')
			},
			tapAddress: function(index) {
				this.$emit('checked', this.addressList[index])
				this.$emit('input', false)
			},
		},
		watch: {
			timer(e, v) {
				console.log(e, v, '变换了')
				this.getAddressList()
			},
		},
	}
</script>
<style lang="scss">
	.font-color-green {
		color: #99CC00 !important;
	}

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: 0px;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9995;
		transition: .3s;
	}

	/*地址弹窗*/
	.address-window {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10000;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	}

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

	.address-window .title {
		font-size: 0.32 * 100rpx;
		font-weight: bold;
		text-align: center;
		height: 1.23 * 100rpx;
		line-height: 1.23 * 100rpx;
		position: relative;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 0.3 * 100rpx;
		color: #8a8a8a;
		font-size: 0.35 * 100rpx;
	}

	.address-window .list {
		max-height: 6 * 100rpx;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.address-window .list .item {
		margin-left: 0.3 * 100rpx;
		padding-right: 0.3 * 100rpx;
		border-bottom: 1px solid #eee;
		height: 1.29 * 100rpx;
		font-size: 0.25 * 100rpx;
		color: #333;
		display: flex;
		align-items: center;
	}

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

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

	.address-window .list .item .addressTxt {
		width: 5.6 * 100rpx;
	}

	.address-window .list .item .addressTxt .name {
		font-size: 0.28 * 100rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 0.04 * 100rpx;
	}

	.address-window .list .item .addressTxt .name .phone {
		margin-left: 0.18 * 100rpx;
	}

	.address-window .addressBnt {
		font-size: 0.3 * 100rpx;
		font-weight: bold;
		color: #fff;
		width: 6.9 * 100rpx;
		height: 0.86 * 100rpx;
		border-radius: 0.43 * 100rpx;
		text-align: center;
		line-height: 0.86 * 100rpx;
		margin: 0.85 * 100rpx auto;
	}

	.address-window .pictrue {
		width: 4.14 * 100rpx;
		height: 3.36 * 100rpx;
		margin: 0.8 * 100rpx auto;
	}

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

3.父组件

<template>
	<view class="container">
	<view @click="skipAddress">选择地址</view>
		<!-- 地址弹框 -->
		<AddressWindow :timer="timer" @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
   </view>
   </template>
   <script>
	export default {
		data() {
		return {
				addressInfo: {},
				addressLoaded: false,
				timer: '',
				showAddress: false,
				}
		},
		methods:{
		//选地址
			skipAddress() {
					this.timer = new Date().getTime();
					this.showAddress = true;
					if (!this.addressLoaded) {
						this.addressLoaded = true
						this.$refs.mychild.getAddressList()
					}
			},
			// 控制地址弹框
			addressRedirect() {
				// this.addressLoaded = false
				this.showAddress = false;
			},
			// 地址选择
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo
				// this.addressInfo.id = addressInfo.id;
				console.log('地址栏11111', this.addressInfo)
				//计算订单金额
				// this.orderComputedAPi(this.addressInfo.id)
		    	},
			}
		}
		</script>