consumer-app/pages/activities/complaints.vue

<template>
  <view class="complaints-page">
    <!-- 头部区域 -->
    <NavHeader title="投诉建议" />

    <!-- 表单内容区 -->
    <scroll-view class="form-content" scroll-y="true">
      <!-- 投诉建议表单 -->
      <view class="form-section">
        <view class="section-title">填写投诉建议</view>
        
        <!-- 标题 -->
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-label">标题 <text class="required">*</text></text>
            <input
              class="input-field"
              type="text"
              v-model="formData.title"
              placeholder="请输入标题"
              maxlength="100"
            />
          </view>
        </view>

        <!-- 内容 -->
        <view class="form-item">
          <view class="textarea-wrapper">
            <text class="textarea-label">内容 <text class="optional">（选填）</text></text>
            <textarea
              class="textarea-field"
              v-model="formData.content"
              placeholder="请详细描述您的投诉或建议..."
              maxlength="1000"
              :auto-height="true"
            ></textarea>
            <view class="char-count">
              <text>{{ formData.content.length }}/1000</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button
          class="submit-btn"
          :class="{ disabled: loading || !canSubmit }"
          :disabled="loading || !canSubmit"
          @click="handleSubmit"
        >
          {{ loading ? '提交中...' : '提交' }}
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { createLaborUnionSuggest } from '@/api/profile.js'
import NavHeader from "@/components/NavHeader/NavHeader.vue";

export default {
  components: {
    NavHeader
  },
  data() {
    return {
      loading: false,
      formData: {
        title: '',
        content: ''
      }
    }
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return this.formData.title && this.formData.title.trim().length >= 1
    }
  },
  onLoad() {
  },
  methods: {
    // 提交表单
    async handleSubmit() {
      // 验证标题
      if (!this.formData.title || this.formData.title.trim().length < 1) {
        uni.showToast({
          title: '请输入标题',
          icon: 'none'
        })
        return
      }

      try {
        this.loading = true

        // 构建提交数据
        const submitData = {
          title: this.formData.title.trim(),
          content: this.formData.content ? this.formData.content.trim() : ''
        }

        // 调用接口
        const res = await createLaborUnionSuggest(submitData)

        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })

        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('提交投诉建议失败:', error)
        uni.showToast({
          title: error.message || '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

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

.form-content {
  flex: 1;
  height: 0;
  padding: 0 30rpx 40rpx;
  box-sizing: border-box;
}

.form-section {
  margin-top: 30rpx;
  margin-bottom: 40rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 24rpx;
    padding-left: 10rpx;
  }
}

.form-item {
  margin-bottom: 30rpx;

  .input-wrapper {
    position: relative;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 24rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .input-label {
      width: 160rpx;
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      flex-shrink: 0;

      .required {
        color: #d51c3c;
        margin-left: 4rpx;
      }

      .optional {
        color: #999999;
        font-weight: 400;
        font-size: 24rpx;
      }
    }

    .input-field {
      flex: 1;
      font-size: 28rpx;
      color: #1a1819;
    }
  }

  .textarea-wrapper {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .textarea-label {
      display: block;
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 20rpx;

      .optional {
        color: #999999;
        font-weight: 400;
        font-size: 24rpx;
      }
    }

    .textarea-field {
      width: 100%;
      min-height: 300rpx;
      font-size: 28rpx;
      color: #1a1819;
      line-height: 1.6;
      box-sizing: border-box;
    }

    .char-count {
      display: flex;
      justify-content: flex-end;
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.submit-section {
  margin-top: 40rpx;
  padding-bottom: 40rpx;

  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #004294 0%, #0066cc 100%);
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    &.disabled {
      background: #cccccc;
      color: #999999;
    }
  }
}
</style>