第三方页面的国家代码。

@@ -36,8 +36,9 @@ const bind = {
         }, {
             openId: openId,
             sourceType: sourceType,
-            region: PassportHelper.getCountry(),
+            country: {list: PassportHelper.getCountry()},
             local: '+86',
+            countryName: {text: '中国'},
             imgCaptcha: helpers.urlFormat('/passport/images', {t: Date.now()})
         }));
     },

@@ -14,12 +14,8 @@
             <li class="clearfix">
 
                 <div id="mobile-input-component" class="mobile-input-component">
-                    <select id="region" name="area" class="region left">
-                        {{#each region}}
-                            <option {{#if selected}}selected="selected"{{/if}}
-                                    value="{{areaCode}}">{{name}}</option>
-                        {{/each}}
-                    </select>
+                    {{>select-header}}
+                    {{>select-list}}
 
                     <div id="phone" class="ctrl left">
                         <div id="region-code" class="code left">{{local}}</div>

@@ -19,7 +19,7 @@ module.exports = {
     },
     cookieDomain: 'yohobuy.com',
     domains: {
-        api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
+        api: 'http://testapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
         service: 'http://testservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
         search: 'http://192.168.102.216:8080/yohosearch/'
     },

@@ -8,6 +8,8 @@ var phoneRegx = require('../common/mail-phone-regx').phoneRegx;
 var EventProxy = require('yoho-eventproxy');
 
 var $regionCodeText = $('#region-code'),
+    $regionSelectList = $('#country-select-list'),
+    $regionSelectHeader = $('#country-select-header'),
     $phoneNumInput = $('#phone-num'),
     $imgCaptchaInput = $('#verifyCode'),
     $imgCaptchaCtrl = $('.img-captcha-refresh'),
@@ -27,6 +29,13 @@ var $refer = $('#refer');
 var second = 60,
     ep = new EventProxy();
 
+var upDown = {
+    up: '',
+    down: ''
+};
+
+var selectedIcon = '';
+
 function errTip(ele, msg) {
     var $errTip = ele.next('.tips');
     var $errMsg = $errTip.find('.content');
@@ -104,10 +113,40 @@ ep.tail('phoneNum', 'img-captcha', 'sms-captcha', function(phoneAuth, imgAuth, s
 
 });
 
-$('#region').change(function() {
-    var $this = $(this);
+function changeHeader() {
+    var $indicator = $regionSelectHeader.find('.iconfont');
+
+    if ($regionSelectList.hasClass('hide')) {
+        $indicator.html(upDown.up);
+    } else {
+        $indicator.html(upDown.down);
+    }
+}
+
+// 选择国家列表
+$regionSelectList.on('click', '.option', function() {
+    var $clickItem = $(this);
+    var areaCode = $clickItem.data('code');
+    var name = $clickItem.data('value');
+    var $selectedItem = $clickItem.siblings('.selected');
+
+    $selectedItem.find('.iconfont').html('');
+    $selectedItem.removeClass('selected');
+
+    $clickItem.find('.iconfont').html(selectedIcon);
+    $clickItem.addClass('selected');
+
+    $regionSelectHeader.find('.name').html(name);
+    $regionCodeText.text(areaCode);
+
+    $regionSelectList.addClass('hide');
+    changeHeader();
+});
 
-    $regionCodeText.text($this.val());
+// 选择国家头
+$regionSelectHeader.on('click', function() {
+    $regionSelectList.toggleClass('hide');
+    changeHeader();
 });
 
 ep.tail('phoneNum', 'img-captcha', function(phoneAuth, imgAuth) {

@@ -181,4 +181,60 @@ $mobile-phone: calc($item-width - $mobile-margin - $mobile-region - $mobile-code
             border: none !important;
         }
     }
+
+    .country-select-list {
+        position: absolute;
+        top: $item-height;
+        width: $item-width;
+        background-color: #f8f8f8;
+        border: 1px solid #eee;
+        z-index: 100;
+        font-size: 10px;
+
+        .option {
+            height: 20px;
+            cursor: pointer;
+
+            span {
+                display: inline-block;
+                height: 20px;
+                line-height: @height;
+            }
+        }
+
+        .option:hover {
+            background-color: #666;
+            color: white;
+        }
+
+        .small {
+            font-size: 14px;
+            margin: 0 3px;
+            width: 15px;
+        }
+    }
+
+    .country-select-header {
+        height: $item-height;
+        width: 100px;
+        border: 1px solid #eee;
+        font-size: 16px;
+        float: left;
+        cursor: pointer;
+
+        .small {
+            font-size: 14px;
+            height: 40px;
+            width: 20px;
+            line-height: @height;
+        }
+
+        .name {
+            display: inline-block;
+            height: 40px;
+            line-height: @height;
+            margin-left: 10px;
+        }
+    }
+
 }