first
This commit is contained in:
172
pages/record/record.js
Normal file
172
pages/record/record.js
Normal file
@@ -0,0 +1,172 @@
|
||||
Page({
|
||||
data: {
|
||||
// 梦境内容
|
||||
title: '',
|
||||
scene: '',
|
||||
characters: '',
|
||||
plot: '',
|
||||
details: '',
|
||||
|
||||
// 标签数据
|
||||
dreamTags: [
|
||||
'飞行', '追逐', '考试', '重逢', '坠落',
|
||||
'迷路', '被追逐', '飞翔', '裸奔', '牙齿脱落',
|
||||
'死亡', '结婚', '学校', '怪物', '亲人',
|
||||
'朋友', '陌生人', '水', '火', '天空',
|
||||
'未来', '过去', '重复的梦', '清明梦', '噩梦'
|
||||
],
|
||||
selectedTags: [],
|
||||
|
||||
// 情绪数据
|
||||
emotions: [
|
||||
{ name: '开心', value: 'happy', icon: 'smile' },
|
||||
{ name: '害怕', value: 'scared', icon: 'warn' },
|
||||
{ name: '治愈', value: 'healing', icon: 'like' },
|
||||
{ name: '怪异', value: 'strange', icon: 'question' },
|
||||
{ name: '悲伤', value: 'sad', icon: 'cry' },
|
||||
{ name: '愤怒', value: 'angry', icon: 'no' },
|
||||
{ name: '紧张', value: 'nervous', icon: 'waiting' },
|
||||
{ name: '平静', value: 'calm', icon: 'sleep' }
|
||||
],
|
||||
selectedEmotion: ''
|
||||
},
|
||||
|
||||
// 标题输入
|
||||
onTitleChange(e) {
|
||||
this.setData({
|
||||
title: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 场景输入
|
||||
onSceneChange(e) {
|
||||
this.setData({
|
||||
scene: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 人物输入
|
||||
onCharactersChange(e) {
|
||||
this.setData({
|
||||
characters: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 情节输入
|
||||
onPlotChange(e) {
|
||||
this.setData({
|
||||
plot: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 细节输入
|
||||
onDetailsChange(e) {
|
||||
this.setData({
|
||||
details: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 切换标签选择状态
|
||||
toggleTag(e) {
|
||||
const tag = e.currentTarget.dataset.tag;
|
||||
const { selectedTags } = this.data;
|
||||
|
||||
let newSelectedTags;
|
||||
if (selectedTags.includes(tag)) {
|
||||
// 移除标签
|
||||
newSelectedTags = selectedTags.filter(t => t !== tag);
|
||||
} else {
|
||||
// 添加标签
|
||||
newSelectedTags = [...selectedTags, tag];
|
||||
}
|
||||
|
||||
this.setData({
|
||||
selectedTags: newSelectedTags
|
||||
});
|
||||
},
|
||||
|
||||
// 选择情绪
|
||||
selectEmotion(e) {
|
||||
const emotion = e.currentTarget.dataset.emotion;
|
||||
this.setData({
|
||||
selectedEmotion: emotion
|
||||
});
|
||||
},
|
||||
|
||||
// 保存梦境记录
|
||||
saveDreamRecord() {
|
||||
// 简单验证
|
||||
if (!this.data.title && !this.data.scene && !this.data.plot) {
|
||||
wx.showToast({
|
||||
title: '请至少填写一些内容',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建记录对象
|
||||
const dreamRecord = {
|
||||
id: Date.now().toString(), // 使用时间戳作为唯一ID
|
||||
title: this.data.title || '无标题梦境',
|
||||
scene: this.data.scene,
|
||||
characters: this.data.characters,
|
||||
plot: this.data.plot,
|
||||
details: this.data.details,
|
||||
tags: this.data.selectedTags,
|
||||
emotion: this.data.selectedEmotion,
|
||||
date: new Date().toLocaleDateString(),
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
// 从本地存储获取已有记录
|
||||
wx.getStorage({
|
||||
key: 'dreamRecords',
|
||||
success: (res) => {
|
||||
const records = res.data || [];
|
||||
records.unshift(dreamRecord); // 添加到数组开头
|
||||
|
||||
// 保存回本地存储
|
||||
wx.setStorage({
|
||||
key: 'dreamRecords',
|
||||
data: records,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '记录保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
// 返回首页
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
// 如果没有已有记录，创建新数组
|
||||
wx.setStorage({
|
||||
key: 'dreamRecords',
|
||||
data: [dreamRecord],
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '记录保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
// 返回首页
|
||||
setTimeout(() => {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
3
pages/record/record.json
Normal file
3
pages/record/record.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
114
pages/record/record.wxml
Normal file
114
pages/record/record.wxml
Normal file
@@ -0,0 +1,114 @@
|
||||
<view class="container">
|
||||
<!-- 记录标题 -->
|
||||
<view class="input-section">
|
||||
<text class="section-title">梦境标题</text>
|
||||
<input
|
||||
class="dream-title"
|
||||
placeholder="给你的梦境起个名字吧..."
|
||||
bindinput="onTitleChange"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 分段记录区域 -->
|
||||
<view class="section">
|
||||
<text class="section-title">梦境内容</text>
|
||||
<text class="section-desc">可以分场景、人物、情绪等方面记录</text>
|
||||
|
||||
<!-- 场景描述 -->
|
||||
<view class="segment">
|
||||
<view class="segment-header">
|
||||
<icon type="location" size="18" color="#4a6fa5" />
|
||||
<text class="segment-title">场景</text>
|
||||
</view>
|
||||
<textarea
|
||||
class="segment-content"
|
||||
placeholder="描述一下梦中的场景环境..."
|
||||
bindinput="onSceneChange"
|
||||
></textarea>
|
||||
</view>
|
||||
|
||||
<!-- 人物描述 -->
|
||||
<view class="segment">
|
||||
<view class="segment-header">
|
||||
<icon type="user" size="18" color="#4a6fa5" />
|
||||
<text class="segment-title">人物</text>
|
||||
</view>
|
||||
<textarea
|
||||
class="segment-content"
|
||||
placeholder="梦中出现了哪些人物？他们做了什么？"
|
||||
bindinput="onCharactersChange"
|
||||
></textarea>
|
||||
</view>
|
||||
|
||||
<!-- 情节描述 -->
|
||||
<view class="segment">
|
||||
<view class="segment-header">
|
||||
<icon type="list" size="18" color="#4a6fa5" />
|
||||
<text class="segment-title">情节</text>
|
||||
</view>
|
||||
<textarea
|
||||
class="segment-content"
|
||||
placeholder="描述梦境中的主要情节和发展..."
|
||||
bindinput="onPlotChange"
|
||||
></textarea>
|
||||
</view>
|
||||
|
||||
<!-- 其他细节 -->
|
||||
<view class="segment">
|
||||
<view class="segment-header">
|
||||
<icon type="info" size="18" color="#4a6fa5" />
|
||||
<text class="segment-title">其他细节</text>
|
||||
</view>
|
||||
<textarea
|
||||
class="segment-content"
|
||||
placeholder="还有什么想记录的细节？"
|
||||
bindinput="onDetailsChange"
|
||||
></textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签选择 -->
|
||||
<view class="section">
|
||||
<text class="section-title">梦境标签</text>
|
||||
<text class="section-desc">选择与你的梦境相关的标签</text>
|
||||
|
||||
<view class="tags-container">
|
||||
<view
|
||||
wx:for="{{dreamTags}}"
|
||||
wx:key="index"
|
||||
class="tag {{selectedTags.includes(item) ? 'tag-selected' : ''}}"
|
||||
bindtap="toggleTag"
|
||||
data-tag="{{item}}"
|
||||
>
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 情绪标记 -->
|
||||
<view class="section">
|
||||
<text class="section-title">情绪标记</text>
|
||||
<text class="section-desc">这个梦境带给你什么感受？</text>
|
||||
|
||||
<view class="emotions-container">
|
||||
<view
|
||||
wx:for="{{emotions}}"
|
||||
wx:key="index"
|
||||
class="emotion {{selectedEmotion === item.value ? 'emotion-selected' : ''}}"
|
||||
bindtap="selectEmotion"
|
||||
data-emotion="{{item.value}}"
|
||||
>
|
||||
<icon type="{{item.icon}}" size="24" />
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<button
|
||||
class="save-btn"
|
||||
bindtap="saveDreamRecord"
|
||||
>
|
||||
保存梦境记录
|
||||
</button>
|
||||
</view>
|
||||
148
pages/record/record.wxss
Normal file
148
pages/record/record.wxss
Normal file
@@ -0,0 +1,148 @@
|
||||
.container {
|
||||
padding: 16px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.input-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dream-title {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.segment {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.segment:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.segment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.segment-title {
|
||||
font-size: 16px;
|
||||
color: #4a6fa5;
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.segment-content {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 6px 14px;
|
||||
background-color: #f1f5f9;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tag-selected {
|
||||
background-color: #4a6fa5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.emotions-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.emotion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #f1f5f9;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.emotion text {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.emotion-selected {
|
||||
background-color: #4a6fa5;
|
||||
}
|
||||
|
||||
.emotion-selected text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.emotion-selected icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
padding: 14px 0;
|
||||
background-color: #4a6fa5;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.save-btn::after {
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user