Small_goose_Vue3/pages/mine/feedback.vue

<template>
  <view class="feedback-container">
    <view class="feedback-title">意见反馈</view>
    <view class="feedback-form">
      <view class="form-row">
        <image src="/static/logo.png" class="form-icon" />
        <input class="form-input" v-model="content" placeholder="请输入您的宝贵意见..." />
      </view>
      <view class="form-row">
        <picker :range="typeList" :value="typeIdx" @change="onTypeChange">
          <view class="picker-box">反馈类型：{{ typeList[typeIdx] }}</view>
        </picker>
      </view>
      <button class="submit-btn" @click="submit">提交反馈</button>
    </view>
    <view class="history-title">历史反馈</view>
    <view v-if="history.length === 0" class="empty-history">暂无反馈记录</view>
    <view v-else class="history-list">
      <view class="history-item" v-for="item in history" :key="item.id">
        <view class="history-type">[{{ item.type }}]</view>
        <view class="history-content">{{ item.content }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      content: '',
      typeList: ['功能建议', '内容问题', 'BUG反馈', '其他'],
      typeIdx: 0,
      history: []
    }
  },
  methods: {
    onTypeChange(e) {
      this.typeIdx = e.detail.value
    },
    submit() {
      if (!this.content) {
        uni.showToast({ title: '请填写反馈内容', icon: 'none' })
        return
      }
      this.history.unshift({
        id: Date.now(),
        type: this.typeList[this.typeIdx],
        content: this.content
      })
      this.content = ''
      uni.showToast({ title: '反馈已提交', icon: 'success' })
    }
  }
}
</script>
<style lang="scss">
.feedback-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}
.feedback-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  padding: 48rpx 0 32rpx 0;
}
.feedback-form {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 32rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  padding: 32rpx 24rpx;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.form-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}
.form-input {
  flex: 1;
  border: none;
  font-size: 28rpx;
  background: #f7f8fa;
  border-radius: 8rpx;
  padding: 16rpx;
}
.picker-box {
  font-size: 28rpx;
  color: #409EFF;
  background: #f7f8fa;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
}
.submit-btn {
  width: 100%;
  background: #409EFF;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  margin-top: 16rpx;
}
.history-title {
  font-size: 28rpx;
  color: #888;
  margin: 32rpx 0 16rpx 32rpx;
}
.empty-history {
  color: #bbb;
  font-size: 26rpx;
  text-align: center;
  margin-top: 32rpx;
}
.history-list {
  margin: 0 24rpx;
}
.history-item {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  padding: 20rpx 24rpx;
  margin-bottom: 18rpx;
  display: flex;
  align-items: center;
}
.history-type {
  color: #409EFF;
  font-size: 24rpx;
  margin-right: 16rpx;
}
.history-content {
  font-size: 26rpx;
  color: #333;
}
</style>