hwnc/pagesD/pages/address/address.vue

<template>
	<view :class="[AppTheme]" class="all_box content b-t">
		<view class="list_index">
			<view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
				<view class="wrapper">
					<view class="u-box">
						<view>
							<text class="name">{{item.name}}</text>
							<text class="mobile">{{item.mobile}}</text>
						</view>

						<u-icon name="trash" color="#999" size="26" @click="deletes(item)"></u-icon>
					</view>
					<view class="address-box">
						<view class="address">{{item.address}} {{item.area || ""}}
							{{(item.community==''||item.community==null)?'':item.community}}
						</view>
					</view>
					<view class="bianji">
						<view class="bianji_1">
							<label class="radio" style="font-size: 28rpx;" @click.stop="changetarpty(item,index)">
								<u-icon v-if="item.is_default==1" labelPos="right" label="设为默认" size="20"
									name="checkmark-circle-fill" :color="primary"></u-icon>
								<u-icon v-else labelPos="right" label="设为默认" size="20" name="checkmark-circle-fill"
									color="#606266"></u-icon>
							</label>

						</view>
						<view class="bianji_2" @click.stop="popup(item)">编辑</view>
					</view>
				</view>

			</view>
			<view v-if="!addressList.length" style="padding-top: 80rpx;">
				<u-empty marginTop="0" text="暂无收货地址" mode="address"></u-empty>
			</view>

		</view>
		<view style="height: 60rpx;"></view>
		<view class="btnview">
			<view class="add-btn bg-linear-gradient" @click="addAddress()">
				<u-icon name="plus" size="10" color="#ffffff" labelColor="#ffffff" label="新增收货地址"></u-icon>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="add-btn bg-linear-gradient" @click="chooseAddr()">
				<u-icon name="plus" size="10" color="#ffffff" labelColor="#ffffff" label="微信地址"></u-icon>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import api from "../../../api/address/address.js"
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				source: 0,
				addressList: [],
				settingFile: getApp().globalData.siteinfo,
				checked: false,
				show: false,
				name: '',
				mobile: '',
				address: '',
				type: '', //    1 编辑  2 新增   3 默认
				id: '',
				title: '',
				addindex: -1,
				is_default:''
  
 

			}
		},
		onLoad(option) {
			this.source = option.source;
			this.getaddress()
		},
		onShow() {
			this.getaddress()
		},
		methods: {
			close() {
				this.show = false
			},
			popup(e) {
				this.id = e.id
				this.addressList.forEach(item => {
					if (item.id === e.id) {
						this.name = item.name
						this.mobile = item.mobile
						this.address = item.address
						uni.navigateTo({
							url: `/pagesD/pages/address/addressManage?type=1&data=${JSON.stringify({
								id:item.id,
								name:item.name,
								mobile:item.mobile,
								community:item.community,
								is_default:item.is_default,
								address:item.address
							})}`
						})
					}
				})

			},
			//提交
			confirm() {
				let obj = {}
				if (this.type == 3) {
					obj = {
						id: this.id,
						type: this.type,
 
						is_default:this.is_default,
  
 
					}
				} else {
					if (!this.name) {
						this.$api.msg('请填写收货人姓名');
						return;
					}
					if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.mobile)) {
						this.$api.msg('请输入正确的手机号码');
						return;
					}
					if (!this.address) {
						this.$api.msg('请填写收货地址');
						return;
					}
					obj = {
						id: this.id,
						address: this.address,
						name: this.name,
						mobile: this.mobile,
						type: this.type,
					}
				}
				console.log(obj, 'obj')
				api.addressSet(obj).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.show = false
						this.$api.msg(res.msg);
						this.getaddress()
					}
				})
			},

			changetarpty(item, index) {
				 
				this.addindex = index
				this.is_default=item.is_default
				this.id = item.id
				this.type = 3
				if (item.is_default == 1) {
					this.is_default = 0
				} else {
					this.is_default = 1
				}
				this.confirm()
			},
			//选择地址
			checkAddress(item) {
				if (this.source == 1) {
					this.$api.prePage().addressData = item;
					uni.navigateBack()
				}
			},
			// 获取收货地址
			getaddress() {
				api.address().then(res => {
					console.log(res)
					if (res.status == 200) {
						this.addressList = res.data.data
						this.addindex = res.data.index
					} else {
						this.$api.msg(res.msg);
					}
				})
			},
			addAddress() {
				uni.navigateTo({
					url: `/pagesD/pages/address/addressManage?type=2`
				})
			},
			//删除地址
			deletes(e) {
				console.log(e)
				api.addressDel({
					id: e.id
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.addressList.forEach((item, index) => {
							item.id == e.id && this.addressList.splice(index, 1)
						})
						this.$api.msg(res.msg);
					} else {
						this.$api.msg(res.msg);
					}
				})
			},
			//添加或修改成功之后回调
			refreshList(data, type) {
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);
				console.log(data, type);
			},
			chooseAddr() {
				const that = this
				uni.chooseAddress({
					success(res) {
						const obj = {
							id: 0,
							address: res.provinceName + res.cityName + res.countyName + res.detailInfo,
							name: res.userName,
							mobile: res.telNumber,
							type: 2,
							is_default: 0
						}
						api.addressSet(obj).then(res => {
							if (res.status == 200) {
								that.getaddress()
							}
						})
					},
					fail(err) {
						console.log('err', JSON.stringify(err))
					}
				})
			},
		},
		onPullDownRefresh() {
			this.addressList = [];
			this.getaddress();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 600);
		},
	}
</script>

<style lang='scss'>
	.all_box {
		min-height: calc(100vh);
		background-color: #fff;
	}

	.content {
		position: relative;
	}

	.list_index {
		margin: 0 2.5%;
		width: 95%;

	}

	.list {
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		padding: 30upx 15upx;
		background: #fff;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;

		.bianji {
			display: flex;
			justify-content: space-between;

			margin-top: 30rpx;

			.bianji_1 {}

			.bianji_2 {
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			min-width: 80rpx;
			display: flex;
			justify-content: center;
			padding: 0 20rpx;
			font-size: 24upx;
			margin-right: 10upx;
			background: #fffafb;
			border-width: 1px;
			border-style: solid;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
			-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
			-webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
			word-wrap: break-word; //允许
			margin-right: 3vh;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #a3a3a3;
		}
	}

	.u-box {
		display: flex;
		justify-content: space-between;

		/* margin-bottom: 20rpx; */
		.name {
			font-size: 32rpx;
			margin-right: 30upx;
			font-weight: 600;
		}

		.mobile {
			font-size: 28rpx;
		}
	}

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;

	}

	.btnview {
		position: fixed;
		display: flex;
		justify-content: space-evenly;
		left: 30upx;
		right: 30upx;
		bottom: 25rpx;
		z-index: 95;

		.add-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300rpx;
			height: 80upx;
			font-size: 30rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}

	.content_one {
		display: flex;
		flex-direction: column;
		/* height: 40vh;
        width: 40vh;      */
		padding: 30rpx;

		/* position: relative; */
		.content_one_1 {
			text-align: center;
			font-size: 34rpx;
			padding: 1vh;
		}

		.footer-img {
			text-align: center;
			width: 60%;
			margin-left: 20%;
			margin-top: 15vw;
			line-height: 60rpx;
			border-radius: 40rpx;
			background-color: limegreen;

			.text {
				color: #fff;
				font-size: 28rpx;

			}
		}

		.item {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			border-bottom: 2rpx solid #DBDBDB;
			padding: 40rpx 0rpx 5rpx 0rpx;

			.check {
				width: 60%;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: white;
				border-radius: 50rpx;
				font-size: 27rpx;
			}

			._label {
				width: 35%;
				color: #999;
				font-size: 32rpx;
			}

			._label_1 {

				font-size: 32rpx;
			}
		}
	}

	/* } */
</style>