user_mobile_front/src/pages/cityaddressbook.vue

<template>
	<div class="content">

		<!-- 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 }}</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 }}</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.sendAddr = item.provinceAndCity
			jjInfo.sendAddress = item.address
			this.$store.commit("getJjInfo", jjInfo)
			this.$router.push({ path: "/Cityexpress" })
		},
		adressLinkSj(item) {
			let sjInfo = {}
			sjInfo.sjname = item.name + ' ' + item.phone
			sjInfo.sjadd = item.provinceAndCity + ' ' + item.address
			sjInfo.receiver = item.name
			sjInfo.receiverPhone = item.phone
			sjInfo.receiveAddr = item.provinceAndCity
			sjInfo.receiveAddress = item.address
			this.$store.commit("getSjInfo", sjInfo)
			this.$router.push({ path: "/Cityexpress" })
		}
	},
	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>