uniapp-qxk/packages/address/address.vue

<template>
	<view style="flex-direction: column;">
		<scroll-view class="scroll-view" :scroll-y="true">
			<view class="addressItem" v-for="(item, index) in addressList" :key="item.id">
				<view class="addressItemTop">
					<text class="addrName">{{ item.name }}</text>
					<text class="addrTel">{{ item.phone }}</text>
				</view>
				<text class="addr">{{ item.address }}</text>
				<view class="line"></view>
				<view class="optionsPanel">
					<radio-group @change="radioChange">
						<label>
							<radio :value="item.id" :checked="item.isDefault" color="#e7a23f"></radio>
							<text>设置为默认地址</text>
						</label>
					</radio-group>
					<view class="rightPanel">
						<image class="optionsBtn" src="../../static/删除.png" @click="remove"></image>
						<image class="optionsBtnEdit" src="../../static/编辑.png" @click="$url('/packages/addAddress/addAddress?id='+ item.id)"></image>
					</view>
				</view>
				<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			</view>
		</scroll-view>
		<view class="addNewAddr" @click="$url('/packages/addAddress/addAddress')">
			<text>+ 新增收获地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [{
					id: '1',
					name: '邓平艺',
					phone: '18454545455',
					address: '北京北京市海淀区钻石大厦C座',
					isDefault: true
				},{
					id: '2',
					name: '邓艺平',
					phone: '18454545455',
					address: '北京北京市海淀区钻石大厦C座',
					isDefault: false
				},{
					id: '3',
					name: '洛阳',
					phone: '18454545455',
					address: '北京北京市海淀区钻石大厦C座',
					isDefault: false
				}]
			}
		},
		methods: {
			radioChange(event){
				let id = event.detail.value;
				this.addressList.forEach(item => {
					if(item.id === id){
						item.isDefault = true;
					}else{
						item.isDefault = false;
					}
				});
			},
			remove(){
				this.$msg('删除')
			}
		}
	}
</script>

<style scoped class="scss">
/deep/view{
	display: flex;
	background-color: #FFFFFF;
}

.scroll-view{
	height: calc(100vh - 200rpx);
}
	
.checkBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}
	.addressItemTop{
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addressItem{
		flex-direction: column;
	}
	.line{
		height: 1rpx;
		background-color: #D8D8D8;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addrName{
		margin-left: 32rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 40rpx;
	}
	.addr{
		margin-left: 32rpx;
	}
	.optionsPanel{
		margin-left: 32rpx;
		margin-bottom: 40rpx;
		align-items: center;
		justify-content: space-between;
	}
	.rightPanel{
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
	}
	.optionsBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 50rpx;
	}
	.optionsBtnEdit{
		width: 38rpx;
		height: 38rpx;
	}
	.addNewAddr{
		height: 96rpx;
		/* width: 90%; */
		width: 686rpx;
		border: #E7A23F 2rpx solid;
		border-radius: 8rpx;
		position: fixed;
		bottom: 100rpx;
		left: calc(50% - 343rpx);
		justify-content: center;
		align-items: center;
		align-self: center;
		color: #E7A23F;
	}
	
</style>