moxuan_takeaway_shanghu/pages/my/sales/sales.vue

<template>
	<view class="container">
		<!-- 搜索区域 -->
		<view class="search">
			<view class="picker_key">规格属性名</view>
			<view class="picker">
				<input type="text" placeholder="请输入规格属性名" v-model="skuName" />
			</view>

			<view class="searchBtn" @click="handleSearch">查询</view>
		</view>

		<!-- 时间筛选区域 -->
		<view class="search_time">
			<picker @change="bindPickerChangeTime" :value="currentIndexTime" :range="arrayTime">
				<view class="picker">
					<view class="picker_text">
						{{ currentIndexTime != null ? arrayTime[currentIndexTime] : '请选择时间区间' }}
					</view>
					<u-icon name="arrow-down" color="#111111" size="28"></u-icon>
				</view>
			</picker>

			<view class="datetime" @click="open" v-if="currentIndexTime != 3">
				<uv-datetime-picker :value="Date.now() - 1000 * 60 * 60 * 24" ref="datetimePicker" :mode="mode" @confirm="confirm"></uv-datetime-picker>
				{{ timeValue ? timeValue : '请选择时间' }}
				<u-icon name="calendar" color="#111111" size="28"></u-icon>
			</view>
			<view v-else>
				<uni-datetime-picker type="daterange" @change="confirm">
					<view class="datetimeRange">
						{{ timeValue ? timeValue : '请选择时间' }}
						<u-icon name="calendar" color="#111111" size="28"></u-icon>
					</view>
				</uni-datetime-picker>
			</view>
		</view>

		<!-- 数据展示区域 -->
		<view class="body">
			<view class="body_header">
				<view class="">编号</view>
				<view class="">规格属姓名</view>
				<view class="">销量</view>
			</view>

			<view class="body_box" v-for="(item, index) in dataList" :key="index">
				<view class="">{{ index + 1 }}</view>
				<view class="">{{ item.shopName }}</view>
				<view class="">{{ item.value }}</view>
			</view>

			<view class="body_no" v-if="!dataList.length">暂无数据</view>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs'
import { join } from 'path'
export default {
	data() {
		return {
			currentIndexTime: 0,
			arrayTime: ['按天查询', '按月查询', '按年查询', '按时间段查询'],
			timeValue: '',
			startTime: '',
			endTime: '',
			mode: 'date',
			skuName: '',
			dataList: []
		}
	},
	onLoad() {
		this.timeValue = dayjs(Date.now() - 1000 * 60 * 60 * 24).format('YYYY-MM-DD')
		this.startTime = this.timeValue + ' 00:00:00'
		this.endTime = this.timeValue + ' 23:59:59'
		this.getData()
	},
	methods: {
		async getData() {
			let data = {
				startTime: this.startTime,
				endTime: this.endTime,
				shopld: uni.getStorageSync('shopId'),
				skuName: this.skuName
			}
			// console.log(data)
			let res = await this.$Request.getA('/app/order/goods-sku-sales-count', data)
			// console.log(res)
			if (res.code == 0) {
				this.dataList = res.data.list
				// console.log(this.dataList)
			}
		},
		handleSearch() {
			this.getData()
		},
		// 时间区域切换回调
		bindPickerChangeTime(e) {
			this.timeValue = ''
			this.currentIndexTime = e.detail.value
			if (this.currentIndexTime == 0) {
				this.mode = 'date'
			} else if (this.currentIndexTime == 1) {
				this.mode = 'year-month'
			} else if (this.currentIndexTime == 2) {
				this.mode = 'year'
			}
		},
		// 选择时间确定回调
		confirm(e) {
			// console.log(e.value)
			if (this.currentIndexTime == 0) {
				this.timeValue = dayjs(e.value).format('YYYY-MM-DD')
				this.startTime = this.timeValue + ' 00:00:00'
				this.endTime = this.timeValue + ' 23:59:59'
			} else if (this.currentIndexTime == 1) {
				this.timeValue = dayjs(e.value).format('YYYY-MM')

				let year = dayjs(e.value).get('year')
				let month = dayjs(e.value).get('month')

				let firstDay = new Date(year, month, 1)
				let lastDay = new Date(year, month + 1, 0, 23, 59, 59)

				this.startTime = dayjs(firstDay).format('YYYY-MM-DD HH:mm:ss')
				this.endTime = dayjs(lastDay).format('YYYY-MM-DD HH:mm:ss')
				// console.log(this.startTime)
				// console.log(this.endTime)
			} else if (this.currentIndexTime == 2) {
				this.timeValue = dayjs(e.value).format('YYYY')
				this.startTime = this.timeValue + '-01-01 00:00:00'
				this.endTime = this.timeValue + '-12-31 23:59:59'
			} else if (this.currentIndexTime == 3) {
				this.timeValue = e.join(' - ')
				this.startTime = e[0] + ' 00:00:00'
				this.endTime = e[1] + ' 23:59:59'
			}
		},
		open() {
			this.$refs.datetimePicker.open()
		}
	}
}
</script>

<style>
.container {
	padding: 20rpx 15rpx;
	min-height: 100vh;
	background-color: #fff;
}

.search {
	display: flex;
	align-items: center;
	height: 60rpx;
	font-size: 28rpx;
	color: #666666;
}

.picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 10rpx;
	margin-left: 10rpx;
	width: 220rpx;
	height: 60rpx;
	border: 2rpx solid #808080;
	border-radius: 6rpx;
}

.picker_text {
	width: 160rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.picker_key {
	margin: 0 10rpx 0 22rpx;
}

.searchBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 50rpx;
	width: 150rpx;
	height: 60rpx;
	color: #fff;
	border-radius: 15rpx;
	background-color: #f18731;
}

.search_time {
	display: flex;
	align-items: center;
	margin-top: 30rpx;
	height: 60rpx;
	font-size: 28rpx;
	color: #666666;
}

.datetime {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 10rpx;
	margin-left: 25rpx;
	width: 355rpx;
	height: 60rpx;
	border: 2rpx solid #808080;
	border-radius: 6rpx;
}

.datetimeRange {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 10rpx;
	margin-left: 25rpx;
	width: 455rpx;
	height: 60rpx;
	border: 2rpx solid #808080;
	border-radius: 6rpx;
}

.body {
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #000;
}

.body_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20rpx;
	width: 706rpx;
	height: 82rpx;
	border-radius: 4rpx;
	background-color: #faf2eb;
}

.body_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20rpx;
	width: 706rpx;
	height: 82rpx;
	border-bottom: 2rpx solid #e6e6e6;
}

.body_no {
	height: 82rpx;
	line-height: 82rpx;
	text-align: center;
}
</style>