增加推销模式
This commit is contained in:
cyh666666
285
pages/mall/consumer/points/exchange-records.uvue
Normal file
285
pages/mall/consumer/points/exchange-records.uvue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<scroll-view class="records-page" scroll-y>
|
||||
<view class="empty-state" v-if="!loading && records.length === 0">
|
||||
<text class="empty-text">暂无兑换记录</text>
|
||||
</view>
|
||||
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<view class="record-list" v-if="!loading && records.length > 0">
|
||||
<view class="record-item" v-for="record in records" :key="record.id">
|
||||
<view class="record-header">
|
||||
<text class="record-product-name">{{ record.product_name }}</text>
|
||||
<text class="record-status" :class="getStatusClass(record.status)">{{ getStatusText(record.status) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="record-info">
|
||||
<view class="info-row">
|
||||
<text class="info-label">消耗积分</text>
|
||||
<text class="info-value">{{ record.points_used }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">兑换数量</text>
|
||||
<text class="info-value">{{ record.quantity }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">兑换时间</text>
|
||||
<text class="info-value">{{ formatTime(record.created_at) }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="record.tracking_no">
|
||||
<text class="info-label">物流单号</text>
|
||||
<text class="info-value">{{ record.tracking_no }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
|
||||
type ExchangeRecord = {
|
||||
id: string
|
||||
product_name: string
|
||||
product_image: string | null
|
||||
product_type: string
|
||||
quantity: number
|
||||
points_used: number
|
||||
status: number
|
||||
tracking_no: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const records = ref<ExchangeRecord[]>([])
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
const loadRecords = async (): Promise<void> => {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await supabaseService.getExchangeRecords()
|
||||
const parsed: ExchangeRecord[] = []
|
||||
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
const item = result[i]
|
||||
const itemAny = item as any
|
||||
|
||||
// 处理数组返回
|
||||
let recordData: any
|
||||
if (Array.isArray(itemAny)) {
|
||||
recordData = itemAny[0]
|
||||
} else {
|
||||
recordData = itemAny
|
||||
}
|
||||
|
||||
let id = ''
|
||||
let quantity = 1
|
||||
let points_used = 0
|
||||
let status = 0
|
||||
let tracking_no: string | null = null
|
||||
let created_at = ''
|
||||
let product_name = ''
|
||||
let product_image: string | null = null
|
||||
let product_type = 'coupon'
|
||||
|
||||
// 使用 _getValue 方法
|
||||
if (typeof recordData._getValue === 'function') {
|
||||
id = (recordData._getValue('id') as string) ?? ''
|
||||
quantity = (recordData._getValue('quantity') as number) ?? 1
|
||||
points_used = (recordData._getValue('points_used') as number) ?? 0
|
||||
status = (recordData._getValue('status') as number) ?? 0
|
||||
tracking_no = recordData._getValue('tracking_no') as string | null
|
||||
created_at = (recordData._getValue('created_at') as string) ?? ''
|
||||
|
||||
// 获取关联的商品信息
|
||||
const product = recordData._getValue('product')
|
||||
if (product != null) {
|
||||
const productAny = product as any
|
||||
if (typeof productAny._getValue === 'function') {
|
||||
product_name = (productAny._getValue('name') as string) ?? ''
|
||||
product_image = productAny._getValue('image_url') as string | null
|
||||
product_type = (productAny._getValue('product_type') as string) ?? 'coupon'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
id = recordData['id'] ?? ''
|
||||
quantity = recordData['quantity'] ?? 1
|
||||
points_used = recordData['points_used'] ?? 0
|
||||
status = recordData['status'] ?? 0
|
||||
tracking_no = recordData['tracking_no'] ?? null
|
||||
created_at = recordData['created_at'] ?? ''
|
||||
|
||||
const product = recordData['product']
|
||||
if (product != null) {
|
||||
product_name = product['name'] ?? ''
|
||||
product_image = product['image_url'] ?? null
|
||||
product_type = product['product_type'] ?? 'coupon'
|
||||
}
|
||||
}
|
||||
|
||||
parsed.push({
|
||||
id,
|
||||
product_name,
|
||||
product_image,
|
||||
product_type,
|
||||
quantity,
|
||||
points_used,
|
||||
status,
|
||||
tracking_no,
|
||||
created_at
|
||||
})
|
||||
}
|
||||
|
||||
records.value = parsed
|
||||
} catch (e) {
|
||||
console.error('加载兑换记录失败:', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: number): string => {
|
||||
if (status === 0) return '待处理'
|
||||
if (status === 1) return '已发货'
|
||||
if (status === 2) return '已完成'
|
||||
if (status === 3) return '已取消'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
const getStatusClass = (status: number): string => {
|
||||
if (status === 0) return 'status-pending'
|
||||
if (status === 1) return 'status-shipped'
|
||||
if (status === 2) return 'status-completed'
|
||||
if (status === 3) return 'status-cancelled'
|
||||
return ''
|
||||
}
|
||||
|
||||
const formatTime = (timeStr: string): string => {
|
||||
if (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')
|
||||
const hh = date.getHours().toString().padStart(2, '0')
|
||||
const mm = date.getMinutes().toString().padStart(2, '0')
|
||||
return `${y}-${m}-${d} ${hh}:${mm}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadRecords()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.records-page {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.record-product-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff7e6;
|
||||
color: #d48806;
|
||||
}
|
||||
|
||||
.status-shipped {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user