zyt/TUICallKit-Vue3/pages/user/user.vue

<template>
  <div class="mine-page">
    <!-- 顶部用户信息卡片 -->
    <div class="user-card" @click="navigateTo('/pages/user/userinfo')">
      <div class="user-header">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        <div class="user-info">
          <text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
         <!-- <text class="vip-tag">VIP会员</text> -->
        </div>
        <!-- <div class="qr-code" @click.stop="showQRCode">
          <uni-icons type="scan" size="20" color="#333"></uni-icons>
        </div> -->
      </div>
      <div class="stat-row">
        <div class="stat-item">
          <text class="value">{{ userInfo.balance || 0 }}</text>
          <text class="label">钱包(元)</text>
        </div>
        <div class="stat-item">
          <text class="value">{{ userInfo.points || 0 }}</text>
          <text class="label">积分</text>
        </div>
        <div class="stat-item">
          <text class="value">{{ userInfo.coupons || 0 }}</text>
          <text class="label">优惠券</text>
        </div>
      </div>
    </div>

    <!-- 订单卡片 -->
    <!-- <div class="order-card">
      <div class="card-header">
        <text class="title">我的订单</text>
        <div class="more" @click="navigateTo('/pages/order/list')">
          <text>查看全部</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </div>
      </div>
      <div class="order-list">
        <div 
          class="order-item" 
          v-for="(item, index) in orderTypes" 
          :key="index"
          @click="navigateTo(item.path)"
        >
          <div class="icon-wrapper">
            <image :src="item.image" mode="aspectFit" class="order-icon" />
            <text v-if="item.count" class="count-badge">{{ item.count }}</text>
          </div>
          <text class="order-name">{{ item.name }}</text>
        </div>
      </div>
    </div> -->

    <!-- 快捷功能区 -->
  <!--  <div class="quick-actions">
      <div 
        class="action-item" 
        v-for="(item, index) in allServices.slice(0, 4)" 
        :key="index"
        @click="navigateTo(item.path)"
      >
        <div class="action-icon" :class="item.class">
          <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
        </div>
        <text class="action-name">{{ item.name }}</text>
      </div>
    </div> -->

    <!-- 服务菜单列表（适老化：显示全部，大触控区） -->
    <div class="service-list">
      <div 
        class="service-item" 
        v-for="(item, index) in allServices" 
        :key="index"
        @click="navigateTo(item.path)"
      >
        <div class="left">
          <div class="service-icon" :class="item.class">
            <uni-icons :type="item.icon" size="28" color="#fff"></uni-icons>
          </div>
          <text class="service-name">{{ item.name }}</text>
        </div>
        <div class="right">
          <text v-if="item.desc" class="desc">{{ item.desc }}</text>
          <uni-icons type="right" size="20" color="#666"></uni-icons>
        </div>
      </div>
    </div>

    <!-- DEV 开发悬浮入口（生产环境自动隐藏） -->
    <dev-training-entry />
  </div>
</template>

<script>
	import { onShow, onShareAppMessage } from '@dcloudio/uni-app'
	import DevTrainingEntry from '@/components/dev-training-entry/index.vue'
export default {
  name: 'profileB',
  components: { DevTrainingEntry },
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '',
        userId: '',
        balance: '0',
        points: '0',
        coupons: '5'
      },
      orderTypes: [
        { 
          name: '待付款', 
          image: '/static/images/my/payment.png', 
          path: '/pages/order/list?type=1', 
          count: 2 
        },
        { 
          name: '待发货', 
          image: '/static/images/my/delivery.png', 
          path: '/pages/order/list?type=2', 
          count: 1 
        },
        { 
          name: '待收货', 
          image: '/static/images/my/shipping.png', 
          path: '/pages/order/list?type=3', 
          count: 0 
        },
        { 
          name: '待评价', 
          image: '/static/images/my/review.png', 
          path: '/pages/order/list?type=4', 
          count: 3 
        },
        { 
          name: '退换/售后', 
          image: '/static/images/my/after-sale.png', 
          path: '/pages/order/list?type=5', 
          count: 0 
        }
      ],
      allServices: [
        { name: '就诊卡', icon: 'folder-add', path: '/pages/Card/Card', class: 'bg-cyan' },
		    { name: '设置', icon: 'gear', path: '/pages/user/userinfo', class: 'bg-gray' }//     ,
		// { name: '客服中心', icon: 'headphones', path: '/pages/service/index', class: 'bg-orange', desc: '在线客服' }
      ]
    }
  },
  onShow() {
  	this.userInfo=uni.getStorageSync('userData')
	
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({ url: path })
    },
    showQRCode() {
      // 显示二维码
    }
  }
}
</script>

<style lang="scss" scoped>
/* 适老化设计：50-80岁老人 - 大字号、高对比、大触控区 */
.mine-page {
  min-height: 100vh;
  background: #e8eaed;
  padding: 40rpx;
}

.user-card {
  background: #fff;
  border-radius: 28rpx;
  padding: 48rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);

  .user-header {
    display: flex;
    align-items: center;
    margin-bottom: 48rpx;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 80rpx;
      margin-right: 36rpx;
      border: 4rpx solid #e0e0e0;
    }

    .user-info {
      flex: 1;

      .nickname {
        font-size: 48rpx;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 16rpx;
        display: block;
        letter-spacing: 1rpx;
      }

      .vip-tag {
        background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
        color: #fff;
        font-size: 28rpx;
        padding: 6rpx 20rpx;
        border-radius: 24rpx;
        display: inline-block;
      }
    }

    .qr-code {
      width: 88rpx;
      height: 88rpx;
      border-radius: 44rpx;
      background: #f5f6fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .stat-row {
    display: flex;
    padding-top: 40rpx;
    border-top: 4rpx solid #e8eaed;

    .stat-item {
      flex: 1;
      text-align: center;
      min-height: 120rpx;

      .value {
        font-size: 52rpx;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 12rpx;
        display: block;
      }

      .label {
        font-size: 32rpx;
        color: #555;
        font-weight: 500;
      }
    }
  }
}

.order-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .more {
      display: flex;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: #999;
        margin-right: 8rpx;
      }
    }
  }

  .order-list {
    display: flex;
    justify-content: space-between;

    .order-item {
      flex: 1;
      text-align: center;

      .icon-wrapper {
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .count-badge {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          background: #ff4d4f;
          color: #fff;
          font-size: 20rpx;
          min-width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          text-align: center;
          border-radius: 16rpx;
          padding: 0 8rpx;
        }

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

      .order-name {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-bottom: 30rpx;

  .action-item {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx 20rpx;
    text-align: center;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

    .action-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin: 0 auto 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .action-name {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.service-list {
  background: #fff;
  border-radius: 28rpx;
  padding: 20rpx 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);

  .service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44rpx 0;
    border-bottom: 4rpx solid #e8eaed;
    min-height: 120rpx;

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

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

      .service-icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 44rpx;
        margin-right: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .service-name {
        font-size: 38rpx;
        color: #1a1a1a;
        font-weight: 500;
      }
    }

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

      .desc {
        font-size: 30rpx;
        color: #555;
        margin-right: 20rpx;
      }
    }
  }
}

// 背景色
.bg-red { background: #ff4d4f; }
.bg-blue { background: #1890ff; }
.bg-green { background: #52c41a; }
.bg-purple { background: #722ed1; }
.bg-orange { background: #fa8c16; }
.bg-cyan { background: #13c2c2; }
.bg-pink { background: #eb2f96; }
.bg-gray { background: #666666; }
</style>