nherp-shop/pages/views/user/myaddress.vue

<template>
	<view class="myaddress" :class="['theme', themeObj.name]">
		<view >
			<view v-for="(item, index) in addressList" :key="index" class="order_address">
				<view class="address_box">
					<view class="weizhi_icon">
						<text class="iconfont icon-dizhi"></text>
					</view>
					<view @click="onsetAddress(item)">
						<view class="center">
							 <!-- v-if="item.isDefault == 1" -->
							<!-- <view class="moren">
								<text class="iconfont icon-moren"></text>
							</view> -->
							<view class="name">
								<text class="text1">{{item.contacts}}</text>
								<text class="phones">{{item.phone}}</text>
							</view>
							<view class="address_name">{{item.addr}}</view>
						</view>
					</view>
					<view class="caozuo">
						<!-- <view class="del" @tap="delAddress(item,index)">
							<text class="iconfont icon-shanchu"></text>
							删除
						</view>
						<view class="edit" @tap="editAddress(item)">
							<text class="iconfont icon-bianji"></text>
							编辑
						</view> -->
					</view>
				
			</view>
		</view>
		<nodata :colors="colors" title="暂无提货地址" v-if="addressList.length == 0"></nodata>
	</view>
	<view class="save">
		<!-- <view class="btn" @tap="addAddress">添加收货地址</view> -->
	</view>
	<loading v-if="isShow == true"></loading>
	</view>
</template>

<script>

	import { getAddrList, delAddr, getStoreList } from '@/api/index.js'
	import loading from "../../commponent/public/loading";
	import {
		getUserInfo,
		setAddress
	} from '@/utils/auth.js'
	const app = getApp();
	export default {
		data() {
			return {
				colors: '',
				addressList: [],
				isShow: true,
				type:'',
				themeObj: app.globalData.themeObj
			};
		},

		components: {
			loading
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
			this.type = options.type || ''
			this.setData({
				colors: app.globalData.newColor,
				
			});
			setTimeout(() => {
				this.setData({
					isShow: false
				});
			}, 600);
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getAddrList()
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getAddrList() {
				const s = [
				    // {
				    //     "rule": "eq",
				    //     "type": "string",
				    //     "dictCode": "",
				    //     "val": getUserInfo().id,
				    //     "field": "userId"
				    // }
				]
				const params = {
					pageNo:1,
					pageSize: 100,
					superQueryParams: encodeURI(JSON.stringify(s)),
					superQueryMatchType: 'and'
				}
				uni.showLoading()
				getStoreList(params).then(res => {
					this.addressList = res.result.records
					uni.hideLoading()
					
				})
			},
			editAddress(item) {
				//编辑收货地址
				uni.navigateTo({
					url: '/pages/views/user/address/edit?type=edit&address=' + JSON.stringify(item)
				});
			},

			addAddress() {
				//添加收货地址
				uni.navigateTo({
					url: '/pages/views/user/address/edit?type=add'
				});
			},
			onsetAddress(item){ //选择收货地址后 返回上一层路由
				if(this.type="select"){
					setAddress(item)
					uni.navigateBack(-1)
				}
			},
			delAddress(item,index){
				uni.showModal({
					title:'提示',
					content:'确认要删除该地址吗?',
					confirmText:'删除',
					confirmColor:this.colors,
					success: (res) => {
						if(res.confirm){
							delAddr(item.id).then( res=> {
								uni.showToast({
									title:'删除成功~',
									icon:'none'
								})
								this.addressList.splice(index, 1)
							})
							
						}
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.myaddress {
		padding: 10upx 4%;
		padding-bottom: 140upx;
		margin-top: 10upx;
	}

	.order_address {
		height: 180upx;
		width: 100%;
		background-color: #fff;
		border-radius: 10upx;
		position: relative;
		box-shadow: 0upx 0upx 10upx #ddd;
		margin-bottom: 20upx;
	}

	.order_address image {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.address_box {
		width: 100%;
		height: 100%;
		display: block;
		z-index: 10;
		box-sizing: border-box;
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.weizhi_icon text {
		font-size: 40upx;
		margin-left: 10upx;
	}

	.address_box .center {
		margin-left: 20upx;
	}

	.address_box .center .name {
		height: 60upx;
		line-height: 60upx;
	}

	.address_box .center .name .text1 {
		font-size: 26upx;
		font-weight: bold;
		color: #333;
		display: inline-block;
		margin-right: 20upx;
	}

	.phones {
		font-size: 24upx;
		color: #999;
		z-index: 0;
	}

	.address_box .address_name {
		font-size: 26upx;
		font-weight: bold;
		color: #333;
	}

	.noaddress {
		margin-left: 40upx;
		font-weight: bold;
		color: #333;
		font-size: 26upx;
	}

	.caozuo {
		position: absolute;
		right: 20upx;
		display: flex;
		top: 20upx;
	}

	.caozuo view {
		font-size: 24upx;
		color: #666;
		margin-left: 30upx;
	}

	.caozuo view text {
		font-size: 24upx;
	}

	.moren {
		position: absolute;
		top: 0;
		left: 0;
	}

	.moren text {
		font-size: 60upx;
	}

	.save {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.save view {
		display: flex;
	}

	.save .btn {
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 70%;
		height: 80upx;
		border-radius: 80upx;
		background-color: #f23a3a;
		color: #fff;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
	}
</style>