cosmetics_shop_wxapp/loginPages/addressList/index.vue

<template>
	<view class="addressList">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">地址列表</view></cu-custom>
		<!-- section -->
		<view class="section">
			<radio-group @change="radioChange">
				<view v-for="(item, index) in value" :key="index" class="item bg-white margin padding radius flex align-center">
					<view class="margin-right-sm"><radio style="transform: scale(0.6);" class="radio" :value="item.id" :checked="item.isDefault" /></view>
					<view style="flex: auto;">
						<view class="flex align-center text-xl">
							<text class="margin-right-sm text-black">{{ item.name }}</text>
							<text class="margin-right-sm text-black">{{ item.tel }}</text>
							<text v-if="item.isDefault" class="cu-tag text-white round sm" style="background-color:#ee0a24;">默认</text>
						</view>
						<view class="a">{{ item.address }}</view>
					</view>
					<view class="margin-left-sm"><text class="cuIcon-writefill text-xxl text-gray"></text></view>
				</view>
			</radio-group>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-content padding bg-white"><button @click="handler" class="cu-btn  block">新增地址</button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: [
				{
					id: '1',
					name: '张三',
					tel: '13000000000',
					address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
					isDefault: true
				},
				{
					id: '2',
					name: '李四',
					tel: '1310000000',
					address: '浙江省杭州市拱墅区莫干山路 50 号'
				}
			]
		};
	},
	methods: {
		handler() {
			uni.navigateTo({
				url: '/loginPages/addaddress/index'
			});
		},
		
		radioChange(e){
			var {value}=e.detail,list=JSON.parse(JSON.stringify(this.value));
			// 取消默认
			var isDefaultIndex=list.findIndex(item=>item.isDefault);
			list[isDefaultIndex]['isDefault']=false;
			// 默认赋值
			isDefaultIndex=list.findIndex(item=>item.id==value);
			list[isDefaultIndex]['isDefault']=true;
			this.value=list;
		}
	}
};
</script>

<style lang="scss" scoped>
.addressList {
	.section {
		.item {
			width: calc(100vw - 60upx);
			box-sizing: border-box;
		}
	}
	.footer {
		height: 140upx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.footer-content {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			button {
				background-color: #ee0a24;
				color: #fff;
				height: 80upx;
				border-radius: 80upx;
			}
		}
	}
}
</style>