From 50728c0211e25d824966a53ffec9329a0c2a6ee1 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Thu, 7 May 2026 18:38:57 +0800
Subject: [PATCH] rating detail

---
 pages/rating/index.vue | 227 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 227 insertions(+)

diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index 4969d39..1374143 100644
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -140,6 +140,38 @@
       </view>
 
     </view>
+
+    <!-- 右下角悬浮添加按钮 -->
+    <view class="fab-btn" @tap="showAddPopup = true">
+      <text class="plus-icon">+</text>
+    </view>
+
+    <!-- 添加评分项弹窗 -->
+    <view class="popup-mask" v-if="showAddPopup" @tap="showAddPopup = false">
+      <view class="popup-content" @tap.stop>
+        <text class="popup-title">添加评分项</text>
+        <view class="form-item">
+          <text class="form-label">上传</text>
+          <view class="avatar-uploader" @tap="chooseAvatar">
+            <image v-if="newItem.avatar" :src="newItem.avatar" class="preview-avatar" mode="aspectFill" />
+            <view v-else class="upload-placeholder">
+              <text class="camera-icon"></text>
+            </view>
+          </view>
+        </view>
+
+        <view class="form-item">
+          <text class="form-label">名称</text>
+          <input class="form-input" type="text" v-model="newItem.name" placeholder="请输入名称" placeholder-class="input-placeholder" />
+        </view>
+
+        <view class="popup-actions">
+          <button class="btn-cancel" @tap="showAddPopup = false">取消</button>
+          <button class="btn-confirm" @tap="confirmAddItem">确定</button>
+        </view>
+      </view>
+    </view>
+
   </view>
 </template>
 
@@ -173,6 +205,47 @@ const topicData = ref({
   ]
 });
 
+const showAddPopup = ref(false);
+const newItem = ref({
+  name: '',
+  avatar: ''
+});
+
+const chooseAvatar = () => {
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      newItem.value.avatar = res.tempFilePaths[0];
+    }
+  });
+};
+
+const confirmAddItem = () => {
+  if (!newItem.value.name.trim()) {
+    uni.showToast({ title: '请输入名称', icon: 'none' });
+    return;
+  }
+  
+  // 模拟添加
+  const newRatingItem = {
+    id: Date.now(),
+    rank: ratingItems.value.length + 1,
+    name: newItem.value.name,
+    avatar: newItem.value.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${Date.now()}`,
+    score: '0.0',
+    quote: '刚刚加入讨论，快来发表你的看法吧。',
+    userAction: ''
+  };
+  
+  ratingItems.value.push(newRatingItem);
+  
+  // 重置并关闭
+  newItem.value = { name: '', avatar: '' };
+  showAddPopup.value = false;
+  
+  uni.showToast({ title: '添加成功', icon: 'success' });
+};
+
 const actions = [
   { label: '离谱', value: 'terrible', emoji: '👎' },
   { label: '一般', value: 'bad', emoji: '😐' },
@@ -717,4 +790,158 @@ onReachBottom(() => {
   color: #999;
   font-size: 24rpx;
 }
+
+/* 悬浮添加按钮 */
+.fab-btn {
+  position: fixed;
+  right: 40rpx;
+  bottom: 160rpx; /* 留出 tabBar 的距离 */
+  width: 100rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, #4d44f1, #2953ff);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(41, 83, 255, 0.4);
+  z-index: 99;
+  transition: transform 0.2s;
+}
+
+.fab-btn:active {
+  transform: scale(0.9);
+}
+
+.plus-icon {
+  color: #fff;
+  font-size: 60rpx;
+  font-weight: 300;
+  line-height: 1;
+  margin-top: -8rpx;
+}
+
+/* 弹窗样式 */
+.popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.popup-content {
+  width: 600rpx;
+  background-color: #fff;
+  border-radius: 32rpx;
+  padding: 40rpx;
+  box-sizing: border-box;
+  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes popIn {
+  from { transform: scale(0.8); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.popup-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #111;
+  text-align: center;
+  display: block;
+  margin-bottom: 40rpx;
+}
+
+.form-item {
+  margin-bottom: 32rpx;
+}
+
+.form-label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+  display: block;
+  font-weight: 500;
+}
+
+.avatar-uploader {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+  background-color: #f5f6fa;
+  border: 2rpx dashed #d1d5db;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.preview-avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.upload-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.camera-icon {
+  width: 48rpx;
+  height: 48rpx;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
+  background-size: cover;
+}
+
+.form-input {
+  height: 80rpx;
+  background-color: #f5f6fa;
+  border-radius: 16rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.input-placeholder {
+  color: #aaa;
+}
+
+.popup-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 48rpx;
+  gap: 24rpx;
+}
+
+.btn-cancel, .btn-confirm {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 100rpx;
+  font-size: 30rpx;
+  margin: 0;
+}
+
+.btn-cancel::after, .btn-confirm::after {
+  border: none;
+}
+
+.btn-cancel {
+  background-color: #f0f2f7;
+  color: #666;
+}
+
+.btn-confirm {
+  background: linear-gradient(135deg, #4d44f1, #2953ff);
+  color: #fff;
+  font-weight: bold;
+}
 </style>