698 lines
16 KiB
Plaintext
698 lines
16 KiB
Plaintext
<template>
|
||
<view class="my-reviews-page">
|
||
<view class="tabs">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'published' }"
|
||
@click="switchTab('published')"
|
||
>
|
||
<text class="tab-text">已评价</text>
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'pending' }"
|
||
@click="switchTab('pending')"
|
||
>
|
||
<text class="tab-text">待评价</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="review-list" v-if="activeTab === 'published'">
|
||
<view class="review-item" v-for="review in reviews" :key="review.id">
|
||
<view class="product-info" @click="goToProduct(review.product_id)">
|
||
<image
|
||
class="product-image"
|
||
:src="review.product_image.length > 0 ? review.product_image : defaultImage"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="product-detail">
|
||
<text class="product-name">{{ review.product_name }}</text>
|
||
<view class="rating-row">
|
||
<view class="rating-stars">
|
||
<text
|
||
v-for="star in 5"
|
||
:key="star"
|
||
class="star"
|
||
:class="{ filled: star <= review.rating }"
|
||
>★</text>
|
||
</view>
|
||
<text class="review-time">{{ formatTime(review.created_at) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="review-content">
|
||
<text class="review-text">{{ review.content }}</text>
|
||
</view>
|
||
|
||
<view class="review-images" v-if="review.images.length > 0">
|
||
<image
|
||
v-for="(img, idx) in review.images.slice(0, 4)"
|
||
:key="idx"
|
||
class="review-image"
|
||
:src="img"
|
||
mode="aspectFill"
|
||
@click="previewImage(review.images, idx)"
|
||
/>
|
||
</view>
|
||
|
||
<view class="review-append" v-if="review.append_content">
|
||
<text class="append-label">追评：</text>
|
||
<text class="append-text">{{ review.append_content }}</text>
|
||
</view>
|
||
|
||
<view class="review-actions">
|
||
<view
|
||
class="action-btn append"
|
||
v-if="review.can_append"
|
||
@click="showAppendPopup(review)"
|
||
>
|
||
<text class="action-text">追加评价</text>
|
||
</view>
|
||
<view
|
||
class="action-btn delete"
|
||
@click="confirmDelete(review)"
|
||
>
|
||
<text class="action-text">删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pending-list" v-if="activeTab === 'pending'">
|
||
<view class="pending-item" v-for="item in pendingItems" :key="item.order_id">
|
||
<view class="product-info">
|
||
<image
|
||
class="product-image"
|
||
:src="item.product_image.length > 0 ? item.product_image : defaultImage"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="product-detail">
|
||
<text class="product-name">{{ item.product_name }}</text>
|
||
<text class="order-time">下单时间：{{ formatTime(item.order_time) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="pending-actions">
|
||
<button class="review-btn" @click="goToReview(item)">去评价</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty-state" v-if="!loading && ((activeTab === 'published' && reviews.length === 0) || (activeTab === 'pending' && pendingItems.length === 0))">
|
||
<text class="empty-text">{{ activeTab === 'published' ? '暂无评价记录' : '暂无待评价商品' }}</text>
|
||
</view>
|
||
|
||
<view class="loading-state" v-if="loading">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<view class="append-popup" v-if="showAppendModal" @click="closeAppendPopup">
|
||
<view class="popup-content" @click.stop>
|
||
<view class="popup-header">
|
||
<text class="popup-title">追加评价</text>
|
||
<text class="popup-close" @click="closeAppendPopup">×</text>
|
||
</view>
|
||
|
||
<textarea
|
||
class="append-input"
|
||
v-model="appendContent"
|
||
placeholder="请输入追加评价内容"
|
||
:maxlength="500"
|
||
/>
|
||
|
||
<view class="popup-footer">
|
||
<button class="cancel-btn" @click="closeAppendPopup">取消</button>
|
||
<button class="submit-btn" @click="submitAppend">提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||
|
||
type MyReviewItem = {
|
||
id: string
|
||
product_id: string
|
||
product_name: string
|
||
product_image: string
|
||
rating: number
|
||
content: string
|
||
images: string[]
|
||
append_content: string | null
|
||
can_append: boolean
|
||
can_edit: boolean
|
||
created_at: string
|
||
}
|
||
|
||
type PendingItem = {
|
||
order_id: string
|
||
product_id: string
|
||
product_name: string
|
||
product_image: string
|
||
order_time: string
|
||
}
|
||
|
||
const activeTab = ref<string>('published')
|
||
const reviews = ref<MyReviewItem[]>([])
|
||
const pendingItems = ref<PendingItem[]>([])
|
||
const loading = ref<boolean>(true)
|
||
const showAppendModal = ref<boolean>(false)
|
||
const appendContent = ref<string>('')
|
||
const selectedReview = ref<MyReviewItem | null>(null)
|
||
|
||
const defaultImage: string = '/static/images/default-product.png'
|
||
|
||
const loadReviews = async (): Promise<void> => {
|
||
loading.value = true
|
||
try {
|
||
const result = await supabaseService.getMyReviews()
|
||
const parsed: MyReviewItem[] = []
|
||
|
||
for (let i = 0; i < result.length; i++) {
|
||
const item = result[i]
|
||
let reviewObj: UTSJSONObject
|
||
if (item instanceof UTSJSONObject) {
|
||
reviewObj = item
|
||
} else {
|
||
reviewObj = JSON.parse(JSON.stringify(item)) as UTSJSONObject
|
||
}
|
||
|
||
let images: string[] = []
|
||
const imagesRaw = reviewObj.get('images')
|
||
if (imagesRaw != null && typeof imagesRaw === 'string') {
|
||
try {
|
||
const parsedImages = JSON.parse(imagesRaw as string)
|
||
if (Array.isArray(parsedImages)) {
|
||
images = parsedImages as string[]
|
||
}
|
||
} catch (e) {
|
||
console.error('解析图片失败:', e)
|
||
}
|
||
}
|
||
|
||
const review: MyReviewItem = {
|
||
id: reviewObj.getString('id') ?? '',
|
||
product_id: reviewObj.getString('product_id') ?? '',
|
||
product_name: reviewObj.getString('product_name') ?? '',
|
||
product_image: reviewObj.getString('product_image') ?? '',
|
||
rating: reviewObj.getNumber('rating') ?? 5,
|
||
content: reviewObj.getString('content') ?? '',
|
||
images: images,
|
||
append_content: reviewObj.getString('append_content'),
|
||
can_append: reviewObj.getBoolean('can_append') ?? false,
|
||
can_edit: reviewObj.getBoolean('can_edit') ?? false,
|
||
created_at: reviewObj.getString('created_at') ?? ''
|
||
}
|
||
parsed.push(review)
|
||
}
|
||
|
||
reviews.value = parsed
|
||
} catch (e) {
|
||
console.error('加载评价失败:', e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const loadPendingItems = async (): Promise<void> => {
|
||
loading.value = true
|
||
try {
|
||
const orders = await supabaseService.getOrders(4)
|
||
const pending: PendingItem[] = []
|
||
|
||
for (let i = 0; i < orders.length; i++) {
|
||
const order = orders[i]
|
||
let orderObj: UTSJSONObject
|
||
if (order instanceof UTSJSONObject) {
|
||
orderObj = order
|
||
} else {
|
||
orderObj = JSON.parse(JSON.stringify(order)) as UTSJSONObject
|
||
}
|
||
|
||
const orderId = orderObj.getString('id') ?? ''
|
||
const itemsRaw = orderObj.get('items')
|
||
|
||
if (itemsRaw != null && Array.isArray(itemsRaw)) {
|
||
const items = itemsRaw as any[]
|
||
for (let j = 0; j < items.length; j++) {
|
||
const orderItem = items[j]
|
||
let itemObj: UTSJSONObject
|
||
if (orderItem instanceof UTSJSONObject) {
|
||
itemObj = orderItem
|
||
} else {
|
||
itemObj = JSON.parse(JSON.stringify(orderItem)) as UTSJSONObject
|
||
}
|
||
|
||
pending.push({
|
||
order_id: orderId,
|
||
product_id: itemObj.getString('product_id') ?? '',
|
||
product_name: itemObj.getString('product_name') ?? '',
|
||
product_image: itemObj.getString('product_image') ?? '',
|
||
order_time: orderObj.getString('created_at') ?? ''
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
pendingItems.value = pending
|
||
} catch (e) {
|
||
console.error('加载待评价商品失败:', e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const switchTab = (tab: string): void => {
|
||
activeTab.value = tab
|
||
if (tab === 'published' && reviews.value.length === 0) {
|
||
loadReviews()
|
||
} else if (tab === 'pending' && pendingItems.value.length === 0) {
|
||
loadPendingItems()
|
||
}
|
||
}
|
||
|
||
const goToProduct = (productId: string): void => {
|
||
uni.navigateTo({
|
||
url: `/pages/mall/consumer/product-detail?id=${productId}`
|
||
})
|
||
}
|
||
|
||
const goToReview = (item: PendingItem): void => {
|
||
uni.navigateTo({
|
||
url: `/pages/mall/consumer/review?order_id=${item.order_id}`
|
||
})
|
||
}
|
||
|
||
const showAppendPopup = (review: MyReviewItem): void => {
|
||
selectedReview.value = review
|
||
appendContent.value = ''
|
||
showAppendModal.value = true
|
||
}
|
||
|
||
const closeAppendPopup = (): void => {
|
||
showAppendModal.value = false
|
||
selectedReview.value = null
|
||
appendContent.value = ''
|
||
}
|
||
|
||
const submitAppend = async (): Promise<void> => {
|
||
if (selectedReview.value == null || appendContent.value.trim() === '') {
|
||
uni.showToast({ title: '请输入评价内容', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.showLoading({ title: '提交中...' })
|
||
|
||
try {
|
||
const success = await supabaseService.appendReview(
|
||
selectedReview.value.id,
|
||
appendContent.value.trim(),
|
||
[]
|
||
)
|
||
|
||
if (success) {
|
||
selectedReview.value.append_content = appendContent.value.trim()
|
||
selectedReview.value.can_append = false
|
||
closeAppendPopup()
|
||
uni.showToast({ title: '追加成功', icon: 'success' })
|
||
} else {
|
||
uni.showToast({ title: '追加失败', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
console.error('追加评价失败:', e)
|
||
uni.showToast({ title: '追加失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
const doDelete = async (review: MyReviewItem): Promise<void> => {
|
||
uni.showLoading({ title: '删除中...' })
|
||
|
||
try {
|
||
const success = await supabaseService.deleteReview(review.id)
|
||
if (success) {
|
||
const index = reviews.value.indexOf(review)
|
||
if (index > -1) {
|
||
reviews.value.splice(index, 1)
|
||
}
|
||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||
} else {
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
console.error('删除评价失败:', e)
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
const confirmDelete = (review: MyReviewItem): void => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除这条评价吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
doDelete(review)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const previewImage = (images: string[], index: number): void => {
|
||
uni.previewImage({
|
||
urls: images,
|
||
current: index
|
||
})
|
||
}
|
||
|
||
const formatTime = (timeStr: string | null): string => {
|
||
if (timeStr == null || timeStr === '') return ''
|
||
const date = new Date(timeStr)
|
||
const y = date.getFullYear()
|
||
const m = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const d = date.getDate().toString().padStart(2, '0')
|
||
return `${y}-${m}-${d}`
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadReviews()
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.my-reviews-page {
|
||
flex: 1;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: white;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
padding: 14px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
|
||
.tab-item.active {
|
||
border-bottom-color: #ff6b35;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
.tab-item.active .tab-text {
|
||
color: #ff6b35;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.review-list {
|
||
padding: 8px;
|
||
}
|
||
|
||
.review-item {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.product-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.product-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.product-detail {
|
||
flex: 1;
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
lines: 2;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rating-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.rating-stars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.star {
|
||
font-size: 12px;
|
||
color: #ddd;
|
||
}
|
||
|
||
.star.filled {
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.review-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.review-content {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.review-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.review-images {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.review-image {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 4px;
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.review-append {
|
||
background-color: #f9f9f9;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.append-label {
|
||
font-size: 12px;
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.append-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.review-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 6px 16px;
|
||
border-radius: 16px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.action-btn.append {
|
||
background-color: #fff5f0;
|
||
}
|
||
|
||
.action-btn.append .action-text {
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.action-btn.delete {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.action-btn.delete .action-text {
|
||
color: #999;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.pending-list {
|
||
padding: 8px;
|
||
}
|
||
|
||
.pending-item {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pending-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.review-btn {
|
||
background-color: #ff6b35;
|
||
color: white;
|
||
font-size: 14px;
|
||
border-radius: 16px;
|
||
padding: 0 20px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.order-time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.empty-state {
|
||
padding: 60px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.loading-state {
|
||
padding: 30px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.append-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.popup-content {
|
||
background-color: white;
|
||
border-radius: 16px 16px 0 0;
|
||
width: 100%;
|
||
padding: 16px;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 24px;
|
||
color: #999;
|
||
}
|
||
|
||
.append-input {
|
||
width: 100%;
|
||
height: 120px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.cancel-btn {
|
||
flex: 1;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
font-size: 16px;
|
||
border-radius: 24px;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.submit-btn {
|
||
flex: 1;
|
||
background-color: #ff6b35;
|
||
color: white;
|
||
font-size: 16px;
|
||
border-radius: 24px;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
</style>
|