wx-fensisiyu/pageA/address.vue

<template>
	<view class="page">
		<view class="" v-if="false">
			<view class="top">
				<view class="item">
					<u-input :clearable='false' v-model="value" :type="type" height='110' placeholder='收货人' />
				</view>
				<view class="item">
					<u-input :clearable='false' v-model="value" :type="type" height='110' placeholder='手机号码' />
				</view>
				<view class="item u-flex u-row-between">
					<u-input :clearable='false' v-model="value" :type="type" height='110' placeholder='所在地区' />
					<u-icon name="arrow-right" color="#000" size="26"></u-icon>
				</view>
				<view class="">
					<u-input :clearable='false' v-model="value" :type="type1" placeholder='详细地址:道路,门牌号,小区,楼栋号,单元室' />
				</view>
			</view>
			<view class="moren u-flex u-row-between">
				<view class="mo">设为默认</view>
				<u-switch v-model="checked" inactive-color="#eee"></u-switch>
			</view>
			<view class="button">
				保存
			</view>
		</view>
		<view class="address">
			<view class="">
				<text class='font'>收货人:</text>
				<text class='font'>铃铃铃</text>
				<text class='font' style="margin-left: 26rpx;">189456478914</text>
			</view>
			<view class="add">
				山东省临沂市兰山区IEC国际企业中心
			</view>
			<u-radio-group v-model="value" @change="radioGroupChange">
				<view class="u-flex u-row-between mor">
					<view class="u-flex">
						<u-radio @change="radioChange">
						</u-radio>
						<text class="address_font">默认地址</text>
					</view>
					<view class="u-flex">
						<view class="">
							<u-icon name="order" color="#BBBBBB" size="28"></u-icon>
							<text>编辑</text>
						</view>
						<view class="" style="margin-left: 32rpx;">
							<u-icon name="trash" color="#BBBBBB" size="28"></u-icon>
							<text>删除</text>
						</view>
					</view>
				</view>
			</u-radio-group>
			<view class="button1">
				添加地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'text',
				type1: 'textarea',
				checked: 'true'
			};
		}
	}
</script>

<style lang="scss">
	.address_font {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 49rpx;
		color: #8FD3F3;
	}

	.address {
		padding: 30rpx 24rpx 26rpx;
		width: 750rpx;
		height: 268rpx;
		background: rgba(255, 255, 255, 1);

		.font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #323332;
		}

		.add {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 49rpx;
			color: #BBBBBB;
			margin-top: 20rpx;
		}

		.mor {
			border-top: 1px solid #C7C7C7;
			margin-top: 38rpx;
			padding-top: 30rpx;
		}
	}

	.mo {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 48rpx;
		color: #212121;
	}

	.button {
		width: 702rpx;
		height: 90rpx;
		background: rgba(228, 228, 228, 1);
		border-radius: 46rpx;
		position: fixed;
		left: 22rpx;
		bottom: 34rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 90rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.button1 {
		width: 702rpx;
		height: 90rpx;
		background: rgba(143, 211, 243, 1);
		border-radius: 46rpx;
		position: fixed;
		left: 22rpx;
		bottom: 34rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 90rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.item {
		width: 702rpx;
		height: 110rpx;
		// line-height: 110rpx;
		border-bottom: 1px solid #C7C7C7;
	}

	.page {
		width: 750rpx;
		height: 1334rpx;
		background: rgba(247, 246, 251, 1);
		padding: 30rpx 0 34rpx 0;
	}

	.top {
		width: 750rpx;
		height: 484rpx;
		background: rgba(255, 255, 255, 1);
		padding: 0 22rpx;
	}

	.moren {
		width: 748rpx;
		height: 112rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 30rpx;
		padding: 40rpx 64rpx 42rpx 22rpx;
	}
</style>