611 lines
13 KiB
Plaintext
611 lines
13 KiB
Plaintext
<template>
|
|
<scroll-view class="share-detail-page" direction="vertical">
|
|
<view class="product-section">
|
|
<image class="product-image" :src="shareRecord.product_image != null && shareRecord.product_image.length > 0 ? shareRecord.product_image : defaultImage" mode="aspectFill" />
|
|
<view class="product-info">
|
|
<text class="product-name">{{ shareRecord.product_name }}</text>
|
|
<text class="product-price">¥{{ shareRecord.product_price }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="progress-section">
|
|
<view class="progress-header">
|
|
<text class="progress-title">免单进度</text>
|
|
<text class="progress-status" :class="getStatusClass(shareRecord.status)">{{ getStatusText(shareRecord.status) }}</text>
|
|
</view>
|
|
|
|
<view class="progress-content">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: getProgressPercent() + '%' }"></view>
|
|
</view>
|
|
<view class="progress-numbers">
|
|
<text class="current-count">{{ shareRecord.current_count }}</text>
|
|
<text class="divider">/</text>
|
|
<text class="required-count">{{ shareRecord.required_count }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="progress-tip" v-if="shareRecord.status === 0">
|
|
<text class="tip-text">还需 {{ shareRecord.required_count - shareRecord.current_count }} 人购买即可免单</text>
|
|
</view>
|
|
|
|
<view class="reward-info" v-if="shareRecord.status === 1">
|
|
<text class="reward-label">已获得免单奖励</text>
|
|
<text class="reward-amount">¥{{ shareRecord.reward_amount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="share-code-section">
|
|
<view class="code-header">
|
|
<text class="code-title">分享码</text>
|
|
<text class="copy-btn" @click="copyShareCode">复制</text>
|
|
</view>
|
|
<view class="code-content">
|
|
<text class="code-value">{{ shareRecord.share_code }}</text>
|
|
</view>
|
|
<view class="code-tip">
|
|
<text class="tip-text">将分享码告诉好友，好友下单时填写即可</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="buyers-section">
|
|
<view class="section-header">
|
|
<text class="section-title">购买记录</text>
|
|
<text class="section-count">({{ buyers.length }}人)</text>
|
|
</view>
|
|
|
|
<view v-if="buyersLoading" class="loading-state">
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<view v-else-if="buyers.length === 0" class="empty-state">
|
|
<text class="empty-text">暂无购买记录</text>
|
|
</view>
|
|
|
|
<view v-else class="buyer-list">
|
|
<view class="buyer-item" v-for="buyer in buyers" :key="buyer.id">
|
|
<view class="buyer-avatar">
|
|
<text class="avatar-text">{{ getBuyerInitial(buyer.buyer_name) }}</text>
|
|
</view>
|
|
<view class="buyer-info">
|
|
<text class="buyer-name">{{ maskName(buyer.buyer_name) }}</text>
|
|
<text class="buyer-time">{{ formatTime(buyer.created_at) }}</text>
|
|
</view>
|
|
<view class="buyer-count">
|
|
<text class="count-text">购买 {{ buyer.quantity }} 件</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="time-section">
|
|
<view class="time-item">
|
|
<text class="time-label">创建时间</text>
|
|
<text class="time-value">{{ formatTime(shareRecord.created_at) }}</text>
|
|
</view>
|
|
<view class="time-item" v-if="shareRecord.completed_at">
|
|
<text class="time-label">完成时间</text>
|
|
<text class="time-value">{{ formatTime(shareRecord.completed_at) }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { supabaseService } from '@/utils/supabaseService.uts'
|
|
|
|
type ShareRecordType = {
|
|
id: string
|
|
product_name: string
|
|
product_image: string | null
|
|
product_price: number
|
|
share_code: string
|
|
required_count: number
|
|
current_count: number
|
|
status: number
|
|
reward_amount: number | null
|
|
created_at: string
|
|
completed_at: string | null
|
|
}
|
|
|
|
type BuyerType = {
|
|
id: string
|
|
buyer_id: string
|
|
buyer_name: string
|
|
quantity: number
|
|
created_at: string
|
|
}
|
|
|
|
const shareId = ref<string>('')
|
|
const shareRecord = ref<ShareRecordType>({
|
|
id: '',
|
|
product_name: '',
|
|
product_image: null,
|
|
product_price: 0,
|
|
share_code: '',
|
|
required_count: 4,
|
|
current_count: 0,
|
|
status: 0,
|
|
reward_amount: null,
|
|
created_at: '',
|
|
completed_at: null
|
|
})
|
|
|
|
const buyers = ref<BuyerType[]>([])
|
|
const buyersLoading = ref<boolean>(false)
|
|
const defaultImage: string = '/static/images/default-product.png'
|
|
|
|
const loadShareDetail = async (): Promise<void> => {
|
|
if (shareId.value === '') return
|
|
|
|
try {
|
|
const result = await supabaseService.getShareDetail(shareId.value)
|
|
|
|
const recordRaw = result.get('share_record')
|
|
if (recordRaw != null) {
|
|
let recordObj: UTSJSONObject | null = null
|
|
if (recordRaw instanceof UTSJSONObject) {
|
|
recordObj = recordRaw
|
|
} else {
|
|
recordObj = JSON.parse(JSON.stringify(recordRaw)) as UTSJSONObject
|
|
}
|
|
|
|
const record: ShareRecordType = {
|
|
id: recordObj.getString('id') ?? '',
|
|
product_name: recordObj.getString('product_name') ?? '',
|
|
product_image: recordObj.getString('product_image'),
|
|
product_price: recordObj.getNumber('product_price') ?? 0,
|
|
share_code: recordObj.getString('share_code') ?? '',
|
|
required_count: recordObj.getNumber('required_count') ?? 4,
|
|
current_count: recordObj.getNumber('current_count') ?? 0,
|
|
status: recordObj.getNumber('status') ?? 0,
|
|
reward_amount: recordObj.getNumber('reward_amount'),
|
|
created_at: recordObj.getString('created_at') ?? '',
|
|
completed_at: recordObj.getString('completed_at')
|
|
}
|
|
shareRecord.value = record
|
|
}
|
|
|
|
const purchasesRaw = result.get('secondary_purchases')
|
|
if (purchasesRaw != null && Array.isArray(purchasesRaw)) {
|
|
const parsed: BuyerType[] = []
|
|
const arr = purchasesRaw as any[]
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
const item = arr[i]
|
|
let itemObj: UTSJSONObject | null = null
|
|
if (item instanceof UTSJSONObject) {
|
|
itemObj = item
|
|
} else {
|
|
itemObj = JSON.parse(JSON.stringify(item)) as UTSJSONObject
|
|
}
|
|
|
|
parsed.push({
|
|
id: itemObj.getString('id') ?? '',
|
|
buyer_id: itemObj.getString('buyer_id') ?? '',
|
|
buyer_name: '用户' + (i + 1),
|
|
quantity: itemObj.getNumber('quantity') ?? 1,
|
|
created_at: itemObj.getString('created_at') ?? ''
|
|
})
|
|
}
|
|
|
|
buyers.value = parsed
|
|
}
|
|
} catch (e) {
|
|
console.error('加载分享详情失败:', e)
|
|
}
|
|
}
|
|
|
|
const getProgressPercent = (): number => {
|
|
if (shareRecord.value.required_count <= 0) return 0
|
|
return Math.min(100, Math.round((shareRecord.value.current_count / shareRecord.value.required_count) * 100))
|
|
}
|
|
|
|
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-progress'
|
|
if (status === 1) return 'status-completed'
|
|
if (status === 2) return 'status-invalid'
|
|
if (status === 3) return 'status-expired'
|
|
return ''
|
|
}
|
|
|
|
const copyShareCode = (): void => {
|
|
uni.setClipboardData({
|
|
data: shareRecord.value.share_code,
|
|
success: () => {
|
|
uni.showToast({ title: '已复制分享码', icon: 'success' })
|
|
}
|
|
})
|
|
}
|
|
|
|
const getBuyerInitial = (name: string): string => {
|
|
if (name.length > 0) {
|
|
return name.charAt(0)
|
|
}
|
|
return '用'
|
|
}
|
|
|
|
const maskName = (name: string): string => {
|
|
if (name.length <= 2) {
|
|
return name.charAt(0) + '*'
|
|
}
|
|
return name.charAt(0) + '***' + name.charAt(name.length - 1)
|
|
}
|
|
|
|
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')
|
|
const hh = date.getHours().toString().padStart(2, '0')
|
|
const mm = date.getMinutes().toString().padStart(2, '0')
|
|
return `${y}-${m}-${d} ${hh}:${mm}`
|
|
}
|
|
|
|
onLoad((options) => {
|
|
if (options != null) {
|
|
const idVal = options['id']
|
|
if (idVal != null) {
|
|
shareId.value = idVal as string
|
|
loadShareDetail()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.share-detail-page {
|
|
flex: 1;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.product-section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: white;
|
|
padding: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-image {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.product-info {
|
|
flex: 1;
|
|
margin-left: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 15px;
|
|
color: #333;
|
|
lines: 2;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #ff6b35;
|
|
}
|
|
|
|
.progress-section {
|
|
background-color: white;
|
|
padding: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.progress-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.progress-status {
|
|
font-size: 14px;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.status-progress {
|
|
background-color: #fff5f0;
|
|
color: #ff6b35;
|
|
}
|
|
|
|
.status-completed {
|
|
background-color: #f6ffed;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-invalid {
|
|
background-color: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
|
|
.status-expired {
|
|
background-color: #fff1f0;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.progress-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 12px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ff6b35 0%, #ff8c42 100%);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.progress-numbers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.current-count {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #ff6b35;
|
|
}
|
|
|
|
.divider {
|
|
font-size: 16px;
|
|
color: #999;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.required-count {
|
|
font-size: 16px;
|
|
color: #999;
|
|
}
|
|
|
|
.progress-tip {
|
|
margin-top: 12px;
|
|
padding: 10px;
|
|
background-color: #fff5f0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tip-text {
|
|
font-size: 13px;
|
|
color: #ff6b35;
|
|
}
|
|
|
|
.reward-info {
|
|
margin-top: 12px;
|
|
padding: 16px;
|
|
background: linear-gradient(135deg, #f6ffed 0%, #e6fffb 100%);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.reward-label {
|
|
font-size: 15px;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.reward-amount {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.share-code-section {
|
|
background-color: white;
|
|
padding: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.code-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.code-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.copy-btn {
|
|
font-size: 14px;
|
|
color: #ff6b35;
|
|
padding: 4px 12px;
|
|
border: 1px solid #ff6b35;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.code-content {
|
|
background-color: #f9f9f9;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.code-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
letter-spacing: 8px;
|
|
}
|
|
|
|
.code-tip {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.buyers-section {
|
|
background-color: white;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.section-count {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.loading-state {
|
|
padding: 30px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 30px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.buyer-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.buyer-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #f9f9f9;
|
|
}
|
|
|
|
.buyer-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
background-color: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 16px;
|
|
color: #999;
|
|
}
|
|
|
|
.buyer-info {
|
|
flex: 1;
|
|
margin-left: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.buyer-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.buyer-time {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.buyer-count {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.count-text {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.time-section {
|
|
background-color: white;
|
|
padding: 16px;
|
|
}
|
|
|
|
.time-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.time-label {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.time-value {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
</style>
|