14 changed files with 1182 additions and 102 deletions
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<div class="gift-records"> |
|||
<div class="flex justify-between items-center mb-4"> |
|||
<h3 class="text-lg font-bold">赠品记录</h3> |
|||
<el-button type="primary" @click="refreshRecords">刷新</el-button> |
|||
</div> |
|||
|
|||
<!-- 加载状态 --> |
|||
<div v-if="loading" class="text-center py-8"> |
|||
<el-icon class="is-loading mr-2"><Loading /></el-icon> |
|||
加载中... |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-else-if="!giftRecords || giftRecords.length === 0" class="text-center py-8 text-gray-500"> |
|||
<el-icon class="text-4xl mb-2"><Box /></el-icon> |
|||
<p>暂无赠品记录</p> |
|||
</div> |
|||
|
|||
<!-- 赠品记录列表 --> |
|||
<div v-else class="gift-records-list"> |
|||
<el-card |
|||
v-for="record in giftRecords" |
|||
:key="record.id" |
|||
class="mb-4 gift-record-card" |
|||
shadow="hover" |
|||
> |
|||
<div class="flex justify-between items-start"> |
|||
<div class="flex-1"> |
|||
<div class="flex items-center mb-2"> |
|||
<h4 class="font-bold text-lg mr-3">{{ record.gift_name }}</h4> |
|||
<el-tag |
|||
:type="getStatusTagType(record.gift_status)" |
|||
size="small" |
|||
> |
|||
{{ record.gift_status_text }} |
|||
</el-tag> |
|||
</div> |
|||
|
|||
<div class="grid grid-cols-2 gap-4 text-sm text-gray-600"> |
|||
<div> |
|||
<span class="font-medium">赠品类型：</span> |
|||
<el-tag size="small" type="info">{{ record.gift_type_text }}</el-tag> |
|||
</div> |
|||
<div> |
|||
<span class="font-medium">赠送人：</span> |
|||
{{ record.giver_name }} |
|||
<span v-if="record.giver_phone" class="text-gray-500">（{{ record.giver_phone }}）</span> |
|||
</div> |
|||
<div> |
|||
<span class="font-medium">发放时间：</span> |
|||
{{ record.gift_time_formatted }} |
|||
</div> |
|||
<div v-if="record.use_time_formatted"> |
|||
<span class="font-medium">使用时间：</span> |
|||
{{ record.use_time_formatted }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="text-right text-sm text-gray-500"> |
|||
创建时间：{{ record.create_time }} |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, defineProps } from 'vue' |
|||
import { Loading, Box } from '@element-plus/icons-vue' |
|||
import { getGiftRecordList } from '@/app/api/customer_resources' |
|||
|
|||
const props = defineProps({ |
|||
customer_resource_id: { |
|||
type: [String, Number], |
|||
required: true |
|||
} |
|||
}) |
|||
|
|||
const loading = ref(false) |
|||
const giftRecords = ref([]) |
|||
|
|||
// 获取赠品记录列表 |
|||
const fetchGiftRecords = async () => { |
|||
if (!props.customer_resource_id) return |
|||
|
|||
loading.value = true |
|||
try { |
|||
const response = await getGiftRecordList({ |
|||
resource_id: props.customer_resource_id |
|||
}) |
|||
|
|||
if (response.code === 1) { |
|||
giftRecords.value = response.data || [] |
|||
} else { |
|||
console.error('获取赠品记录失败:', response.msg) |
|||
giftRecords.value = [] |
|||
} |
|||
} catch (error) { |
|||
console.error('获取赠品记录异常:', error) |
|||
giftRecords.value = [] |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 刷新记录 |
|||
const refreshRecords = () => { |
|||
fetchGiftRecords() |
|||
} |
|||
|
|||
// 获取状态标签类型 |
|||
const getStatusTagType = (status) => { |
|||
switch (status) { |
|||
case 0: return 'info' // 已失效 |
|||
case 1: return 'success' // 可使用 |
|||
case 2: return 'warning' // 已使用 |
|||
default: return 'info' |
|||
} |
|||
} |
|||
|
|||
// 组件挂载时获取数据 |
|||
onMounted(() => { |
|||
fetchGiftRecords() |
|||
}) |
|||
|
|||
// 监听customer_resource_id变化 |
|||
import { watch } from 'vue' |
|||
watch(() => props.customer_resource_id, (newId) => { |
|||
if (newId) { |
|||
fetchGiftRecords() |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.gift-records { |
|||
padding: 16px; |
|||
} |
|||
|
|||
.gift-record-card { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.gift-record-card:hover { |
|||
transform: translateY(-2px); |
|||
} |
|||
|
|||
.grid { |
|||
display: grid; |
|||
} |
|||
|
|||
.grid-cols-2 { |
|||
grid-template-columns: repeat(2, minmax(0, 1fr)); |
|||
} |
|||
|
|||
.gap-4 { |
|||
gap: 1rem; |
|||
} |
|||
|
|||
.text-gray-500 { |
|||
color: #6b7280; |
|||
} |
|||
|
|||
.text-gray-600 { |
|||
color: #4b5563; |
|||
} |
|||
|
|||
.font-medium { |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.font-bold { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.text-lg { |
|||
font-size: 1.125rem; |
|||
line-height: 1.75rem; |
|||
} |
|||
|
|||
.text-sm { |
|||
font-size: 0.875rem; |
|||
line-height: 1.25rem; |
|||
} |
|||
|
|||
.text-4xl { |
|||
font-size: 2.25rem; |
|||
line-height: 2.5rem; |
|||
} |
|||
|
|||
.mb-2 { |
|||
margin-bottom: 0.5rem; |
|||
} |
|||
|
|||
.mb-4 { |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
.mr-2 { |
|||
margin-right: 0.5rem; |
|||
} |
|||
|
|||
.mr-3 { |
|||
margin-right: 0.75rem; |
|||
} |
|||
|
|||
.py-8 { |
|||
padding-top: 2rem; |
|||
padding-bottom: 2rem; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.text-right { |
|||
text-align: right; |
|||
} |
|||
|
|||
.flex { |
|||
display: flex; |
|||
} |
|||
|
|||
.flex-1 { |
|||
flex: 1 1 0%; |
|||
} |
|||
|
|||
.items-center { |
|||
align-items: center; |
|||
} |
|||
|
|||
.items-start { |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.justify-between { |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<!--赠品记录卡片组件--> |
|||
<template> |
|||
<view class="gift-record-card"> |
|||
<view class="gift-header"> |
|||
<view class="gift-name">{{ record.gift_name }}</view> |
|||
<view class="gift-status" :class="getStatusClass(record.gift_status)"> |
|||
{{ record.gift_status_text }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="gift-info"> |
|||
<view class="info-row"> |
|||
<text class="info-label">赠品类型：</text> |
|||
<text class="info-value">{{ record.gift_type_text }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">获得时间：</text> |
|||
<text class="info-value">{{ formatTime(record.gift_time_formatted) }}</text> |
|||
</view> |
|||
<view class="info-row" v-if="record.giver_name"> |
|||
<text class="info-label">赠送人：</text> |
|||
<text class="info-value">{{ record.giver_name }}</text> |
|||
</view> |
|||
<view class="info-row" v-if="record.use_time_formatted"> |
|||
<text class="info-label">使用时间：</text> |
|||
<text class="info-value">{{ formatTime(record.use_time_formatted) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GiftRecordCard', |
|||
props: { |
|||
record: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
methods: { |
|||
formatTime(timeStr) { |
|||
if (!timeStr) return '未知时间' |
|||
|
|||
try { |
|||
// 如果有工具方法则使用，否则使用内置格式化 |
|||
if (this.$util && this.$util.formatToDateTime) { |
|||
return this.$util.formatToDateTime(timeStr, 'Y-m-d H:i') |
|||
} |
|||
|
|||
// 内置格式化方法 |
|||
if (timeStr.includes('-')) { |
|||
const date = new Date(timeStr) |
|||
const year = date.getFullYear() |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
const day = String(date.getDate()).padStart(2, '0') |
|||
const hours = String(date.getHours()).padStart(2, '0') |
|||
const minutes = String(date.getMinutes()).padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hours}:${minutes}` |
|||
} |
|||
|
|||
return timeStr |
|||
} catch (error) { |
|||
console.error('时间格式化失败:', error) |
|||
return timeStr |
|||
} |
|||
}, |
|||
|
|||
getStatusClass(status) { |
|||
const statusMap = { |
|||
0: 'status-expired', // 已失效 |
|||
1: 'status-available', // 可使用 |
|||
2: 'status-used' // 已使用 |
|||
} |
|||
return statusMap[status] || 'status-unknown' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.gift-record-card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06); |
|||
} |
|||
|
|||
.gift-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.gift-name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
|
|||
.gift-status { |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 8rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
|
|||
&.status-available { |
|||
background: #E8F5E8; |
|||
color: #52C41A; |
|||
} |
|||
|
|||
&.status-used { |
|||
background: #F0F0F0; |
|||
color: #8C8C8C; |
|||
} |
|||
|
|||
&.status-expired { |
|||
background: #FFF2F0; |
|||
color: #FF4D4F; |
|||
} |
|||
|
|||
&.status-unknown { |
|||
background: #F6F6F6; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.gift-info { |
|||
.info-row { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
width: 160rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue