注册页面的国家代码。

@@ -62,8 +62,9 @@ let index = (req, res) => {
         title: '新用户注册',
         defaultHeader: false,
         passport: {
-            region: passportHelper.getCountry(),
+            country: {list: passportHelper.getCountry()},
             location: '+86',
+            countryName: {text: '中国'},
             captchaUrl: helpers.urlFormat('/passport/images', {t: Date.now()}),
             itemUrl: helpers.urlFormat('/help/', {category_id: 9}),
             referUrl: refer,

@@ -6,11 +6,9 @@
             </div>
         </li>
         <li class="clearfix" data-index="0">
-            <select id="region" class="region" name="region">
-                {{#each region}}
-                    <option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
-                {{/each}}
-            </select>
+
+            {{>select-header}}
+            {{>select-list}}
             <div id="phone" class="left phone relative">
                 <span id="country-code" class="country-code">{{location}}</span>
                 <input value="" id="phone-num" class="input phone-num" type="text" name="phoneNum"

@@ -17,7 +17,8 @@ var $phoneNumInput = $('#phone-num'),
     $passwordInput = $('#pwd'),
     $imgCaptchaInput = $('#captcha'),
     $agreeTermsInput = $('.agree-terms'),
-    $regionSelectCtrl = $('#region'),
+    $regionSelectHeader = $('#country-select-header'),
+    $regionSelectList = $('#country-select-list'),
     $regionCodeText = $('#country-code'),
     $registerBtn = $('#register-btn');
 
@@ -35,6 +36,13 @@ var checkboxIcon = {
     unchecked: ''
 };
 
+var upDown = {
+    up: '',
+    down: ''
+};
+
+var selectedIcon = '';
+
 require('yoho-jquery-placeholder');
 
 function errTip(ele, msg) {
@@ -498,9 +506,41 @@ exports.init = function() {
         }
     });
 
+    function changeHeader() {
+        var $indicator = $regionSelectHeader.find('.iconfont');
+
+        if ($regionSelectList.hasClass('hide')) {
+            $indicator.html(upDown.up);
+        } else {
+            $indicator.html(upDown.down);
+        }
+    }
+
     // 选择区域代码，验证手机号
-    $regionSelectCtrl.on('change', function() {
-        $regionCodeText.text($('#region').val());
+    // 选择国家列表
+    $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();
+    });
+
+    // 选择国家头
+    $regionSelectHeader.on('click', function() {
+        $regionSelectList.toggleClass('hide');
+        changeHeader();
         validatePhoneNum();
     });