销售统计

pageSalesSummary/productSalesRanking.vue

@@ -0,0 +1,87 @@
+<template>
+	<view class="table-scroll">
+		<table cellspacing="0">
+			<thead>
+				<tr style="background-color: #aebad2;color: #fff;" height='80'>
+					<th>排名</th>
+					<th>商品名称</th>
+					<th>数量</th>
+					<th>金额</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="item in tableList" :key="item.productId">
+					<td>{{item.productId}}</td>
+					<td>{{item.productName}}</td>
+					<td>{{item.productNum}}</td>
+					<td>{{item.amount}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		ref
+	} from 'vue';
+	import {
+		summaryTrade,
+		dateProduct
+	} from '@/http/yskApi/requestAll.js';
+	let tableList = ref([])
+	onMounted(() => {
+		gettableData()
+	})
+	// 获取表格数据
+	function gettableData() {
+		dateProduct({
+			shopId: uni.getStorageSync('shopId'),
+			day: 30,
+			page: 1,
+			size: 50
+		}).then((res) => {
+			tableList.value = res.totalProduct
+		})
+
+	}
+</script>
+
+<style>
+	.table-scroll {
+		overflow-x: scroll;
+		white-space: nowrap;
+		margin: 0 28rpx;
+		margin-right: 30rpx;
+		border-radius: 30rpx 30rpx 0 0;
+
+	}
+
+	.table-scroll table {
+		table-layout: fixed;
+		width: calc(100% - 10rpx);
+	}
+
+	.table-scroll thead {
+		display: table-row;
+		background-color: bisque;
+
+	}
+
+	.table-scroll tbody {
+		overflow-y: scroll;
+		overflow-x: hidden;
+		display: block;
+		width: 1040rpx;
+	}
+
+	.table-scroll th,
+	td {
+		height: 80rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 250rpx;
+		border: 2rpx solid #7E9BD4;
+	}
+</style>