hly
/
pay-video-applet-uniapp-24-8-22
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

.

master
chenkun 10 months ago
parent
bf2aeef451
commit
8b0a19d35f
1 changed files with 214 additions and 213 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +214
    -213
      pages_mine/mine/promotionRecord.vue

+ 214
- 213
pages_mine/mine/promotionRecord.vue View File

@ -1,221 +1,222 @@
<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:40%;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>
<view class="promotionRecord">
<!--顶部导航栏-->
<navbar leftClick @leftClick="$utils.navigateBack" title="我的推广"/>
<!--主页面-->
<view class="frame">
<!--标题-->
<view class="title">
<span>推广记录</span>
</view>
<!--搜索条件-->
<view class="search">
<!--搜索框-->
<view style="width:40%;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()).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) {
console.log("val", 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();
},
// startDateFormatter(type, value) {
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// },
// endDateFormatter(type, value) {
// console.log(type, value, "======endDateFormatter=======")
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// }
}
}
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()).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) {
console.log("val", 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();
},
// startDateFormatter(type, value) {
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// },
// endDateFormatter(type, value) {
// console.log(type, value, "======endDateFormatter=======")
// if (type === 'year') {
// return `${value}年`
// }
// if (type === 'month') {
// return `${value}月`
// }
// if (type === 'day') {
// return `${value}日`
// }
// return value
// }
}
}
</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: 25%;
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%;
}
}
}
* {
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: 25%;
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>

Write Preview
Loading…
Cancel
Save