<template>
<view class="content">
<!-- 搜索 -->
<view style="position: relative;">
<u-input v-model="queryNote.title" border="bottom" clearable :customStyle="{ padding: '23rpx 90rpx' }"
placeholder="搜索..." />
<view class="menu-icon" @click="leftClick"></view>
</view>
<!-- 左弹窗 -->
<u-popup :show="showleft" mode="left" @close="closeLeft">
<view class="main">
<view class="items">全部</view>
<view class="items">回收站</view>
</view>
</u-popup>
<!-- 列表 -->
<view class="list">
<view class="card" v-for="item in noteList" :key="item.noteId" @click="handleCardClick(item)"
@longpress="openLongClick(item)">
<view class="card-text">
<text class="title">{{item.title}}</text>
<text class="updatetime">{{item.updateTime}}</text>
</view>
<view class="card-logo">
<view class="safelock" v-show="item.isSafe==0?false:true"></view>
<view class="pintop" v-show="item.isTop==0?false:true"></view>
</view>
<image src="/static/manu.png" class="menu-btn"></image>
</view>
</view>
<!-- 下弹窗 -->
<u-popup :show="showbottom" :round="20" :mode="bottom" @close="closeBottom" :closeOnClickOverlay="false">
<view class="select" v-for="item in setting" :key="item.id" @click="onSelect(item)">
{{item.name}}
</view>
<view class="cancel select" @click="closeBottom">取消</view>
</u-popup>
<view class="explain">
<text>长按笔记可弹出快捷菜单</text>
<text>点击左上角菜单按钮，可弹出侧边栏菜单</text>
<text>点击此处不再显示该提醒</text>
</view>
<!-- 添加笔记 -->
<view class="position">
<view class="refresh"></view>
<view class="add-note" @click="addPage"></view>
</view>
<!-- 保险箱提示 -->
<u-modal :show="dailogShow" :showCancelButton="true" @confirm="onConfirm" @cancel="onCancel">
<view class="slot-content">
<text>请到“我的”-“保险箱”设置密码</text>
</view>
</u-modal>
<!-- 保险箱输入密码 -->
<u-modal :show="dailogPwdShow" @confirm="onConfirm" :showConfirmButton="false">
<view class="slot-content">
<view class="input-container">
<u-input type="password" v-model="safebox.password" clearable placeholder="请输入您的密码"
:customStyle="inputStyle"></u-input>
<view v-if="showError" class="error-message">您输入的密码错误</view>
</view>
<view class="btn" @click="submit" :class="{'active': isBtnActive}">
<text>确定</text>
</view>
</view>
</u-modal>
</view>
</template>
<script>
import {
getNoteList,
addNote,
updateNote,
deleteNote,
getNoteById
} from "../../api/notes.js";
export default {
data() {
return {
queryNote: {
title: ""
},
noteList: [],
showleft: false,
showbottom: false,
activeNote: {},
dailogShow: false,
dailogPwdShow: false,
setting: [{
id: 1,
name: "置顶"
},
{
id: 2,
name: "删除"
},
{
id: 3,
name: "加密"
},
{
id: 4,
name: "分类"
},
{
id: 5,
name: "复制"
}
],
safebox: {
password: "",
},
inputStyle: {
width: '526rpx',
padding: '24rpx 36rpx',
fontSize: '24rpx',
backgroundColor: '#F7F8F8',
borderRadius: '100rpx',
},
showError: false,
}
},
onLoad() {
uni.getStorage({
key: 'token',
success: function(res) {
console.log(res.data);
}
});
// 获取笔记列表
getNoteList().then(res => {
console.log(res.data);
this.noteList = res.data
});
},
computed: {
// 计算按钮是否应该处于激活状态
isBtnActive() {
return this.safebox.password.length;
}
},
onShow() {
this.dailogPwdShow = false;
this.showbottom = false;
this.showleft = false;
},
methods: {
closeLeft() {
this.showleft = false;
// console.log('close');
},
leftClick() {
this.showleft = true;
},
//长按事件
openLongClick(item) {
this.activeNote = {
...item
};
this.showbottom = true;
},
closeBottom(item) {
this.showbottom = false;
},
onSelect(item) {
console.log(item.id);
switch (item.id) {
case 1:
this.handleTopNote();
console.log("置顶");
break;
case 2:
this.handleDelectNote(this.activeNote.noteId);
console.log("删除");
break;
case 3:
//打开弹窗
this.dailogShow = true;
break;
case 4:
console.log("分类");
break;
case 5:
this.copyNote(); // 调用复制方法
console.log("复制");
break;
default:
break;
}
//关闭弹窗
this.showbottom = false;
},
//置顶笔记
async handleTopNote() {
try {
const params = {
noteId: this.activeNote.noteId,
classifyId: this.activeNote.classifyId,
title: this.activeNote.title,
content: this.activeNote.content,
isTop: this.activeNote.isTop == 1 ? 0 : 1, // 切换置顶状态
updateTime: new Date().getTime() // 使用当前时间作为更新时间
};
const res = await updateNote(params);
if (res.success) {
uni.$u.toast(this.activeNote.isTop == 1 ? '取消置顶成功' : '置顶成功');
this.refreshNoteList(); // 刷新列表
} else {
uni.$u.toast(res.message || '操作失败');
}
} catch (error) {
console.error('置顶操作失败:', error);
uni.$u.toast('操作失败');
}
},
//删除笔记
handleDelectNote(noteId) {
deleteNote(noteId).then(res => {
if (res.success) {
uni.$u.toast(res.message)
} else {
uni.$u.toast(res.message)
}
}).catch(errors => {
uni.$u.toast('校验失败')
})
},
//复制笔记
// copyNote(){
// const res= getNoteById(noteId);
// addNote(res.data).then(res => {
// if (res.success) {
// uni.$u.toast(res.message)
// } else {
// uni.$u.toast(res.message)
// }
// }).catch(errors => {
// uni.$u.toast('校验失败')
// })
// },
//添加笔记
addPage() {
uni.navigateTo({
url: "/pages/add-edit/add-edit"
})
},
//保险箱
onConfirm() {
this.dailogShow = false;
},
onCancel() {
this.dailogShow = false;
},
// 处理卡片点击事件
handleCardClick(item) {
if (item.isSafe == 1) {
this.activeNote = {
...item
}; // 保存当前笔记
this.inputpwd(); // 显示密码弹窗
}else {
this.navigateToEdit(item.noteId); // 直接跳转
}
},
// 跳转到编辑页面
navigateToEdit(noteId) {
uni.navigateTo({
url: `/pages/add-edit/add-edit?noteId=${noteId}`
});
},
inputpwd() {
this.safebox.password = "";
this.showError = false; // 重置错误状态
this.dailogPwdShow = true;
},
// 提交密码
submit() {
const correctPassword = "123456";
if (this.safebox.password !== correctPassword) {
this.showError = true;
} else {
this.showError = false;
this.dailogPwdShow = false;
// 密码正确后跳转到编辑页面
if (this.activeNote && this.activeNote.noteId) {
this.navigateToEdit(this.activeNote.noteId);
}
}
},
}
};
</script>
<style scoped>
.content {
width: 100%;
height: 100vh;
background-color: #F8F8F8;
}
.menu-icon {
width: 40rpx;
height: 40rpx;
background-image: url("/static/menu-icon.png");
background-size: cover;
position: absolute;
top: 27rpx;
left: 24rpx;
}
.main {
background-color: #648CEB;
font-size: 32rpx;
height: 100vh;
}
.items {
width: 360rpx;
height: 80rpx;
color: #fff;
text-align: center;
line-height: 80rpx;
border-bottom: 2rpx solid #7DA3F8;
}
.list {
margin: 20rpx;
}
.card {
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
padding: 20rpx;
background-color: #ffffff;
margin-bottom: 12rpx;
box-sizing: border-box;
}
.card-text {
display: flex;
flex-direction: column;
}
.title {
font-size: 28rpx;
color: #000000;
}
.updatetime {
font-size: 20rpx;
color: #d1d1d1;
margin-top: 8rpx;
}
.card-logo {
margin-right: 10rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
.safelock {
width: 32rpx;
height: 32rpx;
background-image: url("/static/safelock.png");
background-size: cover;
}
.pintop {
width: 32rpx;
height: 32rpx;
background-image: url("/static/pintop.png");
background-size: cover;
}
.menu-btn {
width: 6rpx;
height: 30rpx;
position: absolute;
right: 20rpx;
margin: 16rpx;
}
.select {
width: 100%;
padding: 30rpx 0;
text-align: center;
font-size: 36rpx;
border-bottom: 2rpx solid #f5f5f5;
background-color: #F8F8F8;
overflow: hidden;
border-radius: 16rpx 16rpx 0 0;
}
.cancel {
margin-top: 16rpx;
border-top: 2rpx solid #F7F7F7;
}
.explain {
display: flex;
flex-direction: column;
/* 垂直排列子元素 */
padding: 24rpx 224rpx 0 22rpx;
font-size: 28rpx;
color: #999999;
line-height: 100%;
}
.explain text {
margin-bottom: 10rpx;
/* 每行间距 */
}
.position {
margin-top: 279rpx;
position: fixed;
right: 0;
display: flex;
flex-direction: column;
/* 垂直排列子元素 */
align-items: flex-end;
/* 图片对齐到右侧 */
gap: 20rpx;
/* 图片之间的间距 */
padding-right: 20rpx;
/* 右侧内边距，避免图片贴边 */
}
.refresh {
width: 80rpx;
height: 80rpx;
background-image: url("/static/refresh.png");
background-size: cover;
}
.add-note {
width: 80rpx;
height: 80rpx;
background-image: url("/static/add-note.png");
background-size: cover;
}
.input-container {
margin: 32rpx;
}
.btn {
width: 224rpx;
height: 72rpx;
background-color: #DEE0EB;
box-shadow: 0px 1px 7px 0px #E2E5F0;
border-radius: 40rpx;
color: #ffffff;
font-size: 28rpx;
margin: 26rpx auto;
text-align: center;
line-height: 72rpx;
}
.active {
background-color: #6C8BE4;
}
.error-message {
color: #ff0000;
font-size: 24rpx;
margin: 10rpx;
}
</style>
最新发布
详细介绍了在安装Discuz 7.2时遇到的通信问题及其解决方法，包括JavaScript错误、XML解析错误等，并最终通过调整数据库表中的appid值解决了核心错误。
扫一扫
1370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
