| @ -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 moment from "moment"; | |||
| export default { | |||
| components: { | |||
| PromotionRecordList | |||
| }, | |||
| data() { | |||
| return { | |||
| promotionRecordList: [], | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| startDate: moment(new Date()).format('YYYY-MM-DD'), | |||
| endDate: moment(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() { | |||
| console.log("==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() | |||
| 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: '', | |||
| }, | |||
| startDateChange(val) { | |||
| this.queryParams.startDate = moment(new Date(val.value)).format('YYYY-MM-DD') | |||
| this.getData() | |||
| }, | |||
| startDateOpen() { | |||
| this.$refs.startDateRef.open(); | |||
| }, | |||
| endDateChange(val) { | |||
| var aaa = moment(new Date(val.value)).format('YYYY-MM-DD') | |||
| console.log(aaa,"aaaaaaaaaaaa") | |||
| this.queryParams.endDate = aaa | |||
| }, | |||
| 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 | |||
| // } | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| 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> | |||