xpl/pages/address/address.vue

<template>
	<view class="content b-t">
		<view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
			<view class="wrapper">
				<view class="address-box">
					<text class="name">{{ item.real_name }}</text>
					<text class="mobile">{{ item.phone }}</text>
				</view>
				<view class="u-box">
					<text class="address">{{ item.province + item.city + item.district }} {{ item.detail }}</text>
				</view>
			</view>
			<view class="buttom">
				<view class="default-buttom" @click.stop="defaultUp(item, index)">
					<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.is_default == 1 }"></view>
					<text class="text">设为默认地址</text>
				</view>
				<view class="operation">
					<view @click.stop="addAddress('edit', item)">
						<text class="iconfont iconedit"></text>
						<text class="text">编辑</text>
					</view>
					<view class="blank"></view>
					<view @click.stop="delAddress(item)">
						<text class="iconfont icondelete"></text>
						<text class="text">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex add-btn">
			<button class="btn" @click="addAddress('add')">新增地址</button>
			<!-- #ifdef H5 -->
			<!-- <button  v-show="isShow" class="btn" @click="getAddress">获取微信地址</button> -->
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
import { getAddressList, addressEdit, addressDel } from '@/api/address.js';
import { mapState } from 'vuex';
import { wechatConfig } from '@/api/wx';
export default {
	data() {
		return {
			source: 0,
			addressList: [],
			isShow:false
		};
	},
	onShow(){
		this.loadAddress();
	},
	
	onLoad(option) {
		this.source = option.source || 0;
		this.loadAddress();
	},
	computed: {
		// #ifdef H5
		...mapState(['weichatObj', 'userInfo'])
		// #endif
	},
	methods: {
		// 加载地址
		loadAddress() {
			getAddressList({
				page: 1,
				limit: 100
			}).then(({ data }) => {
				this.addressList = data;
				
				// #ifdef H5
				// 判断是否为微信浏览器
				if (uni.getStorageSync('weichatBrowser')) {
					// 加载微信注册信息
					this.isShow = true;
				}
				// #endif
				
			});
		},
		// #ifdef H5
		//获取微信地址
		// getAddress() {
		// 	let weixinObj = require('jweixin-module');
		// 	let obj = this;
		// 	wechatConfig({
		// 		url: window.location.href
		// 	}).then(({ data }) => {
				
		// 		// 微信信息配置
		// 		weixinObj.config({
		// 			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		// 			appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
		// 			timestamp: data.timestamp, // 必填，生成签名的时间戳
		// 			nonceStr: data.nonceStr, // 必填，生成签名的随机串
		// 			signature: data.signature, // 必填，签名，见附录1
		// 			jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		// 		});
		// 		weixinObj.ready((e) => {
		// 			weixinObj.openAddress({
		// 			  success: function (res) {
		// 			    let userName = res.userName; // 收货人姓名
		// 			    let postalCode = res.postalCode; // 邮编
		// 			    let provinceName = res.provinceName; // 国标收货地址第一级地址（省）
		// 			    let cityName = res.cityName; // 国标收货地址第二级地址（市）
		// 			    let countryName = res.countryName; // 国标收货地址第三级地址（国家）
		// 			    let detailInfo = res.detailInfo; // 详细收货地址信息
		// 			    let nationalCode = res.nationalCode; // 收货地址国家码
		// 			    let telNumber = res.telNumber; // 收货人手机号码
		// 				addressEdit({
		// 					real_name: userName,
		// 					phone: telNumber,
		// 					address: {
		// 						province: provinceName,
		// 						city: cityName,
		// 						district: countryName
		// 					},
		// 					detail: detailInfo,
		// 					type:1
		// 				})
		// 					.then(({ data }) => {
		// 						obj.loadAddress();
		// 					})
		// 					.catch(e => {
		// 						console.log(e);
		// 					});
		// 			  },
		// 			fail: function (res) {
		// 			      // 支付成功后的回调函数
		// 			    }
		// 			});
		// 		})
		// 	}).catch(e => {
		// 			console.log(e);
		// 		});
		// },
		 // #endif
		// 设为默认地址
		defaultUp(data, ind) {
			this.addressList = this.addressList.map(e => {
				e.is_default = 0;
				return e;
			});
			this.addressList[ind].is_default = 1;
			addressEdit({
				real_name: data.real_name,
				phone: data.phone,
				address: {
					province: data.province,
					city: data.city,
					district: data.district
				},
				detail: data.detail,
				is_default: 1,
				id: data.id,
				type:1
			})
				.then(({ data }) => {
					this.loadAddress();
				})
				.catch(e => {
					console.log(e);
				});
		},
		//删除地址
		delAddress(item) {
			uni.showModal({
				content: '确定要删除该地址？',
				success: (confirmRes)=> {
					addressDel({
						id: item.id
					}).then(({ data }) => {
						this.$api.msg('删除成功');
					});
					let s = this.addressList.indexOf(item);
					this.addressList.splice(s, 1);
				}
			});
		},
		//选择地址
		checkAddress(item) {
			if (this.source == 1) {
				//this.$api.prePage()获取上一页实例，在App.vue定义
				this.$api.prePage().addressData = item;
				uni.navigateBack();
			}
		},
		// 添加地址
		addAddress(type, item) {
			uni.navigateTo({
				url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
			});
		},
		//添加或修改成功之后回调
		refreshList() {
			// 重新加载地址
			this.loadAddress();
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 120rpx;
	padding-top: 20rpx;
}
.content {
	position: relative;
}
.list {
	align-items: center;
	padding: 20rpx 30rpx;
	background: #fff;
	margin: 20rpx;
	margin-top: 0;
	.buttom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10rpx;
		.checkbox {
			font-size: 44rpx;
			line-height: 1;
			padding: 4rpx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}
		.checkbox.checked {
			color: #45B1EB !important;
		}
		.default-buttom {
			display: flex;
			align-items: center;
		}
		.operation {
			display: flex;
			align-items: center;
			.blank {
				width: 30rpx;
			}
		}
		.text {
			padding-left: 10rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
}
.wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 20rpx;
}
.address-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.address {
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
	.mobile {
		font-size: $font-base;
		color: rgba(51, 51, 51, 1);
	}
}
.u-box {
	font-size: $font-base;
	color: $font-color-light;
	margin-top: 16rpx;
	.name {
		margin-right: 30rpx;
	}
}
.icon-bianji {
	display: flex;
	align-items: center;
	height: 80rpx;
	font-size: 40rpx;
	color: $font-color-light;
	padding-left: 30rpx;
}

.add-btn {
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 50rpx;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
}
.btn {
	text-align: center;
	margin: 134rpx auto;
	width: 670rpx;
	height: 88rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 10px;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	font-family: SourceHanSansCN;
	font-weight: 500;
	color: #FEFEFE;
}
</style>