feat: release
This commit is contained in:
zzc
10
api/topicItem.js
Normal file
10
api/topicItem.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
// 打分
|
||||
export const topicItemScore = async (data) => {
|
||||
return request({
|
||||
url: "/api/rating/topic/item/score",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
174
components/RatingCard/RatingCard.vue
Normal file
174
components/RatingCard/RatingCard.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="rating-card" @tap="handleCardTap">
|
||||
<view class="card-header">
|
||||
<image class="item-avatar" :src="FILE_BASE_URL + item.avatarUrl" mode="aspectFill" />
|
||||
<text class="item-name">{{ item.name }}</text>
|
||||
<view class="rank-tag" v-if="item.rank <= 3">NO.{{ item.rank }}</view>
|
||||
<view class="flex-spacer"></view>
|
||||
<text class="item-score">{{ item.score }}</text>
|
||||
</view>
|
||||
<view class="quote-box" v-if="item.quote">
|
||||
<text class="quote-text">“{{ item.quote }}”</text>
|
||||
</view>
|
||||
<view class="action-group">
|
||||
<view
|
||||
class="action-item"
|
||||
v-for="(action, aIndex) in actions"
|
||||
:key="aIndex"
|
||||
:class="{ active: item.userAction === action.value }"
|
||||
@tap.stop="handleAction(action.value)"
|
||||
>
|
||||
<view class="action-icon-wrap" :class="'icon-' + action.value">
|
||||
<text class="emoji">{{ action.emoji }}</text>
|
||||
</view>
|
||||
<text class="action-name">{{ action.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FILE_BASE_URL } from "@/utils/constants";
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
actions: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['item-click', 'action-click']);
|
||||
|
||||
const handleCardTap = () => {
|
||||
emit('item-click', props.item.id);
|
||||
};
|
||||
|
||||
const handleAction = (actionValue) => {
|
||||
emit('action-click', props.item, actionValue);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rating-card {
|
||||
background-color: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 24rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.rank-tag {
|
||||
background-color: #eef1ff;
|
||||
color: #2953ff;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-score {
|
||||
font-size: 48rpx;
|
||||
font-weight: 900;
|
||||
color: #2953ff;
|
||||
font-family: 'DIN Alternate', sans-serif;
|
||||
}
|
||||
|
||||
.quote-box {
|
||||
background-color: #f9fafe;
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-bottom: 36rpx;
|
||||
border-left: 6rpx solid #c9d4ff;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: 30rpx;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.action-icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f6fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 44rpx;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.action-item.active .action-icon-wrap {
|
||||
background-color: #eef1ff;
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 8rpx 16rpx rgba(41, 83, 255, 0.15);
|
||||
}
|
||||
|
||||
.action-item.active .emoji {
|
||||
filter: grayscale(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.action-item.active .action-name {
|
||||
color: #2953ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -75,37 +75,14 @@
|
||||
|
||||
<!-- 评分项列表 -->
|
||||
<view class="rating-list">
|
||||
<view
|
||||
class="rating-card"
|
||||
<RatingCard
|
||||
v-for="(item, index) in ratingItems"
|
||||
:key="item.id"
|
||||
@tap="goToDetail(item.id)"
|
||||
>
|
||||
<view class="card-header">
|
||||
<image class="item-avatar" :src="FILE_BASE_URL + item.avatarUrl" mode="aspectFill" />
|
||||
<text class="item-name">{{ item.name }}</text>
|
||||
<view class="rank-tag" v-if="item.rank <= 3">NO.{{ item.rank }}</view>
|
||||
<view class="flex-spacer"></view>
|
||||
<text class="item-score">{{ item.score }}</text>
|
||||
</view>
|
||||
<view class="quote-box">
|
||||
<text class="quote-text">“{{ item.quote }}”</text>
|
||||
</view>
|
||||
<view class="action-group">
|
||||
<view
|
||||
class="action-item"
|
||||
v-for="(action, aIndex) in actions"
|
||||
:key="aIndex"
|
||||
:class="{ active: item.userAction === action.value }"
|
||||
@tap.stop="handleAction(item, action.value)"
|
||||
>
|
||||
<view class="action-icon-wrap" :class="'icon-' + action.value">
|
||||
<text class="emoji">{{ action.emoji }}</text>
|
||||
</view>
|
||||
<text class="action-name">{{ action.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
:item="item"
|
||||
:actions="actions"
|
||||
@item-click="goToDetail"
|
||||
@action-click="handleAction"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 热门锐评 -->
|
||||
@@ -181,6 +158,7 @@ import { getStatusBarHeight } from "@/utils/system";
|
||||
import { onPullDownRefresh, onReachBottom, onLoad } from "@dcloudio/uni-app";
|
||||
import { fetchTopicDetail, fetchTopicRatingItems } from "@/api/topic";
|
||||
import { FILE_BASE_URL } from "@/utils/constants";
|
||||
import RatingCard from "@/components/RatingCard/RatingCard.vue";
|
||||
|
||||
// 状态栏高度处理
|
||||
const statusBarHeight = ref(getStatusBarHeight() || 44);
|
||||
@@ -612,114 +590,6 @@ onReachBottom(() => {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.rating-card {
|
||||
background-color: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 24rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.rank-tag {
|
||||
background-color: #eef1ff;
|
||||
color: #2953ff;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-score {
|
||||
font-size: 48rpx;
|
||||
font-weight: 900;
|
||||
color: #2953ff;
|
||||
font-family: 'DIN Alternate', sans-serif;
|
||||
}
|
||||
|
||||
.quote-box {
|
||||
background-color: #f9fafe;
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-bottom: 36rpx;
|
||||
border-left: 6rpx solid #c9d4ff;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: 30rpx;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f6fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.action-item.active .action-icon-wrap {
|
||||
background-color: #eef1ff;
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 8rpx 16rpx rgba(41, 83, 255, 0.15);
|
||||
}
|
||||
|
||||
.action-item.active .action-name {
|
||||
color: #2953ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 热门锐评 */
|
||||
.comments-section {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
Reference in New Issue
Block a user