地址铺+外部件+一半的内部件

src/api/addressBoook.js

@@ -0,0 +1,64 @@
+import request from '../utils/request';
+
+// 地址铺-列表
+export function getUserAddressList(data) {
+    return request({
+        url: '/tianzong/client/address/getUserAddressList',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 地址铺-新增
+export function saveAddress(data) {
+    return request({
+        url: '/tianzong/client/address/saveAddress',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 地址铺-详情
+export function findUserAddressInfoById(data) {
+    return request({
+        url: '/tianzong/client/address/findUserAddressInfoById',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 地址铺-修改
+export function editUserAddressInfoById(data) {
+    return request({
+        url: '/tianzong/client/address/editUserAddressInfoById',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 地址铺-删除
+export function deleteUserAddressById(data) {
+    return request({
+        url: '/tianzong/client/address/deleteUserAddressById',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+
+// 地址铺-省市区
+export function listByParent(data) {
+    return request({
+        url: '/tianzong/addressCode/listByParent',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+

src/api/index.js

@@ -7,3 +7,45 @@ export function employee_login(data, config) {
         ...config
     })
 }
+
+// 寄件-我的寄件
+export function saveMailDo(data) {
+    return request({
+        url: '/tianzong/client/without/saveMail.do',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 寄件-内部件
+export function saveInternal(data) {
+    return request({
+        url: '/tianzong/client/inside/save',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+// 寄件-内部件-收件人
+export function getUserByName(data) {
+    return request({
+        url: '/tianzong/user/getUserByName',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+// 我的寄件- 列表
+export function getListByUser(data) {
+    return request({
+        url: '/tianzong/client/inside/getListByUser',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
+
+

src/pages/addressbook.vue

@@ -4,300 +4,317 @@
 		<!-- 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>		
+				<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 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 :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)">	
+							</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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
 			</div>
 		</div>
-		
+
 		<!-- 收件人 -->
-		<div v-if="index==2">
+		<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 :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>
 							<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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
 			</div>
 		</div>
-	</div>	
+	</div>
 </template>
 
 <script>
-	import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:1,
-				userId:'',
-				addressList:[]
-			}
+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("复制失败")
+			});
 		},
-		created:function(){
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			//获取参数
-			this.index = this.$route.query.active
-			this.getData();
+		tab(obj) {
+			this.index = obj
+			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
+		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=>{
-						 //发送失败
+				}, res => {
+					//发送失败
 					Toast("网络错误!")
 				})
-				Toast.clear()
-			},
-			del(id){
-				Dialog.confirm({ title: '', message: '确定删除吗', })
-				 .then(() => {
+			Toast.clear()
+		},
+		del(id) {
+			Dialog.confirm({ title: '', message: '确定删除吗', })
+				.then(() => {
 					Toast.loading({
-					    message: '删除中...',
-					    forbidClick: true,
-					    duration:0
+						message: '删除中...',
+						forbidClick: true,
+						duration: 0
 					});
-					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
-						.then(res=>{
+					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
+						.then(res => {
 							//发送成功
-							if(res.body.msg=='success'){
+							if (res.body.msg == 'success') {
 								this.getData()
-							}else{
+							} else {
 								Toast("删除失败!")
 							}
-						Toast.clear()
-					},res=>{
-							 //发送失败
-						Toast("网络错误!")
-					})
+							Toast.clear()
+						}, res => {
+							//发送失败
+							Toast("网络错误!")
+						})
 					Toast.clear()
 				})
 				.catch(() => {
-						//  on cancel 
+					//  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:"/Express"})
-			},
-			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.receiveMobile = item.telPhone
-				sjInfo.receiveAddr = item.provinceAndCity
-				sjInfo.receiveAddress = item.address
-				this.$store.commit("getSjInfo",sjInfo)
-				this.$router.push({path:"/Express"})
-			}
 		},
-		computed:{
-			
+		//跳去编辑页
+		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: "/Express" })
+		},
+		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.receiveMobile = item.telPhone
+			sjInfo.receiveAddr = item.provinceAndCity
+			sjInfo.receiveAddress = item.address
+			this.$store.commit("getSjInfo", sjInfo)
+			this.$router.push({ path: "/Express" })
 		}
+	},
+	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;
-				}
+.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{
+
+	}
+
+	.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;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					flex-wrap: wrap;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem .2rem;
-						//width: 6rem;
-						>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;
+					padding: .1rem 0rem .2rem;
+
+					//width: 6rem;
+					>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;
 						}
-						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;
-							}
+
+						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;
-							}
+				}
+
+				.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%;
 			}
 		}
+
+	}
+
+
+
+	.btn-jj {
+		padding: .33rem;
+
+		button {
+			width: 100%;
+		}
 	}
-	
+}
 </style>

src/pages/cityaddressbook.vue

@@ -4,298 +4,314 @@
 		<!-- 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>		
+				<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 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 :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)">	
+							</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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
 			</div>
 		</div>
-		
+
 		<!-- 收件人 -->
-		<div v-if="index==2">
+		<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 :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>
 							<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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
 			</div>
 		</div>
-	</div>	
+	</div>
 </template>
 
 <script>
-	import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:1,
-				userId:'',
-				addressList:[]
-			}
+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("复制失败")
+			});
 		},
-		created:function(){
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			//获取参数
-			this.index = this.$route.query.active
-			this.getData();
+		tab(obj) {
+			this.index = obj
+			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
+		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=>{
-						 //发送失败
+				}, res => {
+					//发送失败
 					Toast("网络错误!")
 				})
-				Toast.clear()
-			},
-			del(id){
-				Dialog.confirm({ title: '', message: '确定删除吗', })
-				 .then(() => {
+			Toast.clear()
+		},
+		del(id) {
+			Dialog.confirm({ title: '', message: '确定删除吗', })
+				.then(() => {
 					Toast.loading({
-					    message: '删除中...',
-					    forbidClick: true,
-					    duration:0
+						message: '删除中...',
+						forbidClick: true,
+						duration: 0
 					});
-					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
-						.then(res=>{
+					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
+						.then(res => {
 							//发送成功
-							if(res.body.msg=='success'){
+							if (res.body.msg == 'success') {
 								this.getData()
-							}else{
+							} else {
 								Toast("删除失败!")
 							}
-						Toast.clear()
-					},res=>{
-							 //发送失败
-						Toast("网络错误!")
-					})
+							Toast.clear()
+						}, res => {
+							//发送失败
+							Toast("网络错误!")
+						})
 					Toast.clear()
 				})
 				.catch(() => {
-						//  on cancel 
+					//  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:{
-			
+		//跳去编辑页
+		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;
-				}
+.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{
+
+	}
+
+	.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;
-					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;
+					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;
 						}
-						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;
-							}
+
+						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;
-							}
+				}
+
+				.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%;
 			}
 		}
+
+	}
+
+
+
+	.btn-jj {
+		padding: .33rem;
+
+		button {
+			width: 100%;
+		}
 	}
-	
+}
 </style>

src/pages/editaddress.vue

@@ -3,156 +3,183 @@
 		<back :title="titlename"></back>
 		<div class="form">
 			<van-form @submit="onSubmit">
-			  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false}]"/>
-			  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机" :rules="[{ required: false}]"/>
-			  <van-field v-model="telPhone" maxlength="20" type="text" name="座机" label="座机" placeholder="请输入座机" :rules="[{ required: false}]"/>
-			  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" :rules="[{ required: false}]"/>
-			  <van-field v-model="address" name="详细地址" maxlength="50" label="详细地址" placeholder="请输入详细地址" :rules="[{ required: false}]"/>
-			  <div style="margin-top: 16px;">
-			    <van-button color="#00c4b8" block type="info" native-type="submit" :disabled="disabled">确定</van-button>
-			  </div>
+				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
+				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
+					:rules="[{ required: false }]" />
+
+				<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
+					@click="areashow = true" :rules="[{ required: false }]" />
+				<van-field v-model="address" name="详细地址" maxlength="50" label="详细地址" placeholder="请输入详细地址"
+					:rules="[{ required: false }]" />
+				<div style="margin-top: 16px;">
+					<van-button color="#00c4b8" block type="info" native-type="submit"
+						:disabled="disabled">确定</van-button>
+				</div>
 			</van-form>
 			<!-- 城市选择 -->
 			<van-popup v-model="areashow" position="bottom">
-			  <van-area
-			    :area-list="areaList"
-			    @confirm="onConfirm3"
-			    @cancel="areashow = false"
-			  />
+				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
 			</van-popup>
 		</div>
 	</div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	import {Toast} from 'vant'
-	export default{
-		data(){
-			return{
-				titlename:"编辑地址",
-				name:"",
-				phone:"",
-				telPhone:"",
-				city:"",
-				address:"",
-				areashow:false,
-				id:'',
-				disabled:false
+import areaList from "@/script/areas.js"
+import { Toast } from 'vant'
+import { findUserAddressInfoById, editUserAddressInfoById } from '../api/addressBoook'
+export default {
+	data() {
+		return {
+			titlename: "编辑地址",
+			name: "",
+			phone: "",
+			telPhone: "",
+			city: "",
+			address: "",
+			areashow: false,
+			id: '',
+			disabled: false
+		}
+	},
+	created: function () {
+		this.isLogin();
+		this.id = this.$route.query.id
+		this.getData()
+	},
+	methods: {
+		async getData() {
+			Toast.loading({
+				message: '加载中...',
+				forbidClick: true,
+				duration: 0
+			});
+			const res = await findUserAddressInfoById({ id: this.id })
+			if (res.msg == 'success') {
+				this.name = res.userAddressInfoById.addresseeName
+				this.phone = res.userAddressInfoById.addresseePhone
+				this.city = res.userAddressInfoById.addresseeAllAddress
+				this.address = res.userAddressInfoById.addresseeAllAddress
+			} else {
+				Toast("网络错误!")
 			}
+			Toast.clear()
+			console.log(res)
+			// this.$http.post(this.$store.state.host+"/personal/getAddressInfoById.do",{id:this.id},{emulateJSON:true})
+			// 	.then(res=>{
+			// 		//发送成功
+			// 		if(res.body.msg=='success'){
+			// 			this.name = res.body.addressInfo.name
+			// 			this.phone = res.body.addressInfo.phone
+			// 			this.telPhone = res.body.addressInfo.telPhone
+			// 			this.city = res.body.addressInfo.provinceAndCity
+			// 			this.address = res.body.addressInfo.address
+			// 		}
+			// 	Toast.clear()
+			// },res=>{
+			// 		 //发送失败
+			// 	Toast("网络错误!")
+			// })
+
 		},
-		created:function(){
-			this.isLogin();
-			this.id=this.$route.query.id
-			this.getData()
-		},
-		methods:{
-			getData(){
-				Toast.loading({
-				    message: '加载中...',
-				    forbidClick: true,
-				    duration:0
-				});
-				this.$http.post(this.$store.state.host+"/personal/getAddressInfoById.do",{id:this.id},{emulateJSON:true})
-					.then(res=>{
-						//发送成功
-						if(res.body.msg=='success'){
-							this.name = res.body.addressInfo.name
-							this.phone = res.body.addressInfo.phone
-							this.telPhone = res.body.addressInfo.telPhone
-							this.city = res.body.addressInfo.provinceAndCity
-							this.address = res.body.addressInfo.address
-						}
-					Toast.clear()
-				},res=>{
-						 //发送失败
-					Toast("网络错误!")
-				})
-				Toast.clear()
-			},
-			onSubmit(){
-				
-				if(this.name == '' || this.name == undefined){
-					Toast('请输入姓名')
-					return
-				}
-				
-				if ((this.phone == '' || this.phone == undefined) && (this.telPhone == '' || this.telPhone == undefined)) {
-					Toast('请填写手机号或者座机号')
-					return
-				}
-				
-				if(this.phone != '' && this.phone != undefined){
-					let regPhone = new RegExp(this.$store.state.regPhone)
-					if (!regPhone.test(this.phone)) {
-						Toast('手机号格式不正确')
-						return
-					}
-				}
-				
-				if(this.city == '' || this.city == undefined){
-					Toast('请选择省市区')
-					return
-				}
-				
-				if(this.address == '' || this.address == undefined){
-					Toast('请输入详细地址')
+		async onSubmit() {
+
+			if (this.name == '' || this.name == undefined) {
+				Toast('请输入姓名')
+				return
+			}
+
+			if (this.phone == '' || this.phone == undefined) {
+				Toast('请填写手机号')
+				return
+			}
+
+			if (this.phone != '' && this.phone != undefined) {
+				let regPhone = new RegExp(this.$store.state.regPhone)
+				if (!regPhone.test(this.phone)) {
+					Toast('手机号格式不正确')
 					return
 				}
-				
-				this.disabled = true;
-				
-				this.$http.post(this.$store.state.host+"/personal/editAddressInfoById.do",{id:this.id,
-					name:this.name,
-					phone:this.phone,
-					telPhone:this.telPhone,
-					provinceAndCity:this.city,
-					address:this.address
-					},{emulateJSON:true})
-						.then(res=>{
-							//发送成功
-							if(res.body.msg=='success'){
-								Toast("保存成功");
-								let that = this;
-								setTimeout(function(){
-									that.$router.back()
-								},500)
-							}else{
-								Toast("保存失败");
-							}
-							this.disabled = false;
-					},res=>{
-						//发送失败
-						Toast("网络错误");
-						this.disabled = false;
-					})
-					this.disabled = false;
-			},
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-		},
-		computed:{
-			areaList(){
-				return areaList
 			}
+
+			if (this.city == '' || this.city == undefined) {
+				Toast('请选择省市区')
+				return
+			}
+
+			if (this.address == '' || this.address == undefined) {
+				Toast('请输入详细地址')
+				return
+			}
+
+			this.disabled = true;
+			let parmas = {
+				addresseeName: this.name,
+				addresseePhone: this.phone,
+				id: this.id,
+				addresseeAddress: this.city,
+
+
+
+
+				// this.address
+			}
+			const res = await editUserAddressInfoById({ ...parmas })
+			console.log(res, 'res')
+
+			// this.$http.post(this.$store.state.host + "/personal/editAddressInfoById.do", {
+			// 	id: this.id,
+			// 	name: this.name,
+			// 	phone: this.phone,
+			// 	telPhone: this.telPhone,
+			// 	provinceAndCity: this.city,
+			// 	address: this.address
+			// }, { emulateJSON: true })
+			// 	.then(res => {
+			// 		//发送成功
+			// 		if (res.body.msg == 'success') {
+			// 			Toast("保存成功");
+			// 			let that = this;
+			// 			setTimeout(function () {
+			// 				that.$router.back()
+			// 			}, 500)
+			// 		} else {
+			// 			Toast("保存失败");
+			// 		}
+			// 		this.disabled = false;
+			// 	}, res => {
+			// 		//发送失败
+			// 		Toast("网络错误");
+			// 		this.disabled = false;
+			// 	})
+			this.disabled = false;
+		},
+		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;
-				}
-				
+.content {
+
+	.form {
+		padding: .3rem;
+
+		/deep/.van-field__value {
+			input {
+				text-align: right;
 			}
+
 		}
 	}
+}
 </style>

src/pages/inaddressbook.vue

@@ -4,9 +4,9 @@
 		<!-- table切换 -->
 		<div class="tab">
 			<div>
-				<p @click="tab(1)" :class="[index==1?'active':'']">内部收件人</p>
+				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">内部收件人</p>
 				<!-- <p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p> -->
-			</div>		
+			</div>
 		</div>
 		<!-- 寄件人 -->
 		<!-- <div v-if="index==1">
@@ -37,266 +37,281 @@
 					</div>
 				</div>			
 			</div> -->
-			<!-- 寄件 -->
-			<!-- <div class="btn-jj">
+		<!-- 寄件 -->
+		<!-- <div class="btn-jj">
 				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
 			</div>
 		</div> -->
-		
+
 		<!-- 收件人 -->
-		<div v-if="index==3">
+		<div v-if="index == 3">
 			<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 :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>
 							<!-- <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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button type="info" @click="link(3)" color="#00c4b8">添加收件人</van-button>
 			</div>
 		</div>
-	</div>	
+	</div>
 </template>
 
 <script>
-	import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:3,
-				userId:'',
-				addressList:[]
-			}
+import { Toast, Dialog } from 'vant'
+export default {
+	data() {
+		return {
+			titlename: "地址簿",
+			index: 3,
+			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("复制失败")
+			});
 		},
-		created:function(){
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			//获取参数
-			this.index = this.$route.query.active
-			this.getData();
+		tab(obj) {
+			this.index = obj
+			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:"/InNewaddress",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
+		link(obj) {
+			this.$router.push({ path: "/InNewaddress", 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=>{
-						 //发送失败
+				}, res => {
+					//发送失败
 					Toast("网络错误!")
 				})
-				Toast.clear()
-			},
-			del(id){
-				Dialog.confirm({ title: '', message: '确定删除吗', })
-				 .then(() => {
+			Toast.clear()
+		},
+		del(id) {
+			Dialog.confirm({ title: '', message: '确定删除吗', })
+				.then(() => {
 					Toast.loading({
-					    message: '删除中...',
-					    forbidClick: true,
-					    duration:0
+						message: '删除中...',
+						forbidClick: true,
+						duration: 0
 					});
-					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
-						.then(res=>{
+					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
+						.then(res => {
 							//发送成功
-							if(res.body.msg=='success'){
+							if (res.body.msg == 'success') {
 								this.getData()
-							}else{
+							} else {
 								Toast("删除失败!")
 							}
-						Toast.clear()
-					},res=>{
-							 //发送失败
-						Toast("网络错误!")
-					})
+							Toast.clear()
+						}, res => {
+							//发送失败
+							Toast("网络错误!")
+						})
 					Toast.clear()
 				})
 				.catch(() => {
-						//  on cancel 
+					//  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:"/Express"})
-			},
-			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.receiveMobile = item.telPhone
-				sjInfo.receiveAddr = item.provinceAndCity
-				sjInfo.receiveAddress = item.address
-				this.$store.commit("getSjInfo3",sjInfo)
-				this.$router.push({path:"/Inexpress"})
-			}
 		},
-		computed:{
-			
+		//跳去编辑页
+		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: "/Express" })
+		},
+		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.receiveMobile = item.telPhone
+			sjInfo.receiveAddr = item.provinceAndCity
+			sjInfo.receiveAddress = item.address
+			this.$store.commit("getSjInfo3", sjInfo)
+			this.$router.push({ path: "/Inexpress" })
 		}
+	},
+	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;
-				}
+.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{
+
+	}
+
+	.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;
-					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;
+					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;
 						}
-						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;
-							}
+
+						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;
-							}
+				}
+
+				.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%;
 			}
 		}
+
+	}
+
+
+
+	.btn-jj {
+		padding: .33rem;
+
+		button {
+			width: 100%;
+		}
 	}
-	
+}
 </style>

src/pages/logisticslist.vue

@@ -2,59 +2,61 @@
 	<div>
 		<back :title="titlename"></back>
 		<div class="content">
-	
-	<van-search v-model="value" @search="onSearch" placeholder="请输入运单号" />
-	<!-- table切换 -->
-	<div class="tab">
-		<div>
-			<p @click="tab(1)" :class="[index==1?'active':'']">外部件</p>
-			<p @click="tab(2)" :class="[index==2?'active':'']">内部件</p>
-		</div>		
-	</div>
-	<!-- 按天按月 -->
-	<div class="change">
-		<div class="time">
-			<p @click="changetimeNew()" class="timeactive">日期筛选</p>
-			<!-- <p @click="changetime(1)" :class="[time==1?'timeactive':'']">按月</p>
-			<p @click="changetime(2)" :class="[time==2?'timeactive':'']">按天</p> -->
-		</div>
-		<div class="datapicker">
-			<p @click="showPicker=true">{{timevalue}}</p>
-		</div>
-	</div>
-	<!-- 订单列表 -->
-	<div class="list">
-		<div class="logistics" v-for="item in mailList">
-			<div class="logistics_top">
-				<p>订单号:<span :id="'copytkl'+item.expressNo">{{item.expressNo}}</span></p>
-				<!-- <p > -->
-				<img :id="'fz'+item.expressNo" @click="copyLink(item.expressNo)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.expressNo" src="../assets/images/2022copy.png" alt="">
-				<!-- </p> -->
-			</div>
-			<div class="logistics_center" @click="mailDetail(item.id)">
+
+			<van-search v-model="value" @search="onSearch" placeholder="请输入运单号" />
+			<!-- table切换 -->
+			<div class="tab">
 				<div>
-					<p>{{item.sendCity}}</p>
-					<p>{{item.sender}}</p>
+					<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">外部件</p>
+					<p @click="tab(2)" :class="[index == 2 ? 'active' : '']">内部件</p>
 				</div>
-				<div>
-					<img v-if="item.sendSt == '待揽件'" src="../assets/images/j_ico01.png" alt="">
-					<img v-if="item.sendSt == '已揽收'" src="../assets/images/j_ico01.png" alt="">
-					<img v-if="item.sendSt == '派送中'" src="../assets/images/j_ico02.png" alt="">
-					<img v-if="item.sendSt == '已签收'" src="../assets/images/j_ico03.png" alt="">
-					<img v-if="item.sendSt == '已退回'" src="../assets/images/j_ico04.png" alt="">
-					<p>{{item.sendSt}}</p>
+			</div>
+			<!-- 按天按月 -->
+			<div class="change">
+				<div class="time">
+					<p @click="changetimeNew()" class="timeactive">日期筛选</p>
+					<!-- <p @click="changetime(1)" :class="[time==1?'timeactive':'']">按月</p>
+			<p @click="changetime(2)" :class="[time==2?'timeactive':'']">按天</p> -->
 				</div>
-				<div>
-					<p>{{item.receiveCity}}</p>
-					<p>{{item.receiver}}</p>
+				<div class="datapicker">
+					<p @click="showPicker = true">{{ timevalue }}</p>
 				</div>
 			</div>
-			<!-- <div class="logistics_bottom">
+			<!-- 订单列表 -->
+			<div class="list">
+				<div class="logistics" v-for="item in mailList">
+					<div class="logistics_top">
+						<p>订单号:<span :id="'copytkl' + item.expressNo">{{ item.expressNo }}</span></p>
+						<!-- <p > -->
+						<img :id="'fz' + item.expressNo" @click="copyLink(item.expressNo)" data-clipboard-action="copy"
+							:data-clipboard-target="'#copytkl' + item.expressNo" src="../assets/images/2022copy.png"
+							alt="">
+						<!-- </p> -->
+					</div>
+					<div class="logistics_center" @click="mailDetail(item.id)">
+						<div>
+							<p>{{ item.sendCity }}</p>
+							<p>{{ item.sender }}</p>
+						</div>
+						<div>
+							<img v-if="item.sendSt == '待揽件'" src="../assets/images/j_ico01.png" alt="">
+							<img v-if="item.sendSt == '已揽收'" src="../assets/images/j_ico01.png" alt="">
+							<img v-if="item.sendSt == '派送中'" src="../assets/images/j_ico02.png" alt="">
+							<img v-if="item.sendSt == '已签收'" src="../assets/images/j_ico03.png" alt="">
+							<img v-if="item.sendSt == '已退回'" src="../assets/images/j_ico04.png" alt="">
+							<p>{{ item.sendSt }}</p>
+						</div>
+						<div>
+							<p>{{ item.receiveCity }}</p>
+							<p>{{ item.receiver }}</p>
+						</div>
+					</div>
+					<!-- <div class="logistics_bottom">
 				<p>已揽件:顺丰速运已取快件</p>
 				<p>接收时间:2022-10-23 10:11</p>
 			</div> -->
-		</div>
-		<!-- <div class="logistics">
+				</div>
+				<!-- <div class="logistics">
 			<div class="logistics_top">
 				<p>订单号:CX223232322</p>
 				<img src="../assets/images/2022copy.png" alt="">
@@ -78,7 +80,7 @@
 				<p>接收时间:2022-10-23 10:11</p>
 			</div>
 		</div> -->
-		<!-- <div class="logistics">
+				<!-- <div class="logistics">
 			<div class="logistics_top">
 				<p>订单号:CX223232322</p>
 				<img src="../assets/images/2022copy.png" alt="">
@@ -102,7 +104,7 @@
 				<p>预计送达时间:2022-10-23 10:11</p>
 			</div>
 		</div> -->
-		<!-- <div class="logistics">
+				<!-- <div class="logistics">
 			<div class="logistics_top">
 				<p>订单号:CX223232322</p>
 				<img src="../assets/images/2022copy.png" alt="">
@@ -125,7 +127,7 @@
 				<p>签收时间:2022-10-23 10:11</p>
 			</div>
 		</div> -->
-		<!-- <div class="logistics">
+				<!-- <div class="logistics">
 			<div class="logistics_top">
 				<p>订单号:CX223232322</p>
 				<img src="../assets/images/2022copy.png" alt="">
@@ -149,11 +151,12 @@
 				<p>退回时间:2022-10-23 10:11</p>
 			</div>
 		</div> -->
-	</div>
-	<!-- 日历选择 -->
-	<van-calendar color="#00c4b8" v-model:show="showPicker" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
-	<!-- 时间选择 -->
-	<!-- <van-popup v-model:show="showPicker" position="bottom">
+			</div>
+			<!-- 日历选择 -->
+			<van-calendar color="#00c4b8" v-model:show="showPicker" type="range" :min-date="minDate" :max-date="maxDate"
+				@confirm="onConfirm" />
+			<!-- 时间选择 -->
+			<!-- <van-popup v-model:show="showPicker" position="bottom">
 	  <van-datetime-picker
 		:type="showPickertype"
 		:max-date="maxDate"
@@ -161,266 +164,297 @@
 		@cancel="showPicker = false"
 	  />
 	</van-popup> -->
-	<!-- <tabbar></tabbar> -->
-</div>
+			<!-- <tabbar></tabbar> -->
+		</div>
 	</div>
-	
+
 </template>
 
 <script>
-import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename: "我的寄件",
-				expressType:'外部件',
-				userId:'',
-				mailList:"",
-				index:1,
-				time:1,
-				value:"",
-				timevalue:"请选择日期范围",
-				showPicker:false,
-				showPickertype:"year-month",
-				minDate: new Date(2022, 0, 1),
-				maxDate: new Date(),
-				startTime:'',
-				endTime:'',
+import { Toast, Dialog } from 'vant'
+import { getListByUser } from '../api/index'
+export default {
+	data() {
+		return {
+			titlename: "我的寄件",
+			expressType: '外部件',
+			userId: '',
+			mailList: "",
+			index: 1,
+			time: 1,
+			value: "",
+			timevalue: "请选择日期范围",
+			showPicker: false,
+			showPickertype: "year-month",
+			minDate: new Date(2022, 0, 1),
+			maxDate: new Date(),
+			startTime: '',
+			endTime: '',
+			pageSize: {
+				page: 1,
+				limit: 10
 			}
+		}
+	},
+	created: function () {
+		this.isLogin();
+		this.userId = localStorage.getItem("userId");
+		this.getmailList();
+	},
+	methods: {
+		//寄件详情
+		mailDetail(id) {
+			this.$router.push({ path: '/MailInfo', query: { id: id } })
 		},
-		created:function(){
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
+		//单号搜索
+		onSearch(val) {
 			this.getmailList();
 		},
-		methods:{
-			//寄件详情
-			mailDetail(id){		  
-				this.$router.push({path:'/MailInfo',query:{id:id}})
-			},
-			//单号搜索
-			onSearch(val) {
-				this.getmailList();
-			},
-			//复制
-			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("复制失败")
-			  });
-			},
-			//寄件查询
-			getmailList(){
-				Toast.loading({
-				    message: '加载中...',
-				    forbidClick: true,
-				    duration:0
-				});
-				this.$http.post(this.$store.state.host+"/mailRoute/getPersonalMailList.do",{userId:this.userId,
-				expressType:this.expressType,
-				expressNo:this.value,
-				startTime:this.startTime,
-				endTime:this.endTime},{emulateJSON:true})
-					.then(res=>{
-						//发送成功
-						if(res.body.msg=='success'){
-							this.mailList = res.body.mailList
-						}
-						Toast.clear()
-				},res=>{
-						 //发送失败
-					Toast("网络错误!")
-				})
-				Toast.clear()
-			},
-			tab(obj){//外部件、内部件切换
-				this.index=obj
-				if(this.index == 1){
-					this.expressType = '外部件'
-				}
-				if(this.index == 2){
-					this.expressType = '内部件'
-				}
-				this.getmailList();
-			},
-			changetime(obj){//选择按月份、按天数
-				this.time=obj
-				this.timevalue="请选择"
-				if(obj==1){//按月份时间选择器为年-月
-					this.showPickertype="year-month"
-				}
-				if(obj==2){//按天时间选择器为年-月-日
-					this.showPickertype="date"
-				}
-			},
-			/* onConfirm(value){//时间确定
-			    let year,month,day
-				let date=new Date(value)
-				year=date.getFullYear()
-				month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1)
-				
-				if(this.time==1){
-					this.timevalue=year+'-'+month
-				}
-				if(this.time==2){
-					day=date.getDate()>9?date.getDate():'0'+date.getDate()
-					this.timevalue=year+'-'+month+'-'+day
-				}
-				this.showPicker=false
-			}, */
-			onConfirm(values){//时间确定
-				const [start, end] = values;
-				this.showPicker = false;
-				this.startTime = this.formatDate(start);
-				this.endTime = this.formatDate(end);
-				this.timevalue = this.startTime+ '~' +this.endTime;
-				this.getmailList();
-			},
-			formatDate(date){
-				let year,month,day
-				year=date.getFullYear()
-				month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1)
-				day=date.getDate()>9?date.getDate():'0'+date.getDate()
-				return (year+'-'+month+'-'+day)
+		//复制
+		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("复制失败")
+			});
+		},
+		//寄件查询
+		async getmailList() {
+			// Toast.loading({
+			// 	message: '加载中...',
+			// 	forbidClick: true,
+			// 	duration: 0
+			// });
+
+			let parmas = {
+				// expressNo:this.value,
+				startTime: this.startTime,
+				endTime: this.endTime
 			}
-			
+			const res = await getListByUser({ ...this.pageSize, ...parmas })
+			this.mailList = res.data.filter((item) => {
+				return item.type == this.index
+			})
+
+
+
+
+
+			// Toast.clear()
+
+
+
+		},
+		tab(obj) {//外部件、内部件切换
+			this.index = obj
+			if (this.index == 1) {
+				this.expressType = '外部件'
+			}
+			if (this.index == 2) {
+				this.expressType = '内部件'
+			}
+			this.getmailList();
 		},
-		computed:{
+		changetime(obj) {//选择按月份、按天数
+			this.time = obj
+			this.timevalue = "请选择"
+			if (obj == 1) {//按月份时间选择器为年-月
+				this.showPickertype = "year-month"
+			}
+			if (obj == 2) {//按天时间选择器为年-月-日
+				this.showPickertype = "date"
+			}
+		},
+		/* onConfirm(value){//时间确定
+			let year,month,day
+			let date=new Date(value)
+			year=date.getFullYear()
+			month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1)
 			
+			if(this.time==1){
+				this.timevalue=year+'-'+month
+			}
+			if(this.time==2){
+				day=date.getDate()>9?date.getDate():'0'+date.getDate()
+				this.timevalue=year+'-'+month+'-'+day
+			}
+			this.showPicker=false
+		}, */
+		onConfirm(values) {//时间确定
+			const [start, end] = values;
+			this.showPicker = false;
+			this.startTime = this.formatDate(start);
+			this.endTime = this.formatDate(end);
+			this.timevalue = this.startTime + '~' + this.endTime;
+			this.getmailList();
+		},
+		formatDate(date) {
+			let year, month, day
+			year = date.getFullYear()
+			month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
+			day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
+			return (year + '-' + month + '-' + day)
 		}
+
+	},
+	computed: {
+
 	}
+}
 </script>
 
 <style lang="less" scoped="">
-	.content{
-		font-size: .3rem;
-		//padding: .33rem;
-		padding: .33rem .33rem 1.2rem;
-		/deep/.van-search{
-			padding: 0px;
-			margin-bottom: .3rem;
-			.van-search__content{
-				background: white;
+.content {
+	font-size: .3rem;
+	//padding: .33rem;
+	padding: .33rem .33rem 1.2rem;
+
+	/deep/.van-search {
+		padding: 0px;
+		margin-bottom: .3rem;
+
+		.van-search__content {
+			background: white;
+		}
+	}
+
+	.tab {
+		font-size: .36rem;
+		color: #00c4b8;
+		padding-bottom: .3rem;
+		background: white;
+
+		div {
+			display: flex;
+			border: .01rem solid #00c4b8;
+			text-align: center;
+			border-radius: .05rem;
+
+			p {
+				flex: 1;
+				padding: .15rem 0rem;
+			}
+
+			p.active {
+				background: #00c4b8;
+				color: white;
 			}
 		}
-		.tab{
-			font-size: .36rem;
-			color: #00c4b8;
-			padding-bottom: .3rem;
-			background: white;
-			div{
-				display: flex;
-				border: .01rem solid #00c4b8;
-				text-align: center;			
-				border-radius: .05rem;
-				p{
-					flex: 1;
-					padding: .15rem 0rem;				
-				}
-				p.active{
-					background: #00c4b8;
-					color: white;
-				}
-			}			
+	}
+
+	.change {
+		color: #00c4b8;
+		margin-bottom: .3rem;
+		padding: 0rem .3rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: white;
+		padding-bottom: .3rem;
+
+		.datapicker {
+			color: #9f9d9d;
+			font-size: .3rem;
+
+			p:after {
+				content: "";
+				display: inline-block;
+				margin-left: .1rem;
+				width: .15rem;
+				height: .15rem;
+				border-right: .05rem solid #9f9d9d;
+				border-bottom: .05rem solid #9f9d9d;
+				transform: rotate(45deg);
+				position: relative;
+				top: -.05rem;
+			}
 		}
-		.change{
-			color: #00c4b8;
-			margin-bottom: .3rem;
-			padding: 0rem .3rem;
+
+		.time {
+			width: 2rem;
+			display: flex;
+			border: .01rem solid #00c4b8;
+			text-align: center;
+			border-radius: .05rem;
+			font-size: .26rem;
+
+			p {
+				flex: 1;
+				padding: .1rem 0rem;
+			}
+
+			p.timeactive {
+				background: #00c4b8;
+				color: white;
+			}
+		}
+	}
+
+	.logistics {
+		background: white;
+		border-radius: .1rem;
+		padding: .15rem;
+		margin-bottom: .3rem;
+
+		.logistics_top {
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
-			background: white;
-			padding-bottom: .3rem;
-			.datapicker{
-				color: #9f9d9d;
-				font-size: .3rem;
-				p:after{
-					content: "";
-					display: inline-block;
-					margin-left: .1rem;
-					width: .15rem;
-					height: .15rem;
-					border-right: .05rem solid #9f9d9d;
-					border-bottom: .05rem solid #9f9d9d;
-					transform: rotate(45deg);
-					position: relative;
-					top: -.05rem;
-				}
+
+			img {
+				width: 12px;
+				height: 14px;
+				margin-left: .1rem;
 			}
-			.time{
-				width: 2rem;
-				display: flex;
-				border: .01rem solid #00c4b8;
-				text-align: center;			
-				border-radius: .05rem;
-				font-size: .26rem;
-				p{
-					flex: 1;
-					padding: .1rem 0rem;				
-				}
-				p.timeactive{
-					background: #00c4b8;
-					color: white;
-				}
-			}			
 		}
-		.logistics{
-			background: white;
-			border-radius: .1rem;
-			padding: .15rem;
-			margin-bottom: .3rem;
-			.logistics_top{
-				display: flex;
-				align-items: center;
-				img{
-					width: 12px;
-					height: 14px;
-					margin-left: .1rem;
+
+		.logistics_center {
+			padding: .3rem .6rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: .26rem;
+			color: #9f9d9d;
+
+			div:nth-of-type(1) {
+				text-align: center;
+
+				p:nth-of-type(1) {
+					font-size: .36rem;
+					font-weight: bold;
+					color: #333;
+					margin-bottom: .2rem;
 				}
 			}
-			.logistics_center{
-				padding:.3rem .6rem;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				font-size: .26rem;
-				color: #9f9d9d;
-				div:nth-of-type(1){
-					text-align: center;
-					p:nth-of-type(1){
-						font-size: .36rem;
-						font-weight: bold;
-						color: #333;
-						margin-bottom: .2rem;
-					}
-				}
-				div:nth-of-type(2){
-					text-align: center;
-					color: #333;
+
+			div:nth-of-type(2) {
+				text-align: center;
+				color: #333;
+				font-weight: bold;
+			}
+
+			div:nth-of-type(3) {
+				text-align: center;
+
+				p:nth-of-type(1) {
+					font-size: .36rem;
 					font-weight: bold;
-				}
-				div:nth-of-type(3){
-					text-align: center;
-					p:nth-of-type(1){
-						font-size: .36rem;
-						font-weight: bold;
-						color: #333;
-						margin-bottom: .2rem;
-					}
+					color: #333;
+					margin-bottom: .2rem;
 				}
 			}
-			.logistics_bottom{
-				color: #9f9d9d;
-				font-size: .26rem;
-				p{
-					padding-top: .1rem;
-				}
+		}
+
+		.logistics_bottom {
+			color: #9f9d9d;
+			font-size: .26rem;
+
+			p {
+				padding-top: .1rem;
 			}
 		}
 	}
+}
 </style>

src/pages/multipleaddressbook.vue

@@ -4,315 +4,331 @@
 		<!-- 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>		
+				<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 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 :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)">	
+							</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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
 			</div>
 		</div>
-		
+
 		<!-- 收件人 -->
-		<div v-if="index==2">
+		<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 :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>
 							<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">
+							<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>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
 			</div>
 		</div>
-	</div>	
+	</div>
 </template>
 
 <script>
-	import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:1,
-				userId:'',
-				addressList:[]
-			}
+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()
 		},
-		created:function(){
-			this.isLogin();
-			this.userId = localStorage.getItem("userId")
-			//获取参数
-			this.index = this.$route.query.active
-			this.getData();
+		link(obj) {
+			this.$router.push({ path: "/Newaddress", query: { type: obj } })
 		},
-		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
+		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=>{
-						 //发送失败
+				}, res => {
+					//发送失败
 					Toast("网络错误!")
 				})
-				Toast.clear()
-			},
-			del(id){
-				Dialog.confirm({ title: '', message: '确定删除吗', })
-				 .then(() => {
+			Toast.clear()
+		},
+		del(id) {
+			Dialog.confirm({ title: '', message: '确定删除吗', })
+				.then(() => {
 					Toast.loading({
-					    message: '删除中...',
-					    forbidClick: true,
-					    duration:0
+						message: '删除中...',
+						forbidClick: true,
+						duration: 0
 					});
-					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
-						.then(res=>{
+					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
+						.then(res => {
 							//发送成功
-							if(res.body.msg=='success'){
+							if (res.body.msg == 'success') {
 								this.getData()
-							}else{
+							} else {
 								Toast("删除失败!")
 							}
-						Toast.clear()
-					},res=>{
-							 //发送失败
-						Toast("网络错误!")
-					})
+							Toast.clear()
+						}, res => {
+							//发送失败
+							Toast("网络错误!")
+						})
 					Toast.clear()
 				})
 				.catch(() => {
-						//  on cancel 
+					//  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:{
-			
+		//跳去编辑页
+		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;
-				}
+.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{
+
+	}
+
+	.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;
-					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;
+					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;
 						}
-						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;
-							}
+
+						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;
-							}
+				}
+
+				.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%;
 			}
 		}
+
+	}
+
+
+
+	.btn-jj {
+		padding: .33rem;
+
+		button {
+			width: 100%;
+		}
 	}
-	
+}
 </style>

src/pages/my.vue

@@ -1,171 +1,182 @@
 <template>
 	<div class="body">
-    <!-- 选择类型 -->
-    <!-- <back :title="titlename"></back> -->
-    <div class="head">
-		<template v-if="headimgurl!=null&&headimgurl!=''">
-			<img :src="headimgurl" alt="">
-		</template>
-		<template v-else>
-			<img src="../assets/images/foot_icon1.png" alt="">
-		</template>
-		
-		<div>
-			<p>姓名：{{user.name}}</p>
-			<p>{{user.phone}}</p>
+		<!-- 选择类型 -->
+		<!-- <back :title="titlename"></back> -->
+		<div class="head">
+			<template v-if="headimgurl != null && headimgurl != ''">
+				<img :src="headimgurl" alt="">
+			</template>
+			<template v-else>
+				<img src="../assets/images/foot_icon1.png" alt="">
+			</template>
+
+			<div>
+				<!-- <p>姓名：{{user.name}}</p> -->
+				<!-- <p>{{user.phone}}</p> -->
+			</div>
+			<img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt="">
 		</div>
-		<img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt="">
-	</div>
-    <div class="list">
-      <router-link to="/Personinfomation">
-        <img src="../assets/images/my_icon1.png" alt="">
-        <span>个人信息</span>
-      </router-link>
-      <router-link to="/Search">
-        <img src="../assets/images/my_icon2.png" alt="">
-        <span>我的快件</span>
-      </router-link>
-      <router-link to="/Audit">
-        <img src="../assets/images/my_icon2.png" alt="">
-        <span>审核</span>
-      </router-link>
-      <!-- <router-link to="/Appointmentlist">
+		<div class="list">
+			<router-link to="/Personinfomation">
+				<img src="../assets/images/my_icon1.png" alt="">
+				<span>个人信息</span>
+			</router-link>
+			<!-- <router-link to="/Search">
+				<img src="../assets/images/my_icon2.png" alt="">
+				<span>我的快件</span>
+			</router-link> -->
+			<!-- <router-link to="/Audit">
+				<img src="../assets/images/my_icon2.png" alt="">
+				<span>审核</span>
+			</router-link> -->
+			<!-- <router-link to="/Appointmentlist">
         <img src="../assets/images/my_icon3.png" alt="">
         <span>客服</span>
       </router-link> -->
-      <router-link :to="{ path: 'Myaddressbook', query: { active: 1 }}">
-        <img src="../assets/images/my_icon4.png" alt="">
-        <span>地址簿维护</span>
-      </router-link>
-      <router-link to="/SuggestList">
-		<img src="../assets/images/my_icon5.png" alt="" style="">
-		<span v-if="notReadNo > 0" style="font-size: .2rem;text-align:center;color: white;position: absolute;left: 0.3rem;top: 0.15rem;border-radius: 50%;background: red;width: 0.28rem;line-height: 0.28rem;">{{notReadNo}}</span>
-        <span>意见建议</span>
-      </router-link>
-      <router-link to="/Setting">
-        <img src="../assets/images/my_icon6.png" alt="">
-        <span>设置</span>
-      </router-link>
-    </div>
-    <!-- 底部 -->
-    <tabbar></tabbar>
+			<router-link :to="{ path: 'Myaddressbook', query: { active: 1 } }">
+				<img src="../assets/images/my_icon4.png" alt="">
+				<span>地址簿维护</span>
+			</router-link>
+			<!-- <router-link to="/SuggestList">
+				<img src="../assets/images/my_icon5.png" alt="" style="">
+				<span v-if="notReadNo > 0"
+					style="font-size: .2rem;text-align:center;color: white;position: absolute;left: 0.3rem;top: 0.15rem;border-radius: 50%;background: red;width: 0.28rem;line-height: 0.28rem;">{{ notReadNo }}</span>
+				<span>意见建议</span>
+			</router-link> -->
+			<router-link to="/Setting">
+				<img src="../assets/images/my_icon6.png" alt="">
+				<span>设置</span>
+			</router-link>
+		</div>
+		<!-- 底部 -->
+		<tabbar></tabbar>
 	</div>
 
 </template>
 
 <script>
 export default {
-    data() {
-      return {
-        userId:"",
-        user:[],
-		headimgurl:'',
-		notReadNo:'',//未查看数量（意见建议）
-      };
-    },
-    created:function(){
-			this.isLogin();
+	data() {
+		return {
+			userId: "",
+			user: [],
+			headimgurl: '',
+			notReadNo: '',//未查看数量（意见建议）
+		};
+	},
+	created: function () {
+		this.isLogin();
 		this.userId = localStorage.getItem("userId");
 		this.getUser();
 		this.headimgurl = localStorage.getItem('headimgurl');
 		this.getSuggestList();
-    },
-    methods:{
+	},
+	methods: {
 		//跳转
-		getSuggestList(){
-			this.$http.post(this.$store.state.host+"/solic/getSuggestList.do",{
-				userId:this.userId
-			},{emulateJSON:true})
-				.then(res=>{
+		getSuggestList() {
+			this.$http.post(this.$store.state.host + "/solic/getSuggestList.do", {
+				userId: this.userId
+			}, { emulateJSON: true })
+				.then(res => {
 					//发送成功
-					if(res.body.msg=='success'){
+					if (res.body.msg == 'success') {
 						this.notReadNo = res.body.notReadNo;
 					}
-			},res=>{
-					 //发送失败
-			})
+				}, res => {
+					//发送失败
+				})
 		}
 
-    }
-  };
+	}
+};
 </script>
 
 <style lang="less" scoped>
-  body{
-    background: #fbfbfb;
-  }
-  .body{
-    padding-bottom: 1.5rem;
-	  .head{
-		  padding:.43rem .38rem;
-		  font-size: .24rem;
-		  color: #999;
-		  display: flex;
-		  background: white;
-		  flex-wrap: wrap;
-		  position: relative;
-		  img{
-			  width: 1.48rem;
-			  height: 1.48rem;
-			  border-radius: 50%;
-			  margin-right: .4rem;
-		  }
-		  div{
-			  p:nth-of-type(1){
-				  font-size: .36rem;
-				  font-weight: bold;
-				  color: #333;
-				  margin-bottom: .2rem;
-				  padding-top: .3rem;
-			  }
-		  }
-		  div:after{
-			  content: "";
-			  display: block;
-			  width: .2rem;
-			  height: .2rem;
-			  border-left: .01rem solid #333;
-			  border-top: .01rem solid #333;
-			  transform: rotate(135deg);
-			  position: absolute;
-			  right: .38rem;
-			  top: 1rem;
-		  }
-	  }
-    .list{
-      background: white;
-      margin-top: .36rem;
-      border-radius: .05rem;
-      a{
-        font-size: .3rem;
-        font-weight: bold;
-        display: block;
-        color: #333;
-        padding:.3rem .4rem;
-        border-bottom:1px solid #f4f3f3;
+body {
+	background: #fbfbfb;
+}
+
+.body {
+	padding-bottom: 1.5rem;
+
+	.head {
+		padding: .43rem .38rem;
+		font-size: .24rem;
+		color: #999;
+		display: flex;
+		background: white;
+		flex-wrap: wrap;
 		position: relative;
-        img{
-          width: .4rem;
-          height: .4rem;
-        }
-        span{
-          position: relative;
-          top: -.075rem;
-          margin-left: .3rem;
-        }
-      }
-	  a:after{
-		  content: "";
-		  display: block;
-		  width: .2rem;
-		  height: .2rem;
-		  border-left: .01rem solid #b8b8b8;
-		  border-top: .01rem solid #b8b8b8;
-		  transform: rotate(135deg);
-		  position: absolute;
-		  right: .4rem;
-		  top: .4rem;
-	  }
-    }
-  }
+
+		img {
+			width: 1.48rem;
+			height: 1.48rem;
+			border-radius: 50%;
+			margin-right: .4rem;
+		}
+
+		div {
+			p:nth-of-type(1) {
+				font-size: .36rem;
+				font-weight: bold;
+				color: #333;
+				margin-bottom: .2rem;
+				padding-top: .3rem;
+			}
+		}
+
+		div:after {
+			content: "";
+			display: block;
+			width: .2rem;
+			height: .2rem;
+			border-left: .01rem solid #333;
+			border-top: .01rem solid #333;
+			transform: rotate(135deg);
+			position: absolute;
+			right: .38rem;
+			top: 1rem;
+		}
+	}
+
+	.list {
+		background: white;
+		margin-top: .36rem;
+		border-radius: .05rem;
+
+		a {
+			font-size: .3rem;
+			font-weight: bold;
+			display: block;
+			color: #333;
+			padding: .3rem .4rem;
+			border-bottom: 1px solid #f4f3f3;
+			position: relative;
+
+			img {
+				width: .4rem;
+				height: .4rem;
+			}
+
+			span {
+				position: relative;
+				top: -.075rem;
+				margin-left: .3rem;
+			}
+		}
+
+		a:after {
+			content: "";
+			display: block;
+			width: .2rem;
+			height: .2rem;
+			border-left: .01rem solid #b8b8b8;
+			border-top: .01rem solid #b8b8b8;
+			transform: rotate(135deg);
+			position: absolute;
+			right: .4rem;
+			top: .4rem;
+		}
+	}
+}
 </style>

src/pages/myaddressbook.vue

@@ -3,17 +3,17 @@
 		<back :title="titlename"></back>
 		<!-- table切换 -->
 
-	
+
 		<!-- 收件人 -->
 		<div style="margin-top: 20px;">
-			<div class="jjinfo" v-for="item in addressList">
+			<div class="jjinfo" v-for="item in addressList" :key="item.id">
 				<div>
 					<div class="jj">
 						<div class="jjaddress">
 							<p style="background: #fa9c22;">收</p>
 							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
+								<p>{{ item.addresseeName }} {{ item.addresseePhone }}</p>
+								<p>{{ item.addresseeAddress }} </p>
 							</div>
 						</div>
 						<div class="cz">
@@ -44,13 +44,18 @@
 
 <script>
 import { Toast, Dialog } from 'vant'
+import { deleteUserAddressById, getUserAddressList } from '../api/addressBoook'
 export default {
 	data() {
 		return {
 			titlename: "收件人地址簿",
 			index: 1,
 			userId: '',
-			addressList: []
+			addressList: [],
+			parmas: {
+				page: 1,
+				limit: 10
+			}
 		}
 	},
 	created: function () {
@@ -67,6 +72,7 @@ export default {
 			let clipboard = new this.clipboard("#fz" + id);
 			clipboard.on('success', function () {
 				//window.console.log('00')
+				_this.$toast("复制成功")
 			});
 			clipboard.on('error', function () {
 				_this.$toast("复制失败")
@@ -79,46 +85,39 @@ export default {
 		link(obj) {
 			this.$router.push({ path: "/Newaddress", query: { type: obj } })
 		},
-		getData() {
+		// 获取数据
+		async getData() {
 			Toast.loading({
 				message: '加载中...',
 				forbidClick: true,
 				duration: 0
 			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: 2 }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
+			const res = await getUserAddressList({ ...this.parmas })
+			if (res.code == 0) {
+				this.addressList = res.data
+			} else {
+				Toast("网络错误!")
+			}
 			Toast.clear()
+			console.log(res, 'res')
 		},
+
+		// 删除
 		del(id) {
 			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
+				.then(async () => {
 					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("网络错误!")
-						})
+					const res = await deleteUserAddressById({ id: id })
+					if (res.msg == 'success') {
+						this.getData()
+						Toast("删除成功!")
+					} else {
+						Toast("删除失败!")
+					}
 					Toast.clear()
 				})
 				.catch(() => {

src/pages/newaddress.vue

@@ -16,215 +16,321 @@
 		</div>
 		<div class="form">
 			<van-form @submit="onSubmit">
-				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false}]" />
+				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
 				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
-					:rules="[{ required: false}]" />
-				<van-field v-model="telPhone" maxlength="20" type="text" name="座机" label="座机" placeholder="请输入座机"
-					:rules="[{ required: false}]" />
-				<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-					@click="areashow = true" :rules="[{ required: false}]" />
+					:rules="[{ required: false }]" />
+				<!-- <van-field v-model="telPhone" maxlength="20" type="text" name="座机" label="座机" placeholder="请输入座机"
+					:rules="[{ required: false }]" /> -->
+				<!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
+					@click="areashow = true" :rules="[{ required: false }]" /> -->
+				<!-- 省 -->
+				<van-field readonly clickable name="picker" :value="valueA" label="省" placeholder="点击选择省"
+					@click="showPickerA = true" />
+				<van-popup v-model="showPickerA" position="bottom">
+					<van-picker show-toolbar :columns="province" @confirm="onConfirmA" @cancel="showPickerA = false">
+						<template v-slot:option="slotProps">
+							<span>{{ slotProps.label }}</span>
+						</template>
+					</van-picker>
+				</van-popup>
+				<!-- 市 -->
+				<van-field readonly clickable name="picker" :value="valueB" label="市" placeholder="点击选择市"
+					@click="showPickerB = true" />
+				<van-popup v-model="showPickerB" position="bottom">
+					<van-picker show-toolbar :columns="columnsListA" @confirm="onConfirmB"
+						@cancel="showPickerB = false">
+						<template v-slot:option="slotProps">
+							<span>{{ slotProps.label }}</span>
+						</template>
+					</van-picker>
+				</van-popup>
+				<!-- 区 -->
+				<van-field readonly clickable name="picker" :value="valueC" label="区" placeholder="点击选择区"
+					@click="showPickerC = true" />
+				<van-popup v-model="showPickerC" position="bottom">
+					<van-picker show-toolbar :columns="columnsListB" @confirm="onConfirmC"
+						@cancel="showPickerC = false">
+						<template v-slot:option="slotProps">
+							<span>{{ slotProps.label }}</span>
+						</template>
+					</van-picker>
+				</van-popup>
+
 				<van-field v-model="address" maxlength="50" name="详细地址" label="详细地址" placeholder="请输入详细地址"
-					:rules="[{ required: false}]" />
+					:rules="[{ required: false }]" />
 				<div style="margin-top: 16px;">
 					<van-button color="#00c4b8" block type="info" native-type="submit" :disabled="disabled">确定
 					</van-button>
 				</div>
 			</van-form>
-			<!-- 城市选择 -->
+			<!-- 城市选择
 			<van-popup v-model="areashow" position="bottom">
 				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-			</van-popup>
+			</van-popup> -->
 		</div>
 	</div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	import {
-		Toast
-	} from 'vant'
-	export default {
-		data() {
-			return {
-				titlename: "寄件人",
-				name: "",
-				phone: "",
-				telPhone: "",
-				city: "",
-				address: "",
-				areashow: false,
-				type: '',
-				disabled: false,
-				userId: '',
-				message: '', //自动识别
-			}
+import areaList from "@/script/areas.js"
+import { saveAddress, listByParent } from '../api/addressBoook'
+import {
+	Toast
+} from 'vant'
+export default {
+	data() {
+		return {
+			titlename: "寄件人",
+			name: "",
+			phone: "",
+			telPhone: "",
+			city: "",
+			address: "",
+			areashow: false,
+			type: '',
+			disabled: false,
+			userId: '',
+			message: '', //自动识别
+			// 省
+			province: [],
+			valueA: '',
+			columnsListA: [],
+			showPickerA: false,
+			// 市
+			valueB: '',
+			columnsListB: [],
+			showPickerB: false,
+			// 区
+			valueC: '',
+			columnsC: [],
+			showPickerC: false,
+		}
+	},
+	// setup() {
+	//     this.afterRead = (file) => {
+	//       // 此时可以自行将文件上传至服务器
+	//       console.log(file);
+	//     };
+	// 	},
+	created: function () {
+		this.onConfirm()
+		this.isLogin();
+		this.userId = localStorage.getItem('userId');
+		this.type = this.$route.query.type
+		if (this.type == 1) {
+			this.titlename = "新建寄件人地址"
+		}
+		if (this.type == 2) {
+			this.titlename = "新建收件人地址"
+		}
+	},
+
+	methods: {
+		afterRead(file) {
+			// console.log(encodeURIComponent(file.content))
+			// return;
+			this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
+				type: 3,
+				textStr: encodeURIComponent(file.content)
+			}, {
+				emulateJSON: true
+			})
+				.then(res => {
+					//发送成功
+					res.body.words_result.forEach((v, i) => {
+						this.message += v.words + " "
+					})
+				}, res => {
+					//发送失败
+					Toast('识别错误')
+				})
+			//console.log(file)
 		},
-		// setup() {
-		//     this.afterRead = (file) => {
-		//       // 此时可以自行将文件上传至服务器
-		//       console.log(file);
-		//     };
-		// 	},
-		created: function() {
-			this.isLogin();
-			this.userId = localStorage.getItem('userId');
-			this.type = this.$route.query.type
-			if (this.type == 1) {
-				this.titlename = "新建寄件人地址"
-			}
-			if (this.type == 2) {
-				this.titlename = "新建收件人地址"
+		//识别
+		shibie() {
+			//this.message = this.message.replace(/\n|\r/, " ").replace(/\n|\r/g, "");
+			// var arr = this.message.split(" ");
+			// if (arr.length > 5) {
+			// 	this.name = arr[0]
+			// 	this.phone = arr[1]
+			// 	this.city = arr[2] + ' ' + arr[3] + ' ' + arr[4]
+			// 	this.address = arr[5]
+			// } else {
+			// 	Toast('抱歉 未能识别')
+			// 	return
+			// }
+			if (this.message == '') {
+				Toast('请粘贴地址')
+				return
 			}
+
+			this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
+				type: 1,
+				textStr: this.message
+			}, {
+				emulateJSON: true
+			})
+				.then(res => {
+					//发送成功
+					this.name = res.body.person
+					this.phone = res.body.phonenum
+					this.city = res.body.province + ' ' + res.body.city + ' ' + res.body.county
+					this.address = res.body.detail
+				}, res => {
+					//发送失败
+					Toast('识别错误')
+				})
+
 		},
-		methods: {
-			afterRead(file) {
-				// console.log(encodeURIComponent(file.content))
-				// return;
-				this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
-						type: 3,
-						textStr: encodeURIComponent(file.content)
-					}, {
-						emulateJSON: true
-					})
-					.then(res => {
-						//发送成功
-						res.body.words_result.forEach((v, i) => {
-						    this.message += v.words + " "
-						})
-					}, res => {
-						//发送失败
-						Toast('识别错误')
-					})
-				//console.log(file)
-			},
-			//识别
-			shibie() {
-				//this.message = this.message.replace(/\n|\r/, " ").replace(/\n|\r/g, "");
-				// var arr = this.message.split(" ");
-				// if (arr.length > 5) {
-				// 	this.name = arr[0]
-				// 	this.phone = arr[1]
-				// 	this.city = arr[2] + ' ' + arr[3] + ' ' + arr[4]
-				// 	this.address = arr[5]
-				// } else {
-				// 	Toast('抱歉 未能识别')
-				// 	return
-				// }
-				if (this.message == '') {
-					Toast('请粘贴地址')
-					return
-				}
 
-				this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
-						type: 1,
-						textStr: this.message
-					}, {
-						emulateJSON: true
-					})
-					.then(res => {
-						//发送成功
-						this.name = res.body.person
-						this.phone = res.body.phonenum
-						this.city = res.body.province + ' ' + res.body.city + ' ' + res.body.county
-						this.address = res.body.detail
-					}, res => {
-						//发送失败
-						Toast('识别错误')
-					})
 
-			},
-			onSubmit() {
+		async onSubmit() {
 
-				if (this.name == '' || this.name == undefined) {
-					Toast('请输入姓名')
-					return
-				}
+			if (this.name == '' || this.name == undefined) {
+				Toast('请输入姓名')
+				return
+			}
 
-				if ((this.phone == '' || this.phone == undefined) && (this.telPhone == '' || this.telPhone == undefined)) {
-					Toast('请填写手机号或者座机号')
+			if (this.phone == '' || this.phone == undefined) {
+				Toast('请填写手机号或者座机号')
+				return
+			}
+
+			if (this.phone != '' && this.phone != undefined) {
+				let regPhone = new RegExp(this.$store.state.regPhone)
+				if (!regPhone.test(this.phone)) {
+					Toast('手机号格式不正确')
 					return
 				}
+			}
 
-				if (this.phone != '' && this.phone != undefined) {
-					let regPhone = new RegExp(this.$store.state.regPhone)
-					if (!regPhone.test(this.phone)) {
-						Toast('手机号格式不正确')
-						return
-					}
-				}
+			if ((this.valueA == '' || this.valueA == undefined) && (this.valueB == '' || this.valueB == undefined) && (this.valueC == '' || this.valueC == undefined)) {
+				Toast('请选择省市区')
+				return
+			}
 
-				if (this.city == '' || this.city == undefined) {
-					Toast('请选择省市区')
-					return
-				}
+			if (this.address == '' || this.address == undefined) {
+				Toast('请输入详细地址')
+				return
+			}
 
-				if (this.address == '' || this.address == undefined) {
-					Toast('请输入详细地址')
-					return
-				}
+			this.disabled = true;
+			let parmas = {
+				addresseeName: this.name,
+				addresseePhone: this.phone,
+				addresseeProvince: this.valueA,
+				addresseeCity: this.valueB,
+				addresseeCounty: this.valueC,
+				addresseeAddress: this.address,
+				// sendNum: 2,
+			}
+			const res = await saveAddress({ ...parmas })
+			if (res.msg == 'success') {
+				Toast("保存成功");
+				this.$router.push('/Myaddressbook')
+			} else {
+				Toast("保存失败");
+			}
 
-				this.disabled = true;
-
-				this.$http.post(this.$store.state.host + "/personal/saveAddressInfo.do", {
-						userId: this.userId,
-						name: this.name,
-						phone: this.phone,
-						provinceAndCity: this.city,
-						address: this.address,
-						telPhone: this.telPhone,
-						type: this.type
-					}, {
-						emulateJSON: true
-					})
-					.then(res => {
-						//发送成功
-						if (res.body.msg == 'success') {
-							Toast("保存成功");
-							let that = this;
-							setTimeout(function() {
-								// if(that.type == 2){
-								// 	that.$router.push({path:"/Myaddressbook",query:{active:2}})
-								// }else{
-								that.$router.back()
-								//}	
-							}, 500)
-						} else {
-							Toast("保存失败");
-						}
-						this.disabled = false;
-					}, res => {
-						//发送失败
-						Toast("网络错误");
-						this.disabled = false;
-					})
-				this.disabled = false;
-			},
-			onConfirm3(e) { //确定
-				this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-				this.areashow = false
-				console.log(e)
-			},
+			// this.$http.post(this.$store.state.host + "/personal/saveAddressInfo.do", {
+			// 	userId: this.userId,
+			// 	name: this.name,
+			// 	phone: this.phone,
+			// 	provinceAndCity: this.city,
+			// 	address: this.address,
+			// 	telPhone: this.telPhone,
+			// 	type: this.type
+			// }, {
+			// 	emulateJSON: true
+			// })
+			// 	.then(res => {
+			// 		//发送成功
+			// 		if (res.body.msg == 'success') {
+			// 			Toast("保存成功");
+			// 			let that = this;
+			// 			setTimeout(function () {
+			// 				// if(that.type == 2){
+			// 				// 	that.$router.push({path:"/Myaddressbook",query:{active:2}})
+			// 				// }else{
+			// 				that.$router.back()
+			// 				//}	
+			// 			}, 500)
+			// 		} else {
+			// 			Toast("保存失败");
+			// 		}
+			// 		this.disabled = false;
+			// 	}, res => {
+			// 		//发送失败
+			// 		Toast("网络错误");
+			// 		this.disabled = false;
+			// 	})
+			// this.disabled = false;
 		},
-		computed: {
-			areaList() {
-				return areaList
-			}
+		// onConfirm3(e) { //确定
+		// 	this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
+		// 	this.areashow = false
+		// 	console.log(e)
+		// },
+		async onConfirm() {
+			const res = await listByParent({ parentAddressCode: 0 })
+			const cityList = res.pageDataList.map((item) => {
+				return {
+					value: item.address_code,
+					label: item.address_name + item.address_level
+				}
+			})
+			console.log("333333", res.pageDataList)
+			this.province = cityList
+		},
+		async onConfirmA({ value, label }) {
+			const res = await listByParent({ parentAddressCode: value })
+			const cityList = res.pageDataList.map((item) => {
+				return {
+					value: item.address_code,
+					label: item.address_name
+				}
+			})
+			this.valueA = label;
+			this.showPickerA = false;
+			this.columnsListA = cityList
+		},
+		async onConfirmB({ value, label }) {
+			const res = await listByParent({ parentAddressCode: value })
+			const cityList = res.pageDataList.map((item) => {
+				return {
+					value: item.address_code,
+					label: item.address_name
+				}
+			})
+			this.valueB = label;
+			this.showPickerB = false;
+			this.columnsListB = cityList
+		},
+		onConfirmC({ label }) {
+			this.valueC = label;
+			this.showPickerC = false;
+		}
+	},
+	computed: {
+		areaList() {
+			return areaList
 		}
 	}
+}
 </script>
 
 <style scoped lang="less">
-	.content {
+.content {
 
-		.form {
-			padding: .3rem;
-
-			/deep/.van-field__value {
-				input {
-					text-align: right;
-				}
+	.form {
+		padding: .3rem;
 
+		/deep/.van-field__value {
+			input {
+				text-align: right;
 			}
+
 		}
 	}
-</style>
+}
+</style>

src/pages/setting.vue

@@ -17,145 +17,148 @@
 		<div class="btn">
 			<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
 		</div>
-		
+
 	</div>
 
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				titlename: "设置",
-				userId: "",
-				user: []
-			};
-		},
-		created: function() {
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			//this.openid = '123'
+export default {
+	data() {
+		return {
+			titlename: "设置",
+			userId: "",
+			user: []
+		};
+	},
+	created: function () {
+		this.isLogin();
+		this.userId = localStorage.getItem("userId");
+		//this.openid = '123'
+	},
+	methods: {
+		//跳转
+		getUser() {
+			this.$http.post(this.$store.state.host + "/interface/getUser", {
+				userId: this.userId
+			}, {
+				emulateJSON: true
+			})
+				.then(res => {
+					//发送成功
+					if (res.body.code == 0) {
+						this.user = res.body.userPd;
+						console.log(this.user);
+					}
+
+					//if()
+				}, res => {
+					//发送失败
+				})
 		},
-		methods: {
-			//跳转
-			getUser() {
-				this.$http.post(this.$store.state.host + "/interface/getUser", {
-						userId: this.userId
-					}, {
-						emulateJSON: true
-					})
-					.then(res => {
-						//发送成功
-						if (res.body.code == 0) {
-							this.user = res.body.userPd;
-							console.log(this.user);
-						}
-
-						//if()
-					}, res => {
-						//发送失败
-					})
-			},
-			//退出登录
-			loginout(){
-				localStorage.removeItem("userId");
-				localStorage.removeItem("openid");
-				window.location.href ='http://47.101.145.23/wuliu/';
-			}
+		//退出登录
+		loginout() {
+			localStorage.removeItem("userId");
+			localStorage.removeItem("openid");
+			window.location.href = 'http://localhost:8081'
+			// window.location.href ='http://47.101.145.23/wuliu/';
 		}
-	};
+	}
+};
 </script>
 
 <style lang="less" scoped>
-	body {
-		background: #fbfbfb;
-	}
+body {
+	background: #fbfbfb;
+}
 
-	.body {
-		.head {
-			padding: .43rem .38rem;
-			font-size: .24rem;
-			color: #999;
-			display: flex;
-			background: white;
-			flex-wrap: wrap;
-			position: relative;
+.body {
+	.head {
+		padding: .43rem .38rem;
+		font-size: .24rem;
+		color: #999;
+		display: flex;
+		background: white;
+		flex-wrap: wrap;
+		position: relative;
 
-			img {
-				width: 1.48rem;
-				height: 1.48rem;
-				border-radius: 50%;
-				margin-right: .4rem;
-			}
-
-			div {
-				p:nth-of-type(1) {
-					font-size: .36rem;
-					font-weight: bold;
-					color: #333;
-					margin-bottom: .2rem;
-					padding-top: .3rem;
-				}
-			}
+		img {
+			width: 1.48rem;
+			height: 1.48rem;
+			border-radius: 50%;
+			margin-right: .4rem;
+		}
 
-			div:after {
-				content: "";
-				display: block;
-				width: .2rem;
-				height: .2rem;
-				border-left: .01rem solid #333;
-				border-top: .01rem solid #333;
-				transform: rotate(135deg);
-				position: absolute;
-				right: .38rem;
-				top: 1rem;
+		div {
+			p:nth-of-type(1) {
+				font-size: .36rem;
+				font-weight: bold;
+				color: #333;
+				margin-bottom: .2rem;
+				padding-top: .3rem;
 			}
 		}
 
-		.list {
-			background: white;
-			margin-top: .36rem;
-			border-radius: .05rem;
+		div:after {
+			content: "";
+			display: block;
+			width: .2rem;
+			height: .2rem;
+			border-left: .01rem solid #333;
+			border-top: .01rem solid #333;
+			transform: rotate(135deg);
+			position: absolute;
+			right: .38rem;
+			top: 1rem;
+		}
+	}
 
-			a {
-				font-size: .3rem;
-				display: block;
-				color: #333;
-				padding: .3rem .4rem;
-				border-bottom: 1px solid #f4f3f3;
-				position: relative;
+	.list {
+		background: white;
+		margin-top: .36rem;
+		border-radius: .05rem;
 
-				img {
-					width: .4rem;
-					height: .4rem;
-				}
+		a {
+			font-size: .3rem;
+			display: block;
+			color: #333;
+			padding: .3rem .4rem;
+			border-bottom: 1px solid #f4f3f3;
+			position: relative;
 
-				span {
-					position: relative;
-					top: -.075rem;
-					margin-left: 0rem;
-				}
+			img {
+				width: .4rem;
+				height: .4rem;
 			}
 
-			a:after {
-				content: "";
-				display: block;
-				width: .2rem;
-				height: .2rem;
-				border-left: .01rem solid #b8b8b8;
-				border-top: .01rem solid #b8b8b8;
-				transform: rotate(135deg);
-				position: absolute;
-				right: .4rem;
-				top: .4rem;
+			span {
+				position: relative;
+				top: -.075rem;
+				margin-left: 0rem;
 			}
 		}
-		.btn{
-			padding: 0px .37rem;
-			button{
-				width: 100%;
-				color: white;
-			}
+
+		a:after {
+			content: "";
+			display: block;
+			width: .2rem;
+			height: .2rem;
+			border-left: .01rem solid #b8b8b8;
+			border-top: .01rem solid #b8b8b8;
+			transform: rotate(135deg);
+			position: absolute;
+			right: .4rem;
+			top: .4rem;
+		}
+	}
+
+	.btn {
+		padding: 0px .37rem;
+
+		button {
+			width: 100%;
+			color: white;
 		}
 	}
+}
 </style>

src/pages_bak/addressbook.vue

@@ -4,27 +4,27 @@
 		<!-- 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>		
+				<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 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>
-								<p>{{item.name}}  {{item.phone}}</p>
-								<p>{{item.provinceAndCity}} {{item.address}}</p>
+								<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>
 							<p>
 								<img src="../assets/images/whrite.png" alt="">
 								<span>编辑</span>
@@ -35,31 +35,31 @@
 							</p>
 						</div>
 					</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 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>
-								<p>{{item.name}}  {{item.phone}}</p>
-								<p>{{item.provinceAndCity}} {{item.address}}</p>
+								<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>
 							<p>
 								<img src="../assets/images/whrite.png" alt="">
 								<span>编辑</span>
@@ -70,207 +70,221 @@
 							</p>
 						</div>
 					</div>
-				</div>			
+				</div>
 			</div>
 			<!-- 寄件 -->
 			<div class="btn-jj">
 				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
 			</div>
 		</div>
-	</div>	
+	</div>
 </template>
 
 <script>
-	import {Toast,Dialog} from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:1,
-				openid:'',
-				addressList:[]
-			}
+import { Toast, Dialog } from 'vant'
+export default {
+	data() {
+		return {
+			titlename: "地址簿",
+			index: 1,
+			openid: '',
+			addressList: []
+		}
+	},
+	created: function () {
+		this.openid = this.$store.state.openId
+		//获取参数
+		this.index = this.$route.query.active
+		this.getData();
+	},
+	methods: {
+		tab(obj) {
+			this.index = obj
+			this.getData()
 		},
-		created:function(){
-			this.openid = this.$store.state.openId
-			//获取参数
-			this.index = this.$route.query.active
-			this.getData();
+		link(obj) {
+			this.$router.push({ path: "/Newaddress", query: { type: obj } })
 		},
-		methods:{
-			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",{user_id:this.openid,type:this.index},{emulateJSON:true})
-					.then(res=>{
-						//发送成功
-						if(res.body.msg=='success'){
-							this.addressList = res.body.addressList
+		getData() {
+			Toast.loading({
+				message: '加载中...',
+				forbidClick: true,
+				duration: 0
+			});
+			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { user_id: this.openid, type: this.index }, { emulateJSON: true })
+				.then(res => {
+					//发送成功
+					if (res.body.msg == 'success') {
+						this.addressList = res.body.addressList
 					}
 					Toast.clear()
-				},res=>{
-						 //发送失败
+				}, res => {
+					//发送失败
 					Toast("网络错误!")
 				})
-				Toast.clear()
-			},
-			del(id){
-				Dialog.confirm({ title: '', message: '确定删除吗', })
-				 .then(() => {
+			Toast.clear()
+		},
+		del(id) {
+			Dialog.confirm({ title: '', message: '确定删除吗', })
+				.then(() => {
 					Toast.loading({
-					    message: '删除中...',
-					    forbidClick: true,
-					    duration:0
+						message: '删除中...',
+						forbidClick: true,
+						duration: 0
 					});
-					this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
-						.then(res=>{
+					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
+						.then(res => {
 							//发送成功
-							if(res.body.msg=='success'){
+							if (res.body.msg == 'success') {
 								this.getData()
-							}else{
+							} else {
 								Toast("删除失败!")
 							}
-						Toast.clear()
-					},res=>{
-							 //发送失败
-						Toast("网络错误!")
-					})
+							Toast.clear()
+						}, res => {
+							//发送失败
+							Toast("网络错误!")
+						})
 					Toast.clear()
 				})
 				.catch(() => {
-						//  on cancel 
+					//  on cancel 
 				})
-			},
-			adressLink(item){
-				let jjInfo = {}
-				jjInfo.jjname = item.name+' '+item.phone
-				jjInfo.jjadd = item.provinceAndCity+' '+item.address
-				this.$store.commit("getJjInfo",jjInfo)
-				this.$router.push({path:"/Express"})
-			},
-			adressLinkSj(item){
-				let sjInfo = {}
-				sjInfo.jjname = item.name+' '+item.phone
-				sjInfo.jjadd = item.provinceAndCity+' '+item.address
-				this.$store.commit("getSjInfo",sjInfo)
-				this.$router.push({path:"/Express"})
-			}
 		},
-		computed:{
-			
+		adressLink(item) {
+			let jjInfo = {}
+			jjInfo.jjname = item.name + ' ' + item.phone
+			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
+			this.$store.commit("getJjInfo", jjInfo)
+			this.$router.push({ path: "/Express" })
+		},
+		adressLinkSj(item) {
+			let sjInfo = {}
+			sjInfo.jjname = item.name + ' ' + item.phone
+			sjInfo.jjadd = item.provinceAndCity + ' ' + item.address
+			this.$store.commit("getSjInfo", sjInfo)
+			this.$router.push({ path: "/Express" })
 		}
+	},
+	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;
-				}
+.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;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .3rem;
-				.jj{
+
+	}
+
+	.jjinfo {
+		font-size: .36rem;
+		color: #999999;
+		padding: .0rem .33rem 0.33rem;
+
+		>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;
-					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;
+					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: 4.2rem;
+
+						p:nth-of-type(1) {
+							font-size: .3rem;
+							color: #333;
+							margin-bottom: .2rem;
 						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .3rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .3rem;
-							}
+
+						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;
-							}
+				}
+
+				.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%;
 			}
 		}
+
+	}
+
+
+
+	.btn-jj {
+		padding: .33rem;
+
+		button {
+			width: 100%;
+		}
 	}
-	
+}
 </style>