yubaitong-c/src/packages/family/family-list.vue

<template>
	<view class="user-setting-box">
		<!-- #ifndef MP-TOUTIAO -->
		<Navbar background-color="#fff" color="#333" title="家庭管理"></Navbar>
		<!-- #endif -->
		<view class="content">
			<view class="family-item" v-for="item in familyList" :key="item.fid" @click="toFamilyDetail(item)">
				<view class="left">
					<view class="name">{{item.familyName}}</view>
					<view class="info">
						<view>{{item.babyNumber}}个宝宝</view>
						<view>{{item.memberNumber}}个成员</view>
					</view>
				</view>
				<view class="right">
					<IconText :code="`\ue88e`" color="#94B2FF" size="16" class="icon"></IconText>
				</view>
			</view>
			<view class="add-btn" @click="toAddFamily">
				<IconText :code="`\ue899`" color="#fff" size="16" class="icon"></IconText>
				新建家庭
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Mixins
	} from 'vue-property-decorator';
	import loginMixin from '@/common/mixins/loginMixin.ts';
	// import {
	// 	namespace
	// } from 'vuex-class';
	// const baseModule = namespace('base');
	@Component({})
	export default class SelectBaby extends Mixins(loginMixin) {
		// @baseModule.Getter('_userInfo') _userInfo: any;
		familyList: any = [{}];
		
		onShow() {
			this.getFamilyList();
		}
		
		getFamilyList() {
			this.$http
				.get({
					url: this.$api.getFamilyList
				})
				.then((res : any) => {
					this.familyList = res.list;
				}, (err : any) => {
					console.log(err);
				});
		}
		
		toFamilyDetail(item: any){
			this.$Router.push({
				path: '/packages/family/family-setting',
				query: {
					fid: item.fid
				}
			})
		}
		
		toAddFamily(){
			this.$Router.push({
				path: '/packages/family/add-family',
			})
		}
		
		handleStep(item: any){
			this.$Router.push({
				path: this.$Route.query.path,
				query: {
					fid: item.fid
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f5f5f5;
	}
	.user-setting-box {
		// background: #F5F5F5;
		height: 100vh;
		// @include flex-y(flex-start);

		.content {
			width: 100%;
			padding: 0 vw(15);
			box-sizing: border-box;
			@include flex-y(flex-start);
			padding-bottom: vw(50);
			.family-item{
				width: 100%;
				height: vw(80);
				@include flex-x();
				padding: vw(12) vw(18);
				box-sizing: border-box;
				background: #fff;
				border-radius: vw(10);
				margin-top: vw(10);
				.left{
					@include flex-y(center, flex-start);
					.name{
						@include word-vw(14, #333);
						font-weight: bold;
					}
					.info{
						@include flex-x(flex-start);
						@include word-vw(12, #999);
						margin-top: vw(5);
						view{
							margin-right: vw(5);
						}
					}
				}
				.right{
					
				}
			}
			.add-btn{
				@include wh(120, 44);
				border-radius: vw(22);
				background: #618EFF;
				@include flex-x(center);
				@include word-vw(14, #fff);
				box-shadow: 0px 6px 4px  rgba(53, 106, 240, 0.15);
				margin-top: vw(32);
				.icon{
					margin-right: vw(3);
				}
			}
		}
	}
</style>