631 lines
13 KiB
Vue
631 lines
13 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 筛选区域 -->
|
||
<view class="filter-section">
|
||
<view class="filter-card">
|
||
<view class="filter-row">
|
||
<view class="filter-item">
|
||
<text class="filter-label">平台</text>
|
||
<picker class="filter-picker" @change="handlePlatformChange" :value="platformIndex" :range="platformList">
|
||
<view class="picker-value">
|
||
<text class="picker-text">{{ platformList[platformIndex] }}</text>
|
||
<text class="picker-arrow">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="filter-item">
|
||
<text class="filter-label">店铺</text>
|
||
<picker class="filter-picker" @change="handleShopChange" :value="shopIndex" :range="shopNames">
|
||
<view class="picker-value">
|
||
<text class="picker-text">{{ shopNames[shopIndex] }}</text>
|
||
<text class="picker-arrow">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 统计信息 -->
|
||
<view class="stats-section">
|
||
<view class="stats-card">
|
||
<view class="stats-item">
|
||
<text class="stats-num success">{{ stats.successCount }}</text>
|
||
<text class="stats-label">已发送</text>
|
||
</view>
|
||
<view class="stats-divider"></view>
|
||
<view class="stats-item">
|
||
<text class="stats-num pending">{{ stats.notSentCount }}</text>
|
||
<text class="stats-label">未发送</text>
|
||
</view>
|
||
<view class="stats-divider"></view>
|
||
<view class="stats-item">
|
||
<text class="stats-num failed">{{ stats.failedCount }}</text>
|
||
<text class="stats-label">失败</text>
|
||
</view>
|
||
<view class="stats-divider"></view>
|
||
<view class="stats-item">
|
||
<text class="stats-num total">{{ stats.total }}</text>
|
||
<text class="stats-label">总计</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 记录列表 -->
|
||
<scroll-view class="record-scroll" scroll-y :refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
|
||
<view class="record-list">
|
||
<view class="record-item" v-for="(item, index) in recordList" :key="index">
|
||
<view class="record-main">
|
||
<!-- 图片 -->
|
||
<view class="record-image" @click="previewImage(item.live_image)">
|
||
<image class="book-image" :src="getFirstImage(item.live_image)" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- 基本信息 -->
|
||
<view class="record-info">
|
||
<view class="info-row">
|
||
<text class="book-name">{{ item.name }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">ISBN：</text>
|
||
<text class="info-value">{{ item.barcode || '-' }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">波次：</text>
|
||
<text class="info-value">{{ item.wave_no || '-' }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">货位：</text>
|
||
<text class="info-value">{{ item.warehouse_name }}{{ item.location_code ? ' - ' + item.location_code : '' }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">时间：</text>
|
||
<text class="info-value">{{ formatTime(item.created_at) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 价格和库存 -->
|
||
<view class="record-detail">
|
||
<view class="detail-row">
|
||
<view class="detail-item">
|
||
<text class="detail-label">定价</text>
|
||
<text class="detail-value">¥{{ formatPrice(item.price) }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">售价</text>
|
||
<text class="detail-value price">¥{{ formatPrice(item.sale_price) }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">库存</text>
|
||
<text class="detail-value">{{ item.quantity }}本</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 状态 -->
|
||
<view class="publish-status">
|
||
<view class="status-row">
|
||
<text class="status-tag" :class="getStatusClass(item.status_in_shop)">{{ item.msg || getStatusText(item.status_in_shop) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<view class="load-more" v-if="loadingMore">
|
||
<view class="loading-spinner"></view>
|
||
<text class="load-more-text">加载中...</text>
|
||
</view>
|
||
<view class="load-more" v-if="!hasMore && recordList.length > 0">
|
||
<text class="no-more-text">— 已全部加载 —</text>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-if="recordList.length === 0 && !isLoading">
|
||
<text class="empty-icon">📭</text>
|
||
<text class="empty-text">暂无上书记录</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getShopList, getShopDetail } from '@/utils/api.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 平台筛选
|
||
platformIndex: 0,
|
||
platformList: ['全部平台', '拼多多', '孔夫子', '闲鱼'],
|
||
platformTypes: [0, 1, 2, 5],
|
||
|
||
// 店铺筛选
|
||
shopIndex: 0,
|
||
shopList: [],
|
||
shopNames: ['全部店铺'],
|
||
|
||
// 分页
|
||
page: 1,
|
||
pageSize: 10,
|
||
hasMore: true,
|
||
isLoading: false,
|
||
loadingMore: false,
|
||
isRefreshing: false,
|
||
|
||
// 数据
|
||
recordList: [],
|
||
stats: { successCount: 0, notSentCount: 0, failedCount: 0, total: 0 }
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
uni.setNavigationBarTitle({ title: '上书记录' })
|
||
this.loadShopList()
|
||
this.fetchRecords()
|
||
},
|
||
|
||
methods: {
|
||
// 加载店铺列表
|
||
async loadShopList() {
|
||
try {
|
||
const platformType = this.platformTypes[this.platformIndex]
|
||
const params = { pageNum: 1, pageSize: 100 }
|
||
if (platformType > 0) params.shop_type = String(platformType)
|
||
const res = await getShopList(params)
|
||
this.shopList = res.list || []
|
||
this.updateShopNames()
|
||
} catch (e) {
|
||
console.error('加载店铺列表失败:', e)
|
||
}
|
||
},
|
||
|
||
// 更新店铺名下拉列表
|
||
updateShopNames() {
|
||
const names = ['全部店铺']
|
||
this.shopList.forEach(function(s) {
|
||
names.push(s.shop_alias_name || s.shop_name || '未命名')
|
||
})
|
||
this.shopNames = names
|
||
if (this.shopIndex >= names.length) {
|
||
this.shopIndex = 0
|
||
}
|
||
},
|
||
|
||
// 平台切换
|
||
handlePlatformChange(e) {
|
||
this.platformIndex = e.detail.value
|
||
this.shopIndex = 0
|
||
this.loadShopList()
|
||
this.resetAndFetch()
|
||
},
|
||
|
||
// 店铺切换
|
||
handleShopChange(e) {
|
||
this.shopIndex = e.detail.value
|
||
this.resetAndFetch()
|
||
},
|
||
|
||
// 重置分页并加载
|
||
resetAndFetch() {
|
||
this.page = 1
|
||
this.hasMore = true
|
||
this.recordList = []
|
||
this.stats = { successCount: 0, notSentCount: 0, failedCount: 0, total: 0 }
|
||
this.fetchRecords()
|
||
},
|
||
|
||
// 获取当前选中的店铺ID
|
||
getSelectedShopId() {
|
||
if (this.shopIndex <= 0) return ''
|
||
const shop = this.shopList[this.shopIndex - 1]
|
||
return shop ? shop.id : ''
|
||
},
|
||
|
||
// 获取上书记录
|
||
async fetchRecords() {
|
||
if (this.isLoading || this.loadingMore) return
|
||
this.isLoading = true
|
||
try {
|
||
const shopId = this.getSelectedShopId()
|
||
if (!shopId) {
|
||
this.isLoading = false
|
||
this.recordList = []
|
||
this.hasMore = false
|
||
return
|
||
}
|
||
const params = {
|
||
page: this.page,
|
||
page_size: this.pageSize,
|
||
shop_id: shopId
|
||
}
|
||
const res = await getShopDetail(params)
|
||
const products = res.products || []
|
||
if (this.page === 1) {
|
||
this.recordList = products
|
||
} else {
|
||
this.recordList = this.recordList.concat(products)
|
||
}
|
||
this.hasMore = products.length >= this.pageSize
|
||
this.stats = {
|
||
successCount: res.success_count || 0,
|
||
notSentCount: res.not_sent_count || 0,
|
||
failedCount: res.failed_count || 0,
|
||
total: res.total || 0
|
||
}
|
||
} catch (e) {
|
||
console.error('获取上书记录失败:', e)
|
||
} finally {
|
||
this.isLoading = false
|
||
this.loadingMore = false
|
||
this.isRefreshing = false
|
||
}
|
||
},
|
||
|
||
// 下拉刷新
|
||
onRefresh() {
|
||
this.isRefreshing = true
|
||
this.page = 1
|
||
this.hasMore = true
|
||
this.fetchRecords()
|
||
},
|
||
|
||
// 上拉加载更多
|
||
loadMore() {
|
||
if (this.loadingMore || !this.hasMore) return
|
||
this.loadingMore = true
|
||
this.page++
|
||
this.fetchRecords()
|
||
},
|
||
|
||
// 获取第一张图片
|
||
getFirstImage(images) {
|
||
if (!images) return ''
|
||
if (typeof images === 'string') return images
|
||
return images[0] || ''
|
||
},
|
||
|
||
// 格式化价格（分→元）
|
||
formatPrice(price) {
|
||
if (!price && price !== 0) return '0.00'
|
||
return (parseFloat(price) / 100).toFixed(2)
|
||
},
|
||
|
||
// 格式化时间（时间戳→日期）
|
||
formatTime(timestamp) {
|
||
if (!timestamp) return '-'
|
||
const date = new Date(parseInt(timestamp) * 1000)
|
||
const y = date.getFullYear()
|
||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||
const d = String(date.getDate()).padStart(2, '0')
|
||
const h = String(date.getHours()).padStart(2, '0')
|
||
const mi = String(date.getMinutes()).padStart(2, '0')
|
||
return y + '-' + m + '-' + d + ' ' + h + ':' + mi
|
||
},
|
||
|
||
// 获取状态CSS类
|
||
getStatusClass(status) {
|
||
if (status === 1) return 'status-success'
|
||
if (status === 0) return 'status-pending'
|
||
return 'status-failed'
|
||
},
|
||
|
||
// 获取状态文字
|
||
getStatusText(status) {
|
||
if (status === 1) return '已发布到店铺'
|
||
if (status === 0) return '未发送到店铺'
|
||
return '发布失败'
|
||
},
|
||
|
||
// 预览图片
|
||
previewImage(images) {
|
||
if (!images) return
|
||
const urls = typeof images === 'string' ? [images] : images
|
||
if (urls.length === 0) return
|
||
uni.previewImage({
|
||
urls: urls,
|
||
current: urls[0]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background: #f5f6fa;
|
||
padding: 24rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 筛选区域 */
|
||
.filter-section {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.filter-card {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.filter-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.filter-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-label {
|
||
font-size: 26rpx;
|
||
color: #4e5969;
|
||
margin-right: 12rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-picker {
|
||
flex: 1;
|
||
}
|
||
|
||
.picker-value {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #f5f7fa;
|
||
padding: 12rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.picker-text {
|
||
font-size: 26rpx;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.picker-arrow {
|
||
font-size: 20rpx;
|
||
color: #86909c;
|
||
}
|
||
|
||
/* 统计信息 */
|
||
.stats-section {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.stats-card {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.stats-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.stats-num {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stats-num.success { color: #67c23a; }
|
||
.stats-num.pending { color: #e6a23c; }
|
||
.stats-num.failed { color: #f56c6c; }
|
||
.stats-num.total { color: #409eff; }
|
||
|
||
.stats-label {
|
||
font-size: 22rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
.stats-divider {
|
||
width: 1px;
|
||
height: 48rpx;
|
||
background: #ebeef5;
|
||
}
|
||
|
||
/* 滚动列表 */
|
||
.record-scroll {
|
||
height: calc(100vh - 300rpx);
|
||
}
|
||
|
||
.record-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.record-item {
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.record-main {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 图片区域 */
|
||
.record-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.book-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 基本信息 */
|
||
.record-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.book-name {
|
||
font-size: 30rpx;
|
||
color: #1d2129;
|
||
font-weight: 600;
|
||
lines: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
color: #86909c;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 24rpx;
|
||
color: #4e5969;
|
||
}
|
||
|
||
/* 价格和库存 */
|
||
.record-detail {
|
||
background: #f5f6fa;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 22rpx;
|
||
color: #86909c;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 28rpx;
|
||
color: #1d2129;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-value.price {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
/* 状态 */
|
||
.publish-status {
|
||
border-top: 1rpx solid #ebeef5;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.status-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.status-tag {
|
||
font-size: 22rpx;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.status-success {
|
||
background: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
|
||
.status-pending {
|
||
background: #faecd8;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.status-failed {
|
||
background: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
/* 加载更多 */
|
||
.load-more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx 0;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.load-more-text {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
.no-more-text {
|
||
font-size: 24rpx;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 3rpx solid #e4e7ed;
|
||
border-top-color: #409eff;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 80rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #86909c;
|
||
}
|
||
</style>
|