consumer-app/pages/activities/complaints.vue

<template>
  <view class="complaints-page">
    <view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
      <NavHeader title="投诉建议" />
    </view>
    <view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
    <scroll-view
      class="form-content"
      scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="listRefreshing"
      @refresherrefresh="onListRefresh"
      @scrolltolower="onListLoadMore"
      :lower-threshold="80"
    >
      <!-- 投诉建议表单 -->
      <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>

      <!-- 我的投诉建议列表 -->
      <view class="list-section">
        <view class="section-title">我的投诉建议</view>
        <view class="empty-list" v-if="!listLoading && suggestList.length === 0">
          <text class="empty-text">暂无投诉建议记录</text>
        </view>
        <view
          class="suggest-card"
          v-for="(item, index) in suggestList"
          :key="item.id || index"
        >
          <view class="card-header">
            <text class="card-title">{{ item.title || '无标题' }}</text>
            <text class="card-time">{{ formatTime(item.createTime) }}</text>
          </view>
          <text class="card-content" v-if="item.content">{{ item.content }}</text>
          <view class="card-reply" v-if="getReplyText(item)">
            <text class="reply-label">{{ item.replyName }}回复：</text>
            <text class="reply-text">{{ getReplyText(item) }}</text>
          </view>
        </view>
        <view class="list-footer" v-if="suggestList.length > 0">
          <text v-if="listLoadMore" class="footer-text">加载中...</text>
          <text v-else-if="!listHasMore" class="footer-text">没有更多了</text>
          <text v-else class="footer-text">上拉加载更多</text>
        </view>
      </view>
    </scroll-view>
    </view>
  </view>
</template>

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

export default {
  components: {
    NavHeader
  },
  data() {
    return {
      statusBarHeight: 0,
      loading: false,
      formData: {
        title: '',
        content: ''
      },
      suggestList: [],
      listPageNo: 1,
      listPageSize: 10,
      listHasMore: true,
      listLoading: false,
      listLoadMore: false,
      listRefreshing: false
    }
  },
  computed: {
    headerHeight() {
      return this.statusBarHeight + 44
    },
    // 是否可以提交
    canSubmit() {
      return this.formData.title && this.formData.title.trim().length >= 1
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
    this.loadSuggestList()
  },
  methods: {
    formatTime(val) {
      if (val == null || val === '') return ''
      let ts = Number(val)
      if (!Number.isFinite(ts)) return val
      if (String(ts).length <= 10) ts *= 1000
      const d = new Date(ts)
      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const h = String(d.getHours()).padStart(2, '0')
      const min = String(d.getMinutes()).padStart(2, '0')
      return `${y}-${m}-${day} ${h}:${min}`
    },
    getReplyText(item) {
      const text = item.replyContent
      return text ? String(text).trim() : ''
    },
    getReplyTime(item) {
      const t = item.replyTime
      return t != null && t !== '' ? this.formatTime(t) : ''
    },
    async loadSuggestList(append = false) {
      if (this.listLoading) return
      this.listLoading = true
      try {
        const res = await getLaborUnionSuggestPage({
          pageNo: this.listPageNo,
          pageSize: this.listPageSize
        })
        const raw = res.list || res.records || (res.data && (res.data.list || res.data.records)) || []
        const list = Array.isArray(raw) ? raw : []
        this.suggestList = append ? this.suggestList.concat(list) : list
        this.listHasMore = list.length >= this.listPageSize
      } catch (e) {
        console.error('加载投诉建议列表失败:', e)
        if (!append) this.suggestList = []
        uni.showToast({ title: '加载列表失败', icon: 'none' })
      } finally {
        this.listLoading = false
        this.listLoadMore = false
        this.listRefreshing = false
      }
    },
    onListRefresh() {
      this.listRefreshing = true
      this.listPageNo = 1
      this.listHasMore = true
      this.loadSuggestList()
    },
    onListLoadMore() {
      if (!this.listHasMore || this.listLoadMore || this.listLoading) return
      this.listLoadMore = true
      this.listPageNo += 1
      this.loadSuggestList(true)
    },
    // 提交表单
    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'
        })

        this.formData.title = ''
        this.formData.content = ''
        this.listPageNo = 1
        this.listHasMore = true
        this.loadSuggestList()
      } 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;
}

.header-fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #e2e8f1;
}

.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.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: 24rpx;

  .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;
    }
  }
}

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

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

  .empty-list {
    padding: 60rpx 0;
    text-align: center;
    .empty-text {
      font-size: 28rpx;
      color: #999999;
    }
  }

  .suggest-card {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12rpx;

      .card-title {
        flex: 1;
        font-size: 28rpx;
        font-weight: 600;
        color: #1a1819;
      }

      .card-time {
        font-size: 22rpx;
        color: #999999;
        flex-shrink: 0;
        margin-left: 16rpx;
      }
    }

    .card-content {
      display: block;
      font-size: 26rpx;
      color: #666666;
      line-height: 1.5;
      margin-bottom: 16rpx;
    }

    .card-reply {
      background: #f0f6ff;
      border-radius: 12rpx;
      padding: 16rpx;
      border-left: 4rpx solid #004294;

      .reply-label {
        font-size: 24rpx;
        font-weight: 500;
        color: #004294;
        margin-right: 8rpx;
      }

      .reply-text {
        font-size: 26rpx;
        color: #333333;
        line-height: 1.5;
      }

      .reply-time {
        display: block;
        font-size: 22rpx;
        color: #999999;
        margin-top: 8rpx;
      }
    }
  }

  .list-footer {
    padding: 24rpx 0;
    text-align: center;
    .footer-text {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</style>