<template>
  <view class="main">
    <view class="content">
      <view class="top" :style="{
        paddingTop: `${loginType === 'min' ? menu.bottom : menu.top + 14}px`,
      }">
        <view class="userInfoLeft">
          <view class="userFile" v-if="loginType === 'min'">
            <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="headerImg" :src="WXProfile ||
                (user && user.MEMBERSHIP_HEADIMAGEURL
                  ? user.MEMBERSHIP_HEADIMAGEURL
                  : '')
                " />
            </button>
          </view>

          <view class="userFile" style="background-color: #F2F2F2;" v-if="loginType !== 'min' && showAvatar"
            @click="handleChooseAvatarApp">
            <image class="headerImg" :src="displayedAvatarUrl ||
              (user && user.MEMBERSHIP_HEADIMAGEURL
                ? user.MEMBERSHIP_HEADIMAGEURL
                : '')
              " />
          </view>
          <view class="userInfoBox" v-if="user && user.MEMBERSHIP_ID">
            <view class="userTop">
              <span class="userName">{{
                (user && user.MEMBERSHIP_NAME) || phone || "游客"
              }}</span>
              <image v-if="user && user.MEMBERSHIP_LEVEL" class="userType" :src="user && user.MEMBERSHIP_LEVEL === 1000
                ? 'https://eshangtech.com/wanmeiyizhanImg/home/normalUser.svg'
                : user && user.MEMBERSHIP_LEVEL === 2000
                  ? 'https://eshangtech.com/wanmeiyizhanImg/home/silverCard.svg'
                  : ''
                " />
            </view>

            <view class="userBottom">
              {{ phone || "-" }}
            </view>
          </view>

          <view class="userInfoBox" v-else style="justify-content: center;" @click="handleGoLogin">
            <view class="clickLogin">点击登录</view>
          </view>
        </view>

        <!-- <view class="userInfoRight" @click="handleSign"> -->
        <view class="userInfoRightNew" @click="handleSign">
          <!-- <image class="sginIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/signInIcon.png" /> -->
          <span class="sginText">{{
            toDayHaveSign ? "今日已签到" : "立即签到"
          }}</span>
        </view>
      </view>


      <view class="balanceBoxNew">
        <view class="balanceBoxItem" @click="isGo('/pages/homeFn/myCoupon/index')">
          <image class="balanceImg" src="https://eshangtech.com/wanmeiyizhanImg/app/COUPONCOUNT.png" />
          <view class="balanceContent">
            <view class="balanceLabel">优惠券</view>
            <view class="balanceValue">{{
              user && user.COUPON_COUNT ? user.COUPON_COUNT : 0
            }}</view>
          </view>
        </view>

        <view class="balanceBoxItem" @click="isGo('/pages/homeFn/integral/index')">
          <image class="balanceImg" src="https://eshangtech.com/wanmeiyizhanImg/app/MEMBERSHIPPOINT.png" />
          <view class="balanceContent">
            <view class="balanceLabel">我的积分</view>
            <view class="balanceValue">{{
              user && user.MEMBERSHIP_POINT ? user.MEMBERSHIP_POINT : 0
            }}</view>
          </view>
        </view>

        <view class="balanceBoxItem" @click="handleGoUserCode">
          <image class="balanceImg" src="https://eshangtech.com/wanmeiyizhanImg/app/userCode.png" />
          <view class="balanceContent">
            <view class="balanceLabel">会员码</view>
            <view class="balanceValue">点击查看</view>
          </view>
        </view>
      </view>

      <!-- <view class="balanceBox">
        <view class="balanceTop">
          <view class="leftTopNew">
            <view class="bottomItem" @click="isGo('/pages/homeFn/myCoupon/index')">
              <view class="itemContent">
                <view class="bottomValue">{{
                  user && user.COUPON_COUNT ? user.COUPON_COUNT : 0
                }}</view>
                <view class="bottomUnit">优惠券</view>
              </view>
            </view>
            <view class="bottomItem" @click="isGo('/pages/homeFn/integral/index')">
              <view class="itemContent">
                <view class="bottomValue">{{
                  user && user.MEMBERSHIP_POINT ? user.MEMBERSHIP_POINT : 0
                }}</view>
                <view class="bottomUnit">积分</view>
              </view>
            </view>
          </view>

          <view class="rightTop" @click="handleGoUserCode">
            <image class="codeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/userInfoCode.svg" />
          </view>
        </view>

        <view class="balanceBottom" v-if="false">
          <view class="bottomItem" @click="isGo('/pages/homeFn/myCoupon/index')">
            <view class="bottomValue">{{
              user && user.COUPON_COUNT ? user.COUPON_COUNT : 0
            }}</view>
            <view class="bottomUnit">优惠券</view>
          </view>
          <view class="bottomItem" @click="isGo('/pages/homeFn/integral/index')">
            <view class="bottomValue">{{
              user && user.MEMBERSHIP_POINT ? user.MEMBERSHIP_POINT : 0
            }}</view>
            <view class="bottomUnit">积分</view>
          </view>
        </view>
      </view> -->





      <!-- 我的订单 -->
      <view class="orderBox">
        <view class="orderTitle">我的订单</view>
        <view class="orderList">
          <view class="orderItem" v-for="(item, index) in orderList" :key="index" @click="handleGoOrder(item)">
            <image class="orderIcon" :src="item.url" />
            <text class="orderText">{{ item.label || "" }}</text>
            <text class="orderCount" v-if="item.orderCount > 0 && user && user.MEMBERSHIP_ID">{{ item.orderCount
            }}</text>
          </view>
        </view>
      </view>

      <view class="orderBox">
        <view class="orderTitle">常用功能</view>
        <view class="oftenList">
          <view class="oftenItem" v-for="(item, index) in oftenList" :key="index" @click="handleOften(item)">
            <image class="oftenIcon" :src="item.url" />
            <text class="oftenText">{{ item.label || "" }}</text>
          </view>
        </view>
      </view>

      <view class="orderBox">
        <view class="orderTitle">其他功能</view>
        <view class="orderList">
          <view class="orderItem" v-for="(item, index) in otherList" :key="index" @click="handleOther(item)">
            <image class="orderIcon" :src="item.url" />
            <text class="orderText">{{ item.label || "" }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="pageBg"></view>

    <div class="page-body" v-if="false">
      <div class="userDetailBox">
        <div class="userBox">
          <div class="userLeft">
            <div class="userImgBox">
              <!-- <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #eaecee;
                  border-radius: 50%;
                "
              >
                <image
                  style="width: 40%; height: 40%"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/defaultUser.png"
                />
              </div> -->
              <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="headerImg" :src="WXProfile || (user && user.MEMBERSHIP_HEADIMAGEURL)
                  ? user.MEMBERSHIP_HEADIMAGEURL
                  : ''
                  " />
              </button>
            </div>
            <div class="userDetail" @click="goRegister()">
              <div class="userName">
                {{
                  user && user.MEMBERSHIP_NAME
                    ? user.MEMBERSHIP_NAME
                    : "游客" || ""
                }}
              </div>
              <span class="identity">{{
                user && user.MEMBERSHIP_LEVEL_TEXT
                  ? user.MEMBERSHIP_LEVEL_TEXT
                  : ""
              }}</span>
            </div>
          </div>

          <div class="codeBox" @click="isGo('/pages/homeFn/payfor/index')">
            <image class="codeImg" src="https://eshangtech.com/wanmeiyizhanImg/home/codeIcon.png" />
            <span class="codeText">会员码</span>
          </div>
        </div>

        <div class="propertyBox">
          <div class="propertyItem" @click="isGo('/pages/homeFn/myCoupon/index')">
            <div class="propertyLabel">优惠券</div>
            <div class="propertyValue">
              {{ user && user.COUPON_COUNT ? user.COUPON_COUNT : 0 }}
            </div>
          </div>
          <div class="propertyItem" @click="isGo('/pages/homeFn/integral/index')">
            <div class="propertyLabel">积分</div>
            <div class="propertyValue">
              {{ user && user.MEMBERSHIP_POINT ? user.MEMBERSHIP_POINT : 0 }}
            </div>
          </div>
          <!-- <div
          class="propertyItem"
          @click="isGo('/pages/homeFn/consumption/index')"
        >
          <div class="propertyLabel">余额</div>
          <div class="propertyValue">{{ user.ACCOUNT_BALANCE || 0 }}</div>
        </div> -->
        </div>
      </div>

      <div class="funListBox">
        <div class="funItem" @click="isGo('/pages/orders/order/index')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/foodIcon.svg" />
          <div class="funName">我的点餐</div>
        </div>
        <div class="funItem" @click="isGo('/pages/homeFn/myCoupon/index')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/couponLogo.png" />
          <div class="funName">优惠券</div>
        </div>

        <div class="funItem" @click="isGo('/pages/homeFn/mycar/index')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/carLogo.png" />
          <div class="funName">绑定车辆</div>
        </div>

        <div class="funItem" @click="isGo('/pages/myAddress/address/index')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/addressUser.png" />
          <div class="funName">我的地址</div>
        </div>

        <div class="funItem" @click="isGo('/pages/community/myPost')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/post.png" />
          <div class="funName">我的发帖</div>
        </div>
        <div class="funItem" @click="isGo('/pages/contact/index')">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/lostAndfound.png" />
          <div class="funName">失物招领</div>
        </div>

        <!-- <div class="funItem" @click="isGo('/pages/noDataPage/index')">
        <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/customerService.svg" />
        <div class="funName">客户服务</div>
      </div> -->

        <div class="funItem" @click="handleCallPhone">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/serviceHotline.svg" />
          <div class="funName">服务热线</div>
        </div>
        <!-- <div
        class="funItem"
        v-if="loginType && loginType !== 'min'"
        @click="handleLoginoOut"
      >
        <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/closeLogin.png" />
        <div class="funName">退出登录</div>
      </div> -->
        <div class="funItem">
          <image class="funIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/iLike.svg" />
          <div class="funName gray">我的关注</div>
        </div>
      </div>

      <UniPopup :show="isShowPop && !user && !user.MEMBERSHIP_MOBILEPHONE" @close="isShowPop = false"
        custom-style="border-radius: 24rpx;">
        <div class="pop-box">
          <div class="pop-title">温馨提示</div>
          <div class="pop-body">您还没有登录，快去登录吧!</div>
          <div class="popbtn-box">
            <div class="popbtn cancel-btn" @click="isShowPop = false">取消</div>
            <div class="popbtn confirm-btn" @click="goRegister">去登录</div>
          </div>
        </div>
      </UniPopup>
      <UniPopup :show="isShowBuilding" @close="isShowBuilding = false" custom-style="border-radius: 24rpx;">
        <div class="pop-box">
          <div class="pop-title">温馨提示</div>
          <div class="pop-body">该模块正在建设中，尽请期待。</div>
          <div class="popbtn-box">
            <!-- <div class="popbtn cancel-btn" @click="isShowBuilding=false">关闭</div> -->
            <div class="popbtn confirm-btn" @click="isShowBuilding = false">
              确定
            </div>
          </div>
        </div>
      </UniPopup>
      <UniPopup :show="showInvitedCode" position="bottom" overlay="false" custom-style="height: 60%"
        @close="showInvitedCode = false">
        <van-divider contentPosition="center">我的邀请码</van-divider>
        <image :src="InviteCodePath" :style="{
          width: windowMsg.width * windowMsg.scale + 'px',
          height: windowMsg.width + 'rpx',
          margin: '48rpx auto',
          display: 'block',
        }" />
        <view class="down-img-btn">
          <van-button icon="down" round color="linear-gradient(to right, #1f1f1f, #62605f)"
            custom-style="width:300rpx;padding:32rpx auto;" @click="saveImage">保存到本地</van-button>
        </view>
      </UniPopup>
      <!-- <popGet/> -->

      <tabbar :page="'/pages/userCenter/index'" />
    </div>

    <tabbar :page="'/pages/userCenter/index'" />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import tabbar from "../../components/tabbar.vue";

export default {
  computed: {
    ...mapGetters({
      canIuse: "canIuse",
      user: "user",
    }),
    phone() {
      if (this.user && this.user.MEMBERSHIP_MOBILEPHONE) {
        let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
        let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
        return a + "****" + b;
      } else {
        return "";
      }
    },
  },
  components: {
    UniPopup,
    tabbar,
  },
  data() {
    const windows = uni.getSystemInfoSync();
    return {
      isShowBuilding: false,
      isShowPop: false,
      showInvitedCode: false,
      InviteCodePath: "",
      windowMsg: {
        width: windows.windowWidth,
        height: windows.windowHeight,
        scale: windows.windowWidth / 750,
      },
      spreadMsg: {
        DirectCount: 0,
        IndirectCount: 0,
        DoneCount: 0,
      }, // 我的营销数据
      loginType: "", // 登录类型
      WXProfile: "",
      menu: {},
      orderList: [
        {
          label: "待付款",
          value: 1,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/obligation.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/obligation.png",
        },
        {
          label: "待制作",
          value: 2,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/receiptOfGoods.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/receiptOfGoods.png",
        },
        {
          label: "待取餐",
          value: 3,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/afterSales.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/afterSales.png",
        },
        {
          label: "待评价",
          value: 4,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/evaluated.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/evaluated.png",
        },
        {
          label: "退款",
          value: 5,
          url: "https://eshangtech.com/wanmeiyizhanImg/app/refund.png",
        },
      ],
      oftenList: [
        {
          label: "绑定车辆",
          value: 1,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/bindCarIcon.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/bindCarIcon.png",
        },
        {
          label: "失物招领",
          value: 2,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/lostFoundIcon.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/lostFoundIcon.png",
        },
        // {
        //   label: "我的发帖",
        //   value: 3,
        //   url: "https://eshangtech.com/wanmeiyizhanImg/home/userMessage.svg",
        // },
      ],
      otherList: [
        // {
        //   label: "我的地址",
        //   value: 1,
        //   url: "https://eshangtech.com/wanmeiyizhanImg/home/addressManager.svg",
        // },
        // {
        //   label: "客户服务",
        //   value: 2,
        //   url: "https://eshangtech.com/wanmeiyizhanImg/home/customerServiceIcon.svg",
        // },
        // {
        //   label: "服务热线",
        //   value: 3,
        //   url: "https://eshangtech.com/wanmeiyizhanImg/home/hostPhone.svg",
        // },
        // {
        //   label: "账户设置",
        //   value: 4,
        //   url: "https://eshangtech.com/wanmeiyizhanImg/home/userConfig.svg",
        // },
      ],
      toDayHaveSign: false, // 今日是否已经签到了
      displayedAvatarUrl: "",
      showAvatar: true,// 是否显示头像
    };
  },
  onUnload() {
    this.isShowPop = false;
  },
  onLoad() {
    // uni.setNavigationBarColor({
    //   frontColor: "#ffffff",
    //   backgroundColor: "#4E4E4E",
    //   animation: {
    //     duration: 30,
    //     timingFunc: "linear",
    //   },
    // });

    // 判断是小程序还是app
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;
    let systemInfo = uni.getSystemInfoSync();
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
      this.otherList = [
        {
          label: "我的地址",
          value: 1,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/addressManager.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/addressManager.png",
        },
        {
          label: "客户服务",
          value: 2,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/customerServiceIcon.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/customerServiceIcon.png",
        },
        {
          label: "服务热线",
          value: 3,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/hostPhone.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/hostPhone.png",
        },
      ];
    } else {
      this.menu = systemInfo.safeArea;
      this.otherList = [
        {
          label: "我的地址",
          value: 1,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/addressManager.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/addressManager.png",
        },
        {
          label: "客户服务",
          value: 2,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/customerServiceIcon.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/customerServiceIcon.png",
        },
        {
          label: "服务热线",
          value: 3,
          // url: "https://eshangtech.com/wanmeiyizhanImg/home/hostPhone.svg",
          url: "https://eshangtech.com/wanmeiyizhanImg/app/hostPhone.png",
        },
        {
          label: "账户设置",
          value: 4,
          url: "https://eshangtech.com/wanmeiyizhanImg/home/userConfig.svg",
        },
      ];
    }
    console.log("this.menu", this.menu);


    this.$utils.addUserBehaviorNew();
  },
  onShow() {
    console.log("this.user", this.user);
    if (type !== "min") {
      uni.hideTabBar({
        animation: false,
      });
    }

    let type = uni.getStorageSync("loginType");

    // if ((this.user && !this.user.MEMBERSHIP_ID) || !this.user) {
    //   if (this.loginType === "min") {
    //     uni.navigateTo({ url: "/pages/register/index" });
    //   } else {
    //     uni.navigateTo({ url: "/pages/login/index" });
    //   }
    // }
    console.log('djsjakdas', this.user);

    if (this.user && this.user.MEMBERSHIP_ID) {
      let signTime = uni.getStorageSync("signTime");
      if (signTime) {
        signTime = new Date(signTime).getTime();
      } else {
        signTime = 0;
      }
      let now = new Date().getTime();

      if (signTime < now) {
        this.toDayHaveSign = false;
      } else {
        this.toDayHaveSign = true;
      }
      this.handleGetUserAllOrder()
      this.getMember();
      this.getDistributionCount();
      this.handleGetUserInfo();
    } else {
      this.toDayHaveSign = false
      this.displayedAvatarUrl = ''
      this.$forceUpdate()
    }
  },
  onShareAppMessage() {
    // let _this = this;
    return {
      title: "我的",
      path: "/pages/userCenter/index",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  onShareTimeline() {
    return {
      title: "我的",
      path: "/pages/userCenter/index",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  methods: {
    // APP 端选择头像
    async handleChooseAvatarApp() {
      // 检查是否登录
      if (!this.user || !this.user.MEMBERSHIP_ID) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }

      uni.chooseImage({
        count: 1, // 只允许选择一张图片
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'], // 可以从相册或相机选择
        success: (res) => {
          console.log("APP chooseImage success:", res);
          const tempFilePath = res.tempFilePaths[0]; // 获取临时文件路径
          if (tempFilePath) {
            // 直接调用上传方法，传入临时文件路径
            this.uploadAvatarAndSave(tempFilePath);
          } else {
            uni.showToast({ title: '未选择图片', icon: 'none' });
          }
        },
        fail: (err) => {
          console.error("APP chooseImage failed:", err);
          // 处理用户取消或权限问题
          if (err.errMsg && err.errMsg.includes('cancel')) {
            // 用户取消，不提示错误
          } else {
            uni.showToast({ title: '选择图片失败', icon: 'none' });
          }
        }
      });
    },
    // 上传头像并更新用户信息 (这个方法可以复用，接收文件路径)
    async uploadAvatarAndSave(filePath) {
      console.log('filePathfilePathfilePath', filePath);

      let _this = this;
      uni.showLoading({ title: '上传中...' }); // 显示加载提示

      uni.uploadFile({
        url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的图片上传接口 URL
        filePath: filePath, // 直接使用文件路径
        name: "file", // 表单中的文件字段名
        formData: {
          Tabletype: "1005", // 表单中其他数据，根据你的接口要求填写
        },
        success: async (uploadRes) => {
          uni.hideLoading(); // 隐藏加载提示
          let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
          let url = data.Result_Data.ImageUrl;
          console.log('urlurlurlurl', url);

          if (url) {
            // 调用接口更新用户头像信息
            let req = {
              membershipId: this.user.MEMBERSHIP_ID, // 假设 user 对象中包含用户 ID
              headImgUrl: url,
            };

            const userInfoData = await _this.$api.$get(
              "/WeChat/UpdateMemberInfo", // 你的更新用户信息接口 URL
              req
            );

            if (userInfoData.Result_Code === 100) {
              uni.showToast({ title: '头像更新成功', icon: 'success' });
              // 重新获取用户最新信息，更新页面显示
              _this.showAvatar = false
              _this.handleGetUserInfo();
            } else {
              uni.showToast({ title: userInfoData.Result_Desc || '更新头像失败', icon: 'none' });
              // 如果更新失败，重新获取用户信息以显示正确的头像
              _this.handleGetUserInfo();
            }
          } else {
            uni.showToast({ title: data.Result_Desc || '上传图片失败', icon: 'none' });
          }
        },
        fail: (uploadErr) => {
          uni.hideLoading(); // 隐藏加载提示
          uni.showToast({ title: '上传图片失败', icon: 'none' });
        }
      });
    },
    // 跳转去登录
    handleGoLogin() {
      if (this.loginType === "min") {
        uni.navigateTo({ url: "/pages/register/index" });
      } else {
        uni.navigateTo({ url: "/pages/login/index" });
      }
    },
    // 签到
    handleSign() {
      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }

      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();

      let nowDay = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d
        } 23:59:59`;

      let _this = this;
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        _this.$api
          .getCoop({
            action_type: "signIn",
          })
          .then((res) => {
            console.log('resresresres', res);

            if (res.ResultCode === "100") {
              _this.BonusPoint = res.Data.Bonus_Point;
              _this.$api
                .getCoop({
                  action_type: "getConsecutiveSignIn",
                })
                .then((rs) => {
                  uni.showToast({
                    title: "签到成功！",
                    icon: "none",
                  });
                  uni.setStorageSync("signTime", nowDay);
                  _this.toDayHaveSign = true;
                  _this.handleGetUserInfo();
                  _this.$forceUpdate()
                });
            } else if (res.ResultCode === "101") {
              uni.showToast({
                title: "今日已签到！",
                icon: "none",
              });
              _this.toDayHaveSign = true;
              uni.setStorageSync("signTime", nowDay);
            } else {
              uni.showModal({
                content: res.ResultDesc,
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                  }
                },
              });
            }
          });
      } else {
        this.isShow = true;
      }
    },
    // 跳转会员码页面
    handleGoUserCode() {
      console.log('this.user', this.user);

      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }

      uni.navigateTo({
        url: "/pages/homeFn/payfor/index",
      });
    },
    // 订单的点击跳转
    handleGoOrder(obj) {

      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }
      console.log("obj", obj);
      let type = "";
      if (obj.value === 1) {
        // 待付款
        type = 2;
      } else if (obj.value === 2) {
        // 待制作
        type = 3;
      } else if (obj.value === 3) {
        // 待取餐
        type = 4;
      } else if (obj.value === 4) {
        // 待评价
        type = 5;
      } else if (obj.value === 5) {
        // 退款
        type = 6;
      }
      uni.navigateTo({ url: `/pages/orders/order/index?type=${type}` });
    },
    // 常用功能的点击
    handleOften(obj) {

      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }
      if (obj.value === 1) {
        // 绑定车辆
        uni.navigateTo({ url: "/pages/homeFn/mycar/index" });
      } else if (obj.value === 2) {
        // 失物招领
        uni.navigateTo({ url: "/pages/contact/index" });
      } else if (obj.value === 3) {
        // 我的发帖
        uni.navigateTo({ url: "/pages/community/myPost" });
      }
    },
    // 其他的功能点击
    handleOther(obj) {
      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }
      if (obj.value === 1) {
        // 我的地址
        uni.navigateTo({ url: "/pages/myAddress/address/index" });
      } else if (obj.value === 2) {
        // 客户服务
        uni.navigateTo({ url: "/pages/memberBenefits/customerService" });
      } else if (obj.value === 3) {
        // 服务热线
        this.handleCallPhone();
      } else if (obj.value === 4) {
        // 账号设置
        uni.navigateTo({ url: "/pages/userConfig/index" });
      }
    },
    // 退出登录
    handleLoginoOut() {
      this.$store.commit("setUser", undefined);
      uni.navigateTo({ url: "/pages/login/index" });
    },
    // 服务区热线
    handleCallPhone() {
      uni.showModal({
        title: "提示",
        content: `服务热线：96566`,
        confirmText: "呼叫",
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: "96566", //仅为示例
            });
          } else if (res.cancel) {
          }
        },
      });
    },
    // 微信用户头像
    async onChooseAvatar(e) {
      console.log("e", e);
      // this.WXProfile = e.detail.avatarUrl;
      // console.log("this.WXProfile", this.WXProfile);
      // if (!this.WXProfile) {
      //   return;
      // }
      let _this = this;
      console.log("this.user", this.user);

      uni.uploadFile({
        url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的接口 URL
        filePath: e.detail.avatarUrl,
        name: "file", // 表单中的文件字段名
        formData: {
          Tabletype: "1005", // 表单中其他数据
        },
        success: async (uploadRes) => {
          let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
          let url = data.Result_Data.ImageUrl;
          console.log("url", url);
          if (url) {
            let req = {
              membershipId: this.user.MEMBERSHIP_ID,
              headImgUrl: url,
            };
            _this.WXProfile = url;
            const userInfoData = await _this.$api.$get(
              "/WeChat/UpdateMemberInfo",
              req
            );
            console.log("userInfoData", userInfoData);
            if (userInfoData.Result_Code === 100) {
              _this.handleGetUserInfo();
            }
          }
        },
      });

      return;
      uni.saveFile({
        tempFilePath: e.detail.avatarUrl,
        success: async (res) => {
          console.log("res.savedFilePath", res.savedFilePath);

          let req = {
            membershipId: this.user.MEMBERSHIP_ID,
            headImgUrl: res.savedFilePath,
          };
          _this.WXProfile = res.savedFilePath;
          const userInfoData = await _this.$api.$get(
            "/WeChat/UpdateMemberInfo",
            req
          );
          console.log("userInfoData", userInfoData);
          if (userInfoData.Result_Code === 100) {
            _this.handleGetUserInfo();
          }
        },
        fail: (err) => {
          console.log("err", err);

          uni.showToast({
            title: err,
            icon: "none",
          });
        },
      });
    },
    // 拿用户最新的user信息
    handleGetUserInfo() {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetMembershipInfo",
          WechatUserId: _this.user.WechatUserId,
        })
        .then(function (data) {
          if (data.ResultCode === "100") {
            let _data = data;
            console.log("_data", _data);
            _this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
            _this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
            _this.user.MEMBERSHIP_LEVEL_TEXT =
              _data.Data.MEMBERSHIP_LEVEL_TEXT || "";
            _this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
            _this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
            _this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
            _this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
            _this.user.ISPLUS = _data.Data.ISPLUS || "";
            _this.user.INDUSTRY_MEMBERSHIP_ID =
              _data.Data.INDUSTRY_MEMBERSHIP_ID || "";
            _this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
            _this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
            _this.user.InviteCode = _data.Data.InviteCode || "";
            _this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
            _this.user.MEMBERSHIP_MOBILEPHONE =
              _data.Data.MEMBERSHIP_MOBILEPHONE || "";
            _this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
            // _this.setUser(user);
            _this.$store.commit("setUser", _this.user);

            if (_data.Data.MEMBERSHIP_HEADIMAGEURL) {
              _this.displayedAvatarUrl = _data.Data.MEMBERSHIP_HEADIMAGEURL + '?t=' + Date.now();
            } else {
              _this.displayedAvatarUrl = ''; // 或者设置为默认头像 URL
            }
            console.log('_this.displayedAvatarUrl_this.displayedAvatarUrl_this.displayedAvatarUrl', _this.displayedAvatarUrl);
            _this.$forceUpdate()
            _this.showAvatar = true
          } else {
            // _this.setUser({});
            _this.$store.commit("setUser", user);
          }
        });
    },
    goRegister() {
      if (this.user.MEMBERSHIP_NAME) {
      } else {
        if (this.loginType === "min") {
          this.isShowPop = false;
          uni.navigateTo({ url: "/pages/register/index" });
        } else {
          uni.redirectTo({ url: "/pages/login/index" });
        }
      }
    },
    shouldShowBuilding(url) {
      if (url === "/pages/orders/order/index") {
        this.isGo(url);
      } else {
        this.isShowBuilding = true;
      }
    },
    isGo(url) {
      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }

      console.log("this.user", this.user);
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        if (url === "/pages/homeFn/consumption/index") {
          if (this.user.INDUSTRY_MEMBERSHIP_ID) {
            uni.navigateTo({ url: url });
          }
        } else {
          uni.navigateTo({ url: url });
        }
      } else {
        this.isShowPop = true;
      }
    },
    getMember() {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetMembershipInfo",
          // memberShipId: this.user.MEMBERSHIP_ID,
          WechatUserId: this.user.WechatUserId,
          RegisterType: 0,
        })
        .then(function (data) {
          console.log("GetMembershipInfo", data);
          if (data.ResultCode === "100") {
            let _data = data.Data;
            _this.user.MEMBERSHIP_LEVEL_TEXT =
              _data.Data.MEMBERSHIP_LEVEL_TEXT || "";
            _this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
            _this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
            _this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
            _this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
            _this.user.ISPLUS = _data.Data.ISPLUS || "";
            _this.user.INDUSTRY_MEMBERSHIP_ID =
              _data.Data.INDUSTRY_MEMBERSHIP_ID || "";
            _this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
            _this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
            _this.user.DELIVER_COUNT = _data.Data.DELIVER_COUNT || "";
            _this.user.InviteCode = _data.Data.InviteCode || "";
            _this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
            _this.user.MEMBERSHIP_MOBILEPHONE =
              _data.Data.MEMBERSHIP_MOBILEPHONE || "";

            _this.$store.commit("setUser", _this.user);
          }
        });
    },
    getDistributionCount() {
      let _this = this;
      if (_this.user.MEMBERSHIP_ID) {
        _this.$api
          .getCoop({
            action_type: "GetDistributionCount",
          })
          .then((res) => {
            console.log("312312", res);
            _this.spreadMsg = res.Data;
            _this.$forceUpdate();
          });
      }
    },
    creatPageQR() {
      // 生成当前页面小程序二维码
      let _this = this;

      uni.showLoading({
        title: "正在加载",
      });
      _this.$api
        .getCoop({
          action_type: "CreateWxCode",
          page: "pages/home/index",
          scene: _this.user.InviteCode, // 商品id & 当前用户邀请码
          width: 1280,
        })
        .then((res) => {
          _this.InviteCodePath = res.Data.imgUrl;
          _this.showInvitedCode = true;
          _this.$forceUpdate();
          uni.hideLoading();
        });
    },
    saveImage() {
      // 将海报保存图片到
      let _this = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",

              success() {
                // 用户已经同意小程序使用相册

                _this.saveImageToPhotos();
              },

              fail() {
                wx.openSetting({
                  success: (res) => { },
                });
              },
            });
          } else {
            // 用户已经同意小程序使用相册

            _this.saveImageToPhotos();
          }
        },
      });
    },
    saveImageToPhotos() {
      let _this = this;
      uni.showLoading({ title: "正在保存" });
      uni.getImageInfo({
        src: _this.InviteCodePath, // _this.good.DEFAULT_IMG,
        success: (rs) => {
          uni.saveImageToPhotosAlbum({
            filePath: rs.path,
            success(result) {
              uni.showToast({
                title: "保存成功，从相册中分享到朋友圈吧",
                icon: "none",
                duration: 4000,
              });

              uni.hideLoading();
              _this.showInvitedCode = false;
            },
            fail: function (res) {
              uni.showToast({
                title: "图片保存失败",
                icon: "none",
                duration: 2000,
              });
            },
          });
        },
      });
    },
    // 拿到这个用户的全部订单信息
    async handleGetUserAllOrder() {
      const req = {
        action_type: "GetOrderList",
        salebillType: 6000,
        salebillState: "",
        PageIndex: 1,
        pageSize: 999999,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
      };
      const res = await this.$api.postCoop(req);
      console.log('resresresresresres', res);

      if (res.ResultCode === "100") {
        let list = res.Data.List
        // 待付款
        let obligation = []
        // 待制作
        let toBeProduced = []
        // 待取餐
        let waitingHave = []

        if (list && list.length > 0) {
          list.forEach((item) => {
            if (item.SALEBILL_STATE === 1005) {
              obligation.push(item)
            } else if (item.SALEBILL_STATE === 1010) {
              toBeProduced.push(item)
            } else if (item.SALEBILL_STATE === 2000) {
              waitingHave.push(item)
            }
          })
        }

        let orderList = JSON.parse(JSON.stringify(this.orderList))
        orderList.forEach((item) => {
          if (item.value === 1) {
            item.orderCount = obligation && obligation.length > 0 ? obligation.length : 0
          } else if (item.value === 2) {
            item.orderCount = toBeProduced && toBeProduced.length > 0 ? toBeProduced.length : 0
          } else if (item.value === 3) {
            item.orderCount = waitingHave && waitingHave.length > 0 ? waitingHave.length : 0
          }
        })

        console.log('obligation', obligation);

        this.orderList = orderList
      } else {
        let orderList = JSON.parse(JSON.stringify(this.orderList))
        orderList.forEach((item) => {
          if (item.value === 1) {
            item.orderCount = 0
          } else if (item.value === 2) {
            item.orderCount = 0
          } else if (item.value === 3) {
            item.orderCount = 0
          }
        })

        console.log('orderListorderListorderList2', orderList);

        this.orderList = orderList
      }
      this.$forceUpdate()

    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  box-sizing: border-box;

  // padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
  // height: 100vh;
  // position: relative;
  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .userInfoLeft {
        display: flex;

        .userFile {
          width: 116rpx;
          height: 116rpx;
          margin-right: 28rpx;
          border-radius: 50%;
          overflow: hidden;

          .avatarBtn {
            width: 116rpx;
            height: 116rpx;
            padding: 0;

            .headerImg {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .headerImg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .userInfoBox {
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          box-sizing: border-box;
          padding: 10rpx 0;

          .userTop {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;

            .userName {
              font-family: Source Han Sans SC, Source Han Sans SC;
              font-weight: 500;
              font-size: 32rpx;
              color: #000000;
              text-align: left;
              font-style: normal;
              display: inline-block;
              max-width: 250rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            .userType {
              width: 80rpx;
              height: 32rpx;
              margin-left: 8rpx;
            }
          }

          .userBottom {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }

          .clickLogin {}

        }
      }

      .userInfoRight {
        padding: 10rpx 20rpx;
        border-radius: 28rpx;
        background: linear-gradient(90deg, #ffebe5 0%, #ffedd8 100%);
        display: flex;
        align-items: center;

        .sginIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }

        .sginText {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 26rpx;
          color: #ff7040;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
        }
      }

      .userInfoRightNew {
        padding: 8rpx 20rpx;
        background: linear-gradient(270deg, #FAC3A3 0%, #FFDFBD 100%);
        box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
        border-radius: 198rpx 198rpx 198rpx 198rpx;
        border: 2rpx solid #FEBE7A;
        height: 50rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        .sginText {
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 24rpx;
          color: #511313;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .balanceBox {
      width: 100%;
      border-radius: 16rpx;
      overflow: hidden;
      margin-top: 40rpx;

      .balanceTop {
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        background: linear-gradient(270deg,
            #393530 0%,
            #504741 48%,
            #393530 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftTop {
          .balanceValue {
            font-family: "DINAlternate";
            font-weight: 400;
            font-size: 40rpx;
            color: #ecdfbf;
            line-height: 50rpx;
            text-align: left;
            font-style: normal;
          }

          .balanceUnit {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 28rpx;
            color: #bdb08f;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .leftTopNew {
          width: calc(100% - 64rpx);
          display: flex;
          align-items: center;

          .bottomItem {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

            .itemContent {
              width: 100rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .bottomValue {
                font-family: "DINAlternate";
                font-weight: 400;
                font-size: 36rpx;
                color: #ecdfbf;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
              }

              .bottomUnit {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #bdb08f;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                margin-top: 4rpx;
              }
            }
          }
        }

        .rightTop {
          width: 64rpx;
          height: 64rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .codeIcon {
            width: 64rpx;
            height: 64rpx;
          }
        }
      }

      .balanceBottom {
        width: 100%;
        box-sizing: border-box;
        padding: 16rpx 0;
        background: #fff;
        display: flex;
        align-items: center;

        .bottomItem {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .bottomValue {
            font-family: "DINAlternate";
            font-weight: 400;
            font-size: 36rpx;
            color: #130f05;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
          }

          .bottomUnit {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-top: 4rpx;
          }
        }
      }
    }

    .balanceBoxNew {
      width: 100%;
      border-radius: 16rpx;
      overflow: hidden;
      margin-top: 40rpx;
      background: linear-gradient(90deg, #393530 0%, #4F4740 50%, #393530 100%);
      box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      display: flex;
      box-sizing: border-box;
      padding: 40rpx 0 30rpx;

      .balanceBoxItem {
        width: calc(100% / 3);
        display: flex;
        align-items: center;
        justify-items: center;
        flex-direction: column;


        .balanceImg {
          width: 42rpx;
          height: 42rpx;
          margin-bottom: 6rpx;
        }

        .balanceContent {
          .balanceLabel {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFE3B4;
            text-align: center;
            font-style: normal;
          }

          .balanceValue {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #968E77;
            text-align: center;
            font-style: normal;
          }
        }

        // balanceClick
      }
    }

    .orderBox {
      width: 100%;
      margin-top: 30rpx;
      background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx 30rpx;

      .orderTitle {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        text-align: left;
        font-style: normal;
      }

      .orderList {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        .orderItem {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;

          .orderIcon {
            // width: 48rpx;
            // height: 48rpx;
            width: 42rpx;
            height: 42rpx;

            margin-bottom: 8rpx;
          }

          .orderText {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .orderCount {
            position: absolute;
            right: 10%;
            top: 0;
            color: #fff;
            font-size: 12px;
            background-color: red;
            border-radius: 50%;
            width: 24rpx;
            height: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .oftenList {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        align-items: center;

        .oftenItem {
          width: calc(100% / 4);
          display: flex;
          flex-direction: column;
          align-items: center;

          .oftenIcon {
            // width: 72rpx;
            // height: 72rpx;

            width: 42rpx;
            height: 42rpx;
            margin-bottom: 4rpx;
          }

          .oftenText {
            font-family: "PingFangSC";
            font-weight: 400;
            font-size: 24rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }

  .pageBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-image: url("https://eshangtech.com/minTestImg/newBackg.png");
    background-image: url("https://eshangtech.com/wanmeiyizhanImg/app/userCenterBg.png");
    background-size: 100% 100%;
    z-index: 1;
  }
}

// .page-body {
//   // background #ffffff
//   padding: 24rpx 32rpx;
//   // padding-bottom: 20rpx;
//   box-sizing: border-box;
//   background: linear-gradient(180deg, #F0F4FF 0%, #F6F7F9 100%);
//   padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
//   min-height: 100vh;

//   .userDetailBox {
//     width: 100%;
//     background: #FFFFFF;
//     border-radius: 8rpx;
//     box-sizing: border-box;
//     padding: 24rpx 32rpx;
//     margin-bottom: 32rpx;

//     .userBox {
//       width: 100%;
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       box-sizing: border-box;
//       padding-bottom: 24rpx;
//       border-bottom: 1px solid #F3F3F3;

//       .userLeft {
//         display: flex;
//         align-items: center;

//         .userImgBox {
//           width: 104rpx;
//           height: 104rpx;
//           border-radius: 50%;
//           overflow: hidden;

//           .avatarBtn {
//             width: 100%;
//             height: 100%;
//             padding: 0;

//             .headerImg {
//               width: 100%;
//               height: 100%;
//             }
//           }
//         }

//         .userDetail {
//           margin-left: 24rpx;
//           // display: flex;
//           // flex-direction: column;
//           // justify-content: space-between;
//           height: 104rpx;

//           .userName {
//             font-family: PingFangSC, PingFang SC;
//             font-weight: 400;
//             font-size: 28rpx;
//             color: #130F05;
//             line-height: 44rpx;
//             text-align: justify;
//             font-style: normal;
//             margin-bottom: 8rpx;
//           }

//           .identity {
//             font-family: PingFangSC, PingFang SC;
//             font-weight: 500;
//             font-size: 22rpx;
//             color: #c79519;
//             line-height: 32rpx;
//             text-align: justify;
//             font-style: normal;
//             background: #faf3e2;
//             border-radius: 16rpx 16rpx 16rpx 0rpx;
//             padding: 2rpx 6rpx;
//           }
//         }
//       }

//       .codeBox {
//         width: 80rpx;
//         box-sizing: border-box;
//         padding: 4rpx;
//         display: flex;
//         flex-direction: column;

//         .codeImg {
//           width: 64rpx;
//           height: 64rpx;
//         }

//         .codeText {
//           font-family: PingFangSC, PingFang SC;
//           font-weight: 400;
//           font-size: 22rpx;
//           color: #130F05;
//           line-height: 32rpx;
//           text-align: justify;
//           font-style: normal;
//           white-space: nowrap;
//         }
//       }
//     }

//     .propertyBox {
//       width: 100%;
//       display: flex;
//       box-sizing: border-box;
//       padding-top: 24rpx;

//       .propertyItem {
//         width: calc((100% / 2));
//         display: flex;
//         flex-direction: column;
//         justify-content: center;
//         align-items: center;

//         .propertyLabel {
//           font-family: PingFangSC, PingFang SC;
//           font-weight: 400;
//           font-size: 28rpx;
//           color: #130F05;
//           line-height: 40rpx;
//           text-align: left;
//           font-style: normal;
//         }

//         .propertyValue {
//           font-family: PingFangSC, PingFang SC;
//           font-weight: 400;
//           font-size: 28rpx;
//           color: #BA922F;
//           line-height: 40rpx;
//           text-align: left;
//           font-style: normal;
//         }
//       }
//     }
//   }

//   .funListBox {
//     width: 100%;
//     background: #fff;
//     border-radius: 8rpx;
//     box-sizing: border-box;
//     padding: 0 32rpx;

//     .funItem {
//       padding: 32rpx 0;
//       display: flex;
//       align-items: center;
//       border-bottom: 1px solid #F5F6F7;

//       .funIcon {
//         width: 40rpx;
//         height: 40rpx;
//         margin-right: 12rpx;
//       }

//       .funName {
//         font-family: PingFangSC, PingFang SC;
//         font-weight: 400;
//         font-size: 28rpx;
//         color: #130F05;
//         line-height: 40rpx;
//         text-align: left;
//         font-style: normal;
//       }

//       .gray {
//         color: #c5c6c7;
//       }
//     }
//   }
// }

// .user-card {
//   display: flex;
//   height: 278rpx;
//   color: #3e4148;
//   border-radius: 20rpx;
//   flex-direction: column;
//   // align-items center
//   // justify-content center
//   background-image: url('https://eshangtech.com/ShopICO/user-card.png'); // eshangtech.com/ShopICO/user-card.png)
//   background-size: cover;
//   background-position: center;
// }

// .photo {
//   width: 100rpx;
//   height: 100rpx;
//   border-radius: 50%;
//   overflow: hidden;
//   margin-right: 20rpx;
// }

// .user-card-top {
//   display: flex;
//   // justify-content space-between
//   color: #41414b;
//   box-sizing: border-box;
//   padding: 40rpx 40rpx;
//   width: 100%;
//   font-size: 28rpx;
//   position: relative;
//   align-items: center;
// }

// .novip {
//   background: url('https://eshangtech.com/ShopICO/nohavevip.png') no-repeat left center; // eshangtech.com/ShopICO/nohavevip.png) no-repeat left center
//   background-size: contain;
//   height: 30rpx;
//   width: 160rpx;
// }

// .user-btn {
//   background: url('https://eshangtech.com/ShopICO/join-vip.png') no-repeat center; // eshangtech.com/ShopICO/join-vip.png) no-repeat center
//   background-size: contain;
//   color: #414141;
//   height: 54rpx;
//   width: 176rpx;
//   border-radius: 28rpx;
// }

// .ico-menu {
//   width: 34rpx;
//   height: 34rpx;
//   vertical-align: middle;
//   margin-right: 12rpx;
// }

// .name-text {
//   line-height: 50rpx;
//   font-size: 32rpx;
//   color: #28292d;
// }

// .user-tab {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   height: 138rpx;
//   width: 100%;
//   background-color: #2C2C2C;
//   position: relative;
//   top: -20rpx;
//   font-family: 'PingFang SC Medium';
//   padding: 0 30rpx;
//   box-sizing: border-box;
// }

// .u-t-unit {
//   font-size: 12px;
//   color: #D5C59D;
//   width: 40%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   flex-direction: column;
//   height: 100%;
// }

// .user-tab-num {
//   margin-top: 12rpx;
//   color: #D5C59D;
//   font-size: 28rpx;
// }

// .code-cont-box {
//   padding: 24rpx 0 24rpx 24rpx;
//   border-radius: 12rpx;
//   display: flex;
//   align-items: center;
//   background-color: #fff;
//   margin: 0 30rpx 30rpx;
// }

// .code-title {
//   font-size: 24rpx;
//   width: 100rpx;
// }

// .code-text {
//   font-size: 30rpx;
//   color: #498fe2;
//   width: 370rpx;
// }

// .code-btn {
//   font-size: 24rpx;
//   color: #498fe2;
//   width: 192rpx;
//   text-align: center;
//   border-left: 1rpx solid #eee;
// }

// .list-num {
//   color: #A4A5A8;
//   margin-right: 20rpx;
//   font-size: 24rpx;
//   display: inline-block;
//   vertical-align: middle;
//   font-family: 'PingFang SC Medium';
// }

// .user-menu {
//   margin: 0 30rpx;
//   padding: 0 30rpx;
//   background: #fff;
//   border-radius: 12rpx;
// }

// .my-list + .my-list {
//   border-top: 1rpx solid #eee;
// }

// .my-list {
//   height: 80rpx;
//   padding: 16rpx 0rpx;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   font-size: 26rpx;
//   color: #383838;
// }

// .list-title {
//   flex: 0.5;
//   display: flex;
//   align-items: center;
//   font-family: 'PingFang SC Regular';
// }

// .list-title span {
//   flex: 0.7;
// }

// .my-list image, .spread-view image {
//   vertical-align: middle;
//   margin-right: 18rpx;
// }

// image.my-ico1 {
//   width: 35rpx;
//   height: 31rpx;
// }

// image.my-ico2 {
//   width: 35rpx;
//   height: 28rpx;
// }

// image.my-ico3 {
//   width: 35rpx;
//   height: 26rpx;
// }

// image.my-ico4 {
//   width: 17rpx;
//   height: 30rpx;
// }

// image.my-ico5 {
//   width: 35rpx;
//   height: 31rpx;
// }

// .no-border {
//   border: none;
// }

// .pop-box {
//   width: 588rpx;
//   height: 256rpx;
//   text-align: center;
//   padding: 40rpx 0;
//   border-radius: 30rpx;
//   overflow: hidden;
// }

// .pop-title {
//   font-size: 32rpx;
// }

// .pop-body {
//   font-size: 28rpx;
//   margin-top: 36rpx;
// }

// .popbtn-box {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   margin-top: 72rpx;
// }

// .popbtn {
//   height: 60rpx;
//   width: 208rpx;
//   border-radius: 32rpx;
//   text-align: center;
//   font-size: 24rpx;
//   line-height: 60rpx;
// }

// .popbtn+.popbtn {
//   margin-left: 60rpx;
// }

// .cancel-btn {
//   border: 1rpx solid #616161;
//   color: #616161;
// }

// .confirm-btn {
//   background: #515151;
//   color: #fff;
// }

// // 营销
// .spread-view {
//   border-radius: 12rpx;
//   background: #fff;
//   margin: 0 30rpx 24rpx 30rpx;
//   font-size: 26rpx;
//   padding: 24rpx 0;
// }

// .spread-tab {
//   margin-top: 16rpx;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
// }

// .spread-tab .u-t-unit {
//   color: #B89051;
// }

// .spread-tab .user-tab-num {
//   color: #B89051;
//   margin-bottom: 12rpx;
// }

// .down-img-btn {
//   text-align: center;
//   padding: 32rpx 0;
//   background: #fff;
//   position: absolute;
//   bottom: 0;
//   width: 100%;
//   left: 0;
// }</style>
