gas-cylinder-h5/pages/mine/address.vue

<template>
	<view>
		<u-navbar title="地址管理" rightText="新增地址" autoBack placeholder @rightClick="rightClick"></u-navbar>
		<view>
			<view class="card_address" v-for="(item,index) in list" :key="index">
				<view class="center_item">
					<view class="title_item">{{item.title}}</view>
					<view class="phone_title">
						<view class="title_item">{{hidePhone(item.phone)}}</view>
						<view class="tag_phone" v-if="item.flag">默认</view>
					</view>
				</view>
				<view class="center_item address_item">
					<view class="title_address">{{item.address}}{{item.detailed}}</view>
					<view @click="goAmend"><u-icon name="edit-pen" size="30"></u-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: 'gadga',
					phone: '17673255533',
					address: '贵州省贵阳市观山湖区',
					detailed: '金融城c座',
					flag: true,
				}, {
					title: '熊',
					phone: '17673255533',
					address: '贵州省贵阳市观山湖区',
					detailed: '金融城c座',
				}, ]
			}
		},
		methods: {
			hidePhone(phoneNumber) {
				function hidePhoneNumber(phoneNumber) {
					return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(-4);
				}
				const hiddenPhoneNumber = hidePhoneNumber(phoneNumber);
				return hiddenPhoneNumber
			},
			// 新增地址
			rightClick() {
				uni.navigateTo({
					url: '/pages/mine/addAddress'
				});
			},
			// 修改地址
			goAmend() {
				uni.navigateTo({
					url: '/pages/mine/addAddress?revamp=' + true
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_address {
		margin: 30rpx 20rpx 20rpx 20rpx;
		padding: 10rpx;
		border-bottom: 1rpx solid #e7e6e4;
	}

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

	.title_item {
		font-size: 26rpx;
		color: #606266;
	}

	.phone_title {
		position: relative;
		margin-left: 30rpx;
	}

	.tag_phone {
		position: absolute;
		right: -53rpx;
		top: -14rpx;
		padding: 2rpx 4rpx;
		border: 1rpx solid #2b85e4;
		font-size: 20rpx;
		color: #2b85e4;
	}

	.title_address {
		font-size: 30rpx;
		color: #303133;
		font-weight: 600;
	}

	.address_item {
		display: flex;
		justify-content: space-between;
		margin-top: 6rpx;
	}
</style>