cfc/cfc-frontend/pages/profile/components/ProfileMenu.vue

<template>
  <view :style="{ '--font-scale': fontScale }">
    <view class="menu-list">
      <!-- ===== 个人 ===== -->
      <view class="menu-group">
        <view class="menu-group-title">── 个人 ──</view>
        <view class="menu-item" v-if="memberActive" @click="goToMessageHistory">
          <text>📨 消息历史</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" v-if="role === 'parent'" @click="goToFamilyMembers">
          <text>👨‍👩‍👧‍👦 家庭成员</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" v-if="role === 'parent'" @click="goToAppointments">
          <text>📅 测评预约</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToDailyTasks">
          <text>📋 每日任务</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" v-if="role === 'parent'" @click="goToOnboarding">
          <text>🎯 新手任务</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToReportManagement">
          <text>📋 报告管理</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToServiceRoleApply">
          <text>📋 服务角色申请</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- ===== 服务 ===== -->
      <view class="menu-group" v-if="showServices">
        <view class="menu-group-title">── 服务 ──</view>
        <view class="menu-item" @click="goToShop">
          <text>🛍️ 商城</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToCart">
          <text>🛒 购物车</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToMembership">
          <text>👑 会员中心</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" v-if="isVendor" @click="goToVendorCenter">
          <text>🏪 服务商中心</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToOrders">
          <text>🛒 订单管理</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToConsigneeList">
          <text>📍 收货人管理</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToAfterSales">
          <text>🔄 售后记录</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- ===== 设置 ===== -->
      <view class="menu-group">
        <view class="menu-group-title">── 设置 ──</view>
        <view class="menu-item" @click="showFontScaleModal = true">
          <text>🔠 字体大小</text>
          <text class="font-scale-current">{{ currentFontScaleLabel }}</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" v-if="role === 'parent'" @click="showPasswordModal = true">
          <text>🔐 {{ hasPassword ? '重置密码' : '设置密码' }}</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item menu-item-switch" v-if="role === 'parent'">
          <text>👁 对家庭成员可见</text>
          <switch :checked="showToFamily === 1" @change="onShowToFamilyChange" :color="primaryColor" />
        </view>
        <view class="menu-item" @click="logout">
          <text>🚪 退出登录</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 设置/重置密码弹窗 -->
    <view class="modal-mask" v-if="showPasswordModal" @click="showPasswordModal = false">
      <view class="modal" @click.stop>
        <view class="modal-title">{{ hasPassword ? '重置密码' : '设置密码' }}</view>
        <view class="form-item" v-if="hasPassword">
          <input v-model="oldPassword" type="number" password placeholder="输入旧密码" maxlength="6" />
        </view>
        <view class="form-item">
          <input v-model="newPassword" type="number" password placeholder="输入新密码" maxlength="6" />
        </view>
        <view class="form-item">
          <input v-model="confirmPassword" type="number" password placeholder="确认新密码" maxlength="6" />
        </view>
        <view class="modal-btns">
          <button @click="showPasswordModal = false">取消</button>
          <button class="btn-primary" @click="savePassword">确定</button>
        </view>
      </view>
    </view>

    
    <!-- 字体大小弹窗 -->
    <view class="modal-mask" v-if="showFontScaleModal" @click="showFontScaleModal = false">
      <view class="modal" @click.stop>
        <view class="modal-title">字体大小</view>
        <view class="font-scale-options">
          <view
            v-for="opt in fontScaleOptions"
            :key="opt.label"
            class="font-scale-option"
            :class="{ active: currentFontScale === opt.scale }"
            @click="onFontScaleChange(opt.scale)"
          >
            <text class="font-scale-label">{{ opt.label }}</text>
            <text
              class="font-scale-sample"
              :style="{ fontSize: (28 * opt.preview) + 'rpx' }"
            >浠艾福字体预览</text>
            <text class="font-scale-check" v-if="currentFontScale === opt.scale">✓</text>
          </view>
        </view>
        <view class="font-scale-tip">「跟随系统」时按微信「我-设置-通用-字体大小」显示</view>
      </view>
    </view>

  </view>
</template>

<script>
import { BrandColors } from '@/utils/brand-colors.js'
import { setPassword, verifyPassword, updateMemberVisibility, getFamilyMemberList, vendorStatus, ensureFamily, getReferralCode, extractReferralCode } from '@/utils/api.js'
import { getUserFontScale, setUserFontScale } from '@/utils/fontScale.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  name: 'ProfileMenu',
  props: {
    role: {
      type: String,
      default: 'parent'
    },
    showServices: {
      type: Boolean,
      default: true
    },
    // 会员有效态（isActive），由宿主页传入；默认 false（fail-closed）
    memberActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      primaryColor: BrandColors.primary,
      hasPassword: false,
      showPasswordModal: false,
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      showToFamily: 1,
      isVendor: false,
      referralCode: '',
      referralCodeLoaded: false,
      // 字体大小设置
      showFontScaleModal: false,
      // null 表示跟随微信系统字号；数字表示用户手动设置的倍数
      currentFontScale: getUserFontScale(),
      fontScaleOptions: [
        { label: '跟随系统', scale: null, preview: 1 },
        { label: '小', scale: 0.9, preview: 0.9 },
        { label: '标准', scale: 1, preview: 1 },
        { label: '大', scale: 1.15, preview: 1.15 },
        { label: '特大', scale: 1.3, preview: 1.3 }
      ]
    }
  },
  mounted() {
    // 注意：组件不触发页面级 onShow，这里在 mounted 兜底刷新当前档位
    this.currentFontScale = getUserFontScale()
  },
  computed: {
    currentFontScaleLabel() {
      var opt = this.fontScaleOptions.find(function(o) {
        return o.scale === this.currentFontScale
      }, this)
      return opt ? opt.label : '跟随系统'
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    this.hasPassword = !!uni.getStorageSync('passwordSet')
    this.loadShowToFamily()
    this.checkVendorStatus()
    this.loadReferralCode()
    this.currentFontScale = getUserFontScale()
  },
  methods: {
    onFontScaleChange(scale) {
      if (scale === null) {
        try { uni.removeStorageSync('userFontScale') } catch (e) {}
      } else {
        setUserFontScale(scale)
      }
      this.currentFontScale = scale
      this.showFontScaleModal = false
      uni.$emit('fontScaleChanged')
      uni.showToast({ title: '已更新字体大小', icon: 'none' })
    },
    /** 获取自己的邀请码用于分享 */
    async loadReferralCode() {
      if (this.referralCodeLoaded || !uni.getStorageSync('token')) return
      try {
var res = await getReferralCode()
      this.referralCode = extractReferralCode(res)
      } catch (e) {}
      this.referralCodeLoaded = true
    },
    async loadShowToFamily() {
      try {
        const uid = this.$store.state.userId || uni.getStorageSync('userId')
        const res = await getFamilyMemberList({ visibleOnly: true })
        const members = res.data || []
        const self = members.find(m => m.id == uid)
        if (self) {
          this.showToFamily = self.showToFamily !== 0 ? 1 : 0
        }
      } catch (e) {}
    },
    goToOnboarding() {
      uni.navigateTo({ url: '/pages/profile-extra/onboarding' })
    },
    goToReportManagement() {
      uni.navigateTo({ url: '/pages/profile/report-management' })
    },
    goToServiceRoleApply() {
      uni.navigateTo({ url: '/pages/profile/service-role-apply' })
    },
    goToFamilyMembers() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    goToAppointments() {
      uni.navigateTo({ url: '/pages/parent/appointments' })
    },
    goToDailyTasks() {
      uni.navigateTo({ url: '/pages/tasks/daily-tasks' })
    },
    goToMessageHistory() {
      uni.navigateTo({ url: '/pages/profile/message-history' })
    },
    async onShowToFamilyChange(e) {
      const val = e.detail.value ? 1 : 0
      const uid = this.$store.state.userId || uni.getStorageSync('userId')
      try {
        await updateMemberVisibility(uid, 'parent', val)
        this.showToFamily = val
        uni.showToast({ title: val ? '已对家庭成员可见' : '已对家庭成员隐藏', icon: 'none' })
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
    goToShop() {
      uni.navigateTo({ url: '/pages/shop/index/index' })
    },
    goToCart() {
      uni.navigateTo({ url: '/pages/shop/cart/cart' })
    },
    goToMembership() {
      uni.navigateTo({ url: '/pages/membership/index' })
    },
    goToVendorCenter() {
      uni.navigateTo({ url: '/pages/vendor/center' })
    },
    goToOrders() {
      uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
    },
    goToConsigneeList() {
      uni.navigateTo({ url: '/pages/shop/consignee-list/consignee-list' })
    },
    goToAfterSales() {
      uni.navigateTo({ url: '/pages/shop/after-sales/after-sales' })
    },
    async savePassword() {
      if (this.newPassword.length !== 6) {
        uni.showToast({ title: '请输入6位密码', icon: 'none' })
        return
      }
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }
      if (this.hasPassword && this.oldPassword.length !== 6) {
        uni.showToast({ title: '请输入旧密码', icon: 'none' })
        return
      }
      try {
        if (this.hasPassword) {
          const verifyRes = await verifyPassword(this.oldPassword)
          if (verifyRes.code !== 200) {
            uni.showToast({ title: '旧密码错误', icon: 'none' })
            return
          }
        }
        await setPassword(this.newPassword)
        uni.setStorageSync('passwordSet', true)
        this.hasPassword = true
        uni.showToast({ title: '密码设置成功', icon: 'success' })
        this.showPasswordModal = false
        this.oldPassword = ''
        this.newPassword = ''
        this.confirmPassword = ''
      } catch (e) {
        console.error('设置密码失败', e)
      }
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.commit('logout')
            uni.reLaunch({ url: '/pages/index-home/index' })
          }
        }
      })
    },
    async checkVendorStatus() {
      try {
        const res = await vendorStatus()
        this.isVendor = res.data && res.data.vendorStatus === 'approved'
      } catch (e) {
        this.isVendor = false
      }
    },
    
  }
}
</script>

<style scoped lang="scss">
.menu-list {
  margin: $uni-space-lg;
}
.menu-group {
  background: $app-surface;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.menu-group-title {
  padding: 20rpx $uni-space-page 10rpx;
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  text-align: center;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx $uni-space-page;
  border-bottom: 1rpx solid $facade-fill-2;
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-strong;
}
.menu-item:last-child {
  border-bottom: none;
}
.arrow {
  color: $facade-text-ghost;
  font-size: calc(28rpx * var(--font-scale, 1));
}
.menu-item-switch {
  justify-content: space-between;
}
.menu-item-switch text {
  flex: 1;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modal {
  background: $app-surface;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 80%;
}
.modal-title {
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: bold;
  text-align: center;
  margin-bottom: $uni-space-lg;
}
.form-item {
  margin-bottom: 20rpx;
}
.form-item input {
  border: 1rpx solid $facade-border-soft;
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
}
.modal-btns {
  display: flex;
  gap: 20rpx;
  margin-top: $uni-space-lg;
}
.modal-btns button {
  flex: 1;
  font-size: calc(28rpx * var(--font-scale, 1));
  padding: 20rpx;
  border-radius: 16rpx;
}
.modal-btns .btn-primary {
  background: $accent-indigo;
  color: $app-surface;
}

.intent-reselect-hint {
  margin: 0 $uni-space-lg $uni-space-lg;
  padding: 24rpx $uni-space-page;
  background: $app-surface;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  font-size: calc(26rpx * var(--font-scale, 1));
}
.intent-reselect-label {
  color: $facade-text-muted;
  margin-right: 8rpx;
}
.intent-reselect-value {
  flex: 1;
  color: $brand-primary;
  font-weight: bold;
}
.intent-reselect-link {
  color: $uni-info;
  text-decoration: underline;
}

/* 字体大小弹窗 */
.font-scale-current {
  margin-right: 16rpx;
  color: $facade-text-muted;
  font-size: calc(24rpx * var(--font-scale, 1));
}
.font-scale-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin: 10rpx 0 20rpx;
}
.font-scale-option {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx;
  border: 2rpx solid $facade-gray-200;
  border-radius: 16rpx;
  background: $facade-fill-ghost;
}
.font-scale-option.active {
  border-color: $brand-primary;
  background: $uni-primary-pale;
}
.font-scale-label {
  width: 60rpx;
  font-size: calc(26rpx * var(--font-scale, 1));
  font-weight: 600;
  color: $facade-text-strong;
  flex-shrink: 0;
}
.font-scale-sample {
  flex: 1;
  color: $facade-text-body;
  line-height: 1.4;
}
.font-scale-check {
  margin-left: 16rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $brand-primary;
  flex-shrink: 0;
}
.font-scale-tip {
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  text-align: center;
  line-height: 1.4;
}
</style>