yixiang/pageB/components/addressbox.vue

<template>
	<view class="popu">
		<view class="top hflex acenter jbetween">
			<view></view>
			<view class="title">选择收货地址</view>
			<image src="../static/close.png" mode="aspectFill" @click="close"></image>
		</view>
		<view class="list vflex">
			<u-radio-group  placement="column" @change="selectaddress">
				<view class="list-item hflex acenter jbetween" v-for="(item,index) in list" :key="index" @click="select(index)">
					<view class="hflex acenter jcenter">
						<u-radio shape="circle" :name="index" activeColor="#00B0B0"></u-radio>
						<view class="left vflex">
							<view class="address2">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
							<view class="hflex acenter item-bottom">
								<text>{{item.name}}</text>
								<text class="mobile">{{item.mobile}}</text>
								<view class="default" v-if="item.is_default == 1">默认</view>
							</view> 
						</view>
					</view>
					<image src="../static/edit.png" mode="aspectFill" @click="edit(item)"></image>
				</view>	
			</u-radio-group>
		</view>	
		<view class="btns" @click="toadd">
			新增收货地址
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			}
		},
		data() {
			return {
			}
		},
		onLoad() {
			// this.getlist()
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			selectaddress(e) {
				this.$emit('select',e)
			},
			select(index) {
				this.$emit('select',index)
			},
			toadd() {
				uni.navigateTo({
					url: '/pageC/address-add',
				})
				this.close()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.popu {
		max-height: 70vh;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 28rpx 26rpx 0rpx 0rpx;
		padding: 36rpx 28rpx;
		position: relative;
		.btns {
			position: fixed;
			bottom: 44rpx;
			left: 28rpx;
			width: 694rpx;
			height: 84rpx;
			background: #00B0B0;
			border-radius: 42rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 84rpx;
		}
		.list {
			padding: 0 0 144rpx;
			.list-item {
				padding: 32rpx 0 28rpx;
				border-bottom: 1px solid #F1F7FE;
				.left {
					max-width: 578rpx;
					padding: 0 52rpx 0 20rpx;
					.address2 {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #222222;
					}
					.item-bottom {
						padding: 14rpx 0 0;
						text:first-child {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.mobile {
							font-size: 24rpx;
							font-family: JDZhengHT, JDZhengHT;
							font-weight: 300;
							color: #666666;
							padding: 0 16rpx 0 28rpx
						}
						.default {
							background: #57C3C2;
							border-radius: 4rpx;
							font-size: 18rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 2rpx 6rpx;
						}
					}
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.top {
			padding: 0 0 28rpx;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>