完成consumer端同步
This commit is contained in:
@@ -0,0 +1,610 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user