Dining_Hall/pages/feedback/index.vue

<template>
  <view class="feedback-page">
    <!-- 问题类型选择 -->
    <view class="type-section">
      <text class="section-title">您想反馈的问题类型</text>
      <view class="tab-box">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="currentTab = index"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 反馈内容 -->
    <view class="content-box">
      <view class="border-box">
        <u--textarea
          v-model="content"
          placeholder="请详细补充您的问题或建议"
          :maxlength="300"
          height="200"
          count
        >
          <text slot="count" class="word-count">{{ content.length }}/300</text>
        </u--textarea>

        <!-- 图片上传 -->
        <view class="upload-box">
          <u-upload
            :fileList="fileList"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="4"
            multiple
          >
            <view class="upload-btn">
              <u-icon name="camera" size="44" color="#666666"></u-icon>
              <text class="upload-text">添加图片</text>
            </view>
          </u-upload>
        </view>
      </view>


      <!-- 联系方式 -->
      <view class="contact-box">
        <text class="contact-title">请留下您的联系方式</text>
        <u--input
          v-model="contactInfo"
          placeholder="电话号码/电子邮箱（仅工作人员可见）"
          border="bottom"
        ></u--input>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <u-button
        text="提交"
        shape="circle"
        @click="submitFeedback"
        :customStyle="{
          width: '100%',
          height: '88rpx',
          background: '#ff6633',
          color: '#ffffff',
          border: 'none'
        }"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: ['优化建议', '功能问题', '其他'],
      currentTab: 0,
      content: '',
      fileList: [],
      contactInfo: ''
    }
  },
  methods: {
    afterRead(event) {
      const { file } = event;
      this.fileList.push({
        url: file.url,
        status: 'uploading',
        message: '上传中'
      });
    },
    deletePic(event) {
      this.fileList.splice(event.index, 1);
    },
    submitFeedback() {
      // 这里添加提交反馈的逻辑
      uni.showToast({
        title: '反馈已提交',
        icon: 'success'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;

  .type-section {
    background-color: #ffffff;
    padding: 30rpx 30rpx 20rpx;

    .section-title {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
      font-weight: 550;
      display: block;
    }
  }

  .tab-box {
    display: flex;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      padding: 16rpx 0;
      position: relative;
      border: 1px solid rgba(15,39,75,0.4);;
      margin-right: 20rpx;
      border-radius: 2px;

      &.active {
        color: #333333;
        background-color: #fff2ef;
        border: 1px solid #FF6816;

      }
    }
  }

  .content-box {
    margin-top: 20rpx;
    //background-color: #ffffff;
    padding: 30rpx;

    .border-box{
      background-color: #ffffff;
      padding: 16rpx;
      border-radius: 8px;
    }

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

  .upload-box {
    margin-top: 30rpx;

    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      background-color: #f7f8fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8rpx;

      .upload-text {
        font-size: 24rpx;
        color: #666666;
        margin-top: 10rpx;
      }
    }
  }

  .contact-box {
    margin-top: 40rpx;
    background-color: #ffffff;
    padding: 20rpx 16rpx 16rpx 16rpx;
    border-radius: 8px;

    .contact-title {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
  }

  .submit-btn {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 0;
    padding: 20rpx 30rpx;
  }
}

::v-deep .u-textarea {
  padding: 20rpx;
  background-color: #f7f8fa;
  border-radius: 8rpx;
}

::v-deep .u-input {
  &__content {
    &__field-wrapper {
      &__field {
        font-size: 28rpx;
      }
    }
  }
}

::v-deep .u-upload {
  &__wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}
.u-textarea {
  background-color: #ffffff;
}
.upload-btn {
  background-color: #ffffff !important;
  border: 1px solid #dadbde;
}
</style>