<template>
  <view class="main">

    <view class="fixedHeader" :style="{ height: menu.bottom + 'px' }"></view>

    <view class="pageTop" :style="{ paddingTop: menu.bottom + 'px' }">

      <!-- 用户信息内容 -->
      <view class="userInfoBox">
        <!-- 头像内容 -->
        <view class="headerImgBox">
          <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
            v-if="userInfo && userInfo.MEMBERSHIP_ID">
            <image class="headerImg" :src="WXProfile ||
              (userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
                ? userInfo.MEMBERSHIP_HEADIMAGEURL
                : '')
              " />
          </button>
        </view>

        <view class="userInfo">
          <view class="userInfoLeft">
            <view class="userInfoLeftTop">
              <view class="userName">{{ inShop === 2 ? (userInfo.MEMBERSHIP_NAME || user.MEMBERSHIP_NAME || "微信用户") :
                (userInfo.Membership_NickName || userInfo.NICK_NAME || userInfo.MEMBERSHIP_NAME || "未填写名称") }}</view>
              <view class="userLevel">
                <image class="userLevelIcon" src="https://eshangtech.com/caiyunyiImg/levelIcon.png" />
                <view class="userLevelName">{{ user.MEMBERSHIP_LEVEL_TEXT || "" }}</view>
              </view>
              <view class="userSetting" @click="hanldGoConfig">
                <image class="userSettingIcon" src="https://eshangtech.com/caiyunyiImg/userSettingIcon.png" />
              </view>
            </view>
            <view class="userInfoLeftBottom">
              <view class="bindCarBox" @click="handleGoBindCar">{{ cards ? cards : "未绑定爱车" }}</view>
              <view class="userCollect" @click="handleGoCollect">我的收藏</view>
            </view>
          </view>

          <view class="userInfoRight" @click="handleGoUserCode">
            <image class="userCodeImg" src="https://eshangtech.com/caiyunyiImg/userCodeImg.png" />
            <view class="userCodeText">会员码</view>
          </view>
        </view>
      </view>

      <!-- 优惠券信息 -->
      <view class="couponBox">
        <view class="CouponContent">
          <view class="CouponItem" @click="handleGoCoupon">
            <view class="CouponItemValue">{{ userInfo.COUPON_COUNT || 0 }}</view>
            <view class="CouponItemLabel">优惠券</view>
          </view>
          <view class="line"></view>
          <view class="CouponItem" @click="handleGoPoint">
            <view class="CouponItemValue">{{
              $utils.handleFormatNumber(userInfo.MEMBERSHIP_POINT || 0)
              }}</view>
            <view class="CouponItemLabel">积分</view>
          </view>
          <view class="line"></view>
          <view class="CouponItem" @click="hanldGoBalance">
            <view class="CouponItemValue">{{
              $utils.handleFormatNumber(userInfo.ACCOUNT_BALANCE || 0)
              }}</view>
            <view class="CouponItemLabel">余额</view>
          </view>
        </view>
      </view>
    </view>

    <!-- {{ showErrorText || "" }} -->

    <view class="pageContent">
      <!-- 我的订单 -->
      <view class="userOrder">
        <view class="userOrderTop" @click="handleGoOrder(0, '')">
          <view class="userOrderTitle">我的订单</view>
          <image class="userOrderMoreIcon" src="https://eshangtech.com/caiyunyiImg/moreIcon.png" />
        </view>

        <view class="userOrderBottom">
          <view class="userOrderBottomItem" @click="handleGoOrder(1, '')">
            <img class="userOrderBottomItemImg" src="https://eshangtech.com/caiyunyiImg/orderStatus1.png" />
            <view class="userOrderBottomItemText">未付款</view>
            <view class="orderCount" v-if="mallOrderCountList[0] > 0">{{ mallOrderCountList[0] }}</view>
          </view>

          <view class="userOrderBottomItem" @click="handleGoOrder(2, '')">
            <img class="userOrderBottomItemImg" src="https://eshangtech.com/caiyunyiImg/orderStatus2.png" />
            <view class="userOrderBottomItemText">待发货</view>
            <view class="orderCount" v-if="mallOrderCountList[1] > 0">{{ mallOrderCountList[1] }}</view>
          </view>

          <view class="userOrderBottomItem" @click="handleGoOrder(3, '')">
            <img class="userOrderBottomItemImg" src="https://eshangtech.com/caiyunyiImg/orderStatus3.png" />
            <view class="userOrderBottomItemText">待收货</view>
            <view class="orderCount" v-if="mallOrderCountList[2] > 0">{{ mallOrderCountList[2] }}</view>
          </view>

          <view class="userOrderBottomItem" @click="handleGoOrder(4, '')">
            <img class="userOrderBottomItemImg" src="https://eshangtech.com/caiyunyiImg/orderStatus4.png" />
            <view class="userOrderBottomItemText">待评价</view>
          </view>

          <view class="userOrderBottomItem" @click="handleGo('/pages/order/buyOrder/index?type=6')">
            <img class="userOrderBottomItemImg" src="https://eshangtech.com/caiyunyiImg/orderStatus5.png" />
            <view class="userOrderBottomItemText">退换货</view>
          </view>
        </view>
      </view>

      <view class="orderFun" v-if="false">
        <view class="boxTitleTop" @click="handleGoOrder(0, '')">
          <text class="boxTitle">商城订单</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
        <view class="orderContent">
          <view class="orderLeft">
            <view class="orderFunItem" v-for="(item, index) in orderFunList" :key="index"
              @click="handleGoOrder(item.value, '')">
              <image class="orderFunIcon" :src="item.src" />
              <text class="orderFunText">{{ item.label }}</text>
            </view>
          </view>

          <view class="orderRight">
            <view class="orderFunItem" @click="handleGo(`/pages/order/buyOrder/index?type=6`)">
              <image class="orderFunIcon" src="/static/images/home/afterSales.svg" />
              <text class="orderFunText">退换/售后</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 工会之家订单栏 -->
      <view class="orderFun" v-if="false">
        <view class="boxTitleTop" @click="handleGoOrder(0, 'UnionMall')">
          <text class="boxTitle">工会订单</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
        <view class="orderContent">
          <view class="orderLeft">
            <view class="orderFunItem" v-for="(item, index) in orderFunList" :key="index"
              @click="handleGoOrder(item.value, 'UnionMall')">
              <image class="orderFunIcon" :src="item.src" />
              <text class="orderFunText">{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 我的点餐订单栏 -->
      <view class="orderFun">
        <view class="boxTitleTop" @click="handleGoFoodOrder(0)">
          <text class="boxTitle">我的点餐</text>
          <image class="rightArrow" src="/static/images/home/rightArrow.svg" />
        </view>
        <view class="orderContent">
          <view class="newOrderLeft" style="width: 100%; padding-right: 0">
            <view class="orderFunItem" v-for="(item, index) in foodFunList" :key="index"
              @click="handleGoFoodOrder(item.value)">
              <image class="orderFunIcon" :src="item.src" />
              <text class="orderFunText">{{ item.label }}</text>
              <view class="orderCount" v-if="item.orderCount > 0">{{ item.orderCount }}</view>
            </view>
          </view>
        </view>
      </view>



      <!-- 常用功能 -->
      <view class="oftenFunBox">
        <view class="ofternFunTitle">常用功能</view>

        <view class="funListBox">
          <view class="funItemBox" @click="handleGoNormal({ value: 1 })">
            <image class="funItemImg" src="/static/images/home/memberBenefits.svg" />
            <view class="funItemText">会员权益</view>
          </view>
          <view class="funItemBox" @click="handleGoNormal({ value: 2 })">
            <image class="funItemImg" src="/static/images/home/serviceIcon.svg" />
            <view class="funItemText">我的爱车</view>
          </view>
          <view class="funItemBox" @click="handleGoNormal({ value: 3 })">
            <image class="funItemImg" src="/static/images/home/suggestion.svg" />
            <view class="funItemText">建议反馈</view>
          </view>
        </view>
      </view>


      <!-- 客服帮助 -->
      <view class="customerServiceBox">
        <view class="customerServiceTitle">客服帮助</view>

        <view class="customerServiceContent">
          <view class="customerServiceItem">
            <view class="customerServiceItemTitle">客服帮助</view>
            <view class="customerServiceItemContent">伴您行程无忧</view>
          </view>
          <view class="customerServiceItem customerServiceItemBg2">
            <view class="customerServiceItemTitle">服务热线</view>
            <view class="customerServiceItemContent" style="color: #182145;">伴您行程无忧</view>
          </view>
        </view>
      </view>

      <!-- 服务区详情 -->
      <view class="serviceDetail" @click="handleGoDetail" v-if="false">
        <view class="detailTop">
          <view class="detailImg">
            <image v-if="
              serviceDetail.ImageLits && serviceDetail.ImageLits.length > 0
            " class="img" :src="serviceDetail.ImageLits[0]" />
            <image class="img" v-else src="/static/images/home/defaultIcon.png" />
          </view>
          <view class="detailRight">
            <view class="detailTop">
              <view class="title">{{
                serviceDetail.SERVERPART_NAME || "-"
              }}</view>
              <view class="status">
                <span class="statusText">营业中</span>
              </view>
            </view>

            <view class="detailBottom">
              <span class="distance">{{ serviceDetail.SERVERPART_DISTANCE || "-" }}km</span>
              <span class="addressText">{{
                serviceDetail.SERVERPART_ADDRESS || "-"
              }}</span>
            </view>
          </view>
          <image @click.stop="handleGoMap" class="navigation" src="/static/images/home/navigationIcon.svg" />
        </view>

        <view class="detailBottom">
          <view class="detailBottomItem">

            <image class="detailIcon" :src="serviceDetail.haveREFUELINGGUN
              ? '/static/images/home/serviceGasoline.svg'
              : '/static/images/home/noServiceGasoline.svg'
              " />
            <span class="detailText">加油站</span>
          </view>
          <view class="detailBottomItem">
            <image class="detailIcon" :src="serviceDetail.HASCHARGE
              ? '/static/images/home/serviceCharge.svg'
              : '/static/images/home/noServiceCharge.svg'
              " />
            <span class="detailText">充电桩</span>
          </view>
          <view class="detailBottomItem">
            <image class="detailIcon" :src="serviceDetail.havePARKING
              ? '/static/images/home/carStop.svg'
              : '/static/images/home/noCarStop.svg'
              " />
            <span class="detailText">停车场</span>
          </view>
          <view class="detailBottomItem">
            <image class="detailIcon" :src="serviceDetail.haveWC
              ? '/static/images/home/toilet.svg'
              : '/static/images/home/noToilet.svg'
              " />
            <span class="detailText">卫生间</span>
          </view>
          <view class="detailBottomItem">
            <image class="detailIcon" :src="serviceDetail.HASMOTHER
              ? ' /static/images/home/badyHome.svg'
              : '/static/images/home/noBadyHome.svg'
              " />
            <span class="detailText">母婴室</span>
          </view>
          <view class="detailBottomItem">
            <image class="detailIcon" :src="serviceDetail.HASPILOTLOUNGE
              ? '/static/images/home/serviceDriverHome.svg'
              : '/static/images/home/noServiceDriverHome.svg'
              " />
            <span class="detailText">司机之家</span>
          </view>
        </view>

        <view class="stateGrid">
          <view class="leftGrid">
            <text class="gridText">交投新能源</text>
            <text class="fastCharg">快充</text>
          </view>
          <view class="rightGrid">
            <text class="other">空</text>
            <text class="have">{{ chargingObj.use || "0" }}</text>
            <text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
            <text class="all" v-else>/{{ serviceDetail.sumDetail.STATEGRIDCHARGE || "0" }}</text>
          </view>
        </view>
      </view>

    </view>
    <tabbar v-if="inShop === 0" :page="'/pages/user/index'" />
    <shop-tabbar v-if="inShop > 0" :page="`/pages/user/index`"
      :pageType="inShop === 1 ? '' : inShop === 2 ? 'UnionMall' : ''" :shopCarLength="shopCarListCount" />

  </view>
</template>

<script>
import { handleSaveOrderStore } from '../../utils/publicMethods'
import { mapGetters } from "vuex";
import tabbar from "../../components/tabbar.vue";
import shopTabbar from "../../components/shopTabbar.vue";
export default {
  components: { tabbar, shopTabbar },
  data() {
    return {
      pageType: "", // spring 春节模式
      menu: {},
      orderFunList: [
        {
          label: "待付款",
          value: 1,
          src: "/static/images/home/obligationIcon.svg",
        },
        {
          label: "待发货",
          value: 2,
          src: "/static/images/home/shipmentIcon.svg",
        },
        {
          label: "待收货",
          value: 3,
          src: "/static/images/home/receiptOfGoods.svg",
        },
        {
          label: "待评价",
          value: 4,
          src: "/static/images/home/evaluatedIcon.svg",
        },
      ], // 我的订单前面四个
      commonFunList: [
        {
          label: "会员权益",
          value: 1,
          src: "/static/images/home/memberBenefits.svg",
          springSrc: "/static/images/home/springMemberBenefits.svg",
        },
        {
          label: "我的爱车",
          value: 2,
          src: "/static/images/home/serviceIcon.svg",
          springSrc: "/static/images/home/springService.svg",
        },
        {
          label: "建议反馈",
          value: 3,
          src: "/static/images/home/suggestion.svg",
          springSrc: "/static/images/home/springSuggestion.svg",
        },
      ], // 常用功能
      foodFunList: [
        {
          label: "待付款",
          value: 1,
          src: "/static/images/home/obligationIcon.svg",
        },
        {
          label: "待接单",
          value: 2,
          src: "/static/images/home/shipmentIcon.svg",
        },
        {
          label: "制作中",
          value: 3,
          src: "/static/images/home/receiptOfGoods.svg",
        },
        {
          label: "待评价",
          value: 4,
          src: "/static/images/home/evaluatedIcon.svg",
        },
        {}
      ],
      cards: "",
      userInfo: {},
      safeHeight: 0,
      serviceDetail: {}, // 当前服务区的详情
      seat: {},
      chargingObj: {},
      inShop: 0,// 判断是否在商城里面
      shopCarListCount: 0, // 购物车商品数量
      showErrorText: "",
      mallOrderCountList: [0, 0, 0],// 商城订单的数量
      foodOrderCountList: [0, 0, 0],// 点餐订单的数量
    };
  },
  async onLoad() {
    if (!this.user.MEMBERSHIP_ID) {
      uni.navigateTo({ url: "/pages/register/index" });
    }
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log('this.menuthis.menuthis.menu', this.menu);

    let height = uni.getStorageSync("safeHeight");
    this.safeHeight = Number(height);




    // 拿到新的缓存数据
    let userData = uni.getStorageSync('userData')
    if (userData) {
      this.userInfo = userData
      this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
    }
    // 拿用户信息
    await this.handleGetUserDetail();

    let shopOrderStatus = uni.getStorageSync('shopOrderStatus')
    if (!shopOrderStatus) {
      // 拿到订单信息
      await this.handleGetOrderDetail()
    }


    // 拿到订单信息
    // await this.handleGetOrderDetail()
    // 拿车牌号
    // await this.handleGetCarCode();


    this.$utils.addUserBehaviorNew({
      behaviorRecordDesc: "进入了我的页面"
    });
  },
  async onShow() {
    let inShop = uni.getStorageSync("inShop");
    this.inShop = inShop
    console.log('this.inShop', JSON.parse(JSON.stringify(this.inShop)));


    // 拿到订单的缓存数据
    let shopOrderStatus = uni.getStorageSync('shopOrderStatus')
    let foodOrderStatus = uni.getStorageSync('foodOrderStatus')

    this.mallOrderCountList = shopOrderStatus ? shopOrderStatus : []

    if (foodOrderStatus && foodOrderStatus.length > 0) {
      let foodTab = JSON.parse(JSON.stringify(this.foodFunList))
      foodTab.forEach((item) => {
        if (item.value === 1) {
          item.orderCount = foodOrderStatus[0] || 0
        } else if (item.value === 2) {
          item.orderCount = foodOrderStatus[1] || 0
        } else if (item.value === 3) {
          item.orderCount = foodOrderStatus[2] || 0
        }
      })
      this.foodFunList = foodTab
    }

    // if (!this.user.MEMBERSHIP_ID) {
    //   uni.navigateTo({ url: "/pages/register/index" });
    // }



    // let seatInfo = uni.getStorageSync("seatInfo");
    // if (seatInfo) {
    //   this.seat = JSON.parse(seatInfo);
    // }

    // let currentService = uni.getStorageSync("currentService");
    // if (currentService) {
    //   await this.handleGetServiceDetail(currentService.SERVERPART_ID);

    //   let obj = this.handleMergeDetail(currentService)
    //   let newObj = {
    //     ...currentService,
    //     sumDetail: obj,
    //     haveREFUELINGGUN: obj.haveREFUELINGGUN,
    //     HASCHARGE: obj.HASCHARGE,
    //     havePARKING: obj.havePARKING,
    //     haveWC: obj.haveWC,
    //     HASMOTHER: obj.HASMOTHER,
    //     HASPILOTLOUNGE: obj.HASPILOTLOUNGE,
    //   }
    //   this.serviceDetail = newObj
    //   this.handleGetChargingStation(this.serviceDetail);
    // }

    if (this.inShop === 2 || this.inShop === 1) {
      // 判断当前的购物车里面是否有东西
      let shopCarList = [];
      if (this.inShop === 2) {
        shopCarList = this.$store.state.unionMyShopCar;
      } else {
        shopCarList = this.$store.state.myShopCar;
      }
      console.log("shopCarList", shopCarList);
      let count = 0;
      if (shopCarList && shopCarList.length > 0) {
        shopCarList.forEach((item) => {
          count += item.count;
        });
      }
      this.shopCarListCount = count;
    }



    // 拿到新的缓存数据
    let userData = uni.getStorageSync('userData')
    if (userData) {
      this.userInfo = userData
      this.cards = userData.LicencePlate.List && userData.LicencePlate.List.length > 0 ? userData.LicencePlate.List[0].License_Plate : ""
      this.$forceUpdate()
    }
    console.log('userDatauserDatauserData', userData);


    await this.handleGetOrderDetail()

    this.$forceUpdate()


  },

  computed: {
    ...mapGetters({
      user: "user",
    }),
    phone() {
      if (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 "";
      }
    },
  },
  onUnload() {
    handleSaveOrderStore()
  },
  methods: {
    // 跳转到余额
    hanldGoBalance() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/useConfig/balanceManage`,
      });
    },
    handleGoDetail() {
      uni.navigateTo({
        url: `/pages/serviceDetail/index?pageType=userInfo`,
      });
    },
    // 打开地图的跳转
    handleGoMap() {
      uni.openLocation({
        latitude: this.serviceDetail.SERVERPART_Y * 1,
        longitude: this.serviceDetail.SERVERPART_X * 1,
        scale: 16, // 缩放比例
        name: this.serviceDetail.SERVERPART_NAME,
        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
        },
        fail(err) {
        },
      });
    },
    // 拿到服务区详情
    async handleGetServiceDetail(id) {
      if (!id) {
        return;
      }
      let req = {
        ServerpartId: id,
        latitude: this.seat.latitude,
        longitude: this.seat.longitude,
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      let obj = data.Result_Data;
      this.serviceDetail = obj;
      this.serviceDetail.sumDetail = this.handleMergeDetail(obj);
    },  // 合并服务区数据
    handleMergeDetail(obj) {
      let sumObj = {
        LIVESTOCKPACKING: 0, // 充电桩数
        STATEGRIDCHARGE: 0, // 国网充电桩数量
        LIAUTOCHARGE: 0, //  理想5C充电桩数量
        GACENERGYCHARGE: 0, //  广汽能源充电桩数量
        OTHERCHARGE: 0, // 其他充电桩数量
        REFUELINGGUN92: 0, // 加油枪92号
        REFUELINGGUN95: 0, //  加油枪95号
        REFUELINGGUN0: 0, // 加油枪0号
        HASPANTRY: 0, // 男厕数量
        HASWIFI: 0, // 女厕数量
        TOILETCOUNT: 0, // 潮汐厕位
        HASSHOWERROOM: 0, // 淋浴房
        HASWATERROOM: 0, // 开水器
        MICROWAVEOVEN: 0, // 微波炉
        WASHERCOUNT: 0, // 洗衣机数量
        SLEEPINGPODS: 0, // 睡眠仓
        HASPILOTLOUNGE: false, // 有无司机之家
        HASCHILD: false, // 有无车辆维修
        VEHICLEWATERFILLING: false, // 有无车辆加水
        SMALLPARKING: 0, // 轿车车位
        PACKING: 0, // 客车车位
        TRUCKPACKING: 0, // 货车车位
        DANPACKING: 0, // 危化品车位
        DININGBXCOUNT: 0, // 商铺数量
        DININGROOMCOUNT: 0, // 餐饮店
        HASBACKGROUNDRADIO: 0, // 便利店
        POINTCONTROLCOUNT: 0, // 客房
        BUSINESSTYPE: "",
        TOILET_PAPER: 0, // 厕纸巾
        MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
        NURSING_TABLE: 0, // 哺乳桌
        BABY_COT: 0, // 婴儿床
        CHANGING_TABLE: 0, // 尿布台
        DROOMWATER_DISPENSER: 0, // 司机之家饮水机
        haveREFUELINGGUN: false, // 判断有无加油
        havePARKING: false, // 判断有无停车场
        haveWC: false, // 判断有无卫生间
        HASMOTHER: false
      };
      if (obj.RegionInfo && obj.RegionInfo.length > 0) {
        obj.RegionInfo.forEach((item) => {
          sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING;
          sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE;
          sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE;
          sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE;
          sumObj.OTHERCHARGE += item.OTHERCHARGE;
          sumObj.REFUELINGGUN92 += item.REFUELINGGUN92;
          sumObj.REFUELINGGUN95 += item.REFUELINGGUN95;
          sumObj.REFUELINGGUN0 += item.REFUELINGGUN0;
          sumObj.HASPANTRY += item.HASPANTRY;
          sumObj.HASWIFI += item.HASWIFI;
          sumObj.TOILETCOUNT += item.TOILETCOUNT;
          sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
          sumObj.HASWATERROOM += item.HASWATERROOM;
          sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN;
          sumObj.WASHERCOUNT += item.WASHERCOUNT;
          sumObj.SLEEPINGPODS += item.SLEEPINGPODS;
          sumObj.SMALLPARKING += item.SMALLPARKING;
          sumObj.PACKING += item.PACKING;
          sumObj.TRUCKPACKING += item.TRUCKPACKING;
          sumObj.DANPACKING += item.DANPACKING;
          sumObj.BUSINESSTYPE = item.BUSINESSTYPE;
          sumObj.TOILET_PAPER += item.TOILET_PAPER;
          sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
          sumObj.NURSING_TABLE += item.NURSING_TABLE;
          sumObj.BABY_COT += item.BABY_COT;
          sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
          sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;

          if (item.HASMOTHER) {
            sumObj.HASMOTHER = true
          }



          if (sumObj.LIVESTOCKPACKING > 0 || sumObj.STATEGRIDCHARGE > 0 || sumObj.LIAUTOCHARGE > 0 || sumObj.GACENERGYCHARGE > 0 || sumObj.OTHERCHARGE > 0) {
            sumObj.HASCHARGE = true;
          }

          if (item.HASPILOTLOUNGE) {
            sumObj.HASPILOTLOUNGE = true;
          }
          if (item.VEHICLEWATERFILLING) {
            sumObj.VEHICLEWATERFILLING = true;
          }
          if (item.HASCHILD) {
            sumObj.HASCHILD = true;
          }
          sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
          sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
          sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
          sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;

          if (
            sumObj.REFUELINGGUN92 > 0 ||
            sumObj.REFUELINGGUN95 > 0 ||
            sumObj.REFUELINGGUN0 > 0
          ) {
            sumObj.haveREFUELINGGUN = true;
          }

          if (
            sumObj.SMALLPARKING > 0 ||
            sumObj.PACKING > 0 ||
            sumObj.TRUCKPACKING > 0 ||
            sumObj.DANPACKING > 0
          ) {
            sumObj.havePARKING = true;
          }
          if (
            sumObj.HASPANTRY > 0 ||
            sumObj.HASWIFI > 0 ||
            sumObj.TOILETCOUNT > 0
          ) {
            sumObj.haveWC = true;
          }
        });
      }
      return sumObj;
    },
    // 查询现在的充电桩
    async handleGetChargingStation(obj) {
      let _this = this;
      uni.request({
        url: "https://xny.yciccloud.com/interconnect/api/interconnection/open/getConnectList", //仅为示例，并非真实接口地址。
        method: "POST",
        success: (res) => {
          let list = res.data;
          let result = [];
          if (list && list.length > 0) {
            list.forEach((item) => {
              if (
                (item.stationName.indexOf("读书铺") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("读书铺") !== -1) ||
                (item.stationName.indexOf("鸡街") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("鸡街") !== -1) ||
                (item.stationName.indexOf("星云") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("星云") !== -1) ||
                (item.stationName.indexOf("富民") !== -1 &&
                  obj.SERVERPART_NAME.indexOf("富民") !== -1)
              ) {
                result.push(item);
              }
            });
          }
          let sum = 0;
          let have = 0;
          let use = 0;

          if (result && result.length > 0) {
            result.forEach((item) => {
              if (item.status === "50") {
                sum += 1;
              }
            });
          }
          if (sum > 0) {
            use = sum;
            if (obj.sumDetail.STATEGRIDCHARGE > 0) {
              if (obj.sumDetail.STATEGRIDCHARGE < result.length) {
                have = result.length;
              } else {
                have = obj.sumDetail.STATEGRIDCHARGE;
              }
            } else {
              have = result.length;
            }
          } else {
            have = obj.sumDetail.LIVESTOCKPACKING;
            let rank = Number(uni.getStorageSync("rankNumber"));
            if (rank > 0) {
            } else {
              rank = Math.random() * (0.7 - 0.5) + 0.5;
              uni.setStorageSync("rankNumber", rank);
            }
            use = Math.floor(have * rank);
          }
          _this.chargingObj = {
            have: have,
            use: use,
          };
          _this.$forceUpdate();
        },
      });
    },
    // 跳转会员设置
    hanldGoConfig() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: '/pages/useConfig/userConfig'
      })
    },
    // 跳转到积分页面
    handleGoPoint() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: '/pages/useConfig/pointsDetail'
      })
    },
    // 跳转券包
    handleGoCoupon() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: '/pages/homeFn/myCoupon/index'
      })
    },
    // 用户上传头像
    async onChooseAvatar(e) {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      let _this = this;
      _this.showErrorText = 1
      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;
          if (url) {
            let req = {
              membershipId: this.user.MEMBERSHIP_ID,
              headImgUrl: url,
            };
            _this.WXProfile = url;
            _this.showErrorText = _this.WXProfile
            const userInfoData = await _this.$api.$get(
              "/WeChat/UpdateMemberInfo",
              req
            );
            if (userInfoData.Result_Code === 100) {
              _this.handleGetUserDetail();
            }
          }
        },
        fail: (error) => {
          _this.showErrorText = JSON.stringify(error)
        }
      });
    },
    // 拿到用户详情
    async handleGetUserDetail() {
      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.userInfo = _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.$store.commit("setUser", _this.user);
            _this.$forceUpdate()
          } else {
            // _this.setUser({});
            _this.$store.commit("setUser", user);
          }
        });
    },
    // 跳转去售后 即已完成的列表
    handleGo(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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
    // 跳转去点餐订单页面
    handleGoFoodOrder(value) {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/order/foodOrder/index?type=${value}`,
      });
    },
    // 绑定车辆
    handleGoBindCar() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/bindCar/index`,
      });
    },
    // 拿到车牌号
    async handleGetCarCode() {
      let _this = this;
      uni.showLoading({ title: "加载中" });
      const res = await this.$api.getCoop({ action_type: "GetVehicleList" })
      let list = res.Result_Data.List;
      if (list && list.length > 0) {
        _this.cards = list[0].License_Plate;
      }
      uni.hideLoading();
    },
    // 常用功能的跳转
    handleGoNormal(obj) {
      console.log("obj", obj);
      if (obj.value === 1) {
        // 会员权益
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
        // this.handleShowPayCode();
      } else if (obj.value === 2) {
        // 我的爱车
        this.handleGoBindCar();
      } else if (obj.value === 3) {
        // 建议反馈
        uni.navigateToMiniProgram({
          shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
        });
      }
    },
    // // 调起付款码
    async handleShowPayCode() {
      let timeStamp = Math.ceil(new Date().getTime() / 1000);
      let nonceStr = Math.random().toString(36).substring(2, 8);
      let req = {
        appId: "wxee018fb96955552a",
        timeStamp: timeStamp,
        nonceStr: nonceStr,
        package: "1672298991",
        signType: "MD5",
      };
      let reqSign = {
        parameters: `appId=wxee018fb96955552a&nonceStr=${nonceStr}&package=mch_id=1672298991&signType=MD5&timeStamp=${timeStamp}`,
        // "wxee018fb96955552a\n" +
        // timeStamp +
        // "\n" +
        // nonceStr +
        // "\npackage=" +
        // req.package +
        // "\n",
      };

      const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
      console.log("data", data);
      wx.openOfflinePayView({
        appId: "wxee018fb96955552a",
        timeStamp: timeStamp,
        nonceStr: nonceStr,
        package: "1672298991",
        signType: "MD5",
        paySign: data.Result_Data,
        success(res) {
          console.log("res", res);
        },
      });
    },
    // 最底下的两个点击事件
    handleLastFun(value) {
      console.log("value", value);
      if (value === 1) {
        // 客服帮助
        // uni.navigateTo({
        //   url: `/pages/noDataPage/index`,
        // });
        wx.openCustomerServiceChat({
          extInfo: {
            url: "", // 客服链接
          }, // 客服信息
          corpId: "", //企业ID
          success(res) {
            console.log("res", res);
          },
        });
      } else if (value === 2) {
        // 服务热线
        uni.navigateTo({
          url: `/pages/noDataPage/index`,
        });
      }
    },
    // 跳转订单
    handleGoOrder(value, pageType) {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      if (value === 4) {
        uni.navigateTo({
          url: `/pages/evaluateList/index?pageType=${pageType}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/order/buyOrder/index?type=${value || ""
            }&pageType=${pageType}`,
        });
      }
    },
    // 跳转到选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
    },
    // 跳转到会员码页面
    handleGoUserCode() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/payfor/index",
      });
    },
    // 跳转去收藏页面
    handleGoCollect() {
      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) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url:
          "/pages/useConfig/FavoriteStore"
      });
    },
    async handleGetOrderDetail() {
      if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
        return;
      }
      // 商城订单数据
      const req = {
        action_type: "GetMallOrderList",
        salebillType: '3000,3001,3002,3999',
        salebillState: "",
        PageIndex: 1,
        pageSize: 99999,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
        noLoading: true
      };
      const data = await this.$api.postCoop(req);
      console.log('商城订单', data);
      if (data.ResultCode === "100") {
        let list = data.Data.List
        // 待付款
        let obligation = []
        // 待发货
        let pendingShipment = []
        // 待收货
        let pendingReceiptOfGoods = []

        if (list && list.length > 0) {
          list.forEach((item) => {
            if (item.SALEBILL_STATE === 1005) {
              obligation.push(item)
            } else if (item.SALEBILL_STATE === 1010) {
              pendingShipment.push(item)
            } else if (item.SALEBILL_STATE === 2010) {
              pendingReceiptOfGoods.push(item)
            }
          })
        }

        let mallOrderCountList = [obligation && obligation.length > 0 ? obligation.length : 0,
        pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0,
        pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0,]
        this.mallOrderCountList = mallOrderCountList
      } else {
        this.mallOrderCountList = [0, 0, 0]
      }

      uni.setStorageSync("shopOrderStatus", this.mallOrderCountList)

      const reqFood = {
        action_type: "GetOrderList",
        salebillType: 6000,
        salebillState: "",
        PageIndex: 1,
        pageSize: 99999,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
        noLoading: true
      };
      const dataFood = await this.$api.postCoop(reqFood);
      console.log('点餐订单', dataFood);
      if (dataFood.ResultCode === "100") {
        let list = dataFood.Data.List
        // 待付款
        let obligation = []
        // 待接单
        let pendingShipment = []
        // 制作中
        let pendingReceiptOfGoods = []

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

        let foodOrderCountList = [obligation && obligation.length > 0 ? obligation.length : 0,
        pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0,
        pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0,]
        // this.foodOrderCountList = foodOrderCountList
        let foodTab = JSON.parse(JSON.stringify(this.foodFunList))
        foodTab.forEach((item) => {
          if (item.value === 1) {
            item.orderCount = obligation && obligation.length > 0 ? obligation.length : 0
          } else if (item.value === 2) {
            item.orderCount = pendingShipment && pendingShipment.length > 0 ? pendingShipment.length : 0
          } else if (item.value === 3) {
            item.orderCount = pendingReceiptOfGoods && pendingReceiptOfGoods.length > 0 ? pendingReceiptOfGoods.length : 0
          }
        })
        this.foodFunList = foodTab
      } else {
        this.foodFunList = [
          {
            label: "待付款",
            value: 1,
            src: "/static/images/home/obligationIcon.svg",
          },
          {
            label: "待接单",
            value: 2,
            src: "/static/images/home/shipmentIcon.svg",
          },
          {
            label: "制作中",
            value: 3,
            src: "/static/images/home/receiptOfGoods.svg",
          },
          {
            label: "待评价",
            value: 4,
            src: "/static/images/home/evaluatedIcon.svg",
          },
        ]
      }

      uni.setStorageSync("foodOrderStatus", this.mallOrderCountList)
      this.$forceUpdate()
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #F5F5F5;

  .fixedHeader {
    width: 100vw;
    position: fixed;
    background-image: url('https://eshangtech.com/caiyunyiImg/userInfoBg.png');
    background-repeat: no-repeat;
    background-size: 100% 428rpx;
    top: 0;
    left: 0;
    z-index: 999999;
  }

  .pageTop {
    width: 100vw;
    height: 456rpx;
    background-image: url('https://eshangtech.com/caiyunyiImg/userInfoBg.png');
    background-repeat: no-repeat;
    background-size: 100% 428rpx;
    box-sizing: border-box;

    .userInfoBox {
      width: 100%;
      height: 136rpx;
      box-sizing: border-box;
      padding: 0 42rpx;
      display: flex;

      .headerImgBox {
        width: 136rpx;
        height: 136rpx;

        .avatarBtn {
          width: 136rpx;
          height: 136rpx;
          border-radius: 50%;
          border: 1px solid #fff;
          padding: 0 !important;

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

          }
        }
      }

      .userInfo {
        width: calc(100% - 170rpx);
        height: 100%;
        margin-left: 34rpx;
        display: flex;


        .userInfoLeft {
          width: calc(100% - 82rpx);
          box-sizing: border-box;
          padding: 16rpx 0 0 0;

          .userInfoLeftTop {
            display: flex;
            align-items: center;

            .userName {
              display: inline-block;
              max-width: 160rpx;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #FFFFFF;
              line-height: 40rpx;
              text-align: right;
              font-style: normal;
            }

            .userLevel {
              display: flex;
              align-items: center;
              margin-left: 14rpx;
              box-sizing: border-box;
              padding: 0 14rpx;
              border-radius: 32rpx;
              background-color: #2D2D2D;

              .userLevelIcon {
                width: 24rpx;
                height: 24rpx;
                margin-right: 8rpx;
              }

              .userLevelName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #F4DA7F;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }


            .userSetting {
              width: 48rpx;
              height: 48rpx;
              margin-left: 24rpx;

              .userSettingIcon {
                width: 100%;
                height: 100%;
              }
            }

          }

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

            .bindCarBox {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #2D2D2D;
              line-height: 34rpx;
              text-align: right;
              font-style: normal;
              padding: 4rpx 22rpx 2rpx 22rpx;
              border-radius: 32rpx;
              background-color: #D8D8D8;
            }

            .userCollect {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #2D2D2D;
              line-height: 34rpx;
              text-align: right;
              font-style: normal;
              padding: 4rpx 22rpx 2rpx 22rpx;
              border-radius: 32rpx;
              background-color: #D8D8D8;
              margin-left: 18rpx;

            }
          }

        }

        .userInfoRight {
          width: 82rpx;
          height: 100%;
          box-sizing: border-box;
          padding-top: 18rpx;

          .userCodeImg {
            width: 82rpx;
            height: 76rpx;
            margin-bottom: 4rpx;
          }

          .userCodeText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #F2CC93;
            line-height: 34rpx;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }

    .couponBox {
      width: 100%;
      height: 132rpx;
      margin-top: 36rpx;
      box-sizing: border-box;
      padding: 0 30rpx;

      .CouponContent {
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
        border-radius: 8rpx;
        box-sizing: border-box;
        padding: 20rpx 0;
        display: flex;
        align-items: center;

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

          .CouponItemValue {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 30rpx;
            color: #101010;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 2rpx;
          }

          .CouponItemLabel {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #333330;
            line-height: 44rpx;
            text-align: center;
            font-style: normal;
          }
        }

        .line {
          width: 2rpx;
          height: 48rpx;
          background-color: #B9B6B6;
          border-radius: 1rpx;
        }
      }



    }


  }



  .pageContent {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx 200rpx;

    .userOrder {
      width: 100%;
      background: #FFFFFF;
      border-radius: 14rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 22rpx 34rpx;

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

        .userOrderTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #222222;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
        }

        .userOrderMoreIcon {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .userOrderBottom {
        width: 100%;
        display: flex;
        margin-top: 42rpx;

        .userOrderBottomItem {
          width: 20%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;

          .userOrderBottomItemImg {
            width: 44rpx;
            height: 44rpx;
            margin-bottom: 12rpx;
          }

          .userOrderBottomItemText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 36rpx;
            text-align: right;
            font-style: normal;
          }

          .orderCount {
            position: absolute;
            min-width: 28rpx;
            min-height: 28rpx;
            text-align: center;
            top: -10rpx;
            right: 10rpx;
            color: #fff;
            background-color: red;
            border-radius: 50%;
            font-size: 20rpx;
          }
        }
      }
    }

    .oftenFunBox {
      width: 100%;
      margin-top: 24rpx;
      background: #FFFFFF;
      border-radius: 14rpx;
      box-sizing: border-box;
      padding: 22rpx 32rpx;

      .ofternFunTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

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

        .funItemBox {
          width: calc((100% - 48rpx) / 3);
          height: 136rpx;
          box-sizing: border-box;
          padding: 14rpx 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #F1F5FA;
          border-radius: 9rpx;

          .funItemImg {
            width: 64rpx;
            height: 64rpx;
            margin-bottom: 8rpx;
          }

          .funItemText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 40rpx;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }

    .customerServiceBox {
      width: 100%;
      margin-top: 24rpx;
      background: #FFFFFF;
      border-radius: 14rpx;
      box-sizing: border-box;
      padding: 22rpx 32rpx;

      .customerServiceTitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .customerServiceContent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;

        .customerServiceItem {
          width: calc((100% - 20rpx) / 2);
          height: 130rpx;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url('https://eshangtech.com/caiyunyiImg/customerServiceItem1.png');
          box-sizing: border-box;
          padding: 20rpx;

          .customerServiceItemTitle {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }

          .customerServiceItemContent {
            font-family: STYuanti-SC, STYuanti-SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #0754F3;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            margin-top: 8rpx;
          }
        }

        .customerServiceItemBg2 {
          background-image: url('https://eshangtech.com/caiyunyiImg/customerServiceItem2.png');
        }
      }

    }

    .serviceDetail {
      width: 100%;
      margin-top: 32rpx;
      box-sizing: border-box;
      padding: 24rpx;
      background: #ffffff;
      border-radius: 12rpx;

      .detailTop {
        width: 100%;
        display: flex;
        align-items: flex-start;
        position: relative;

        .detailImg {
          width: 160rpx;
          height: 136rpx;
          border-radius: 6rpx;
          overflow: hidden;
          margin-right: 20rpx;

          .img {
            width: 160rpx;
            height: 136rpx;
          }
        }

        .detailRight {
          width: calc(100% - 180rpx);
          height: 136rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .detailTop {
            display: flex;
            flex-direction: column;

            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;
              display: inline-block;
              width: 352rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-bottom: 4rpx;
            }

            .status {
              .statusText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 22rpx;
                color: #009f43;
                line-height: 32rpx;
                text-align: justify;
                font-style: normal;
                padding: 2rpx 6rpx;
                background: #e9f8ee;
                border-radius: 4rpx;
                display: inline-block;
              }
            }
          }

          .detailBottom {
            margin-top: 16rpx;

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

            .addressText {
              max-width: 342rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }

        .navigation {
          width: 64rpx;
          height: 64rpx;
          position: absolute;
          right: 0;
          top: 0;
        }
      }

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

        .detailBottomItem {
          width: calc(100% / 6);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .detailIcon {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 4rpx;
          }

          .detailText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #130f05;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .stateGrid {
        width: 100%;
        margin-top: 24rpx;
        background: #f6f6f6;
        border-radius: 12rpx;
        box-sizing: border-box;
        padding: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftGrid {
          display: flex;
          align-items: center;

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

          .gridText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #130f05;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-right: 12rpx;
          }

          .fastCharg {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
            line-height: 28rpx;
            text-align: justify;
            font-style: normal;
            display: inline;
            padding: 2rpx 6rpx;
            background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
            border-radius: 4rpx;
          }
        }

        .rightGrid {
          display: flex;
          align-items: center;

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

          .have {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 32rpx;
            color: #130f05;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-right: 4rpx;
          }

          .all {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 32rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }

    .orderFun {
      width: 100%;
      margin-top: 24rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 22rpx 34rpx;

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

        .boxTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .rightArrow {
          width: 24rpx;
          height: 24rpx;
        }
      }

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

        .orderLeft,
        .newOrderLeft {
          width: calc(100% - 108rpx);
          display: flex;
          justify-content: space-between;
          position: relative;
          box-sizing: border-box;
          padding-right: 44rpx;

          .orderFunItem {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;

            .orderFunIcon {
              width: 48rpx;
              height: 48rpx;
              margin-bottom: 16rpx;
            }

            .orderFunText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .orderCount {
              position: absolute;
              right: 10rpx;
              top: -10rpx;
              min-width: 28rpx;
              min-height: 28rpx;
              text-align: center;
              color: #fff;
              background-color: red;
              border-radius: 50%;
              font-size: 20rpx;
            }
          }
        }

        .orderLeft::after {
          content: "";
          width: 2rpx;
          height: 76rpx;
          background: #eeeeee;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .orderRight {
          width: 162rpx;
          box-sizing: border-box;
          padding-left: 44rpx;

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

            .orderFunIcon {
              width: 48rpx;
              height: 48rpx;
              margin-bottom: 16rpx;
            }

            .orderFunText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }
  }
}
</style>