jzhw_uni/pages/ucenter/address/address.vue

<template>
	<view class="container">
		<view class="top">
			<view class="dz">当前地址：
				<text style="color: #333;font-weight: bold;">{{ addressName }}</text>
			</view>
			<view class="shuaxin">
				<image src="/static/images/address/shuaxin.png" class="shuaxin-icon"></image>
				<view class="sx" @tap="shaxin">点击刷新</view>
			</view>

		</view>
		<view class="xzwz" v-if="isShowServiceAddress">请选择你的服务地址</view>
		<view class="address-list" v-if="addressList.length > 0">
			<view class="item" v-for="(item, index) in addressList" :key="index">
				<view class="l">
					<image src="/static/images/address/dingwei.png"></image>
				</view>

				<view class="c" @tap="addressAddOrUpdate" :data-address-tel="item.tel" :data-address-name="item.name"
					:data-address-id="item.id" :data-address-detail="item.addressDetail">
					<!-- <view class="address" v-if="item.addressName">{{ item.addressName }}{{ item.detail }}</view> -->
					<view class="address" v-else-if="">{{ item.province }} {{ item.city }} {{ item.county }}
						{{ item.addressDetail }}
					</view>
					<view class="mobile">{{ item.name }} {{ item.tel }}</view>
					<view class="default" v-if="item.isDefault">默认</view>
				</view>

				<view class="r">
					<image src="/static/images/address/xiugai.png" :data-address-id="item.id" @tap="updateAddress"
						class="update" />
				</view>
			</view>
		</view>
		<view class="empty-view" v-if="addressList.length <= 0">
			<text class="text">收货地址还没有~~~</text>
		</view>
		<view class="add-address" @tap="addressAddOrUpdate" data-address-id="0">新建</view>
	</view>
</template>

<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var map = require('../../../utils/map.js');
	var app = getApp();
	export default {
		data() {
			return {
				addressList: [],
				total: 0,
				addressName: '',
				isShowServiceAddress: false
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			if (prevPage.route == 'pages/index/index') {
				this.setData({
					isShowServiceAddress: true
				});
			}
			this.getUserLocation();
		},
		onReady: function() {
			// 页面渲染完成
		},
		onShow: function() {
			// 页面显示
			this.getAddressList();
		},
		onHide: function() {
			// 页面隐藏
		},
		onUnload: function() {
			// 页面关闭
		},
		methods: {
			shaxin() {
				this.getUserLocation();
			},

			getUserLocation: function() {
				map.getUserLocation();
				let that = this;
				setTimeout(function() {
					that.setData({
						addressName: app.globalData.currentLocationName
					});
				}, 2000);
			},

			getAddressList() {
				let that = this;
				util.request(api.AddressList).then(function(res) {
					if (res.errno === 0) {
						that.setData({
							addressList: res.data.list,
							total: res.data.total
						});
					}
				});
			},

			updateAddress(event) {
				let addressId = event.currentTarget.dataset.addressId;
				uni.navigateTo({
					url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
				});
			},

			async updateAddressData(address) {
				await util.request(api.AddressSave, address, 'POST').then(function(res) {
					if (res.errno === 0) {
						var city = res.data.city.indexOf('市辖') != -1 ? res.data.province : res.data.city;
						var addresInfo = {
							city: city,
							lng: res.data.lng,
							lat: res.data.lat,
							shopId: res.data.shopId,
							address: res.data.addressDetail,
							addressId: res.data.id,
							name: res.data.name,
							tel: res.data.tel
						};
						uni.setStorageSync('addressInfo', addresInfo);
					}
				});
			},

			addressAddOrUpdate(event) {
				// console.log(event)
				let addressId = event.currentTarget.dataset.addressId;
				let name = event.currentTarget.dataset.addressName;
				let tel = event.currentTarget.dataset.addressTel;
				let addressDetail = event.currentTarget.dataset.addressDetail;
				let address = null;
				this.addressList.forEach((item) => {
					if (addressId == item.id) {
						address = item;
					}
				});
				console.info(address);

				//返回之前，先取出上一页对象，并设置addressId
				var pages = getCurrentPages();
				console.log(pages);
				var prevPage = pages[pages.length - 2];
				if (null != address && (prevPage.route == 'pages/index/index' || prevPage.route ==
						'pages/ucenter/serviceDetail/serviceDetail')) {
					//  console.log("市辖区".indexOf("市"));
					var city = address.city.indexOf('市辖') != -1 ? address.province : address.city;

					//通过jz_shop的shop_no关联服务力分配的门店id，拿实际的jz_shop的门店id
					//这个是拿的服务力分配的门店，如果不转要改后台查询商品，要用shopNo，这里的shopId是shopNo
					// let distribution_unit=address.shopId;
					if (address.shopId == null) {
						this.updateAddressData(address);
					} else {
						var addresInfo = {
							city: city,
							lng: address.lng,
							lat: address.lat,
							shopId: address.shopId,
							address: address.addressDetail,
							shopName: address.shopName,
							name: name,
							tel: tel,
							addressId: address.id
						};
						uni.setStorageSync('addressInfo', addresInfo);
					}
					setTimeout(() => {
						uni.navigateBack();
					}, 300);
				} else if (prevPage.route == 'pages/checkout/checkout') {
					try {
						uni.setStorageSync('addressId', event.currentTarget.dataset.addressId);
					} catch (e) {}
					if (addressId && addressId != 0) {
						uni.navigateBack();
					} else {
						uni.navigateTo({
							url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
						});
					}
				} else if (prevPage.route == 'pages/goods/infoCollect/infoCollect') {
					if (addressId && addressId != 0) {
						app.globalData.infoAddress = {
							addressId: addressId,
							addressDetail: addressDetail
						};
						uni.navigateBack();
					} else {
						uni.navigateTo({
							url: '/pages/ucenter/addressAdd/addressAdd?id=' + addressId
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/ucenter/addressAdd/addressAdd?id=' + event.currentTarget.dataset.addressId
					});
				}
			},

			deleteAddress(event) {
				console.log(event.target);
				let that = this;
				uni.showModal({
					title: '',
					content: '确定要删除地址？',
					success: function(res) {
						if (res.confirm) {
							let addressId = event.target.dataset.addressId;
							util.request(
								api.AddressDelete, {
									id: addressId
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									that.getAddressList();
									uni.removeStorage({
										key: 'addressId',
										success: function(res) {}
									});
								}
							});
							console.log('用户点击确定');
						}
					}
				});
				return false;
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.xzwz {
		text-indent: 20rpx;
		color: #90a4ae;
	}

	.update {
		width: 35rpx;
		height: 35rpx;
	}

	.container {
		width: 100%;
		padding-bottom: 160rpx;
	}

	.address-list {
		padding-left: 31.25rpx;
		background: #fff;
		background-size: auto 10.5rpx;
	}

	.address-list .item {
		padding: 20rpx 0;
		align-items: center;
		display: flex;
		border-bottom: 1rpx solid #dcd9d9;
	}

	.address-list .l {
		width: 50rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.address-list .l image {
		width: 40rpx;
		height: 50rpx;
	}

	.address-list .name {
		width: 125rpx;
		height: 43rpx;
		font-size: 29rpx;
		color: #333;
		margin-bottom: 5.2rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.address-list .default {
		float: right;
		margin-right: 40rpx;
		border: 1px solid #d77958;
		color: #d77958;
		border-radius: 20rpx;
		line-height: 20px;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		visibility: visible;
	}

	.address-list .c {
		flex: 1;
		height: auto;
		overflow: hidden;
	}

	.address-list .mobile {
		height: 29rpx;
		font-size: 29rpx;
		line-height: 29rpx;
		overflow: hidden;
		color: #666;
		margin-bottom: 6.25rpx;
		margin-top: 10rpx;
		width: 400rpx;
		float: left;
	}

	.address-list .address {
		font-size: 30rpx;
		overflow: hidden;
		color: black;
	}

	.address-list .r {
		width: 52rpx;
		height: auto;
		overflow: hidden;
		margin-right: 16.5rpx;
	}

	.address-list .del {
		display: block;
		width: 52rpx;
		height: 52rpx;
	}

	.add-address {
		border: none;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 90rpx;
		line-height: 98rpx;
		position: fixed;
		bottom: 25rpx;
		left: 0;
		border-radius: 0;
		padding: 0;
		margin: 0 0 0 5%;
		text-align: center;
		font-size: 25rpx;
		color: #f4f4f4;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		letter-spacing: 3rpx;
		background-color: #d77958;
	}

	.empty-view {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-view .text {
		width: auto;
		font-size: 28rpx;
		line-height: 35rpx;
		color: #999;
	}

	.dz {
		width: 500rpx;
		height: 36rpx;
		font-size: 25rpx;
		color: #333333;
		line-height: 36rpx;
		font-weight: bold;
		display: inline-block;
	}

	.sx {
		width: 101rpx;
		height: 36rpx;
		font-weight: 500;
		font-size: 25rpx;
		color: #C47046;
		line-height: 36rpx;
		display: inline-block;
	}

	.top {
		background: #EED5CD;
		overflow: hidden;
		height: 62rpx;
		display: flex;
		padding: 16rpx 23rpx;
		justify-content: space-between;
		line-height: 62rpx;
	}
	.shuaxin{
		height: 36rpx;
		    line-height: 36rpx;
	}

	.shuaxin-icon {
		width: 29rpx;
		height: 21rpx;
		margin-right: 8rpx;
	}
</style>