country list and bug modify

src/components/country/index.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import classnames from 'classnames';
 import { getParam } from '@/utils';
 import { addCountryNum } from './countryRedux';
 import { HeaderBar } from '@/common'
@@ -9,6 +10,17 @@ import './index.scss';
 
 class Country extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentNav: 'A'
+    }
+  }
+
+  componentDidMount() {
+    document.body.scrollIntoView();
+  }
+
   toParentPage = (e, num) => {
     // console.log(this.props);
     const { history, addCountryNum } = this.props;
@@ -20,10 +32,23 @@ class Country extends Component {
     e.preventDefault();
   }
 
+  scrollTo = (param) => {
+    const el = document.querySelector(`[data-type="${param}"]`)
+    if(el) {
+      this.setState({
+        currentNav: param
+      });
+      el.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
+
   render() {
+  const 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'];
   const data = [
     {
-      type: '常用',
+      type: '0',
       list: [
         {
           name: '中国大陆',
@@ -1039,42 +1064,26 @@ class Country extends Component {
       ]
     }
   ];
+  const { currentNav } = this.state;
   return (
       <>
         <HeaderBar title="选择国家和地区" />
         <ul className="letter-nav">
-          <li className="letter-nav__item">A</li>
-          <li className="letter-nav__item letter-nav__item--active">B</li>
-          <li className="letter-nav__item">C</li>
-          <li className="letter-nav__item">D</li>
-          <li className="letter-nav__item">E</li>
-          <li className="letter-nav__item">F</li>
-          <li className="letter-nav__item">G</li>
-          <li className="letter-nav__item">H</li>
-          <li className="letter-nav__item">I</li>
-          <li className="letter-nav__item">J</li>
-          <li className="letter-nav__item">K</li>
-          <li className="letter-nav__item">L</li>
-          <li className="letter-nav__item">M</li>
-          <li className="letter-nav__item">N</li>
-          <li className="letter-nav__item">O</li>
-          <li className="letter-nav__item">P</li>
-          <li className="letter-nav__item">Q</li>
-          <li className="letter-nav__item">R</li>
-          <li className="letter-nav__item">S</li>
-          <li className="letter-nav__item">T</li>
-          <li className="letter-nav__item">U</li>
-          <li className="letter-nav__item">V</li>
-          <li className="letter-nav__item">W</li>
-          <li className="letter-nav__item">X</li>
-          <li className="letter-nav__item">Y</li>
-          <li className="letter-nav__item">Z</li>
+          {navs.map((item, index) => {
+            return (
+              <li 
+                key={`nav-${index}`}
+                className={classnames("letter-nav__item", {"letter-nav__item--active": currentNav === item})}
+                onClick={() => this.scrollTo(item)}
+                >{item}</li>
+            )
+          })}
         </ul>
         <div className="page-body">
             {data.map(({type, list}, index) => {
               return (
                 <div key={index}>
-                  <h2 className="country-header">{type}</h2>
+                  <h2 className="country-header" data-type={type}>{type === '0'? '常用' : type}</h2>
                   <ul className="country-list">
                     {list.map((val, key) => {
                       return (

src/components/detail/index.js

@@ -15,6 +15,7 @@ import { getCourses, addCourseToCart } from "./actions"
 import { getParam, http, browser, wxShare } from "@/utils"
 import { Toast } from 'antd-mobile'
 import { bindActionCreators } from "redux";
+import {delCountryNum} from './../country/countryRedux';
 
 import RedPacket from './redPacket';
 
@@ -584,6 +585,7 @@ class Detail extends Component {
                     <RedPacket
                         history={this.props.history}
                         country={this.props.country}
+                        delCountryNum={this.props.delCountryNum}
                     />
                 }
 
@@ -656,7 +658,8 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             getCourses,
-            addCourseToCart
+            addCourseToCart,
+            delCountryNum
         },
         dispatch
     )

src/components/detail/redPacket/index.js

@@ -53,9 +53,14 @@ class RedPacket extends PureComponent {
     // console.log(this.props);
     const share_code = getParam('share_code');
     const { country } = this.props;
+    const { shareInfo } = this.state;
     if(country.code) {
       this.setState({
-        country
+        country,
+        shareInfo: {
+          ...shareInfo,
+          share_code: country.code
+        }
       });
       // 检查收否领取过
       http.post(
@@ -68,6 +73,7 @@ class RedPacket extends PureComponent {
         console.log(res);
         const { code, data } = res.data;
         if(code === 200) {
+
           // is_receive	是否领取过 0-否 1-是            
           if(data.is_receive) {
             this.judgeReceiveStatus(data, 8);
@@ -76,12 +82,12 @@ class RedPacket extends PureComponent {
               type: 3
             });
           }
+          // 清除
+          this.props.delCountryNum();
         }
       })
     }
     // 分享链接进入
-    const { shareInfo } = this.state;
-
     if(share_code) {
       this.setState({
         shareInfo: {
@@ -522,6 +528,7 @@ class RedPacket extends PureComponent {
       bindInfo,
       country
     } = this.state;
+    // console.log(share_code);
     const cls = classnames('popup-mask',{
       'popup-mask--no': type !== 2
     });