VIP32/购物商城/project/pages/list/list.vue

<template>
	<view class="list">
		<view class="address">
			<view class="main" v-for="(item,index) in addressList" :key="index">
				<view class="left">
					<van-checkbox checked-color="#ff0000" :value="item.commonAddr" @change="onChange1" :data-param1="item"></van-checkbox>
				</view>
				<view class="mid">
					<view class="top">
						{{item.receiver}}--{{item.mobile}}
						<van-tag type="danger" round v-if="item.commonAddr ==  1">默认</van-tag>
					</view>
					<view class="bottom">
						<text class="province">{{item.province}}</text>
						<text>{{item.city}}</text>
						<text>{{item.area}}</text>
						<text>{{item.addr}}</text>
					</view>
				</view>
				<view class="right">
					<van-icon name="edit" @click="editAddress(item)" />
				</view>
			</view>
		</view>
			<van-button type="danger" class="btn" round @click="addAddress">新增地址</van-button>
	</view>
</template>

<script>
	import {getAddressList,defaultAddr} from '@/api/address.js';
	export default{
		data(){
			return {
				addressList:[],//地址列表
			}
		},
		onShow() {
			this.init();
		},
		methods:{
			async init() {
				let {
					data
				} = await getAddressList();
				this.addressList = data;
				console.log(this.addressList,'最后111')
			},
			// 修改默认地址
			onChange1(event) {
				let addrIds = event.currentTarget.dataset.param1.addrId;
				defaultAddr(addrIds).then(res => {
					console.log(res,'成功')
					this.init();
				}).catch(err => {
					console.log(err,'失败')
				})
				console.log(this.addressList,'最后')
			},
			// 新增
			addAddress() {
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			// 编辑
			editAddress(item) {
				uni.navigateTo({
					url:"/pages/address/address?obj1=" + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.address {
		padding: 20rpx;
		.main {
			display: flex;
			height: 140rpx;
			margin-top: 10rpx;
			align-items: center;
			.left {
				flex: 1;
			}
			.mid {
				flex: 8;
				.bottom {
					width: 600rpx;
					margin-top: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text {
						margin-left: 10rpx;
					}
					.province {
						margin-left: 0;
					}
				}
			}
			.right {
				flex: 1;
			}
		}
	}
	::v-deep .van-tag {
		padding: var(--tag-padding,2px 8px);
		margin-left: 10rpx;
	}
	::v-deep .van-button--round {
		width: 80%;
	}
	.btn {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -40%;
	}
</style>