work-order/work-order-uniapp/pages/complaint/edit.vue

<template>
  <view class="app-container">
    <HeaderBar title="投诉建议" text-align="center" enable-back />

    <view class="form-box">
      <!-- 反馈类型 -->
      <view class="form-item">
        <view class="label">
          反馈类型
          <span class="required">(必填)</span>
        </view>
        <view class="radio-group">
          <view
            v-for="(item, index) in typeOptions"
            :key="index"
            class="radio-item"
            :class="{ active: formData.type === item.value }"
            @click="formData.type = item.value"
          >
            {{ item.label }}
          </view>
        </view>
      </view>

      <!-- 反馈内容 -->
      <view class="form-item">
        <view class="label">
          反馈内容
          <span class="required">(必填)</span>
        </view>
        <textarea
          class="textarea"
          v-model="formData.content"
          maxlength="500"
          placeholder="请详细描述您遇到的问题或建议"
        />
        <view class="count">{{ formData.content.length }}/500</view>
      </view>

      <!-- 联系方式 -->
      <view class="form-item">
        <view class="label">
          联系方式
        </view>
        <input
          class="input"
          v-model="formData.contact"
          placeholder="请输入您的手机号/微信/邮箱"
          type="text"
        />
      </view>

      <!-- 上传图片 -->
      <view class="form-item">
        <view class="label">
          上传图片
        </view>
        <image-upload
          :limit="3"
          :multiple="true"
          ref="imageUpload"
          @change="handleImageChange"
        />
      </view>
    </view>

    <button class="submit-btn" @click="handleSubmit">提交</button>
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import ImageUpload from '@/components/image-upload/image-upload.vue'
import { appCreateComplaint } from '@/api/app/complaint'

export default {
  name: 'ComplaintEdit',
  components: {
    HeaderBar,
    ImageUpload
  },

  data() {
    return {
      typeIndex: 0,
      typeOptions: [
        { label: '功能异常', value: '1' },
        { label: '意见与建议', value: '2' },
        { label: '其他', value: '3' }
      ],
      formData: {
        type: '1',
        content: '',
        contact: '',
        picture: ''
      }
    }
  },

  methods: {
    onTypeChange(e) {
      this.typeIndex = e.detail.value
      this.formData.type = this.typeOptions[e.detail.value].value
    },

    handleImageChange(files) {
      this.formData.picture = files.map(file => file.url).join(',')
    },

    handleSubmit() {
      if (!this.formData.type) {
        uni.showToast({ title: '请选择反馈类型', icon: 'none' })
        return
      }
      if (!this.formData.content) {
        uni.showToast({ title: '请输入反馈内容', icon: 'none' })
        return
      }

      appCreateComplaint(this.formData).then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      }).catch(err => {
        uni.showToast({
          title: err.message || '提交失败',
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  margin: 30rpx 20rpx;
}
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    .required { color: #f56c6c; font-size: 22rpx; }
    .optional { color: #999; font-size: 22rpx; }
  }
  .input {
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    line-height: 80rpx;
    height: 80rpx;
  }
  .textarea {
    width: 100%;
    min-height: 120rpx;
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    resize: none;
    border: none;
  }
  .count {
    text-align: right;
    color: #bbb;
    font-size: 22rpx;
  }
}
.submit-btn {
  width: 90%;
  margin: 40rpx auto 0;
  display: block;
  background: #2979ff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: none;
}
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .radio-item {
    padding: 20rpx 30rpx;
    background: #f7f8fa;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #666;

    &.active {
      background: #2979ff;
      color: #fff;
    }
  }
}
</style>