jiangchengfeiyi-xiaochengxu/pages/order/component/addressComponent.vue

<template>
	<view class="flex-col page">
		<view class="flex-row justify-center items-center relative group">
			<text class="text">收货地址</text>
			<image class="image pos" @click="close"
				src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png" />
		</view>
		<view class="flex-col list">
			<radio-group @change="radioChange">
				<view class="flex-col list-item_1" v-for="(item, index) in addressList" :key="index">
					<view class="flex-row justify-between items-center self-stretch">
						<view class="flex-row items-center">
							<!-- <image
	            class="shrink-0 image_2"
	            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=77acc0c7f94beb4408728eee129ffe97.png"
	          /> -->
							<radio color="#00ba9c" :value="index" :checked="index === current"></radio>
							<text class="font ml-9">{{ item.name }}</text>
							<text class="font_2 ml-9">{{ item.phone }}</text>
						</view>
						<view class="flex-row group_3">
							<image class="image_3"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FKNXwmQrO-edit.png"  @click="editAddress(item)"/>
							<image class="image_3 ml-12"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FXPhhJFpx-delete.png" @click="deleteAddress(item.id)" />
						</view>
					</view>
					<text class="self-center font_3 text_2 mt-12">{{ item.detailAddress }}</text>
				</view>
				</radio-group>
		</view>
		
		<view class="flex-col justify-start items-center section" @click="toNewAddress">
			<view class="flex-col justify-start items-center text-wrapper"><text class="text_3">添加新地址</text></view>
		</view>
		
	</view>
</template>

<script setup>
import { onMounted , ref } from 'vue'
import  emitter  from '../../../utils/emitter'
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
import { userStore } from '../../../store/userStore';
import { onShow } from "@dcloudio/uni-app";
const items = ref([null, null])
const addressList = ref([])
const userInfo = wx.getStorageSync('userInfo')
//页面跳转回来之后，刷新一次地址列表  onShow就是在页面显示后执行
onShow(() => {
	getAddressList()
})
//根据登录用户获取地址列表
const getAddressList = async () =>{
	const res = await uni.request({
		url: baseUrl + '/address/list' ,
		method: 'POST',
		data: {
			id : userInfo.id
		}
	})
	addressList.value = res.data.data
}
const close = () => {
	emitter.emit('close')
}
//当选项发生改变时
const radioChange = ( event ) => {
	const index = event.detail.value
	const temp = addressList.value[index] //通过emitter传入暂时的地址信息
	// console.log('temp',temp);
	emitter.emit('addressInfo', temp )
	emitter.emit('close')
}
//跳转到新建地址页面
const toNewAddress =()=>{
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info'
	})
}
//编辑地址方法
const editAddress =(value)=>{
	console.log('地址信息',value);
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info?editInfo=' + JSON.stringify(value)
	})
}
//删除地址方法
const deleteAddress = async( id ) =>{
	const res = await uni.request({
		url: baseUrl + '/address/delete',
		method: 'POST',
		data: { id: id }
	})
	if( res.data.code === 1 ) {
		getAddressList()
		console.log("删除地址成功");
	}
}
</script>

<style lang="scss" scoped>
	.ml-9 {
		margin-left: 16.88rpx;
	}

	.page {
		padding-top: 18.75rpx;
		background-color: #f5f5dc;
		border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background-color: #fbc27b;
		padding: 11.47rpx 24.38rpx 6.26rpx;
	}

	.text {
		color: #323232;
		font-size: 37.5rpx;
		font-family: Open Sans;
		line-height: 34.76rpx;
	}

	.image {
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.pos {
		position: absolute;
		right: 24.38rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.list {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.list-item_1 {
		padding: 26.27rpx 16.8rpx 24.98rpx;
		background-color: #fffef8;
		border-bottom: solid 1.88rpx #c8c8c8;
	}

	.image_2 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.19rpx;
		color: #323232;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 22.05rpx;
		color: #323232;
	}

	.group_3 {
		margin-right: 10.97rpx;
	}

	.image_3 {
		width: 39.38rpx;
		height: 39.38rpx;
	}

	.font_3 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 31.88rpx;
		color: #818181;
	}

	.text_2 {
		width: 601.88rpx;
	}

	.section {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		margin-top: 202.5rpx;
		padding: 18.75rpx 0;
		background-color: #fffef8;
	}

	.text-wrapper {
		padding: 27.9rpx 0 29.01rpx;
		background-color: #fbb612;
		border-radius: 75rpx;
		width: 639.38rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 31.22rpx;
	}

	@import url(../../../common/css/global.css);
</style>