You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
445 lines
9.2 KiB
445 lines
9.2 KiB
<template>
|
|
<view class="publish-container">
|
|
<!-- 内容区域 -->
|
|
<view class="content-scroll">
|
|
<!-- 图片区域 -->
|
|
<view class="image-section">
|
|
<view class="image-grid">
|
|
<!-- 已选图片 -->
|
|
<view
|
|
class="image-item"
|
|
v-for="(image, index) in selectedImages"
|
|
:key="index"
|
|
>
|
|
<image class="image-preview" :src="image" mode="aspectFill" />
|
|
<view class="image-delete" @click="removeImage(index)">
|
|
<text class="delete-icon">×</text>
|
|
</view>
|
|
</view>
|
|
<!-- 添加图片按钮 -->
|
|
<view
|
|
class="add-image-btn"
|
|
@click="chooseImage"
|
|
v-if="selectedImages.length < 9"
|
|
>
|
|
<text class="add-icon">+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标题区域 -->
|
|
<view class="title-section">
|
|
<textarea
|
|
class="title-input"
|
|
v-model="noteForm.title"
|
|
placeholder="请输入标题..."
|
|
maxlength="100"
|
|
auto-height
|
|
/>
|
|
</view>
|
|
|
|
<!-- 详情区域 -->
|
|
<view class="content-section">
|
|
<textarea
|
|
class="content-input"
|
|
v-model="noteForm.content"
|
|
placeholder="分享你的想法..."
|
|
maxlength="2000"
|
|
auto-height
|
|
/>
|
|
</view>
|
|
|
|
<!-- 快速标签区域 -->
|
|
<view class="quick-tags-section">
|
|
<view class="quick-tags-list">
|
|
<view
|
|
class="quick-tag-item"
|
|
v-for="tag in quickTags"
|
|
:key="tag"
|
|
@click="insertQuickTag(tag)"
|
|
>
|
|
#{{ tag }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已添加标签 -->
|
|
<view class="selected-tags-section" v-if="noteForm.tags.length">
|
|
<view class="selected-tags-list">
|
|
<view
|
|
class="selected-tag-item"
|
|
v-for="(tag, index) in noteForm.tags"
|
|
:key="index"
|
|
@click="removeTag(index)"
|
|
>
|
|
<text class="tag-text">#{{ tag }}</text>
|
|
<text class="tag-close">×</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-placeholder"></view>
|
|
</view>
|
|
|
|
<!-- 底部发布按钮 -->
|
|
<view class="bottom-publish">
|
|
<button class="publish-btn" @click="publishNote" :disabled="!canPublish">
|
|
发布笔记
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "PublishNote",
|
|
data() {
|
|
return {
|
|
selectedImages: [],
|
|
noteForm: {
|
|
title: "",
|
|
content: "",
|
|
tags: [],
|
|
images: [],
|
|
},
|
|
quickTags: [
|
|
"阅读体验",
|
|
"时间力",
|
|
"读书笔记",
|
|
"生活感悟",
|
|
"学习心得",
|
|
"思考",
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
canPublish() {
|
|
return (
|
|
this.noteForm.title.trim() ||
|
|
this.noteForm.content.trim() ||
|
|
this.selectedImages.length > 0
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
if (this.canPublish) {
|
|
uni.showModal({
|
|
title: "确认退出",
|
|
content: "退出后内容将不会保存，确定要退出吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateBack();
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
uni.navigateBack();
|
|
}
|
|
},
|
|
|
|
// 选择图片
|
|
chooseImage() {
|
|
const remainingCount = 9 - this.selectedImages.length;
|
|
uni.chooseImage({
|
|
count: remainingCount,
|
|
sizeType: ["original", "compressed"],
|
|
sourceType: ["album", "camera"],
|
|
success: (res) => {
|
|
this.selectedImages.push(...res.tempFilePaths);
|
|
this.noteForm.images = [...this.selectedImages];
|
|
},
|
|
fail: (err) => {
|
|
console.error("选择图片失败:", err);
|
|
},
|
|
});
|
|
},
|
|
|
|
// 移除图片
|
|
removeImage(index) {
|
|
this.selectedImages.splice(index, 1);
|
|
this.noteForm.images = [...this.selectedImages];
|
|
},
|
|
|
|
// 插入快速标签
|
|
insertQuickTag(tag) {
|
|
if (!this.noteForm.tags.includes(tag)) {
|
|
this.noteForm.tags.push(tag);
|
|
}
|
|
},
|
|
|
|
// 移除标签
|
|
removeTag(index) {
|
|
this.noteForm.tags.splice(index, 1);
|
|
},
|
|
|
|
// 发布笔记
|
|
async publishNote() {
|
|
if (!this.canPublish) {
|
|
uni.showToast({
|
|
title: "请添加内容",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
uni.showLoading({ title: "发布中..." });
|
|
|
|
// 模拟发布API调用
|
|
await this.submitNote(this.noteForm);
|
|
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "发布成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
|
|
// 延迟跳转，让用户看到成功提示
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
} catch (error) {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "发布失败，请重试",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
|
|
// 提交笔记（模拟API）
|
|
async submitNote(noteData) {
|
|
return new Promise((resolve, reject) => {
|
|
setTimeout(() => {
|
|
console.log("发布笔记数据:", noteData);
|
|
resolve({
|
|
code: 200,
|
|
message: "发布成功",
|
|
data: {
|
|
id: "note_" + Date.now(),
|
|
...noteData,
|
|
},
|
|
});
|
|
}, 1500);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.publish-container {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// 内容区域
|
|
.content-scroll {
|
|
flex: 1;
|
|
padding: 0 30rpx;
|
|
width: 690rpx;
|
|
}
|
|
|
|
// 图片区域
|
|
.image-section {
|
|
margin: 32rpx 0;
|
|
padding-bottom: 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.image-item {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.image-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-delete {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
right: 8rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-image-btn {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border: 2rpx dashed #ddd;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fafafa;
|
|
|
|
.add-icon {
|
|
font-size: 48rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 标题区域
|
|
.title-section {
|
|
margin: 32rpx 0;
|
|
padding-bottom: 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.title-input {
|
|
width: 100%;
|
|
min-height: 60rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
color: #333;
|
|
border: none;
|
|
padding: 0;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
// 详情区域
|
|
.content-section {
|
|
margin: 32rpx 0;
|
|
padding-bottom: 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.content-input {
|
|
width: 100%;
|
|
min-height: 300rpx;
|
|
font-size: 32rpx;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
border: none;
|
|
padding: 0;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
// 快速标签区域
|
|
.quick-tags-section {
|
|
margin: 24rpx 0;
|
|
|
|
.quick-tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
|
|
.quick-tag-item {
|
|
padding: 16rpx 24rpx;
|
|
background: #f8f9fa;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: #e9ecef;
|
|
transform: scale(0.96);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 已选标签区域
|
|
.selected-tags-section {
|
|
margin: 24rpx 0;
|
|
padding-top: 24rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
|
.selected-tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
|
|
.selected-tag-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 12rpx 20rpx;
|
|
background: #ff4757;
|
|
border-radius: 32rpx;
|
|
cursor: pointer;
|
|
|
|
.tag-text {
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.tag-close {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
opacity: 0.8;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部发布按钮
|
|
.bottom-publish {
|
|
padding: 24rpx 32rpx;
|
|
background: #fff;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
.publish-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #ff4757;
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
|
|
&:disabled {
|
|
background: #ccc;
|
|
}
|
|
|
|
&:not(:disabled):active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 140rpx;
|
|
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
}
|
|
</style>
|
|
|