Initial project commit
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user