oil-station/gasStation-uni/pagesMy/myorder/myorder.vue

<template>
  <view class="centenr">
    <view class="Candywrapper">
      <view class="card_box">

        <view >消费金额（元）</view>
        <view class="r-num">{{ cardBalance || 0 }}</view>
        <view style="margin-top: 10rpx;">
          <view>消费次数: {{ total || 0 }}</view>
        </view>
      </view>
      <view class="tab-bs">
        <view class="w_box" @click="show1 = true">类型筛选
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
        <view class="w_box" @click="show = true">全部时间
          <u-icon name="arrow-down-fill"></u-icon>
        </view>
      </view>
      <view class="bai_box" v-for="(item,index) in pointsList" :key="index">
        <view class="left-img">
          <!-- <image src="../../static/icon/hyxf.png" mode=""></image> -->
          <image src="../../static/icon/jfdh.png" mode=""></image>
        </view>
        <view style="width: 85%;">
          <view class="right-box">
            <view class="l-text">{{ item.typeName }}</view>
            <view class="r-text" v-if="item.content  && item.content.includes('充值')">{{ item.payMoney }}</view>
            <view class="r-text" v-else>-{{ item.payMoney }}</view>
          </view>
          <view class="right-box">
            <view class="">{{ item.payType }}</view>
<!--            <view class="">余额{{ item.currentPoints || 0 }}</view>-->
          </view>
          <view class="right-box">
            <view class="">{{ item.storeName }}</view>
            <view class="">{{ item.createTime }}</view>
          </view>
        </view>
      </view>
      <view v-if="!pointsList || pointsList.length==0">
        <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </view>
      <!-- <view class="bai_box">
        <view class="left-img">
          <image src="../../static/icon/hycz.png" mode=""></image>
        </view>
        <view style="width: 85%;">
          <view class="right-box">
            <view class="l-text">会员消费</view>
            <view class="r-text">-199.00</view>
          </view>
          <view class="right-box">
            <view class="">储值卡</view>
            <view class="">余额123456.98</view>
          </view>
          <view class="right-box">
            <view class="">中建锦绣二期站</view>
            <view class="">2024-09-09 16:45:09</view>
          </view>
        </view>
      </view>
      <view class="bai_box">
        <view class="left-img">
          <image src="../../static/icon/jfdh.png" mode=""></image>
        </view>
        <view style="width: 85%;">
          <view class="right-box">
            <view class="l-text">会员消费</view>
            <view class="r-text">-199.00</view>
          </view>
          <view class="right-box">
            <view class="">储值卡</view>
            <view class="">余额123456.98</view>
          </view>
          <view class="right-box">
            <view class="">中建锦绣二期站</view>
            <view class="">2024-09-09 16:45:09</view>
          </view>
        </view>
      </view> -->
      <u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1"
                         @confirm="confirm1"></u-datetime-picker>
      <u-picker :show="show1" :columns="columns" @cancel="cancel" keyName="label" @confirm="confirm"></u-picker>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request'

export default {
  data() {
    return {
      query: {
        chainStoreId: '',
        couponType: '',
        useStatus: 0,
        pageNo: 1,
        pageSize: 10
      },
      cardBalance: 0,
      show: false,
      show1: false,
      value1: Number(new Date()),
      columns: [
        [{
          label: '全部类型',
          value: null
        }, {
          label: '油品',
          value: '订单'
        }, {
          label: '会员充值',
          value: '充值'
        }, {
          label: '积分兑换',
          value: '积分'
        }]
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 30,
        content: "",
        type: "",
        storeId: uni.getStorageSync("storeId"),
        changeReason: "",
        startTime: ""
      },
      pointsList: [],
      total: 0
    }
  },
  onShow() {
    this.query.chainStoreId = uni.getStorageSync('chainStoreId');
    this.getUserBalance()
    this.getList()
  },
  onPullDownRefresh() {
    console.log("刷新");
    this.pointsList = []
    this.queryParams = {
      pageNo: 1,
      pageSize: 30,
      type: "",
      storeId: uni.getStorageSync("storeId"),
      changeReason: "",
      startTime: ""
    }
    this.getList()
  },
  onReachBottom() {
    // 触底加载
    if (this.pointsList.length < this.total) {
      this.queryParams.pageNo++
      this.getList()
    }
  },
  methods: {
    // 获取余额信息
    getUserBalance() {
      console.log('this.queryParams:', this.queryParams.storeId)
      request({
        url: 'business/allOrderInfo/getConsumptionMoney',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        if (res.code == 200) {
          this.cardBalance = res.data
        }
      })
    },
    getList() {
      console.log('this.queryParams:', this.queryParams)
      request({
        url: '/business/allOrderInfo/queryByPageUni',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        if (res.code == 200) {
          this.pointsList = res.data.records
          this.total = res.data.total
        }
      })
    },
    confirm(e) {
      this.queryParams.pageNo = 1
      if (e.value[0] == '全部类型') {
        this.queryParams.content = null
      } else {
        this.queryParams.content = e.value[0].value
      }
      console.log('this.queryParams:', this.queryParams.content)
      this.getList()
      this.getUserBalance()
      this.show1 = false
    },
    cancel() {
      this.show1 = false
    },
    timestampToString(timestamp) {
      // 将时间戳转换为Date对象
      const date = new Date(timestamp);
      // 使用toLocaleDateString和toLocaleTimeString可以根据本地格式转换日期和时间
      const dateString = date.toLocaleDateString()
      const timeString = date.toLocaleTimeString();
      // 返回日期和时间的组合
      return date.getFullYear() + '-' + (date.getMonth() + 1);
    },
    confirm1(e) {
      this.queryParams.startTime = this.timestampToString(e.value)
      this.queryParams.pageNo = 1
      console.log('this.queryParams:', this.queryParams)
      this.getList()
      this.getUserBalance()
      this.show = false
    },
    cancel1() {
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.centenr {
  width: 100%;
  height: 100vh;
  background: #F9F9F9;
}

.Candywrapper {
  background: #F9F9F9;
  box-sizing: border-box;
  padding: 10px;
}

.card_box {
  width: 100%;
  height: 90px;
  background: url('../../static/imgs/jf.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
  font-size: 14px;
}

.r-size {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.r-num {
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
}

.tab-bs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin: 15px auto;
}

.w_box {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 15px;
}

.bai_box {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-img {
  margin-right: 10px;

  image {
    width: 40px;
    height: 40px;
  }
}

.right-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #666666;
}

.l-text {
  font-size: 16px;
  color: #333333;
  margin-bottom: 5px;
  font-weight: bold;
}

.r-text {
  font-size: 16px;
  color: #333333;
  margin-bottom: 5px;
  font-weight: bold;
}
</style>