courier_mobile_front/src/pages_bak/newaddress.vue

<template>
	<div class="content">
		
		<div class="form">
			<van-form @submit="onSubmit">
			  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
			  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
			  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
			  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
			  <div style="margin-top: 16px;">
			    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
			  </div>
			</van-form>
			<!-- 城市选择 -->
			<van-popup v-model="areashow" position="bottom">
			  <van-area
			    :area-list="areaList"
			    @confirm="onConfirm3"
			    @cancel="areashow = false"
			  />
			</van-popup>
		</div>
	</div>
</template>

<script>
	import areaList from "@/script/areas.js"
	export default{
		data(){
			return{
				titlename:"寄件人",
				name:"",
				phone:"",
				city:"",
				address:"",
				areashow:false,
			}
		},
		created:function(){
			this.titlename=this.$route.query.type
			if(this.titlename==1){
				this.titlename="新建寄件人地址"
			}
			if(this.titlename==2){
				this.titlename="新建收件人地址"
			}
		},
		methods:{
			onSubmit(){
				
			},
			onConfirm3(e){//确定
				this.city=e[0].name+' '+e[1].name+' '+e[2].name
				this.areashow=false
				console.log(e)
			},
		},
		computed:{
			areaList(){
				return areaList
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		
		.form{
			padding: .3rem;
			/deep/.van-field__value{
				input{
					text-align: right;
				}
				
			}
		}
	}
</style>