user_mobile_front/src/pages/multipleaddressbook.vue

<template>
	<div class="content">
		<back :title="titlename"></back>
		<!-- table切换 -->
		<div class="tab">
			<div>
				<p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
				<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
			</div>		
		</div>
		<!-- 寄件人 -->
		<div v-if="index==1">
			<div class="jjinfo" v-for="item in addressList">
				<div>
					<div class="jj">
						<div class="jjaddress" @click="adressLink(item)">
							<p>寄</p>
							<div :id="'copytkl'+item.id">
								<p>{{item.name}}  {{item.phone}}  {{item.telPhone}}</p>
								<p>{{item.provinceAndCity}} {{item.address}}</p>
							</div>
						</div>
						<div class="cz">
							<p @click="del(item.id)">
								<img src="../assets/images/del.png" alt="">
								<span>删除</span>
							</p>	
							<p @click="linkEdit(item.id)">	
								<img src="../assets/images/whrite.png" alt="">
								<span>编辑</span>
							</p>
							<p :id="'fz'+item.id" @click="copyLink(item.id)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.id">
								<img src="../assets/images/copy.png" alt="">
								<span>复制</span>
							</p>
						</div>
					</div>
				</div>			
			</div>
			<!-- 寄件 -->
			<div class="btn-jj">
				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
			</div>
		</div>
		
		<!-- 收件人 -->
		<div v-if="index==2">
			<div class="jjinfo" v-for="item in addressList">
				<div>
					<div class="jj">
						<div class="jjaddress" @click="adressLinkSj(item)">
							<p style="background: #fa9c22;">收</p>
							<div :id="'copytkl'+item.id">
								<p>{{item.name}}  {{item.phone}}  {{item.telPhone}}</p>
								<p>{{item.provinceAndCity}} {{item.address}}</p>
							</div>
						</div>
						<div class="cz">
							<p @click="del(item.id)">
								<img src="../assets/images/del.png" alt="">
								<span>删除</span>
							</p>						
							<p @click="linkEdit(item.id)">
								<img src="../assets/images/whrite.png" alt="">
								<span>编辑</span>
							</p>
							<p :id="'fz'+item.id" @click="copyLink(item.id)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.id">
								<img src="../assets/images/copy.png" alt="">
								<span>复制</span>
							</p>
						</div>
					</div>
				</div>			
			</div>
			<!-- 寄件 -->
			<div class="btn-jj">
				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
			</div>
		</div>
	</div>	
</template>

<script>
	import {Toast,Dialog} from 'vant'
	export default{
		data(){
			return {
				titlename:"地址簿",
				index:1,
				userId:'',
				addressList:[]
			}
		},
		created:function(){
			this.isLogin();
			this.userId = localStorage.getItem("userId")
			//获取参数
			this.index = this.$route.query.active
			this.getData();
		},
		methods:{
			//复制
			copyLink(id) {
			  let _this = this;
			  let clipboard = new this.clipboard("#fz"+id);
			  clipboard.on('success', function () {
			    //window.console.log('00')
			  });
			  clipboard.on('error', function () {
			    _this.$toast("复制失败")
			  });
			},
			tab(obj){
				this.index=obj
				this.getData()
			},
			link(obj){
				this.$router.push({path:"/Newaddress",query:{type:obj}})
			},
			getData(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
				this.$http.post(this.$store.state.host+"/personal/getAddressList.do",{userId:this.userId,type:this.index},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.addressList = res.body.addressList
					}
					Toast.clear()
				},res=>{
						 //发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
			del(id){
				Dialog.confirm({ title: '', message: '确定删除吗', })
				 .then(() => {
					Toast.loading({
					    message: '删除中...',
					    forbidClick: true,
					    duration:0
					});
					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
						.then(res=>{
							//发送成功
							if(res.body.msg=='success'){
								this.getData()
							}else{
								Toast("删除失败!")
							}
						Toast.clear()
					},res=>{
							 //发送失败
						Toast("网络错误!")
					})
					Toast.clear()
				})
				.catch(() => {
						//  on cancel 
				})
			},
			//跳去编辑页
			linkEdit(id){
				this.$router.push({path:"/Editaddress",query:{id:id}})
			},
			adressLink(item){
				let jjInfo = {}
				jjInfo.jjname = item.name+' '+item.phone
				jjInfo.jjadd = item.provinceAndCity+' '+item.address
				jjInfo.sender = item.name
				jjInfo.senderPhone = item.phone
				jjInfo.senderMobile = item.telPhone
				jjInfo.sendAddr = item.provinceAndCity
				jjInfo.sendAddress = item.address
				this.$store.commit("getJjInfo",jjInfo)
				this.$router.push({path:"/MultipleExpress"})
			},
			adressLinkSj(items){
				let sjInfo = {}
				sjInfo.sjname = items.name+' '+items.phone
				sjInfo.sjadd = items.provinceAndCity+' '+items.address
				sjInfo.receiver = items.name
				sjInfo.receiverPhone = items.phone
				sjInfo.receiveMobile = items.telPhone
				sjInfo.receiveAddr = items.provinceAndCity
				sjInfo.receiveAddress = items.address
				sjInfo.itemType = '物品'
				sjInfo.weight = '1'
				sjInfo.itemNum = '1'
				sjInfo.wpinfo='物品-1kg'
				
				
				//判断数组中是否有一条数据的地址相同
				let someResult = this.$store.state.sjList.some(function(item) {
				  return item.receiveAddress == sjInfo.receiveAddress;
				});
				if(someResult){
					Toast("您已添加过该收件人!")
					return;
				}
				
				this.$store.state.sjList.push(sjInfo)
				this.$router.push({path:"/MultipleExpress"})
			}
		},
		computed:{
			
		}
	}
</script>

<style scoped lang="less">
	.content{
		.tab{
			font-size: .36rem;
			color: #00c4b8;
			padding: .33rem;
			div{
				display: flex;
				border: .01rem solid #00c4b8;
				text-align: center;			
				border-radius: .05rem;
				p{
					flex: 1;
					padding: .1rem 0rem;				
				}
				p.active{
					background: #00c4b8;
					color: white;
				}
			}
			
		}
		.jjinfo{
			font-size: .36rem;
			color: #999999;
			padding: .0rem .33rem 0.33rem;
			word-break: break-word;
			>div{
				background: white;
				border-radius: .05rem;
				padding: .1rem .3rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .2rem 0rem;
					flex-wrap: wrap;
					.jjaddress{
						display: flex;
						padding: .1rem 0rem .2rem;
						
						>p{
							font-size: .24rem;
							font-weight: bold;
							display: inline-block;
							width:.5rem;
							height: .5rem;
							background: #00c4b8;
							text-align: center;
							line-height: .5rem;
							color: white;
							border-radius: 50%;
							margin-right: .3rem;
						}
						div{
							//font-weight: bold;
							max-width: 5.2rem;
							p:nth-of-type(1){
								font-size: .3rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .3rem;
							}
						}
					}
					.cz{
						border-top: .01rem solid #ededed;
						width: 100%;
						display: flex;
						flex-direction: row-reverse;
						font-size: .24rem;
						color: #999999;
						padding-top: .2rem;
						p{
							margin-left: .2rem;
							img{
								width:.22rem;
								height: .24rem;
							}
							span{
								position: relative;
								top: -.01rem;
							}
						}
						
					}
				}
		    }
		
		}
		
		
		
		.btn-jj{
			padding: .33rem;
			button{
				width: 100%;
			}
		}
	}
	
</style>