null/pages/address/address.vue

<template>
	<view class="page b-t">
		<singleList ref="listRef" url="addr.list" :sendData="reqData" @reqEnd="searchEnd">
			<template v-slot:items="{list}">
				<view class="list b-b" v-for="(item, index) in list" :key="index" @click="checkAddress(item)">
					<image :src="item.checked? '/static/check-do.png' : '/static/check-un.png' " mode="aspectFill" class="check" v-if="sourcePage==='mang'"></image>
					<view class="content flex-col">
						<view class="u-box align-center">
							<text class="name">{{item.consignee}}</text>
							<text class="mobile">{{item.mobile}}</text>
							<text v-if="item.is_default==='1'"  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)"></image>
							</view>
							<view class="ic-wrap edit align-center justify-center">
								<image src="/static/addr-edit.png" mode="aspectFill" class="ic" @click.stop="addAddress(item.id)"></image>
							</view>
						</view>
						<view class="address-box">
							<text class="address">{{item.full_address}}</text>
						</view>	
					</view>
				</view>
			    <empty v-if="sRes && sRes==='empty'"/>
			</template>
		</singleList>
		<view class="add-btn" @click="addAddress()">新增地址</view>
		<safe-area bgColor="#f8f8f8"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourcePage: '',
				// addressList: [
					// {
					// 	id:1,
					// 	is_default:true,
					// 	addr:'山东省临沂市河东区',
					// 	desc:'山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区山东省临沂市河东区',
					// 	name:'mork',
					// 	mobile:'15263970923',
					// 	checked:true,
					// }
				// ],
				reqData:{}, //请求数据
				sRes:'', //搜索结果 empty,noMore
			}
		},
		onLoad(option) {
			// console.log(option.source);
			this.sourcePage = option.sourcePage;
			
		},
		onShow() {
			this.$nextTick(()=>{
				this.$refs.listRef.getList(true);
			})	
			// this.refreshList();
		},
		onReachBottom() {
			this.$refs.listRef.getList();
		},
		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;
			// 	}
			// },
			//添加或修改成功之后回调
			// refreshList(data, type) {
			// 	//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
			// 	// this.addressList.unshift(data);
			// 	this.addressList=[];
			// 	this.getList();
			// },
			searchEnd({loadingType,pageOneRes}){
				if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
					this.sRes='empty';
				}else{
					this.sRes=loadingType;
				}
			},
			//选择地址
			checkAddress(item) {
				// if (this.source == 1) {
					// 上一页盲盒页情况
					// if(this.$tools.prePage().setDefaultAddr){
					// 	this.$tools.prePage().setDefaultAddr(item);
					// 	uni.navigateBack()
					// }
				// }
				//盲盒页进
				if(this.sourcePage === 'mang'){
					this.$store.commit('userInfo/ADDR_INFO',item)
					uni.navigateBack()
				}
			},
			addAddress(id = 0) {
				this.navTo('/pages/address/addressManage',{id})
			},
		
			async deleteAddress(item) {
				let [error, res] = await uni.showModal({
					title: '确定删除地址？',
					content: item.address
				})
				if (res.confirm) {
					await this.$request('addr.del',{id:item.id});
					this.$refs.listRef.getList(true);
					if(item.id === this.addrInfo.id){
						this.$store.commit('userInfo/ADDR_INFO',{});
					}
					
				}

			}
		}
	}
</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>