pay-video-applet-uniapp-24-8-22/pages_mine/mine/promotionRecord.vue

<template>
	<view class="promotionRecord">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="我的推广" />

		<!--主页面-->
		<view class="frame">
			<!--标题-->
			<view class="title">
				<span>推广记录</span>
			</view>

			<!--搜索条件-->
			<view class="search">
				<!--搜索框-->
				<view style="width:30%;height:100%">
					<uv-input v-model="queryParams.keyWord" placeholder="请输入内容" border="surround" clearable
						@change="keyWordChange"></uv-input>
				</view>
				<!--开始时间-->
				<view class="dateTimeCls">
					<view class="date" @click="startDateOpen">
						{{ queryParams.startDate }}
						<uv-datetime-picker ref="startDateRef" v-model="queryParams.startDate" mode="date"
							@confirm="startDateChange"></uv-datetime-picker>
					</view>
					<view class="image">
						<image src="../static/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
					</view>
				</view>
				<!--结束时间-->
				<view class="dateTimeCls">
					<view class="date" @click="endDateOpen">
						{{ queryParams.endDate }}
						<uv-datetime-picker ref="endDateRef" v-model="queryParams.endDate" mode="date"
							@confirm="endDateChange">
						</uv-datetime-picker>
					</view>
					<view class="image">
						<image src="../static/promotionRecord/2.svg" style="width: 100%;height: 100%"></image>
					</view>
				</view>
			</view>
			<!--推广列表-->
			<view style="" class="publishListClass">
				<PromotionRecordList :list="promotionRecordList" />
			</view>
		</view>
	</view>
</template>

<script>
	import PromotionRecordList from "./sonPage/promotion/promotionRecordList.vue";
	import dayjs from "dayjs";

	export default {
		components: {
			PromotionRecordList
		},
		data() {
			return {
				promotionRecordList: [
					{
						name:'aaa',
						tuTime:1,
						price:9.9,
						createTime:new Date(),
					}
				],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					startDate: dayjs(new Date()).subtract(30,'day').format('YYYY-MM-DD'),
					endDate: dayjs(new Date()).format('YYYY-MM-DD'),
					keyWord: '',
				},
			}
		},
		onReachBottom() {
			let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求数
				this.queryParams.pageSize += 10
				this.getData() //调用加载数据方法
			}
		},
		mounted() {
			this.getData()
		},
		methods: {

			getData() {
				this.$api('infoGetPromotionPage', {
					pageNo: this.queryParams.pageNo,
					pageSize: this.queryParams.pageSize,
					startDate: this.queryParams.startDate,
					endDate: this.queryParams.endDate,
					keyWord: this.queryParams.keyWord
				}, res => {
					if (res.code == 200) {
						this.promotionRecordList = res.result.records
						this.total = res.result.total
					}
				})
			},
			keyWordChange(val) {
				this.queryParams.keyWord = val
				this.getData()
			},

			startDateChange(val) {
				this.$nextTick(() => {
					this.queryParams.startDate = dayjs(val.value).format("YYYY-MM-DD")
					this.getData()
				});
			},
			startDateOpen() {
				this.$refs.startDateRef.open();
			},
			endDateChange(val) {
				this.$nextTick(() => {
					this.queryParams.endDate = dayjs(val.value).format("YYYY-MM-DD")
					this.getData()
				});
			},
			endDateOpen() {
				this.$refs.endDateRef.open();
			},
		}

	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.promotionRecord {
		width: 100vw;
		height: 100vh;

		.frame {
			width: 100%;
			//height: calc(100vh - 220rpx);
			padding: 28rpx 28rpx 0 28rpx;

			.title {
				font-size: 34rpx;
				color: #333;
				font-weight: 700
			}

			.search {
				display: flex;
				align-items: center;
				gap: 10rpx;
				width: 100%;
				height: 80rpx;
				margin-top: 20rpx;


				.dateTimeCls {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 30%;
					height: 80%;
					border: 1px solid #b0b2b3;
					padding: 5rpx;
					border-radius: 20rpx;

					.date {
						font-size: 25rpx;
						display: flex;
						align-items: center;
						width: 80%;
						height: 100%;
						color: #b0b2b3;

					}

					.image {
						width: 20%;
						height: 100%;
					}
				}
			}


			.publishListClass {
				margin-top: 10rpx;
				height: 78vh;
				overflow: auto;
				width: 100%;
			}
		}
	}
</style>