CosScene/clients/pages/mine/settings.vue

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { checkLogin } from "@/utils/auth";
import { changePassword } from "@/api/user";
import { useUserStore } from "@/store/user";

onShow(() => { checkLogin(); });

const userStore = useUserStore();
const showPwdForm = ref(false);
const pwdForm = ref({ old_password: "", new_password: "", confirm: "" });
const saving = ref(false);

const handleChangePwd = async () => {
  if (!pwdForm.value.old_password || !pwdForm.value.new_password) {
    uni.showToast({ title: "请填写完整", icon: "none" });
    return;
  }
  if (pwdForm.value.new_password.length < 6) {
    uni.showToast({ title: "新密码至少6位", icon: "none" });
    return;
  }
  if (pwdForm.value.new_password !== pwdForm.value.confirm) {
    uni.showToast({ title: "两次密码不一致", icon: "none" });
    return;
  }
  saving.value = true;
  try {
    await changePassword({
      old_password: pwdForm.value.old_password,
      new_password: pwdForm.value.new_password,
    });
    uni.showToast({ title: "密码修改成功", icon: "success" });
    showPwdForm.value = false;
    pwdForm.value = { old_password: "", new_password: "", confirm: "" };
  } catch (e) {
    console.error(e);
  } finally {
    saving.value = false;
  }
};

const clearCache = () => {
  uni.showModal({
    title: "清除缓存",
    content: "将清除本地缓存数据（不会影响账号数据），确认继续？",
    success: (res) => {
      if (res.confirm) {
        const token = uni.getStorageSync("access_token");
        const rt = uni.getStorageSync("refresh_token");
        uni.clearStorageSync();
        if (token) uni.setStorageSync("access_token", token);
        if (rt) uni.setStorageSync("refresh_token", rt);
        uni.showToast({ title: "缓存已清除", icon: "success" });
      }
    },
  });
};

const handleLogout = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) userStore.logout();
    },
  });
};
</script>

<template>
  <view class="settings-page">
    <view class="menu-card">
      <view class="menu-item" @tap="showPwdForm = !showPwdForm">
        <view class="menu-left">
          <uni-icons type="locked" size="22" color="#6366f1" />
          <text class="menu-label">修改密码</text>
        </view>
        <uni-icons :type="showPwdForm ? 'arrowup' : 'right'" size="16" color="#cbd5e1" />
      </view>

      <view v-if="showPwdForm" class="pwd-form">
        <input
          v-model="pwdForm.old_password"
          class="pwd-input"
          type="password"
          placeholder="当前密码"
          placeholder-class="placeholder"
        />
        <input
          v-model="pwdForm.new_password"
          class="pwd-input"
          type="password"
          placeholder="新密码（至少6位）"
          placeholder-class="placeholder"
        />
        <input
          v-model="pwdForm.confirm"
          class="pwd-input"
          type="password"
          placeholder="确认新密码"
          placeholder-class="placeholder"
        />
        <button class="pwd-btn" :loading="saving" :disabled="saving" @tap="handleChangePwd">
          确认修改
        </button>
      </view>

      <view class="menu-item" @tap="clearCache">
        <view class="menu-left">
          <uni-icons type="trash" size="22" color="#f59e0b" />
          <text class="menu-label">清除缓存</text>
        </view>
        <uni-icons type="right" size="16" color="#cbd5e1" />
      </view>
    </view>

    <view class="about-card">
      <text class="about-title">关于次元取景器</text>
      <text class="about-desc">发现和分享二次元取景地的社区平台</text>
      <text class="about-version">v1.0.0</text>
    </view>

    <view class="logout-area">
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<style scoped>
.settings-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 24rpx 32rpx;
}
.menu-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  margin-bottom: 32rpx;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f1f5f9;
}
.menu-item:last-child { border-bottom: none; }
.menu-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.menu-label {
  font-size: 30rpx;
  color: #1e293b;
}
.pwd-form {
  padding: 20rpx 32rpx 28rpx;
  background: #f8fafc;
}
.pwd-input {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border: 2rpx solid #e2e8f0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #1e293b;
  box-sizing: border-box;
  margin-bottom: 16rpx;
}
.placeholder { color: #94a3b8; }
.pwd-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #6366f1;
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
  border-radius: 12rpx;
  border: none;
  margin-top: 8rpx;
}
.pwd-btn::after { border: none; }
.pwd-btn[disabled] { opacity: 0.6; }
.about-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  margin-bottom: 32rpx;
}
.about-title {
  display: block;
  font-size: 32rpx;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12rpx;
}
.about-desc {
  display: block;
  font-size: 26rpx;
  color: #64748b;
  margin-bottom: 8rpx;
}
.about-version {
  display: block;
  font-size: 22rpx;
  color: #94a3b8;
}
.logout-area { padding: 16rpx 0 48rpx; }
.logout-btn {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  background: #fff;
  color: #ef4444;
  font-size: 30rpx;
  border-radius: 16rpx;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.logout-btn::after { border: none; }
</style>