rating detail
This commit is contained in:
zzc
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user