<template> <div> <div class="member-page"> <div class="member-body"> <div class="head-bg"></div> <div class="user-info"> <div class="picture"> <div class="inner"> <img :src="mainData.picture"/> </div> </div> <div class="nick-name">{{mainData.name}}</div> <span class="mark-red">户主</span> <div class="member-list"> <div class="figure" v-show="figureVisible"> <img src="../../assets/images/figure.png" class="full-width" mode="widthFix"/> <div class="title">暂无添加家庭成员!</div> </div> <div> <ul class="nav-pills" v-show="!figureVisible"> <li v-for="(item, index) in memberData" :key="index"> <div class="member-item" @click="goToUserDetail(item.userId, item.relationType)"> <div class="member-table"> <div class="cell picture"> <img :src="item.picture"/> </div> <div class="cell info"> <div class="name">{{item.name}}</div> <div class="age">{{item.age}}</div> </div> <span class="editor"> <i class="glyphicon glyphicon-pencil"></i> </span> </div> </div> </li> </ul> </div> </div> <div class="footer"> <p class="text-center text-danger m-b" v-if="btnDisabled">家庭成员仅支持添加5位</p> <button class="btn-orange btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelCreate">添加家庭成员</button> </div> </div> </div> </div> </div> </template> <script> import { getMemberByMainId } from '@/api/basic/basic' import { getAgeByBirth } from '@/util/index' import _iconMan from '@/assets/images/man.png' import _iconWoman from '@/assets/images/woman.png' import _iconBoy from '@/assets/images/boy.png' import _iconGirl from '@/assets/images/girl.png' import _iconOldwoman from '@/assets/images/oldwoman.png' export default { name: 'member', data () { return { userId: parseInt(this.$route.query.userId), mainData: { // 户主信息 id: '', name: '', picture: _iconMan }, memberData: [], // 家庭成员信息 figureVisible: false, // 海报提示 btnDisabled: false // “添加家庭成员”按钮状态 } }, created () { this.getMemberByMainIdFn(this.userId) // 根据当前用户id获取家庭成员数据 }, mounted: function () { }, computed: { }, components: { }, methods: { getMemberByMainIdFn (id) { this.$Indicator.open() getMemberByMainId(id).then(res => { this.$Indicator.close() if (res.code === 0) { let that = this if (res.data.length > 0) { this.figureVisible = false if (res.data.length >= 5) { this.btnDisabled = true } else { this.btnDisabled = false } } else { this.figureVisible = true } res.data.forEach(item => { if (item.masterMark === 1) { that.mainData.id = item.userId that.mainData.name = item.name that.mainData.picture = item.sex === 1 ? _iconBoy : item.sex === 2 ? _iconGirl : _iconGirl } else { let picture = _iconBoy if (item.relationType === 1) { // 子女 if (item.sex === 1) { picture = _iconBoy } else if (item.sex === 2) { picture = _iconGirl } else { picture = _iconMan } } else if (item.relationType === 2) { // 配偶 picture = _iconWoman } else if (item.relationType === 3) { // 父母 if (item.sex === 1) { picture = _iconMan } else if (item.sex === 2) { picture = _iconOldwoman } else { picture = _iconMan } } that.memberData.push({ name: item.name, sex: item.sex, age: getAgeByBirth(item.birth), picture: picture, userId: item.userId, relationType: item.relationType }) } }) } }).catch((error) => { this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, goToUserDetail (_id, _type) { // 跳转至用户编辑页(id=成员id,type=成员角色 1=子女、2=配偶、3=父母) this.$router.push({ path: '/member/edit', query: { memberId: this.mainData.id, type: _type, id: _id } }) }, handelCreate () { // 跳转至用户编辑页 this.$router.push({ path: '/member/edit', query: { memberId: this.mainData.id } }) } } } </script> <style scoped> .member-page .member-body { position: relative; } .member-page .member-body > .head-bg{ background-color: #43d1be; height: 8em; } .member-page .member-body .user-info { text-align: center; background-color: #f4f6f7; position: relative; padding-top: 3em; } .member-page .member-body > .user-info > .picture { width: 8em; height: 8em; margin: 0 auto; padding: 1em; background-color: #fff; border-radius: 50%; left: 0; right: 0; top: -5em; position: absolute; } .member-page .member-body > .user-info > .picture .inner > img { width: 100%; } .member-page .member-body > .user-info > .nick-name { text-align: center; font-size: 1.2em; margin: 0.8em 0; } .member-list { margin-top: 2em; padding: 0 0.5em; min-height: 10em; overflow: hidden; } .member-list ul > li { width: 50%; float: left; margin-left: 0; margin-bottom: 1em; } .member-list ul > li .member-item{ padding: 0.5em; background-color: #fff; border-radius: 5px; margin: 0 0.5em ; position: relative; overflow: hidden; } .member-table { display: table; width: 100%; } .member-table > .cell { display: table-cell; vertical-align: middle; } .member-table > .cell.picture { width: 4em; height: 4em; background-color: #a4d1f0; border-radius: 5px; } .member-table > .cell.picture > img { width: 4em; height: 4em; } .member-table > .cell.info { text-align: left; padding-left: 0.5em; } .member-table > .cell.info .name { font-size: 1.1em; max-width: 100%; white-space: nowrap; } .member-table > .cell.info .age { padding-right: 1.5em; } .member-table > .editor { position: absolute; bottom: 0.5em; right: 0.5em; display: inline-block; background-color: #43d1be; width: 1.5em; height: 1.5em; line-height: 1.5em; border-radius: 50%; color: #fff; text-align: center; } .member-page .member-body > .user-info > .footer { padding: 1em; } .figure { width: 20em; margin: 0 auto; } .figure .title { font-size: 1.1em; text-align: center; } </style>