uni-fans-score/pages/feedback/index.vue

<template>
  <view class="feedback-container">
    <!-- 问题类型选择 -->
    <view class="type-section">
      <view class="section-title">问题类型</view>
      <view class="type-grid">
        <view 
          v-for="(type, index) in types" 
          :key="index"
          class="type-item"
          :class="{ active: selectedType === index }"
          @click="selectType(index)"
        >
          {{ type }}
        </view>
      </view>
    </view>

    <!-- 问题描述 -->
    <view class="description-section">
      <view class="section-title">问题描述</view>
      <textarea 
        class="description-input"
        v-model="description"
        placeholder="请详细描述您遇到的问题，以便我们更好地为您解决"
        maxlength="500"
      />
      <view class="word-count">{{ description.length }}/500</view>
    </view>

    <!-- 图片上传 -->
    <view class="upload-section">
      <view class="section-title">图片上传（选填）</view>
      <view class="upload-grid">
        <view 
          class="upload-item"
          v-for="(img, index) in images"
          :key="index"
        >
          <image :src="img" mode="aspectFill" />
          <view class="delete-btn" @click="deleteImage(index)">×</view>
        </view>
        <view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
          <text class="plus">+</text>
          <text class="tip">上传图片</text>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section">
      <view class="section-title">联系方式</view>
      <input 
        class="contact-input"
        v-model="contact"
        placeholder="请留下您的手机号，方便我们联系您"
        type="number"
        maxlength="11"
      />
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submitFeedback">提交反馈</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      types: ['设备故障', '收费问题', '使用建议', '其他'],
      selectedType: -1,
      description: '',
      images: [],
      contact: ''
    }
  },
  methods: {
    selectType(index) {
      this.selectedType = index
    },
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.images.length,
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    submitFeedback() {
      if (this.selectedType === -1) {
        uni.showToast({
          title: '请选择问题类型',
          icon: 'none'
        })
        return
      }
      if (!this.description.trim()) {
        uni.showToast({
          title: '请描述您的问题',
          icon: 'none'
        })
        return
      }
      if (!this.contact) {
        uni.showToast({
          title: '请留下联系方式',
          icon: 'none'
        })
        return
      }
      
      // TODO: 提交反馈
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;

  .section-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .type-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .type-grid {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10rpx;

      .type-item {
        width: calc(50% - 20rpx);
        margin: 10rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #666;
        transition: all 0.3s;

        &.active {
          background: #E3F2FD;
          color: #1976D2;
        }
      }
    }
  }

  .description-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .description-input {
      width: 100%;
      height: 240rpx;
      background: #f8f8f8;
      border-radius: 10rpx;
      padding: 20rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
    }

    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }

  .upload-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .upload-grid {
      display: flex;
      flex-wrap: wrap;

      .upload-item {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        position: relative;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }

        .delete-btn {
          position: absolute;
          right: -10rpx;
          top: -10rpx;
          width: 40rpx;
          height: 40rpx;
          background: rgba(0,0,0,0.5);
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
        }
      }

      .upload-btn {
        width: 200rpx;
        height: 200rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;

        .plus {
          font-size: 60rpx;
          line-height: 1;
          margin-bottom: 10rpx;
        }

        .tip {
          font-size: 24rpx;
        }
      }
    }
  }

  .contact-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;

    .contact-input {
      width: 100%;
      height: 80rpx;
      background: #f8f8f8;
      border-radius: 10rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
    }
  }

  .submit-section {
    padding: 0 40rpx;

    .submit-btn {
      width: 100%;
      height: 88rpx;
      background: #1976D2;
      color: #fff;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;

      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style>