talk_appAmin/pages/signln/harvestaddress.vue

<!-- 收货地址 -->
<template>
	<navbar_neadVue title="收货地址" background_color="#ffffff"></navbar_neadVue>

	<!-- 有地址 -->
	<view v-if="arr.length >= 1" 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}}</text>
		</view>

		<view class="butview">
			<view class="but">
				<text>确定地址</text>
			</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">
			<view class="but">
				<text>添加地址</text>
			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";

	const arr = reactive([{
			id: 1,
			name: "吴先生",
			phone: "19993439121",
			address: "天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元120212号楼1单元120212号楼1单元1202天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元1202",
		},
		{
			id: 2,
			name: "王先生",
			phone: "19993439121",
			address: "天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元120212号楼1单元120212号楼1单元1202天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元1202",
		},
		{
			id: 3,
			name: "李先生",
			phone: "19993439121",
			address: "天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元120212号楼1单元120212号楼1单元1202天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元1202",
		}
	])

	const IsHave = ref(0)

	console.log(arr.length)

	function HaveAddress(id) {
		IsHave.value = id;
	}
</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;
	}
</style>