cfc/cfc-frontend/pages/article-center/article-edit.vue

<template>
  <view class="edit-container" :style="{ '--font-scale': fontScale }">
    <!-- 自定义导航 -->
    <view class="edit-header">
      <view class="header-left" @click="onBack">
        <text class="back-icon">←</text>
        <text class="back-text">返回</text>
      </view>
      <text class="header-title">写成长记录</text>
      <view class="header-right" @click="goMyPosts">
        <text class="history-text">历史</text>
      </view>
    </view>

    <scroll-view scroll-y class="edit-form">
      <!-- 封面图 -->
      <view class="form-cover" @click="chooseCover">
        <image v-if="coverImage" :src="coverImage" mode="aspectFill" class="cover-preview"  lazy-load />
        <view v-else class="cover-placeholder">
          <text class="cover-icon">📷</text>
          <text class="cover-hint">添加封面</text>
        </view>
        <view v-if="coverImage" class="cover-change" @click.stop="chooseCover">
          <text class="change-text">更换</text>
        </view>
      </view>

      <!-- 标题 -->
      <view class="form-group">
        <input
          class="form-input title-input"
          v-model="title"
          placeholder="给这篇记录取个标题"
          maxlength="50"
        />
        <text class="char-count">{{ title.length }}/50</text>
      </view>

      <!-- 维度选择 -->
      <view class="form-group">
        <text class="form-label">关联维度（选填）</text>
        <view class="dimension-chips">
          <view
            v-for="dim in dimensionList"
            :key="dim.code"
            :class="['dim-chip', selectedDimensions.indexOf(dim.code) >= 0 ? 'active' : '']"
            :style="selectedDimensions.indexOf(dim.code) >= 0 ? 'background:' + dim.color + ';color:' + whiteColor + ';border-color:' + dim.color : ''"
            @click="toggleDimension(dim.code)"
          >
            {{ dim.name }}
          </view>
        </view>
      </view>

      <!-- 正文 -->
      <view class="form-group">
        <textarea
          class="form-textarea"
          v-model="content"
          placeholder="记录成员的成长点滴..."
          maxlength="2000"
        />
        <text class="char-count">{{ content.length }}/2000</text>
      </view>

      <!-- 可见范围 -->
      <view class="form-group">
        <text class="form-label">可见范围</text>
        <view class="visibility-options">
          <view
            :class="['vis-option', visibility === 'private' ? 'active' : '']"
            @click="visibility = 'private'"
          >
            <text class="vis-icon">🏠</text>
            <text class="vis-text">仅家庭</text>
            <text class="vis-desc">仅家庭成员可见</text>
          </view>
          <view
            :class="['vis-option', visibility === 'public' ? 'active' : '']"
            @click="visibility = 'public'"
          >
            <text class="vis-icon">🌍</text>
            <text class="vis-text">公开发布</text>
            <text class="vis-desc">所有人可见，需审核</text>
          </view>
        </view>
      </view>

      <!-- 发布按钮 -->
      <button class="publish-btn" :disabled="!canPublish" @click="onPublish">
        {{ publishing ? '发布中...' : '发布' }}
      </button>
      <view style="height: 60rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
import { BrandColors } from '../../utils/brand-colors.js'
import { publishArticle } from '@/utils/api.js'
import config from '@/config.js'
import { pickImage } from '@/utils/image-picker.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data() {
    return {
      whiteColor: BrandColors.white,
      title: '',
      coverImage: '',
      content: '',
      visibility: 'private',
      selectedDimensions: [],
      publishing: false,
      dimensionList: [
        { code: 'body', name: '身', color: BrandColors.body },
        { code: 'mind', name: '心', color: BrandColors.mind },
        { code: 'wisdom', name: '智', color: BrandColors.wisdom },
        { code: 'action', name: '行', color: BrandColors.success },
        { code: 'wealth', name: '富', color: BrandColors.wealth }
      ]
    }
  },
  computed: {
    canPublish: function() {
      return this.title.trim().length > 0 && this.content.trim().length > 0 && !this.publishing
    }
  },
  methods: {
    chooseCover() {
      var self = this
      pickImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          var tempPath = res.tempFilePaths[0]
          // 上传图片
          var token = uni.getStorageSync('token')
          uni.uploadFile({
            url: (config.default && config.default.API_BASE_URL) || config.API_BASE_URL || '' + '/api/media/upload',
            filePath: tempPath,
            name: 'file',
            header: {
              'Authorization': token ? 'Bearer ' + token : ''
            },
            success: function(uploadRes) {
              try {
                var data = JSON.parse(uploadRes.data)
                if (data && data.code === 200) {
                  self.coverImage = data.data
                } else {
                  uni.showToast({ title: '上传失败', icon: 'none' })
                }
              } catch (e) {
                uni.showToast({ title: '上传失败', icon: 'none' })
              }
            },
            fail: function() {
              uni.showToast({ title: '上传失败', icon: 'none' })
            }
          })
        }
      })
    },
    toggleDimension(code) {
      var idx = this.selectedDimensions.indexOf(code)
      if (idx >= 0) {
        this.selectedDimensions.splice(idx, 1)
      } else {
        this.selectedDimensions.push(code)
      }
    },
    onBack() {
      if (this.title || this.content) {
        var self = this
        uni.showModal({
          title: '提示',
          content: '是否保存草稿？',
          success: function(res) {
            if (res.confirm) {
              uni.setStorageSync('article_draft', {
                title: self.title,
                coverImage: self.coverImage,
                content: self.content,
                visibility: self.visibility,
                selectedDimensions: self.selectedDimensions
              })
            }
            uni.navigateBack()
          }
        })
      } else {
        uni.navigateBack()
      }
    },
    goMyPosts() {
      uni.navigateTo({ url: '/pages/article-center/my-posts' })
    },
    async onPublish() {
      if (!this.canPublish) return
      this.publishing = true
      try {
        var res = await publishArticle({
          title: this.title.trim(),
          content: this.content.trim(),
          coverImage: this.coverImage,
          visibility: this.visibility,
          relatedDimensions: this.selectedDimensions.join(',')
        })
        if (res.code === 200) {
          var msg = this.visibility === 'public'
            ? '发布成功，等待审核'
            : '发布成功，已对家庭可见'
          uni.showToast({ title: msg, icon: 'success', duration: 2000 })
          uni.removeStorageSync('article_draft')
          var self = this
          setTimeout(function() {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({ title: res.message || '发布失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '发布失败', icon: 'none' })
      } finally {
        this.publishing = false
      }
    }
  },
  onLoad() {
    // 加载草稿
    try {
      var draft = uni.getStorageSync('article_draft')
      if (draft) {
        this.title = draft.title || ''
        this.coverImage = draft.coverImage || ''
        this.content = draft.content || ''
        this.visibility = draft.visibility || 'private'
        this.selectedDimensions = draft.selectedDimensions || []
      }
    } catch (e) {}
  }
}
</script>

<style scoped lang="scss">
.edit-container { min-height: 100vh; background: $app-bg; }
.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80rpx $uni-space-page 20rpx;
  background: $app-surface;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-left { display: flex; align-items: center; }
.back-icon { font-size: calc(36rpx * var(--font-scale, 1)); margin-right: 8rpx; }

.header-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; }
.header-right { }
.history-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $brand-primary; }
.edit-form { padding: 20rpx $uni-space-page; }
/* 封面 */
.form-cover {
  width: 100%;
  height: 300rpx;
  background: $facade-hairline-2;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  position: relative;
}
.cover-preview { width: 100%; height: 100%; }
.cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.cover-icon { font-size: calc(64rpx * var(--font-scale, 1)); margin-bottom: 10rpx; }
.cover-hint { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-muted; }
.cover-change {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  background: rgba(0,0,0,0.5);
  color: $app-surface;
  padding: 6rpx 20rpx;
  border-radius: 24rpx;
  font-size: calc(22rpx * var(--font-scale, 1));
}
/* 表单组 */
.form-group {
  background: $app-surface;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.form-input {
  width: 100%;
  font-size: calc(30rpx * var(--font-scale, 1));
  color: $facade-text-strong;
  border: none;
  outline: none;
}
.title-input { font-weight: bold; }
.char-count { display: block; text-align: right; font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-ghost-light; margin-top: 8rpx; }
.form-label { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; display: block; margin-bottom: 16rpx; }
/* 维度 */
.dimension-chips { display: flex; flex-wrap: wrap; gap: 16rpx; }
.dim-chip {
  padding: 10rpx 28rpx;
  border-radius: 24rpx;
  font-size: calc(24rpx * var(--font-scale, 1));
  border: 2rpx solid $facade-border-soft;
  color: $facade-text-body;
}
.dim-chip.active { color: $app-surface; border-color: transparent; }
/* 文本框 */
.form-textarea {
  width: 100%;
  height: 300rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-strong;
  line-height: 1.6;
  border: none;
  outline: none;
  resize: none;
}
/* 可见范围 */
.visibility-options { display: flex; gap: 20rpx; }
.vis-option {
  flex: 1;
  padding: 24rpx;
  border-radius: 16rpx;
  border: 2rpx solid $facade-hairline-2;
  text-align: center;
}
.vis-option.active { border-color: $brand-primary; background: $uni-primary-pale; }
.vis-icon { font-size: calc(40rpx * var(--font-scale, 1)); display: block; margin-bottom: 8rpx; }
.vis-text { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; display: block; }
.vis-desc { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-top: 4rpx; }
/* 发布按钮 */
.publish-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
  color: $app-surface;
  font-size: calc(32rpx * var(--font-scale, 1));
  font-weight: bold;
  border-radius: 24rpx;
  text-align: center;
  border: none;
  margin-top: 20rpx;
}
.publish-btn[disabled] { opacity: 0.4; }
.publish-btn::after { border: none; }
</style>