lhyt_shop_applet/XCX-Shop/pages/shopStore/saveAddress.vue

<template>
	<view class="body">
		<view class="content">
			<view style="margin-left: 4vw;">收获地址</view>
			<view class="model">
				<p style="margin-left: -4vw;">姓名</p>
				<p> <input type="text" v-model="name" placeholder="请输入收获人手机号"> </p>
			</view>
			<view class="model">
				<p style="margin-left: -3vw;">手机号</p>
				<p> <input type="text" v-model="tel" placeholder="请输入收货人手机号"> </p>
			</view>
			<view class="model" @click="city">
				<p style="margin-left: 4vw;">地区</p>
				<p> <input style="margin-left: 16vw;" v-model="area" type="text" disabled="true" placeholder="请选择省/市/区"> </p>
				<p>
					<image style="width: 5vw; height: 5vw;" src="../../static/dingwei.png"></image>
				</p>
			</view>
			<view class="Textmodel">
				<p style="margin-left: 4vw;">详细地址</p>
				<p> <textarea
						style="width: 60vw; height: 15vh; background-color: #f8f8f8; font-size: 0.9rem; padding: 1vw; "
						type="text" v-model="addr" placeholder="街道门牌,楼道等信息"></textarea> </p>
			</view>
		</view>
		<view class="setaddress">
			<view>
				<p style="font-size: 1rem;">设置默认地址</p>
				<p style="font-size: 0.8rem; color: lightgrey; margin-top: 2vw; ">每次下单会默认推荐使用该地址</p>
			</view>
			<view>
				<u-switch size="40" v-model="checked" @change="change"></u-switch>
			</view>
		</view>
		<view class="button" @click="saveAddress"> 保存 </view>
		<u-toast ref="uToast" />
		<u-picker mode="region"  v-model="show" @cancel="cancel" @confirm="confirm"
			:area-code='["13", "1303", "130304"]'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
				checked: false,
				name:'',
				tel:'',
				area:'',
				addr:'',
				default:false,
				addressInfo:""
			}
		},
		onLoad(option) {
			if(option.addressInfo){
				
				this.addressInfo=JSON.parse(decodeURIComponent(option.addressInfo))
				console.log('-------',this.addressInfo)
				this.name=this.addressInfo.name
				this.tel=this.addressInfo.tel
				this.area=this.addressInfo.area
				this.addr=this.addressInfo.addr
				this.default=this.addressInfo.default
			}
		},
		methods: {
			change(status) {
				this.default=status
			},
			saveAddress(){
				if(this.addressInfo!=''){
					this.$api.postEdimtAddress(this.addressInfo.id,{name:this.name,tel:this.tel,addr:this.addr,area:this.area,default:this.default},res=>{
						if(res.code==0){
							this.successToast('操作成功')
							uni.navigateBack({
								url:1
							});
						}else{
						this.errorToast(res.msg)	
						}
					})
				}else{
					this.$api.postAddress({name:this.name,tel:this.tel,addr:this.addr,area:this.area,default:this.default},res=>{
						if(res.code==0){
							this.successToast('操作成功')
							uni.navigateBack({
								url:1
							});
						}else{
						this.errorToast(res.msg)	
						}
					})
				}
			
			},
			city() {
				this.show = true
			},
			confirm(e) {
				this.area= e.province.label+e.city.label +e.area.label
			},
			cancel(e) {
				this.show=false
				console.log("取消")
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		box-sizing: border-box;
		padding: 0 5vw;

		.content {
			width: 90vw;
			height: 50vh;
			background-color: white;
			border-radius: 5px;
			box-sizing: border-box;
			padding: 3vw;

			.model {
				width: 84vw;
				height: 15vw;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #f8f8f8;
			}

			.Textmodel {
				width: 84vw;
				height: 30vh;
				display: flex;
				justify-content: space-around;
				border-bottom: 1px solid #f8f8f8;
			}
		}

		.button {
			width: 90vw;
			height: 12vw;
			text-align: center;
			line-height: 12vw;
			background-color: #f83036;
			color: white;
			border-radius: 32px;
			margin-top: 5vw;
		}

		.setaddress {
			width: 90vw;
			height: 10vh;
			background-color: white;
			border-radius: 5px;
			margin-top: 2vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 2vw;
		}
	}
</style>