talk_appAmin/pages/signln/harvestaddress.vue

<!-- 收货地址 -->
<template>

	<navbar_neadVue title="收货地址" background_color="#ffffff"></navbar_neadVue>
	<view style="position: fixed; z-index: -1; background-color: #ffffff; top: 0; bottom: 0;left: 0;right: 0;"></view>


	<view class="container" v-if="arr.length >= 1">
		<scroll-view class="scroll-container" scroll-y="true">
			<!-- 可滑动的内容 -->
			<view class="content">
				<view v-for="(item,index) in arr" :key="index">
					<view class="haveaddress" @click="HaveAddress(item.id)">
						<text class="textname">
							{{item.name}}<text class="textphone">{{item.phone}}</text>
						</text>
						<image v-if="IsHave === item.id" class="image" src="../../static/images/sign/isH.png"></image>
						<image v-else class="image" src="../../static/images/sign/IsHave.png"></image>

						<text class="textaddress">{{item.address}}{{item.detailedAddress}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="fixed-button">
			<view class="butview" @click="click()">
				<view class="but">
					<text>确定地址</text>
				</view>
			</view>
		</view>
	</view>


	<!-- 添加收货地址 -->
	<view class="noadderes" v-else>
		<image class="icons" src="../../static/images/sign/Noaddress.png"></image>
		<text class="notext">暂无收货地址请添加</text>

		<view class="butview" @click="GoToAddAddress()">
			<view class="but">
				<text>添加地址</text>
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import {
		listSignAddress,
		getSignAddress,
		delSignAddress,
		addSignAddress,
		updateSignAddress,
		listSignAddressUser
	} from "@/api/signln/SignAddress/SignAddress";

	const {
		proxy
	} = getCurrentInstance();

	const arr = ref([])

	/** 查询地址管理列表 */
	const getList = () => {
		listSignAddressUser().then(response => {
			console.log(response.rows)
			arr.value = response.rows;
		});
	}
	getList();
	const IsHave = ref(0)

	console.log(arr.value)

	//选中
	function HaveAddress(id) {
		IsHave.value = id;
	}

	function returnTo() {
		uni.navigateBack({
			delta: 1
		});
	}

	function GoToAddAddress() {
		proxy.$tab.navigateTo('/pages/signln/AddAddress')
	}

	//返回当前的数据
	function click() {
		console.log(IsHave.value)
		proxy.$tab.navigateTo('/pages/signln/exdetail?addressid=' + IsHave.value)
	}
</script>

<style scoped>
	@import '@/pages/common/navbar/navbar.css';

	.haveaddress {
		width: 686rpx;
		height: 156rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 24rpx;
	}

	.textname {
		font-weight: Regular;
		width: 72rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #000000;
	}

	.textphone {
		margin-left: 27rpx;
	}

	.image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
		float: right;
		margin-right: 24rpx;
		margin-top: 62rpx;
	}

	.textaddress {
		color: #cbcbcb;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 24rpx;
		text-align: left;
		line-height: 36rpx;
		display: block;
		margin-right: 137rpx;
		margin-top: 27rpx;

		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.icons {
		position: absolute;
		width: 256rpx;
		height: 232rpx;
		left: 247rpx;
		top: 219rpx;
	}

	.notext {
		font-weight: Regular;
		width: 276rpx;
		height: 32rpx;
		font-size: 30rpx;
		text-align: left;
		color: #00CCBE;
		position: absolute;
		left: 232rpx;
		top: 480rpx;
	}

	.butview {
		width: 750rpx;
		height: 136rpx;
		background: #ffffff;
		position: absolute;
		bottom: 68rpx;
	}

	.but {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		background: #c0f0ec;
		margin-left: 32rpx;
	}

	.but>text {
		font-weight: Regular;
		width: 123rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #00CCBE;
		display: block;
		margin: auto;
		line-height: 88rpx;
		margin-top: 22rpx;
	}


	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 379rpx)
	}

	.scroll-container {
		flex: 1;
		overflow: auto;
	}

	.content {
		padding: 10px;
	}

	.item {
		padding: 10px;
		margin-bottom: 10px;
		background-color: #f0f0f0;
		border: 1px solid #ddd;
	}
</style>