|
|
@@ -0,0 +1,441 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <view class="search-wrapper">
|
|
|
+ <view class="query">
|
|
|
+ <u-row customStyle="margin-bottom: 10px" gutter="20">
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ @focus="timeShow = true"
|
|
|
+ v-model="startTimeXd"
|
|
|
+ placeholder="开始日期 ~ 结束日期"
|
|
|
+ prefixIcon="calendar"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ @input="handleSearch"
|
|
|
+ @change="change"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="query-btn" @click="show = !show">
|
|
|
+ <view class="query-btn-icon">
|
|
|
+ </view>
|
|
|
+ <view class="query-btn-text">筛选</view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view class="list-container" scroll-y="true" @scrolltolower="loadMore">
|
|
|
+ <view v-if="recordList.length === 0 && loadStatus !== 'loading'" class="empty-list">
|
|
|
+ <text>暂无数据</text>
|
|
|
+ </view>
|
|
|
+ <view class="data-display-container" v-if="recordList.length>0">
|
|
|
+ <view class="header-row">
|
|
|
+ <view class="header-item">品项</view>
|
|
|
+ <view class="header-item">上货数据</view>
|
|
|
+ <view class="header-item">销售数据</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-body">
|
|
|
+ <view class="data-row" v-for="(item, index) in recordList" :key="index">
|
|
|
+ <view class="data-cell item-column">{{ item.item }}</view>
|
|
|
+ <view class="data-cell">{{ item.activateCount }}</view>
|
|
|
+ <view class="data-cell">{{ item.verificationCount }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="data-row">
|
|
|
+ <view class="data-cell item-column">汇总</view>
|
|
|
+ <view class="data-cell">{{ totalInfo.saleTotal }}</view>
|
|
|
+ <view class="data-cell">{{ totalInfo.activateTotal }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+ <u-popup :show="show" mode="bottom" @close="show = false" >
|
|
|
+ <view class="popup-content">
|
|
|
+ <view class="popup-text">筛选</view>
|
|
|
+ <u-row customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="explain">选择日期</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ v-model="startTimeXd"
|
|
|
+ placeholder="开始日期 ~ 结束日期"
|
|
|
+ prefixIcon="calendar"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ @focus="timeShow = true"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <view class="popup-btn">
|
|
|
+ <u-button @click="handleSearch" class="popup-btn-one">搜索</u-button>
|
|
|
+ <u-button @click="resetForm" class="popup-btn-one" type="primary">重置</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-popup>
|
|
|
+ <u-calendar min-date="2025-07-01" max-date="2030-07-01" @close="timeShow = false" :show="timeShow" :mode="mode" @confirm="confirm"></u-calendar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {storeSalesTrend,storeSalesSummary} from "@/api/hexiao";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ timeShow: false,
|
|
|
+ startTimeXd:"",
|
|
|
+ mode: 'range',
|
|
|
+ show:false,
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ searchQuery: '',
|
|
|
+ recordList: [],
|
|
|
+ totalInfo:{saleTotal:0,activateTotal:0},
|
|
|
+ retailId:0,
|
|
|
+ pagination: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+ loadStatus: 'more', // 'more'-加载前, 'loading'-加载中, 'noMore'-没有更多了
|
|
|
+ isLoading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ // 页面加载时获取第一页数据
|
|
|
+ if(opt.id){
|
|
|
+ this.retailId = opt.id
|
|
|
+ }
|
|
|
+ this.fetchRecords(true);
|
|
|
+
|
|
|
+ },
|
|
|
+ // 监听下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ // this.fetchRecords(true);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ detail(id){
|
|
|
+ uni.navigateTo({ url: `/pages/hexiao/ywy/patrol_detail?id=`+id });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 核心：获取记录列表数据
|
|
|
+ async fetchRecords(isRefresh = false) {
|
|
|
+ if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.isLoading = true;
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+
|
|
|
+ // 在这里替换成您真实的 uni.request API 调用
|
|
|
+
|
|
|
+ storeSalesTrend(this.retailId,this.startTime,this.endTime).then(res=>{
|
|
|
+ let mockData = res.data;
|
|
|
+ this.recordList = mockData;
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ storeSalesSummary(this.retailId,this.startTime,this.endTime).then(res=>{
|
|
|
+ let totalInfo = res.data;
|
|
|
+ this.totalInfo = totalInfo;
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ resetForm(){
|
|
|
+ this.searchQuery = "";
|
|
|
+ this.startTime = "";
|
|
|
+ this.endTime = "";
|
|
|
+ this.startTimeXd = "";
|
|
|
+ },
|
|
|
+ confirm(e) {
|
|
|
+ this.startTime = e[0];
|
|
|
+ this.endTime = e[e.length-1];
|
|
|
+ this.startTimeXd = e[0]+' ~ '+e[e.length-1];
|
|
|
+ if(!this.show){
|
|
|
+ this.handleSearch()
|
|
|
+ }
|
|
|
+ this.timeShow = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ // 上拉加载更多
|
|
|
+ loadMore() {
|
|
|
+ this.fetchRecords();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ handleSearch() {
|
|
|
+ // 在实际项目中，搜索应该调用API，这里为简单起见只做前端筛选
|
|
|
+ this.fetchRecords(true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f5f6fa;
|
|
|
+}
|
|
|
+
|
|
|
+.search-wrapper {
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.search-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f5f6fa;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 25rpx;
|
|
|
+ height: 70rpx;
|
|
|
+}
|
|
|
+.search-input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+}
|
|
|
+.placeholder {
|
|
|
+ color: #b0b0b0;
|
|
|
+}
|
|
|
+
|
|
|
+.list-container {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%; // 必须给scroll-view一个明确的高度
|
|
|
+}
|
|
|
+
|
|
|
+.empty-list {
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ padding-top: 150rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.record-card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.card-decorator {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 8rpx;
|
|
|
+ background-color: #e3efff;
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ padding: 30rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #f5f5f5;
|
|
|
+
|
|
|
+ .record-id {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.details-section {
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .detail-label {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-value {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.product-item .detail-label {
|
|
|
+ color: #333; // 商品名称颜色深一些
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reward {
|
|
|
+ color: #ff9900;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.query-btn {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.query-btn-icon {
|
|
|
+ height: 32rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/queryIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.query-btn-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #F5F5F5;
|
|
|
+}
|
|
|
+.popup-content{
|
|
|
+ height: 25vh;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.popup-text{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #1C1E1D;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.popup-btn{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.popup-btn-one{
|
|
|
+ width: 275rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background: linear-gradient(0deg, #6FA4FE, #488CFF);
|
|
|
+ box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(153,153,153,0.35);
|
|
|
+ border-radius: 35rpx;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.data-display-container {
|
|
|
+ padding: 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ min-height: 100vh; /* 确保内容撑满整个视口高度 */
|
|
|
+ box-sizing: border-box; /* 边框和内边距包含在元素的总宽度和高度内 */
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
|
|
|
+ overflow: hidden; /* 确保圆角显示 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-height: calc(100vh - 60rpx); /* 卡片最大高度，留出上下padding */
|
|
|
+}
|
|
|
+
|
|
|
+.header-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: #4A90E2; /* 品牌蓝色 */
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 24rpx 0; /* 上下内边距增加 */
|
|
|
+ border-bottom: 1rpx solid rgba(255, 255, 255, 0.2); /* 浅色边框 */
|
|
|
+ position: sticky; /* 头部固定 */
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.header-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10rpx; /* 左右内边距 */
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.data-body-scroll {
|
|
|
+ flex: 1; /* 占据剩余空间 */
|
|
|
+ overflow-y: auto; /* 允许滚动 */
|
|
|
+ -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
|
|
|
+}
|
|
|
+
|
|
|
+.data-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center; /* 垂直居中对齐 */
|
|
|
+ padding: 20rpx 0; /* 上下内边距 */
|
|
|
+ border-bottom: 1rpx solid #f0f0f0; /* 更细的分割线 */
|
|
|
+ transition: background-color 0.2s ease; /* 鼠标悬停或点击的平滑过渡 */
|
|
|
+}
|
|
|
+
|
|
|
+.data-row:last-child {
|
|
|
+ border-bottom: none; /* 最后一行没有底部边框 */
|
|
|
+}
|
|
|
+
|
|
|
+.data-row.even-row {
|
|
|
+ background-color: #f9f9f9; /* 隔行变色 */
|
|
|
+}
|
|
|
+
|
|
|
+.data-row:hover {
|
|
|
+ background-color: #eef7ff; /* 悬停效果 */
|
|
|
+}
|
|
|
+
|
|
|
+.data-cell {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10rpx; /* 左右内边距 */
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx; /* 数据字体略小 */
|
|
|
+ color: #555;
|
|
|
+ word-break: break-word; /* 允许长文本在任何地方换行 */
|
|
|
+ line-height: 1.4; /* 增加行高 */
|
|
|
+}
|
|
|
+
|
|
|
+.item-column {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20rpx; /* 品项左边距 */
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.no-data {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40rpx;
|
|
|
+ color: #999;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+</style>
|
