dajiankang-uniapp/pages/address/list.vue

<template>
	<view class="address">
		<wd-navbar title="地址管理" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>

		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<view style="padding: 30rpx">
				<view class="address-a" @click="back_A(item)" v-for="(item, index) in dataList" :key="index">
					<view class="top">
						<view class="top-a">
							<view>{{ item.receiverName }}</view>
							<view>{{ item.receiverPhone }}</view>
						</view>
						<view class="top-b">{{ item.receiverArea }} {{ item.receiverAddress }}</view>
					</view>
					<view class="bottom">
						<view class="bottom-r">
							<view @click.stop="deleAddress(item)">删除</view>
							<view style="margin-left: 50rpx" @click.stop="tn(`./add?id=${item.id}`)">编辑</view>
							<view @click.stop="copyAddress(item)" style="margin: 0 50rpx">复制</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<view class="bottom-btn">
			<view class="button-a" @click="tn('./add')">新增收货地址</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import api from '@/api/index';
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const paging = ref(null);
const type = ref(null);
const dataList = ref([]);

onLoad((options: any) => {
	type.value = options.type;
});

onShow(() => {
	paging.value.reload();
});

const queryList = (pageNo, pageSize) => {
	api.addressPage({ pageNo, pageSize })
		.then((res: any) => {
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const back = () => {
	uni.navigateBack();
};

const tn = (e) => {
	uni.navigateTo({
		url: e
	});
};

const back_A = (e) => {
	if (type.value == 1) {
		uni.$emit('address', e);
		uni.navigateBack();
	} else {
		return;
	}
};

const deleAddress = (data) => {
	uni.showModal({
		title: '提示',
		content: '是否确认删除？',
		success: (res) => {
			if (res.confirm) {
				api.addressDel({ id: data.id }).then((res) => {
					paging.value.reload();
				});
			}
		}
	});
};

const copyAddress = (data) => {
	let aaa = `收货人：${data.receiverName}
手机号码：${data.receiverPhone}
所在地区：${data.receiverArea}
详细地址：${data.receiverAddress}`;
	uni.setClipboardData({
		data: aaa,
		success: function () {
			console.log('success');
		}
	});
};

// export default {
// 	data() {
// 		return {
// 			list: [],
// 			type: null
// 		};
// 	},
// 	onLoad(option) {
// 		this.type = option.type;
// 		this.getList();
// 	},
// 	methods: {
// 		getList() {
// 			// addressList().then((res) => {
// 			// 	this.list = res;
// 			// });
// 		},

// 		copyAddress(data) {
// 			let aaa = `收货人：${data.realName}
// 手机号码：${data.phone}
// 所在地区：${data.province}${data.city}${data.district}
// 详细地址：${data.detail}`;
// 			uni.setClipboardData({
// 				data: aaa,
// 				success: function () {
// 					console.log('success');
// 				}
// 			});
// 		},
// 		back_A(e) {
// 			if (this.type == 1) {
// 				uni.$emit('address', e);
// 				uni.navigateBack();
// 			} else {
// 				return;
// 			}
// 		},
// 		deleAddress(data) {
// 			uni.showModal({
// 				title: '提示',
// 				content: '是否确认删除？',
// 				success: (res) => {
// 					if (res.confirm) {
// 						addressDel({ id: data.id }).then((res) => {
// 							this.getList();
// 						});
// 					}
// 				}
// 			});
// 		},
// 		tn(e) {
// 			wx.chooseAddress({
// 				success: (res) => {
// 					addressSave({
// 						realName: res.userName,
// 						phone: res.telNumber,
// 						province: res.provinceName,
// 						city: res.cityName,
// 						district: res.countyName,
// 						detail: res.detailInfo
// 					}).then((res) => {
// 						this.getList();
// 					});
// 					console.log(res);
// 				},
// 				fail: (err) => {
// 					console.log(err);
// 				}
// 			});
// 		}
// 	}
// };
</script>

<style lang="scss" scoped>
.address {
	.address-a {
		width: 100%;
		background: #ffffff;
		box-shadow: 0px 2rpx 21rpx 0px rgba(184, 184, 184, 0.35);
		border-radius: 17rpx;
		margin-bottom: 30rpx;

		.top {
			padding: 40rpx;
			border-bottom: 1rpx solid #f3f3f3;

			.top-a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
				margin-bottom: 45rpx;
			}

			.top-b {
				font-size: 30rpx;
				font-weight: bold;
				color: #999999;
			}
		}

		.bottom {
			padding: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom-che {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				font-size: 24rpx;
				font-weight: bold;
				color: #222222;
			}

			.bottom-r {
				font-size: 26rpx;
				font-weight: bold;
				color: #999999;
				display: flex;
				align-items: center;
			}
		}
	}

	.bottom-btn {
		width: 100%;
		height: 150rpx;
		padding: 30rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0px 6rpx 16rpx 2rpx rgba(170, 170, 170, 0.35);
		display: flex;
		align-items: center;
		justify-content: center;

		.button-a {
			width: 690rpx;
			height: 90rpx;
			background: #799675;
			border-radius: 15rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 90rpx;
		}
	}
}
</style>