talk_appAmin/pages/signln/signaddress.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">
		<scroll-view class="scroll-container" scroll-y="true">
			<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>
					<text class="textaddress">{{item.address}} <text>{{item.detailedAddress}}</text></text>

					<view
						style="width: 638rpx;height: 2rpx;background: #f4f5f6; margin-top: 24rpx;margin-left: 24rpx;margin-right: 56rpx;">
					</view>


					<view style="float: right; margin-top: 27rpx;">
						<image class="addbotimage" @click="Edit(item.id)" src="../../static/images/sign/edit.png">
						</image>
						<image class="addbotimage" @click="Delete(item.id)" src="../../static/images/sign/delete.png">
						</image>
					</view>

					<view class="havebottom">
						<image v-if="item.inCommonUse == '1'" @click="IsShow(item.id)" class="havebottomimage"
							src="../../static/images/sign/isH.png"></image>
						<image v-else @click="IsShow(item.id)" class="havebottomimage"
							src="../../static/images/sign/IsHave.png"></image>
						<text :class="item.inCommonUse == '1' ?  'havebotomisshowtext':'havebottomtext' ">常用地址</text>
					</view>

				</view>
			</view>
		</scroll-view>

		<view class="fixed-button">
			<view class="butview" @click="AddAddressClick()">
				<view class="but">
					<text>添加地址</text>
				</view>
			</view>
		</view>

	</view>





</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance
	} from "vue";

	const {
		proxy
	} = getCurrentInstance();
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";


	// 将不常用地址转为常用地址
	async function IsShow(id) {
		var arrlist = arr.value.find(item => item.id == id);
		arrlist.inCommonUse = '1';
		console.log(arrlist);
		updateSignAddress(arrlist).then(response => {})
		getList();
	}
	const arr = ref([{
			id: 11,
			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",
		},
		{
			id: 3,
			name: "李先生",
			phone: "19993439121",
			address: "天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元120212号楼1单元120212号楼1单元1202天津 天津市 河北区 建昌道街道红星北路诗景颂院12号楼1单元1202",
		}
	])

	const IsCLick = ref(0)

	function HaveAddress(id) {
		IsCLick.value = id;
	}

	function returnTo() {
		uni.navigateBack({
		});
	}
	function AddAddressClick() {
		proxy.$tab.navigateTo("/pages/signln/AddAddress")
	}
	import {
		listSignAddress,
		getSignAddress,
		delSignAddress,
		addSignAddress,
		updateSignAddress,
		listSignAddressUser
	} from "@/api/signln/SignAddress/SignAddress";

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

			if (arr.value.inCommonUse === '1') {

			}

		});
	}

	getList();


	//删除
	function Delete(id) {
		uni.showModal({
			title: '提示',
			content: '确定删除当前地址吗?',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					delSignAddress(id).then(() => {
						uni.showToast({
							title: '删除成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						getList();
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	//修改
	function Edit(id) {
		proxy.$tab.navigateTo("/pages/signln/Editaddress?id=" + id)
	}
</script>

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

	.haveaddress {
		width: 686rpx;
		height: 238rpx;
		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;
		margin-left: 24rpx;
	}

	.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: 51rpx;
		margin-top: 27rpx;
		margin-left: 24rpx;

		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: 600;
		width: 123rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #00CCBE;
		display: block;
		margin: auto;
		line-height: 88rpx;
		margin-top: 22rpx;
	}

	.havebottom {
		margin-left: 24rpx;
		margin-top: 27rpx;
	}

	.havebottomimage {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.addbotimage {
		width: 32rpx;
		height: 29rpx;
		margin-right: 24rpx;
	}

	.havebottomtext {
		font-weight: Regular;
		width: 111rpx;
		height: 28rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
		margin-left: 12rpx;
		vertical-align: middle;
	}

	.havebotomisshowtext {
		font-weight: Regular;
		width: 111rpx;
		height: 28rpx;
		font-size: 24rpx;
		text-align: left;
		color: #00CCBE;
		margin-left: 12rpx;
		vertical-align: middle;
	}

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

	.scroll-container {
		flex: 1;
		overflow: auto;
	}
</style>