国际手机号

src/components/country/index.js

@@ -13,65 +13,8 @@ class Country extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      navs: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
-      currentNav: 'A'
-    }
-  }
-
-  componentDidMount() {
-    // document.body.scrollIntoView();
-    document.addEventListener('scroll', this.judgeCurrentPosition)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('scroll', this.judgeCurrentPosition)
-  }
-
-  judgeCurrentPosition = () => {
-    const { navs } = this.state;
-    let top = document.documentElement.scrollTop || document.body.scrollTop;
-    const lens = navs.map(item => {
-      let el = document.querySelector(`[data-type="${item}"]`);
-      if(el) {
-        return el.offsetTop;
-      }
-      return '';
-    });
-    lens.map((item,index) => {
-      if(item && (top + 200) > item) {
-        this.setState({
-          currentNav: navs[index]
-        })
-      } 
-    });
-  }
-
-  toParentPage = (e, num) => {
-    // console.log(this.props);
-    const { history, addCountryNum } = this.props;
-    addCountryNum({
-      num,
-      code: getParam('share_code')
-    });
-    // history.push(`/detail?id=${getParam('id')}`);
-    history.go(-1)
-    e.preventDefault();
-  }
-
-  scrollTo = (param) => {
-    const el = document.querySelector(`[data-type="${param}"]`)
-    if(el) {
-      this.setState({
-        currentNav: param
-      });
-      el.scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-  }
-
-  render() {
-  const data = [
+      currentNav: 'A',
+      data: [
         {
           type: '0',
           list: [
@@ -80,17 +23,41 @@ class Country extends Component {
               num: '86'
             },
             {
-          name: '中国澳门',
-          num: '853'
+              name: '美国',
+              num: '1'
+            },
+            {
+              name: '日本',
+              num: '81'
             },
             {
               name: '中国香港',
               num: '852'
             },
             {
+              name: '中国澳门',
+              num: '853'
+            },
+            {
               name: '中国台湾',
               num: '886'
-        }
+            },
+            {
+              name: '澳大利亚',
+              num: '61'
+            },
+            {
+              name: '加拿大',
+              num: '1'
+            },
+            {
+              name: '英国',
+              num: '44'
+            },
+            {
+              name: '新西兰',
+              num: '64'
+            },
           ]
         },
         {
@@ -163,14 +130,6 @@ class Country extends Component {
             {
               name: '爱沙尼亚',
               num: '372'
-        },
-        {
-          name: '爱沙尼亚',
-          num: '372'
-        },
-        {
-          name: '爱沙尼亚',
-          num: '372'
             }
           ]
         },
@@ -736,26 +695,6 @@ class Country extends Component {
             {
               name: '奥地利',
               num: '43'
-        },
-        {
-          name: '澳大利亚',
-          num: '61'
-        },
-        {
-          name: '澳大利亚',
-          num: '61'
-        },
-        {
-          name: '澳大利亚',
-          num: '61'
-        },
-        {
-          name: '澳大利亚',
-          num: '61'
-        },
-        {
-          name: '澳大利亚',
-          num: '61'
             }
           ]
         },
@@ -885,7 +824,6 @@ class Country extends Component {
         {
           type: 'T',
           list: [
-        ,
             {
               name: '塔吉克斯坦',
               num: '992'
@@ -1004,31 +942,31 @@ class Country extends Component {
             {
               name: '印度',
               num: '91'
-        },,
+            },
             {
               name: '印度尼西亚',
               num: '62'
-        },,
+            },
             {
               name: '伊朗',
               num: '98'
-        },,
+            },
             {
               name: '伊拉克',
               num: '964'
-        },,
+            },
             {
               name: '以色列',
               num: '972'
-        },,
+            },
             {
               name: '意大利',
               num: '39'
-        },,
+            },
             {
               name: '牙买加',
               num: '1876'
-        },,
+            },
             {
               name: '约旦',
               num: '962'
@@ -1088,19 +1026,74 @@ class Country extends Component {
             }
           ]
         }
-  ];
-  const { currentNav, navs } = this.state;
+      ]
+    }
+  }
+
+  componentDidMount() {
+    // document.body.scrollIntoView();
+    document.addEventListener('scroll', this.judgeCurrentPosition)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('scroll', this.judgeCurrentPosition)
+  }
+
+  judgeCurrentPosition = () => {
+    const { data } = this.state;
+    let top = document.documentElement.scrollTop || document.body.scrollTop;
+    const lens = data.map(item => {
+      let el = document.querySelector(`[data-type="${item['type']}"]`);
+      if(el) {
+        return el.offsetTop;
+      }
+      return '';
+    });
+    lens.map((item,index) => {
+      if(item && (top + 200) > item) {
+        this.setState({
+          currentNav: data[index]['type']
+        })
+      } 
+    });
+  }
+
+  toParentPage = (e, num) => {
+    const { history, addCountryNum } = this.props;
+    addCountryNum({
+      num,
+      code: getParam('share_code')
+    });
+    // history.push(`/detail?id=${getParam('id')}`);
+    history.go(-1)
+    e.preventDefault();
+  }
+
+  scrollTo = (param) => {
+    const el = document.querySelector(`[data-type="${param}"]`)
+    if(el) {
+      this.setState({
+        currentNav: param
+      });
+      el.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
+
+  render() {
+  const { currentNav, data } = this.state;
   return (
       <>
-        <HeaderBar title="选择国家和地区" />
+        <HeaderBar title="选择国家和地区" arrow={true}/>
         <ul className="letter-nav">
-          {navs.map((item, index) => {
+          {data.map(item => {
             return (
               <li 
-                key={`nav-${index}`}
-                className={classnames("letter-nav__item", {"letter-nav__item--active": currentNav === item})}
-                onClick={() => this.scrollTo(item)}
-                >{item}</li>
+                key={`nav-${item['type']}`}
+                className={classnames("letter-nav__item", {"letter-nav__item--active": currentNav === item['type']})}
+                onClick={() => this.scrollTo(item['type'])}
+                >{item['type'] === '0' ? '常' : item['type']}</li>
             )
           })}
         </ul>

src/components/country/index.scss

@@ -33,7 +33,8 @@ body {
 }
 
 .country-item {
-  margin: 0 12px;
+  margin-left: 12px;
+  padding-right: 22px;
 }
 
 .country-item__link {