CBB3/pages/user/address/add/add.vue

<template>
	<view>
		<view>
			<form report-submit="true" @submit="formSubmit">
				<view id="box">
				<view class="add-line">
					<view class="al-left">
						<text>收货人</text>
					</view>
					<view class="al-right">
						<input placeholder="收货人" placeholder-class="p-size" name="name" v-model="data.name" />
					</view>
				</view>
				<view class="add-line">
					<view class="al-left">
						<text>手机号码</text>
					</view>
					<view class="al-right">
						<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>所在地区</text>
					</view>
					<view class="al-right" @tap="showMulLinkageThreePicker">
						<view :style="'color:' + (data.region ? '#333' : '#585858') ">{{data.region ? data.region : "请选择"}}</view>
						<input type="text" name="region" v-show="false" :value="data.region"/>
						<view class="alr-jiantou">
							<image src="/static/img/ic_next.png"></image>
						</view>
					</view>
				</view>
				<view class="add-line">
					<view class="al-left">
						<text>详细地址</text>
					</view>
					<view class="al-right">
						<textarea placeholder-class="p-size" name="address" placeholder="详细省份，城市，道路，门牌号，小区，楼栋号，单元室等（必填）" v-model="data.address" />
						</view>
				</view>
				
				<button class="nt add-btn" formType="submit">保存</button>
			</view>
			</form>
		</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.vue';
		import graceChecker  from "../../../../library/utils/graceChecker.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(){
				this
					.request
					.post("userAddressInfo",{id:this.id})
					.then((res)=>{
						if(res.code == 200){
							this.data = res.data;
						}else{
							this.utils.Tip(res.msg);
						}
				}).catch(()=>{
					this.utils.Tip("网络错误，请稍后尝试");
				})
			},
			//表单提交
			formSubmit(e) {
				var that = this , formData = e.detail.value;
				//定义表单规则
				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;
				this.utils.loadIng("提交中...");
				this
					.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>
page {
		background: #F5F5F5;
	}
	.add-name{
		position: absolute;
		right: 15px;
		color: #4A4A4A;
		font-size: 13px;
	}
	.add-line{
		padding: 15px;
		display: flex;
		align-items: center;
		background: #fff;
		border-bottom: 1px #F5F5F5 solid;
	}
	.al-left{
		color: #585858;
		font-size: 14px;
	}
	.al-right{
		margin-left: auto;
		width: 75%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.al-right input{
		text-align: right;
		font-size: 14px;
		width: 100%;
		height: 100%;
	}
	.al-right textarea{
		width: 100%;
		height: 40px;
		font-size: 14px;
	}
	.p-size{
		color: #9B9B9B;
	}
	.alr-jiantou{
		width: 20px;
		height: 20px;
		margin-left: 6px;
	}
	.alr-jiantou image{
		width: 100%;
		height: 100%;
		display: block;
	}
	uni-picker{
		width: 100%;
	}
	button.add-btn{
		width: 90%;
		height: 50px;
		background: #db292b;
		color: #fff;
		border-radius: 100px;
		position: absolute;
		bottom: 50px;
		text-align: center;
		line-height: 50px;
		margin: 0 5%;
	}
</style>