EpicSoul/pages/notes/publish.vue

<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>