huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接入商品评论数据

Browse Source
This commit is contained in:
huangzhenbao
2026-03-20 17:30:30 +08:00
parent 620ae742df
commit 13811ae87d
14 changed files with 535 additions and 1753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
pages/mall/admin/product/reviews/index.uvue
View File

@@ -5,30 +5,33 @@
<view class="search-row">
<view class="search-item">
<text class="label">评价时间：</text>
<view class="mock-date-range">
<text class="emoji">📅</text>
<text class="txt">开始日期 - 结束日期</text>
<view class="date-range-row">
<input class="mock-input date-input" v-model="startTime" placeholder="开始 2025-01-01" />
<text class="date-sep">~</text>
<input class="mock-input date-input" v-model="endTime" placeholder="结束 2025-12-31" />
</view>
</view>
<view class="search-item">
<text class="label">评价状态：</text>
<view class="mock-select"><text>请选择</text><text class="arrow">▼</text></view>
</view>
<view class="search-item">
<text class="label">审核状态：</text>
<view class="mock-select"><text>请选择</text><text class="arrow">▼</text></view>
<picker :range="statusLabels" :value="statusPickerIndex" @change="onStatusChange">
<view class="mock-select">
<text>{{ statusLabels[statusPickerIndex] }}</text>
<text class="arrow">▼</text>
</view>
</picker>
</view>
</view>
<view class="search-row mt-16">
<view class="search-item">
<text class="label">商品信息：</text>
<input class="mock-input" placeholder="请输入商品信息" />
<input class="mock-input" v-model="searchProduct" placeholder="请输入商品信息" />
</view>
<view class="search-item">
<text class="label">用户名称：</text>
<input class="mock-input" placeholder="请输入" />
<input class="mock-input" v-model="searchUser" placeholder="请输入" />
</view>
<button class="btn-primary">查询</button>
<button class="btn-primary" @click="onSearch">查询</button>
<button class="btn-white" @click="onReset">重置</button>
</view>
</view>
@@ -40,53 +43,75 @@
<!-- 3. 数据表格 -->
<view class="list-card">
<!-- 错误提示 -->
<view v-if="fetchError !== ''" class="error-tip">
<text class="error-txt">{{ fetchError }}</text>
</view>
<!-- 加载中 -->
<view v-if="loading" class="loading-tip">
<text class="loading-txt">加载中...</text>
</view>
<view class="table-v5">
<view class="th-row">
<view class="th col-check"><text>□</text></view>
<view class="th col-id"><text>评论ID</text></view>
<view class="th col-product"><text>商品信息</text></view>
<view class="th col-spec"><text>规格</text></view>
<view class="th col-user"><text>用户名称</text></view>
<view class="th col-score"><text>评分</text></view>
<view class="th col-content"><text>评价内容</text></view>
<view class="th col-reply"><text>回复内容</text></view>
<view class="th col-status"><text>审核状态</text></view>
<view class="th col-status"><text>状态</text></view>
<view class="th col-time"><text>评价时间</text></view>
<view class="th col-op"><text>操作</text></view>
</view>
<view v-for="item in pagedList" :key="item.id" class="tr-row">
<!-- 空态 -->
<view v-if="reviewList.length === 0 && !loading" class="empty-row">
<text class="empty-txt">暂无评价数据</text>
</view>
<view v-for="item in reviewList" :key="item.id" class="tr-row">
<view class="td col-check"><text>□</text></view>
<view class="td col-id"><text>{{ item.id }}</text></view>
<view class="td col-product">
<image class="p-img" :src="item.image" mode="aspectFill" />
<text class="p-name-txt">{{ item.productName }}</text>
<view class="td col-id">
<text class="id-txt">{{ item.id.substring(0, 8) }}...</text>
</view>
<view class="td col-product">
<image v-if="item.product_image != null && item.product_image !== ''" class="p-img" :src="item.product_image" mode="aspectFill" />
<view v-else class="p-img-placeholder" />
<text class="p-name-txt">{{ item.product_name !== '' ? item.product_name : '—' }}</text>
</view>
<view class="td col-user">
<text>{{ item.username != null && item.username !== '' ? item.username : '匿名用户' }}</text>
</view>
<view class="td col-score"><text>{{ item.rating }}星</text></view>
<view class="td col-content">
<text class="blue-link">{{ item.content != null && item.content !== '' ? item.content : '—' }}</text>
</view>
<view class="td col-reply">
<text>{{ item.merchant_reply != null && item.merchant_reply !== '' ? item.merchant_reply : '无' }}</text>
</view>
<view class="td col-spec"><text>{{ item.spec }}</text></view>
<view class="td col-user"><text>{{ item.username }}</text></view>
<view class="td col-score"><text>{{ item.score }}</text></view>
<view class="td col-content"><text class="blue-link">{{ item.content }}</text></view>
<view class="td col-reply"><text>{{ item.reply || '无' }}</text></view>
<view class="td col-status">
<text class="status-tag" :class="item.status === 1 ? 'pass' : 'wait'">
{{ item.status === 1 ? '通过' : '待审核' }}
<text class="status-tag" :class="getStatusClass(item.status)">
{{ getStatusText(item.status) }}
</text>
</view>
<view class="td col-time"><text>{{ item.time }}</text></view>
<view class="td col-time"><text>{{ formatTime(item.created_at) }}</text></view>
<view class="td col-op">
<text class="op-link">通过</text>
<text class="op-link">驳回</text>
<text class="op-link">回复</text>
<text class="op-link red">删除</text>
<text v-if="item.status !== 1" class="op-link" @click="handleApprove(item.id)">通过</text>
<text v-if="item.status === 1" class="op-link warn" @click="handleReject(item.id)">驳回</text>
<text class="op-link" @click="openReplyModal(item.id, item.merchant_reply)">回复</text>
<text class="op-link red" @click="handleDelete(item.id)">删除</text>
</view>
</view>
</view>
<!-- 分页 -->
<CommonPagination
v-if="true"
v-if="total > 0"
:total="total"
:loading="false"
:loading="loading"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
@@ -100,81 +125,232 @@
@jump-page="handleJumpPage"
/>
</view>
<!-- 回复弹窗 -->
<view class="reply-modal-mask" v-if="showReplyModal" @click="closeReplyModal">
<view class="reply-modal" @click.stop="">
<view class="modal-header">
<text class="modal-title">回复评价</text>
<text class="modal-close" @click="closeReplyModal">✕</text>
</view>
<view class="modal-body">
<textarea class="reply-textarea" v-model="replyContent" placeholder="请输入回复内容..." :maxlength="500" />
</view>
<view class="modal-footer">
<button class="btn-white btn-sm" @click="closeReplyModal">取消</button>
<button class="btn-primary btn-sm" @click="submitReply">
{{ replySubmitting ? '提交中...' : '确认回复' }}
</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
import {
fetchAdminProductReviews,
approveProductReview,
rejectProductReview,
replyProductReview,
deleteProductReview,
type ProductReviewItem
} from '@/services/admin/productReviewService.uts'
const replyList = ref([
{
id: 1069,
image: 'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
spec: 'XL,卡其',
username: 'demo998',
score: 3.5,
content: '22',
reply: '',
status: 0,
time: '2025-02-19 14:56:43'
},
{
id: 1059,
image: 'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
spec: 'XL,卡其',
username: '你好呀',
score: 3.5,
content: '的',
reply: '',
status: 0,
time: '2025-01-07 15:35:36'
},
{
id: 980,
image: 'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
spec: 'XL,卡其',
username: 'wx209638',
score: 5,
content: '好',
reply: '',
status: 1,
time: '2024-09-12 14:20:12'
// ========== 搜索筛选状态 ==========
const searchProduct = ref('')
const searchUser = ref('')
const startTime = ref('')
const endTime = ref('')
// 审核状态选项：index 0 → 全部(null), 1 → 正常(1), 2 → 已删除(2), 3 → 已隐藏(3)
const statusLabels = ['全部', '正常', '已删除', '已隐藏']
const statusPickerIndex = ref(0)
function onStatusChange(e : any) {
statusPickerIndex.value = Number(e.detail.value)
}
// ========== 数据状态 ==========
const loading = ref(false)
const fetchError = ref('')
const reviewList = ref<ProductReviewItem[]>([])
// ========== 数据加载（服务端分页，按需请求） ==========
async function loadReviews(page : number) {
if (loading.value) return
loading.value = true
fetchError.value = ''
try {
// index 0 → null（不过滤），其余直接映射到真实 status 值 1/2/3
const selectedStatus : number | null = statusPickerIndex.value === 0 ? null : statusPickerIndex.value
const result = await fetchAdminProductReviews({
searchProduct: searchProduct.value !== '' ? searchProduct.value : null,
searchUser: searchUser.value !== '' ? searchUser.value : null,
status: selectedStatus,
startTime: startTime.value !== '' ? startTime.value : null,
endTime: endTime.value !== '' ? endTime.value : null,
page: page,
pageSize: pageSize.value
})
reviewList.value = result.items
total.value = result.total
currentPage.value = page
} catch (e) {
fetchError.value = '加载失败，请稍后重试'
console.error('加载评价列表失败:', e)
} finally {
loading.value = false
}
])
}
// ========== PAGINATION STATE ==========
function onSearch() {
loadReviews(1)
}
function onReset() {
searchProduct.value = ''
searchUser.value = ''
startTime.value = ''
endTime.value = ''
statusPickerIndex.value = 0
loadReviews(1)
}
onMounted(() => {
loadReviews(1)
})
// ========== 字段格式化 ==========
function formatTime(t : string | null) : string {
if (t == null || t === '') return '—'
return t.replace('T', ' ').substring(0, 19)
}
// status: 1=正常 2=已删除 3=已隐藏
function getStatusText(status : number) : string {
if (status === 1) return '正常'
if (status === 2) return '已删除'
if (status === 3) return '已隐藏'
return '未知'
}
function getStatusClass(status : number) : string {
if (status === 1) return 'pass'
if (status === 2) return 'deleted'
return 'wait'
}
// ========== 操作：通过（status → 1） ==========
async function handleApprove(id : string) {
const ok = await approveProductReview(id)
if (ok) {
uni.showToast({ title: '已通过', icon: 'success' })
loadReviews(currentPage.value)
} else {
uni.showToast({ title: '操作失败', icon: 'none' })
}
}
// ========== 操作：驳回（status → 3） ==========
async function handleReject(id : string) {
const ok = await rejectProductReview(id)
if (ok) {
uni.showToast({ title: '已驳回', icon: 'success' })
loadReviews(currentPage.value)
} else {
uni.showToast({ title: '操作失败', icon: 'none' })
}
}
// ========== 操作：删除（status → 2，软删除） ==========
function handleDelete(id : string) {
uni.showModal({
title: '确认删除',
content: '确定要删除该评价吗？此操作将标记为已删除状态。',
success: async (res : any) => {
if (res.confirm === true) {
const ok = await deleteProductReview(id)
if (ok) {
uni.showToast({ title: '已删除', icon: 'success' })
loadReviews(currentPage.value)
} else {
uni.showToast({ title: '删除失败', icon: 'none' })
}
}
}
})
}
// ========== 回复弹窗 ==========
const showReplyModal = ref(false)
const replyTargetId = ref('')
const replyContent = ref('')
const replySubmitting = ref(false)
function openReplyModal(id : string, existingReply : string | null) {
replyTargetId.value = id
replyContent.value = existingReply ?? ''
showReplyModal.value = true
}
function closeReplyModal() {
showReplyModal.value = false
replyTargetId.value = ''
replyContent.value = ''
}
async function submitReply() {
if (replyContent.value.trim() === '') {
uni.showToast({ title: '请输入回复内容', icon: 'none' })
return
}
replySubmitting.value = true
try {
const ok = await replyProductReview(replyTargetId.value, replyContent.value.trim())
if (ok) {
uni.showToast({ title: '回复成功', icon: 'success' })
closeReplyModal()
loadReviews(currentPage.value)
} else {
uni.showToast({ title: '回复失败', icon: 'none' })
}
} finally {
replySubmitting.value = false
}
}
// ========== PAGINATION STATE（服务端分页） ==========
const currentPage = ref(1)
const pageSize = ref(10)
const jumpPageInput = ref('')
const pageSizeOptions = [10, 20, 30, 50]
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n : number) => `${n}条/页`))
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
const total = computed(() => replyList.value.length)
const total = ref(0) // 来自服务端 total_count
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
const pagedList = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
return replyList.value.slice(start, start + pageSize.value)
})
const visiblePages = computed((): number[] => {
const t = totalPage.value; const cur = currentPage.value
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
if (t <= 7) return Array.from({ length: t }, (_ : any, i : number) => i + 1)
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
return [1, -1, cur - 1, cur, cur + 1, -1, t]
})
const handlePageChange = (p: number) => { currentPage.value = p }
const handlePageSizeChange = (e: any) => {
const handlePageChange = (p : number) => {
if (p < 1 || p > totalPage.value) return
loadReviews(p)
}
const handlePageSizeChange = (e : any) => {
const idx = Number(e.detail.value)
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
currentPage.value = 1
loadReviews(1)
}
const handleJumpPage = () => {
const p = parseInt(jumpPageInput.value)
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
if (!isNaN(p) && p >= 1 && p <= totalPage.value) {
loadReviews(p)
}
}
// ========== END PAGINATION STATE ==========
</script>
@@ -208,11 +384,9 @@ const handleJumpPage = () => {
.label { font-size: 14px; color: #606266; width: 80px; text-align: right; }
}
.mock-date-range {
width: 280px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px;
display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 8px;
.emoji { font-size: 14px; }
.txt { font-size: 13px; color: #c0c4cc; }
.date-range-row {
display: flex; flex-direction: row; align-items: center; gap: 8px;
.date-sep { font-size: 13px; color: #606266; }
}
.mock-select {
@@ -226,8 +400,11 @@ const handleJumpPage = () => {
width: 200px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 13px;
}
.date-input { width: 140px; }
.btn-primary { background: #1890ff; color: #fff; height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; border: none; }
.btn-white { background: #fff; color: #606266; height: 32px; padding: 0 16px; border-radius: 4px; font-size: 14px; border: 1px solid #dcdfe6; }
.btn-sm { height: 32px; padding: 0 20px; font-size: 13px; }
.action-bar {
margin-bottom: 20px;
@@ -242,6 +419,16 @@ const handleJumpPage = () => {
padding: var(--admin-card-padding);
}
/* 错误 & 加载提示 */
.error-tip {
padding: 12px 16px; background: #fff2f0; border-radius: 4px; margin-bottom: 12px;
.error-txt { font-size: 13px; color: #f5222d; }
}
.loading-tip {
padding: 24px 0; display: flex; justify-content: center;
.loading-txt { font-size: 14px; color: #909399; }
}
.table-v5 { width: 100%; }
.th-row {
@@ -266,10 +453,16 @@ const handleJumpPage = () => {
display: flex; align-items: center; justify-content: center;
}
/* 空态行 */
.empty-row {
padding: 48px 0;
display: flex; justify-content: center;
.empty-txt { font-size: 14px; color: #c0c4cc; }
}
.col-check { width: 50px; }
.col-id { width: 80px; }
.col-id { width: 100px; }
.col-product { flex: 1.5; justify-content: flex-start; gap: 12px; }
.col-spec { width: 100px; }
.col-user { width: 120px; }
.col-score { width: 80px; }
.col-content { flex: 1; }
@@ -279,16 +472,51 @@ const handleJumpPage = () => {
.col-op { width: 180px; display: flex; flex-direction: row; }
.p-img { width: 40px; height: 40px; border-radius: 4px; }
.p-img-placeholder { width: 40px; height: 40px; border-radius: 4px; background: #f5f5f5; }
.p-name-txt { font-size: 13px; line-height: 1.4; color: #1890ff; }
.id-txt { font-size: 12px; color: #909399; }
.blue-link { color: #1890ff; }
.status-tag {
padding: 2px 8px; border-radius: 2px; font-size: 12px;
&.pass { background: rgba(82, 196, 26, 0.1); color: #52c41a; }
&.wait { background: rgba(250, 173, 20, 0.1); color: #faad14; }
&.pass { background: rgba(82, 196, 26, 0.1); color: #52c41a; }
&.wait { background: rgba(250, 173, 20, 0.1); color: #faad14; }
&.deleted { background: rgba(245, 34, 45, 0.1); color: #f5222d; }
}
.op-link { font-size: 13px; color: #1890ff; margin: 0 4px; cursor: pointer; &.red { color: #f5222d; } }
/* 分页区域已迁至 CommonPagination 组件 */
.op-link {
font-size: 13px; color: #1890ff; margin: 0 4px; cursor: pointer;
&.red { color: #f5222d; }
&.warn { color: #faad14; }
}
/* 回复弹窗 */
.reply-modal-mask {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
}
.reply-modal {
background: #fff; border-radius: 6px; width: 480px; max-width: 90vw;
display: flex; flex-direction: column;
}
.modal-header {
padding: 16px 20px; border-bottom: 1px solid #f0f0f0;
display: flex; flex-direction: row; align-items: center; justify-content: space-between;
.modal-title { font-size: 16px; font-weight: 500; color: #333; }
.modal-close { font-size: 16px; color: #909399; cursor: pointer; padding: 4px; }
}
.modal-body {
padding: 20px;
.reply-textarea {
width: 100%; height: 100px; border: 1px solid #dcdfe6; border-radius: 4px;
padding: 8px 12px; font-size: 13px; resize: none;
}
}
.modal-footer {
padding: 12px 20px; border-top: 1px solid #f0f0f0;
display: flex; flex-direction: row; justify-content: flex-end; gap: 12px;
}
</style>