rating detail
This commit is contained in:
zzc
@@ -140,6 +140,38 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
</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>
|
</view>
|
||||||
</template>
|
</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 = [
|
const actions = [
|
||||||
{ label: '离谱', value: 'terrible', emoji: '👎' },
|
{ label: '离谱', value: 'terrible', emoji: '👎' },
|
||||||
{ label: '一般', value: 'bad', emoji: '😐' },
|
{ label: '一般', value: 'bad', emoji: '😐' },
|
||||||
@@ -717,4 +790,158 @@ onReachBottom(() => {
|
|||||||
color: #999;
|
color: #999;
|
||||||
font-size: 24rpx;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user