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

<template>
	<view>
		<u-navbar title="地址管理" rightText="新增地址" autoBack placeholder @rightClick="rightClick"></u-navbar>
		<view v-if="list.length > 0">
			<view class="card_address" v-for="(item,index) in list" :key="index">
				<view class="center_item">
					<view class="title_item">{{item.name}}</view>
					<view class="phone_title">
						<view class="title_item">{{hidePhone(item.phone)}}</view>
						<view class="tag_phone" v-if="item.isDefault">默认</view>
					</view>
				</view>
				<view class="center_item address_item">
					<view class="title_address">
						{{cityScreening(item.city, areaData)}}{{cityScreening(item.area, areaData)}}{{item.address}}
					</view>
					<view @click="goAmend(item)"><u-icon name="edit-pen" size="30"></u-icon></view>
				</view>
			</view>
		</view>
		<view style="margin-top: 30%;" v-else>
			<u-empty mode="address"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		urbanArea
	} from '@/static/js/districtCode.js'
	export default {
		data() {
			return {
				areaData: urbanArea(), //原始数据
				list: []
			}
		},
		onShow() {
			console.log(23)
			this.getList()
		},
		mounted() {
			// this.getList()
		},
		methods: {
			getList() {
				this.$api.get('/api/applet/address').then(res => {
					if (res.code == 200) {
						this.list = res.data.list
					}
				})
			},
			// 城市筛选
			cityScreening(value, list) {
				function getChildById(parentArray, id) {
					for (let i = 0; i < parentArray.length; i++) {
						if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
							return parentArray[i];
						} else if (parentArray[i].children && Array.isArray(parentArray[i]
								.children)) { // 判断当前元素是否有子节点且类型为数组
							const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
							if (result !== null) { // 若子节点存在结果，则返回该结果
								return result;
							}
						}
					}
					return null; // 没有找到符合条件的元素时返回null
				}
				var name = getChildById(list, value)
				if (name != null) {
					return name.label
				}
			},
			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(value) {
				this.$cache.setCache('addressInfo', value)
				uni.navigateTo({
					url: '/pages/mine/addAddress?revamp=' + true + '&id=' + value.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_address {
		margin: 30rpx 20rpx 20rpx 20rpx;
		padding: 10rpx;
		border-bottom: 2rpx solid #e7e6e4;
		// border-image: linear-gradient(to bottom, transparent 50%, #e7e6e4 50%) 0 0 100% 0;
	}

	.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>