提交

MrShi

17 小时以前 b099e758396f61b39d24cf5fa6be7bb0d10c2b4d

 small-program/pages/mine/mine.vue

@@ -1,634 +1,474 @@
<template>
   <view class="index">
      <view class="index-c">
   <view class="mine-page">
      <view class="top-bg"></view>
      <view class="nav-wrap">
         <view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
         <view class="index-c-title" :style="{ height: navHeight + 'px' }">
            <text class="index-c-title-logo">我的</text>
         </view>
         <view class="info">
            <view class="info-box">
               <view class="info-box-head" >
                  <view class="info-box-head-image" @click="jump(isLogin?1:5)">
                     <image v-if="userInfo.fullCoverImage&&userInfo.fullCoverImage !=''" :src="userInfo.fullCoverImage" mode="widthFix"></image>
                     <image v-else src="/static/icon/img@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="info-box-head-info" v-if="isLogin">
                     <view class="info-box-head-info-name"  @click="jump(1)">{{userInfo.nickName||'匿名'}}</view>
                     <view class="info-box-head-info-type" > 
                        <view class="info-box-head-info-type-val1" v-if="userInfo.useIdentity==1">用工接单方</view>
                        <view class="info-box-head-info-type-val" v-else>用工发布方</view>
                        <!-- <view class="info-box-head-info-type-wz" @click="editUseIdentity">切换</view> -->
                     </view> 
                  </view>
                  <view class="info-box-head-info" v-else @click="jump(5)">
                     <view class="info-box-head-info-name">点击登录</view> 
                     <view class="info-box-head-info-type">
                        <view class="info-box-head-info-type-wz">微信授权登录</view>
                     </view>
                  </view>
                  <view class="info-box-head-qiehuan" @click="editUseIdentity">
                     <image src="/static/icon/ic_change@2x.png" mode="widthFix"></image>
                     <text>切换身份</text>
                  </view>
         <view :style="{ width: '100%', height: navHeight + 'px' }"></view>
      </view>
      <view class="page-scroll">
         <view class="page-content">
            <view class="profile-card" @click="handleProfileClick">
               <image class="avatar" :src="userInfo.fullCoverImage ? userInfo.fullCoverImage : '/static/image/tx@2x.png'" mode="widthFix"></image>
               <view class="profile-copy">
                  <text class="login-text">{{ userInfo.nickName || '点击登录' }}</text>
               </view>
               <view class="info-box-label">账户余额</view>
               <view class="info-box-price">
                  <text>￥{{isLogin?((userInfo.amount|| 0)/100).toFixed(2) :0.00}}</text>
                  <view class="info-box-price-btn" @click="jump(isLogin?6:5)">去提现</view>
               <view v-if="userInfo" class="profile-tools">
                  <view class="tool-item" @click="toSetting">
                     <image class="tool-icon" src="/static/icon/ic_option@2x.png" mode="aspectFit"></image>
                  </view>
                  <!-- <view class="tool-item has-badge">
                     <image class="tool-icon" src="/static/icon/ic_notice@2x.png" mode="aspectFit"></image>
                     <view class="tool-badge" v-if="userInfo.hasMessage"></view>
                  </view> -->
               </view>
            </view>
         </view>
         <view class="statistics">
            <view class="statistics-box" v-if="!isLogin || userInfo.useIdentity !=1">
               <view class="statistics-item" @click="jumpOrderList('0')" >
                  <text>{{isLogin?(userInfo.userCenterVO.releaseTaskTotal||0):'-'}}</text>
                  <text>总发单数</text>
               </view>
               <view class="statistics-x"></view>
               <view class="statistics-item" @click="jumpOrderList('1')" >
                  <text class="redtxt">{{isLogin?(userInfo.userCenterVO.waitReceiveTotal||0):'-'}}</text>
                  <text>待接单</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('2')" >
                  <text>{{isLogin?(userInfo.userCenterVO.doingTotal||0):'-'}}</text>
                  <text>进行中</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('3')" >
                  <text>{{isLogin?(userInfo.userCenterVO.waitCommentTotal||0):'-'}}</text>
                  <text>待评价</text>
               </view>
            </view>
            <view class="statistics-box" v-else>
               <view class="statistics-item" @click="jumpOrderList('4')" >
                  <text>{{isLogin?(userInfo.userCenterVO.receiveTotal||0):'-'}}</text>
                  <text>已接单</text>
               </view>
               <view class="statistics-x"></view>
               <view class="statistics-item" @click="jumpOrderList('5')">
                  <text>{{isLogin?(userInfo.userCenterVO.taskingTotal||0):'-'}}</text>
                  <text>进行中</text>
               </view>
               <view class="statistics-item" @click="jumpOrderList('6')">
                  <text>{{isLogin?(userInfo.userCenterVO.doneTotal||0):'-'}}</text>
                  <text>已完成</text>
               </view> 
            </view>
         </view>
         <view class="guanggao">
            <view class="guanggao-image">
               <image src="/static/image/share@2x.png" mode="widthFix"></image>
               <button  mode="widthFix"class='sharebtn' open-type="share"></button>
            </view>
         </view>
         <view class="paidan"  v-if="isLogin && userInfo.useIdentity ==1">
            <view class="paidan-box">
               <view class="paidan-label">接受系统自动派单</view>
               <view class="paidan-right">
                  <text>关闭</text>
                  <u-switch activeColor="#00BC12"  @change="updateMemberInfo" v-model="autoReceiveStatus"></u-switch>
               </view>
            </view>
         </view>
         <view class="list">
            <view class="list-hz">
               <view class="list-hz-item"@click="jumpService(1)">
                  <text>服务介绍</text>
                  <u-icon name="arrow-right"   color="#111111" size="18"></u-icon>
               </view>
               <view class="list-hz-item" @click="jumpService(2)">
                  <text>收费标准</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?2:5)">
                  <text>工人赚钱</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.workerIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.workerIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.workerIdentity === 3">认证失败</text>
                     <text v-else>可接用工订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>

            <view class="order-card section-card">
               <view class="section-head">
                  <text class="section-title">我的订单</text>
                  <view class="more-wrap" @click="toOrderDetail(-1)">
                     <text class="more-text">全部订单</text>
                     <u-icon name="arrow-right" size="13" color="#999999"></u-icon>
                  </view>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?3:5)">
                  <text>司机赚钱</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.driverIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.driverIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.driverIdentity === 3">认证失败</text>
                     <text v-else>可接运货订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               <view class="order-grid">
                  <view v-for="(item, index) in orderMenus" :key="index" class="order-item" @click="toOrderDetail(item.status)">
                     <image class="order-icon" :src="item.url" mode="widthFix"></image>
                     <view v-if="item.badge" class="order-badge">{{ item.badge }}</view>
                     <text class="order-label">{{ item.label }}</text>
                  </view>
               </view>
               <view class="list-hz-item" @click="jump(isLogin?4:5)">
                  <text>我能供餐</text>
                  <view class="list-hz-item-r">
                     <text v-if="userInfo.chefIdentity === 2">已认证</text>
                     <text class="orangetxt"  v-else-if="userInfo.chefIdentity === 1">认证中</text> 
                     <text class="redtxt" v-else-if="userInfo.chefIdentity === 3">认证失败</text>
                     <text v-else>可接用餐订单</text>
                     <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
                  </view>
               </view>
               <view class="list-hz-item" @click="jumpService(3)">
                  <text>关于我们</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
            </view>
            <view class="setup-sub" v-if="isLogin" @click="logOffDo">退出登录</view>
            <view class="setup-sub" v-if="!isLogin" @click="jump(5)">去登录</view>

            <view class="banner-card">
               <image class="banner-image" src="/static/image/share@2x.png" mode="widthFix"></image>
            </view>

            <view class="menu-card section-card">
               <view v-for="item in menuList" :key="item.label" class="menu-row" @click="handleMenuClick(item)">
                  <text class="menu-label">{{ item.label }}</text>
                  <view class="right-icon">
                     <text v-if="['门店入驻','门店信息'].includes(item.label)" :class="{ 'status-red': [1,2,5].includes(userInfo.shopAuditStatus), 'status-yellow': [4].includes(userInfo.shopAuditStatus) }">
                        {{userInfo.shopAuditStatus === 0 ? '审核中' : userInfo.shopAuditStatus === 1 ? '审核通过，请支付押金' : userInfo.shopAuditStatus === 2 ? '审核未通过' : userInfo.shopAuditStatus === 3 ? '门店已入驻' : userInfo.shopAuditStatus === 4 ? '变更中' : userInfo.shopAuditStatus === 5 ? '变更未通过' : '' }}
                     </text>
                     <button  v-if="item.label === '在线客服'" open-type="contact" type="default">    </button>
                     <u-icon   name="arrow-right" size="18" color="#B5BBC5"></u-icon>
                  </view>
               </view>
            </view>
         </view>
      </view>

      <auth-login
         :show="showAuthLogin"
         :checked.sync="agreeChecked"
         @success="getOrderNum"
         @close="showAuthLogin = false" />
      <custom-tabbar></custom-tabbar>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'

   export default {
      components: {
         CustomTabbar
      },
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid'])
      },
      data() {
         return {
            changing:false,
            changing1:false,
            autoReceiveStatus: false,
            isLogin:false,
            useIdentity:0,
            qrcode:''
      ...mapState(['navHeight', 'statusbarHeight', 'openid', 'userInfo', 'token'])
   },
   data() {
      return {
         showAuthLogin: false,
         agreeChecked: true,
         userName: '',
         serverPhone: '',
         orderMenus: [
            { label: '待支付', url: '/static/icon/mine_ic_daifukuan@2x.png', badge: 0,status:0 },
            { label: '待收货', url: '/static/icon/mine_ic_daishouhuo@2x.png', badge: 0,status:3 },
            { label: '退款/售后', url: '/static/icon/mine_ic_tuikuan@2x.png', badge: 0 ,status:5}
         ],
         menuList: [
            { label: '门店入驻' },
            { label: '我的门店' },
            { label: '领券中心' },
            { label: '开票申请' },
            { label: '用户服务协议' },
            { label: '用户隐私政策' },
            { label: '在线客服' },
            { label: '联系平台' },
            { label: '关于我们' }
         ]
      }
   },
   onLoad() {
      this.getPlatformInfo()
      uni.$on('loginOut', () => {
         this.orderMenus = [
            { label: '待支付', url: '/static/icon/mine_ic_daifukuan@2x.png', badge: 0,status:0 },
            { label: '待收货', url: '/static/icon/mine_ic_daishouhuo@2x.png', badge: 0,status:3 },
            { label: '退款/售后', url: '/static/icon/mine_ic_tuikuan@2x.png', badge: 0 ,status:5}
         ]
      })
   },
   async onShow() {
      await this.$onLaunched;
      if (this.token) {
         this.getOrderNum()
      }
      if (this.userInfo) {
         if (this.userInfo.shopAuditStatus === 3) {
            this.menuList[0].label = '门店信息'
         }
      } else {
         this.orderMenus = [
            { label: '待支付', url: '/static/icon/mine_ic_daifukuan@2x.png', badge: 0 },
            { label: '待收货', url: '/static/icon/mine_ic_daishouhuo@2x.png', badge: 0 },
            { label: '退款/售后', url: '/static/icon/mine_ic_tuikuan@2x.png', badge: 0 }
         ]
      }
   },
   methods: {
      async getPlatformInfo() {
         const res = await this.$u.api.getPlatformAboutUs({})
         if (res.code === 200 && res.data) {
            this.serverPhone = res.data.serverPhone || ''
         }
      },
      onShow(options){ 
         this.isLogin=false
         this.autoReceiveStatus=false;
         this.useIdentity =0
			
         if(this.token &&this.token!='' && this.userInfo && JSON.stringify(this.userInfo) != '{}'){
            this.isLogin=true
            this.getUserInfo()
            this.autoReceiveStatus = this.userInfo.autoReceiveStatus === 1 
            this.useIdentity = this.userInfo.useIdentity
      handleProfileClick() {
         if (this.token) {
            return
         }
         this.showAuthLogin = true
      },
      methods: {
         jumpOrderList(flag){
            const app = getApp();
            app.globalData.orderStatus = flag; 
            uni.switchTab({
               url: '/pages/demand-hall/demand-hall'
            })
         }, 
         getUserInfo() {
            var that = this;
            this.$u.api.getMemberInfo({}).then(res =>{ 
               if (res&&res.code ===200) { 
                  that.$store.commit('setUserInfo', res.data)
                  that.$isResolve()
               }else{
                  that.$store.commit('setToken','')
                  that.$store.commit('setUserInfo',{})
                  that.$isResolve()
               }
            })
         },
         jumpService(flag) {
            uni.navigateTo({
               url: '/pages/rich-text-page/rich-text-page?flag='+flag
            })
         },
         jump(type) {
            switch(type) {
               case 1:
                  uni.navigateTo({
                     url: '/packageA/pages/set-up/set-up'
                  })
                  break;
               case 2:
                  if(!this.userInfo.workerIdentity ||this.userInfo.workerIdentity ==0){
                     uni.navigateTo({
                        url:  '/packageA/pages/employment-certification/employment-certification?flag=0'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=0'
                     })
                  }
                  break;
                  break;
               case 3:
                  if(!this.userInfo.driverIdentity ||this.userInfo.driverIdentity ==0){
                     uni.navigateTo({
                        url: '/packageA/pages/employment-certification/employment-certification?flag=1'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=1'
                     })
                  }
                  break;
               case 4:
                  if(!this.userInfo.chefIdentity ||this.userInfo.chefIdentity ==0){
                     uni.navigateTo({
                        url: '/packageA/pages/employment-certification/employment-certification?flag=2'
                     })
                  }else{
                     uni.navigateTo({
                        url: '/packageA/pages/certification-results/certification-results?flag=2'
                     })
                  }
                  break;
               case 5:
                  uni.navigateTo({
                     url: '/pages/login/login'
                  })
                  break;
               case 6:
                  uni.navigateTo({
                     url: '/packageA/pages/withdrawal/withdrawal'
                  })
                  break;
               case 7:
                  uni.navigateTo({
                     url: '/packageA/pages/certification-results/certification-results'
                  })
                  break;
            }
         },
         logOffDo() {
           var that = this
           this.$u.api.logOff({}).then(res =>{
                //退出登录成功
               that.isLogin =false
                that.$store.commit("empty") 
            })
         } , 
         editUseIdentity() {
           if(this.changing1){
               return
           }
           this.changing1 = true
           var that = this
           var param ={useIdentity:this.userInfo.useIdentity==1?0:1}
           that.$u.api.editUseIdentity(param)
           .then(res =>{
                console.log(222,res)
               if(res.code ===200){
                  that.userInfo.useIdentity = param.useIdentity
                  that.$store.commit('setUserInfo', that.userInfo)
                  uni.$emit('refresh')
               } 
            }).finally(() => {
               that.changing1 = false
            })
         } ,
         saoyisao(){
            var that =this
            // 允许从相机和相册扫码
            wx.scanCode({
              // scanType:['barCode'],
              success (res) {
               that.qrcode =res.result
                console.log(res)
              },
              fail(e){
                 console.error(e)
              }
            })
         },
         updateMemberInfo(e) {
            if(this.changing){
               return
            }
           this.changing = true
           var that = this 
           var param ={ autoReceiveStatus:that.autoReceiveStatus?1:0}
           this.$u.api.editMemberInfo(param).then(res =>{
              if(res.code ===200){
                that.userInfo.autoReceiveStatus = param.autoReceiveStatus
               }
            }).finally(() => {
                   that.changing = false
      toAllOrders() {
         uni.switchTab({
            url: '/pages/itinerary/itinerary'
         })
      },
      handleMenuClick(item) {
         const urlMap = {
            '门店入驻': '/pages/store-apply/store-apply',
            '我的门店': '/shop/pages/login/login',
            '领券中心': '/shop/pages/coupon-center/coupon-center',
            '开票申请': '/shop/pages/Invoice-application/Invoice-application',
            '用户服务协议': '/pages/rich-text/rich-text?type=0',
            '用户隐私政策': '/pages/rich-text/rich-text?type=1',
            '关于我们': '/pages/rich-text/rich-text?type=5' 
         }
         if (item.label === '联系平台') {
            if (this.serverPhone) {
               uni.makePhoneCall({
                  phoneNumber: this.serverPhone
               })
         } 
            }
            return
         }
         if (['门店入驻', '我的门店'].includes(item.label)) {
            if (!this.token) {
               this.showAuthLogin = true
               return
            }
         }
         if (['门店入驻','门店信息'].includes(item.label) && [0,1,2,3,4].includes(this.userInfo.shopAuditStatus)) {
            uni.navigateTo({
               url: '/pages/details-entry/details-entry'
            })
            return
         }
         if (item.label!=='在线客服' && urlMap[item.label]) {
            uni.navigateTo({
               url: urlMap[item.label]
            })
         }
      },
      toOrderDetail(label) {
         if (!this.token) {
            this.showAuthLogin = true
            return
         }
         uni.setStorageSync("orderStatus",label===0?-2:label)
         uni.switchTab({
            url: '/pages/itinerary/itinerary'
         })
      },
      toSetting() {
         if (!this.token) {
            this.showAuthLogin = true
            return
         }
         uni.navigateTo({
            url: '/pages/settings/settings'
         })
      },
      goService() {
         uni.navigateTo({
            url: '/pages/rich-text/rich-text?type=userAgreement'
         })
      },
      goPrivacy() {
         uni.navigateTo({
            url: '/pages/rich-text/rich-text?type=privacyPolicy'
         })
      },
      getOrderNum() {
         this.$u.api.getMemberInfo({}).then(res => {
            if (res.code === 200) {
               this.$store.commit('setUserInfo', res.data)
               this.orderMenus.forEach(item => {
                  if (item.label === '待支付') {
                     item.badge = res.data.waitPayCount
                  } else if (item.label === '待收货') {
                     item.badge = res.data.waitReceiveCount
                  } else if (item.label === '退款/售后') {
                     item.badge = res.data.refundingCount
                  }
               })
            }
         })
      }
   }
}
</script>

<style>
   page {
      background: #F7F7F7;
   }
</style>

<style lang="scss" scoped>
   .index {
   .mine-page {
      position: relative;
      min-height: 100vh;
      background: #f6f8fb;
   }

   .top-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .index-c {
      height: 450rpx;
      background: linear-gradient(180deg, #B9E9FF 0%, #ffffff 100%);
      z-index: 0;
   }

   .page-scroll {
      position: relative;
      z-index: 1;
   }

   .page-content {
      padding: 30rpx;
      box-sizing: border-box;
   }

   .profile-card {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      position: relative;
      button {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 520rpx;
         background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
         .list {
            width: 100%;
            padding: 0 30rpx;
            padding-bottom: 30px;
            box-sizing: border-box;
            .list-hz {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               background: #FFFFFF;
               border-radius: 20rpx;
               overflow: hidden;
               .list-hz-item {
                  width: 100%;
                  height: 102rpx;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #E5E5E5;
                  .list-hz-item-r {
                     display: flex;
                     align-items: center;
                     text {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #00BC12;
                        margin-right: 20rpx;
                     }
                  }
               }
            }
         }
         .paidan {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .paidan-box {
               width: 100%;
               height: 100rpx;
               background: #FFFFFF;
               border-radius: 20rpx;
               padding: 0 30rpx;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .paidan-label {
                  font-weight: 400;
                  font-size: 30rpx;
                  color: #222222;
               }
               .paidan-right {
                  display: flex;
                  align-items: center;
                  text {
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #888888;
                     margin-right: 20rpx;
                  }
               }
            }
         }
         .guanggao {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .guanggao-image {
               width: 100%;
               height: 140rpx;
               image {
                  width: 100%;
                  height: 100%;
                  z-index: 999;
               }
               .sharebtn{
                  position: relative;
                  top: -150rpx;
                  left: 0;
                  outline:none;
                  padding:0px;
                  cursor: pointer;
                  border: none; 
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 1000;
               }
            }
         }
         .statistics {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            .statistics-box {
               width: 100%;
               height: 168rpx;
               background: #FFFFFF;
               border-radius: 20rpx;
               display: flex;
               align-items: center;
               .statistics-x {
                  width: 1rpx;
                  height: 100rpx;
                  border-right: 1rpx dashed #E5E5E5;
               }
               .statistics-item {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #888888;
                        margin-top: 18rpx;
                     }
                  }
               }
            }
         }
         .info {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            .info-box {
               width: 100%;
               height: 336rpx;
               padding: 40rpx;
               box-sizing: border-box;
               background: #FFFFFF;
               border-radius: 20rpx;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               .info-box-price {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     font-weight: 600;
                     font-size: 48rpx;
                     color: #222222;
                  }
                  .info-box-price-btn {
                     width: 148rpx;
                     height: 60rpx;
                     line-height: 60rpx;
                     text-align: center;
                     background: #00BC12;
                     border-radius: 30rpx;
                     font-weight: 500;
                     font-size: 28rpx;
                     color: #FFFFFF;
                  }
               }
               .info-box-label {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #888888;
                  margin-bottom: 16rpx;
               }
               .info-box-head {
                  width: 100%;
                  height: 108rpx;
                  display: flex;
                  margin-bottom: 30rpx;
                  .info-box-head-image {
                     width: 108rpx;
                     height: 100%;
                     flex-shrink: 0;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     margin-right: 24rpx;
                     image {
                        width: 100%;
                     }
                  }
                  .info-box-head-qiehuan {
                     flex-shrink: 0;
                     display: flex;
                     image {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 10rpx;
                     }
                     text {
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #00BC12;
                     }
                  }
                  .info-box-head-info {
                     flex: 1;
                     height: 100%;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
                     .info-box-head-info-name {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #222222;
                     }
                     .info-box-head-info-type {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        .info-box-head-info-type-val {
                           width: 144rpx;
                           height: 42rpx;
                           line-height: 42rpx;
                           text-align: center;
                           background: rgba(253,158,36,0.06);
                           border-radius: 8rpx;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #FF7200;
                           border: 2rpx solid #FD9E24;
                           margin-right: 20rpx;
                        }
                        .info-box-head-info-type-val1 {
                           width: 144rpx;
                           height: 42rpx;
                           line-height: 42rpx;
                           text-align: center;
                           background: rgba(91,190,56,0.06);
                           border-radius: 8rpx;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #00BC12;
                           border: 2rpx solid #00BC12;
                           margin-right: 20rpx;
                        }
                        .info-box-head-info-type-wz {
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #999999;
                        }
                     }
                  }
               }
            }
				
         }
         .index-c-title {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .index-c-title-logo {
               font-weight: bold;
               font-size: 36rpx;
               color: #FFFFFF;
            }
            .dingwei {
               width: 36rpx;
               height: 36rpx;
               margin-right: 8rpx;
            }
            .qu {
               width: 22rpx;
               height: 22rpx;
            }
         }
         height: 100%;
         opacity: 0;
      }
   }
   .setup-sub {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16);
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #5BBE38;
      margin-top: 80rpx;
      border: 1rpx solid #15CF52;
      bottom: 50px;

   .avatar {
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 24rpx;
   }
   .bluetxt{
      color:blue !important ;
   } 
   .redtxt{
      color:#FF0000 !important ;
   }   
   .orangetxt{
      color: #FF7200 !important ;

   .login-text {
      font-weight: 600;
      font-size: 36rpx;
      color: #111111;
   }

   .profile-copy {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .user-name {
      margin-top: 12rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #7d8792;
   }

   .profile-tools {
      display: flex;
      align-items: center;
      gap: 20rpx;
   }

   .tool-item {
      position: relative;
      width: 40rpx;
      height: 40rpx;
   }

   .tool-icon {
      width: 100%;
      height: 100%;
   }

   .tool-badge {
      position: absolute;
      right: -4rpx;
      top: -4rpx;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background: #ff3b30;
   }

   .section-card {
      background: #ffffff;
      border-radius: 18rpx;
   }

   .order-card {
      padding: 30rpx;
      box-sizing: border-box;
   }

   .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
   }

   .section-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #222222;
   }

   .more-wrap {
      display: flex;
      align-items: center;
      gap: 4rpx;
   }

   .more-text {
      font-size: 24rpx;
      color: #b5bbc5;
   }

   .order-grid {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 8rpx 14rpx 0;
   }

   .order-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .order-badge {
      position: absolute;
      top: -6rpx;
      right: -15rpx;
      min-width: 28rpx;
      height: 28rpx;
      padding: 0 6rpx;
      border-radius: 14rpx;
      background: #ff2d55;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18rpx;
      line-height: 1;
      color: #ffffff;
      box-sizing: border-box;
   }

   .order-icon {
      width: 60rpx;
      height: 60rpx;
   }

   .order-label {
      margin-top: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
   }

   .banner-card {
      position: relative;
      margin-top: 30rpx;
      width: 100%;
      overflow: hidden;
   }

   .banner-image {
      width: 100%;
   }

   .menu-card {
      margin-top: 30rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
   }

   .menu-row {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #E5E5E5;
   }

   .menu-row:last-child {
      border-bottom: none;
   }

   .menu-label {
      font-weight: 400;
      font-size: 30rpx;
      color: #222222;
   }

   .right-icon {
      display: flex;
      align-items: center;
      gap: 4rpx;
      text {
         font-weight: 400;
         font-size: 24rpx;
         color: #10B2FA;
         margin-right: 20rpx;
      }
      .status-red {
         color: #FF0000;
      }
      .status-yellow {
         color: #FFD700;
      }
      button {
         position: relative;
         top: 0;
         float:right;
         right:  0;
         width: 200rpx;
         height: 48rpx;
         opacity: 0;
         z-index: 9999;
      }
   }
</style>