会员中心优化

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",

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);

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>
+    );
+  }
+}

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;
+    }
+  }
+
+}
+

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;
+    }
+  }
 }
-