huimv-baqing/ruoyi-ui-app/pages/mine/index.vue

<template>
  <view :key="layoutKey" :class="pageRootClass" class="tab-page mine-page">
    <scroll-view scroll-y class="mine-scroll" enable-back-to-top>
      <!-- 第一行：大头像 + 用户名 -->
      <view class="mine-profile">
        <view class="mine-profile__avatar">
          <image
            v-if="userAvatar"
            class="mine-profile__avatar-img"
            :src="userAvatar"
            mode="aspectFill"
          />
          <up-icon v-else name="account-fill" color="#22C55E" :size="56" />
        </view>
        <view class="mine-profile__meta">
          <text class="text-body mine-profile__name">{{ displayName }}</text>
          <text v-if="!isLoggedIn" class="text-body mine-profile__hint">{{ $t('minePage.guestHint') }}</text>
        </view>
      </view>

      <view v-if="!isLoggedIn" class="mine-auth-bar">
        <up-button
          type="primary"
          color="#22C55E"
          :text="$t('minePage.loginBtn')"
          @click="goLogin"
        />
      </view>

      <!-- 第二行：说明卡片 -->
      <!-- <view class="mine-card tp-card">
        <text class="text-body mine-card__txt">{{ $t('minePage.cardIntro') }}</text>
      </view> -->

      <!-- 第三行：单元格列表 -->
      <view class="mine-cells">
        <view
          v-for="row in menuRows"
          :key="row.id"
          class="mine-cell"
          role="button"
          @click="onCell(row)"
        >
          <view class="mine-cell__icon-wrap">
            <up-icon :name="row.icon" color="#22C55E" :size="22" />
          </view>
          <text class="text-body mine-cell__title">{{ $t(row.titleKey) }}</text>
          <view class="mine-cell__trail">
            <text v-if="row.id === 'lang'" class="text-body mine-cell__value">{{ currentLangLabel }}</text>
            <up-icon name="arrow-right" color="#B5AEA6" :size="18" />
          </view>
        </view>
      </view>

      <view v-if="isLoggedIn" class="mine-logout-wrap">
        <up-button
          type="info"
          plain
          :text="$t('minePage.logoutBtn')"
          @click="handleLogout"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import UIcon from 'uview-plus/components/u-icon/u-icon.vue'
import UButton from 'uview-plus/components/u-button/u-button.vue'
import tabPage from '@/mixins/tabPage'
import { setStoredLocale } from '@/utils/locale'
import { isTabBarPage, syncTabBarText } from '@/utils/tabBar'
import { useUserStore } from '@/store/user'

export default {
  components: {
    'up-icon': UIcon,
    'up-button': UButton
  },
  mixins: [tabPage],
  data() {
    return {
      navTitleKey: 'nav.mine',
      menuRows: [
        // { id: 'editProfile', icon: 'edit-pen', titleKey: 'minePage.editProfile' },
        // { id: 'orders', icon: 'order', titleKey: 'minePage.myOrders' },
        { id: 'booking', icon: 'calendar', titleKey: 'minePage.myBooking' },
        { id: 'enroll', icon: 'file-text', titleKey: 'minePage.myEnrollment' },
        // { id: 'address', icon: 'map', titleKey: 'minePage.address' },
        { id: 'lang', icon: 'setting', titleKey: 'minePage.langVersion' }
      ]
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    },
    isLoggedIn() {
      return this.userStore.isLoggedIn()
    },
    displayName() {
      const name = this.userStore.displayName()
      return name || this.$t('minePage.displayName')
    },
    userAvatar() {
      return this.userStore.state.avatar
    },
    currentLangLabel() {
      return this.lang === 'bo' ? this.$t('lang.switchBo') : this.$t('lang.switchZh')
    }
  },
  onShow() {
    if (this.isLoggedIn && !this.userStore.state.roles.length) {
      this.userStore.fetchUserInfo().catch(() => {})
    }
  },
  methods: {
    goLogin() {
      uni.navigateTo({ url: '/pages/login/index' })
    },
    handleLogout() {
      uni.showModal({
        title: '',
        content: this.$t('minePage.logoutConfirm'),
        success: (res) => {
          if (!res.confirm) {
            return
          }
          this.userStore.logOut().then(() => {
            uni.reLaunch({ url: '/pages/login/index' })
          })
        }
      })
    },
    onCell(row) {
      if (row.id === 'lang') {
        this.openLangSheet()
        return
      }
      if (row.id === 'booking') {
        uni.navigateTo({ url: '/package-a/my-booking/index' })
        return
      }
      if (row.id === 'enroll') {
        if (!this.isLoggedIn) {
          this.goLogin()
          return
        }
        uni.navigateTo({ url: '/package-a/my-enrollment/index' })
        return
      }
      uni.showToast({
        title: this.$t('minePage.toastSoon'),
        icon: 'none'
      })
    },
    openLangSheet() {
      uni.showActionSheet({
        itemList: [this.$t('lang.switchZh'), this.$t('lang.switchBo')],
        success: (res) => {
          if (res.tapIndex === 0) this.applyLang('zh')
          else if (res.tapIndex === 1) this.applyLang('bo')
        }
      })
    },
    applyLang(code) {
      const next = setStoredLocale(code)
      this.$i18n.locale = next
      this.layoutKey += 1
      this.$nextTick(() => {
        const applyLangUi = () => {
          if (!isTabBarPage()) {
            return
          }
          syncTabBarText((k) => this.$t(k))
          const p = uni.setNavigationBarTitle({
            title: this.$t(this.navTitleKey)
          })
          if (p && typeof p.catch === 'function') {
            p.catch(() => {})
          }
        }
        if (isTabBarPage()) {
          applyLangUi()
          return
        }
        ensureTabBarEntry().then((ok) => {
          if (ok) {
            applyLangUi()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';
@import '@/styles/tab-page.scss';

.mine-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  background: $morandi-bg-page;
  box-sizing: border-box;
  /* #ifdef H5 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* #endif */
}

.mine-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
  min-width: 0;
  padding: 24rpx 24rpx 40rpx;
  box-sizing: border-box;
  /* #ifdef H5 */
  height: 100%;
  min-height: 1px;
  /* #endif */
}

.mine-profile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28rpx;
  min-width: 0;
  margin-bottom: 24rpx;
  padding: 36rpx 28rpx 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(145deg, #3d9b6e 0%, #22c55e 48%, #a7f3d0 100%);
  box-shadow: 0 12rpx 36rpx rgba(61, 155, 110, 0.2);

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
  }

  &::before {
    width: 200rpx;
    height: 200rpx;
    top: -72rpx;
    right: -48rpx;
  }

  &::after {
    width: 120rpx;
    height: 120rpx;
    bottom: -32rpx;
    left: -24rpx;
    background: rgba(255, 255, 255, 0.1);
  }
}

.mine-profile__avatar {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 144rpx;
  height: 144rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 4rpx solid rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.mine-profile__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mine-profile__meta {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.mine-profile__name {
  font-size: 40rpx;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.mine-profile__hint {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}

.mine-auth-bar {
  margin-bottom: 24rpx;
  min-width: 0;

  ::v-deep .u-button {
    border-radius: 999rpx !important;
    box-shadow: 0 8rpx 20rpx rgba(34, 197, 94, 0.25);
  }
}

.mine-logout-wrap {
  margin-top: 32rpx;
  min-width: 0;
  padding: 8rpx 0 0;

  ::v-deep .u-button {
    border-radius: 16rpx !important;
    border-color: $morandi-border-strong !important;
    color: $morandi-text-secondary !important;
    background: $morandi-bg-card !important;
  }
}

.mine-card {
  margin-bottom: 24rpx;
}

.mine-card__txt {
  color: $morandi-text-muted;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mine-cells {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 20rpx;
  overflow: hidden;
  background: $morandi-bg-card;
  border: 1rpx solid $morandi-border;
  box-sizing: border-box;
  box-shadow: 0 8rpx 28rpx rgba(74, 69, 66, 0.06);
}

.mine-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  padding: 28rpx 24rpx;
  gap: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid $morandi-border-soft;
  background: $morandi-bg-card;
  transition: background 0.15s ease;
}

.mine-cell:last-child {
  border-bottom-width: 0;
}

.mine-cell:active {
  background: $morandi-highlight;
}

.mine-cell__icon-wrap {
  flex-shrink: 0;
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f5ec;
  box-sizing: border-box;
}

.mine-cell:nth-child(1) .mine-cell__icon-wrap {
  background: #e8f0e6;
}

.mine-cell:nth-child(2) .mine-cell__icon-wrap {
  background: #e4eaef;
}

.mine-cell:nth-child(3) .mine-cell__icon-wrap {
  background: #efeae4;
}

.mine-cell:nth-child(4) .mine-cell__icon-wrap {
  background: #ebe4dc;
}

.mine-cell__title {
  flex: 1;
  min-width: 0;
  font-size: 30rpx;
  font-weight: 500;
  color: $morandi-text;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mine-cell__value {
  flex-shrink: 1;
  max-width: 280rpx;
  font-size: 26rpx;
  color: $morandi-accent-soft;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mine-cell__trail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8rpx;
  flex-shrink: 0;
}

.mine-page.lang-bo {
  .mine-profile__name {
    font-size: 34rpx;
  }

  .mine-cell__title {
    font-size: 28rpx;
  }
}
</style>