null/pages/address/address.vue

<template>
	<view class="page b-t">
		<!-- 
		<singleList ref="listRef" url="cang.mycollectionsecond" :sendData="reqData" @reqEnd="searchEnd">
			<template v-slot:items="{list}">
		 -->		
		 <!--  -->
				<view class="list b-b" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
					<image :src="item.checked? '/static/check-do.png' : '/static/check-un.png' " mode="aspectFill" class="check"></image>
					<view class="content flex-col">
						<view class="u-box align-center">
							<text class="name">{{item.name}}</text>
							<text class="mobile">{{item.mobile}}</text>
							<text v-if="item.is_default"  class="tag">默认</text>
							<view class="ic-wrap del align-center justify-center">
								<image src="/static/addr-del.png" mode="aspectFill" class="ic" @click.stop="deleteAddress(item.id,index)"></image>
							</view>
							<view class="ic-wrap edit align-center justify-center">
								<image src="/static/addr-edit.png" mode="aspectFill" class="ic" @click.stop="addAddress('edit', item.id)"></image>
							</view>
						</view>
						<view class="address-box">
							<text class="address">{{item.addr+' '+item.desc}}</text>
						</view>	
					</view>
				</view>
		<!-- 		
			    <empty v-else-if="sRes && sRes==='empty'"/>
			</template>
		</singleList>
		-->
		<button class="add-btn" @click="addAddress('add')">新增地址</button>
		<safe-area bgColor="#f8f8f8"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				source: 0,
				addressList: [
					{
						id:1,
						is_default:true,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:true,
					},
					{
						id:1,
						is_default:false,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:false,
					},
					{
						id:1,
						is_default:true,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:true,
					},
					{
						id:1,
						is_default:false,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:false,
					},
					{
						id:1,
						is_default:true,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:true,
					},
					{
						id:1,
						is_default:false,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:false,
					},
					{
						id:1,
						is_default:true,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:true,
					},
					{
						id:1,
						is_default:false,
						addr:'山东省临沂市河东区',
						desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
						name:'mork',
						mobile:'15263970923',
						checked:false,
					},
				],
				reqData:{}, //请求数据
				sRes:'', //搜索结果 empty,noMore
			}
		},
		onLoad(option) {
			// console.log(option.source);
			this.source = option.source;
			// this.$nextTick(()=>{
			// 	this.reqData={
			// 		type: this.cats[this.curCatIdx].state,
			// 	}	
			// })	
		},
		onShow() {
			// this.refreshList();
		},
		methods: {
			//获取我的收货地址
			async getList() {
				let res = await this.$api.request('/addons/unishop/address/all', 'POST', {
					page: 1,
					pagesize: 50
				});
				let list = res.data;
				if (list) {
					this.addressList = list;
				}
			},
			//选择地址
			checkAddress(item) {
				if (this.source == 1) {
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().addressData = item;
					uni.navigateBack()
				}
			},
			addAddress(type, id = 0) {
				uni.navigateTo({
					url: `/pages/address/addressManage?type=${type}&id=${id}`
				})
			},
			//添加或修改成功之后回调
			refreshList(data, type) {
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				// this.addressList.unshift(data);
				this.addressList=[];
				this.getList();
			},
			async deleteAddress(id, index) {
				let [error, res] = await uni.showModal({
					title: '确定删除地址？',
					content: this.addressList[index].address
				})

				if (res.confirm) {
					let res = await this.$api.request('/addons/unishop/address/delete?id=' + id);
					let data = res.data;
					if (data) {
						if (this.$api.prePage().addressData && this.$api.prePage().addressData.id) {
							if (this.$api.prePage().addressData.id == this.addressList[index].id) {
								this.$api.prePage().addressData = {};
							}
						}
						this.addressList.splice(index, 1);
					}
				}

			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: #f8f8f8;
	}
	.page{
		padding: 30rpx 20rpx;
		/* min-height: 100vh;
		padding-bottom: calc(var(--safe-area-inset-bottom) / 2); */
		position: relative;
	}
    .list {
		padding: 20upx 20upx 50rpx 73rpx;
		background: #fff;
		position: relative;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
		.check{
			position: absolute;
			left: 17rpx;
			top: 60rpx;
			width: 34rpx;
			height: 34rpx;
			z-index: 2;
		}
	}
	.u-box {
		color: #999;
		height: 48rpx;
		.name{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 20rpx;
		}
		.mobile{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 12rpx;
		}
		.tag{
			width: 61rpx;
			height: 34rpx;
			background: #92B99C;
			border-radius: 4rpx;
			line-height: 34rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.ic-wrap{
			height: 48rpx;
			width: 64rpx;
			&.del{
				margin-left: auto;
				.ic{
					width: 28rpx;
					height: 28rpx;
				}
			}
			&.edit{
				margin-left: 8rpx;
			
			}
			.ic{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.address-box {
		margin-top: 13rpx;
		display: flex;
		align-items: flex-start;
		.address {
			font-size: 24upx;
			color: #999;
			max-width: 600rpx;
			line-height: 40rpx;
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 710upx;
		height: 80upx;
		margin: 240rpx auto 10rpx;
		font-size: 30upx;
		color: #fff;
		background-color: $base-color;
		border-radius: 38upx;
	}
</style>