xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/account-settings.vue

<template>
  <view class="account-settings" :class="{ 'dark-mode': darkMode }">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">账户设置</text>
      <view class="placeholder"></view>
    </view>

    <scroll-view scroll-y class="content">
      <!-- 账号安全 -->
      <view class="group-block">
        <text class="group-title">账户安全</text>
        <view class="card">
          <view class="setting-item" @click="goTo('changePassword')">
            <view class="item-left">
              <text class="item-icon shield">🛡️</text>
              <text class="item-text">修改密码</text>
            </view>
            <text class="item-arrow">›</text>
          </view>
          <view class="setting-item" @click="goTo('phone')">
            <view class="item-left">
              <text class="item-icon phone">📱</text>
              <text class="item-text">手机号码</text>
            </view>
            <view class="item-right">
              <text class="item-value">{{ phoneNumber }}</text>
              <text class="item-arrow">›</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 功能设置 -->
      <view class="group-block">
        <text class="group-title">功能设置</text>
        <view class="card">
          <view class="setting-item">
            <view class="item-left">
              <text class="item-icon bell">🔔</text>
              <text class="item-text">新消息通知</text>
            </view>
            <switch :checked="notifyNewMessage" @change="e => notifyNewMessage = e.detail.value" color="#9C27B0" />
          </view>
          <view class="setting-item">
            <view class="item-left">
              <text class="item-icon heart">💜</text>
              <text class="item-text">匹配成功通知</text>
            </view>
            <switch :checked="notifyMatchSuccess" @change="e => notifyMatchSuccess = e.detail.value" color="#9C27B0" />
          </view>
          <view class="setting-item">
            <view class="item-left">
              <text class="item-icon horn">📣</text>
              <text class="item-text">系统公告通知</text>
            </view>
            <switch :checked="notifySystem" @change="e => notifySystem = e.detail.value" color="#9C27B0" />
          </view>
        </view>
      </view>

      <!-- 显示设置 -->
      <view class="group-block">
        <text class="group-title">显示设置</text>
        <view class="card">
          <view class="setting-item">
            <view class="item-left">
              <text class="item-icon moon">🌙</text>
              <text class="item-text">深色模式</text>
            </view>
            <switch :checked="darkMode" @change="onToggleDarkMode" color="#9C27B0" />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'matchmaker-account-settings',
  data() {
    return {
      phoneNumber: '138****5678',
      notifyNewMessage: true,
      notifyMatchSuccess: true,
      notifySystem: true,
      darkMode: false
    }
  },
  onLoad() {
    // 读取本地存储的深色模式状态
    const stored = uni.getStorageSync('matchmakerDarkMode')
    if (stored === true || stored === false) {
      this.darkMode = stored
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goTo(type) {
      // 这里预留具体跳转逻辑
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },
    onToggleDarkMode(e) {
      const value = e.detail.value
      this.darkMode = value
      uni.setStorageSync('matchmakerDarkMode', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.account-settings {
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  color: #333;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  padding-top: calc(25rpx + env(safe-area-inset-top));
  background: #E9D7F5;

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .back-icon {
      font-size: 40rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .placeholder {
    width: 60rpx;
  }
}

.content {
  flex: 1;
  background: #F5F5F5;
}

.group-block {
  margin-top: 20rpx;

  .group-title {
    padding: 30rpx 30rpx 10rpx;
    font-size: 26rpx;
    color: #999;
  }

  .card {
    margin: 0 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 26rpx;
  border-bottom: 1rpx solid #F5F5F5;

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

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

    .item-icon {
      font-size: 34rpx;
      margin-right: 18rpx;
    }

    .item-text {
      font-size: 30rpx;
      color: #333;
    }
  }

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

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

  .item-arrow {
    font-size: 34rpx;
    color: #CCC;
  }
}
</style>