web-app-v1/pages/payment/information.vue

<template>
	<view style="padding-top: 30rpx;">
		<view class="paybox">
			<view class="paybox_title">
				<image src="../../static/team/user.png" mode="widthFix" style="width: 52rpx;margin-right: 20rpx;" />
				确认收货人信息
			</view>
			<view class="paybox-top">
				<view class="title">
					<text>收货人</text>
					<text class="star">*</text>
				</view>
				<input v-model="address.username" type="text" class="paybox-input" placeholder-class="input_placeholder" placeholder="请填写真实姓名" />
			</view>
			<view class="paybox-top">
				<view class="title">
					<text>手机号</text>
					<text class="star">*</text>
				</view>
				<input v-model="address.mobile" class="paybox-input" placeholder-class="input_placeholder" placeholder="请填写手机号码" maxlength="11" />
			</view>
			<view class="paybox-top">
				<view class="title">
					<text>省市区</text>
					<text class="star">*</text>
				</view>
				<view class="picker flexB" @tap="choosePicker">
					<view :style="{ color: local ? '#333' : '#cbcbcb' }">{{ local ? local : '请选择所在地区' }}</view>
					<text class="iconfont iconzhcc_xiangxiajiantou"></text>
				</view>
			</view>
			<view class="paybox-bottom" style="border: none;">
				<view class="title">
					<text>详细地址</text>
					<text class="star">*</text>
				</view>
				<view class="textpaybox">
					<textarea v-model="address.address" type="text" placeholder="请填写详细地址" class="paybox-input" placeholder-class="input_placeholder" />
				</view>
			</view>
		</view>
		<view v-if="title" class="toptitle">
			若信息不准确，请手动修改。
		</view>
		<view class="bottom"><view v-throttle="2000" class="bottom-btn" @click="save">保存地址</view></view>
		<w-picker ref="Selector" mode="region" :defaultVal="pickerDefaultVal" themeColor="#F76454" @confirm="onConfirm" />
	</view>
</template>

<script>
	import WPicker from '@/components/w-picker/w-picker.vue';
	import cityData from '@/components/citypicker/city-data/city.js';
	import areaData from '@/components/citypicker/city-data/area.js';
	import cityPicker from '@/components/citypicker/city-picker.vue';
	import provinceData from '@/components/citypicker/city-data/province.js';
	import{ 
		GetEnrollUserAddress,
		UpdateAddAddress
	} from '@/apis/szy.js';
	export default {
		components: { WPicker, cityPicker },
		data() {
			return {
				local: '',
				title: false,
				address: {
					username: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					address: '',
				},
				pickerDefaultVal: ['河南省', '郑州市', '金水区']
			}
		},
		onLoad() {
			this.getAddress()
		},
		methods: {
			// 获取地址信息
			getAddress() {
				GetEnrollUserAddress().then(res => {
					if (res.code === 200) {
						if (res.data.province) {
							this.address = res.data
							const data = res.data
							this.local =`${data.province}-${data.city}-${data.area}`
							this.pickerDefaultVal = [ data.province, data.city, data.area ]
							this.title = true
							console.log(data)
						} else {
							this.title = false
						}
					} else {
						uni.showModal({
							content: res.message || '获取失败',
							showCancel: false
						})
					}
				})
			},
			choosePicker() {
				// 显示地址选择器
				this.$refs.Selector.show();
			},
			onConfirm(e) {
				// 选择地址选择器
				this.local = `${e.checkArr[0]}-${e.checkArr[1]}-${e.checkArr[2]}`;
				this.address.province = e.checkArr[0];
				this.address.city = e.checkArr[1];
				this.address.area = e.checkArr[2];
			},
			save() {
				console.log(this.address)
				// 保存/修改地址
				if (!this.address.username.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
					// 校验姓名
					uni.toast('真实姓名不符合要求');
					return;
				}
				if (!this.address.mobile.match(/^1\d{10}$/)) {
					// 校验手机号
					uni.toast('手机号码不符合要求');
					return;
				}
				if (!this.local.trim().length) {
					// 校验是否选择地区
					uni.toast('请选择所在地区');
					return;
				}
				if (!this.address.address.trim().length) {
					// 校验是否填写详细地址
					uni.toast('详细地址不能为空');
					return;
				}
				const address = {
					username: this.address.username,
					mobile: this.address.mobile,
					province: this.address.province,
					city: this.address.city,
					area: this.address.area,
					address: this.address.address,
				};
				uni.showLoading({ mask: true });
				UpdateAddAddress(address).then(res => {
					if (res.code === 200) {
						uni.toast('保存成功')
						uni.navigateBack()
					} else {
						uni.showModal({
							content: res.message || '提交失败',
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.toptitle {
	font-size: 32rpx;
	font-weight: bold;
	color: #FF0000;
	margin-top: 54rpx;
	text-align: center;
}
.paybox {
	margin: 0 24rpx;
	background-color: #fff;
	border-radius: 24rpx;
	&_title {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		padding: 32rpx 0 0 24rpx;
	}
	&-input {
		font-size: 30rpx;
		min-height: 126rpx;
		width: 75%;
		margin-left: 20rpx;
	}
	&-top {
		min-height: 128rpx;
		margin: 0 30rpx;
		paybox-sizing: border-paybox;
		border-bottom: 2rpx solid #eeeeee;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			.star {
				color: $base-color;
				margin-left: 10rpx;
				font-size: 40rpx;
			}
		}
		.picker {
			width: 75%;
			min-height: 128rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			.iconfont {
				color: #cbcbcb;
			}
		}
		.input_placeholder {
			font-size: 30rpx;
			color: #cbcbcb;
		}
	}
	&-bottom {
		height: 166rpx;
		padding: 20rpx 30rpx;
		paybox-sizing: border-paybox;
		border-bottom: 2rpx solid #eeeeee;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			.star {
				color: $base-color;
				margin-left: 10rpx;
				font-size: 40rpx;
			}
		}
		.input_placeholder {
			font-size: 30rpx;
			color: #cbcbcb;
		}
		.textpaybox {
			height: 166rpx;
			.paybox-input {
				width: 440rpx;
				height: 120rpx;
				font-size: 30rpx;
			}
		}
	}
}
.bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	padding: 6rpx 30rpx;
	background-color: #fff;
	border-top: 1px solid #eeeeee;
	&-btn {
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 88rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #F30000 0%, #FE4815 100%);
		opacity: 1;
		border-radius: 44px;
	}
}
</style>