xiangan/servicePages/pages/suggest.vue

<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item">
        <text class="label">类型</text>
        <radio-group @change="typeChange" class="radio-group">
          <label class="radio" v-for="(item, index) in types" :key="item.value">
            <radio :value="item.value" :checked="item.value === currentType"/>
            <text>{{ item.name }}</text>
          </label>
        </radio-group>
      </view>
      <view class="form-item-column">
        <text class="label">内容</text>
        <textarea class="textarea" v-model="content" placeholder="请输入您的投诉或建议"
                  placeholder-class="placeholder"/>
      </view>
      <view class="form-item-column">
        <text class="label">上传图片 (可选)</text>
        <view class="image-uploader">
          <view class="image-list">
            <view class="image-item" v-for="(image, index) in imageList" :key="index">
              <image :src="image" mode="aspectFill" @click="previewImage(index)"></image>
              <view class="delete-icon" @click="deleteImage(index)">x</view>
            </view>
            <view class="add-btn" @click="chooseImage" v-if="imageList.length < 3">+</view>
          </view>
        </view>
      </view>
    </view>

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

<script>
import {addComplain} from "@/api/complain";
import {chooseImg, uploadImg} from "@/util";

export default {
  data() {
    return {
      types: [
        {value: '设施损坏', name: '设施损坏'},
        {value: '服务态度', name: '服务态度'},
        {value: '卫生问题', name: '卫生问题'},
      ],
      currentType: '设施损坏',
      content: '',
      imageList: []
    }
  },
  methods: {
    typeChange(e) {
      this.currentType = e.detail.value;
    },
    async chooseImage() {
      uni.showLoading({
        title: '上传中...',
      })
      const res = await chooseImg(9 - this.imageList.length)
      res.forEach(item => {
        this.imageList.push(item.path)
      })
      uni.hideLoading()
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.imageList,
        current: index
      });
    },
    deleteImage(index) {
      this.imageList.splice(index, 1);
    },
    async submit() {
      if (!this.content) {
        uni.showToast({title: '请输入内容', icon: 'none'});
        return;
      }
      console.log('Type:', this.currentType);
      console.log('Content:', this.content);
      console.log('Images:', this.imageList);
      await addComplain({
        feedbackType: this.currentType,
        description: this.content,
        images: this.imageList.length ? JSON.stringify(this.imageList) : null
      })
      uni.showToast({title: '提交成功', icon: 'success'});
      // Navigate back after submission
      setTimeout(() => uni.navigateBack(), 1500);
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.form-item, .form-item-column {
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 28rpx;

  &:last-child {
    border-bottom: none;
  }
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-item-column {
  display: flex;
  flex-direction: column;

  .label {
    margin-bottom: 20rpx;
  }
}

.label {
  color: #333;
}

.radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .radio {
    margin-top: 40rpx;
  }
}

.textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
}

.placeholder {
  color: #999;
}

.image-uploader {
  .image-list {
    display: flex;
    flex-wrap: wrap;
  }

  .image-item {
    position: relative;
    width: 150rpx;
    height: 150rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;

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

    .delete-icon {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 30rpx;
      height: 30rpx;
      background: red;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 30rpx;
      font-size: 20rpx;
    }
  }

  .add-btn {
    width: 150rpx;
    height: 150rpx;
    border: 1px dashed #ccc;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60rpx;
    color: #ccc;
  }
}

.button-container {
  margin-top: 40rpx;
}

.submit-button {
  background-color: #007aff;
  color: #fff;
  border-radius: 50rpx;
}
</style>