个人信息设置

@@ -39,6 +39,12 @@ const component = {
             res.render('index', _.merge(result, data[1]));
             res.render('index', _.merge(result, data[1]));
         }).catch(next);
         }).catch(next);
     },
     },
+    mydetails: (req, res) => {
+        res.render('mydetails', {
+            module: 'home',
+            page: 'mydetails'
+        });
+    },
     help: (req, res, next) => {
     help: (req, res, next) => {
         homeModel.getHelpInfo().then(helpList => {
         homeModel.getHelpInfo().then(helpList => {
             res.render('help', {
             res.render('help', {
@@ -104,8 +110,6 @@ const component = {
             }
             }
         }).catch(next);
         }).catch(next);
     },
     },
-
-    // 关于我们
     aboutUs: (req, res) => {
     aboutUs: (req, res) => {
         res.render('about-us', {
         res.render('about-us', {
             module: 'home',
             module: 'home',

@@ -48,6 +48,7 @@ router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄
 router.get('/exchange', exchange.exchange);
 router.get('/exchange', exchange.exchange);
 router.get('/exchange/order', exchange.order);
 router.get('/exchange/order', exchange.order);
 
 
+router.get('/mydetails', home.mydetails); // 个人信息设置
 router.get('/about-us', home.aboutUs); // 个人中心 - 关于我们
 router.get('/about-us', home.aboutUs); // 个人中心 - 关于我们
 
 
 
 

+<div class="personal-details" id="details">
+    <mydetails gender="women" birthday="1990.07.17"></mydetails>
+</div>

+const Vue = require('yoho-vue');
+const Mydetails = require('home/mydetails.vue');
+
+new Vue({
+    el: '#details',
+    components: {
+        Mydetails
+    }
+});

+.personal-details {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    margin-top: 20px;
+    background-color: #fff;
+
+    ul {
+        width: 95%;
+        height: auto;
+        overflow: hidden;
+        float: right;
+
+        li {
+            &:first-of-type {
+                height: 100px;
+                line-height: 100px;
+            }
+
+            height: 80px;
+            border-bottom: 1px solid #e0e0e0;
+
+            .details-icon {
+                float: right;
+                height: 90px;
+                margin-right: 15px;
+
+                .icon {
+                    vertical-align: middle;
+                    color: #b0b0b0;
+                }
+            }
+
+            .user-avatar {
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                background-image: resolve("home/user-icon.png");
+                background-size: 100%;
+            }
+
+            .head-portrait {
+                width: 90px;
+                height: 90px;
+                overflow: hidden;
+                border-radius: 50%;
+                border: 1px solid #eee;
+                vertical-align: middle;
+            }
+
+            > label {
+                width: 100%;
+                height: 100%;
+                line-height: 80px;
+                font-size: 32px;
+                margin-right: 8%;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                display: inline-block;
+
+                .details-nickname,
+                .details-gender,
+                .details-birthday {
+                    text-align: right;
+                    float: right;
+                    margin-right: 40px;
+                    color: #b0b0b0;
+                }
+            }
+        }
+    }
+}

@@ -2,6 +2,7 @@
 @import "help";
 @import "help";
 @import "feedback";
 @import "feedback";
 @import "fav";
 @import "fav";
+@import "details";
 @import "about-us";
 @import "about-us";
 @import "coin";
 @import "coin";
 @import "logistics";
 @import "logistics";

+<template>
+     <ul>
+        <li>
+            <label>头像
+                <span class="details-icon">
+                    <span class="head-portrait user-avatar" data-avatar="{{head_ico}}"></span>
+                    <span class="icon icon-right"></span>
+                </span>
+            </label>
+        </li>
+        <li>
+            <label>昵称<input class="details-nickname" v-model='nickname'></label>
+        </li>
+        <li>
+            <label>性别<span class="details-gender">{{ gender }}</span></label>
+        </li>
+        <li>
+            <label>生日<span class="details-birthday">{{ birthday }}</span></label>
+        </li>
+    </ul>
+</template>
+
+<script>
+    module.exports = {
+        props: ['head_ico', 'nickname', 'gender', 'birthday'],
+        data() {
+            return {
+            };
+        }
+    };
+</script>