yogaApp/pages/address/alist.vue

<template>
	<view class="page">
		<view class="topcon">
			<view class="tleft">收件地址</view>
			<view class="tright" @click="gotoadd">
				<uni-icons type="plusempty" size="14" color="#FFF"></uni-icons>新增地址
			</view>
		</view>
		<view class="skcon" v-if="myaddresslist.length==0">
			<image class="skimg" src="@/static/image/noaddress.png" mode="aspectFill" ></image>
			<!-- <view class="sktip">暂无收件地址，请添加~</view> -->
		</view>
		<view class="scroll" v-else>
			<view class="scell">
				<view v-for="(item, index) in myaddresslist" :key="index" class="sitem">
					<view class="lcon">
						<view class="sname">
							<text>{{item.name}}</text>
							<text style="margin-left: 10rpx;margin-right: 10rpx;">{{item.phone}}</text>
							<view v-if="item.isDefault" class="tip">默认</view>
						</view>
						<view class="sinfo">
							{{item.province+item.city+item.district+item.address}}
						</view>
					</view>
					<view class="opecon">
						<uni-icons type="compose" size="25" color="#999999" @click="gotoedit(item,index)"></uni-icons>
						<uni-icons type="trash-filled" size="25" color="#999999" @click="delDo(item.id)"></uni-icons>
					</view>
				</view>
				<uni-load-more v-if="loadStatus!=='noMore'" iconType="circle" :status="loadStatus" />
			</view>
		</view>
		
		<view class="submitcon">
			<button type="primary" class="btn" @click="gotoadd">添加地址</button>
		</view>
		
	</view>
</template>

<script> 
	import { myCache } from '../../utils/utils.js';
	export default {
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				loadStatus:'more',
				myaddresslist:[
					// {
					// 	id:1,
					// 	contact:"张三",
					// 	phone:"18900000001",
					// 	address:"地址去地址去地址去地址去地址去地址去地址去地址去地址去地址去地址去",
					// 	sortid:1
					// }
				]
			};
		},
		onLoad() {
		},
		onReady(){
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
			try{
				this.getList();
			}
			catch(e){
				this.myaddresslist=[];
				console.log(e);
			}
		},
		methods: {
			async delDo(id){
				var _this=this;
				try{
					uni.showModal({
						title: '提示',
						content: '确定要删除此收件地址吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
								_this.delDoDo(id);
							}
						}
					});
					
				}
				catch{
					uni.showToast({
						title: '收件地址删除失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			async delDoDo(id) {
				uni.showLoading({
					title: '数据删除中...'
				});
				const {data: res} = await uni.$http.post('/api/address/del', {id:id});
				if(res&&res.success){
					uni.showToast({
						title: '收件地址已删除！',
						icon: 'success',
						duration: 2000
					});
					this.myaddresslist=[];
					this.loadStatus="more";
					this.getList();
				}
				else{
					uni.showToast({
						title: '收件地址删除失败！请重试',
						icon: 'error',
						duration: 2000
					}) 
				}
			},
			gotoedit(item,index){
				var type='edit';
				var data=encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/address/add?data=${data}&index=${index}&type=${type}`
				});
			},
			getAddr(){
				var _this=this;
				// 
				// #ifdef MP-ALIPAY
				my.getAddress({
				  success: function(res) {
				    console.log(res);
					if(res.result){
						res.result.sortid=0;
						// 保存地址
						if(_this.myaddresslist&&_this.myaddresslist.length>0){
							var ifexist=false
							_this.myaddresslist.forEach((cell)=>{
								if(cell.address==res.result.address){
									 ifexist=true
								}
							});
							if(!ifexist){
								// 如果不在列表中，就保存到列表中
								_this.myaddresslist.push(res.result);
								_this.$forceUpdate();
								myCache("myaddresslist",_this.myaddresslist);
							}
						}
						else{
							_this.myaddresslist=[];
							_this.myaddresslist.push(res.result);
							_this.$forceUpdate();
							myCache("myaddresslist",_this.myaddresslist);
						}
					}
				  },
				  fail: function(err) {
				    console.log(err);
				  }
				});
				// #endif
			},
			gotoadd(){
				var type='add';
				uni.navigateTo({
					url: `/pages/address/add?type=${type}`
				});
			},
			async getList() {
				const {data: res} = await uni.$http.post('/api/address/list');
				if(res.data&&res.data.length>0){
					this.myaddresslist=res.data;
					this.loadStatus="noMore";
				}
				else{
					this.myaddresslist=[];
					this.loadStatus="noMore";
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0;
		position: relative;
		display: block;
		background-color: #F5F5F5;
	}
	
	.topcon{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		.tleft{
			font-weight: 400;
			font-size: 28rpx;
			color: #23262F;
		}
		.tright{
			width: 160rpx;
			height: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			background: #89965f;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
	.skcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		.skimg{
			width: 360rpx;
			height: 320rpx;
			margin-top: 200rpx;
		}
		.sktip{
			margin-top: 42rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #23262F;
		}
	}
	.submitcon{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 168rpx;
		background-color: #FFFFFF;
	}
	.btn{
		margin: 20rpx auto 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 560rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.nodata{
		width: 100%;
		position: relative;
		display: block;
		margin: 20rpx auto;
	}
	.scroll{
		width: 100%;
		position: relative;
		display: block;
		margin-bottom: 178rpx;
		margin-top: 20rpx;
	}
	.scell{
		display: flex;
		background-color: #F5F5F5;
		padding: 0 24rpx 0 24rpx;
		flex-direction: column;
		.sitem {
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			.lcon{
				display: flex;
				flex: 1;
				flex-direction: column;
			}
			.opecon{
				width: 110rpx;
				display: flex;
			}
			.sname{
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 24rpx;
				justify-content: flex-start;
				align-items: center;
				display: flex;
				.tip{
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 80rpx;
					height: 48rpx;
					text-align: center;
					line-height: 50rpx;
					background: #89965f;
					border-radius: 24rpx;
					margin-left: 10rpx;
				}
			}
			.sinfo{
				padding: 0 24rpx 24rpx;
				font-size: 26rpx;
				color:rgb(116, 116, 116);
				line-height: 40rpx;
			}
		}
	}
	
</style>