CBB3/pages/user/address/add/add.nvue

<template>
	<view>
		<view class="box">
			<view class="add-line">
				<view class="al-left">
					<text class="text">收货人</text>
				</view>
				<view class="al-right">
					<input class="input" placeholder="收货人" placeholder-class="p-size" name="name"
						v-model="data.name" />
				</view>
			</view>
			<view class="add-line">
				<view class="al-left">
					<text class="text">手机号码</text>
				</view>
				<view class="al-right">
					<input class="input" placeholder="手机号码" placeholder-class="p-size" name="tel" type="number"
						v-model="data.tel" />
				</view>
			</view>
			<view class="add-line">
				<view class="al-left">
					<text class="text">所在地区</text>
				</view>
				<view class="al-right" @tap="showMulLinkageThreePicker">
					<text class="addresstext" :style="'color:' + (data.region ? '#333' : '#585858') ">
						{{data.region ? data.region : "请选择"}}
					</text>
					<input type="text" name="region" v-show="false" :value="data.region" />
					<view class="alr-jiantou">
						<image class="image" src="/static/img/ic_next.png"></image>
					</view>
				</view>
			</view>
			<view class="add-line">
				<view class="al-left">
					<text  class="text">详细地址</text>
				</view>
				<view class="al-right">
					<textarea class="textarea" placeholder-class="p-size" name="address"
						placeholder="详细省份，城市，道路，门牌号，小区，楼栋号，单元室等（必填）" v-model="data.address" />
				</view>
			</view>
			<button class="nt add-btn" formType="submit">
				<text class="add-btn-text">保存</text>
			</button>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.nvue';
	import graceChecker from "@/library/utils/graceChecker.js";
	import Request from '@/library/Request';
	import utils from "@/library/utils/Comm.js"
	export default {
		components: {
			'mpvue-city-picker': mpvueCityPicker
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				data: {
					name: "",
					tel: "",
					address: "",
					region: "",
					City: 0
				}
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			if (this.id > 0) {
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
				this.getData();
			}

		},
		methods: {
			getData() {
				Request
					.post("userAddressInfo", {
						id: this.id
					})
					.then((res) => {
						if (res.code == 200) {
							this.data = res.data;
						} else {
							utils.Tip(res.msg);
						}
					}).catch(() => {
						utils.Tip("网络错误，请稍后尝试");
					})
			},
			//表单提交
			formSubmit(e) {
				var that = this,
					formData = {
						name:that.data.name,
						tel:that.data.tel,
						address:that.data.address,
						region:that.data.region,
						City:that.data.City,
					};
				//定义表单规则
				var rule = [{
						name: "name",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入收货人姓名"
					},
					{
						name: "tel",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的联系电话"
					},
					{
						name: "region",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择所在地区"
					},
					{
						name: "address",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入详细地址"
					}
				];
				var checkRes = graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				formData.id = this.id;
				formData.cityId = this.data.City;
				utils.loadIng("提交中...");
				Request
					.post("userAddressSave", formData)
					.then(res => {
						if (res.code == 200) {
							that.utils.Tip(res.msg);
							uni.$emit("addressEvent", {});
							uni.navigateBack();
						} else {
							that.utils.Tip(res.msg);
						}
					}).catch(function() {
						that.utils.Tip("网络错误，请稍后尝试");
					});
			},


			// 省市区选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onCancel(e) {
				this.data.region = "";
			},
			onConfirm(e) {
				this.data.region = e.label;
				this.data.City = e.cityCode;
			},
		}
	}
</script>

<style lang="scss">
	.add-line {
		padding: 15px;
		align-items: center;
		background: #fff;
		border-bottom: 1px #F5F5F5 solid;
		justify-content: space-between;
		flex-direction: row;
	}

	.al-left {
		flex:1;
		.text{
			color: #585858;
			font-size: 28rpx;
		}
	}

	.al-right {
		align-items: center;
		width: 500rpx;
		justify-content: flex-end;
		flex-direction: row;
		
		.addresstext{
			font-size: 28rpx;
		}
	}

	.al-right .input {
		font-size: 14px;
		text-align: right;
		flex: 1;
	}

	.al-right .textarea {
		width: 100%;
		height: 40px;
		font-size: 13px;
		flex: 1;
	}

	.p-size {
		color: #9B9B9B;
		font-size: 13px;
	}

	.alr-jiantou {
		margin-left: 6px;
		.image {
			width: 20px;
			height: 20px;
		}
	}

	.add-btn {
		width: 690rpx;
		height: 80rpx;
		background: #db292b;
		border-radius: 100px;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;

		.add-btn-text {
			color: #fff;
		}
	}
</style>