You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
4.3 KiB
196 lines
4.3 KiB
<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: [],
|
|
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() {
|
|
console.log("=====")
|
|
let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
|
|
if (allTotal < this.total) {
|
|
//当前条数小于总条数 则增加请求数
|
|
this.queryParams.pageSize += 10
|
|
this.getData() //调用加载数据方法
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log("====")
|
|
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>
|