fangliaoxiaochengxv/pages/mine/index.vue

<template>
  <view class="app-page">
    <view class="top-bar-view">
      <view class="top-bg" :style="{background: bgImg ? null : 'linear-gradient(138deg, #ffecaf 0%, #fbf5e3 59%, #f5f6f8 100%)',
		opacity: '0.8'}">
        <image v-if="bgImg" style="width: 100%;display: block;" mode="widthFix" :src="bgImg"></image>
      </view>
      <view class="top-box">
        <view class="top-bar" :style="
            'height:' +
            topData.height +
            'px;' +
            'padding-top:' +
            topData.top +
            'px;padding-bottom:20rpx'
          ">
        </view>
        <view class="display-flex-between">
          <view class="login-box" @click="checkShowUserRegister()">
            <view class="avatar-wrap">
              <u--image width="126rpx" height="126rpx" radius="100%" shape="circle" bgColor="#d3c6b5"
                        customStyle="border-radius:100%;" :src="
                avatarUrl != defaultAvatarUrl
                  ? avatarUrl
                  : `/static/defaultAvatar.png`
              " :fade="true" duration="450"></u--image>

            </view>
            <view class="user-info-wrap">
              <view class="userName-wrap">
                <text class="userName display-flex-content-center">{{
                    userName ? userName : "登录/注册"
                  }}
                </text>
                <u-icon
                    name="edit-pen"
                    size="20"
                ></u-icon>
              </view>
              <view class="vip-tag"
                    :style="{background: `url(${user_grade_bg}) no-repeat center left`,marginTop:'8rpx',width:'96rpx',height:'32rpx', backgroundSize: '96rpx 32rpx',}">
                <!--                <view class="vip-text">{{userInfo.vip_name}}</view>-->
              </view>
              <text class="user-phone">{{ userInfo.phone }}</text>
            </view>
          </view>
          <view class="login-box pdt0">
            <view  @click="JumpSetting()">
              <view class="mb5 display-flex-end">
                <u-icon
                    name="setting"
                    size="26"
                ></u-icon>
              </view>
              <view class="info-list" style="color: #999"
                    v-if="userInfo.pid &&userInfo.agent && userInfo.agent.username ">
                <text>推荐人：{{ userInfo.agent.username }}</text>
              </view>
              <view class="info-list">
                <text>积分：
                  <text class="info-list-rebate_total">{{ userInfo.integral_total - userInfo.integral_used }}</text>
                </text>
              </view>
              <view class="info-list">
                <text>余额：
                  <text class="info-list-rebate_total">{{ userInfo.rebate_total - userInfo.rebate_used }}</text>
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="jion-vip-wrap" @click="checkShowUserRegister()"
              :style="{backgroundImage: `url(${jion_vip_bg})`}">
          <view class="title">
            开通服务专享产品权益
          </view>
          <view class="title">
            开通会员
          </view>
        </view>
        <view class="orders-info-card">
          <view class="orders-card">
            <view class="card-title">
              <text>商城订单</text>
              <view class="right" @click="toOrderList(0)">查看全部订单
                <view class="ml5">
                  <u-icon name="arrow-right" size="13"
                          color="#858585"></u-icon>
                </view>
              </view>
            </view>
            <u-line color="#F4F4F4"></u-line>
            <view class="menu-box">
              <view class="menu-item" @click="toOrderList(item.index)" v-for="(item, index) in shopList">
                <view style="position: relative;">
                  <image :src="item.url" mode="heightFix"></image>
                  <u-badge :absolute="true" :offset="[-5,-10]" :value="orderNumber[item.numKey]">
                  </u-badge>
                </view>
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="member-other-card">
          <view v-for="(item, index) in otherList" :key="index"
                @click="goToPath(item)">
            <u-line color="#E8E8E8"></u-line>
            <view class="display-flex-between">
              <view class="mt15 mb15 display-flex-content-center" :style="[getKefuStyle(item)]">
                <image :src="item.url" class="mr12" mode="heightFix" style="width: 36rpx;height: 36rpx"></image>
                <text class="member-other-card-name">{{ item.name }}</text>
                <button style="position: absolute;width: 690rpx;height:108rpx;z-index: 999;opacity: 0;;left: 10px"
                        v-if="item.value == 'concat'" open-type="contact" @contact="contact"></button>
              </view>
              <view>
                <u-icon name="arrow-right" bold color="#333333" size="14"></u-icon>
              </view>
            </view>

          </view>
        </view>
        <view class="member-info-card">
          <view class="member-card">
            <text class="card-title">分销商</text>
            <u-line color="#F4F4F4"></u-line>
            <view class="menu-box">
              <view class="menu-item" @click="goToPath(item)" v-for="(item, index) in menuList">
                <view class="menu-item-bgColor">
                  <image :src="item.url" mode="heightFix"></image>
                  <text>{{ item.name }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <u-popup :show="showUserRegister" @close="showUserRegister = false" round="18rpx">
      <form v-if="!isUserRegister" @submit="saveUserData">
        <view class="m-content-view">
          <text class="top-view"> {{ shopName }}</text>
          <text class="tips">请您授权头像昵称信息，您授权的信息将受到严格保护，请放心使用。</text>
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
                  style="border: 0">
            <u--image v-if="avatarUrl !== defaultAvatarUrl" width="149rpx" height="149rpx" radius="100%"
                      shape="circle" :src="avatarUrl" :fade="true" duration="450" mode="heightFix"></u--image>
            <view class="v1" v-else>
              <u--image width="80rpx" height="80rpx" radius="100%" shape="circle" :src="avatarUrl"
                        :fade="true" duration="450" mode="heightFix"></u--image>
              <text v-if="avatarUrl === defaultAvatarUrl">获取头像</text>
            </view>
          </button>
          <input name="nickname" v-model="userName" type="nickname" class="m-input" placeholder="请输入昵称"/>
          <button class="red-btn" form-type="submit">确认授权</button>
        </view>
      </form>
    </u-popup>

    <tabbarCom current="4"></tabbarCom>
  </view>
</template>

<script>
import tabbarCom from "@/components/tabbar/tabbar.vue"
import {
  uploadBase64File,
  getNewRemindCnt,
  addAddress,
} from "@/common/api/common.js";

import {
  getOrderList
} from "@/common/api/order.js";
import {
  updateUserInfo,
  getUserInfo,
  userBindNickname
} from "@/common/api/user.js";

const defaultAvatarUrl =
    "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
import $C from "@/common/utils/config.js";

export default {
  components: {
    tabbarCom
  },
  data() {
    return {
      topData: {
        top: 0,
        height: 0,
      },
      shopName: "六感熟眠商城",
      bgImg: null,
      jion_vip_bg: 'https://work.hkmop.com/static/imgs/jion_vip_bg.png',
      user_grade_bg: '', //#f4c530
      tips: "登录/注册",
      defaultAvatarUrl,
      avatarUrl: defaultAvatarUrl,
      isUserRegister: false,
      showUserRegister: false,
      userName: "",
      userInfo: undefined,
      badgeValue: 0,
      userData: {},
      newRemindCnt: 0,
      orderNumber: {},
      menuList: [{
        name: "推广海报",
        url: require("@/static/ic-menu-a.png"),
        path: "/subPages/poster/poster",
        isVip: true
      },
        {
          name: "我的团队",
          url: require("@/static/ic-menu-b.png"),
          path: "/subPages/myTeam/myTeam",
          isVip: true
        },
        {
          name: "分销订单",
          url: require("@/static/ic-menu-c.png"),
          path: "/subPages/distribution/distribution",
          isVip: true
        },
        {
          name: "提现记录",
          url: require("@/static/ic-menu-d.png"),
          path: "/subPages/withdrawalManagement/withdrawalManagement",
          isVip: true
        },
        {
          name: "提现",
          url: require("@/static/ic-menu-e.png"),
          path: "/subPages/applyWithdrawal/applyWithdrawal",
          isVip: true
        },
      ],
      shopList: [{
        name: "待付款",
        url: require("@/static/ic-shop-a.png"),
        value: '1,2',
        index: 1,
        numKey: 'toPay'
      },
        {
          name: "待发货",
          url: require("@/static/ic-shop-b.png"),
          value: '3',
          index: 2,
          numKey: 'toSend'
        },
        {
          name: "待收货",
          url: require("@/static/ic-shop-c.png"),
          value: '4',
          index: 3,
          numKey: 'toConfirm'
        },
        {
          name: "已完成",
          url: require("@/static/ic-shop-d.png"),
          value: '6,9',
          index: 4,
          numKey: 'complate'
        },
        {
          name: "退款/售后",
          url: require("@/static/ic-shop-e.png"),
          index: 5,
          numKey: 'afterSales'
        },
      ],
      otherList: [
        {
          name: "课程订单",
          url: require("@/static/ic-other-f.png"),
          path: "/subPages/myOrder/myOrder",
          isVip: true
        },
        {
          name: "服务预约",
          url: require("@/static/ic-other-g.png"),
          path: "/subPages/myOrder/myOrder",
          isVip: true
        },

          {
        name: "优惠券",
        url: require("@/static/ic-other-a.png"),
        path: "/subPages/coupon/coupon",
        isVip: true
      },
        {
          name: "地址管理",
          url: require("@/static/ic-other-b.png"),
          path: "/subPages/addressMg/addressMg",
          isVip: true
        },
        {
          name: "我的收藏",
          url: require("@/static/ic-other-cooprule.png"),
          path: "/subPages/collectList/collectList",
          isVip: true
        },
        {
          name: "帮助中心",
          url: require("@/static/ic-other-c.png"),
          path: "/subPages/helpCenter/helpCenter",
        },
        {
          name: "关于我们",
          url: require("@/static/ic-other-d.png"),
          path: "/pages/singlePage/index?name=3",
        },
        {
          name: "在线客服",
          url: require("@/static/ic-other-e.png"),
          value: 'concat'
        },
      ],
    };
  },
  computed: {
    displayBalance() {
      const {
        balance_total,
        balance_used
      } = this.userInfo || {};
      return balance_total - balance_used;
    },
  },
  created() {
    const configs = uni.getStorageSync("configs");
    if (configs) {
      this.shopName = configs.shop_name
      this.bgImg = configs.ucenter_bg
      this.jion_vip_bg = configs.user_in_bg
      this.user_grade_bg = configs.user_grade_bg
    }


  },
  mounted() {
  },

  //发送给朋友
  onShareAppMessage(res) {
    let configs = uni.getStorageSync('configs') || {}
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/pages/home/dashboard/index?id=${
          JSON.parse(uni.getStorageSync("userInfo")).id
      }`,
    };
  },
  // 分享到朋友圈
  onShareTimeline() {
    let configs = uni.getStorageSync('configs') || {}
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/pages/home/dashboard/index?id=${
          JSON.parse(uni.getStorageSync("userInfo")).id
      }`
    };
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect();
    this.topData.top = topData.top;
    this.topData.height = topData.height;
    this.reUserInfo();
    this.getUserInfo();

    // this.getOrderListCount()
  },
  methods: {
    contact(res) {
      console.log(345555, res)
    },
    getOrderStatics() {
      this.$api.getOrderStatics().then(res => {
        const {
          t1 = 0, t2 = 0, t3 = 0, t4 = 0, t6 = 0, t9 = 0
        } = res.data
        this.orderNumber = {
          toPay: t1 + t2,
          toSend: t3,
          toConfirm: t4,
          complate: t6 + t9,
          afterSales: res.data.t - 1 + res.data.t - 2,
        }
      })
    },
    getKefuStyle(item){
      if(item.value == 'concat'){
        return {
          display: "relative",
        }
      }
    },
    checkShowUserRegister() {
      if (!this.isUserRegister) {
        this.showUserRegister = true;
        return true;
      } else {
        // if (this.userInfo.vip_code && this.userInfo.vip_code != "0") {
        //   this.toSubPages("personalDataManagement");
        // } else {
        //   this.toSubPages("register");
        //
        // }
        this.toSubPages("personalDataManagement");
        return false;
      }
    },
    JumpSetting() {
      this.toSubPages("setting");
    },
    reUserInfo() {
      const userInfo = uni.getStorageSync("userInfo");
      if (
          userInfo &&
          JSON.parse(userInfo).nickname != "" &&
          JSON.parse(userInfo).headimg != ""
      ) {
        this.userInfo = JSON.parse(userInfo);
        const {
          headimg,
          nickname,
          base_sex,
          realname,
          region_area,
          region_city,
          region_province,
          phone
        } =
            this.userInfo
        this.avatarUrl = this.userInfo.headimg;
        this.userName = this.userInfo.nickname;
        this.isUserRegister = true;
        this.getOrderStatics()
      } else {
        this.isUserRegister = false;
      }
    },
    toOrderList(str = 0) {
      if (!this.isUserRegister) {
        this.showUserRegister = true;
        return true;
      }
      uni.setStorageSync("orderIndex", str);
      uni.navigateTo({
        url: "/subPages/myOrder/myOrder",
      });
    },
    goToPath(item) {
      if (item.isVip) {
        if (!this.isUserRegister) {
          this.showUserRegister = true;
          return true;
        }
      }
      if (!item.path) {
        return;
      }
      uni.navigateTo({
        url: item.path,
      });
    },
    toSubPages(index) {
      uni.navigateTo({
        url: `/subPages/${index}/index`,
      });
    },
    // 获取未支付数量
    getOrderListCount() {
      uni.showLoading();
      const data = {
        status: 2,
        page: this.page,
        limit: this.limit,
      };
      getOrderList(data)
          .then((res) => {
            uni.hideLoading();
            console.log("getOrderList==>", res.data.list);
            if (res.data) {
              this.badgeValue = res.data.page.total;
            }
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    bindNickname(url) {
      this.isUserRegister = true;
      this.showUserRegister = false;
      const data = {
        nickname: this.userName,
        username: this.userName,
        headimg: url,
      };
      userBindNickname(data).then((res) => {
        console.log("绑定昵称等==>", res.data);
        if (res.data) {
          uni.setStorageSync("token", res.data.token.token);
          if (!res.data.headimg) {
            res.data.headimg = url;
          }
          uni.setStorageSync("userInfo", JSON.stringify(res.data));
          this.isUserRegister = true;
          this.showUserRegister = false;
          this.toSubPages("register");
        }
      });
    },
    addAddress(addressData) {
      this.isUserRegister = true;
      this.showUserRegister = false;
      const data = {
        type: 1,
        name: addressData.userName,
        phone: addressData.telNumber,
        province: addressData.provinceName,
        city: addressData.cityName,
        area: addressData.countyName,
        address: addressData.detailInfo,
      };
      addAddress(data).then((res) => {
        console.log("addAddress==>", res.data);
        if (res.data) {
          uni.showToast({
            title: "添加成功",
            success: (res) => {
            },
          });
        }
      });
    },
    async getUserInfo() {
      const data = {};
      await getUserInfo(data)
          .then((res) => {
            if (res.data) {
              // uni.clearStorageSync()
              uni.setStorageSync("token", res.data.token.token);
              uni.setStorageSync("userInfo", JSON.stringify(res.data));
              this.userInfo = res.data;
              console.log("getUserInfo==>", this.userInfo);
            }
          })
          .catch(() => {
            uni.hideLoading();
          });
      await this.reUserInfo();
    },
    getNewRemindCnt() {
      const data = {};
      getNewRemindCnt(data)
          .then((res) => {
            console.log("getNewRemindCnt==>", res.data);
            // if (res.data) {
            this.newRemindCnt = res.data || 0;
            // }
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    onChooseAvatar(e) {
      const {
        avatarUrl
      } = e.detail;
      console.log("成功授权", avatarUrl);
      this.avatarUrl = avatarUrl;
    },
    saveUserData(e) {
      console.log(e.detail.value.nickname);
      if (
          this.avatarUrl === this.defaultAvatarUrl ||
          !e.detail.value.nickname
      ) {
        uni.showToast({
          icon: "none",
          title: "请先授权完善信息",
        });
        return;
      }
      this.userName = e.detail.value.nickname;
      this.showUserRegister = false;
      this.getImageInfo();
    },
    getImageInfo() {
      // 获取当前图片信息
      uni.getImageInfo({
        src: this.avatarUrl,
        success: (image) => {
          // 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
          if (image.type == "png" || image.type == "jpeg") {
            // 对符合类型的图片转换为base64类型
            uni.getFileSystemManager().readFile({
              // 【重点来啦】人家自提供的转码API
              filePath: image.path, // 所需转码图像路径
              encoding: "base64", // 转码类型
              success: (res) => {
                // 生成base64
                let imageBase64 =
                    "data:image/" + image.type + ";base64," + res.data;
                console.log("转base64后：", imageBase64);
                this.uploadBase64File(imageBase64);
              },
            });
          } else {
            // 友好一点，不是以上类型做出提醒
            uni.showToast({
              title: "当前只支持png/jpeg格式",
              duration: 2500,
              icon: "none",
            });
          }
        },
      });
    },
    uploadBase64File(imageBase64) {
      uploadBase64File({
        base64: imageBase64,
      }, {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      })
          .then((res) => {
            console.log("uploadFile==>", res.data.url);
            this.avatarUrl = res.data.url;
            this.bindNickname(res.data.url);
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-page {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.top-bg {
  width: 750rpx;
  height: 634rpx;
  overflow: hidden;
}

.not-regis-box,
.regis-box {
  margin-left: 20rpx;
  margin-top: 7rpx;
  height: 36rpx;
  line-height: 36rpx;
  padding: 0 10rpx;
  font-size: 22rpx;
  font-weight: bold;
  color: #9a9a9a;
  background: #e3e3e3;
  border-radius: 7rpx;
  display: inline-flex;
  align-items: center;

  .user-name-text {
    margin-left: 6rpx;
  }
}

.regis-box {
  background: rgba(231, 224, 255, 0.85);
  color: #815bff;
}

.top-bar-view {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.top-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.m-content-view {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #f7f7f7;
  border-radius: 24rpx 24rpx 0 0;
}

.top-view {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1d161f;
  line-height: 34rpx;
  text-align: left;
  margin: 55rpx 49rpx 0;
  width: calc(100% - 98rpx);
}

.tips {
  font-size: 26rpx;
  font-weight: 400;
  color: #858585;
  line-height: 34rpx;
  margin: 21rpx 49rpx 0;
}

.red-btn {
  color: white;
  background: #f39800;
  width: calc(100% - 98rpx);
  margin-top: 52rpx;
  margin-bottom: 52rpx;
  font-size: 32rpx;
  line-height: 84rpx;
  border-radius: 40rpx;
  text-align: center;
}

.red-btn:active {
  opacity: 0.7;
}

.v1 {
  height: 149rpx;
  width: 149rpx;
  display: flex;
  flex-direction: column;
  background: rgba(244, 244, 246, 1);
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}

.avatar-wrapper {
  margin-top: 26rpx;
}

.avatar-wrapper button::before {
  padding: 0;
  border-radius: 20rpx;
  border: 0;
}

.avatar {
  height: 100rpx;
  width: 100rpx;
}

.v1 text {
  font-size: 22rpx;
  margin-top: -16rpx;
}

// 去掉烦人的边框
button::after {
  border: 0; // 或者 border: none;
}

.m-input {
  width: calc(100% - 138rpx);
  line-height: 117rpx;
  padding: 0 20rpx;
  margin-top: 44rpx;
  background: #ffffff;
  border-radius: 15rpx;
  height: 117rpx;
}

.mine-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mine-bg {
  width: 100%;
  display: block;
  height: 1334rpx;
}

.mine-view {
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.top-title-view {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
}

.login-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 30rpx 0;
}

.avatar-wrap {
  position: relative;

  .vip-tag {
    display: flex;
    align-items: center;
    margin-top: 8rpx;

    .vip-text {
      font-size: 20rpx;
      font-weight: 500;
      margin-left: 34rpx;
      color: #632400;
      width: 122rpx;
      line-height: 38rpx;
      text-align: center;
      border-radius: 0rpx 20rpx 20rpx 0rpx;
    }
  }
}

.user-info-wrap {
  flex: 1;
  margin-left: 28rpx;

  .userName-wrap {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }


}

.userName-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.userName {
  font-size: 28rpx;
  // margin-left: 26rpx;
  font-family: PingFang;
  font-weight: 600;
  color: #333333;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.info-list text {
  margin-top: 10rpx;
  font-size: 22rpx;
  // margin-left: 26rpx;
  font-family: PingFang;
  font-weight: 400;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.info-list-rebate_total {
  //font-family: Aoboshi One, Aoboshi One!important;
  //color: #512C19!important;
  //line-height: 40rpx!important;
  //text-align: left!important;
  //font-style: normal!important;
  //text-transform: none!important;
  //font-weight: 700!important;
  //font-size: 40rpx!important;
}

.user-phone {
  margin-top: 8rpx;
  font-size: 22rpx;
  // margin-left: 26rpx;
  font-family: PingFang;
  font-weight: 400;
  color: #333333;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.right-box {
  padding-right: 56rpx;
  position: relative;
}

.jion-vip-wrap {
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 128rpx;
  margin: 40rpx 30rpx 0rpx;
  padding: 0 96rpx 0 84rpx;
  .title {
    font-family: 苹方-Regular, 苹方;
    font-weight: 700;
    font-size: 28rpx;
    color: #512C19;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .docs {
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #512C19;
    line-height: 36rpx;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }

}

.kthy {
  flex: 1;
  font-size: 26rpx;
  font-family: PingFang;
  font-weight: 400;
  color: #000000;
}

.kthy-btn {
  width: 106rpx;
  height: 40rpx;
  border: 1rpx solid #000000;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-family: PingFang;
  font-weight: 400;
  color: #010101;
  text-align: center;
  margin-right: 20rpx;
  line-height: 40rpx;
}

.card-box {
  width: 690rpx;
  margin: 20rpx auto 0 auto;
  background: #ffffff;
  border-radius: 21rpx;
  display: flex;
  flex-direction: column;
}

.bottom-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .bottom-item-h {
    width: 100%;
    display: flex;
    flex-direction: row;

    text {
      flex: 1;
      font-size: 26rpx;
      margin: 30rpx 40rpx;
      font-family: PingFang;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
    }
  }
}

.orders-info-card {
  width: 650rpx;
  padding:  0 20rpx;
  margin: 25rpx auto 0;
  border-radius: 18rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  .orders-card {
    width: 650rpx;
    height: 273rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 18rpx 18rpx 18rpx 18rpx;

    .card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #858585;
        line-height: 1;
      }
    }

    .menu-box {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .menu-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        image {
          width: 46rpx;
          margin-bottom: 14rpx;
          height: 46rpx;
        }

        text {
          font-size: 26rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #1d161f;
        }
      }
    }
  }
}

.member-info-card {
  width: 650rpx;
  padding:  0 20rpx;
  margin: 0rpx auto 180rpx;
  // height: 349rpx;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;

  .member-card {
    width: 650rpx;
    height: 273rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 18rpx 18rpx 18rpx 18rpx;

    .menu-box {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .menu-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        &-bgColor{
          height: 65%;
          width: 85%;
          background: #F6F7F9;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          image {
            width: 36rpx;
            margin-bottom: 14rpx;
            height: 36rpx;
          }

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #333333;
            line-height: 32rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }
}

.card-title {
  font-size: 28rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #1d161f;
  padding-left: 10rpx;
  line-height: 91rpx;
}

.member-other-card {
  width: 650rpx;
  // height: 273rpx;
  margin: 20rpx auto 20rpx auto;
  padding: 0 20rpx;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  &-name{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

}
</style>