addArddess.vue 2.76 KB
<template>
	<view class="wrap">
		<view class="content">
			<view class="item,name" >
				<text class="itemText">姓名</text>
				<input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/>
			</view>
			<view class="item,phone">
				<text class="itemText">电话</text>
				<input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/>
			</view>
			<view class="item,area" >
				<text class="itemText">地区</text>
				<view class="btn" v-if="pickerText===''"  @tap="openAddres">选择省/市/区</view>
				<view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
				<simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
			</view>
			<view class="item,address" >
				<text class="itemText">详细地址</text>
				<input placeholder="街道、小区门牌等详细地址"/>
			</view>
			<view class="item,check" >
				<text class="itemText">设为默认地址</text>
				<switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" />
			</view>
			<input />
		</view>
		<view class="button">保存并使用</view>
	</view>
</template>

<script>
	import SimpleAddress from '@/components/Simple-address/simple-address.vue';
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				isDefalutAddress:true
				
			};
		},
		components: {
			SimpleAddress
		},
		methods: {
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.SimpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = e.label;
			},
			changeDefalutAddress(e){
				this.isDefalutAddress = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		height: 100vh;
		background-color:#F2F2F2 ;
		font-family: PingFangSC-Regular;
		letter-spacing: -0.23px;
		padding-top: 19rpx;
	}
	.content{
		background-color: #FFFFFF;
		border-radius: 8px;
		border-radius: 8px;
		padding: 40rpx 56rpx;
		margin-left: 40rpx;
		width: 670rpx;
		box-sizing: border-box;
		.item{
			display: flex;
			justify-content: flex-start;
			font-size: 14px;
			align-items: center;
			height: 112rpx;
			border-bottom: 1rpx solid #E9E9E9;
			.itemText{
				width: 162rpx;
				font-family: PingFangSC-Regular;
				letter-spacing: -0.26px;
			}
			.btn{
				color: #333333 !important;
			}
		}
		.check{
			justify-content: space-between;
		}
	}
	.button{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 112rpx;
		width: 100%;
		background: #FF6B4A;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: -0.3px;
	}
</style>