fangliaoxiaochengxv/subPages/addressMg/addressMg.vue

<template>
	<view class="address-wrapper">
		<AddressItem @refresh="getList" v-for="(item, index) in addressList" :key="index" :itemData="item"
			:isBack="isBack"></AddressItem>
		<view class="bottom-part display-flex-between">
			<view class="common-btn common-btn-gray" @click="getWehcatAddress">
				<image style="width: 34rpx;height: 34rpx;margin-right: 6rpx;"
					:src="`${$getImgBaseUrl()}icon-wechat.png`" mode=""></image>一键获取微信收货地址
			</view>
			<view @click="addAddress" class="common-btn">添加地址</view>
		</view>
	</view>
</template>

<script>
	import AddressItem from '@/components/AddressItem.vue'
	export default {
		components: { AddressItem },
		data() {
			return {
				addressList: [],
				defaultStyle: { width: '100%', backgroundColor: '#EEEFF1', color: '#1D161F' },
				primaryStyle: { width: '100%' },
				isBack: false
			}
		},
		onLoad(options) {
			if (options.isBack) {
				this.isBack = true;
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getWehcatAddress() {
				let _this = this
				uni.chooseAddress({
					success(res) {
						const { userName, telNumber, provinceName, cityName, countyName, detailInfo } = res
						const sendData = {
							name: userName,
							phone: telNumber,
							address: detailInfo,
							province: provinceName,
							city: cityName,
							area: countyName
						}
						_this.$api.addAddress(sendData).then(data => {
							_this.getList()
							uni.showToast({
								title: '保存成功'
							})
						})
					}
				})
			},
			getList() {
				this.$api.getAddressList().then(res => {
					// uni.hideLoading()
					this.addressList = res.data || []
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '../addAddress/addAddress'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-wrapper {
		padding: 30rpx 20rpx 160rpx;

		.bottom-part {
			position: fixed;
			bottom: 0;
			padding: 10rpx 0 70rpx;
			left: 20rpx;
			right: 20rpx;
			z-index: 100;
			width: calc(100% - 40rpx);
			background-color: #F5F6F8;
		}
	}
</style>