Merge remote-tracking branch 'origin/develop' into develop

-|   |   |   |
-|---|---|---|
-|Name | Path| Note|
-|首页| /|
-|侧边栏| /sidebar| 只有 app 使用|
-|品牌列表| /brands| |
-|品类| /cate| |
-|全部分类| /cate-all| |
-|品牌店铺| /product/shop?domain=sctest1| |
-|品牌店铺分享页面| /product/brand-share?domain=colormad| |
-|商品详情| /product/{productId}| |
-|资讯列表| /news| |
+Name     | Path                                 | Note
+-------- | ------------------------------------ | ---------
+首页       | /                                    |
+侧边栏      | /sidebar                             | 只有 app 使用
+品牌列表     | /brands                              |
+品类       | /cate                                |
+全部分类     | /cate-all                            |
+品牌店铺     | /product/shop?domain=sctest1         |
+品牌店铺分享页面 | /product/brand-share?domain=colormad |
+商品详情     | /product/{productId}                 |
+资讯列表     | /news                                |

@@ -30,8 +30,8 @@ const component = {
                 module: 'home',
                 module: 'home',
                 page: 'index',
                 page: 'index',
                 head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 200, 200) : '',
                 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
                     refer: req.originalUrl
                 }),
                 }),
             };
             };
@@ -40,10 +40,20 @@ const component = {
         }).catch(next);
         }).catch(next);
     },
     },
     mydetails: (req, res) => {
     mydetails: (req, res) => {
+        let uid = req.user.uid;
+
+        uid = 14459668; // 测试uid
+
+        homeModel.getUserProfileData(uid).then(data => {
             res.render('mydetails', {
             res.render('mydetails', {
                 module: 'home',
                 module: 'home',
-            page: 'mydetails'
+                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) => {
     help: (req, res, next) => {
         homeModel.getHelpInfo().then(helpList => {
         homeModel.getHelpInfo().then(helpList => {

@@ -119,10 +119,43 @@ const order = {
             return res.json(result);
             return res.json(result);
         });
         });
     },
     },
-    coin: (req, res) => {
+    coin: (req, res, next) => {
+        let uid = req.user.id;
+
+        orderModel.getCoins(uid).then(result => {
             res.render('coin', {
             res.render('coin', {
                 module: 'home',
                 module: 'home',
-            page: 'order'
+                page: 'coin',
+                coin: result
+            });
+        }).catch(next);
+    },
+
+    /**
+     * 获取yoho币明细
+     * @param req
+     * @param res
+     * @returns {*|{read, write}}
+     */
+    getCoinDetail: (req, res) => {
+        let uid = req.user.id;
+        let page = req.query.page;
+        let limit = req.query.limit;
+        let isend = true;
+
+        uid = testUid;
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+
+        orderModel.getCoinDetail(uid, page, limit).then(result => {
+            if (result && page < result.page_total) {
+                isend = false;
+            }
+            return res.json(Object.assign({isEnd: isend}, result));
         });
         });
     },
     },
 
 

@@ -4,6 +4,10 @@
  */
  */
 'use strict';
 'use strict';
 const refundModel = require('../models/refund');
 const refundModel = require('../models/refund');
+const notLoginCode = 400;
+const notLoginTip = '抱歉，您暂未登录！';
+const testUid = 8050378;// 测试uid
+const isBLK = 1;
 
 
 const refund = {
 const refund = {
     refund(req, res) {
     refund(req, res) {
@@ -45,6 +49,51 @@ const refund = {
         res.json({
         res.json({
             code: 200
             code: 200
         });
         });
+    },
+    exchangeGoods(req, res) {
+        // let orderCode = req.query.orderCode;
+
+        res.render('exchange-status');
+    },
+    refundOrders(req, res) {
+        res.render('refund-order', {
+            module: 'home',
+            page: 'refund-order'
+        });
+    },
+
+    /**
+     * 获取退换货订单
+     * @param req
+     * @param res
+     * @returns {*|{read, write}}
+     */
+    getRefundOrders(req, res) {
+        let uid = req.query.id;
+        let page = req.query.page;
+        let limit = req.query.limit;
+        let isend = true;
+
+        uid = testUid;
+        if (!uid && req.xhr) {
+            return res.json({
+                code: notLoginCode,
+                message: notLoginTip
+            });
+        }
+        let param = {
+            uid: uid,
+            page: page,
+            limit: limit,
+            app_type: isBLK
+        };
+
+        refundModel.getRefundOrders(param).then(result => {
+            if (result && page < result.page_total) {
+                isend = false;
+            }
+            return res.json(Object.assign({isend: isend}, result));
+        });
     }
     }
 };
 };
 
 

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

@@ -120,3 +120,31 @@ exports.getOrderLogisticdate = (params) => {
         return [];
         return [];
     });
     });
 };
 };
+
+/**
+ * 获取yoho币数量
+ * @param uid
+ * @returns {*|Promise.<T>}
+ */
+exports.getCoins = (uid) => {
+    return api.get('978c6bad6c379086.json', {
+        uid: uid,
+        app_type: 'app.yohocoin.total'
+    }).then(camelCase);
+};
+
+/**
+ * 获取yoho币明细
+ * @param uid
+ * @param page
+ * @param limit
+ * @returns {*|Promise.<T>}
+ */
+exports.getCoinDetail = (uid, page, limit) => {
+    return api.get('26573a88a2958702.json', {
+        uid: uid,
+        page: page,
+        limit: limit,
+        method: 'app.yohocoin.lists'
+    }).then(camelCase);
+};

@@ -29,6 +29,25 @@ const refund = {
         return api.get('', {
         return api.get('', {
             method: 'app.express.getExpressCompany'
             method: 'app.express.getExpressCompany'
         });
         });
+    },
+
+    /**
+     * 获取退换货列表
+     * @param param
+     *          method
+     *          uid
+     *          page
+     *          limit
+     *          app_type
+     * @returns {Promise.<T>|*}
+     */
+    getRefundOrders(param) {
+        param = Object.assign({method: 'app.refund.getList'}, param);
+
+        return api.get('16303b76a9aa7b9b.json', param, {
+            cache: true,
+            code: 200
+        }).then(global.yoho.camelCase);
     }
     }
 };
 };
 
 

@@ -21,6 +21,7 @@ const router = expressRouter();
 router.get('/', home.index); // 个人中心主页
 router.get('/', home.index); // 个人中心主页
 router.get('/orders', order.orders); // 订单
 router.get('/orders', order.orders); // 订单
 router.get('/mycurrency', order.coin); // yoho币
 router.get('/mycurrency', order.coin); // yoho币
+router.get('/coin-detail', order.getCoinDetail); // yoho币明细
 router.get('/order-detail', order.orderDetail); // 订单详情
 router.get('/order-detail', order.orderDetail); // 订单详情
 router.get('/get-orders', order.getOrderData); // 获取订单数据
 router.get('/get-orders', order.getOrderData); // 获取订单数据
 router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
 router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
@@ -44,6 +45,9 @@ router.get('/refund/order', refund.order); // 查询订单数据
 router.post('/refund/submit', refund.submit); // 提交信息
 router.post('/refund/submit', refund.submit); // 提交信息
 router.get('/refund/logistics', refund.logistics); // 退换货 - 商品寄回信息
 router.get('/refund/logistics', refund.logistics); // 退换货 - 商品寄回信息
 router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄回物流信息
 router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄回物流信息
+router.get('/exchange-status', refund.exchangeGoods); // 退换货 - 换货状态
+router.get('/refund/orders', refund.refundOrders); // 退换货 - 订单列表
+router.get('/refund/get-orders', refund.getRefundOrders); // 退换货 - 获取订单列表数据
 
 
 // 换货
 // 换货
 router.get('/exchange', exchange.exchange);
 router.get('/exchange', exchange.exchange);

-<div class="yoho-coin">
+<div class="yoho-coin" id="coin-detail-list">
     <div class="coin-total">
     <div class="coin-total">
         <p>您目前拥有</p>
         <p>您目前拥有</p>
-        <p><b>123</b></p>
+        <p><b>{{coin.data.total}}</b></p>
         <p>个有货币</p>
         <p>个有货币</p>
     </div>
     </div>
-    <div class="coin-detail">
-        <p>明细列表</p>
-        <ul class="coin-detail-list">
-            <li>
-                <div class="coin-source">
-                    <p>签到奖励</p>
-                    <time>2016.1.23 12:31:00</time>
-                </div>
-                <div class="coin-num">+5</div>
-            </li>
-            <li>
-                <div class="coin-source">
-                    <p>签到奖励</p>
-                    <time>2016.1.23 12:31:00</time>
-                </div>
-                <div class="coin-num">+118</div>
-            </li>
-        </ul>
-    </div>
+    <coin-detail></coin-detail>
 </div>
 </div>

+<section class="exchange-status" id="exchange-goods-status">
+    <div class="status-desc">
+        <p>审核通过</p>
+        <p>申请时间: 2016.1.23 23:00:00</p>
+    </div>
+    <div class="exchange-progress">
+        <ul>
+            <li class="passed">
+                <div class="progress-desc">
+                    <p>提交申请</p>
+                    <time>2016-1-23 23:00:00</time>
+                </div>
+            </li>
+            <li>
+                <div class="progress-desc">
+                    <p>审核通过</p>
+                </div>
+            </li>
+            <li>
+                <div class="progress-desc">
+                    <p>商品寄回</p>
+                </div>
+            </li>
+            <li>
+                <div class="progress-desc">
+                    <p>商品入库</p>
+                </div>
+            </li>
+            <li>
+                <div class="progress-desc">
+                    <p>换货完成</p>
+                </div>
+            </li>
+        </ul>
+        <div class="progress-todo">
+            <p>您的换货申请已<b>成功提交</b>!</p>
+            <p class="phone">请您耐心等待审核,审核过后我们会将换货信息发送至您的手机<br>客服电话:400-889-9646</p>
+        </div>
+    </div>
+    <div class="exchange-details">
+        <h2>换货详情 <i>EXCHANGE DETAILS</i></h2>
+        <div class="exchange-product-wrapper">
+            <div class="exchange-product">
+                <div class="goods-info" v-for="goods in order.orderGoods">
+                    <div class="img-box">
+                        <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
+                    </div>
+                    <div class="goods-detail">
+                        <p class="name">{{goods.productName}}</p>
+                        <p class="size">
+                            <span>颜色:{{goods.colorName}}</span>
+                            <span>尺码:{{goods.sizeName}}</span>
+                        </p>
+                    </div>
+                    <div class="goods-price">
+                        <p>&yen; {{goods.goodsPrice}}</p>
+                        <p>×{{goods.buyNumber}}</p>
+                    </div>
+                </div>
+                <div class="exchange-reason">
+                    <p>换货颜色尺码: 黄色 M码</p>
+                    <p>换货原因: 质量瑕疵</p>
+                    <blockquote>收到货品后发现不是自己想要的，不是非常的喜欢， 而且存在一低昂的质量问题的呢，少了一个扣子的， 颜色与实际的有点不太符合的哈。</blockquote>
+                    <ul class="exchange-img">
+                        <li>
+                            <img src="" alt="">
+                        </li>
+                        <li>
+                            <img src="" alt="">
+                        </li>
+                        <li>
+                            <img src="" alt="">
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="exchange-product">
+                <div class="goods-info" v-for="goods in order.orderGoods">
+                    <div class="img-box">
+                        <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
+                    </div>
+                    <div class="goods-detail">
+                        <p class="name">{{goods.productName}}</p>
+                        <p class="size">
+                            <span>颜色:{{goods.colorName}}</span>
+                            <span>尺码:{{goods.sizeName}}</span>
+                        </p>
+                    </div>
+                    <div class="goods-price">
+                        <p>&yen; {{goods.goodsPrice}}</p>
+                        <p>×{{goods.buyNumber}}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="exchange-product">
+                <div class="goods-info" v-for="goods in order.orderGoods">
+                    <div class="img-box">
+                        <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
+                    </div>
+                    <div class="goods-detail">
+                        <p class="name">{{goods.productName}}</p>
+                        <p class="size">
+                            <span>颜色:{{goods.colorName}}</span>
+                            <span>尺码:{{goods.sizeName}}</span>
+                        </p>
+                    </div>
+                    <div class="goods-price">
+                        <p>&yen; {{goods.goodsPrice}}</p>
+                        <p>×{{goods.buyNumber}}</p>
+                    </div>
+                </div>
+                <div class="exchange-reason">
+                    <p>换货原因: 尺寸不合适</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="exchange-express">
+        <div class="exchange-address">
+            <p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
+            <p>{{order.area}} <br>{{order.address}}</p>
+        </div>
+        <div class="exchange-type">
+            <a href="">
+                <div class="primary">换货方式:</div>
+                <div class="cell-ft">寄回换货</div>
+            </a>
+        </div>
+    </div>
+    <div class="exchange-order">
+        <a href="">
+            <div class="primary">原订单详情</div>
+            <div class="cell-ft"></div>
+        </a>
+    </div>
+    <div class="exchange-options">
+        <button>取消申请</button>
+    </div>
+</section>

 <div class="yoho-favorite-brand-page">
 <div class="yoho-favorite-brand-page">
     <div class="fav-content" id="fav-content">
     <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>
 </div>
 </div>

 <div class="yoho-favorite-page">
 <div class="yoho-favorite-page">
     <div class="fav-content" id="fav-content">
     <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>
 </div>
 </div>

 <div class="logistics-page" id="logistics">
 <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>

 <div class="personal-details" id="details">
 <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>

-<div class="order-wrapper return-goods">
-    <ul>
-        <li class="order-item">
-            <div class="order-detail">
-                <div class="order-code">
-                    <div class="code-time">
-                        <p>订单号:523243435</p>
-                        <p>申请时间：2016.1.23 12:31:00</p>
-                    </div>
-                    <p>通过审核</p>
-                </div>
-                <div class="order-goods">
-                    <div class="goods-info">
-                        <div class="img-box">
-                            <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                        </div>
-                        <div class="goods-detail">
-                            <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                            <p class="size">
-                                <span>颜色:黑色</span>
-                                <span>尺码:XL</span>
-                            </p>
-                        </div>
-                        <div class="goods-price">
-                            <p>&yen;6289.00</p>
-                            <p>×1</p>
-                        </div>
-                    </div>
-                    <div class="goods-info">
-                        <div class="img-box">
-                            <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                        </div>
-                        <div class="goods-detail">
-                            <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                            <p class="size">
-                                <span>颜色:黑色</span>
-                                <span>尺码:XL</span>
-                            </p>
-                        </div>
-                        <div class="goods-price">
-                            <p>&yen;6289.00</p>
-                            <p>×1</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="order-option">
-                    <div class="goods-total"></div>
-                    <div class="options">
-                        <button class="normal">取消申请</button>
-                    </div>
-                </div>
-            </div>
-        </li>
-        <li class="order-item">
-            <div class="order-detail">
-                <div class="order-code">
-                    <div class="code-time">
-                        <p>订单号:523243435</p>
-                        <p>申请时间：2016.1.23 12:31:00</p>
-                    </div>
-                    <p>商品寄回</p>
-                </div>
-                <div class="order-goods">
-                    <div class="goods-info">
-                        <div class="img-box">
-                            <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
-                        </div>
-                        <div class="goods-detail">
-                            <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
-                            <p class="size">
-                                <span>颜色:黑色</span>
-                                <span>尺码:XL</span>
-                            </p>
-                        </div>
-                        <div class="goods-price">
-                            <p>&yen;6289.00</p>
-                            <p>×1</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </li>
-    </ul>
-</div>

+<div class="order-wrapper return-goods" id="refund-order-list">
+    <refund-order></refund-order>
+</div>

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

+/**
+ * 拦截跳转, 在这里给将要打开的页面设置一下 header 样式
+ * @return {[type]}
+ */
+const yoho = require('yoho');
+
+module.exports = (url) => {
+    console.log(url);
+    if (yoho.isApp) {
+        yoho.goNewPage({
+            url: url
+        });
+    } else {
+        location.href = url;
+    }
+};

+/**
+ * 选择框组件
+ *
+ * @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;

+/**
+ * coin.page.js.
+ * @author hgwang
+ * @date 2016-07-27
+ */
+'use strict';
+
+
+const Vue = require('yoho-vue');
+const coin = require('home/coin-detail.vue');
+const infiniteScroll = require('yoho-vue-infinite-scroll');
+
+Vue.use(infiniteScroll);
+
+require('common/vue-filter');
+
+new Vue({
+    el: '#coin-detail-list',
+    components: {
+        'coin-detail': coin
+    }
+});

+/**
+ * exchange-status.page.js.
+ * @author hgwang
+ * @date 2016-07-25
+ */
+'use strict';
+

+/**
+ * refund-order.page.
+ * @author hgwang
+ * @date 2016-07-26
+ */
+'use strict';
+
+const Vue = require('yoho-vue');
+const refundOrder = require('home/refund-order.vue');
+const infiniteScroll = require('yoho-vue-infinite-scroll');
+
+Vue.use(infiniteScroll);
+
+require('common/vue-filter');
+
+new Vue({
+    el: '#refund-order-list',
+    data: {},
+    components: {
+        refundOrder
+    }
+});

+/* -----------------------------------------------------------------------------
+
+  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 "form";
 @import "modal";
 @import "modal";
 @import "loading";
 @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
+        }
+    }
+}

@@ -10,11 +10,13 @@
         p:first-child {
         p:first-child {
             font-size: 34px;
             font-size: 34px;
         }
         }
+
         p:nth-child(2) {
         p:nth-child(2) {
             font-size: 78px;
             font-size: 78px;
             color: #4a90e2;
             color: #4a90e2;
             line-height: 80px;
             line-height: 80px;
         }
         }
+
         p:last-child {
         p:last-child {
             color: #b0b0b0;
             color: #b0b0b0;
             font-size: 28px;
             font-size: 28px;
@@ -28,6 +30,7 @@
             font-size: 28px;
             font-size: 28px;
             color: #b0b0b0;
             color: #b0b0b0;
         }
         }
+
         .coin-detail-list {
         .coin-detail-list {
             padding: 0 30px;
             padding: 0 30px;
             background: $white;
             background: $white;
@@ -69,6 +72,10 @@
             .coin-num {
             .coin-num {
                 font-size: 34px;
                 font-size: 34px;
                 line-height: 92px;
                 line-height: 92px;
+
+                i {
+                    font-style: normal;
+                }
             }
             }
         }
         }
     }
     }

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

+.exchange-status {
+    background: #f6f6f6;
+    padding-bottom: 170px;
+
+    > div {
+        padding: 0 30px;
+        background: #fff;
+    }
+    .status-desc {
+        display: flex;
+        height: 80px;
+        line-height: 80px;
+        color: $white;
+        background: $black;
+        p:first-of-type {
+            flex: 1;
+            font-size: 34px;
+        }
+    }
+    .exchange-progress {
+        border-bottom: 1px solid #eee;
+
+        li {
+            position: relative;
+            padding-left: 55px;
+
+            .progress-desc {
+                padding: 30px 0;
+                border-bottom: 1px solid #eee;
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 50%;
+                width: 17px;
+                height: 17px;
+                margin-top: -8px;
+                background: #b0b0b0;
+                border-radius: 50%;
+                z-index: 1;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                left: 8px;
+                top: 0;
+                width: 1px;
+                height: 100%;
+                background: #eee;
+            }
+
+            &.passed {
+                &:before {
+                    background: #000;
+                }
+            }
+
+            p:first-of-type {
+                flex: 1;
+                font-size: 34px;
+            }
+
+            time {
+                color: #b0b0b0;
+            }
+        }
+        .progress-todo {
+            padding: 25px 0;
+            text-align: center;
+            p:first-of-type {
+                font-size: 34px;
+
+                b {
+                    color: #4a90e2;
+                }
+            }
+
+            .phone {
+                color: #b0b0b0;
+            }
+        }
+    }
+    .exchange-details {
+        margin-top: 20px;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+
+        h2 {
+            height: 88px;
+            font-size: 32px;
+            line-height: 88px;
+
+            i {
+                display: inline-block;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: normal;
+                color: #b0b0b0;
+            }
+        }
+
+    }
+    .exchange-product {
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+
+        .goods-info {
+            display: flex;
+            padding: 20px 0;
+            border-bottom: 1px solid #eee;
+
+            &:last-child {
+                border-bottom: 0 none;
+            }
+        }
+        .img-box {
+            position: relative;
+            width: 98px;
+            height: 130px;
+            overflow: hidden;
+
+            label {
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                height: 30px;
+                line-height: 30px;
+                background: rgba(0, 0, 0, 0.2);
+                color: $white;
+                text-align: center;
+            }
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .goods-detail {
+            flex: 1;
+            margin: 0 20px;
+            font-size: 24px;
+
+            span {
+                margin-right: 40px;
+            }
+            .name {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                text-overflow: ellipsis;
+                height: 2.4em;
+                line-height: 1.25;
+                overflow: hidden;
+                font-size: 28px;
+            }
+            .size {
+                color: #b0b0b0;
+            }
+        }
+        .goods-price {
+            text-align: right;
+
+            p:first-of-type {
+                font-size: 28px;
+            }
+            p:last-of-type {
+                font-size: 30px;
+                color: #b0b0b0;
+            }
+        }
+    }
+    .exchange-reason {
+        padding: 20px 0;
+        font-size: 28px;
+        blockquote {
+            margin-top: 20px;
+            color: #b0b0b0;
+        }
+    }
+    .exchange-img {
+        display: flex;
+        margin-top: 25px;
+        margin-bottom: 10px;
+
+        li {
+            width: 154px;
+            height: 154px;
+            margin-right: 25px;
+
+            img {
+                width: 154px;
+                height: 154px;
+            }
+        }
+    }
+    .exchange-address {
+        position: relative;
+        padding: 20px 30px 27px;
+        margin-bottom: 20px;
+        border-top: 1px solid #eee;
+        word-wrap: break-word;
+
+        p:first-of-type {
+            font-size: 32px;
+            font-weight: 700;
+
+            span {
+                margin-right: 40px;
+            }
+        }
+        p:last-of-type {
+            font-size: 28px;
+            color: #b0b0b0;
+        }
+    }
+    .exchange-express {
+        margin-top: 20px;
+    }
+    .exchange-order,
+    .exchange-type {
+        display: flex;
+        position: relative;
+        height: 88px;
+        margin-top: 20px;
+        line-height: 88px;
+        font-size: 34px;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+
+        .primary {
+            flex: 1;
+        }
+        .cell-ft {
+            color: #b0b0b0;
+            &:after {
+                content: "\e607";
+                display: inline-block;
+                font-size: 15px;
+                margin-left: 5px;
+                font-family: iconfont;
+                -webkit-transform: rotate(-90deg);
+                transform: rotate(-90deg);
+                margin-right: -5px;
+                color: #999;
+            }
+        }
+    }
+    .exchange-options {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10;
+        padding: 30px 20px;
+        border-top: 1px solid #eee;
+        text-align: right;
+        background: #fff;
+
+        button {
+            padding: 0 20px;
+            height: 68px;
+            line-height: 68px;
+            color: $black;
+            text-align: center;
+            -webkit-appearance: none;
+            border: 0 none;
+            background: $white;
+            font-size: 28px;
+
+            &.black {
+                width: 192px;
+                color: $white;
+                background: $black;
+            }
+            &.countdown {
+                color: $white;
+                background: $black;
+            }
+            &.normal {
+                width: 188px;
+                padding: 0;
+                border: 1px solid $black;
+                color: $black;
+            }
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+}

@@ -6,3 +6,4 @@
 @import "about-us";
 @import "about-us";
 @import "coin";
 @import "coin";
 @import "logistics";
 @import "logistics";
+@import "exchange-status";

@@ -59,10 +59,23 @@ $white: #fff;
             }
             }
         }
         }
         .img-box {
         .img-box {
+            position: relative;
             width: 98px;
             width: 98px;
             height: 130px;
             height: 130px;
             overflow: hidden;
             overflow: hidden;
 
 
+            label {
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                height: 30px;
+                line-height: 30px;
+                background: rgba(0, 0, 0, 0.2);
+                color: $white;
+                text-align: center;
+            }
+
             img {
             img {
                 width: 100%;
                 width: 100%;
                 height: 100%;
                 height: 100%;

@@ -27,6 +27,7 @@
     const $ = require('yoho-jquery');
     const $ = require('yoho-jquery');
     const tip = require('common/tip');
     const tip = require('common/tip');
     const bus = require('common/vue-bus');
     const bus = require('common/vue-bus');
+    const interceptClick = require('common/intercept-click');
     const contentCode = require('content-code');
     const contentCode = require('content-code');
 
 
     const focus = require('./focus.vue');
     const focus = require('./focus.vue');
@@ -98,6 +99,12 @@
             bus.$on('channel.change', (page, channel) => {
             bus.$on('channel.change', (page, channel) => {
                 this.contentCode = contentCode[page][channel];
                 this.contentCode = contentCode[page][channel];
             });
             });
+        },
+        attached() {
+            $('.resources').on('click', 'a', function() {
+                interceptClick($(this).attr('href'));
+                return false;
+            });
         }
         }
     };
     };
 </script>
 </script>

+<template>
+    <div class="coin-detail">
+        <p>明细列表</p>
+        <ul class="coin-detail-list">
+            <li v-for="coin in coinList">
+                <div class="coin-source">
+                    <p>{{coin.message}}</p>
+                    <time>{{coin.date}}</time>
+                </div>
+                <div class="coin-num"><i v-if="coin.num>0">+</i>{{coin.num}}</div>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+    'use strict';
+
+    const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+
+    // const Modal = require('common/modal');
+
+    module.exports = {
+        data() {
+            return {
+                page: 0,
+                limit: 15,
+                coinList: [],
+                busy: false,
+            };
+        },
+
+        ready() {
+            this.getCoinData();
+        },
+
+        methods: {
+            getCoinData() {
+                let _that = this;
+
+                this.busy = true;
+                $.ajax({
+                    url: '/home/coin-detail',
+                    data: {
+                        page: ++this.page,
+                        limit: this.limit
+                    }
+                }).then(result => {
+                    if (result.code === 200) {
+                        if (result.isend) {
+                            _that.busy = true;
+                        } else {
+                            _that.busy = false;
+                        }
+                        if (result.data.coinlist.length > 0) {
+                            this.$set('coinList', result.data.coinlist);
+                        }
+                    }
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            }
+        }
+    };
+</script>

 <template>
 <template>
      <ul>
      <ul>
         <li>
         <li>
-            <label>头像
+            <label @click="selicon">头像
                 <span class="details-icon">
                 <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 class="icon icon-right"></span>
                 </span>
                 </span>
             </label>
             </label>
@@ -12,20 +12,55 @@
             <label>昵称<input class="details-nickname" v-model='nickname'></label>
             <label>昵称<input class="details-nickname" v-model='nickname'></label>
         </li>
         </li>
         <li>
         <li>
-            <label>性别<span class="details-gender">{{ gender }}</span></label>
+            <label @click="selgender">性别<span class="details-gender">{{ gender }}</span></label>
         </li>
         </li>
         <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>
         </li>
     </ul>
     </ul>
 </template>
 </template>
 
 
 <script>
 <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 = {
     module.exports = {
         props: ['head_ico', 'nickname', 'gender', 'birthday'],
         props: ['head_ico', 'nickname', 'gender', 'birthday'],
         data() {
         data() {
             return {
             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>
 </script>

+<template>
+    <ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+        <li class="order-item" v-for="(index, order) in orderList">
+            <div class="order-detail">
+                <div class="order-code">
+                    <div class="code-time">
+                        <p>订单号:{{order.orderCode}}</p>
+                        <p>申请时间：{{order.orderCreateTime}}</p>
+                    </div>
+                    <p>{{order.statusName}}</p>
+                </div>
+                <div class="order-goods">
+                    <div class="goods-info" v-for="product in order.goods">
+                        <div class="img-box">
+                            <img v-bind:src="product.goodsImage | resize 49 65" alt="{{product.productName}}">
+                            <label v-if="product.goodsType == 'gift'">赠品</label>
+                        </div>
+                        <div class="goods-detail">
+                            <p class="name">{{product.productName}}</p>
+                            <p class="size">
+                                <span>颜色: {{product.colorName}}</span>
+                                <span>尺码: {{product.sizeName}}</span>
+                            </p>
+                        </div>
+                        <div class="goods-price">
+                            <p>&yen;{{product.salesPrice}}</p>
+                            <p>×1</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="order-option">
+                    <div class="goods-total"></div>
+                    <div class="options" v-show="order.canCancel == 'Y'">
+                        <button v-if="order.canCancel == 'Y'" class="normal">取消申请</button>
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+</template>
+<script>
+    'use strict';
+
+    const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+
+    //const Modal = require('common/modal');
+
+    module.exports = {
+        data() {
+            return {
+                page: 0,
+                limit: 10,
+                orderList: [],
+                busy: false,
+            };
+        },
+
+        ready() {
+            this.getOrderData();
+        },
+
+        methods: {
+            getOrderData() {
+                let _that = this;
+
+                this.busy = true;
+                $.ajax({
+                    url: '/home/refund/get-orders',
+                    data: {
+                        page: ++this.page,
+                        limit: this.limit
+                    }
+                }).then(result => {
+                    if (result.isend) {
+                        _that.busy = true;
+                    } else {
+                        _that.busy = false;
+                    }
+                    if (result.data.list.length > 0) {
+                        this.$set('orderList', result.data.list);
+                    }
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            },
+            cancelApply(code) {
+                $.ajax({
+                    url: '/home/cancel-apply',
+                    type: 'post',
+                    data: {
+                        orderCode: code
+                    }
+                }).then(result => {
+                    if (result.code === 200) {
+                        location.reload();
+                    } else {
+                        tip(result.message);
+                    }
+                }).fail(() => {
+                    tip('操作失敗');
+                });
+            }
+        }
+    };
+</script>
+<style>
+    html,
+    body {
+        height: 100%;
+    }
+
+    @import "../../scss/home/_order.css";
+
+    .order-wrapper {
+        height: 100%;
+
+        ul {
+            height: 100%;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+</style>