yanzong_qianduan/pages/news/park/addressEdit.vue

<template>
	<view class="addressList">
		<view class="addressList-hd">
			<view class="item">
				<view class="a">收货人</view>
				<view class="b">
					<input v-model="form.name" type="text" placeholder="请输入收货人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="a">手机号</view>
				<view class="b">
					<input v-model="form.phone" type="number" placeholder="请输入收货人手机号" />
				</view>
			</view>
			<view class="item">
				<view class="a">所属城市</view>
				<view class="b">
					<picker mode="region">
						<view class="select">请选择省市区<u-icon name="arrow-right"></u-icon></view>
					</picker>
				</view>
			</view>
			<view class="items">
				<view class="a">详细地址</view>
				<view class="b">
					<input v-model="form.detail" type="text" placeholder="请输入详细地址" />
				</view>
			</view>
		</view>
		<view class="addressList-bd">
			<view class="a">设为默认收货地址</view>
			<view class="b">
				<u-switch v-model="checked" active-color="#55BD6A" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view class="addressList-fd">
			<view class="btn" @click="saveAddress">保存收货地址</view>
		</view>
	</view>
</template>

<script>
	import * as AddressApi from '@/api/address'
	export default {
		data() {
			return {
				checked: false,
				value: "",
				form: {
					content: '',
					name: '',
					phone: '',
					region: [],
					detail: ''
				},
			};
		},
		methods: {
			saveAddress() {
				// 保存收货地址
				const that = this
				AddressApi.add(that.form)
					.then(result => {
						that.$toast(result.message)
						uni.navigateBack()
					})
					.finally(() => {

					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addressList {
		padding: 0 0 20rpx;
		overflow: hidden;

		&-hd {
			background-color: #fff;
			padding: 0 25rpx 25rpx;
			overflow: hidden;

			.item {
				padding: 20rpx 0;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;

				.b {
					font-size: 28rpx;
					color: #9D9D9D;
					flex: 1;
					text-align: right;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
					}

					.select {
						color: #C7C7C7;

						&-on {
							color: #212121;
						}
					}
				}
			}

			.items {
				padding: 20rpx 0;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #212121;

				.b {
					font-size: 28rpx;
					flex: 1;
					text-align: left;

					input {
						width: 100%;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #212121;
						margin-top: 20rpx;
					}
				}
			}

		}

		&-bd {
			background-color: #fff;
			padding: 25rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&-fd {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fafafa;
			box-sizing: border-box;

			.btn {
				width: 100%;
				line-height: 96rpx;
				background: #F34A40;
				border-radius: 8rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>