pay-video-applet-uniapp-24-8-22/pages/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 placeholder="请输入内容" border="surround" clearable></uv-input>
        </view>
        <!--开始时间-->
        <view class="dateTimeCls">
          <view class="date" @click="startDateOpen">
            <uv-datetime-picker ref="startDateRef" v-model="queryParams.startDate" mode="date"
                                @confirm="startDateChange">
            </uv-datetime-picker>
          </view>
          <view class="image">
            <image src="/static/image/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/image/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 "@/pages/mine/sonPage/promotion/promotionRecordList.vue";
import moment from "moment";

export default {
  components: {PromotionRecordList},
  data() {
    return {
      promotionRecordList: [
        {
          title: "推广记录",
          createTime: '2024-08-22 09:00:00',
          createBy: "24小时",
          isPay: "￥100"
        },
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        startDate:moment(new Date()).format('YYYY-MM-DD'),
        endDate: moment(new Date()).format('YYYY-MM-DD'),
      },
    }
  },
  methods: {
    startDateChange(val) {
      console.log(val.value, "======startDateChange=======")
      this.queryParams.startDate = moment(new Date(val.value)).format('YYYY-MM-DD')
    },
    startDateOpen() {
      this.$refs.startDateRef.open();
    },
    endDateChange(val) {
      console.log(val.value, "=======endDateChange======")
      var aaa = moment(new Date(val.value)).format('YYYY-MM-DD')
      console.log(aaa, "aaa")
      this.queryParams.endDate = val.value
    },
    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>