zdtap-uniapp-main/pagesMy/feedback.vue

<template>
  <view class="page">
    <view class="page-content">
      <!-- 反馈内容区域 -->
      <view class="section">
        <view class="section-title">反馈内容</view>
        <view class="feedback-content">
          <textarea
            v-model="form.reviewContent"
            maxlength="100"
            placeholder="写下您的反馈内容或者建议，我们会尽快完善"
            class="textarea-box"
          ></textarea>
          <view class="word-count">{{form.reviewContent.length}}/100</view>
        </view>
      </view>

      <!-- 图片上传区域 -->
      <view class="section">
        <view class="section-title">上传图片</view>
        <view class="upload-content">
          <view class="img-box" @click="handleUpload">
            <image v-if="form.reviewImg" :src="form.reviewImg" mode="aspectFill" class="preview-image"></image>
            <view v-else class="upload-placeholder">
              <text class="cuIcon-camerafill"></text>
              <text class="upload-text">添加图片</text>
            </view>
          </view>
          <text class="upload-tip">请上传相关问题的截图（选填）</text>
        </view>
      </view>

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

<script>
import { base_url } from '@/api/config.js';
import { addFeedback } from '@/api/user.js';

export default {
  data() {
    return {
      form: {
        reviewContent: '',
        reviewImg: ''
      }
    };
  },
  methods: {
    submit() {
      if (!this.form.reviewContent) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        });
        return;
      }
      const data = {
        content: this.form.reviewContent,
        pics: this.form.reviewImg
      };
      addFeedback(data).then(res => {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      });
    },
    handleUpload() {
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.camera']) {
            uni.authorize({
              scope: 'scope.camera',
              success: () => {
                uni.chooseImage({
                  count: 1,
                  success: (res) => {
                    uni.uploadFile({
                      url: base_url + '/bar/common/upload',
                      filePath: res.tempFilePaths[0],
                      name: 'file',
                      formData: { type: 'image' },
                      success: (uploadFileRes) => {
                        this.form.reviewImg = JSON.parse(uploadFileRes.data).url;
                      },
                      fail: (err) => {
                        uni.showToast({
                          title: '上传失败',
                          icon: 'none'
                        });
                      }
                    });
                  }
                });
              },
              fail: () => {
                uni.showToast({
                  title: '拒绝授权',
                  icon: 'none'
                });
                uni.showModal({
                  title: '是否重新授权拍照、相册的功能',
                  success(res) {
                    if (res.confirm) {
                      uni.openSetting({
                        success() {
                          console.log('开启权限成功');
                        },
                        fail() {
                          console.log('开启权限失败');
                        }
                      });
                    }
                  }
                });
              }
            });
          } else {
            uni.chooseImage({
              count: 1,
              success: (res) => {
                uni.uploadFile({
                  url: base_url + '/bar/common/upload',
                  filePath: res.tempFilePaths[0],
                  name: 'file',
                  formData: { type: 'image' },
                  success: (uploadFileRes) => {
                    this.form.reviewImg = JSON.parse(uploadFileRes.data).url;
                  }
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F7F7F7;

  .page-content {
    padding: 24rpx 32rpx;
  }

  .section {
    background: #FFFFFF;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      padding: 32rpx;
      color: #333333;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 32rpx;
        bottom: 0;
        width: 48rpx;
        height: 4rpx;
        background: #19367A;
        border-radius: 2rpx;
      }
    }
  }

  .feedback-content {
    padding: 32rpx;
    position: relative;

    .textarea-box {
      width: 100%;
      height: 240rpx;
      font-size: 28rpx;
      color: #333333;
      line-height: 1.6;
      padding: 24rpx;
      background: #F7F7F7;
      border-radius: 12rpx;
      box-sizing: border-box;

      &::placeholder {
        color: #999999;
      }
    }

    .word-count {
      position: absolute;
      right: 48rpx;
      bottom: 48rpx;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .upload-content {
    padding: 32rpx;

    .img-box {
      width: 200rpx;
      height: 200rpx;
      background: #F7F7F7;
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 16rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }

      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .upload-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #19367A;

        .cuIcon-camerafill {
          font-size: 48rpx;
          margin-bottom: 12rpx;
        }

        .upload-text {
          font-size: 24rpx;
        }
      }
    }

    .upload-tip {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .save-btn {
    width: 686rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #19367A, #2C4C99);
    border-radius: 44rpx;
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 48rpx auto;
    box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
    }
  }
}
</style>