From a158292339abbbd702ee95252ff56d8fd2e921a5 Mon Sep 17 00:00:00 2001
From: lukaijie <lukaijie@shopex.cn>
Date: Wed, 3 Nov 2021 15:10:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E4=B8=AD=E5=BF=83=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 extend/tp-home/pages/index.js    |    0
 src/consts/index.js              |   20 +-
 src/index.html                   |    2 +-
 src/pages/member/index copy.js   |  847 +++++++++++++++
 src/pages/member/index copy.scss |  420 +++++++
 src/pages/member/index.js        | 1742 ++++++++++++++++--------------
 src/pages/member/index.scss      |  489 ++-------
 7 files changed, 2309 insertions(+), 1211 deletions(-)
 create mode 100644 extend/tp-home/pages/index.js
 create mode 100644 src/pages/member/index copy.js
 create mode 100644 src/pages/member/index copy.scss

diff --git a/extend/tp-home/pages/index.js b/extend/tp-home/pages/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/consts/index.js b/src/consts/index.js
index 619a9eec5..f8bca7b20 100644
--- a/src/consts/index.js
+++ b/src/consts/index.js
@@ -26,17 +26,17 @@ export const REFUND_STATUS = {
 };
 
 export const PROMOTION_TAG = {
-  "single_group": "团购",
-  "full_minus": "满减",
-  "full_discount": "满折",
-  "full_gift": "满赠",
-  "normal": "秒杀",
-  "limited_time_sale": "限时特惠",
-  "plus_price_buy": "换购",
-  "member_preference" : "会员限购" 
-}
+  single_group: "团购",
+  full_minus: "满减",
+  full_discount: "满折",
+  full_gift: "满赠",
+  normal: "秒杀",
+  limited_time_sale: "限时特惠",
+  plus_price_buy: "换购",
+  member_preference: "会员限购"
+};
 
-export const DEFAULT_POINT_NAME = '积分'
+export const DEFAULT_POINT_NAME = "积分";
 
 export const DEFAULT_THEME = {
   colorPrimary: "#d42f29",
diff --git a/src/index.html b/src/index.html
index 6ac7f2ace..73a11b9ff 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
   <meta name="referrer" content="never">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
   <title></title>
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_869421_qjixa4n291.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_869421_gk41lfcam5h.css">
   <script src='https://webapi.amap.com/maps?v=2.0&key=${process.env.APP_MAP_KEY}'></script>
   <script>
     !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
diff --git a/src/pages/member/index copy.js b/src/pages/member/index copy.js
new file mode 100644
index 000000000..c5b11c74a
--- /dev/null
+++ b/src/pages/member/index copy.js	
@@ -0,0 +1,847 @@
+import Taro, { Component } from "@tarojs/taro";
+import { View, ScrollView, Text, Image, Button } from "@tarojs/components";
+import { connect } from "@tarojs/redux";
+import {
+  TabBar,
+  SpCell,
+  AccountOfficial,
+  SpLogin,
+  SpFloatPrivacy
+} from "@/components";
+// import ExclusiveCustomerService from './comps/exclusive-customer-service'
+import api from "@/api";
+import S from "@/spx";
+import req from "@/api/req";
+import { withLogin } from "@/hocs";
+import {
+  navigateTo,
+  getThemeStyle,
+  classNames,
+  showToast,
+  showModal,
+  styleNames,
+  isWeixin,
+  getPointName
+} from "@/utils";
+import { transformPlatformUrl, platformTemplateName } from "@/utils/platform";
+import qs from "qs";
+import userIcon from "@/assets/imgs/user-icon.png";
+import "./index.scss";
+
+@connect(
+  ({ colors, member }) => ({
+    colors: colors.current,
+    memberData: member.member
+  }),
+  dispatch => ({
+    onFetchFavs: favs => dispatch({ type: "member/favs", payload: favs })
+  })
+)
+@withLogin()
+export default class MemberIndex extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      turntable_open: 0,
+      redirectInfo: {},
+      orderCount: null,
+      memberDiscount: null,
+      isOpenPopularize: false,
+      salespersonData: null,
+      memberAssets: null,
+      // 是否开启储值
+      rechargeStatus: true,
+      // banner配置
+      bannerSetting: {},
+      // 菜单配置
+      menuSetting: {
+        activity: false,
+        offline_order: false,
+        boost_activity: false,
+        boost_order: false,
+        complaint: false,
+        community_order: false,
+        ext_info: false,
+        group: false,
+        member_code: false,
+        recharge: false,
+        ziti_order: false,
+        //是否开启积分链接
+        score_menu: false,
+        share_enable: false,
+        memberinfo_enable: false
+      },
+      imgUrl: "",
+      // 积分商城菜单
+      score_menu_open: false,
+      // 是否显示隐私协议
+      showPrivacy: false,
+      showTimes: 0,
+      marketingMenus: []
+    };
+  }
+
+  config = {
+    navigationBarTitleText: "",
+    enablePullDownRefresh: true,
+    onReachBottomDistance: 50,
+    backgroundTextStyle: "dark",
+    navigationStyle: "custom"
+  };
+
+  componentWillMount() {
+    this.fetch();
+    this.getSetting();
+    // this.getWheel();
+    // this.fetchBanner();
+    // this.fetchRedirect();
+
+    // this.getSettingCenter();
+    // this.getConfigPointitem();
+  }
+
+  async onShareAppMessage() {
+    const {
+      share_title = "震惊！这店绝了！",
+      share_pic_wechatapp
+    } = await req.get(`/memberCenterShare/getInfo`);
+    const { logo } = await req.get(
+      `/distributor/getDistributorInfo?distributor_id=0`
+    );
+    return {
+      title: share_title,
+      imageUrl: share_pic_wechatapp || logo,
+      path: "/pages/index"
+    };
+  }
+
+  onPullDownRefresh() {
+    this.fetch();
+  }
+
+  onRefresh() {
+    Taro.showNavigationBarLoading();
+    //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
+    Taro.showLoading({
+      title: "刷新中..."
+    });
+  }
+
+  navigateTo = navigateTo;
+
+  async fetch() {
+    if (S.getAuthToken()) {
+      const [
+        salesPerson,
+        orderCount,
+        { list: memberDiscount },
+        assets,
+        wheelData
+      ] = await Promise.all([
+        api.member.getSalesperson(),
+        api.trade.getCount(),
+        api.vip.getList(),
+        api.member.memberAssets(),
+        // 大转盘
+        api.wheel.getTurntableconfig()
+      ]);
+      const { memberData } = this.props;
+      this.setState({
+        salespersonData: salesPerson,
+        orderCount,
+        memberDiscount:
+          memberDiscount.length > 0
+            ? memberDiscount[memberDiscount.length - 1].privileges.discount_desc
+            : "",
+        memberAssets: {
+          ...assets,
+          deposit: memberData.deposit
+        },
+        turntable_open: wheelData.turntable_open
+      });
+
+      await S.getMemberInfo();
+    }
+    Taro.stopPullDownRefresh();
+  }
+
+  async getSetting() {
+    const [bannerSetting, menuSetting, pointItemSetting] = await Promise.all([
+      // 会员中心banner
+      await api.shop.getPageParamsConfig({
+        page_name: "member_center_setting"
+      }),
+      // 菜单自定义
+      await api.shop.getPageParamsConfig({
+        page_name: "member_center_menu_setting"
+      }),
+      // 积分商城
+      await api.pointitem.getPointitemSetting()
+    ]);
+
+    this.setState({
+      bannerSetting: bannerSetting.list[0].params.data,
+      menuSetting: menuSetting.list[0].params.data,
+      score_menu_open: pointItemSetting.entrance.mobile_openstatus
+    });
+  }
+
+  onChangeLoginSuccess = () => {
+    this.fetch();
+  };
+
+  // 获取积分个人信息跳转
+  async fetchRedirect() {
+    const pathparams = qs.stringify({
+      template_name: platformTemplateName,
+      version: "v1.0.1",
+      page_name: "member_center_redirect_setting"
+    });
+    const url = transformPlatformUrl(
+      `/alipay/pageparams/setting?${pathparams}`
+    );
+    const { list = [] } = await req.get(url);
+    if (list[0].params) {
+      this.setState({
+        redirectInfo: list[0].params
+      });
+    }
+  }
+
+  handleClickRecommend = async () => {
+    const { info } = this.state;
+    if (!info.is_open_popularize) {
+      Taro.showToast({
+        title: "未开启推广",
+        icon: "none"
+      });
+      return;
+    }
+
+    if (info.is_open_popularize && !info.is_promoter) {
+      await api.member.promoter();
+    }
+
+    Taro.navigateTo({
+      url: "/pages/member/recommend"
+    });
+  };
+
+  beDistributor = async () => {
+    const { is_promoter } = this.props.memberData;
+    if (is_promoter) {
+      Taro.navigateTo({
+        url: "/marketing/pages/distribution/index"
+      });
+      return;
+    }
+    const { confirm } = await Taro.showModal({
+      title: "邀请推广",
+      content: "确定申请成为推广员？",
+      showCancel: true,
+      cancel: "取消",
+      confirmText: "确认",
+      confirmColor: "#0b4137"
+    });
+    if (!confirm) return;
+
+    const res = await api.distribution.become();
+    const { status } = res;
+    if (status) {
+      Taro.showModal({
+        title: "恭喜",
+        content: "已成为推广员",
+        showCancel: false,
+        confirmText: "好"
+      });
+    }
+  };
+
+  // 订单查看
+  async handleTradeClick(type) {
+    Taro.navigateTo({
+      url: `/subpage/pages/trade/list?status=${type}`
+    });
+  }
+
+  // 积分查看
+  handleClickPoint = () => {
+    const { redirectInfo } = this.state;
+    if (redirectInfo.data && redirectInfo.data.point_url_is_open) {
+      Taro.navigateToMiniProgram({
+        appId: redirectInfo.data.point_app_id,
+        path: redirectInfo.data.point_page
+      });
+    }
+  };
+
+  handleClickInfo = () => {
+    const { redirectInfo } = this.state;
+    if (redirectInfo.data && redirectInfo.data.info_url_is_open) {
+      Taro.navigateToMiniProgram({
+        appId: redirectInfo.data.info_app_id,
+        path: redirectInfo.data.info_page
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/marketing/pages/member/userinfo"
+      });
+    }
+  };
+
+  handleClickWxOAuth(fn, need = true) {
+    if (!S.getAuthToken()) {
+      showToast("请登录后再操作");
+      return;
+    }
+    if (this.state.showTimes >= 1) {
+      if (need) {
+        fn && fn();
+      }
+    } else {
+      const { avatar, username } = this.props.memberData.memberInfo;
+      if (avatar && username) {
+        if (need) {
+          fn && fn();
+        }
+      } else {
+        this.setState({
+          showPrivacy: true
+        });
+      }
+    }
+  }
+
+  renderMarketingNavs() {
+    const { memberData } = this.props
+    const { score_menu_open, salespersonData, menuSetting } = this.state;
+    const { is_open_popularize, is_promoter } = memberData;
+    const {
+      group,
+      community_order,
+      boost_activity,
+      boost_order,
+      offline_order,
+      complaint,
+      activity
+    } = menuSetting;
+    let navs = [];
+    if (is_open_popularize && isWeixin) {
+      navs.push({
+        title: is_promoter ? "我要推广" : "推广管理",
+        icon: "../../assets/imgs/store.png",
+        action: this.beDistributor
+      });
+    }
+
+    if (group && isWeixin) {
+      navs.push({
+        title: "我的拼团",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/marketing/pages/member/group-list");
+        }
+      });
+    }
+
+    if (community_order && isWeixin) {
+      navs.push({
+        title: "我的社区团购",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/groupBy/pages/orderList/index");
+        }
+      });
+    }
+
+    if (boost_activity && isWeixin) {
+      navs.push({
+        title: "助力活动",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/boost/pages/home/index");
+        }
+      });
+    }
+
+    if (boost_order && isWeixin) {
+      navs.push({
+        title: "助力订单",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/boost/pages/order/index");
+        }
+      });
+    }
+
+    if (offline_order) {
+      navs.push({
+        title: "线下订单关联",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/others/pages/bindOrder/index");
+        }
+      });
+    }
+
+    if (complaint && salespersonData && salespersonData.distributor) {
+      navs.push({
+        title: "投诉记录",
+        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+        action: () => {
+          this.navigateTo("/marketing/pages/member/complaint-record");
+        }
+      });
+    }
+
+    if (activity) {
+      navs.push({
+        title: "活动预约",
+        icon: "../../assets/imgs/buy.png",
+        action: () => {
+          this.navigateTo("/marketing/pages/member/item-activity");
+        }
+      });
+    }
+
+    if (score_menu_open) {
+      navs.push({
+        title: `${getPointName()}商城`,
+        icon: "../../assets/imgs/score.png",
+        action: () => {
+          this.navigateTo("/pointitem/pages/list");
+        }
+      });
+    }
+
+    return (
+      <View>
+        {navs.map((nav, index) => (
+          <SpCell
+            title={nav.title}
+            isLink
+            border
+            img={nav.icon}
+            onClick={() =>
+              this.handleClickWxOAuth(() => {
+                nav.action();
+              })
+            }
+          ></SpCell>
+        ))}
+      </View>
+    );
+  }
+
+  renderNormalNavs() {
+    const { menuSetting } = this.state
+    const { memberinfo_enable } = menuSetting;
+    let navs = [];
+    navs.push({
+      title: "地址管理",
+      action: () => {
+        this.navigateTo("/marketing/pages/member/address");
+      }
+    });
+    if (memberinfo_enable) {
+      navs.push({
+        title: "个人信息",
+        action: this.handleClickInfo
+      });
+    }
+    if (Taro.getEnv() == "WEB") {
+      navs.push({
+        title: "设置",
+        action: () => {
+          this.navigateTo("/marketing/pages/member/setting");
+        }
+      });
+    }
+
+    return (
+      <View>
+        {navs.map((nav, index) => (
+          <SpCell
+            title={nav.title}
+            isLink
+            border
+            onClick={() => this.handleClickWxOAuth(nav.action)}
+          ></SpCell>
+        ))}
+      </View>
+    );
+  }
+
+  render() {
+    const { colors, memberData } = this.props;
+    const {
+      score_menu_open,
+      gradeInfo,
+      orderCount,
+      memberDiscount,
+      memberAssets,
+      isOpenPopularize,
+      salespersonData,
+      turntable_open,
+      bannerSetting,
+      menuSetting,
+      rechargeStatus,
+      showPrivacy,
+      showTimes
+    } = this.state;
+    let memberInfo = null,
+      vipgrade = null;
+    if (memberData) {
+      memberInfo = memberData.memberInfo;
+      vipgrade = memberData.vipgrade;
+    }
+
+    return (
+      <View className="page-member-index" style={styleNames(getThemeStyle())}>
+        <View className="page-member-header">
+          {S.getAuthToken() && (
+            <View className="header-con">
+              <View className="user-info">
+                <View
+                  className="user-info__hd"
+                  onClick={() => {
+                    this.handleClickWxOAuth(this.handleClickInfo.bind(this));
+                  }}
+                >
+                  <Image
+                    className="avatar-img"
+                    src={memberInfo.avatar || userIcon}
+                    mode="widthFix"
+                  />
+                  <View className="avatar-info">
+                    <View className="nickname">
+                      Hi, {memberInfo.username || memberInfo.mobile}
+                    </View>
+                    <View className="gradename">{`${
+                      !vipgrade.is_vip
+                        ? memberInfo.gradeInfo.grade_name
+                        : vipgrade.grade_name || "会员"
+                    }`}</View>
+                  </View>
+                </View>
+
+                <View className="user-info__ft">
+                  {menuSetting.member_code && (
+                    <Text
+                      className="iconfont icon-qrcode"
+                      onClick={() => {
+                        this.handleClickWxOAuth(
+                          this.navigateTo.bind(
+                            this,
+                            "/marketing/pages/member/member-code"
+                          )
+                        );
+                      }}
+                    ></Text>
+                  )}
+                </View>
+              </View>
+
+              <View className="member-assets">
+                <View
+                  className="member-assets-item"
+                  onClick={() => {
+                    this.handleClickWxOAuth(
+                      this.navigateTo.bind(
+                        this,
+                        "/marketing/pages/member/coupon"
+                      )
+                    );
+                  }}
+                >
+                  <View className="member-assets__label">优惠券</View>
+                  <View className="member-assets__value">
+                    {(memberAssets && memberAssets.discount_total_count) || 0}
+                  </View>
+                </View>
+
+                <View
+                  className="member-assets-item"
+                  onClick={() => {
+                    this.handleClickWxOAuth(this.handleClickPoint.bind(this));
+                  }}
+                >
+                  <View className="member-assets__label">
+                    {getPointName()}
+                  </View>
+                  <View className="member-assets__value">
+                    {(memberAssets && memberAssets.point_total_count) || 0}
+                  </View>
+                </View>
+
+                {rechargeStatus && (
+                  <View
+                    className="member-assets-item"
+                    onClick={() => {
+                      this.handleClickWxOAuth(
+                        this.navigateTo.bind(
+                          this,
+                          "/others/pages/recharge/index"
+                        )
+                      );
+                    }}
+                  >
+                    <View className="member-assets__label">储值</View>
+                    <View className="member-assets__value">
+                      {((memberAssets && memberAssets.deposit) || 0) / 100}
+                    </View>
+                  </View>
+                )}
+
+                <View
+                  className="member-assets-item"
+                  onClick={() => {
+                    this.handleClickWxOAuth(
+                      this.navigateTo.bind(this, "/pages/member/item-fav")
+                    );
+                  }}
+                >
+                  <View className="member-assets__label">收藏</View>
+                  <View className="member-assets__value">
+                    {(memberAssets && memberAssets.fav_total_count) || 0}
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+
+          {!S.getAuthToken() && (
+            <View className="header-con">
+              <Image className="user-icon" src={userIcon} mode="widthFix" />
+              <SpLogin onChange={this.onChangeLoginSuccess.bind(this)}>
+                <View className="unlogin">请登录</View>
+              </SpLogin>
+            </View>
+          )}
+        </View>
+
+        {vipgrade &&
+          (vipgrade.is_open || (!vipgrade.is_open && vipgrade.is_vip)) &&
+          memberDiscount !== "" && (
+            <View
+              className="member-card"
+              onClick={() => {
+                this.handleClickWxOAuth(
+                  this.navigateTo.bind(this, "/subpage/pages/vip/vipgrades")
+                );
+              }}
+            >
+              {vipgrade.is_open && !vipgrade.is_vip && (
+                <View className="vip-btn">
+                  <View className="vip-btn__title">
+                    开通VIP会员 <Text className="icon-arrowRight"></Text>
+                  </View>
+                  {memberDiscount && (
+                    <View className="vip-btn__desc">
+                      即可享受最高{memberDiscount}折会员优惠
+                    </View>
+                  )}
+                </View>
+              )}
+              {vipgrade.is_vip && (
+                <View className="grade-info">
+                  <View className="member-card-title">
+                    <Text className="vip-sign">
+                      {vipgrade.vip_type === "svip" ? (
+                        <Text>SVIP</Text>
+                      ) : (
+                        <Text>VIP</Text>
+                      )}
+                    </Text>
+                    会员卡
+                  </View>
+                  <View className="member-card-no">
+                    NO. {memberInfo.user_card_code}
+                  </View>
+                  <View className="member-card-period">
+                    {vipgrade.end_time} 到期
+                  </View>
+                </View>
+              )}
+              {vipgrade.is_vip && (
+                <Image
+                  className="member-info-bg"
+                  src={vipgrade.background_pic_url}
+                  mode="widthFix"
+                />
+              )}
+              {vipgrade.is_open && !vipgrade.is_vip && (
+                <Image
+                  className="member-info-bg"
+                  src={memberInfo.gradeInfo.background_pic_url}
+                  mode="widthFix"
+                />
+              )}
+            </View>
+          )}
+
+        {/* {is_open_official_account === 1 && (
+          <View className="page-member-section">
+            <AccountOfficial
+              onHandleError={this.handleOfficialError.bind(this)}
+              onClick={this.handleOfficialClose.bind(this)}
+              isClose={false}
+            />
+          </View>
+        )} */}
+
+        <View className="page-member-section order-box">
+          <SpCell
+            title="订单"
+            isLink
+            value="全部订单"
+            onClick={() =>
+              this.handleClickWxOAuth(this.handleTradeClick.bind(this))
+            }
+          ></SpCell>
+
+          {menuSetting.ziti_order && (
+            <View
+              className="member-trade__ziti"
+              onClick={() => {
+                this.handleClickWxOAuth(
+                  this.navigateTo.bind(
+                    this,
+                    "/subpage/pages/trade/customer-pickup-list"
+                  )
+                );
+              }}
+            >
+              <View className="view-flex-item">
+                <View className="member-trade__ziti-title">自提订单</View>
+                <View className="member-trade__ziti-desc">
+                  您有
+                  <Text className="mark">
+                    {(orderCount && orderCount.normal_payed_daiziti) || 0}
+                  </Text>
+                  个等待自提的订单
+                </View>
+              </View>
+              <View className="icon-arrowRight item-icon-go"></View>
+            </View>
+          )}
+
+          <View className="member-trade">
+            <View
+              className="member-trade__item"
+              onClick={() =>
+                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 5))
+              }
+            >
+              <View className="icon-wallet">
+                {orderCount && orderCount.normal_notpay_notdelivery > 0 && (
+                  <View className="trade-num">
+                    {orderCount.normal_notpay_notdelivery}
+                  </View>
+                )}
+              </View>
+              <Text>待支付</Text>
+            </View>
+            <View
+              className="member-trade__item"
+              onClick={() => {
+                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 1));
+              }}
+            >
+              <View className="icon-delivery">
+                {orderCount && orderCount.normal_payed_notdelivery > 0 && (
+                  <View className="trade-num">
+                    {orderCount.normal_payed_notdelivery}
+                  </View>
+                )}
+              </View>
+              <Text>待收货</Text>
+            </View>
+            <View
+              className="member-trade__item"
+              onClick={() => {
+                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
+              }}
+            >
+              <View className="icon-office-box">
+                {orderCount && orderCount.normal_payed_delivered > 0 && (
+                  <View className="trade-num">
+                    {orderCount.normal_payed_delivered}
+                  </View>
+                )}
+              </View>
+              <Text>已完成</Text>
+            </View>
+            {orderCount && orderCount.rate_status && (
+              <View
+                className="member-trade__item"
+                onClick={() => {
+                  this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
+                }}
+              >
+                <View className="icon-message"></View>
+                <Text className="trade-status">待评价</Text>
+              </View>
+            )}
+            <View
+              className="member-trade__item"
+              onClick={() =>
+                this.handleClickWxOAuth(
+                  this.navigateTo.bind(this, "/subpage/pages/trade/after-sale")
+                )
+              }
+            >
+              <View className="icon-repeat">
+                {orderCount && orderCount.aftersales > 0 && (
+                  <View className="trade-num">{orderCount.aftersales}</View>
+                )}
+              </View>
+              <Text>售后</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 菜单 */}
+        <View className="page-member-section">
+          {this.renderMarketingNavs()}
+        </View>
+
+        {/* 菜单 */}
+        <View className="page-member-section">
+          {Taro.getEnv() !== "WEB" && menuSetting.share_enable && (
+            <SpCell title="我要分享" isLink>
+              <Button className="btn-share" open-type="share"></Button>
+            </SpCell>
+          )}
+          {this.renderNormalNavs()}
+        </View>
+
+        {/* 大转盘 */}
+        {turntable_open === "1" && (
+          <View
+            className="wheel-to"
+            onClick={() =>
+              this.handleClickWxOAuth(
+                this.navigateTo.bind(this, "/marketing/pages/wheel/index")
+              )
+            }
+          >
+            <Image src={`${process.env.APP_IMAGE_CDN}/wheel_modal_icon.png`} />
+          </View>
+        )}
+
+        <TabBar />
+
+        <SpFloatPrivacy
+          isOpened={showPrivacy}
+          onClose={() =>
+            this.setState({
+              showPrivacy: false,
+              showTimes: this.state.showTimes + 1
+            })
+          }
+        />
+      </View>
+    );
+  }
+}
diff --git a/src/pages/member/index copy.scss b/src/pages/member/index copy.scss
new file mode 100644
index 000000000..f1cc418ab
--- /dev/null
+++ b/src/pages/member/index copy.scss	
@@ -0,0 +1,420 @@
+.page-member-index {
+  padding-bottom: 140px;
+  .icon-daipingjia:before {
+    content: "\e607";
+  }  
+  .img-class{
+    width:100%;
+  }
+  .page-member-header {
+    // padding: 180px 0 60px;
+    margin-bottom: 20px;
+    // color: #fff;
+    background: var(--color-marketing);
+    height:400px;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    &.no-card {
+      padding-bottom: 30px;
+    }
+    .user-icon {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      margin-bottom: 10px;
+    }
+  }
+  .header-con {
+    width: 100%;
+    padding: 0 40px;
+    text-align: center;
+  }
+  .page-member-section {
+    margin: 0 20px 20px;
+    background: #fff;
+    overflow: hidden;
+    box-shadow: 0 0 15px rgba(0,0,0,0.1);
+  }
+  .user-info {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    &__hd {
+      display: flex;
+      align-items: center;
+      .avatar-img {
+        display: block;
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        margin-right: 4px;
+      }
+      .nickname {
+        font-size: 28px;
+        margin-bottom: 6px;
+        color: #fff;
+      }
+      .gradename {
+        color: #fff;
+        background: linear-gradient(to right bottom, #fca280, #e75fa9);
+        border-radius: 50px;
+        text-align: center;
+        font-size: 24px;
+      }
+    }
+    &__ft {
+      // width: 100px;
+    }
+    
+    .icon-qrcode {
+      font-size: 40px;
+      margin-top: 20px;
+      color: #fff;
+      margin-right: 20px;
+      display: block;
+    }
+    .icon-setting {
+      margin-left: 10px;
+      font-size: 40px;
+      color: #fff;
+    }
+  }
+
+  .member-assets {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    &-item {
+      flex: 1;
+      color: #fff;
+    }
+    .member-assets__label {
+      font-size: 24px;
+      opacity: 0.7;
+    }
+    .member-assets__value {
+      font-size: 32px;
+      font-family: 'PingFang SC';
+    }
+  }
+  
+  .avatar-placeholder {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+    color: #999;
+    background: #fff;
+    overflow: hidden;
+    &::before, &::after {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background: $color-brand-accent-light;
+      content: "";
+    }
+    &::before {
+      top: 24px;
+      width: 40px;
+      height: 40px;
+    }
+    &::after {
+      top: 68px;
+      width: 100px;
+      height: 100px;
+    }
+  }
+  
+  .unlogin {
+    padding: 0 20px;
+    height: 48px;
+    line-height: 48px;
+    border-radius: 48px;
+    background: $color-brand-primary;
+    color: #FFFFFF;
+    font-size: 24px;
+  }
+  
+
+  
+  .member-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: -80px 20px 20px;
+    height: 24vw;
+    z-index: 1;
+    overflow: hidden;
+    border-radius: 16px 16px 0 0;
+    .member-info-bg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0,0,0,0.6);
+        content: "";
+        z-index: 10;
+      }
+    }
+    .vip-btn {
+      position: relative;
+      color: #f4d09e;
+      z-index: 20;
+      text-align: center;
+      &__title {
+        font-size: 34px;
+      }
+      &__desc {
+        font-size: 24px;
+      }
+    }
+    .grade-info {
+      position: relative;
+      padding: 0 40px;
+      width: 100%;
+      color: #e8bd7f;
+      z-index: 30;
+      text-align: right;
+      .member-card-no {
+        padding-top: 20px;
+        font-size: 22px;
+        letter-spacing: 1px;
+      }
+      .member-card-period {
+        font-size: 20px;
+        color: #ccc;
+      }
+      .renewals-btn {
+        margin-left: 20px;
+        padding: 0 30px;
+        border: 1px solid #e8bd7f;
+        border-radius: 60px;
+        font-size: 24px;
+        line-height: 50px;
+      }
+      .member-card-title {
+        font-size: 30px;
+        color: #fcdda5;
+      }
+      .vip-sign {
+        display: inline-block;
+        padding: 0 10px;
+        margin-right: 10px;
+        font-size: 22px;
+        border: 1px solid #e8bd7f;
+      }
+    }
+  }
+  
+  .member-qrcode {
+    padding-left: 20px;
+    font-size: 28px;
+    color: #555;
+    [class^="icon-"] {
+      font-size: 32px;
+    }
+  }
+  
+  .member {
+    &-box {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      padding: 30px 0;
+      &.identity {
+        padding: 0 60px;
+        .member-info {
+          width: 115px;
+          height: 115px;
+          margin-bottom: 0;
+          margin-right: 30px;
+        }
+        .name {
+          font-size: 36px;
+          margin-bottom: 10px;
+        }
+        .amount {
+          font-size: 26px;
+        }
+      }
+    }
+    &-info {
+      display: flex;
+      align-items: center;
+      width: 85vw;
+      height: 45vw;
+      position: relative;
+      padding: 0 40px;
+      z-index: 1;
+      background: #a2564c;
+      color: #fff;
+      border-radius: 20px;
+      box-shadow: 0 0 20px rgba(0,0,0,0.3);
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0,0,0,0.4);
+        border-radius: 20px;
+        content: ""
+      }
+      .member-info-bg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 20px;
+      }
+    }
+  }
+  .member {
+    &__scroll {
+      @include page-scroll($navigate-height, $tabbar-height);
+    }
+  }
+  .important-box {
+    position: relative;
+    padding: 30px;
+    margin: 0 30px;
+    .view-flex-item {
+      color: #666;
+    }
+    .icon-img {
+      width: 80px;
+      height: 80px;
+    }
+  }
+  .order-box {
+    .icon-ziti {
+      margin-right: 10px;
+      font-size: 60px;
+      color: #999;
+    }
+    .member-trade__ziti {
+      display: flex;
+      align-items: center;
+      padding: 20px 30px;
+      margin: 20px;
+      background: #f8f8f8;
+      border: 1px solid #efefef;
+      .member-trade__list-btn{
+        width: 150px;
+      }
+      .member-trade__ziti-title {
+        font-size: 28px;
+      }
+      .member-trade__ziti-desc {
+        font-size: 24px;
+        color: #666;
+      }
+    }
+    .member-trade {
+      display: flex;
+      padding: 30px 20px 30px 20px;
+      font-size: 26px;
+      .icons-status__img {
+        width: 44px;
+        height: 44px;
+        margin-bottom: 28px;
+      }
+      .member-trade__item {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        font-size: 24px;
+        color: #333;
+      }
+      [class^="icon-"] {
+        position: relative;
+        font-size: 56px;
+        margin-bottom: 10px;
+        color: #666;
+      }
+      .trade-num {
+        position: absolute;
+        top: -10px;
+        right: -15px;
+        display:inline-block;
+        padding: 4px 10px;
+        box-sizing: content-box;
+        min-width: 16px;
+        border-radius: 24px;
+        background-color:#e64340;
+        color:#fff;
+        line-height: 1.2;
+        text-align:center;
+        font-size: 24px;
+        vertical-align:middle;
+        font-family: Arial;
+      }
+    }
+  }
+  .address-box {
+    padding: 30px 20px;
+    img, image {
+      width: 28px;
+      height: 28px;
+      vertical-align: middle;
+      margin-left: 5px;
+    }
+  }
+  .gray {
+    color: #999;
+  }
+  .btn-share {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    margin: 0;
+    text-align: inherit;
+    background: transparent;
+    line-height: inherit;
+    border: none;
+    &::after {
+      content: none;
+    }
+  }
+  .card-img{
+    width:45px;
+    height:45px;
+  }
+  .wheel-to{
+    position: fixed;
+    right: 5px;
+    bottom: 180px;
+    z-index: $z-index-toast;
+    .taro-img, img, Image,image{
+      height: 100px;
+      width: 100px;
+    }
+  }
+
+}
+
diff --git a/src/pages/member/index.js b/src/pages/member/index.js
index c5b11c74a..ee87a5952 100644
--- a/src/pages/member/index.js
+++ b/src/pages/member/index.js
@@ -6,9 +6,10 @@ import {
   SpCell,
   AccountOfficial,
   SpLogin,
+  SpImage,
+  SpPrice,
   SpFloatPrivacy
 } from "@/components";
-// import ExclusiveCustomerService from './comps/exclusive-customer-service'
 import api from "@/api";
 import S from "@/spx";
 import req from "@/api/req";
@@ -27,821 +28,958 @@ import { transformPlatformUrl, platformTemplateName } from "@/utils/platform";
 import qs from "qs";
 import userIcon from "@/assets/imgs/user-icon.png";
 import "./index.scss";
+import { useEffect } from "react";
 
-@connect(
-  ({ colors, member }) => ({
-    colors: colors.current,
-    memberData: member.member
-  }),
-  dispatch => ({
-    onFetchFavs: favs => dispatch({ type: "member/favs", payload: favs })
-  })
-)
-@withLogin()
-export default class MemberIndex extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      turntable_open: 0,
-      redirectInfo: {},
-      orderCount: null,
-      memberDiscount: null,
-      isOpenPopularize: false,
-      salespersonData: null,
-      memberAssets: null,
-      // 是否开启储值
-      rechargeStatus: true,
-      // banner配置
-      bannerSetting: {},
-      // 菜单配置
-      menuSetting: {
-        activity: false,
-        offline_order: false,
-        boost_activity: false,
-        boost_order: false,
-        complaint: false,
-        community_order: false,
-        ext_info: false,
-        group: false,
-        member_code: false,
-        recharge: false,
-        ziti_order: false,
-        //是否开启积分链接
-        score_menu: false,
-        share_enable: false,
-        memberinfo_enable: false
-      },
-      imgUrl: "",
-      // 积分商城菜单
-      score_menu_open: false,
-      // 是否显示隐私协议
-      showPrivacy: false,
-      showTimes: 0,
-      marketingMenus: []
-    };
-  }
+// @connect(
+//   ({ colors, member }) => ({
+//     colors: colors.current,
+//     memberData: member.member
+//   }),
+//   dispatch => ({
+//     onFetchFavs: favs => dispatch({ type: "member/favs", payload: favs })
+//   })
+// )
+//   @withLogin()
 
-  config = {
-    navigationBarTitleText: "",
-    enablePullDownRefresh: true,
-    onReachBottomDistance: 50,
-    backgroundTextStyle: "dark",
-    navigationStyle: "custom"
-  };
+function MemberIndex( props ) {
+  // const []
+  const [menu, setMenu] = useState({
+    activity: false,
+    offline_order: false,
+    boost_activity: false,
+    boost_order: false,
+    complaint: false,
+    community_order: false,
+    ext_info: false,
+    group: false,
+    member_code: false,
+    recharge: false,
+    ziti_order: false,
+    score_menu: false,
+    share_enable: false,
+    memberinfo_enable: false
+  });
 
-  componentWillMount() {
-    this.fetch();
-    this.getSetting();
-    // this.getWheel();
-    // this.fetchBanner();
-    // this.fetchRedirect();
-
-    // this.getSettingCenter();
-    // this.getConfigPointitem();
-  }
-
-  async onShareAppMessage() {
-    const {
-      share_title = "震惊！这店绝了！",
-      share_pic_wechatapp
-    } = await req.get(`/memberCenterShare/getInfo`);
-    const { logo } = await req.get(
-      `/distributor/getDistributorInfo?distributor_id=0`
-    );
-    return {
-      title: share_title,
-      imageUrl: share_pic_wechatapp || logo,
-      path: "/pages/index"
-    };
-  }
-
-  onPullDownRefresh() {
-    this.fetch();
-  }
-
-  onRefresh() {
-    Taro.showNavigationBarLoading();
-    //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
-    Taro.showLoading({
-      title: "刷新中..."
+  useEffect( async () => {
+    await api.member.getSalesperson()
+    await api.trade.getCount()
+    await api.vip.getList()
+    await api.member.memberAssets()
+    // 大转盘
+    await api.wheel.getTurntableconfig()
+  }, [] )
+  
+  useEffect( async () => {
+    // 菜单配置
+    const res = await api.shop.getPageParamsConfig({
+      page_name: "member_center_menu_setting"
+    } )
+    setMenu({
+      ...menu,
+      ...res.list[0].params.data
     });
-  }
-
-  navigateTo = navigateTo;
-
-  async fetch() {
-    if (S.getAuthToken()) {
-      const [
-        salesPerson,
-        orderCount,
-        { list: memberDiscount },
-        assets,
-        wheelData
-      ] = await Promise.all([
-        api.member.getSalesperson(),
-        api.trade.getCount(),
-        api.vip.getList(),
-        api.member.memberAssets(),
-        // 大转盘
-        api.wheel.getTurntableconfig()
-      ]);
-      const { memberData } = this.props;
-      this.setState({
-        salespersonData: salesPerson,
-        orderCount,
-        memberDiscount:
-          memberDiscount.length > 0
-            ? memberDiscount[memberDiscount.length - 1].privileges.discount_desc
-            : "",
-        memberAssets: {
-          ...assets,
-          deposit: memberData.deposit
-        },
-        turntable_open: wheelData.turntable_open
-      });
-
-      await S.getMemberInfo();
-    }
-    Taro.stopPullDownRefresh();
-  }
-
-  async getSetting() {
-    const [bannerSetting, menuSetting, pointItemSetting] = await Promise.all([
-      // 会员中心banner
-      await api.shop.getPageParamsConfig({
-        page_name: "member_center_setting"
-      }),
-      // 菜单自定义
-      await api.shop.getPageParamsConfig({
-        page_name: "member_center_menu_setting"
-      }),
-      // 积分商城
-      await api.pointitem.getPointitemSetting()
-    ]);
-
-    this.setState({
-      bannerSetting: bannerSetting.list[0].params.data,
-      menuSetting: menuSetting.list[0].params.data,
-      score_menu_open: pointItemSetting.entrance.mobile_openstatus
-    });
-  }
-
-  onChangeLoginSuccess = () => {
-    this.fetch();
-  };
-
-  // 获取积分个人信息跳转
-  async fetchRedirect() {
-    const pathparams = qs.stringify({
-      template_name: platformTemplateName,
-      version: "v1.0.1",
-      page_name: "member_center_redirect_setting"
-    });
-    const url = transformPlatformUrl(
-      `/alipay/pageparams/setting?${pathparams}`
-    );
-    const { list = [] } = await req.get(url);
-    if (list[0].params) {
-      this.setState({
-        redirectInfo: list[0].params
-      });
-    }
-  }
-
-  handleClickRecommend = async () => {
-    const { info } = this.state;
-    if (!info.is_open_popularize) {
-      Taro.showToast({
-        title: "未开启推广",
-        icon: "none"
-      });
-      return;
-    }
-
-    if (info.is_open_popularize && !info.is_promoter) {
-      await api.member.promoter();
-    }
-
-    Taro.navigateTo({
-      url: "/pages/member/recommend"
-    });
-  };
-
-  beDistributor = async () => {
-    const { is_promoter } = this.props.memberData;
-    if (is_promoter) {
-      Taro.navigateTo({
-        url: "/marketing/pages/distribution/index"
-      });
-      return;
-    }
-    const { confirm } = await Taro.showModal({
-      title: "邀请推广",
-      content: "确定申请成为推广员？",
-      showCancel: true,
-      cancel: "取消",
-      confirmText: "确认",
-      confirmColor: "#0b4137"
-    });
-    if (!confirm) return;
-
-    const res = await api.distribution.become();
-    const { status } = res;
-    if (status) {
-      Taro.showModal({
-        title: "恭喜",
-        content: "已成为推广员",
-        showCancel: false,
-        confirmText: "好"
-      });
-    }
-  };
-
-  // 订单查看
-  async handleTradeClick(type) {
-    Taro.navigateTo({
-      url: `/subpage/pages/trade/list?status=${type}`
-    });
-  }
-
-  // 积分查看
-  handleClickPoint = () => {
-    const { redirectInfo } = this.state;
-    if (redirectInfo.data && redirectInfo.data.point_url_is_open) {
-      Taro.navigateToMiniProgram({
-        appId: redirectInfo.data.point_app_id,
-        path: redirectInfo.data.point_page
-      });
-    }
-  };
-
-  handleClickInfo = () => {
-    const { redirectInfo } = this.state;
-    if (redirectInfo.data && redirectInfo.data.info_url_is_open) {
-      Taro.navigateToMiniProgram({
-        appId: redirectInfo.data.info_app_id,
-        path: redirectInfo.data.info_page
-      });
-    } else {
-      Taro.navigateTo({
-        url: "/marketing/pages/member/userinfo"
-      });
-    }
-  };
-
-  handleClickWxOAuth(fn, need = true) {
-    if (!S.getAuthToken()) {
-      showToast("请登录后再操作");
-      return;
-    }
-    if (this.state.showTimes >= 1) {
-      if (need) {
-        fn && fn();
-      }
-    } else {
-      const { avatar, username } = this.props.memberData.memberInfo;
-      if (avatar && username) {
-        if (need) {
-          fn && fn();
-        }
-      } else {
-        this.setState({
-          showPrivacy: true
-        });
-      }
-    }
-  }
-
-  renderMarketingNavs() {
-    const { memberData } = this.props
-    const { score_menu_open, salespersonData, menuSetting } = this.state;
-    const { is_open_popularize, is_promoter } = memberData;
-    const {
-      group,
-      community_order,
-      boost_activity,
-      boost_order,
-      offline_order,
-      complaint,
-      activity
-    } = menuSetting;
-    let navs = [];
-    if (is_open_popularize && isWeixin) {
-      navs.push({
-        title: is_promoter ? "我要推广" : "推广管理",
-        icon: "../../assets/imgs/store.png",
-        action: this.beDistributor
-      });
-    }
-
-    if (group && isWeixin) {
-      navs.push({
-        title: "我的拼团",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/marketing/pages/member/group-list");
-        }
-      });
-    }
-
-    if (community_order && isWeixin) {
-      navs.push({
-        title: "我的社区团购",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/groupBy/pages/orderList/index");
-        }
-      });
-    }
-
-    if (boost_activity && isWeixin) {
-      navs.push({
-        title: "助力活动",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/boost/pages/home/index");
-        }
-      });
-    }
-
-    if (boost_order && isWeixin) {
-      navs.push({
-        title: "助力订单",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/boost/pages/order/index");
-        }
-      });
-    }
-
-    if (offline_order) {
-      navs.push({
-        title: "线下订单关联",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/others/pages/bindOrder/index");
-        }
-      });
-    }
-
-    if (complaint && salespersonData && salespersonData.distributor) {
-      navs.push({
-        title: "投诉记录",
-        icon: `${process.env.APP_IMAGE_CDN}/group.png`,
-        action: () => {
-          this.navigateTo("/marketing/pages/member/complaint-record");
-        }
-      });
-    }
-
-    if (activity) {
-      navs.push({
-        title: "活动预约",
-        icon: "../../assets/imgs/buy.png",
-        action: () => {
-          this.navigateTo("/marketing/pages/member/item-activity");
-        }
-      });
-    }
-
-    if (score_menu_open) {
-      navs.push({
-        title: `${getPointName()}商城`,
-        icon: "../../assets/imgs/score.png",
-        action: () => {
-          this.navigateTo("/pointitem/pages/list");
-        }
-      });
-    }
+  }, [])
 
+  const KtVipComps = () => {
     return (
-      <View>
-        {navs.map((nav, index) => (
-          <SpCell
-            title={nav.title}
-            isLink
-            border
-            img={nav.icon}
-            onClick={() =>
-              this.handleClickWxOAuth(() => {
-                nav.action();
-              })
-            }
-          ></SpCell>
-        ))}
+      <View className="kt-vip">
+        <View className="lf-con">
+          <View className='vip-title'>
+            开通VIP会员<Text className="iconfont icon-qianwang-01"></Text>
+          </View>
+          <View className='vip-desc'>即刻享受最高1折会员优惠</View>
+        </View>
+        <View className="rg-con">
+          <View className="vip-xf">
+            续费<Text className="iconfont icon-qianwang-01"></Text>
+          </View>
+          <View className="xs-price">限时特价</View>
+        </View>
       </View>
     );
   }
 
-  renderNormalNavs() {
-    const { menuSetting } = this.state
-    const { memberinfo_enable } = menuSetting;
-    let navs = [];
-    navs.push({
-      title: "地址管理",
-      action: () => {
-        this.navigateTo("/marketing/pages/member/address");
-      }
-    });
-    if (memberinfo_enable) {
-      navs.push({
-        title: "个人信息",
-        action: this.handleClickInfo
-      });
-    }
-    if (Taro.getEnv() == "WEB") {
-      navs.push({
-        title: "设置",
-        action: () => {
-          this.navigateTo("/marketing/pages/member/setting");
-        }
-      });
-    }
-
+  const ServiceComps = () => {
     return (
-      <View>
-        {navs.map((nav, index) => (
-          <SpCell
-            title={nav.title}
-            isLink
-            border
-            onClick={() => this.handleClickWxOAuth(nav.action)}
-          ></SpCell>
-        ))}
-      </View>
-    );
-  }
+      <View className="service-block">
+        <View className="block-hd">我的服务</View>
+        <View className="block-bd">
+          {
 
-  render() {
-    const { colors, memberData } = this.props;
-    const {
-      score_menu_open,
-      gradeInfo,
-      orderCount,
-      memberDiscount,
-      memberAssets,
-      isOpenPopularize,
-      salespersonData,
-      turntable_open,
-      bannerSetting,
-      menuSetting,
-      rechargeStatus,
-      showPrivacy,
-      showTimes
-    } = this.state;
-    let memberInfo = null,
-      vipgrade = null;
-    if (memberData) {
-      memberInfo = memberData.memberInfo;
-      vipgrade = memberData.vipgrade;
-    }
-
-    return (
-      <View className="page-member-index" style={styleNames(getThemeStyle())}>
-        <View className="page-member-header">
-          {S.getAuthToken() && (
-            <View className="header-con">
-              <View className="user-info">
-                <View
-                  className="user-info__hd"
-                  onClick={() => {
-                    this.handleClickWxOAuth(this.handleClickInfo.bind(this));
-                  }}
-                >
-                  <Image
-                    className="avatar-img"
-                    src={memberInfo.avatar || userIcon}
-                    mode="widthFix"
-                  />
-                  <View className="avatar-info">
-                    <View className="nickname">
-                      Hi, {memberInfo.username || memberInfo.mobile}
-                    </View>
-                    <View className="gradename">{`${
-                      !vipgrade.is_vip
-                        ? memberInfo.gradeInfo.grade_name
-                        : vipgrade.grade_name || "会员"
-                    }`}</View>
-                  </View>
-                </View>
-
-                <View className="user-info__ft">
-                  {menuSetting.member_code && (
-                    <Text
-                      className="iconfont icon-qrcode"
-                      onClick={() => {
-                        this.handleClickWxOAuth(
-                          this.navigateTo.bind(
-                            this,
-                            "/marketing/pages/member/member-code"
-                          )
-                        );
-                      }}
-                    ></Text>
-                  )}
-                </View>
-              </View>
-
-              <View className="member-assets">
-                <View
-                  className="member-assets-item"
-                  onClick={() => {
-                    this.handleClickWxOAuth(
-                      this.navigateTo.bind(
-                        this,
-                        "/marketing/pages/member/coupon"
-                      )
-                    );
-                  }}
-                >
-                  <View className="member-assets__label">优惠券</View>
-                  <View className="member-assets__value">
-                    {(memberAssets && memberAssets.discount_total_count) || 0}
-                  </View>
-                </View>
-
-                <View
-                  className="member-assets-item"
-                  onClick={() => {
-                    this.handleClickWxOAuth(this.handleClickPoint.bind(this));
-                  }}
-                >
-                  <View className="member-assets__label">
-                    {getPointName()}
-                  </View>
-                  <View className="member-assets__value">
-                    {(memberAssets && memberAssets.point_total_count) || 0}
-                  </View>
-                </View>
-
-                {rechargeStatus && (
-                  <View
-                    className="member-assets-item"
-                    onClick={() => {
-                      this.handleClickWxOAuth(
-                        this.navigateTo.bind(
-                          this,
-                          "/others/pages/recharge/index"
-                        )
-                      );
-                    }}
-                  >
-                    <View className="member-assets__label">储值</View>
-                    <View className="member-assets__value">
-                      {((memberAssets && memberAssets.deposit) || 0) / 100}
-                    </View>
-                  </View>
-                )}
-
-                <View
-                  className="member-assets-item"
-                  onClick={() => {
-                    this.handleClickWxOAuth(
-                      this.navigateTo.bind(this, "/pages/member/item-fav")
-                    );
-                  }}
-                >
-                  <View className="member-assets__label">收藏</View>
-                  <View className="member-assets__value">
-                    {(memberAssets && memberAssets.fav_total_count) || 0}
-                  </View>
-                </View>
-              </View>
-            </View>
-          )}
-
-          {!S.getAuthToken() && (
-            <View className="header-con">
-              <Image className="user-icon" src={userIcon} mode="widthFix" />
-              <SpLogin onChange={this.onChangeLoginSuccess.bind(this)}>
-                <View className="unlogin">请登录</View>
-              </SpLogin>
-            </View>
-          )}
-        </View>
-
-        {vipgrade &&
-          (vipgrade.is_open || (!vipgrade.is_open && vipgrade.is_vip)) &&
-          memberDiscount !== "" && (
-            <View
-              className="member-card"
-              onClick={() => {
-                this.handleClickWxOAuth(
-                  this.navigateTo.bind(this, "/subpage/pages/vip/vipgrades")
-                );
-              }}
-            >
-              {vipgrade.is_open && !vipgrade.is_vip && (
-                <View className="vip-btn">
-                  <View className="vip-btn__title">
-                    开通VIP会员 <Text className="icon-arrowRight"></Text>
-                  </View>
-                  {memberDiscount && (
-                    <View className="vip-btn__desc">
-                      即可享受最高{memberDiscount}折会员优惠
-                    </View>
-                  )}
-                </View>
-              )}
-              {vipgrade.is_vip && (
-                <View className="grade-info">
-                  <View className="member-card-title">
-                    <Text className="vip-sign">
-                      {vipgrade.vip_type === "svip" ? (
-                        <Text>SVIP</Text>
-                      ) : (
-                        <Text>VIP</Text>
-                      )}
-                    </Text>
-                    会员卡
-                  </View>
-                  <View className="member-card-no">
-                    NO. {memberInfo.user_card_code}
-                  </View>
-                  <View className="member-card-period">
-                    {vipgrade.end_time} 到期
-                  </View>
-                </View>
-              )}
-              {vipgrade.is_vip && (
-                <Image
-                  className="member-info-bg"
-                  src={vipgrade.background_pic_url}
-                  mode="widthFix"
-                />
-              )}
-              {vipgrade.is_open && !vipgrade.is_vip && (
-                <Image
-                  className="member-info-bg"
-                  src={memberInfo.gradeInfo.background_pic_url}
-                  mode="widthFix"
-                />
-              )}
-            </View>
-          )}
-
-        {/* {is_open_official_account === 1 && (
-          <View className="page-member-section">
-            <AccountOfficial
-              onHandleError={this.handleOfficialError.bind(this)}
-              onClick={this.handleOfficialClose.bind(this)}
-              isClose={false}
-            />
-          </View>
-        )} */}
-
-        <View className="page-member-section order-box">
-          <SpCell
-            title="订单"
-            isLink
-            value="全部订单"
-            onClick={() =>
-              this.handleClickWxOAuth(this.handleTradeClick.bind(this))
-            }
-          ></SpCell>
-
-          {menuSetting.ziti_order && (
-            <View
-              className="member-trade__ziti"
-              onClick={() => {
-                this.handleClickWxOAuth(
-                  this.navigateTo.bind(
-                    this,
-                    "/subpage/pages/trade/customer-pickup-list"
-                  )
-                );
-              }}
-            >
-              <View className="view-flex-item">
-                <View className="member-trade__ziti-title">自提订单</View>
-                <View className="member-trade__ziti-desc">
-                  您有
-                  <Text className="mark">
-                    {(orderCount && orderCount.normal_payed_daiziti) || 0}
-                  </Text>
-                  个等待自提的订单
-                </View>
-              </View>
-              <View className="icon-arrowRight item-icon-go"></View>
-            </View>
-          )}
-
-          <View className="member-trade">
-            <View
-              className="member-trade__item"
-              onClick={() =>
-                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 5))
-              }
-            >
-              <View className="icon-wallet">
-                {orderCount && orderCount.normal_notpay_notdelivery > 0 && (
-                  <View className="trade-num">
-                    {orderCount.normal_notpay_notdelivery}
-                  </View>
-                )}
-              </View>
-              <Text>待支付</Text>
-            </View>
-            <View
-              className="member-trade__item"
-              onClick={() => {
-                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 1));
-              }}
-            >
-              <View className="icon-delivery">
-                {orderCount && orderCount.normal_payed_notdelivery > 0 && (
-                  <View className="trade-num">
-                    {orderCount.normal_payed_notdelivery}
-                  </View>
-                )}
-              </View>
-              <Text>待收货</Text>
-            </View>
-            <View
-              className="member-trade__item"
-              onClick={() => {
-                this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
-              }}
-            >
-              <View className="icon-office-box">
-                {orderCount && orderCount.normal_payed_delivered > 0 && (
-                  <View className="trade-num">
-                    {orderCount.normal_payed_delivered}
-                  </View>
-                )}
-              </View>
-              <Text>已完成</Text>
-            </View>
-            {orderCount && orderCount.rate_status && (
-              <View
-                className="member-trade__item"
-                onClick={() => {
-                  this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
-                }}
-              >
-                <View className="icon-message"></View>
-                <Text className="trade-status">待评价</Text>
-              </View>
-            )}
-            <View
-              className="member-trade__item"
-              onClick={() =>
-                this.handleClickWxOAuth(
-                  this.navigateTo.bind(this, "/subpage/pages/trade/after-sale")
-                )
-              }
-            >
-              <View className="icon-repeat">
-                {orderCount && orderCount.aftersales > 0 && (
-                  <View className="trade-num">{orderCount.aftersales}</View>
-                )}
-              </View>
-              <Text>售后</Text>
-            </View>
-          </View>
-        </View>
-
-        {/* 菜单 */}
-        <View className="page-member-section">
-          {this.renderMarketingNavs()}
-        </View>
-
-        {/* 菜单 */}
-        <View className="page-member-section">
-          {Taro.getEnv() !== "WEB" && menuSetting.share_enable && (
-            <SpCell title="我要分享" isLink>
-              <Button className="btn-share" open-type="share"></Button>
-            </SpCell>
-          )}
-          {this.renderNormalNavs()}
-        </View>
-
-        {/* 大转盘 */}
-        {turntable_open === "1" && (
-          <View
-            className="wheel-to"
-            onClick={() =>
-              this.handleClickWxOAuth(
-                this.navigateTo.bind(this, "/marketing/pages/wheel/index")
-              )
-            }
-          >
-            <Image src={`${process.env.APP_IMAGE_CDN}/wheel_modal_icon.png`} />
-          </View>
-        )}
-
-        <TabBar />
-
-        <SpFloatPrivacy
-          isOpened={showPrivacy}
-          onClose={() =>
-            this.setState({
-              showPrivacy: false,
-              showTimes: this.state.showTimes + 1
-            })
           }
-        />
+        </View>
       </View>
     );
   }
+
+  return (
+    <View className="pages-member-index" style={styleNames(getThemeStyle())}>
+      <View
+        className="header-block"
+        style={styleNames({
+          "background-image": `url(${process.env.APP_IMAGE_CDN}/m_bg.png)`
+        })}
+      >
+        <View className="header-hd">
+          <SpImage className="usericon" src="default_user.png" />
+          <View>
+            <View className="username-wrap">
+              <Text className="username">获取昵称</Text>
+              <Text className="iconfont icon-erweima-01"></Text>
+            </View>
+            <View className="join-us">
+              <Text className="join-us-txt">加入我们?</Text>
+            </View>
+          </View>
+        </View>
+        <View className="header-bd">
+          <View className="bd-item">
+            <View className="bd-item-label">优惠券(张)</View>
+            <View className="bd-item-value">0</View>
+          </View>
+          <View className="bd-item">
+            <View className="bd-item-label">积分(分)</View>
+            <View className="bd-item-value">0</View>
+          </View>
+          <View className="bd-item">
+            <View className="bd-item-label">储值(¥)</View>
+            <View className="bd-item-value">
+              <SpPrice value={0} />
+            </View>
+          </View>
+          <View className="bd-item">
+            <View className="bd-item-label">收藏(个)</View>
+            <View className="bd-item-value">0</View>
+          </View>
+        </View>
+        <View className="header-ft"></View>
+      </View>
+
+      <KtVipComps />
+
+      <View className="order-block">
+        <View className="block-hd"></View>
+        <View className="block-bd"></View>
+      </View>
+
+      <ServiceComps />
+
+      <View className="help-block">
+        <View className="block-hd">帮助中心</View>
+        <View className="block-bd"></View>
+      </View>
+
+      <TabBar />
+    </View>
+  );
 }
+
+export default MemberIndex
+
+// export default class MemberIndex extends Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       turntable_open: 0,
+//       redirectInfo: {},
+//       orderCount: null,
+//       memberDiscount: null,
+//       isOpenPopularize: false,
+//       salespersonData: null,
+//       memberAssets: null,
+//       // 是否开启储值
+//       rechargeStatus: true,
+//       // banner配置
+//       bannerSetting: {},
+//       // 菜单配置
+//       menuSetting: {
+//         activity: false,
+//         offline_order: false,
+//         boost_activity: false,
+//         boost_order: false,
+//         complaint: false,
+//         community_order: false,
+//         ext_info: false,
+//         group: false,
+//         member_code: false,
+//         recharge: false,
+//         ziti_order: false,
+//         //是否开启积分链接
+//         score_menu: false,
+//         share_enable: false,
+//         memberinfo_enable: false
+//       },
+//       imgUrl: "",
+//       // 积分商城菜单
+//       score_menu_open: false,
+//       // 是否显示隐私协议
+//       showPrivacy: false,
+//       showTimes: 0,
+//       marketingMenus: []
+//     };
+//   }
+
+//   config = {
+//     navigationBarTitleText: "",
+//     enablePullDownRefresh: true,
+//     onReachBottomDistance: 50,
+//     backgroundTextStyle: "dark",
+//     navigationStyle: "custom"
+//   };
+
+//   componentWillMount() {
+//     this.fetch();
+//     this.getSetting();
+//     // this.getWheel();
+//     // this.fetchBanner();
+//     // this.fetchRedirect();
+
+//     // this.getSettingCenter();
+//     // this.getConfigPointitem();
+//   }
+
+//   async onShareAppMessage() {
+//     const {
+//       share_title = "震惊！这店绝了！",
+//       share_pic_wechatapp
+//     } = await req.get(`/memberCenterShare/getInfo`);
+//     const { logo } = await req.get(
+//       `/distributor/getDistributorInfo?distributor_id=0`
+//     );
+//     return {
+//       title: share_title,
+//       imageUrl: share_pic_wechatapp || logo,
+//       path: "/pages/index"
+//     };
+//   }
+
+//   onPullDownRefresh() {
+//     this.fetch();
+//   }
+
+//   onRefresh() {
+//     Taro.showNavigationBarLoading();
+//     //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
+//     Taro.showLoading({
+//       title: "刷新中..."
+//     });
+//   }
+
+//   navigateTo = navigateTo;
+
+//   async fetch() {
+//     if (S.getAuthToken()) {
+//       const [
+//         salesPerson,
+//         orderCount,
+//         { list: memberDiscount },
+//         assets,
+//         wheelData
+//       ] = await Promise.all([
+//         api.member.getSalesperson(),
+//         api.trade.getCount(),
+//         api.vip.getList(),
+//         api.member.memberAssets(),
+//         // 大转盘
+//         api.wheel.getTurntableconfig()
+//       ]);
+//       const { memberData } = this.props;
+//       this.setState({
+//         salespersonData: salesPerson,
+//         orderCount,
+//         memberDiscount:
+//           memberDiscount.length > 0
+//             ? memberDiscount[memberDiscount.length - 1].privileges.discount_desc
+//             : "",
+//         memberAssets: {
+//           ...assets,
+//           deposit: memberData.deposit
+//         },
+//         turntable_open: wheelData.turntable_open
+//       });
+
+//       await S.getMemberInfo();
+//     }
+//     Taro.stopPullDownRefresh();
+//   }
+
+//   async getSetting() {
+//     const [bannerSetting, menuSetting, pointItemSetting] = await Promise.all([
+//       // 会员中心banner
+//       await api.shop.getPageParamsConfig({
+//         page_name: "member_center_setting"
+//       }),
+//       // 菜单自定义
+//       await api.shop.getPageParamsConfig({
+//         page_name: "member_center_menu_setting"
+//       }),
+//       // 积分商城
+//       await api.pointitem.getPointitemSetting()
+//     ]);
+
+//     this.setState({
+//       bannerSetting: bannerSetting.list[0].params.data,
+//       menuSetting: menuSetting.list[0].params.data,
+//       score_menu_open: pointItemSetting.entrance.mobile_openstatus
+//     });
+//   }
+
+//   onChangeLoginSuccess = () => {
+//     this.fetch();
+//   };
+
+//   // 获取积分个人信息跳转
+//   async fetchRedirect() {
+//     const pathparams = qs.stringify({
+//       template_name: platformTemplateName,
+//       version: "v1.0.1",
+//       page_name: "member_center_redirect_setting"
+//     });
+//     const url = transformPlatformUrl(
+//       `/alipay/pageparams/setting?${pathparams}`
+//     );
+//     const { list = [] } = await req.get(url);
+//     if (list[0].params) {
+//       this.setState({
+//         redirectInfo: list[0].params
+//       });
+//     }
+//   }
+
+//   handleClickRecommend = async () => {
+//     const { info } = this.state;
+//     if (!info.is_open_popularize) {
+//       Taro.showToast({
+//         title: "未开启推广",
+//         icon: "none"
+//       });
+//       return;
+//     }
+
+//     if (info.is_open_popularize && !info.is_promoter) {
+//       await api.member.promoter();
+//     }
+
+//     Taro.navigateTo({
+//       url: "/pages/member/recommend"
+//     });
+//   };
+
+//   beDistributor = async () => {
+//     const { is_promoter } = this.props.memberData;
+//     if (is_promoter) {
+//       Taro.navigateTo({
+//         url: "/marketing/pages/distribution/index"
+//       });
+//       return;
+//     }
+//     const { confirm } = await Taro.showModal({
+//       title: "邀请推广",
+//       content: "确定申请成为推广员？",
+//       showCancel: true,
+//       cancel: "取消",
+//       confirmText: "确认",
+//       confirmColor: "#0b4137"
+//     });
+//     if (!confirm) return;
+
+//     const res = await api.distribution.become();
+//     const { status } = res;
+//     if (status) {
+//       Taro.showModal({
+//         title: "恭喜",
+//         content: "已成为推广员",
+//         showCancel: false,
+//         confirmText: "好"
+//       });
+//     }
+//   };
+
+//   // 订单查看
+//   async handleTradeClick(type) {
+//     Taro.navigateTo({
+//       url: `/subpage/pages/trade/list?status=${type}`
+//     });
+//   }
+
+//   // 积分查看
+//   handleClickPoint = () => {
+//     const { redirectInfo } = this.state;
+//     if (redirectInfo.data && redirectInfo.data.point_url_is_open) {
+//       Taro.navigateToMiniProgram({
+//         appId: redirectInfo.data.point_app_id,
+//         path: redirectInfo.data.point_page
+//       });
+//     }
+//   };
+
+//   handleClickInfo = () => {
+//     const { redirectInfo } = this.state;
+//     if (redirectInfo.data && redirectInfo.data.info_url_is_open) {
+//       Taro.navigateToMiniProgram({
+//         appId: redirectInfo.data.info_app_id,
+//         path: redirectInfo.data.info_page
+//       });
+//     } else {
+//       Taro.navigateTo({
+//         url: "/marketing/pages/member/userinfo"
+//       });
+//     }
+//   };
+
+//   handleClickWxOAuth(fn, need = true) {
+//     if (!S.getAuthToken()) {
+//       showToast("请登录后再操作");
+//       return;
+//     }
+//     if (this.state.showTimes >= 1) {
+//       if (need) {
+//         fn && fn();
+//       }
+//     } else {
+//       const { avatar, username } = this.props.memberData.memberInfo;
+//       if (avatar && username) {
+//         if (need) {
+//           fn && fn();
+//         }
+//       } else {
+//         this.setState({
+//           showPrivacy: true
+//         });
+//       }
+//     }
+//   }
+
+//   renderMarketingNavs() {
+//     const { memberData } = this.props
+//     const { score_menu_open, salespersonData, menuSetting } = this.state;
+//     const { is_open_popularize, is_promoter } = memberData;
+//     const {
+//       group,
+//       community_order,
+//       boost_activity,
+//       boost_order,
+//       offline_order,
+//       complaint,
+//       activity
+//     } = menuSetting;
+//     let navs = [];
+//     if (is_open_popularize && isWeixin) {
+//       navs.push({
+//         title: is_promoter ? "我要推广" : "推广管理",
+//         icon: "../../assets/imgs/store.png",
+//         action: this.beDistributor
+//       });
+//     }
+
+//     if (group && isWeixin) {
+//       navs.push({
+//         title: "我的拼团",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/marketing/pages/member/group-list");
+//         }
+//       });
+//     }
+
+//     if (community_order && isWeixin) {
+//       navs.push({
+//         title: "我的社区团购",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/groupBy/pages/orderList/index");
+//         }
+//       });
+//     }
+
+//     if (boost_activity && isWeixin) {
+//       navs.push({
+//         title: "助力活动",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/boost/pages/home/index");
+//         }
+//       });
+//     }
+
+//     if (boost_order && isWeixin) {
+//       navs.push({
+//         title: "助力订单",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/boost/pages/order/index");
+//         }
+//       });
+//     }
+
+//     if (offline_order) {
+//       navs.push({
+//         title: "线下订单关联",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/others/pages/bindOrder/index");
+//         }
+//       });
+//     }
+
+//     if (complaint && salespersonData && salespersonData.distributor) {
+//       navs.push({
+//         title: "投诉记录",
+//         icon: `${process.env.APP_IMAGE_CDN}/group.png`,
+//         action: () => {
+//           this.navigateTo("/marketing/pages/member/complaint-record");
+//         }
+//       });
+//     }
+
+//     if (activity) {
+//       navs.push({
+//         title: "活动预约",
+//         icon: "../../assets/imgs/buy.png",
+//         action: () => {
+//           this.navigateTo("/marketing/pages/member/item-activity");
+//         }
+//       });
+//     }
+
+//     if (score_menu_open) {
+//       navs.push({
+//         title: `${getPointName()}商城`,
+//         icon: "../../assets/imgs/score.png",
+//         action: () => {
+//           this.navigateTo("/pointitem/pages/list");
+//         }
+//       });
+//     }
+
+//     return (
+//       <View>
+//         {navs.map((nav, index) => (
+//           <SpCell
+//             title={nav.title}
+//             isLink
+//             border
+//             img={nav.icon}
+//             onClick={() =>
+//               this.handleClickWxOAuth(() => {
+//                 nav.action();
+//               })
+//             }
+//           ></SpCell>
+//         ))}
+//       </View>
+//     );
+//   }
+
+//   renderNormalNavs() {
+//     const { menuSetting } = this.state
+//     const { memberinfo_enable } = menuSetting;
+//     let navs = [];
+//     navs.push({
+//       title: "地址管理",
+//       action: () => {
+//         this.navigateTo("/marketing/pages/member/address");
+//       }
+//     });
+//     if (memberinfo_enable) {
+//       navs.push({
+//         title: "个人信息",
+//         action: this.handleClickInfo
+//       });
+//     }
+//     if (Taro.getEnv() == "WEB") {
+//       navs.push({
+//         title: "设置",
+//         action: () => {
+//           this.navigateTo("/marketing/pages/member/setting");
+//         }
+//       });
+//     }
+
+//     return (
+//       <View>
+//         {navs.map((nav, index) => (
+//           <SpCell
+//             title={nav.title}
+//             isLink
+//             border
+//             onClick={() => this.handleClickWxOAuth(nav.action)}
+//           ></SpCell>
+//         ))}
+//       </View>
+//     );
+//   }
+
+//   render() {
+//     const { colors, memberData } = this.props;
+//     const {
+//       score_menu_open,
+//       gradeInfo,
+//       orderCount,
+//       memberDiscount,
+//       memberAssets,
+//       isOpenPopularize,
+//       salespersonData,
+//       turntable_open,
+//       bannerSetting,
+//       menuSetting,
+//       rechargeStatus,
+//       showPrivacy,
+//       showTimes
+//     } = this.state;
+//     let memberInfo = null,
+//       vipgrade = null;
+//     if (memberData) {
+//       memberInfo = memberData.memberInfo;
+//       vipgrade = memberData.vipgrade;
+//     }
+
+//     return (
+//       <View className="page-member-index" style={styleNames(getThemeStyle())}>
+//         <View className="page-member-header">
+//           {S.getAuthToken() && (
+//             <View className="header-con">
+//               <View className="user-info">
+//                 <View
+//                   className="user-info__hd"
+//                   onClick={() => {
+//                     this.handleClickWxOAuth(this.handleClickInfo.bind(this));
+//                   }}
+//                 >
+//                   <Image
+//                     className="avatar-img"
+//                     src={memberInfo.avatar || userIcon}
+//                     mode="widthFix"
+//                   />
+//                   <View className="avatar-info">
+//                     <View className="nickname">
+//                       Hi, {memberInfo.username || memberInfo.mobile}
+//                     </View>
+//                     <View className="gradename">{`${
+//                       !vipgrade.is_vip
+//                         ? memberInfo.gradeInfo.grade_name
+//                         : vipgrade.grade_name || "会员"
+//                     }`}</View>
+//                   </View>
+//                 </View>
+
+//                 <View className="user-info__ft">
+//                   {menuSetting.member_code && (
+//                     <Text
+//                       className="iconfont icon-qrcode"
+//                       onClick={() => {
+//                         this.handleClickWxOAuth(
+//                           this.navigateTo.bind(
+//                             this,
+//                             "/marketing/pages/member/member-code"
+//                           )
+//                         );
+//                       }}
+//                     ></Text>
+//                   )}
+//                 </View>
+//               </View>
+
+//               <View className="member-assets">
+//                 <View
+//                   className="member-assets-item"
+//                   onClick={() => {
+//                     this.handleClickWxOAuth(
+//                       this.navigateTo.bind(
+//                         this,
+//                         "/marketing/pages/member/coupon"
+//                       )
+//                     );
+//                   }}
+//                 >
+//                   <View className="member-assets__label">优惠券</View>
+//                   <View className="member-assets__value">
+//                     {(memberAssets && memberAssets.discount_total_count) || 0}
+//                   </View>
+//                 </View>
+
+//                 <View
+//                   className="member-assets-item"
+//                   onClick={() => {
+//                     this.handleClickWxOAuth(this.handleClickPoint.bind(this));
+//                   }}
+//                 >
+//                   <View className="member-assets__label">
+//                     {getPointName()}
+//                   </View>
+//                   <View className="member-assets__value">
+//                     {(memberAssets && memberAssets.point_total_count) || 0}
+//                   </View>
+//                 </View>
+
+//                 {rechargeStatus && (
+//                   <View
+//                     className="member-assets-item"
+//                     onClick={() => {
+//                       this.handleClickWxOAuth(
+//                         this.navigateTo.bind(
+//                           this,
+//                           "/others/pages/recharge/index"
+//                         )
+//                       );
+//                     }}
+//                   >
+//                     <View className="member-assets__label">储值</View>
+//                     <View className="member-assets__value">
+//                       {((memberAssets && memberAssets.deposit) || 0) / 100}
+//                     </View>
+//                   </View>
+//                 )}
+
+//                 <View
+//                   className="member-assets-item"
+//                   onClick={() => {
+//                     this.handleClickWxOAuth(
+//                       this.navigateTo.bind(this, "/pages/member/item-fav")
+//                     );
+//                   }}
+//                 >
+//                   <View className="member-assets__label">收藏</View>
+//                   <View className="member-assets__value">
+//                     {(memberAssets && memberAssets.fav_total_count) || 0}
+//                   </View>
+//                 </View>
+//               </View>
+//             </View>
+//           )}
+
+//           {!S.getAuthToken() && (
+//             <View className="header-con">
+//               <Image className="user-icon" src={userIcon} mode="widthFix" />
+//               <SpLogin onChange={this.onChangeLoginSuccess.bind(this)}>
+//                 <View className="unlogin">请登录</View>
+//               </SpLogin>
+//             </View>
+//           )}
+//         </View>
+
+//         {vipgrade &&
+//           (vipgrade.is_open || (!vipgrade.is_open && vipgrade.is_vip)) &&
+//           memberDiscount !== "" && (
+//             <View
+//               className="member-card"
+//               onClick={() => {
+//                 this.handleClickWxOAuth(
+//                   this.navigateTo.bind(this, "/subpage/pages/vip/vipgrades")
+//                 );
+//               }}
+//             >
+//               {vipgrade.is_open && !vipgrade.is_vip && (
+//                 <View className="vip-btn">
+//                   <View className="vip-btn__title">
+//                     开通VIP会员 <Text className="icon-arrowRight"></Text>
+//                   </View>
+//                   {memberDiscount && (
+//                     <View className="vip-btn__desc">
+//                       即可享受最高{memberDiscount}折会员优惠
+//                     </View>
+//                   )}
+//                 </View>
+//               )}
+//               {vipgrade.is_vip && (
+//                 <View className="grade-info">
+//                   <View className="member-card-title">
+//                     <Text className="vip-sign">
+//                       {vipgrade.vip_type === "svip" ? (
+//                         <Text>SVIP</Text>
+//                       ) : (
+//                         <Text>VIP</Text>
+//                       )}
+//                     </Text>
+//                     会员卡
+//                   </View>
+//                   <View className="member-card-no">
+//                     NO. {memberInfo.user_card_code}
+//                   </View>
+//                   <View className="member-card-period">
+//                     {vipgrade.end_time} 到期
+//                   </View>
+//                 </View>
+//               )}
+//               {vipgrade.is_vip && (
+//                 <Image
+//                   className="member-info-bg"
+//                   src={vipgrade.background_pic_url}
+//                   mode="widthFix"
+//                 />
+//               )}
+//               {vipgrade.is_open && !vipgrade.is_vip && (
+//                 <Image
+//                   className="member-info-bg"
+//                   src={memberInfo.gradeInfo.background_pic_url}
+//                   mode="widthFix"
+//                 />
+//               )}
+//             </View>
+//           )}
+
+//         {/* {is_open_official_account === 1 && (
+//           <View className="page-member-section">
+//             <AccountOfficial
+//               onHandleError={this.handleOfficialError.bind(this)}
+//               onClick={this.handleOfficialClose.bind(this)}
+//               isClose={false}
+//             />
+//           </View>
+//         )} */}
+
+//         <View className="page-member-section order-box">
+//           <SpCell
+//             title="订单"
+//             isLink
+//             value="全部订单"
+//             onClick={() =>
+//               this.handleClickWxOAuth(this.handleTradeClick.bind(this))
+//             }
+//           ></SpCell>
+
+//           {menuSetting.ziti_order && (
+//             <View
+//               className="member-trade__ziti"
+//               onClick={() => {
+//                 this.handleClickWxOAuth(
+//                   this.navigateTo.bind(
+//                     this,
+//                     "/subpage/pages/trade/customer-pickup-list"
+//                   )
+//                 );
+//               }}
+//             >
+//               <View className="view-flex-item">
+//                 <View className="member-trade__ziti-title">自提订单</View>
+//                 <View className="member-trade__ziti-desc">
+//                   您有
+//                   <Text className="mark">
+//                     {(orderCount && orderCount.normal_payed_daiziti) || 0}
+//                   </Text>
+//                   个等待自提的订单
+//                 </View>
+//               </View>
+//               <View className="icon-arrowRight item-icon-go"></View>
+//             </View>
+//           )}
+
+//           <View className="member-trade">
+//             <View
+//               className="member-trade__item"
+//               onClick={() =>
+//                 this.handleClickWxOAuth(this.handleTradeClick.bind(this, 5))
+//               }
+//             >
+//               <View className="icon-wallet">
+//                 {orderCount && orderCount.normal_notpay_notdelivery > 0 && (
+//                   <View className="trade-num">
+//                     {orderCount.normal_notpay_notdelivery}
+//                   </View>
+//                 )}
+//               </View>
+//               <Text>待支付</Text>
+//             </View>
+//             <View
+//               className="member-trade__item"
+//               onClick={() => {
+//                 this.handleClickWxOAuth(this.handleTradeClick.bind(this, 1));
+//               }}
+//             >
+//               <View className="icon-delivery">
+//                 {orderCount && orderCount.normal_payed_notdelivery > 0 && (
+//                   <View className="trade-num">
+//                     {orderCount.normal_payed_notdelivery}
+//                   </View>
+//                 )}
+//               </View>
+//               <Text>待收货</Text>
+//             </View>
+//             <View
+//               className="member-trade__item"
+//               onClick={() => {
+//                 this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
+//               }}
+//             >
+//               <View className="icon-office-box">
+//                 {orderCount && orderCount.normal_payed_delivered > 0 && (
+//                   <View className="trade-num">
+//                     {orderCount.normal_payed_delivered}
+//                   </View>
+//                 )}
+//               </View>
+//               <Text>已完成</Text>
+//             </View>
+//             {orderCount && orderCount.rate_status && (
+//               <View
+//                 className="member-trade__item"
+//                 onClick={() => {
+//                   this.handleClickWxOAuth(this.handleTradeClick.bind(this, 3));
+//                 }}
+//               >
+//                 <View className="icon-message"></View>
+//                 <Text className="trade-status">待评价</Text>
+//               </View>
+//             )}
+//             <View
+//               className="member-trade__item"
+//               onClick={() =>
+//                 this.handleClickWxOAuth(
+//                   this.navigateTo.bind(this, "/subpage/pages/trade/after-sale")
+//                 )
+//               }
+//             >
+//               <View className="icon-repeat">
+//                 {orderCount && orderCount.aftersales > 0 && (
+//                   <View className="trade-num">{orderCount.aftersales}</View>
+//                 )}
+//               </View>
+//               <Text>售后</Text>
+//             </View>
+//           </View>
+//         </View>
+
+//         {/* 菜单 */}
+//         <View className="page-member-section">
+//           {this.renderMarketingNavs()}
+//         </View>
+
+//         {/* 菜单 */}
+//         <View className="page-member-section">
+//           {Taro.getEnv() !== "WEB" && menuSetting.share_enable && (
+//             <SpCell title="我要分享" isLink>
+//               <Button className="btn-share" open-type="share"></Button>
+//             </SpCell>
+//           )}
+//           {this.renderNormalNavs()}
+//         </View>
+
+//         {/* 大转盘 */}
+//         {turntable_open === "1" && (
+//           <View
+//             className="wheel-to"
+//             onClick={() =>
+//               this.handleClickWxOAuth(
+//                 this.navigateTo.bind(this, "/marketing/pages/wheel/index")
+//               )
+//             }
+//           >
+//             <Image src={`${process.env.APP_IMAGE_CDN}/wheel_modal_icon.png`} />
+//           </View>
+//         )}
+
+//         <TabBar />
+
+//         <SpFloatPrivacy
+//           isOpened={showPrivacy}
+//           onClose={() =>
+//             this.setState({
+//               showPrivacy: false,
+//               showTimes: this.state.showTimes + 1
+//             })
+//           }
+//         />
+//       </View>
+//     );
+//   }
+// }
diff --git a/src/pages/member/index.scss b/src/pages/member/index.scss
index f1cc418ab..b20e0a2e2 100644
--- a/src/pages/member/index.scss
+++ b/src/pages/member/index.scss
@@ -1,420 +1,113 @@
-.page-member-index {
-  padding-bottom: 140px;
-  .icon-daipingjia:before {
-    content: "\e607";
-  }  
-  .img-class{
-    width:100%;
+.pages-member-index {
+  .header-block {
+    height: 420px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
   }
-  .page-member-header {
-    // padding: 180px 0 60px;
-    margin-bottom: 20px;
-    // color: #fff;
-    background: var(--color-marketing);
-    height:400px;
-    display: flex;
-    justify-content:center;
-    align-items: center;
-    &.no-card {
-      padding-bottom: 30px;
-    }
-    .user-icon {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      margin-bottom: 10px;
-    }
-  }
-  .header-con {
-    width: 100%;
-    padding: 0 40px;
-    text-align: center;
-  }
-  .page-member-section {
-    margin: 0 20px 20px;
-    background: #fff;
-    overflow: hidden;
-    box-shadow: 0 0 15px rgba(0,0,0,0.1);
-  }
-  .user-info {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    &__hd {
-      display: flex;
-      align-items: center;
-      .avatar-img {
-        display: block;
-        width: 120px;
-        height: 120px;
-        border-radius: 50%;
-        margin-right: 4px;
-      }
-      .nickname {
-        font-size: 28px;
-        margin-bottom: 6px;
-        color: #fff;
-      }
-      .gradename {
-        color: #fff;
-        background: linear-gradient(to right bottom, #fca280, #e75fa9);
-        border-radius: 50px;
-        text-align: center;
-        font-size: 24px;
-      }
-    }
-    &__ft {
-      // width: 100px;
-    }
-    
-    .icon-qrcode {
-      font-size: 40px;
-      margin-top: 20px;
-      color: #fff;
-      margin-right: 20px;
-      display: block;
-    }
-    .icon-setting {
-      margin-left: 10px;
-      font-size: 40px;
-      color: #fff;
-    }
-  }
-
-  .member-assets {
-    text-align: center;
+  .header-hd {
+    padding: 32px;
     display: flex;
     align-items: center;
-    margin-top: 20px;
-    &-item {
+    .usericon {
+      border: 4px solid #fff;
+      width: 110px;
+      height: 110px;
+      border-radius: 50px;
+      margin-right: 30px;
+    }
+    .username {
+      font-size: 32px;
+      color: #222;
+      margin-right: 24px;
+    }
+    .icon-erweima-01 {
+      color: var(--color-primary);
+      font-size: 38px;
+    }
+    .join-us-txt {
+      color: var(--color-primary);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+  }
+  .header-bd {
+    display: flex;
+    align-items: center;
+    .bd-item {
       flex: 1;
-      color: #fff;
-    }
-    .member-assets__label {
-      font-size: 24px;
-      opacity: 0.7;
-    }
-    .member-assets__value {
-      font-size: 32px;
-      font-family: 'PingFang SC';
-    }
-  }
-  
-  .avatar-placeholder {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 20px;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    font-size: 50px;
-    color: #999;
-    background: #fff;
-    overflow: hidden;
-    &::before, &::after {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: 50%;
-      background: $color-brand-accent-light;
-      content: "";
-    }
-    &::before {
-      top: 24px;
-      width: 40px;
-      height: 40px;
-    }
-    &::after {
-      top: 68px;
-      width: 100px;
-      height: 100px;
-    }
-  }
-  
-  .unlogin {
-    padding: 0 20px;
-    height: 48px;
-    line-height: 48px;
-    border-radius: 48px;
-    background: $color-brand-primary;
-    color: #FFFFFF;
-    font-size: 24px;
-  }
-  
-
-  
-  .member-card {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: -80px 20px 20px;
-    height: 24vw;
-    z-index: 1;
-    overflow: hidden;
-    border-radius: 16px 16px 0 0;
-    .member-info-bg {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      &::after {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0,0,0,0.6);
-        content: "";
-        z-index: 10;
-      }
-    }
-    .vip-btn {
-      position: relative;
-      color: #f4d09e;
-      z-index: 20;
       text-align: center;
-      &__title {
-        font-size: 34px;
-      }
-      &__desc {
-        font-size: 24px;
-      }
-    }
-    .grade-info {
       position: relative;
-      padding: 0 40px;
-      width: 100%;
-      color: #e8bd7f;
-      z-index: 30;
-      text-align: right;
-      .member-card-no {
-        padding-top: 20px;
-        font-size: 22px;
-        letter-spacing: 1px;
-      }
-      .member-card-period {
-        font-size: 20px;
-        color: #ccc;
-      }
-      .renewals-btn {
-        margin-left: 20px;
-        padding: 0 30px;
-        border: 1px solid #e8bd7f;
-        border-radius: 60px;
-        font-size: 24px;
-        line-height: 50px;
-      }
-      .member-card-title {
-        font-size: 30px;
-        color: #fcdda5;
-      }
-      .vip-sign {
-        display: inline-block;
-        padding: 0 10px;
-        margin-right: 10px;
-        font-size: 22px;
-        border: 1px solid #e8bd7f;
-      }
-    }
-  }
-  
-  .member-qrcode {
-    padding-left: 20px;
-    font-size: 28px;
-    color: #555;
-    [class^="icon-"] {
-      font-size: 32px;
-    }
-  }
-  
-  .member {
-    &-box {
-      display: flex;
-      justify-content: center;
-      position: relative;
-      padding: 30px 0;
-      &.identity {
-        padding: 0 60px;
-        .member-info {
-          width: 115px;
-          height: 115px;
-          margin-bottom: 0;
-          margin-right: 30px;
-        }
-        .name {
-          font-size: 36px;
-          margin-bottom: 10px;
-        }
-        .amount {
-          font-size: 26px;
+      :not(:last-child) {
+        &:after {
+          content: "";
+          width: 1px;
+          height: 48px;
+          background: #ccc;
+          position: absolute;
+          top: 20px;
+          right: 0;
         }
       }
     }
-    &-info {
-      display: flex;
-      align-items: center;
-      width: 85vw;
-      height: 45vw;
-      position: relative;
-      padding: 0 40px;
-      z-index: 1;
-      background: #a2564c;
-      color: #fff;
-      border-radius: 20px;
-      box-shadow: 0 0 20px rgba(0,0,0,0.3);
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: rgba(0,0,0,0.4);
-        border-radius: 20px;
-        content: ""
-      }
-      .member-info-bg {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-        border-radius: 20px;
-      }
-    }
-  }
-  .member {
-    &__scroll {
-      @include page-scroll($navigate-height, $tabbar-height);
-    }
-  }
-  .important-box {
-    position: relative;
-    padding: 30px;
-    margin: 0 30px;
-    .view-flex-item {
+    .bd-item-label {
       color: #666;
+      font-size: 24px;
     }
-    .icon-img {
-      width: 80px;
-      height: 80px;
+    .bd-item-value {
+      color: #333;
+      font-size: 36px;
     }
   }
-  .order-box {
-    .icon-ziti {
-      margin-right: 10px;
-      font-size: 60px;
-      color: #999;
-    }
-    .member-trade__ziti {
-      display: flex;
-      align-items: center;
-      padding: 20px 30px;
-      margin: 20px;
-      background: #f8f8f8;
-      border: 1px solid #efefef;
-      .member-trade__list-btn{
-        width: 150px;
-      }
-      .member-trade__ziti-title {
-        font-size: 28px;
-      }
-      .member-trade__ziti-desc {
-        font-size: 24px;
-        color: #666;
-      }
-    }
-    .member-trade {
-      display: flex;
-      padding: 30px 20px 30px 20px;
-      font-size: 26px;
-      .icons-status__img {
-        width: 44px;
-        height: 44px;
-        margin-bottom: 28px;
-      }
-      .member-trade__item {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        font-size: 24px;
-        color: #333;
-      }
-      [class^="icon-"] {
-        position: relative;
-        font-size: 56px;
-        margin-bottom: 10px;
-        color: #666;
-      }
-      .trade-num {
+  .kt-vip {
+    margin: 24px 36px;
+    border: 1px solid #f5a623;
+    border-radius: 20px;
+    background-color: #fff2df;
+    padding: 16px 24px;
+    display: flex;
+    .lf-con {
+      flex: 1;
+      position: relative;
+      &:after {
+        content: " ";
         position: absolute;
-        top: -10px;
-        right: -15px;
-        display:inline-block;
-        padding: 4px 10px;
-        box-sizing: content-box;
-        min-width: 16px;
-        border-radius: 24px;
-        background-color:#e64340;
-        color:#fff;
-        line-height: 1.2;
-        text-align:center;
-        font-size: 24px;
-        vertical-align:middle;
-        font-family: Arial;
+        width: 1PX;
+        height: 60px;
+        background: #F5A623;
+        top: 20px;
+        right: 30px;
       }
     }
-  }
-  .address-box {
-    padding: 30px 20px;
-    img, image {
-      width: 28px;
-      height: 28px;
-      vertical-align: middle;
-      margin-left: 5px;
+    // .rg-con {
+    //   wi
+    // }
+    .vip-title,
+    .vip-xf {
+      font-size: 30px;
+      color: #725320;
+      font-weight: bold;
     }
-  }
-  .gray {
-    color: #999;
-  }
-  .btn-share {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    padding: 0;
-    margin: 0;
-    text-align: inherit;
-    background: transparent;
-    line-height: inherit;
-    border: none;
-    &::after {
-      content: none;
+    .vip-desc,
+    .xs-price {
+      color: #725320;
+      font-size: 24px;
     }
-  }
-  .card-img{
-    width:45px;
-    height:45px;
-  }
-  .wheel-to{
-    position: fixed;
-    right: 5px;
-    bottom: 180px;
-    z-index: $z-index-toast;
-    .taro-img, img, Image,image{
-      height: 100px;
-      width: 100px;
+    .icon-qianwang-01 {
+      font-size: 28px;
+      color: #725320;
+      font-weight: normal;
     }
   }
 
+  .service-block {
+    background: #fff;
+    box-shadow: 0px 2px 10px 0px rgba(234,231,224,1);
+    margin: 0 16px 24px;
+    .block-hd {
+      color: #333;
+      font-size: 36px;
+      font-weight: bold;
+      padding: 36px 25px;
+    }
+  }
 }
-