user_mobile_front/src/pages/sbxx.vue

<template>
	<div class="content">
		<back :title="titlename"></back>
		<!-- 快递公司 -->
		<div class="kdshow">
			<van-field readonly clickable name="picker" :value="value" label="报关方式" placeholder="请选择报关方式" @click="showPicker = true" />
			<van-popup v-model="showPicker" position="bottom">
			  <van-picker
			    show-toolbar
			    :columns="columns"
			    @confirm="onConfirm"
			    @cancel="showPicker = false"
			  />
			</van-popup>
		</div>
		<div class="addwp" v-show="wpshow">
			<van-field readonly clickable name="picker" label="申报物品" placeholder="添加" @click="wpshowPicker=true"/>
			<div class="wplist" v-for="(item,i) in wplist">
				<p>申报物品:{{item}}</p>
				<span @click="del(i)">删除</span>
			</div>
			
		</div>
		<!-- 寄件 -->
		<div class="btn-jj">
			<van-button type="info" color="#00c4b8">确定</van-button>
		</div>
		<van-popup v-model="wpshowPicker" position="center">
		  <div class="wpcontent">
			 <van-field clickable name="picker" label="申报物品" v-model.trim="wp" placeholder="请填写申报物品"/>
			 <van-button type="info" color="#00c4b8" @click="add">确定</van-button>		 
		  </div>
		</van-popup>
		
	</div>	
</template>

<script>
	import {Toast} from "vant"
	import areaList from "@/script/areas.js"
	export default{
		data(){
			return {
				titlename:"申报信息",
				showPicker:false,//快递
				value:"",
				columns:["非正式报关","正式报关"],
				wpshow:false,
				wpshowPicker:false,
				wplist:[],
				wp:""
			}
		},
		created:function(){
			this.isLogin();
			//this.areaList=area.areaList
		},
		methods:{
			// 选择快递公司
			onConfirm(e){
				this.value=e
				this.showPicker=false
				if(this.value=='正式报关'){
					this.wpshow=true
				}
				else{
					this.wpshow=false
				}
			},
			add(){
				if(this.wp==""){
					Toast("请填写申报物品")
					return false
				}
				this.wplist.push(this.wp)
				console.log(this.wplist)
				this.wp=""
				this.wpshowPicker=false
			},
			del(i){
				this.wplist.splice(i)
			}
		},
		computed:{
			areaList(){
				return areaList
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		
		.kdshow{
			font-size: .3rem;
			padding: .3rem 0px;
			width: 6.84rem;
			background: white;
			border-radius: .05rem;
			margin: .2rem auto .2rem;
			/deep/.van-cell{
				padding: 0px .3rem;
				overflow: unset;
				input{
					text-align: right;
					height: .5rem;
					padding-right: .25rem;
				}
			}
			/deep/.van-cell::after{
				content: "";
				display: inline-block;
				border-right: .01rem solid #b0b0b0;
				border-bottom: .01rem solid #b0b0b0;
				transform: rotate(-45deg);
				left: unset;
				position: absolute;
				right: .3rem;
				bottom: .15rem;
				width: .2rem;
				height: .2rem;
			}
		}
		.addwp{
			font-size: .3rem;
			padding: .3rem 0px;
			width: 6.84rem;
			background: white;
			border-radius: .05rem;
			margin: 0rem auto .2rem;
			.wplist{
				padding: 0px .3rem;
				display: flex;
				justify-content: space-between;
				color: #646566;
				font-size: 14px;
				margin-top: .2rem;
				span{
					color:#00c4b8
				}
			}
			/deep/.van-cell{
				padding: 0px .3rem;
				overflow: unset;
				input{
					text-align: right;
					height: .5rem;
					//padding-right: .25rem;
				}
			}
			.van-cell::after{
				display: none;
			}
			
		}
		.btn-jj{
			padding: .33rem;
			font-size: .3rem;
			button{
				width: 100%;
			}
		}
		.wpcontent{
			width:6rem;
			padding: .3rem;
			text-align: center;
			/deep/.van-cell{
				input{
					text-align: right;
				}
			}
			button{
				width: 60%;
				height: 35px;
				line-height: 35px;
			}
		}
	}
	
</style>