|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="info-card">
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">核销门店</text>
|
|
|
+ <text class="info-value">{{ detail.storeName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label">上传时间</text>
|
|
|
+ <text class="info-value">{{ detail.uploadTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row" v-if="detail.status == 1 || detail.status == 2">
|
|
|
+ <text class="info-label">申请时间</text>
|
|
|
+ <text class="info-value">{{ detail.applyTime }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-row" v-if=" detail.status == 2">
|
|
|
+ <text class="info-label">审核时间</text>
|
|
|
+ <text class="info-value">{{ detail.writeOffTime }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="summary-card">
|
|
|
+ <view
|
|
|
+ class="summary-tab"
|
|
|
+ v-for="item in detail.totals"
|
|
|
+ :key="item.key"
|
|
|
+ >
|
|
|
+ <text class="tab-category">{{ item.categoryName }}</text>
|
|
|
+ <text class="tab-count">{{ item.num }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view class="details-list" scroll-y="true" @scrolltolower="loadMore">
|
|
|
+ <view v-if="detail.items.length === 0 && loadStatus !== 'loading'" class="empty-tip">
|
|
|
+ 暂无明细记录
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in detail.items" :key="index" class="detail-item-card">
|
|
|
+ <text class="item-name">{{ item.productName }}</text>
|
|
|
+ <text class="item-code">扫码编号：{{ item.qrCodeNum }}</text>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="loadStatus"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {queryActiveDetail} from "@/api/hexiao";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:"",
|
|
|
+ // 总览信息
|
|
|
+ recordInfo: {
|
|
|
+ storeName: '湖南长沙超吉炫旗舰店',
|
|
|
+ verificationTime: '2025-08-11 09:30:00',
|
|
|
+ },
|
|
|
+ // 分类汇总数据
|
|
|
+ summaryData: [
|
|
|
+ ],
|
|
|
+ // 所有明细的列表
|
|
|
+ detailsList: [],
|
|
|
+ // 分页加载相关
|
|
|
+ pagination: { page: 1, limit: 15 },
|
|
|
+ loadStatus: 'more', // 'more', 'loading', 'noMore'
|
|
|
+ isLoading: false,
|
|
|
+ detail:{totals:[]}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ // 页面加载时，获取第一页数据
|
|
|
+ // options.id 可以用来从上个页面传递记录ID
|
|
|
+ this.id = opt.id
|
|
|
+ this.getDetail(true);
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.fetchDetails(true);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail(){
|
|
|
+ queryActiveDetail(this.id).then(res=>{
|
|
|
+ this.detail = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 模拟从API获取明细数据
|
|
|
+ async fetchDetails(isRefresh = false) {
|
|
|
+ if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (isRefresh) {
|
|
|
+ this.pagination.page = 1;
|
|
|
+ this.detailsList = [];
|
|
|
+ this.loadStatus = 'more';
|
|
|
+ }
|
|
|
+ this.isLoading = true;
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+
|
|
|
+ console.log(`请求第 ${this.pagination.page} 页明细...`);
|
|
|
+ await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
+
|
|
|
+ const mockData = Array.from({ length: this.pagination.limit }, (_, i) => {
|
|
|
+ const id = (this.pagination.page - 1) * this.pagination.limit + i + 1;
|
|
|
+ return {
|
|
|
+ name: `超吉炫10元精制槟榔 - ${id}`,
|
|
|
+ code: `BH2025010020${String(id).padStart(3, '0')}`
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const noMoreData = this.pagination.page >= 5; // 模拟加载4页后没有更多
|
|
|
+
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ if (mockData.length > 0 && !noMoreData) {
|
|
|
+ this.detailsList = [...this.detailsList, ...mockData];
|
|
|
+ this.pagination.page++;
|
|
|
+ this.loadStatus = 'more';
|
|
|
+ } else {
|
|
|
+ this.loadStatus = 'noMore';
|
|
|
+ }
|
|
|
+ this.isLoading = false;
|
|
|
+ },
|
|
|
+ // 滚动到底部加载更多
|
|
|
+ loadMore() {
|
|
|
+ this.fetchDetails();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f5f6fa;
|
|
|
+}
|
|
|
+
|
|
|
+.info-card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.info-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 15rpx 0;
|
|
|
+ .info-label { color: #666; }
|
|
|
+ .info-value { color: #333; }
|
|
|
+}
|
|
|
+
|
|
|
+.summary-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ background: linear-gradient(to right, #6ca1ff, #3c82f8);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 0 20rpx 20rpx;
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-tab {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx;
|
|
|
+
|
|
|
+ .tab-category {
|
|
|
+ font-size: 26rpx;
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ .tab-count {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.details-list {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-tip {
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ padding-top: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-item-card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .item-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-code {
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
