首页 个人信息部分

@@ -3,15 +3,18 @@
 const headerModel = require('../../../doraemon/models/header'); // 头部model
 const family = require('../models/family');
 
-exports.familyIndex = (req, res) => {
-    // let uid = req.user.uid;
+exports.familyIndex = (req, res, next) => {
+    let uid = req.user.uid;
 
-    res.render('family/index', {
-        page: 'family',
-        title: 'family',
-        width750: true,
-        localCss: true
-    });
+    req.ctx(family).familyIndex(uid).then(result => {
+        res.render('family/index', {
+            page: 'family',
+            title: 'family',
+            width750: true,
+            localCss: true,
+            familyIndexData: result
+        });
+    }).catch(next);
 };
 
 exports.coinDetail = (req, res) => {

@@ -2,12 +2,69 @@
 
 const _ = require('lodash');
 const moment = require('moment');
+const api = global.yoho.API;
 
 class familyModel extends global.yoho.BaseModel {
     constructor(ctx) {
         super(ctx);
     }
 
+    /**
+     * 个人详情数据
+     */
+    _userData(uid) {
+        if (uid) {
+            return api.get('', {
+                method: 'app.passport.profile',
+                uid: uid
+            }, {
+                code: 200
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    /**
+     * 潮流口令
+     */
+    _getCode(uid) {
+        if (uid) {
+            return api.get('', {
+                method: 'app.invitecode.my',
+                uid: uid
+            }, {
+                code: 200
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    familyIndex(uid) {
+        return Promise.all([
+            this._userData(uid),
+            this._getCode(uid)
+        ]).then((result) => {
+            let familyIndexData = {};
+
+            if (result[0] && result[0].data) {
+                familyIndexData = _.assign(familyIndexData, {
+                    head_ico: result[0].data.head_ico,
+                    nickname: result[0].data.nickname,
+                    gender: result[0].data.gender,
+                    birthday: moment(result[0].data.birthday).format('MM-DD')
+                });
+            }
+
+            if (result[1] && result[1].data) {
+                familyIndexData = _.assign(familyIndexData, result[1].data);
+            }
+
+            return familyIndexData;
+        });
+    }
+
     formatDay(day) {
         return moment(day).format('YYYY-MM-DD');
     }

 <div class="yoho-family-page yoho-page">
+{{# familyIndexData}}
     <div class="family-heade">
         <div class="header-top">
-            <button class="back iconfont" onclick="javascript:history.go(-1);">&#xe72e;</button>
-            <span>111</span>
+            <span class="back" onclick="javascript:history.go(-1);"></span>
+            <span class="headings"></span>
+        </div>
+        <div class="person-detail">
+            <span class="user-avatar" data-avatar="{{head_ico}}"></span>
+            <div class="basic-info">
+                <span class="user-name">{{nickname}}</span>
+                <span class="gender {{#isEqualOr gender 1 }}boy{{/isEqualOr}}{{#isEqualOr gender 2 }}girl{{/isEqualOr}}"></span>
+            </div>
+            <div class="info">
+                <span class="city">江苏南京</span>
+                <span class="birthday">{{birthday}}</span>
+            </div>
+            <div class="invition">
+                <span class="code trend-code">
+                   {{#if trendWord}}
+                        # {{trendWord}} #
+                    {{else}}
+                        {{inviteCode}}
+                    {{/if}}
+                </span>
+                <span class="code-set"></span>
+                {{#unless trendWord}}
+                <span class="code-tip"></span>
+                {{/unless}}
+            </div>
+            <div class="inviton-set hide">
+                <textarea maxlength="15" placeholder="请输入你的潮流口令"></textarea>
+            </div>
+        </div>
+    </div>
+    <div class="vip-grade">
+        <div class="title">会员等级及权益</div>
+        <div class="grade-content">
+            <div class="content-item">
+                <img class="item-tag" src="">
+                <span class="name">Yoho!bUY</span>
+                <span class="level">黄金</span>
+            </div>
+            <div class="content-item">
+                <img class="item-tag" src="">
+                <span class="name">Yoho!bUY</span>
+                <span class="level">黄金</span>
+            </div>
+            <div class="content-item">
+                <img class="item-tag" src="">
+                <span class="name">Yoho!bUY</span>
+                <span class="level">黄金</span>
+            </div>
+            <div class="content-item">
+                <img class="item-tag" src="">
+                <span class="name">Yoho!bUY</span>
+                <span class="level">黄金</span>
+            </div>
+        </div>
+    </div>
+    <div class="integral">
+        <div class="title">积分乐园</div>
+        <div class="integral-content">
+            <div class="charts"></div>
+            <div class="mark"></div>
+        </div>
+    </div>
+
+    {{! 资源位}}
+    <div class="rec">
+        <div class="resource-content">
+            <div data-id="{{template_id}}">
+                {{> resources/banner}}
+            </div>
         </div>
     </div>
+{{/ familyIndexData}}
 </div>
\ No newline at end of file

@@ -58,7 +58,12 @@ $('.set-world').click(function() {
 
                 point(1, $('.trend-world-area').val());
 
-                $('.trend-code').html($('.trend-world-area').val());
+                if ($('.yoho-page').hasClass('my-page')) {
+                    $('.trend-code').html('# ' + $('.trend-world-area').val() + ' #');
+                } else {
+                    $('.trend-code').html($('.trend-world-area').val());
+                }
+
                 $('.copy.button').eq(0).attr('href', copyUrl);
 
                 setTimeout(function() {

-require('home/family.page.css');
+import 'home/family.page.css';
+import $ from 'yoho-jquery';
+import Page from 'yoho-page';
+import tip from 'plugin/tip';
+
+class FamilyIndex extends Page {
+    constructor() {
+        super();
+
+        this.selector = {
+            $userAvatar: $('.user-avatar'),
+            $codeSet: $('.code-set'),
+            $invition: $('.invition'),
+            $invitonSet: $('.inviton-set'),
+            $textarea: $('textarea')
+        };
+
+        this.init();
+
+        this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
+        this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
+    }
+
+    init() {
+        this.headIco();
+    }
+
+    // 头像
+    headIco() {
+        if (this.selector.$userAvatar.data('avatar')) {
+            this.selector.$userAvatar.css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
+        }
+    }
+
+    // 设置潮流口令
+    setTrendPop() {
+        this.selector.$invition.hide();
+        this.selector.$invitonSet.show();
+        this.selector.$textarea.focus();
+    }
+
+    // 提交口令
+    saveTrendWord() {
+        let trendWord = this.selector.$textarea.val();
+
+        this.ajax({
+            type: 'GET',
+            url: location.protocol + '//m.yohobuy.com/activity/set-trend-world',
+            data: {
+                trendWord: trendWord
+            }
+        }).then(result => {
+            tip.show(result.message);
+
+            if (result.code === 200) {
+                this.selector.$invition.show();
+                this.selector.$invitonSet.hide();
+                this.selector.$invition.find('.trend-code').html('# ' + trendWord + ' #');
+            } else {
+                this.selector.$textarea.focus();
+            }
+        }).catch(() => {
+            tip.show('服务异常，请稍后重试');
+        });
+    }
+}
+
+$(() => {
+    new FamilyIndex();
+});

@@ -103,7 +103,7 @@
             line-height: 46px;
             overflow: hidden;
 
-            .trend-code {
+            .code {
                 display: inline-block;
                 vertical-align: top;
             }

 .yoho-family-page {
+    background-color: #f0f0f0;
+
     .family-heade {
         background: linear-gradient(#46ba8e, #67c7c0);
+        padding-bottom: 50px;
+
+        .header-top {
+            height: 126px;
+            line-height: 96px;
+            color: #fff;
+            padding: 34px 30px 0;
+
+            .back {
+                width: 20px;
+                height: 40px;
+                background-image: resolve("home/family/back.png");
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                display: block;
+                float: left;
+                margin-top: 10px;
+            }
+
+            .headings {
+                display: inline-block;
+                height: 50px;
+                width: 87px;
+                background-image: resolve("home/family/yoho-family.png");
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                margin-left: 280px;
+            }
+        }
+
+        .person-detail {
+            padding-left: 40px;
+            color: #fff;
+            vertical-align: bottom;
+            height: 160px;
+
+            .user-avatar {
+                float: left;
+                position: relative;
+                width: 160px;
+                height: 160px;
+                border-radius: 50%;
+                background-image: resolve("home/index/user-avatar.png");
+                background-size: 100%;
+                overflow: hidden;
+                margin-right: 30px;
+            }
+
+            .basic-info {
+                line-height: 55px;
+            }
+
+            .user-name {
+                padding-right: 14px;
+                font-size: 48px;
+                height: 55px;
+                font-weight: bold;
+                line-height: 55px;
+            }
+
+            .gender {
+                background-size: 100% 100%;
+                display: inline-block;
+                width: 29px;
+                height: 38px;
+            }
+
+            .boy {
+                background-image: resolve("home/family/boy.png");
+            }
+
+            .girl {
+                background-image: resolve("home/family/girl.png");
+            }
+
+            .info {
+                font-size: 24px;
+                margin-left: 160px;
+                text-align: left;
+            }
+
+            .birthday {
+                margin-left: 15px;
+            }
+
+            .invition {
+                margin-top: 15px;
+                font-size: 30px;
+            }
+
+            .inviton-set {
+                width: 495px;
+                height: 48px;
+                margin-top: 15px;
+                background-image: resolve("home/family/write-bg.png");
+                background-size: 100%;
+                background-repeat: no-repeat;
+                margin-left: 190px;
+            }
+
+            textarea {
+                width: 460px;
+                height: 40px;
+                border: none;
+                resize: none;
+                margin-left: 30px;
+                line-height: 40px;
+                color: #807e7e;
+                font-size: 18px;
+            }
+
+            .trend-code {
+                display: inline-block;
+                vertical-align: top;
+            }
+
+            .code-set {
+                background-image: resolve("home/index/code-set.png");
+                background-repeat: no-repeat;
+                background-size: 100%;
+                display: inline-block;
+                width: 40px;
+                height: 40px;
+                margin-left: 5px;
+            }
+
+            .code-tip {
+                background-image: resolve("home/family/tag.png");
+                background-repeat: no-repeat;
+                background-size: 100%;
+                width: 125px;
+                height: 36px;
+                display: inline-block;
+                margin-left: 13px;
+            }
+        }
+    }
+
+    .title {
+        font-size: 34px;
+        line-height: 100px;
+        height: 100px;
+        display: inline-block;
+        color: #1a1a1a;
+        padding-left: 30px;
+        width: 100%;
+        background-color: #fff;
+    }
+
+    .vip-grade {
+        background-color: #fff;
+
+        .grade-content {
+            width: 100%;
+            overflow: hidden;
+        }
+
+        .content-item {
+            width: 250px;
+            margin-bottom: 50px;
+            float: left;
+            text-align: center;
+
+            .item-tag {
+                width: 140px;
+                height: 140px;
+                margin-bottom: 12px;
+                border-radius: 20px;
+                overflow: hidden;
+            }
+
+            .name {
+                font-size: 28px;
+                color: #43b938;
+                display: block;
+                line-height: 46px;
+            }
+
+            .level {
+                font-size: 24px;
+                color: #b0b0b0;
+                display: block;
+            }
+        }
+    }
+
+    .integral {
+        margin: 30px 0;
+
+        .integral-content {
+            background-color: #fff;
+            padding-left: 30px;
+            padding-bottom: 40px;
+
+            .charts {
+                width: 320px;
+                height: 320px;
+                border: 1px solid red;
+            }
+        }
     }
 }