LocalLivingServicesUniapp/pages/scan/record.vue

<template>
  <view class="record">
    <view class="top"></view>
    <view class="head">
      <span class="cuIcon-back" @click="back"></span>
      <view class="case">
        核销记录
      </view>
    </view>
    <view class="select">
      <view class="moun" @click="show = true">
        <image src="/static/scan/screen.png" mode=""></image>
        {{showMonth}}
      </view>
      <u-select v-model="show" :list="timelist" @confirm="confirm"></u-select>
      <view class="search">
        <image src="/static/index/search.png" mode=""></image>
        <u-input type="text" v-model="productName" placeholder="请输入关键词" />
        <span @click="searchList">搜索</span>
      </view>
      <!-- <u-dropdown>
				<u-dropdown-item v-model="month" title="一月" :options="options1"></u-dropdown-item>
			</u-dropdown> -->
    </view>
    <mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit" :use="false">
      <view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
        <view class="time">
          {{item.writeOffTime}}核销
        </view>
        <view class="product">
          <view class="img">
            <image :src="item.productImage" mode=""></image>
          </view>
          <view class="name">
            {{item.productName}}<br />
            <span>￥{{item.price}}</span>
          </view>
          <!-- <view class="right">
						<image :src="item.url" mode=""></image>
						{{item.yhmc}}
					</view> -->
        </view>
        <view class="user">
          <view class="left">
            {{item.buyTime}}购买
          </view>
          <view class="right">
            <view class="img">

              <image :src="item.userAvatar" mode=""></image>
            </view>
            {{item.userNick}}
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showMonth: '',
        keyword: '',
        month: '',
        merchantId: '',
        productName: '',
        options1: [],
        list: [],
        upOption: {
          page: {
            num: 0,
            size: 10 // 每页数据的数量,默认10
          },
          noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
          empty: {
            tip: '暂无相关数据'
          },

        },
        show: false,
        writeOffTimeStart: '',
        writeOffTimeEnd: '',
        timelist: [{
            label: "一月",
            value: 1,
          },
          {
            label: "二月",
            value: 2,
          },
          {
            label: "三月",
            value: 3,
          },
          {
            label: "四月",
            value: 4,
          },
          {
            label: "五月",
            value: 5,
          },
          {
            label: "六月",
            value: 6,
          },
          {
            label: "七月",
            value: 7,
          },
          {
            label: "八月",
            value: 8,
          },
          {
            label: "九月",
            value: 9,
          },
          {
            label: "十月",
            value: 10,
          },
          {
            label: "十一月",
            value: 11,
          },
          {
            label: "十二月",
            value: 12,
          },
        ]
      }
    },
    methods: {
      mescrollInit(mescroll) {
        this.mescroll = mescroll;
      },
      //返回
      back() {
        uni.navigateBack({
          delta: 1
        });
      },
      getList(page) {
				
					let data = {
					  merchantId: uni.getStorageSync('login_user_info').merchantId,
					  productName: this.productName,
					  pageNo: page.num,
					  pageSize: page.size,
					  writeOffTimeEnd: this.writeOffTimeEnd,
					  writeOffTimeStart: this.writeOffTimeStart
					}
					console.log(data.merchantId)
						this.$http.post("/app/writeOff/list", data).then(res => {
						  if (res.data.code == 200 && res.data.result.records.length>0) {
						    this.list = this.list.concat(res.data.result.records)
						    this.mescroll.endSuccess(res.data.result.records.length, res.data.result.total);
						  }else{
									this.mescroll.endErr()
							}
						})
						.catch(()=>{
							this.mescroll.endErr()
						})
       
        
      },
      searchList() {
        this.list = []
        let page = {
          num: 1,
          size: 10
        }
        this.getList(page)
      },
      goDetail(item) {
        uni.navigateTo({
          url: '/pages/scan/check?writeOffId='+item.writeOffId
        })
      },
      confirm(e) {
        console.log(e)
        this.showMonth = e[0].label
        let num = e[0].value
       
        this.getMonthRange(num)
        this.list = []
        let page = {
          num: 1,
          size: 10,
        };
         this.getList(page);
      },
      getMonthRange(monthValue) {
		let year = new Date().getFullYear();
		const startDate = new Date(year, monthValue - 1, 1);
		const endDate = new Date(year, monthValue, 0);
		endDate.setHours(23, 59, 59, 999);
		
		this.writeOffTimeStart = `${year}-${String(monthValue).padStart(2, '0')}-01 00:00:00`;
		this.writeOffTimeEnd = `${year}-${String(monthValue).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')} 23:59:59`;
      }
    },
    mounted() {

      this.mescroll.optDown.use = false
      // this.getList()
    },
    onShow() {

      let that = this
			const date = new Date();
			 let currentMonth = new Date().getMonth();
			that.showMonth = that.timelist[currentMonth].label;
			console.log(that.showMonth)
			that.getMonthRange(that.timelist[currentMonth].value)
      

    }
  }
</script>

<style lang="scss" scoped>
  .record {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F7F8FC;

    /*#ifdef APP-PLUS*/
    .top {
      width: 100%;
      height: var(--status-bar-height);
      background: #fff;
    }

    /*#endif*/

    .head {
      width: 100%;
      height: 112rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;

      .cuIcon-back {
        font-size: 40rpx;
        margin-right: 40rpx;
      }

      .case {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 36rpx;
        font-weight: 600;
      }
    }

    .select {
      width: 100%;
      height: 88rpx;
      padding: 0px 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;

      .moun {
        width: 149rpx;
        height: 56rpx;
        background: #F7F8FC;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        padding: 0px 12rpx;

        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 12rpx;
        }
      }

      .search {
        width: 483rpx;
        height: 55rpx;
        background: #F7F8FC;
        border-radius: 12rpx;
        padding: 0rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        input {
          // height: 36rpx;
          font-size: 26rpx;
        }

        span {
          font-size: 26rpx;
          color: #333333;
        }
      }
    }

    .list {
      flex: 1;
      overflow-y: auto;
      margin-top: 3rpx;

      .item {
        width: 100%;
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 20rpx 32rpx;
        border-radius: 20rpx;

        .time {
          font-size: 26rpx;
          color: #6B6E79;
        }

        .product {
          display: flex;
          // justify-content: space-between;
          margin-top: 20rpx;

          .img {
            width: 128rpx;
            height: 128rpx;
            border-radius: 12rpx;
            overflow: hidden;
            margin-right: 16rpx;

            image {
              width: 128rpx;
              height: 128rpx;
            }
          }

          .name {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
              font-size: 22rpx;
              color: #FD4912;
            }
          }
        }

        .user {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;

          .left {
            font-size: 24rpx;
            color: #8A91A8;
          }

          .right {
            font-size: 24rpx;
            color: #8A91A8;
            display: flex;
            align-items: center;

            .img {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 8rpx;

              image {
                width: 40rpx;
                height: 40rpx;
              }
            }
          }
        }
      }
    }
  }
</style>