HTFX-CRM-APP/pages/activity/shop/address.vue

<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('activity.consigneeInfo')" />
		</view>
		<view class="content">
			<Spin v-show="loading" />
			<view class="address-list">
				<template v-for="(item, index) in list" :key="index">
					<view class="address-item">
						<view class="address-info">
							<view class="item">
								<image class="icon" src="../../../static/shop/recipients.svg"></image>
								<text style="color: #333333; font-weight: 700; font-size: 40upx">{{ item.recipients }}</text>
							</view>
							<view class="item">
								<image class="icon" src="../../../static/shop/phone.svg"></image>
								<text style="color: #333333; font-weight: 700; font-size: 40upx">{{ item.phone }}</text>
							</view>
							<view class="item">
								<image class="icon" src="../../../static/shop/addr.svg"></image>
								<text style="color: #666666; font-weight: 400; font-size: 28upx">
									{{ (item.country ? item.country + ' ' : '') + (item.city ? item.city + ' ' : '') + (item.delivery_address ? item.delivery_address : '') }}
								</text>
							</view>
						</view>
						<view class="address-footer">
							<button class="mini-btn" size="mini" style="margin-left: 0" @click="useAddress(item)">
								<uni-icons type="checkmarkempty" size="32upx" color="#fff" class="icon"></uni-icons>
								<text>{{ $t('activity.useAddr') }}</text>
							</button>
							<view class="text-btn" @click="goEditAddr(item.id)">
								<image src="../../../static/edit.svg" class="icon"></image>
								<text>{{ $t('activity.edit') }}</text>
							</view>
							<view class="text-btn" @click="deleteAddress(item)">
								<image src="../../../static/del.svg" class="icon"></image>
								<text>{{ $t('activity.del') }}</text>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view style="margin-top: 76upx">
				<button class="primaryButton" style="font-size: 32upx; font-weight: 400" @click="goEditAddr(null)">
					{{ $t('activity.add') }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { addrList, delAddr } from '@/services/activity/shop';
export default {
	data() {
		return {
			loading: false,
			list: []
		};
	},
	methods: {
		async getListData() {
			this.list = [];
			this.loading = true;
			const res = await addrList();
			if (res && res.code === 0) {
				this.list = res.data;
			}
			this.loading = false;
		},
		useAddress(obj) {
			uni.$emit('changeAddr', obj);
			uni.navigateBack();
		},
		deleteAddress(obj) {
			uni.showModal({
				content: this.$t('activity.confirmDelAddr'),
				confirmColor: '#4DC0E5',
				success: async (res) => {
					if (res.confirm) {
						const resp = await delAddr({ id: obj.id });
						if (resp.code == 0) {
							this.$nextTick(() => {
								this.$cusModal.showModal({
									type: 'message',
									status: 'success',
									contentText: this.$t('common.success.action')
								});
							})
							this.getListData();
						} else {
							this.$nextTick(() => {								
								this.$cusModal.showModal({
									type: 'message',
									status: 'warning',
									contentText: resp.msg ?? this.$t('common.error.sysError')
								});
							})
						}
					}
				}
			});
		},
		goEditAddr(id) {
			if (id) {
				uni.navigateTo({
					url: '/pages/activity/shop/editAddress?id=' + id
				});
			} else {
				uni.navigateTo({
					url: '/pages/activity/shop/editAddress'
				});
			}
		}
	},
	created() {
		this.getListData();
	},
	onLoad() {
		uni.$on('updateAddr', () => {
			this.getListData();
		});
	},
	onUnload() {
		uni.$off('updateAddr');
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 0 40upx 16px;
	.title {
		margin: 14px 0 15px;
	}
	.content {
		display: flex;
		flex-direction: column;
		row-gap: 40upx;
		margin-top: 40upx;
	}

	.address-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		row-gap: 40upx;
		justify-content: space-between;
	}

	.address-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
		padding: 36upx 36upx 26upx 36upx;
		box-sizing: border-box;

		.address-info {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 1px solid rgba(235, 235, 235, 1);
			margin-bottom: 26upx;

			.item {
				display: flex;
				align-items: center;
				min-width: 45%;
				font-size: 28upx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				box-sizing: border-box;
				margin-bottom: 36upx;

				.icon {
					flex-shrink: 0;
					width: 32upx;
					height: 32upx;
					margin-right: 12upx;
					vertical-align: bottom;
				}
			}
		}

		.address-footer {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			column-gap: 18upx;
		}
	}
}

.text-btn {
	display: flex;
	padding: 0 8upx;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	height: 48upx;
	color: #777777;
	font-size: 28upx;
	font-weight: 400;
	cursor: pointer;

	&:active {
		opacity: 0.5;
	}

	.icon {
		width: 28upx;
		height: 28upx;
		vertical-align: bottom;
		margin-right: 12upx;
	}
}

.shop-dark-btn {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60upx;
	font-size: 28upx;
	color: #fff;
	background: linear-gradient(90deg, #103776 0%, #6374ae 100%);
	border-radius: 0px;
	cursor: pointer;

	&::after {
		border: none;
	}
}

.formDialog {
	padding: 0 14px;
	.searchForm {
		padding: 28px 16px;
		background: #fff;
		box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
	}
	.submitter {
		display: flex;
		column-gap: 10px;
		color: #fff;
		.confirmBtn,
		.cancelBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;
			flex: 1;
		}
		.confirmBtn {
			background-color: rgba(77, 192, 229, 1);
		}
		.cancelBtn {
			background-color: rgba(15, 54, 117, 1);
		}
	}
}

.mini-btn {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: rgba(41, 187, 228, 1);
	border-radius: 0px;
	cursor: pointer;
	font-size: 24upx;
	font-weight: 400;
	height: 48upx;
	padding: 0 20upx;

	&::after {
		border: none;
	}

	.icon {
		margin-right: 12upx;
	}
}

.uni-ellipsis-2 {
	/* #ifndef APP-NVUE */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* #endif */
	/* #ifdef APP-NVUE */
	lines: 2;
	text-overflow: ellipsis;
	/* #endif */
}
</style>