MeiMeiZhuan/pages/address/address.vue

<template>
	<view class="content">
		<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="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="add-btn flex">
			<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
		};
	},
	onLoad(option) {
		console.log(option, 1);
		this.source = option.source || 0;
		this.loadAddress();
	},
	onShow() {
		this.loadAddress();
	},
	methods: {
		//加载数据
		loadAddress() {
			getAddressList({
				page: 1,
				limit: 100
			}).then(({ data }) => {
				console.log(data, 1101);
				this.addressList = data;
			});
		},
		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);
				});
		},
		//选择地址
		checkAddress(item) {
			if (this.source == 1) {
				//this.$api.prePage()获取上一页实例，在App.vue定义
				this.$api.prePage().addressData = item;
				this.$api.prePage().address.address = true;
				uni.navigateBack();
				console.log(121);
			} else {
				this.$api.prePage().addressData = item;
				uni.navigateBack();
				console.log(121);
			}
		},
		addAddress(type, item) {
			uni.navigateTo({
				url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
			});
		},
		delAddress(item) {
			uni.showModal({
				content: '确认是否删除收货地址',
				confirmText: '确认删除',
				success: res => {
					if (res.confirm) {
						addressDel({
							id: item.id
						}).then(({ data }) => {
							this.$api.msg('删除成功');
							// this.loadAddress();
						});
						let s = this.addressList.indexOf(item);
						this.addressList.splice(s, 1);
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-top: 20rpx;
}
.content {
	position: relative;
	padding-bottom: 100rpx;
}
.list {
	align-items: center;
	padding: 20rpx 25rpx;
	background: #fff;
	margin: 25rpx;
	margin-top: 0;
	border-radius: 10rpx;
	.wrapper {
		border-bottom: 1px solid #f0f0f0;
		.address-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name {
				margin-right: 30rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #1d2023;
			}

			.mobile {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		.u-box {
			margin-bottom: 20rpx;
			.address {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	.buttom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10rpx;
		.checkbox {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50px;
			background-image: url(../../static/img/gou.png) 35rpx;
			border: 1px solid #eeeeee;
		}
		.checkbox.checked {
			background: url(../../static/img/gou.png) no-repeat center #f93a3a;
			background-size: 70%;
			width: 35rpx;
			height: 35rpx;
		}
		.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;
		}
	}
}

.icon-bianji {
	display: flex;
	align-items: center;
	height: 80rpx;
	font-size: 40rpx;
	color: $font-color-light;
	padding-left: 30rpx;
}

.add-btn {
	// margin-top: 80rpx;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 40rpx;
	width: 100%;
}
.btn {
	width: 40%;
	height: 80rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	background: linear-gradient(0deg, rgba(250, 39, 64, 1), rgba(254, 85, 68, 1));
	border-radius: 10rpx;
}
</style>