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: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
    // }
  }

}
</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%;
    }
  }
}
</style>