shop-uniapp-240426/pages/user/address/address.vue

<template>
	<view class="address">
		<u-navbar :title="$t('page.address.address')" @leftClick="leftClick"></u-navbar>
		<view v-if="list.length > 0" class="address-list">
			<u-radio-group v-model="radiovalue1" placement="column">
				<view class="address-item" v-for="(item, index) in list">
					<div class="radio">
						<u-radio :name="item.id" :key="index" activeColor="#e68534"></u-radio>
					</div>
					<view class="address-info">
						<view class="user-info">
							<text>{{ item.name }}</text>
							<text>{{ item.phone }}</text>
							<u-tag v-if="item.defaultFlag == 'true'" text="默认" size="mini" type="warning"
								shape="circle"></u-tag>
						</view>
						<view class="address-detail">
							{{ item.region }}
							{{ item.detail_address }}
						</view>
					</view>
					<view class="icon">
						<u-icon name="edit-pen" color="#ccc" size="28" @click="toAdd(item.id)"></u-icon>
						<u-icon name="trash" color="#ccc" size="28" @click="del(item.id)"></u-icon>
					</view>
				</view>
			</u-radio-group>
		</view>

		<view v-else class="no-product">
			<view class="box">
				<view class="no-product-title">{{ $t('page.address.no-address') }}</view>
			</view>
		</view>

		<view class="address-bottom">
			<u-button @click="toAdd" type="primary" shape="circle" color="#ED7A2F"
				:text="$t('page.address.addAddress')"></u-button>
		</view>

		<u-modal :show="delShow" @confirm="confirm" ref="uModal" :title="$t('myToactTitle')" @cancel="delCancel"
			:showCancelButton="true" :confirmText="$t('page.address.confirm')" :cancelText="$t('page.address.cancel')"
			:asyncClose="true">
			<view class="slot-content">
				<rich-text :nodes="$t('page.address.del_content')"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '',
				total: 0,
				list: [],
				delShow: false,
				delId: ''
			}
		},
		onShow() {
			this.getAddressList();
		},
		methods: {
			getAddressList() { //获取地址列表
				this.request('addressPage', {}, {
					"pageSize": 10,
					"pageNo": 0
				}).then(res => {
					this.total = res.result.total
					this.list = res.result.records;
				})
			},
			toAdd(id) {
				uni.navigateTo({
					url: '/pages/user/address/addAddres?id=' + id
				})
			},
			leftClick() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			del(id) {
				this.delShow = true;
				this.delId = id
			},
			confirm() {
				this.request('deleAddress', {
					id: this.delId
				}).then(res => {
					this.delShow = false;
					if (res.code == 200) {
						this.getAddressList();
						uni.$u.toast(this.$t('success-operation'))
					}
				})
			},
			delCancel() {
				this.delShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		.address-list {
			margin-top: 54px;

			.address-item {
				display: flex;
				justify-content: space-between;
				background: white;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 15px 15px;
				font-size: 25rpx;
				border-bottom: 1px solid #eaeaea;

				&:nth-last-child(1) {
					border: none;
				}

				.radio {
					display: flex;
					align-items: center;
				}

				.address-info {
					width: calc(100% - 60px);

					.user-info {
						display: flex;
						align-items: center;

						text {
							margin-right: 10rpx;
						}
					}
				}

				.icon {
					display: flex;
					width: 70px;
					justify-content: space-between;
				}
			}
		}

		.no-product {
			height: calc(100vh - 124px);
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 0px 15px;

			.box {
				font-size: 26rpx;
				text-align: center;

				.to-home {
					padding: 20rpx 140rpx;
					border: 1px solid #ccc;
					border-radius: 5px;
					text-align: center;
					margin: 20rpx 0px;
				}
			}
		}

		.address-bottom {
			display: flex;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 80px;
			background: white;
			box-shadow: -1px -1px 1px rgba(0, 0, 0, .1);
			box-sizing: border-box;
			padding: 0px 15px;

			&::v-deep .u-button {
				height: 70%;
			}
		}
	}
</style>