scancode-miro/pages/cjx/hexiao/ywy/my.vue

<template>
  <view class="page-container">
    <view class="profile-header">
      <view class="avatar-wrapper">
        <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
        <view class="badge">{{ userInfo.role }}</view>
      </view>
      <view class="phone-number">{{ userInfo.phone }}</view>
    </view>

    <view class="content-card">
      <view class="list-item" @click="navigateToAction('points')">
        <view class="item-left">
          <image class="item-icon" :src="imgurl+'/cjx/hexiao/my_jifen.png'" mode="aspectFit"></image>
          <text class="item-label">我的积分</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ formatNumber(userInfo.points) }}</text>
<!--          <uni-icons type="right" size="16" color="#c0c0c0"></uni-icons>-->
        </view>
      </view>

      <view class="list-item" @click="navigateToAction('shops')">
        <view class="item-left">
          <image class="item-icon" :src="imgurl+'/cjx/hexiao/my_mendian.png'" mode="aspectFit"></image>
          <text class="item-label">我的店铺</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ userInfo.shopCount }}</text>
<!--          <uni-icons type="right" size="16" color="#c0c0c0"></uni-icons>-->
        </view>
      </view>

<!--      <view class="list-item">-->
<!--        <view class="item-left">-->
<!--          <uni-icons type="arrow-up-circle" size="22" color="#666"></uni-icons>-->
<!--          <text class="item-label">当前版本</text>-->
<!--        </view>-->
<!--        <view class="item-right">-->
<!--          <text class="item-value">{{ appVersion }}</text>-->
<!--        </view>-->
<!--      </view>-->

<!--      <view class="list-item" @click="callSupport">-->
<!--        <view class="item-left">-->
<!--          <uni-icons type="phone-filled" size="22" color="#666"></uni-icons>-->
<!--          <text class="item-label">客服电话</text>-->
<!--        </view>-->
<!--        <view class="item-right">-->
<!--          <text class="item-value primary-color">{{ supportPhone }}</text>-->
<!--        </view>-->
<!--      </view>-->
    </view>

    <view class="footer">
      <button class="logout-button" @click="logout">退出登录</button>
    </view>
    <CustomTabbar :current="2"/>
  </view>
</template>

<script>
import CustomTabbar from '@/components/cjx/tabbar_hexiao_ywy.vue';
import {clearAdminToken, getAdminInfo} from "../../../../utils/auth";
import {getAdminUserInfo} from "../../../../api/hexiao";

export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      imgurl:"https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu",
      // 用户信息 - 通常从登录后的storage或API获取
      userInfo: {
        avatarUrl: 'https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiao/user-info.png', // 默认头像
        phone: '',
        role: '',
        points: 0,
        shopCount: 0
      },
      appVersion: '1.0',
      supportPhone: '40012547856'
    };
  },
  onLoad(){
    let info = getAdminInfo();
    this.userInfo.phone = info.phone;
    this.userInfo.role = info.roleName;
  },
  onShow(){
    getAdminUserInfo().then(res=>{
      this.userInfo.shopCount = res.data.storeCount;
      this.userInfo.points = res.data.pointTotal;
    })
  },
  methods: {
    // 格式化数字，添加逗号
    formatNumber(num) {
      if (num === undefined || num === null) return '';
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },

    // 列表项点击事件
    navigateToAction(action) {
      switch(action) {
        case 'points':
          console.log('跳转到我的积分页面');
          uni.navigateTo({ url: '/pages/points/points' }); // 请替换为您的积分页面路径
          break;
        case 'shops':
          console.log('跳转到我的店铺页面');
          uni.navigateTo({ url: '/pages/shops/shops' }); // 请替换为您的店铺页面路径
          break;
      }
    },

    // 拨打客服电话
    callSupport() {
      uni.makePhoneCall({
        phoneNumber: this.supportPhone,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.log('拨打电话失败', err);
          uni.showModal({
            title: '拨号失败',
            content: `无法拨打电话，请手动拨打客服热线：${this.supportPhone}`,
            showCancel: false
          })
        }
      });
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '您确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定，执行退出登录操作');
            clearAdminToken();
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/cjx/hexiao/login' // 请替换为您的登录页路径
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
// 页面整体背景
.page-container {
  background-color: #f5f6fa;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box; /* 确保 padding 不会增加总高度 */

  /* --- 关键改动 2 --- */
  /* 增加底部内边距，为“退出登录”按钮和自定义tabBar都留出空间 */
  &.with-padding-bottom {
    padding-bottom: 280rpx;
  }
}

// 顶部用户信息区
.profile-header {
  background: linear-gradient(135deg, #6ca1ff, #87d7dc);
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 80rpx; // 为下方卡片留出重叠空间
}

.avatar-wrapper {
  position: relative;

  .avatar {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.5);
  }

  .badge {
    position: absolute;
    bottom: 0;
    right: -10rpx;
    background-color: #ff9900;
    color: #ffffff;
    font-size: 22rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    border: 2rpx solid #ffffff;
  }
}

.phone-number {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 20rpx;
  letter-spacing: 1rpx;
}
.item-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 15rpx; /* 图标和文字的间距 */
}
// 内容卡片
.content-card {
  background-color: #ffffff;
  margin: -80rpx 30rpx 0 30rpx; // 负margin实现向上重叠效果
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative; // 确保在header之上
  z-index: 10;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .item-left {
    display: flex;
    align-items: center;

    .item-label {
      margin-left: 25rpx;
      font-size: 30rpx;
      color: #333;
    }
  }

  .item-right {
    display: flex;
    align-items: center;

    .item-value {
      font-size: 28rpx;
      color: #999;
      margin-right: 10rpx;
    }

    .primary-color {
      color: #6ca1ff; // 客服电话用主题色突出
      font-weight: 500;
    }
  }
}

// 底部
.footer {
  position: fixed;
  /* bottom值 = 自定义tabBar的高度(100rpx) + iPhone等机型的底部安全区 */
  bottom: calc(100rpx + constant(safe-area-inset-bottom));
  bottom: calc(100rpx + env(safe-area-inset-bottom));

  left: 0;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #f5f6fa; // 设置背景色防止透明
  z-index: 90; // 比 tabBar 低，比页面内容高
}

.logout-button {
  background-color: #ffffff;
  color: #555555;
  border-radius: 50rpx;
  font-weight: normal;
  font-size: 32rpx;
  border: 1rpx solid #e0e0e0;
  &::after {
    border: none;
  }
}
</style>