JianjianStreet-H5/pages/my/my-addre.vue

<template>
	<view>
		<view class="from">
			<view class="from-line">
				<span class="label-class">姓名:</span>
				<view><input v-model="release.name" placeholder="请输入姓名"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">电话:</span>
				<view><input v-model="release.phone" placeholder="请输入电话"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">地址:</span>
				<view><input v-model="release.region" placeholder="请输入地址信息"/></view>
			</view>
			<view class="from-line">
				<span class="label-class">详细地址:</span>
				<view><input v-model="release.detailAddress" placeholder="请输入地址详情"/></view>
			</view>
		</view>
		<view class="pay-btn" @click="fabujianzhi()">
			提交地址信息
		</view>
	</view>
</template>

<script>
	import userCard from '@/components/user-card/index.vue'
	export default{
		components:{
			userCard
		},
		data(){
			return{
				release:{
					name:"",
					phone:"",
					region:"",
					detailAddress:"",
				}
			}
		},
		onShow() {
			this.getmyInfo()
		},
		onLoad() {
			
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			getmyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
					}else{
						this.userInfo = null
					}
				})
			},
			fabujianzhi(){
				let that = this;
				if(that.release.name == ''){
					this.$Toast("姓名不能为空");
					return
				}
				if(that.release.phone == null){
					this.$Toast("电话不能为空")
					return
				}
				if(that.release.region == ''){
					this.$Toast("地址不能为空")
					return
				}
				if(that.release.detailAddress == null){
					this.$Toast("地址详情不能为空")
					return
				}
			
				let params = {
					name:that.release.name,
					phone:that.release.phone,
					region:that.release.region,
					detailAddress:that.release.detailAddress,
				}
				that.$api('saveOrUpdateAddress',params).then(res=>{
					this.$Toast(res.message);
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/my/my-address-list'
						})
					},1500)
					
					
					
				});
				
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.from {
		margin-top: 20rpx;
	}
	.from-line {
		height: 138rpx;
		display: flex;
		.label-class{
			text-align: justify;
			text-align-last: justify;
			line-height: 128rpx;
			width: 128rpx;
			padding: 0 24rpx;
		}
		input{
			padding-left: 10rpx;
			height: 128rpx;
			line-height: 128rpx;
		}	
	}
	.from-line-box {
		height: 328rpx;
		margin-right: 50rpx;
		display: flex;
		.label-class{
			text-align: justify;
			text-align-last: justify;
			line-height: 128rpx;
			width: 128rpx;
			padding: 0 24rpx;
		}
		input{
			padding-left: 20rpx;
			height: 228rpx;
			line-height: 128rpx;
		}	
	}
	.pay-btn{
		margin:190rpx auto;
		width: 387rpx;
		text-align: center;
		border-radius: 12rpx;
		height: 78rpx;
		line-height: 78rpx;
		background-color:  #00CCCC;
		color: #FFFFFF;
	}
	
</style>