community-front/subPages/community/publishPost.vue

<template>
  <view class="publish-page">
    <!-- 顶部提示容器 -->
    <view class="tip-container" :class="isPhoto ? 'red' : 'blue'" >
      <uv-icon name="info-circle-fill" size="16" :color="isPhoto ? '#FF4757' : '#007AFF'"></uv-icon>
      <text class="tip-text" :class="isPhoto ? 'red' : 'blue'">{{ configParamText('photo_and_word_introduce') }}</text>
    </view>

    <!-- 主要内容容器 -->
    <view class="main-container">
      <!-- 木邻说标题 -->
      <view class="title-section">
        <!-- 加一个小竖条 -->
        <view class="vertical-line" :class="isPhoto ? 'red' : 'blue'"></view>
        <text class="title-text"> {{ isPhoto ? '木邻见' : '木邻说' }} </text>
      </view>

      <!-- 留言板输入区域 -->
      <view class="message-section">
        <text class="section-label"> {{ isPhoto ? configParamText('photo_title') : configParamText('word_title') }}</text>
        <view class="textarea-container">
          <textarea 
            class="message-textarea" 
            v-model="content"
            :placeholder="isPhoto ? configParamText('photo_tip') : configParamText('word_tip')"
            maxlength="500"
            :show-confirm-bar="false"
          ></textarea>
          <view class="char-count">
            <text class="count-text">{{ content.length }}/500</text>
          </view>
        </view>
      </view>

      <!-- 添加图片区域 -->
      <view class="image-section">
        <view class="image-grid">
          <!-- 已选择的图片 -->
          <view 
            class="image-item" 
            v-for="(image, index) in image" 
            :key="index"
          >
            <image class="preview-image" :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <uv-icon name="close" size="12" color="white"></uv-icon>
            </view>
          </view>
          
          <!-- 添加图片按钮 -->
          <view 
            class="add-image-btn" 
            v-if="image.length < 9"
            @click="chooseImage"
          >
            <uv-icon name="plus" size="24" color="#999"></uv-icon>
            <text class="add-text">添加图片</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮容器 -->
    <view class="submit-container">
      <uv-button 
        class="submit-btn" 
        :type=" isPhoto ? 'error' : 'primary'" 
        shape="circle"
        :disabled="!content.trim()"
        @click="submitPost"
      >
        提交审核
      </uv-button>
    </view>
    <GlobalPopup ref="globalPopupRef"></GlobalPopup>
  </view>
</template>

<script>
export default {
  name: 'PublishPost',
  data() {
    return {
      content: '',
      image: [],
      isPhoto: false
    }
  },
  methods: {
    chooseImage() {
      const remainingCount = 9 - this.image.length
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: async (res) => {
          // const tempFiles = res.tempFiles.map(file => file.tempFilePath)
          // this.image = [...this.image, ...tempFiles]
          // console.log(...res.tempFilePaths);
          const file = {
            path: res.tempFilePaths[0]
          }
          const uploadRes = await this.$utils.uploadImage(file)
          this.image.push(uploadRes.url)
          uni.showToast({
            title: '图片上传成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
        }
      })
    },
    removeImage(index) {
      this.image.splice(index, 1)
    },
    async submitPost() {
      if (!this.content.trim()) {
        uni.showToast({
          title: '请输入留言内容',
          icon: 'none'
        })
        return
      }
      const res = await this.$api.community.addPost({
        content: this.content,
        image: this.image.toString(),
        type: this.isPhoto ? 1 : 0
      })
      if (res.code === 200) {
        this.$refs.globalPopupRef.open({
          content: '您的随手拍内容已提交审核！',
          subContent: '审核通过后会自动展示在随手拍上！',
          titleType: 'submit',
          popupType: 'success',
          closefn: () => {
            setTimeout(() => {
              uni.navigateBack()
            }, 300)
          }
        })
        
      }else {
        uni.showToast({
          title: `${res.message}`,
          icon: 'none'
        })
      }
    }
  },
  onLoad(options) {
    if (options.page === 'photo') {
      this.isPhoto = true
    }
  }
} 
</script>

<style lang="scss" scoped>
.publish-page {
  min-height: 100vh;
  background-color: #F3F7F8;
  // display: flex;
  // flex-direction: column;
}

// 顶部提示容器
.tip-container {
  background-color: #E3F2FD;
  padding: 24rpx 32rpx;
  margin: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  border-left: 6rpx solid #007AFF;
  &.red{
    border-left-color: #FF4757;
    background-color: rgba(255, 71, 87, 0.1);
  }
  &.blue{
    border-left-color: #007AFF;
  }
}

.tip-text {
  font-size: 26rpx;
  color: #1976D2;
  &.red{
    color: #FF4757;
  }
  line-height: 1.5;
  flex: 1;
}

// 主要内容容器
.main-container {
  flex: 1;
  margin: 0 20rpx;
  background-color: white;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.title-section {
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.vertical-line {
  width: 8rpx;
  height: 40rpx;
  border-radius: 4rpx;
  
  &.red {
    background-color: #FF4757;
  }
  
  &.blue {
    background-color: #007AFF;
  }
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

// 留言板区域
.message-section {
  margin-bottom: 40rpx;
}

.section-label {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.textarea-container {
  position: relative;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 24rpx;
}

.message-textarea {
  width: 100%;
  min-height: 300rpx;
  font-size: 30rpx;
  color: #333;
  background-color: transparent;
  border: none;
  outline: none;
  resize: none;
  line-height: 1.6;
}

.char-count {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
}

.count-text {
  font-size: 24rpx;
  color: #999;
}

// 图片区域
.image-section {
  margin-bottom: 40rpx;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-image-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  background-color: #fafafa;
  transition: all 0.3s ease;
  
  &:active {
    background-color: #f0f0f0;
    border-color: #007AFF;
  }
}

.add-text {
  font-size: 24rpx;
  color: #999;
}

// 提交按钮容器
.submit-container {
  padding: 32rpx 40rpx;
  // background-color: white;
  margin-top: 60rpx;
  border-top: 1rpx solid #f0f0f0;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>