fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit f8fff02bde108b464e91d720c7d4180e500bc7ae 1 parent 38344f72

个人信息设置页

Inline Side-by-side
Showing 15 changed files with 1287 additions and 20 deletions
@@ -30,8 +30,8 @@ const component = { @@ -30,8 +30,8 @@ const component = {
30 module: 'home', 30 module: 'home',
31 page: 'index', 31 page: 'index',
32 head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 200, 200) : '', 32 head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 200, 200) : '',
33 - profile_name: uid && proData ? proData.profile_name : '登录/注册',  
34 - userinfourl: uid ? '/home/mydetails' : helpers.urlFormat('/signin.html', { 33 + profile_name: proData ? proData.profile_name : '登录/注册',
  34 + userinfourl: proData ? '/home/mydetails' : helpers.urlFormat('/signin.html', {
35 refer: req.originalUrl 35 refer: req.originalUrl
36 }), 36 }),
37 }; 37 };
@@ -40,10 +40,20 @@ const component = { @@ -40,10 +40,20 @@ const component = {
40 }).catch(next); 40 }).catch(next);
41 }, 41 },
42 mydetails: (req, res) => { 42 mydetails: (req, res) => {
  43 + let uid = req.user.uid;
  44 +
  45 + uid = 14459668; // 测试uid
  46 +
  47 + homeModel.getUserProfileData(uid).then(data => {
43 res.render('mydetails', { 48 res.render('mydetails', {
44 module: 'home', 49 module: 'home',
45 - page: 'mydetails' 50 + page: 'mydetails',
  51 + head_ico: data && data.head_ico ? helpers.image(data.head_ico, 92, 92) : '',
  52 + nickname: '',
  53 + gender: data.gender === '1' ? 'men' : 'women',
  54 + birthday: data.birthday
46 }); 55 });
  56 + })
47 }, 57 },
48 help: (req, res, next) => { 58 help: (req, res, next) => {
49 homeModel.getHelpInfo().then(helpList => { 59 homeModel.getHelpInfo().then(helpList => {
@@ -11,7 +11,7 @@ const helpers = global.yoho.helpers; @@ -11,7 +11,7 @@ const helpers = global.yoho.helpers;
11 * @param int uid 用户ID 11 * @param int uid 用户ID
12 * @return Object 个人详情数据 12 * @return Object 个人详情数据
13 */ 13 */
14 -const _getUserProfileData = (uid) => { 14 +const _getUserProfileData = exports.getUserProfileData = (uid) => {
15 return api.get('', { 15 return api.get('', {
16 uid: uid, 16 uid: uid,
17 method: 'app.passport.profile' 17 method: 'app.passport.profile'
1 <div class="yoho-favorite-brand-page"> 1 <div class="yoho-favorite-brand-page">
2 <div class="fav-content" id="fav-content"> 2 <div class="fav-content" id="fav-content">
3 - <fav-brand-list brand-url={{brandUrl}}></fav-brand-list> 3 + <fav-brand-list brand-url='{{brandUrl}}'></fav-brand-list>
4 </div> 4 </div>
5 </div> 5 </div>
1 <div class="yoho-favorite-page"> 1 <div class="yoho-favorite-page">
2 <div class="fav-content" id="fav-content"> 2 <div class="fav-content" id="fav-content">
3 - <fav-product-list product-url={{productUrl}}></fav-product-list> 3 + <fav-product-list product-url='{{productUrl}}'></fav-product-list>
4 </div> 4 </div>
5 </div> 5 </div>
1 <div class="logistics-page" id="logistics"> 1 <div class="logistics-page" id="logistics">
2 - <components :is="currentView" :company_id="company_id" :company_name="company_name" company_list={{company_list}} keep-alive></components> 2 + <components :is="currentView" :company_id="company_id" :company_name="company_name" company_list='{{company_list}}' keep-alive></components>
3 </div> 3 </div>
1 <div class="personal-details" id="details"> 1 <div class="personal-details" id="details">
2 - <mydetails gender="women" birthday="1990.07.17"></mydetails> 2 + <mydetails head_ico='{{head_ico}}' nickname='{{nickname}}' gender='{{gender}}' birthday='{{birthday}}'></mydetails>
3 </div> 3 </div>
  1 +<div class="select">
  2 + <ul>
  3 + {{#each items}}
  4 + <li class="item-li">{{this}}</li>
  5 + {{/each}}
  6 + <li class="item-del">
  7 + <span>取消</span>
  8 + </li>
  9 + </ul>
  10 +</div>
This diff could not be displayed because it is too large.
  1 +/**
  2 + * 选择框组件
  3 + *
  4 + * @author: shenzm<zhimin.shen@yoho.cn>
  5 + * @date: 2016/07/26
  6 + */
  7 +
  8 +'use strict';
  9 +
  10 +const $ = require('yoho-jquery');
  11 +const template = require('components/select.hbs');
  12 +const Overlay = require('./overlay');
  13 +
  14 +function Select(items) {
  15 + if (!$.isArray(items) || items.length === 0) {
  16 + return;
  17 + }
  18 +
  19 + // 初始化参数
  20 + const tpl = template({
  21 + items: items
  22 + });
  23 +
  24 + // 生成模版
  25 + const elem = $(tpl);
  26 + const del = elem.find('.item-del');
  27 + $(del).click(function() {
  28 + overlay.hide();
  29 + elem.hide();
  30 + });
  31 +
  32 + // 覆盖层
  33 + const overlay = new Overlay({
  34 + onClose: function() {
  35 + elem.hide();
  36 + }
  37 + });
  38 +
  39 + return {
  40 + show: function(cb) {
  41 + if (elem.parent().length === 0) {
  42 + const lis = elem.find('.item-li');
  43 + lis.each(function(index) {
  44 + $(this).click(function(e) {
  45 + cb(e.target.innerHTML);
  46 + overlay.hide();
  47 + elem.hide();
  48 + });
  49 + });
  50 + elem.appendTo('body').addClass('animation-target');
  51 + }
  52 +
  53 + overlay.show();
  54 + elem.show();
  55 + },
  56 + hide: function() {
  57 + overlay.hide();
  58 + elem.hide();
  59 + }
  60 + }
  61 +}
  62 +
  63 +module.exports = Select;
  1 +/* -----------------------------------------------------------------------------
  2 +
  3 + AnyPicker - Customizable Picker for Mobile OS
  4 + Version 2.0.5
  5 + Copyright (c)2016 Curious Solutions LLP
  6 + https://curioussolutions.in/libraries/anypicker/content/license.htm
  7 + See License Information in LICENSE file.
  8 +
  9 + ----------------------------------------------------------------------------- */
  10 +
  11 +.ap-theme-ios.ap-layout-popup .ap-cont,
  12 +.ap-theme-ios.ap-layout-popover .ap-cont
  13 +{
  14 + border: 1px solid #e0e0e0;
  15 +}
  16 +
  17 +.ap-theme-ios.ap-layout-popup,
  18 +.ap-theme-ios.ap-layout-fixed,
  19 +.ap-theme-ios.ap-layout-popover
  20 +{
  21 + background: rgba(0, 0, 0, 0.4);
  22 +}
  23 +
  24 +.ap-theme-ios .ap-tooltip,
  25 +.ap-theme-ios .ap-tooltip:after
  26 +{
  27 + display: inline-block;
  28 + width: 0;
  29 + height: 0;
  30 +
  31 + position: absolute;
  32 +
  33 + border-width: 11px;
  34 + border-style: solid;
  35 + z-index: 6;
  36 +}
  37 +
  38 +.ap-theme-ios .ap-tooltip:after
  39 +{
  40 + content: " ";
  41 + border-width: 10px;
  42 +}
  43 +
  44 +.ap-theme-ios .ap-tooltip-bottom
  45 +{
  46 + top: -22px;
  47 + left: 10px;
  48 + border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #D7D7D7 rgba(0, 0, 0, 0);
  49 +}
  50 +
  51 +.ap-dir-rtl.ap-theme-ios .ap-tooltip-bottom
  52 +{
  53 + right: 10px;
  54 +}
  55 +
  56 +.ap-theme-ios .ap-tooltip-bottom:after
  57 +{
  58 + top: -8px;
  59 + left: -10px;
  60 + border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0);
  61 +}
  62 +
  63 +.ap-theme-ios .ap-tooltip-top
  64 +{
  65 + bottom: -21px;
  66 + left: 16px;
  67 + border-color: #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  68 +}
  69 +
  70 +.ap-dir-rtl.ap-theme-ios .ap-tooltip-top
  71 +{
  72 + right: 16px;
  73 +}
  74 +
  75 +.ap-theme-ios .ap-tooltip-top:after
  76 +{
  77 + bottom: -8px;
  78 + left: -10px;
  79 + border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  80 +}
  81 +
  82 +.ap-theme-ios .ap-tooltip-left
  83 +{
  84 + top: 50%;
  85 + left: -22px;
  86 + border-color: rgba(0, 0, 0, 0) #e0e0e0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  87 +
  88 + -webkit-transform: translateY(-50%);
  89 + -moz-transform: translateY(-50%);
  90 + -o-transform: translateY(-50%);
  91 + -ms-transform: translateY(-50%);
  92 + transform: translateY(-50%);
  93 +}
  94 +
  95 +.ap-theme-ios .ap-tooltip-left:after
  96 +{
  97 + top: -10px;
  98 + left: -9px;
  99 + border-color: rgba(0, 0, 0, 0) #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  100 +}
  101 +
  102 +.ap-theme-ios .ap-tooltip-right
  103 +{
  104 + top: 50%;
  105 + right: -22px;
  106 + border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e0e0e0;
  107 +
  108 + -webkit-transform: translateY(-50%);
  109 + -moz-transform: translateY(-50%);
  110 + -o-transform: translateY(-50%);
  111 + -ms-transform: translateY(-50%);
  112 + transform: translateY(-50%);
  113 +}
  114 +
  115 +.ap-theme-ios .ap-tooltip-right:after
  116 +{
  117 + top: -10px;
  118 + left: -11px;
  119 + border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;
  120 +}
  121 +
  122 +.ap-theme-ios .ap-bg
  123 +{
  124 + font-size: 18px;
  125 +}
  126 +
  127 +.ap-theme-ios .ap-header
  128 +{
  129 + height: 85px;
  130 + line-height: 85px;
  131 + text-align: center;
  132 + border-bottom: 1px solid #e0e0e0;
  133 +}
  134 +
  135 +.ap-theme-ios .ap-header__title
  136 +{
  137 + font-size: 30px;
  138 +}
  139 +
  140 +.ap-theme-ios .ap-button
  141 +{
  142 + display: inline-block;
  143 + cursor: pointer;
  144 +
  145 + letter-spacing: 0;
  146 + text-align: center;
  147 + font-size: 30px;
  148 +
  149 + height: 43px;
  150 + background: rgba(255, 255, 255, 1);
  151 +}
  152 +
  153 +.ap-theme-ios .ap-content-top,
  154 +.ap-theme-ios .ap-content-bottom
  155 +{
  156 + font-size: 0.9em;
  157 +}
  158 +
  159 +.ap-theme-ios .ap-footer
  160 +{
  161 + padding: 0 16px;
  162 +}
  163 +
  164 +.ap-theme-ios .ap-footer-top .ap-button
  165 +{
  166 + display: inline-block;
  167 +}
  168 +
  169 +.ap-theme-ios .ap-button:last-child
  170 +{
  171 + float: right;
  172 + padding: 0 0 0 16px;
  173 +
  174 + color: #4a90e2;
  175 +}
  176 +
  177 +.ap-dir-rtl.ap-theme-ios .ap-button:last-child
  178 +{
  179 + float: left;
  180 + padding: 0 16px 0 0;
  181 +}
  182 +
  183 +.ap-theme-ios .ap-button:not(:last-child)
  184 +{
  185 + float: left;
  186 + padding: 0 16px 0 0;
  187 +
  188 + color: #4a90e2;
  189 +}
  190 +
  191 +.ap-dir-rtl.ap-theme-ios .ap-button:not(:last-child)
  192 +{
  193 + float: right;
  194 + padding: 0 0 0 16px;
  195 +}
  196 +
  197 +.ap-theme-ios .ap-component-gradient
  198 +{
  199 + /*
  200 + 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'
  201 + */
  202 +
  203 + background: rgba(255,255,255,0.7);
  204 + 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%);
  205 + 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)));
  206 + 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%);
  207 + 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%);
  208 + 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%);
  209 + 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%);
  210 + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
  211 +}
  212 +
  213 +.ap-theme-ios .ap-content-middle
  214 +{
  215 + padding: 10px 0;
  216 +}
  217 +
  218 +.ap-theme-ios .ap-content-switch-tab
  219 +{
  220 + border: 1px solid #007AFF;
  221 + font-size: 0.7em;
  222 + color: #007AFF;
  223 +}
  224 +
  225 +.ap-dir-ltr.ap-theme-ios .ap-content-switch-date
  226 +{
  227 + border-top-left-radius: 5px;
  228 + border-bottom-left-radius: 5px;
  229 +}
  230 +
  231 +.ap-dir-rtl.ap-theme-ios .ap-content-switch-date
  232 +{
  233 + border-top-right-radius: 5px;
  234 + border-bottom-right-radius: 5px;
  235 + margin-left: -1px;
  236 +}
  237 +
  238 +.ap-dir-ltr.ap-theme-ios .ap-content-switch-time
  239 +{
  240 + border-top-right-radius: 5px;
  241 + border-bottom-right-radius: 5px;
  242 + margin-left: -1px;
  243 +}
  244 +
  245 +.ap-dir-rtl.ap-theme-ios .ap-content-switch-time
  246 +{
  247 + border-top-left-radius: 5px;
  248 + border-bottom-left-radius: 5px;
  249 +}
  250 +
  251 +.ap-theme-ios .ap-content-switch-selected
  252 +{
  253 + background: #007AFF;
  254 + color: #FFFFFF;
  255 +}
  256 +
  257 +.ap-theme-ios .ap-component-plus,
  258 +.ap-theme-ios .ap-component-minus
  259 +{
  260 + color: #BDBDBD;
  261 +}
  262 +
  263 +.ap-theme-ios .ap-component-label
  264 +{
  265 + color: #007AFF;
  266 +}
  267 +
  268 +.ap-theme-ios .ap-row
  269 +{
  270 + color: #000000;
  271 + font-size: 40px;
  272 + height: 60px;
  273 + line-height: 60px;
  274 +}
  275 +
  276 +.ap-theme-ios .ap-row-disabled
  277 +{
  278 + color: #9E9E9E;
  279 +}
  280 +
  281 +.ap-theme-ios .ap-component-selector
  282 +{
  283 + left: 0;
  284 + width: 100%;
  285 + border-top: 1px solid #e0e0e0;
  286 + border-bottom: 1px solid #e0e0e0;
  287 +}
  1 +/* -----------------------------------------------------------------------------
  2 +
  3 + AnyPicker - Customizable Picker for Mobile OS
  4 + Version 2.0.5
  5 + Copyright (c)2016 Curious Solutions LLP
  6 + https://curioussolutions.in/libraries/anypicker/content/license.htm
  7 + See License Information in LICENSE file.
  8 +
  9 + ----------------------------------------------------------------------------- */
  10 +
  11 +/* ------------------------- Basic Layout Start ---------------------------------- */
  12 +
  13 +body.noscroll
  14 +{
  15 + overflow: hidden;
  16 +}
  17 +
  18 +.ap-overlay
  19 +{
  20 + display: none;
  21 + z-index: 2000;
  22 + min-width: 250px;
  23 +
  24 + -webkit-touch-callout: none;
  25 + -webkit-user-select: none;
  26 + -khtml-user-select: none;
  27 + -moz-user-select: none;
  28 + -ms-user-select: none;
  29 + user-select: none;
  30 +
  31 + -webkit-backface-visibility: hidden;
  32 + -moz-backface-visibility: hidden;
  33 + backface-visibility: hidden;
  34 +
  35 + -webkit-transform-style: preserve-3d;
  36 + -moz-transform-style: preserve-3d;
  37 + transform-style: preserve-3d;
  38 +
  39 + -webkit-perspective: 1000px;
  40 + -moz-perspective: 1000px;
  41 + perspective: 1000px;
  42 +}
  43 +
  44 +.ap-layout-popup
  45 +{
  46 + position: fixed;
  47 + top: 0;
  48 + left: 0;
  49 +
  50 + width: 100%;
  51 + height: 100%;
  52 +
  53 + background: rgba(0, 0, 0, 0.5);
  54 +}
  55 +
  56 +.ap-layout-fixed,
  57 +.ap-layout-popover
  58 +{
  59 + position: fixed;
  60 + top: 0;
  61 + left: 0;
  62 +
  63 + width: 100%;
  64 + height: 100%;
  65 +
  66 + background: rgba(0, 0, 0, 0.5);
  67 +}
  68 +/*
  69 +.ap-layout-relative, .ap-layout-inline
  70 +{
  71 + height: auto;
  72 +}
  73 +*/
  74 +
  75 +.ap-layout-relative, .ap-layout-inline
  76 +{
  77 + position: fixed;
  78 + top: 0;
  79 + left: 0;
  80 +
  81 + width: 100%;
  82 + height: 100%;
  83 +}
  84 +
  85 +.ap-overlay *
  86 +{
  87 + -webkit-box-sizing: border-box;
  88 + -moz-box-sizing: border-box;
  89 + -ms-box-sizing: border-box;
  90 + box-sizing: border-box;
  91 +
  92 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  93 +}
  94 +
  95 +.ap-bg
  96 +{
  97 + width: 100%;
  98 + height: 100%;
  99 +
  100 + font-size: 22px;
  101 +}
  102 +
  103 +.ap-cont
  104 +{
  105 + background: #FFFFFF;
  106 +}
  107 +
  108 +.ap-theme-default:not(.ap-layout-inline):not(.ap-layout-relative) .ap-cont
  109 +{
  110 + -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  111 + -moz-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  112 + box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  113 +}
  114 +
  115 +.ap-layout-popup .ap-cont
  116 +{
  117 + position: fixed;
  118 + bottom: 0px;
  119 + width: 100%;
  120 +}
  121 +
  122 +.ap-layout-relative .ap-cont
  123 +{
  124 + max-width: 500px;
  125 + width: 97%;
  126 + border: 1px solid #ECF0F1;
  127 +}
  128 +
  129 +.ap-layout-inline .ap-cont
  130 +{
  131 + border: 1px solid #ECF0F1;
  132 +}
  133 +
  134 +.ap-layout-fixed .ap-cont
  135 +{
  136 + width: 100%;
  137 + position: fixed;
  138 +}
  139 +
  140 +/* ------------------------- Basic Layout End ---------------------------------- */
  141 +
  142 +/* ------------------------- View Sections Start ---------------------------------- */
  143 +
  144 +.ap-header
  145 +{
  146 + height: 50px;
  147 + line-height: 50px;
  148 +
  149 + text-align: left;
  150 + font-size: 0.9em;
  151 +
  152 + padding: 0 16px;
  153 +}
  154 +
  155 +.ap-dir-rtl .ap-header
  156 +{
  157 + text-align: right;
  158 +}
  159 +
  160 +.ap-theme-default .ap-header
  161 +{
  162 + height: 60px;
  163 + line-height: 60px;
  164 +}
  165 +
  166 +.ap-content
  167 +{
  168 + max-width: 480px;
  169 + margin: 0 auto;
  170 + font-size: 40px;
  171 +}
  172 +
  173 +.ap-content-top
  174 +{
  175 + height: 50px;
  176 + padding: 8px 16px;
  177 + color:#555;
  178 + text-align:center;
  179 +}
  180 +
  181 +.ap-content-switch
  182 +{
  183 + margin-top: 8px;
  184 + margin-bottom: 8px;
  185 +
  186 + text-align: center;
  187 +}
  188 +
  189 +.ap-content-switch-tab
  190 +{
  191 + border: 1px solid #009688;
  192 + padding: 5px 16px;
  193 +
  194 + cursor: pointer;
  195 + font-size: 0.6em;
  196 + color: #009688;
  197 +}
  198 +
  199 +.ap-dir-ltr .ap-content-switch-date
  200 +{
  201 + border-top-left-radius: 2px;
  202 + border-bottom-left-radius: 2px;
  203 +}
  204 +
  205 +.ap-dir-rtl .ap-content-switch-date
  206 +{
  207 + border-top-right-radius: 2px;
  208 + border-bottom-right-radius: 2px;
  209 + margin-left: -1px;
  210 +}
  211 +
  212 +.ap-dir-ltr .ap-content-switch-time
  213 +{
  214 + border-top-right-radius: 2px;
  215 + border-bottom-right-radius: 2px;
  216 + margin-left: -1px;
  217 +}
  218 +
  219 +.ap-dir-rtl .ap-content-switch-time
  220 +{
  221 + border-top-left-radius: 2px;
  222 + border-bottom-left-radius: 2px;
  223 +}
  224 +
  225 +.ap-content-switch-selected
  226 +{
  227 + background: #009688;
  228 + color: #FFFFFF;
  229 +}
  230 +
  231 +.ap-content-middle
  232 +{
  233 + min-height: 120px;
  234 +
  235 + padding-top: 20px;
  236 + padding-bottom: 20px;
  237 +}
  238 +
  239 +.ap-content-bottom
  240 +{
  241 + height: 50px;
  242 + padding: 8px 16px;
  243 + color:#555;
  244 + text-align:center;
  245 +}
  246 +
  247 +.ap-theme-default .ap-content-top,
  248 +.ap-theme-default .ap-content-bottom
  249 +{
  250 + font-size: 0.7em;
  251 +}
  252 +
  253 +.ap-footer
  254 +{
  255 + display: table;
  256 + table-layout: fixed;
  257 + width: 100%;
  258 +
  259 + height: 50px;
  260 +}
  261 +
  262 +.ap-theme-default .ap-footer
  263 +{
  264 + padding: 0 16px;
  265 +}
  266 +
  267 +.ap-theme-default .ap-footer-top
  268 +{
  269 + line-height: 55px;
  270 +}
  271 +
  272 +.ap-theme-default .ap-footer-bottom
  273 +{
  274 + line-height: 45px;
  275 +}
  276 +
  277 + .ap-header__title
  278 +{
  279 + color: #000000;
  280 + font-size: 1.2em;
  281 +}
  282 +
  283 + /* ------------------------- Buttons Start ---------------------------------- */
  284 +
  285 +.ap-theme-default .ap-button
  286 +{
  287 + cursor: pointer;
  288 +
  289 + letter-spacing: 0;
  290 + text-align: center;
  291 + font-size: 0.8em;
  292 +
  293 + padding: 8px 12px;
  294 + margin: 8px;
  295 +
  296 + color: #009688;
  297 + background: rgba(255, 255, 255, 1);
  298 +
  299 + text-transform: uppercase;
  300 +}
  301 +
  302 +.ap-theme-default .ap-button-cont
  303 +{
  304 + float: right;
  305 +}
  306 +
  307 +.ap-theme-default.ap-dir-rtl .ap-button-cont
  308 +{
  309 + float: left;
  310 +}
  311 +
  312 + /* ------------------------- Buttons End ---------------------------------- */
  313 +
  314 +/* ------------------------- View Sections End ---------------------------------- */
  315 +
  316 +
  317 +/* ------------------------- Animations Start ---------------------------------- */
  318 +
  319 +/* ------------------------------------------------------------------------------ */
  320 +
  321 +.ap-show
  322 +{
  323 + opacity: 0;
  324 +
  325 + animation: ap-anim-show ease 0.5s;
  326 + animation-iteration-count: 1;
  327 +
  328 + -webkit-animation: ap-anim-show ease 0.5s;
  329 + -webkit-animation-iteration-count: 1;
  330 +
  331 + -moz-animation: ap-anim-show ease 0.5s;
  332 + -moz-animation-iteration-count: 1;
  333 +
  334 + -o-animation: ap-anim-show ease 0.5s;
  335 + -o-animation-iteration-count: 1;
  336 +
  337 + -ms-animation: ap-anim-show ease 0.5s;
  338 + -ms-animation-iteration-count: 1;
  339 +
  340 + -moz-animation-fill-mode: forwards;
  341 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  342 + animation-fill-mode: forwards;
  343 +}
  344 +
  345 +@keyframes ap-anim-show
  346 +{
  347 + 0% { opacity:0; }
  348 + 100% { opacity:1; }
  349 +}
  350 +
  351 +@-moz-keyframes ap-anim-show
  352 +{
  353 + 0% { opacity:0; }
  354 + 100% { opacity:1; }
  355 +}
  356 +
  357 +@-webkit-keyframes ap-anim-show
  358 +{
  359 + 0% { opacity:0; }
  360 + 100% { opacity:1; }
  361 +}
  362 +
  363 +@-o-keyframes ap-anim-show
  364 +{
  365 + 0% { opacity:0; }
  366 + 100% { opacity:1; }
  367 +}
  368 +
  369 +/* ------------------------------------------------------------------------------ */
  370 +
  371 +.ap-hide
  372 +{
  373 + animation: ap-anim-hide ease 0.5s;
  374 + animation-iteration-count: 1;
  375 +
  376 + -moz-animation-fill-mode: forwards;
  377 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  378 + animation-fill-mode: forwards;
  379 +
  380 + -webkit-animation: ap-anim-hide ease 0.5s;
  381 + -webkit-animation-iteration-count: 1;
  382 +
  383 + -moz-animation: ap-anim-hide ease 0.5s;
  384 + -moz-animation-iteration-count: 1;
  385 +
  386 + -o-animation: ap-anim-hide ease 0.5s;
  387 + -o-animation-iteration-count: 1;
  388 +
  389 + -ms-animation: ap-anim-hide ease 0.5s;
  390 + -ms-animation-iteration-count: 1;
  391 +}
  392 +
  393 +@keyframes ap-anim-hide
  394 +{
  395 + 0% { opacity:1; }
  396 + 100% { opacity:0; }
  397 +}
  398 +
  399 +@-moz-keyframes ap-anim-hide
  400 +{
  401 + 0% { opacity:1; }
  402 + 100% { opacity:0; }
  403 +}
  404 +
  405 +@-webkit-keyframes ap-anim-hide
  406 +{
  407 + 0% { opacity:1; }
  408 + 100% { opacity:0; }
  409 +}
  410 +
  411 +@-o-keyframes ap-anim-hide
  412 +{
  413 + 0% { opacity:1; }
  414 + 100% { opacity:0; }
  415 +}
  416 +
  417 +/* ------------------------------------------------------------------------------ */
  418 +
  419 +.ap-bottom-slide-up
  420 +{
  421 + opacity: 0;
  422 +
  423 + animation: ap-anim-bottom-slide-up ease 0.5s;
  424 + animation-iteration-count: 1;
  425 +
  426 + -webkit-animation: ap-anim-bottom-slide-up ease 0.5s;
  427 + -webkit-animation-iteration-count: 1;
  428 +
  429 + -moz-animation: ap-anim-bottom-slide-up ease 0.5s;
  430 + -moz-animation-iteration-count: 1;
  431 +
  432 + -o-animation: ap-anim-bottom-slide-up ease 0.5s;
  433 + -o-animation-iteration-count: 1;
  434 +
  435 + -ms-animation: ap-anim-bottom-slide-up ease 0.5s;
  436 + -ms-animation-iteration-count: 1;
  437 +
  438 + -moz-animation-fill-mode: forwards;
  439 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  440 + animation-fill-mode: forwards;
  441 +}
  442 +
  443 +@keyframes ap-anim-bottom-slide-up
  444 +{
  445 + 100% { opacity: 1; bottom: 0; }
  446 +}
  447 +
  448 +@-moz-keyframes ap-anim-bottom-slide-up
  449 +{
  450 + 100% { opacity: 1; bottom: 0; }
  451 +}
  452 +
  453 +@-webkit-keyframes ap-anim-bottom-slide-up
  454 +{
  455 + 100% { opacity: 1; bottom: 0; }
  456 +}
  457 +
  458 +@-o-keyframes ap-anim-bottom-slide-up
  459 +{
  460 + 100% { opacity: 1; bottom: 0; }
  461 +}
  462 +
  463 +/* ------------------------------------------------------------------------------ */
  464 +
  465 +.ap-bottom-slide-down
  466 +{
  467 + opacity: 1;
  468 +
  469 + animation: ap-anim-bottom-slide-down ease 0.5s;
  470 + animation-iteration-count: 1;
  471 +
  472 + -webkit-animation: ap-anim-bottom-slide-down ease 0.5s;
  473 + -webkit-animation-iteration-count: 1;
  474 +
  475 + -moz-animation: ap-anim-bottom-slide-down ease 0.5s;
  476 + -moz-animation-iteration-count: 1;
  477 +
  478 + -o-animation: ap-anim-bottom-slide-down ease 0.5s;
  479 + -o-animation-iteration-count: 1;
  480 +
  481 + -ms-animation: ap-anim-bottom-slide-down ease 0.5s;
  482 + -ms-animation-iteration-count: 1;
  483 +
  484 + -moz-animation-fill-mode: forwards;
  485 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  486 + animation-fill-mode: forwards;
  487 +}
  488 +
  489 +@keyframes ap-anim-bottom-slide-down
  490 +{
  491 + 100% { opacity: 0; bottom: -1000px; }
  492 +}
  493 +
  494 +@-moz-keyframes ap-anim-bottom-slide-down
  495 +{
  496 + 100% { opacity: 0; bottom: -1000px; }
  497 +}
  498 +
  499 +@-webkit-keyframes ap-anim-bottom-slide-down
  500 +{
  501 + 100% { opacity: 0; bottom: -1000px; }
  502 +}
  503 +
  504 +@-o-keyframes ap-anim-bottom-slide-down
  505 +{
  506 + 100% { opacity: 0; bottom: -1000px; }
  507 +}
  508 +
  509 +/* ------------------------------------------------------------------------------ */
  510 +
  511 +.ap-top-slide-down
  512 +{
  513 + opacity: 0;
  514 +
  515 + animation: ap-anim-top-slide-down ease 0.5s;
  516 + animation-iteration-count: 1;
  517 +
  518 + -webkit-animation: ap-anim-top-slide-down ease 0.5s;
  519 + -webkit-animation-iteration-count: 1;
  520 +
  521 + -moz-animation: ap-anim-top-slide-down ease 0.5s;
  522 + -moz-animation-iteration-count: 1;
  523 +
  524 + -o-animation: ap-anim-top-slide-down ease 0.5s;
  525 + -o-animation-iteration-count: 1;
  526 +
  527 + -ms-animation: ap-anim-top-slide-down ease 0.5s;
  528 + -ms-animation-iteration-count: 1;
  529 +
  530 + -moz-animation-fill-mode: forwards;
  531 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  532 + animation-fill-mode: forwards;
  533 +}
  534 +
  535 +@keyframes ap-anim-top-slide-down
  536 +{
  537 + 100% { opacity: 1; top: 0; }
  538 +}
  539 +
  540 +@-moz-keyframes ap-anim-top-slide-down
  541 +{
  542 + 100% { opacity: 1; top: 0; }
  543 +}
  544 +
  545 +@-webkit-keyframes ap-anim-top-slide-down
  546 +{
  547 + 100% { opacity: 1; top: 0; }
  548 +}
  549 +
  550 +@-o-keyframes ap-anim-top-slide-down
  551 +{
  552 + 100% { opacity: 1; top: 0; }
  553 +}
  554 +
  555 +/* ------------------------------------------------------------------------------ */
  556 +
  557 +.ap-top-slide-up
  558 +{
  559 + opacity: 1;
  560 +
  561 + animation: ap-anim-top-slide-up ease 0.5s;
  562 + animation-iteration-count: 1;
  563 +
  564 + -webkit-animation: ap-anim-top-slide-up ease 0.5s;
  565 + -webkit-animation-iteration-count: 1;
  566 +
  567 + -moz-animation: ap-anim-top-slide-up ease 0.5s;
  568 + -moz-animation-iteration-count: 1;
  569 +
  570 + -o-animation: ap-anim-top-slide-up ease 0.5s;
  571 + -o-animation-iteration-count: 1;
  572 +
  573 + -ms-animation: ap-anim-top-slide-up ease 0.5s;
  574 + -ms-animation-iteration-count: 1;
  575 +
  576 + -moz-animation-fill-mode: forwards;
  577 + -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  578 + animation-fill-mode: forwards;
  579 +}
  580 +
  581 +@keyframes ap-anim-top-slide-up
  582 +{
  583 + 100% { opacity: 0; top: -1000px; }
  584 +}
  585 +
  586 +@-moz-keyframes ap-anim-top-slide-up
  587 +{
  588 + 100% { opacity: 0; top: -1000px; }
  589 +}
  590 +
  591 +@-webkit-keyframes ap-anim-top-slide-up
  592 +{
  593 + 100% { opacity: 0; top: -1000px; }
  594 +}
  595 +
  596 +@-o-keyframes ap-anim-top-slide-up
  597 +{
  598 + 100% { opacity: 0; top: -1000px; }
  599 +}
  600 +
  601 +/* ------------------------------------------------------------------------------ */
  602 +
  603 +.ap-theme-default .ap-button-active
  604 +{
  605 + animation: ap-anim-default-button-active ease 0.5s;
  606 + animation-iteration-count: 1;
  607 + animation-fill-mode:forwards;
  608 +
  609 + -webkit-animation: ap-anim-default-button-active ease 0.5s;
  610 + -webkit-animation-iteration-count: 1;
  611 + -webkit-animation-fill-mode:forwards;
  612 +
  613 + -moz-animation: ap-anim-default-button-active ease 0.5s;
  614 + -moz-animation-iteration-count: 1;
  615 + -moz-animation-fill-mode:forwards;
  616 +
  617 + -o-animation: ap-anim-default-button-active ease 0.5s;
  618 + -o-animation-iteration-count: 1;
  619 + -o-animation-fill-mode:forwards;
  620 +
  621 + -ms-animation: ap-anim-default-button-active ease 0.5s;
  622 + -ms-animation-iteration-count: 1;
  623 + -ms-animation-fill-mode:forwards;
  624 +}
  625 +
  626 +@keyframes ap-anim-default-button-active
  627 +{
  628 + 100% { background: #E0F2F1; }
  629 +}
  630 +
  631 +@-moz-keyframes ap-anim-default-button-active
  632 +{
  633 + 100% { background: #E0F2F1; }
  634 +}
  635 +
  636 +@-webkit-keyframes ap-anim-default-button-active
  637 +{
  638 + 100% { background: #E0F2F1; }
  639 +}
  640 +
  641 +@-o-keyframes ap-anim-default-button-active
  642 +{
  643 + 100% { background: #E0F2F1; }
  644 +}
  645 +
  646 +/* ------------------------------------------------------------------------------ */
  647 +
  648 +
  649 +
  650 +/* ------------------------- Animations End ---------------------------------- */
  651 +
  652 +
  653 +
  654 +
  655 +/* ------------------------- Picker Component Start ---------------------------------- */
  656 +
  657 +.ap-component-section
  658 +{
  659 + display: table;
  660 + table-layout: fixed;
  661 + width: 100%;
  662 +
  663 + background: #FFFFFF;
  664 +}
  665 +
  666 +.ap-loading
  667 +{
  668 + width: 100%;
  669 + height: 100%;
  670 +
  671 + z-index: 2;
  672 + background: #FFFFFF;
  673 +}
  674 +
  675 +.ap-component-section, ap-component-section *
  676 +{
  677 + -webkit-box-sizing: border-box;
  678 + -moz-box-sizing: border-box;
  679 + box-sizing: border-box;
  680 +
  681 + -webkit-touch-callout: none;
  682 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  683 +
  684 + -webkit-user-select: none;
  685 + -khtml-user-select: none;
  686 + -moz-user-select: none;
  687 + -ms-user-select: none;
  688 + user-select: none;
  689 +
  690 + -ms-touch-select: none;
  691 + -ms-touch-action: none;
  692 + touch-action: none;
  693 +}
  694 +
  695 +.ap-component
  696 +{
  697 + display: table-cell;
  698 +}
  699 +
  700 +.ap-component-label
  701 +{
  702 + text-align: center;
  703 + font-size: 0.7em;
  704 +}
  705 +
  706 +.ap-theme-default
  707 +{
  708 + color: #009688;
  709 +}
  710 +
  711 +.ap-component-plus, .ap-component-minus
  712 +{
  713 + background: #FFFFFF;
  714 + color: #BDBDBD;
  715 +
  716 + width: 100%;
  717 + height: 40px;
  718 + line-height: 40px;
  719 +
  720 + text-align: center;
  721 + font-size: 15px;
  722 +
  723 + cursor: pointer;
  724 +}
  725 +
  726 +.ap-component-cont
  727 +{
  728 + position: relative;
  729 + /*height: 200px;*/
  730 + overflow: hidden;
  731 +}
  732 +
  733 +.ap-component-data
  734 +{
  735 + position: absolute;
  736 + left: 0;
  737 + top: 0;
  738 + width: 100%;
  739 +
  740 + -webkit-backface-visibility: hidden;
  741 + -moz-backface-visibility: hidden;
  742 + backface-visibility: hidden;
  743 +
  744 + -webkit-transform-style: preserve-3d;
  745 + -moz-transform-style: preserve-3d;
  746 + transform-style: preserve-3d;
  747 +
  748 + -webkit-transform: translate3d(0, 0, 0);
  749 + -moz-transform: translate3d(0, 0, 0);
  750 + -o-transform: translate3d(0, 0, 0);
  751 + -ms-transform: translate3d(0, 0, 0);
  752 + transform: translate3d(0, 0, 0);
  753 +
  754 + -webkit-perspective: 1000px;
  755 + -moz-perspective: 1000px;
  756 + perspective: 1000px;
  757 +}
  758 +
  759 +.ap-row
  760 +{
  761 + height: 40px;
  762 + line-height: 40px;
  763 +
  764 + text-align: center;
  765 +
  766 + overflow: hidden;
  767 + text-overflow: clip;
  768 + white-space:nowrap;
  769 +
  770 + cursor: pointer;
  771 +
  772 + color: #000000;
  773 +}
  774 +
  775 +.ap-row-invalid
  776 +{
  777 + color: #FFCDD2;
  778 +}
  779 +
  780 +.ap-row-hidden
  781 +{
  782 + opacity: 0;
  783 +}
  784 +
  785 +.ap-component-selector
  786 +{
  787 + position: absolute;
  788 + left: 0;
  789 + top: 50%;
  790 + -webkit-transform: translateY(-50%);
  791 + -moz-transform: translateY(-50%);
  792 + -o-transform: translateY(-50%);
  793 + -ms-transform: translateY(-50%);
  794 + transform: translateY(-50%);
  795 +
  796 + width: 100%;
  797 + height: 40px;
  798 +
  799 + border-top: 1px solid #009688;
  800 + border-bottom: 1px solid #009688;
  801 +}
  802 +
  803 +.ap-theme-default .ap-component-selector
  804 +{
  805 + left: 10%;
  806 + width: 80%;
  807 +}
  808 +
  809 +.ap-component-gradient
  810 +{
  811 + position: absolute;
  812 + top: -1px;
  813 + left: 0;
  814 +
  815 + width: 100%;
  816 + height: 102%;
  817 +
  818 + cursor: pointer;
  819 +
  820 + /*
  821 + 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'
  822 + */
  823 +
  824 + background: rgba(255,255,255,0.8);
  825 + 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%);
  826 + 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)));
  827 + 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%);
  828 + 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%);
  829 + 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%);
  830 + 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%);
  831 + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
  832 +}
  833 +
  834 +/* ------------------------- Picker Component End ---------------------------------- */
  835 +
@@ -11,3 +11,6 @@ @@ -11,3 +11,6 @@
11 @import "form"; 11 @import "form";
12 @import "modal"; 12 @import "modal";
13 @import "loading"; 13 @import "loading";
  14 +@import "select";
  15 +@import "anypicker";
  16 +@import "anypicker-ios";
  1 +.select {
  2 + position: fixed;
  3 + bottom: 0px;
  4 + width: 100%;
  5 + background: #fff;
  6 + z-index: 1001;
  7 +
  8 + ul {
  9 + font-size: 34px;
  10 + text-align: center;
  11 +
  12 + li {
  13 + height: 100px;
  14 + line-height: 100px;
  15 + border-bottom: 1px solid #e0e0e0;
  16 + }
  17 +
  18 + .item-del {
  19 + margin-top: 10px;
  20 + border-top: 1px solid #e0e0e0;
  21 + color: #5c99e4
  22 + }
  23 + }
  24 +}
@@ -13,16 +13,16 @@ @@ -13,16 +13,16 @@
13 13
14 li { 14 li {
15 &:first-of-type { 15 &:first-of-type {
16 - height: 100px;  
17 - line-height: 100px; 16 + height: 130px;
  17 + line-height: 130px;
18 } 18 }
19 19
20 - height: 80px; 20 + height: 90px;
21 border-bottom: 1px solid #e0e0e0; 21 border-bottom: 1px solid #e0e0e0;
22 22
23 .details-icon { 23 .details-icon {
24 float: right; 24 float: right;
25 - height: 90px; 25 + height: 100%;
26 margin-right: 15px; 26 margin-right: 15px;
27 27
28 .icon { 28 .icon {
@@ -40,8 +40,8 @@ @@ -40,8 +40,8 @@
40 } 40 }
41 41
42 .head-portrait { 42 .head-portrait {
43 - width: 90px;  
44 - height: 90px; 43 + width: 92px;
  44 + height: 92px;
45 overflow: hidden; 45 overflow: hidden;
46 border-radius: 50%; 46 border-radius: 50%;
47 border: 1px solid #eee; 47 border: 1px solid #eee;
@@ -51,8 +51,8 @@ @@ -51,8 +51,8 @@
51 > label { 51 > label {
52 width: 100%; 52 width: 100%;
53 height: 100%; 53 height: 100%;
54 - line-height: 80px;  
55 - font-size: 32px; 54 + line-height: 90px;
  55 + font-size: 34px;
56 margin-right: 8%; 56 margin-right: 8%;
57 text-overflow: ellipsis; 57 text-overflow: ellipsis;
58 white-space: nowrap; 58 white-space: nowrap;
1 <template> 1 <template>
2 <ul> 2 <ul>
3 <li> 3 <li>
4 - <label>头像 4 + <label @click="selicon">头像
5 <span class="details-icon"> 5 <span class="details-icon">
6 - <span class="head-portrait user-avatar" data-avatar="{{head_ico}}"></span> 6 + <span class="head-portrait user-avatar" :style='icoStyle'></span>
7 <span class="icon icon-right"></span> 7 <span class="icon icon-right"></span>
8 </span> 8 </span>
9 </label> 9 </label>
@@ -12,20 +12,55 @@ @@ -12,20 +12,55 @@
12 <label>昵称<input class="details-nickname" v-model='nickname'></label> 12 <label>昵称<input class="details-nickname" v-model='nickname'></label>
13 </li> 13 </li>
14 <li> 14 <li>
15 - <label>性别<span class="details-gender">{{ gender }}</span></label> 15 + <label @click="selgender">性别<span class="details-gender">{{ gender }}</span></label>
16 </li> 16 </li>
17 <li> 17 <li>
18 - <label>生日<span class="details-birthday">{{ birthday }}</span></label> 18 + <label>生日<input id="birthday" class="details-birthday" type="text" v-model='birthday' readonly></input>
19 </li> 19 </li>
20 </ul> 20 </ul>
21 </template> 21 </template>
22 22
23 <script> 23 <script>
  24 + const $ = require('yoho-jquery');
  25 + const dtpicker = require('common/anypicker');
  26 + const Select = require('common/select');
  27 + const iconSel = Select(['拍照','从相册选择']);
  28 + const genderSel = Select(['MEN', 'WOMEN']);
  29 +
24 module.exports = { 30 module.exports = {
25 props: ['head_ico', 'nickname', 'gender', 'birthday'], 31 props: ['head_ico', 'nickname', 'gender', 'birthday'],
26 data() { 32 data() {
27 return { 33 return {
  34 + icoStyle: this.head_ico ? 'background-image:url(' + this.head_ico + ');' : ''
28 }; 35 };
  36 + },
  37 + methods: {
  38 + selicon: function(){
  39 + iconSel.show(function(item) {
  40 + if (item === '拍照') {
  41 + console.log('拍照');
  42 + }
  43 +
  44 + if (item === '从相册选择') {
  45 + console.log('从相册选择');
29 } 46 }
  47 + });
  48 + },
  49 + selgender: function(){
  50 + let _this = this;
  51 +
  52 + genderSel.show(function(item) {
  53 + _this.gender = item.toLowerCase();
  54 + })
  55 + }
  56 + },
  57 + ready: function(){
  58 + $("#birthday").AnyPicker({
  59 + mode: "datetime",
  60 + dateTimeFormat: "yyyy. MM. dd",
  61 + theme: "iOS"
  62 + });
  63 + }
  64 +
30 }; 65 };
31 </script> 66 </script>