web3-202226701037/chexnet-master-MP/pages/my/family/family.vue

<template>
	<view>
		<view class="top-back"></view>
		<view class="content">
			<view v-if="!family_list || Object.keys(family_list).length === 0" class="no_data"></view>
			<view v-else v-for="(value, key) in family_list" :key="key" class="family-item">
				<view @longpress="check_del_family(key)" @click="$util.navigateTo(`/pages/my/family/family_info/family_info?id=${key}`)" class="flex justify-between">
					<view>
						<view class="flex justify-start margin-bottom-xs">
							<text class="name center">{{value['name']}}</text>
							<text v-if="value['relationship']" class="relationship center">{{value['relationship']}}</text>
						</view>
						
						<text class="gender">性别：{{ value['gender'] === 0 ? '男' : (value['gender'] === 1 ? '女' : '未知') }}</text>
						
						<text v-if="value['age']" class="age">年龄：{{value['age']}}岁</text>
					</view>
					<text class="cuIcon-right center"></text>
				</view>
			</view>
			
			<uv-gap height="60"></uv-gap>
			<button @click="$util.navigateTo('/pages/my/family/family_info/family_info')" class="bottom-button center">新增成员</button>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.family_list = uni.getStorageSync('family_list');
		},
		onPullDownRefresh() {
			this.family_list = uni.getStorageSync('family_list');
		},
		data() {
			return {
				family_list: null,
			}
		},
		methods: {
			check_del_family(key){
				uni.showModal({
					title: '删除成员',
					content: ' 是否要删除此成员？',
					success: (res) => { 
						if (res.confirm) this.del_family(key); 
					}  
				})	
			},
			del_family(key){
				let family_list = uni.getStorageSync('family_list');
				delete family_list[key];
				
				this.family_list = family_list;
				uni.setStorageSync('family_list', family_list);
				
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="less" scoped>
	.family-item{
		background-color: #fff;
		border-radius: 20px;
		height: 80px;
		margin-top: 20px;
		padding: 15px;
		
		color: #666;
		letter-spacing: 1px;
		
		.name{
			letter-spacing: 2px;
			font-size: 20px;
			font-weight: 550;
			color: #555;
		}
		
		.gender{
			margin-right: 20px;
		}
		
		.relationship{
			color: #555;
			font-size: 17px;
			height: 28px;
			width: 75px;
			border-radius: 10px;
			letter-spacing: 0px;
			margin-left: 20px;
			background-color: #ebf6ff;
		}
	}
	.top-back{
		height: 35px;
		background-color: #1678ff;
		color: #fff;
		margin-bottom: -25px;
	}
	.content{
		padding: 10px 20px;
		border-radius: 25px 25px 0 0;
		border: none;
		background-color: #f6f6f6;
		height: 100vh;
	}
</style>