个人信息设置页

@@ -30,8 +30,8 @@ const component = {
                 module: 'home',
                 page: 'index',
                 head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 200, 200) : '',
-                profile_name: uid && proData ? proData.profile_name : '登录/注册',
-                userinfourl: uid ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
+                profile_name: proData ? proData.profile_name : '登录/注册',
+                userinfourl: proData ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
                     refer: req.originalUrl
                 }),
             };
@@ -40,10 +40,20 @@ const component = {
         }).catch(next);
     },
     mydetails: (req, res) => {
-        res.render('mydetails', {
-            module: 'home',
-            page: 'mydetails'
-        });
+        let uid = req.user.uid;
+
+        uid = 14459668; // 测试uid
+
+        homeModel.getUserProfileData(uid).then(data => {
+            res.render('mydetails', {
+                module: 'home',
+                page: 'mydetails',
+                head_ico: data && data.head_ico ? helpers.image(data.head_ico, 92, 92) : '',
+                nickname: '',
+                gender: data.gender === '1' ? 'men' : 'women',
+                birthday: data.birthday
+            });
+        })
     },
     help: (req, res, next) => {
         homeModel.getHelpInfo().then(helpList => {

@@ -11,7 +11,7 @@ const helpers = global.yoho.helpers;
  * @param int uid 用户ID
  * @return Object 个人详情数据
  */
-const _getUserProfileData = (uid) => {
+const _getUserProfileData = exports.getUserProfileData = (uid) => {
     return api.get('', {
         uid: uid,
         method: 'app.passport.profile'

 <div class="yoho-favorite-brand-page">
     <div class="fav-content" id="fav-content">
-        <fav-brand-list brand-url={{brandUrl}}></fav-brand-list>
+        <fav-brand-list brand-url='{{brandUrl}}'></fav-brand-list>
     </div>
 </div>
\ No newline at end of file

 <div class="yoho-favorite-page">
     <div class="fav-content" id="fav-content">
-        <fav-product-list product-url={{productUrl}}></fav-product-list>
+        <fav-product-list product-url='{{productUrl}}'></fav-product-list>
     </div>
 </div>
\ No newline at end of file

 <div class="logistics-page" id="logistics">
-    <components :is="currentView" :company_id="company_id" :company_name="company_name" company_list={{company_list}} keep-alive></components>
+    <components :is="currentView" :company_id="company_id" :company_name="company_name" company_list='{{company_list}}' keep-alive></components>
 </div>

 <div class="personal-details" id="details">
-    <mydetails gender="women" birthday="1990.07.17"></mydetails>
+    <mydetails head_ico='{{head_ico}}' nickname='{{nickname}}' gender='{{gender}}' birthday='{{birthday}}'></mydetails>
 </div>

+<div class="select">
+    <ul>
+        {{#each items}}
+        <li class="item-li">{{this}}</li>
+        {{/each}}
+        <li class="item-del">
+            <span>取消</span>
+        </li>
+    </ul>
+</div>

+/**
+ * 选择框组件
+ *
+ * @author: shenzm<zhimin.shen@yoho.cn>
+ * @date: 2016/07/26
+ */
+
+'use strict';
+
+const $ = require('yoho-jquery');
+const template = require('components/select.hbs');
+const Overlay = require('./overlay');
+
+function Select(items) {
+    if (!$.isArray(items) || items.length === 0) {
+        return;
+    }
+
+    // 初始化参数
+    const tpl = template({
+        items: items
+    });
+
+    // 生成模版
+    const elem = $(tpl);
+    const del = elem.find('.item-del');
+    $(del).click(function() {
+        overlay.hide();
+        elem.hide();
+    });
+
+    // 覆盖层
+    const overlay = new Overlay({
+        onClose: function() {
+            elem.hide();
+        }
+    });
+
+    return {
+        show: function(cb) {
+            if (elem.parent().length === 0) {
+                const lis = elem.find('.item-li');
+                lis.each(function(index) {
+                    $(this).click(function(e) {
+                        cb(e.target.innerHTML);
+                        overlay.hide();
+                        elem.hide();
+                    });
+                });
+                elem.appendTo('body').addClass('animation-target');
+            }
+
+            overlay.show();
+            elem.show();
+        },
+        hide: function() {
+            overlay.hide();
+            elem.hide();
+        }
+    }
+}
+
+module.exports = Select;

+/* -----------------------------------------------------------------------------
+
+  AnyPicker - Customizable Picker for Mobile OS
+  Version 2.0.5
+  Copyright (c)2016 Curious Solutions LLP
+  https://curioussolutions.in/libraries/anypicker/content/license.htm
+  See License Information in LICENSE file.
+
+ ----------------------------------------------------------------------------- */
+
+.ap-theme-ios.ap-layout-popup .ap-cont,
+.ap-theme-ios.ap-layout-popover .ap-cont
+{
+    border: 1px solid #e0e0e0;
+}
+
+.ap-theme-ios.ap-layout-popup,
+.ap-theme-ios.ap-layout-fixed,
+.ap-theme-ios.ap-layout-popover
+{
+	background: rgba(0, 0, 0, 0.4);
+}
+
+.ap-theme-ios .ap-tooltip,
+.ap-theme-ios .ap-tooltip:after
+{
+  	display: inline-block;
+ 	width: 0;
+  	height: 0;
+
+  	position: absolute;
+
+  	border-width: 11px;
+  	border-style: solid;
+  	z-index: 6;
+}
+
+.ap-theme-ios .ap-tooltip:after
+{
+  	content: " ";
+  	border-width: 10px;
+}
+
+.ap-theme-ios .ap-tooltip-bottom
+{
+  	top: -22px;
+  	left: 10px;
+  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0);
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-tooltip-bottom
+{
+	right: 10px;
+}
+
+.ap-theme-ios .ap-tooltip-bottom:after
+{
+  	top: -8px;
+  	left: -10px;
+  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0);
+}
+
+.ap-theme-ios .ap-tooltip-top
+{
+  	bottom: -21px;
+  	left: 16px;
+  	border-color: #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-tooltip-top
+{
+	right: 16px;
+}
+
+.ap-theme-ios .ap-tooltip-top:after
+{
+  	bottom: -8px;
+  	left: -10px;
+  	border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+}
+
+.ap-theme-ios .ap-tooltip-left
+{
+  	top: 50%;
+  	left: -22px;
+  	border-color: rgba(0, 0, 0, 0) #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+
+  	-webkit-transform: translateY(-50%);
+	-moz-transform: translateY(-50%);
+	-o-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.ap-theme-ios .ap-tooltip-left:after
+{
+  	top: -10px;
+  	left: -9px;
+  	border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+}
+
+.ap-theme-ios .ap-tooltip-right
+{
+  	top: 50%;
+  	right: -22px;
+  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e0e0e0;
+
+  	-webkit-transform: translateY(-50%);
+	-moz-transform: translateY(-50%);
+	-o-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.ap-theme-ios .ap-tooltip-right:after
+{
+  	top: -10px;
+  	left: -11px;
+  	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
+}
+
+.ap-theme-ios .ap-bg
+{
+	font-size: 18px;
+}
+
+.ap-theme-ios .ap-header
+{
+	height: 85px;
+	line-height: 85px;
+	text-align: center;
+	border-bottom: 1px solid #e0e0e0;
+}
+
+.ap-theme-ios .ap-header__title
+{
+	font-size: 30px;
+}
+
+.ap-theme-ios .ap-button
+{
+	display: inline-block;
+	cursor: pointer;
+
+	letter-spacing: 0;
+  	text-align: center;
+  	font-size: 30px;
+
+  	height: 43px;
+  	background: rgba(255, 255, 255, 1);
+}
+
+.ap-theme-ios .ap-content-top,
+.ap-theme-ios .ap-content-bottom
+{
+	font-size: 0.9em;
+}
+
+.ap-theme-ios .ap-footer
+{
+	padding: 0 16px;
+}
+
+.ap-theme-ios .ap-footer-top .ap-button
+{
+	display: inline-block;
+}
+
+.ap-theme-ios .ap-button:last-child
+{
+	float: right;
+	padding: 0 0 0 16px;
+
+	color: #4a90e2;
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-button:last-child
+{
+	float: left;
+	padding: 0 16px 0 0;
+}
+
+.ap-theme-ios .ap-button:not(:last-child)
+{
+	float: left;
+	padding: 0 16px 0 0;
+
+	color: #4a90e2;
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-button:not(:last-child)
+{
+	float: right;
+	padding: 0 0 0 16px;
+}
+
+.ap-theme-ios .ap-component-gradient
+{
+	/*
+	http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2040\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%2060\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.7\%29\%20100\%25\%29\%3B'
+	*/
+
+	background: rgba(255,255,255,0.7);
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
+	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.7)), color-stop(40%, rgba(255,255,255,0.7)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(60%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0.7)));
+	background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
+	background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
+	background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
+	background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
+}
+
+.ap-theme-ios .ap-content-middle
+{
+	padding: 10px 0;
+}
+
+.ap-theme-ios .ap-content-switch-tab
+{
+	border: 1px solid #007AFF;
+	font-size: 0.7em;
+	color: #007AFF;
+}
+
+.ap-dir-ltr.ap-theme-ios .ap-content-switch-date
+{
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-content-switch-date
+{
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	margin-left: -1px;
+}
+
+.ap-dir-ltr.ap-theme-ios .ap-content-switch-time
+{
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	margin-left: -1px;
+}
+
+.ap-dir-rtl.ap-theme-ios .ap-content-switch-time
+{
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+.ap-theme-ios .ap-content-switch-selected
+{
+	background: #007AFF;
+	color: #FFFFFF;
+}
+
+.ap-theme-ios .ap-component-plus,
+.ap-theme-ios .ap-component-minus
+{
+	color: #BDBDBD;
+}
+
+.ap-theme-ios .ap-component-label
+{
+	color: #007AFF;
+}
+
+.ap-theme-ios .ap-row
+{
+	color: #000000;
+	font-size: 40px;
+    height: 60px;
+    line-height: 60px;
+}
+
+.ap-theme-ios .ap-row-disabled
+{
+	color: #9E9E9E;
+}
+
+.ap-theme-ios .ap-component-selector
+{
+	left: 0;
+	width: 100%;
+	border-top: 1px solid #e0e0e0;
+	border-bottom: 1px solid #e0e0e0;
+}

+/* -----------------------------------------------------------------------------
+
+  AnyPicker - Customizable Picker for Mobile OS
+  Version 2.0.5
+  Copyright (c)2016 Curious Solutions LLP
+  https://curioussolutions.in/libraries/anypicker/content/license.htm
+  See License Information in LICENSE file.
+
+ ----------------------------------------------------------------------------- */
+
+/* ------------------------- Basic Layout Start ---------------------------------- */
+
+body.noscroll
+{
+    overflow: hidden;
+}
+
+.ap-overlay
+{
+	display: none;
+	z-index: 2000;
+	min-width: 250px;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+
+    -webkit-perspective: 1000px;
+    -moz-perspective: 1000px;
+	perspective: 1000px;
+}
+
+.ap-layout-popup
+{
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+
+	background: rgba(0, 0, 0, 0.5);
+}
+
+.ap-layout-fixed,
+.ap-layout-popover
+{
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+
+	background: rgba(0, 0, 0, 0.5);
+}
+/*
+.ap-layout-relative, .ap-layout-inline
+{
+	height: auto;
+}
+*/
+
+.ap-layout-relative, .ap-layout-inline
+{
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+	height: 100%;
+}
+
+.ap-overlay *
+{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.ap-bg
+{
+	width: 100%;
+	height: 100%;
+
+	font-size: 22px;
+}
+
+.ap-cont
+{
+	background: #FFFFFF;
+}
+
+.ap-theme-default:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
+{
+	-webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+  	-moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+  	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+.ap-layout-popup .ap-cont
+{
+	position: fixed;
+	bottom: 0px;
+    width: 100%;
+}
+
+.ap-layout-relative .ap-cont
+{
+	max-width: 500px;
+	width: 97%;
+	border: 1px solid #ECF0F1;
+}
+
+.ap-layout-inline .ap-cont
+{
+	border: 1px solid #ECF0F1;
+}
+
+.ap-layout-fixed .ap-cont
+{
+	width: 100%;
+	position: fixed;
+}
+
+/* ------------------------- Basic Layout End ---------------------------------- */
+
+/* ------------------------- View Sections Start ---------------------------------- */
+
+.ap-header
+{
+	height: 50px;
+	line-height: 50px;
+
+	text-align: left;
+	font-size: 0.9em;
+
+	padding: 0 16px;
+}
+
+.ap-dir-rtl .ap-header
+{
+	text-align: right;
+}
+
+.ap-theme-default .ap-header
+{
+	height: 60px;
+	line-height: 60px;
+}
+
+.ap-content
+{
+	max-width: 480px;
+	margin: 0 auto;
+    font-size: 40px;
+}
+
+.ap-content-top
+{
+	height: 50px;
+	padding: 8px 16px;
+	color:#555;
+	text-align:center;
+}
+
+.ap-content-switch
+{
+	margin-top: 8px;
+  	margin-bottom: 8px;
+
+  	text-align: center;
+}
+
+.ap-content-switch-tab
+{
+	border: 1px solid #009688;
+	padding: 5px 16px;
+
+	cursor: pointer;
+	font-size: 0.6em;
+	color: #009688;
+}
+
+.ap-dir-ltr .ap-content-switch-date
+{
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+}
+
+.ap-dir-rtl .ap-content-switch-date
+{
+	border-top-right-radius: 2px;
+	border-bottom-right-radius: 2px;
+	margin-left: -1px;
+}
+
+.ap-dir-ltr .ap-content-switch-time
+{
+	border-top-right-radius: 2px;
+	border-bottom-right-radius: 2px;
+	margin-left: -1px;
+}
+
+.ap-dir-rtl .ap-content-switch-time
+{
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+}
+
+.ap-content-switch-selected
+{
+	background: #009688;
+	color: #FFFFFF;
+}
+
+.ap-content-middle
+{
+	min-height: 120px;
+
+	padding-top: 20px;
+  	padding-bottom: 20px;
+}
+
+.ap-content-bottom
+{
+	height: 50px;
+	padding: 8px 16px;
+	color:#555;
+	text-align:center;
+}
+
+.ap-theme-default .ap-content-top,
+.ap-theme-default .ap-content-bottom
+{
+	font-size: 0.7em;
+}
+
+.ap-footer
+{
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+
+	height: 50px;
+}
+
+.ap-theme-default .ap-footer
+{
+	padding: 0 16px;
+}
+
+.ap-theme-default .ap-footer-top
+{
+	line-height: 55px;
+}
+
+.ap-theme-default .ap-footer-bottom
+{
+	line-height: 45px;
+}
+
+ .ap-header__title
+{
+	color: #000000;
+	font-size: 1.2em;
+}
+
+	/* ------------------------- Buttons Start ---------------------------------- */
+
+.ap-theme-default .ap-button
+{
+	cursor: pointer;
+
+	letter-spacing: 0;
+  	text-align: center;
+  	font-size: 0.8em;
+
+  	padding: 8px 12px;
+  	margin: 8px;
+
+  	color: #009688;
+  	background: rgba(255, 255, 255, 1);
+
+  	text-transform: uppercase;
+}
+
+.ap-theme-default .ap-button-cont
+{
+	float: right;
+}
+
+.ap-theme-default.ap-dir-rtl .ap-button-cont
+{
+	float: left;
+}
+
+	/* ------------------------- Buttons End ---------------------------------- */
+
+/* ------------------------- View Sections End ---------------------------------- */
+
+
+/* ------------------------- Animations Start ---------------------------------- */
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-show
+{
+	opacity: 0;
+
+	animation: ap-anim-show ease 0.5s;
+	animation-iteration-count: 1;
+
+	-webkit-animation: ap-anim-show ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-show ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-show ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-show ease 0.5s;
+	-ms-animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+}
+
+@keyframes ap-anim-show
+{
+	0% { opacity:0; }
+	100% { opacity:1; }
+}
+
+@-moz-keyframes ap-anim-show
+{
+  	0% { opacity:0; }
+	100% { opacity:1; }
+}
+
+@-webkit-keyframes ap-anim-show
+{
+  	0% { opacity:0; }
+	100% { opacity:1; }
+}
+
+@-o-keyframes ap-anim-show
+{
+  	0% { opacity:0; }
+	100% { opacity:1; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-hide
+{
+	animation: ap-anim-hide ease 0.5s;
+	animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+
+	-webkit-animation: ap-anim-hide ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-hide ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-hide ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-hide ease 0.5s;
+	-ms-animation-iteration-count: 1;
+}
+
+@keyframes ap-anim-hide
+{
+	0% { opacity:1; }
+	100% { opacity:0; }
+}
+
+@-moz-keyframes ap-anim-hide
+{
+  	0% { opacity:1; }
+	100% { opacity:0; }
+}
+
+@-webkit-keyframes ap-anim-hide
+{
+  	0% { opacity:1; }
+	100% { opacity:0; }
+}
+
+@-o-keyframes ap-anim-hide
+{
+  	0% { opacity:1; }
+	100% { opacity:0; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-bottom-slide-up
+{
+	opacity: 0;
+
+	animation: ap-anim-bottom-slide-up ease 0.5s;
+	animation-iteration-count: 1;
+
+	-webkit-animation: ap-anim-bottom-slide-up ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-bottom-slide-up ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-bottom-slide-up ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-bottom-slide-up ease 0.5s;
+	-ms-animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+}
+
+@keyframes ap-anim-bottom-slide-up
+{
+	100% { opacity: 1; bottom: 0; }
+}
+
+@-moz-keyframes ap-anim-bottom-slide-up
+{
+  	100% { opacity: 1; bottom: 0; }
+}
+
+@-webkit-keyframes ap-anim-bottom-slide-up
+{
+  	100% { opacity: 1; bottom: 0; }
+}
+
+@-o-keyframes ap-anim-bottom-slide-up
+{
+  	100% { opacity: 1; bottom: 0; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-bottom-slide-down
+{
+	opacity: 1;
+
+	animation: ap-anim-bottom-slide-down ease 0.5s;
+	animation-iteration-count: 1;
+
+	-webkit-animation: ap-anim-bottom-slide-down ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-bottom-slide-down ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-bottom-slide-down ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-bottom-slide-down ease 0.5s;
+	-ms-animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+}
+
+@keyframes ap-anim-bottom-slide-down
+{
+	100% { opacity: 0; bottom: -1000px; }
+}
+
+@-moz-keyframes ap-anim-bottom-slide-down
+{
+  	100% { opacity: 0; bottom: -1000px; }
+}
+
+@-webkit-keyframes ap-anim-bottom-slide-down
+{
+  	100% { opacity: 0; bottom: -1000px; }
+}
+
+@-o-keyframes ap-anim-bottom-slide-down
+{
+  	100% { opacity: 0; bottom: -1000px; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-top-slide-down
+{
+	opacity: 0;
+
+	animation: ap-anim-top-slide-down ease 0.5s;
+	animation-iteration-count: 1;
+
+	-webkit-animation: ap-anim-top-slide-down ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-top-slide-down ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-top-slide-down ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-top-slide-down ease 0.5s;
+	-ms-animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+}
+
+@keyframes ap-anim-top-slide-down
+{
+	100% { opacity: 1; top: 0; }
+}
+
+@-moz-keyframes ap-anim-top-slide-down
+{
+  	100% { opacity: 1; top: 0; }
+}
+
+@-webkit-keyframes ap-anim-top-slide-down
+{
+  	100% { opacity: 1; top: 0; }
+}
+
+@-o-keyframes ap-anim-top-slide-down
+{
+  	100% { opacity: 1; top: 0; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-top-slide-up
+{
+	opacity: 1;
+
+	animation: ap-anim-top-slide-up ease 0.5s;
+	animation-iteration-count: 1;
+
+	-webkit-animation: ap-anim-top-slide-up ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+
+	-moz-animation: ap-anim-top-slide-up ease 0.5s;
+	-moz-animation-iteration-count: 1;
+
+	-o-animation: ap-anim-top-slide-up ease 0.5s;
+	-o-animation-iteration-count: 1;
+
+	-ms-animation: ap-anim-top-slide-up ease 0.5s;
+	-ms-animation-iteration-count: 1;
+
+	-moz-animation-fill-mode: forwards;
+	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
+    animation-fill-mode: forwards;
+}
+
+@keyframes ap-anim-top-slide-up
+{
+	100% { opacity: 0; top: -1000px; }
+}
+
+@-moz-keyframes ap-anim-top-slide-up
+{
+  	100% { opacity: 0; top: -1000px; }
+}
+
+@-webkit-keyframes ap-anim-top-slide-up
+{
+  	100% { opacity: 0; top: -1000px; }
+}
+
+@-o-keyframes ap-anim-top-slide-up
+{
+  	100% { opacity: 0; top: -1000px; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+.ap-theme-default .ap-button-active
+{
+	animation: ap-anim-default-button-active ease 0.5s;
+	animation-iteration-count: 1;
+	animation-fill-mode:forwards;
+
+	-webkit-animation: ap-anim-default-button-active ease 0.5s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-fill-mode:forwards;
+
+	-moz-animation: ap-anim-default-button-active ease 0.5s;
+	-moz-animation-iteration-count: 1;
+	-moz-animation-fill-mode:forwards;
+
+	-o-animation: ap-anim-default-button-active ease 0.5s;
+	-o-animation-iteration-count: 1;
+	-o-animation-fill-mode:forwards;
+
+	-ms-animation: ap-anim-default-button-active ease 0.5s;
+	-ms-animation-iteration-count: 1;
+	-ms-animation-fill-mode:forwards;
+}
+
+@keyframes ap-anim-default-button-active
+{
+	100% { background: #E0F2F1; }
+}
+
+@-moz-keyframes ap-anim-default-button-active
+{
+  	100% { background: #E0F2F1; }
+}
+
+@-webkit-keyframes ap-anim-default-button-active
+{
+  	100% { background: #E0F2F1; }
+}
+
+@-o-keyframes ap-anim-default-button-active
+{
+  	100% { background: #E0F2F1; }
+}
+
+/* ------------------------------------------------------------------------------ */
+
+
+
+/* ------------------------- Animations End ---------------------------------- */
+
+
+
+
+/* ------------------------- Picker Component Start ---------------------------------- */
+
+.ap-component-section
+{
+  	display: table;
+  	table-layout: fixed;
+  	width: 100%;
+
+  	background: #FFFFFF;
+}
+
+.ap-loading
+{
+	width: 100%;
+	height: 100%;
+
+	z-index: 2;
+	background: #FFFFFF;
+}
+
+.ap-component-section, ap-component-section *
+{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-webkit-touch-callout: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-ms-touch-select: none;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+
+.ap-component
+{
+	display: table-cell;
+}
+
+.ap-component-label
+{
+	text-align: center;
+	font-size: 0.7em;
+}
+
+.ap-theme-default
+{
+	color: #009688;
+}
+
+.ap-component-plus, .ap-component-minus
+{
+	background: #FFFFFF;
+	color: #BDBDBD;
+
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+
+	text-align: center;
+	font-size: 15px;
+
+	cursor: pointer;
+}
+
+.ap-component-cont
+{
+	position: relative;
+	/*height: 200px;*/
+	overflow: hidden;
+}
+
+.ap-component-data
+{
+	position: absolute;
+	left: 0;
+  	top: 0;
+	width: 100%;
+
+	-webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+
+	-webkit-transform: translate3d(0, 0, 0);
+	-moz-transform: translate3d(0, 0, 0);
+	-o-transform: translate3d(0, 0, 0);
+	-ms-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+
+    -webkit-perspective: 1000px;
+    -moz-perspective: 1000px;
+	perspective: 1000px;
+}
+
+.ap-row
+{
+	height: 40px;
+	line-height: 40px;
+
+	text-align: center;
+
+	overflow: hidden;
+	text-overflow: clip;
+	white-space:nowrap;
+
+	cursor: pointer;
+
+	color: #000000;
+}
+
+.ap-row-invalid
+{
+	color: #FFCDD2;
+}
+
+.ap-row-hidden
+{
+	opacity: 0;
+}
+
+.ap-component-selector
+{
+	position: absolute;
+	left: 0;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-moz-transform: translateY(-50%);
+	-o-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+
+	width: 100%;
+	height: 40px;
+
+	border-top: 1px solid #009688;
+	border-bottom: 1px solid #009688;
+}
+
+.ap-theme-default .ap-component-selector
+{
+	left: 10%;
+	width: 80%;
+}
+
+.ap-component-gradient
+{
+	position: absolute;
+	top: -1px;
+	left: 0;
+
+	width: 100%;
+	height: 102%;
+
+	cursor: pointer;
+
+	/*
+	http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%200\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2030\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2045\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\%29\%2055\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%2070\%25\%2C\%20rgba\%28255\%2C255\%2C255\%2C0\.8\%29\%20100\%25\%29\%3B'
+	*/
+
+	background: rgba(255,255,255,0.8);
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
+	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.8)), color-stop(30%, rgba(255,255,255,0.8)), color-stop(45%, rgba(255,255,255,0)), color-stop(55%, rgba(255,255,255,0)), color-stop(70%, rgba(255,255,255,0.8)), color-stop(100%, rgba(255,255,255,0.8)));
+	background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
+	background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
+	background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
+	background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
+}
+
+/* ------------------------- Picker Component End ---------------------------------- */
+

@@ -11,3 +11,6 @@
 @import "form";
 @import "modal";
 @import "loading";
+@import "select";
+@import "anypicker";
+@import "anypicker-ios";

+.select {
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    background: #fff;
+    z-index: 1001;
+
+    ul {
+        font-size: 34px;
+        text-align: center;
+
+        li {
+            height: 100px;
+            line-height: 100px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .item-del {
+            margin-top: 10px;
+            border-top: 1px solid #e0e0e0;
+            color: #5c99e4
+        }
+    }
+}

@@ -13,16 +13,16 @@
 
         li {
             &:first-of-type {
-                height: 100px;
-                line-height: 100px;
+                height: 130px;
+                line-height: 130px;
             }
 
-            height: 80px;
+            height: 90px;
             border-bottom: 1px solid #e0e0e0;
 
             .details-icon {
                 float: right;
-                height: 90px;
+                height: 100%;
                 margin-right: 15px;
 
                 .icon {
@@ -40,8 +40,8 @@
             }
 
             .head-portrait {
-                width: 90px;
-                height: 90px;
+                width: 92px;
+                height: 92px;
                 overflow: hidden;
                 border-radius: 50%;
                 border: 1px solid #eee;
@@ -51,8 +51,8 @@
             > label {
                 width: 100%;
                 height: 100%;
-                line-height: 80px;
-                font-size: 32px;
+                line-height: 90px;
+                font-size: 34px;
                 margin-right: 8%;
                 text-overflow: ellipsis;
                 white-space: nowrap;

 <template>
      <ul>
         <li>
-            <label>头像
+            <label @click="selicon">头像
                 <span class="details-icon">
-                    <span class="head-portrait user-avatar" data-avatar="{{head_ico}}"></span>
+                    <span class="head-portrait user-avatar" :style='icoStyle'></span>
                     <span class="icon icon-right"></span>
                 </span>
             </label>
@@ -12,20 +12,55 @@
             <label>昵称<input class="details-nickname" v-model='nickname'></label>
         </li>
         <li>
-            <label>性别<span class="details-gender">{{ gender }}</span></label>
+            <label @click="selgender">性别<span class="details-gender">{{ gender }}</span></label>
         </li>
         <li>
-            <label>生日<span class="details-birthday">{{ birthday }}</span></label>
+            <label>生日<input id="birthday" class="details-birthday" type="text" v-model='birthday' readonly></input>
         </li>
     </ul>
 </template>
 
 <script>
+    const $ = require('yoho-jquery');
+    const dtpicker = require('common/anypicker');
+    const Select = require('common/select');
+    const iconSel = Select(['拍照','从相册选择']);
+    const genderSel = Select(['MEN', 'WOMEN']);
+
     module.exports = {
         props: ['head_ico', 'nickname', 'gender', 'birthday'],
         data() {
             return {
+                icoStyle: this.head_ico ? 'background-image:url(' + this.head_ico + ');' : ''
             };
+        },
+        methods: {
+            selicon: function(){
+                iconSel.show(function(item) {
+                    if (item === '拍照') {
+                        console.log('拍照');
+                    }
+
+                    if (item === '从相册选择') {
+                        console.log('从相册选择');
+                    }
+                });
+            },
+            selgender: function(){
+                let _this = this;
+
+                genderSel.show(function(item) {
+                    _this.gender = item.toLowerCase();
+                })
+            }
+        },
+        ready: function(){
+            $("#birthday").AnyPicker({
+                mode: "datetime",
+                dateTimeFormat: "yyyy. MM. dd",
+                theme: "iOS"
+            });
         }
+
     };
 </script>