From b1f390370b4462cdec3c930082405c8bc5b30413 Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Tue, 15 Apr 2025 11:20:17 +0800
Subject: [PATCH] feedback

---
 src/pages/integrated/feedback/index.vue | 337 ++++++++++++++++++++++++
 1 file changed, 337 insertions(+)
 create mode 100644 src/pages/integrated/feedback/index.vue

diff --git a/src/pages/integrated/feedback/index.vue b/src/pages/integrated/feedback/index.vue
new file mode 100644
index 0000000..7deea6d
--- /dev/null
+++ b/src/pages/integrated/feedback/index.vue
@@ -0,0 +1,337 @@
+<template>
+  <view class="feedback-page">
+    <!-- 顶部导航 -->
+    <view class="header">
+      <view class="back-btn" @tap="goBack">
+        <text class="back-icon">&lt;</text>
+        <text class="back-text">返回</text>
+      </view>
+      <view class="title">其它问题</view>
+    </view>
+
+    <!-- 问题分类 -->
+    <view class="category-section">
+      <view class="section-title">问题分类</view>
+      <view class="category-list">
+        <view
+          v-for="(item, index) in categories"
+          :key="index"
+          :class="['category-item', { active: selectedCategory === item }]"
+          @tap="selectedCategory = item"
+        >
+          {{ item }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 详细描述 -->
+    <view class="description-section">
+      <view class="section-title">
+        详细描述
+        <text class="required">*</text>
+      </view>
+      <view class="textarea-wrap">
+        <textarea
+          v-model="description"
+          placeholder="您在哪个页面，遇到了什么问题，详细描述有助于帮您快速解决"
+          placeholder-style="color: #999999;"
+          :maxlength="200"
+          class="feedback-textarea"
+        ></textarea>
+        <view class="word-count">{{ description.length }}/200</view>
+      </view>
+    </view>
+
+    <!-- 图片上传 -->
+    <view class="upload-section">
+      <view class="section-title">上传图片 ({{ images.length }}/3)</view>
+      <view class="upload-area">
+        <view
+          v-for="(img, index) in images"
+          :key="index"
+          class="image-item"
+        >
+          <image :src="img" mode="aspectFill"/>
+          <view class="delete-btn" @tap="deleteImage(index)">×</view>
+        </view>
+        <view
+          v-if="images.length < 3"
+          class="upload-btn"
+          @tap="handleUpload"
+        >
+          <view class="plus">+</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 联系方式 -->
+<!--    <view class="contact-section">-->
+<!--      <view class="section-title">联系方式</view>-->
+<!--      <view class="input-wrap">-->
+<!--        <input -->
+<!--          v-model="contact"-->
+<!--          placeholder="手机号/邮箱/微信号"-->
+<!--          placeholder-style="color: #999999;"-->
+<!--          class="contact-input"-->
+<!--        />-->
+<!--      </view>-->
+<!--    </view>-->
+
+<!--    &lt;!&ndash; 邮箱联系 &ndash;&gt;-->
+<!--    <view class="email-contact">-->
+<!--      <view class="contact-text">联系我们</view>-->
+<!--      <view class="email">-->
+<!--        user_service@36kr.com-->
+<!--        <view class="copy-btn" @tap="copyEmail">复制</view>-->
+<!--      </view>-->
+<!--    </view>-->
+
+    <!-- 提交按钮 -->
+    <view class="submit-btn" @tap="handleSubmit">提交</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const categories = ['产品建议', '功能Bug', '内容订正', '其他']
+const selectedCategory = ref('产品建议')
+const description = ref('')
+const images = ref([])
+const contact = ref('')
+
+const goBack = () => {
+  uni.navigateBack()
+}
+
+const handleUpload = () => {
+  uni.chooseImage({
+    count: 3 - images.value.length,
+    success: (res) => {
+      images.value = [...images.value, ...res.tempFilePaths]
+    }
+  })
+}
+
+const deleteImage = (index: number) => {
+  images.value.splice(index, 1)
+}
+
+const copyEmail = () => {
+  uni.setClipboardData({
+    data: 'user_service@36kr.com',
+    success: () => {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'none'
+      })
+    }
+  })
+}
+
+const handleSubmit = () => {
+  if (!description.value) {
+    uni.showToast({
+      title: '请填写详细描述',
+      icon: 'none'
+    })
+    return
+  }
+  // 实现提交逻辑
+}
+</script>
+
+<style lang="scss" scoped>
+.feedback-page {
+  padding: 0 30rpx;
+  min-height: 100vh;
+  background: #fff;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  height: 88rpx;
+  position: relative;
+}
+
+.back-btn {
+  position: absolute;
+  left: 0;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  padding-right: 20rpx;
+}
+
+.back-icon {
+  font-size: 36rpx;
+  color: #333;
+}
+
+.back-text {
+  font-size: 28rpx;
+  color: #333;
+  margin-left: 4rpx;
+}
+
+.title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  font-weight: 500;
+}
+
+.section-title {
+  margin: 40rpx 0 24rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.required {
+  color: #ff4d4f;
+  margin-left: 8rpx;
+}
+
+.category-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+}
+
+.category-item {
+  padding: 12rpx 32rpx;
+  border-radius: 32rpx;
+  background: #f5f5f5;
+  font-size: 28rpx;
+}
+
+.category-item.active {
+  background: #e6f4ff;
+  color: #1677ff;
+}
+
+.textarea-wrap {
+  width: 100%;
+  background-color: #F8F8F8;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.feedback-textarea {
+  width: 100%;
+  height: 240rpx;
+  background-color: #F8F8F8;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.word-count {
+  text-align: right;
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 8rpx;
+}
+
+.upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+}
+
+.image-item, .upload-btn {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 16rpx;
+  border: 1rpx dashed #e5e5e5;
+  position: relative;
+}
+
+.image-item image {
+  width: 100%;
+  height: 100%;
+  border-radius: 16rpx;
+}
+
+.upload-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.plus {
+  font-size: 48rpx;
+  color: #999;
+}
+
+.delete-btn {
+  position: absolute;
+  right: -12rpx;
+  top: -12rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-wrap {
+  width: 100%;
+  background-color: #F8F8F8;
+  border-radius: 16rpx;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+}
+
+.contact-input {
+  width: 100%;
+  height: 88rpx;
+  font-size: 28rpx;
+  background-color: #F8F8F8;
+}
+
+.email-contact {
+  margin: 48rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28rpx;
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.copy-btn {
+  padding: 8rpx 24rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.submit-btn {
+  margin: 64rpx 0;
+  height: 88rpx;
+  background: #1677ff;
+  color: #fff;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+}
+
+/* 修改输入框的placeholder样式 */
+::-webkit-input-placeholder {
+  color: #999999;
+  font-size: 28rpx;
+}
+</style>