HaniBlindBox/honey_box/pages/user/hsjl.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="left" title="换购记录" color="#000000" backgroundColor="transparent" :fixed="true"
      :statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>

    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
      <view class="xuyuan br20" v-for="(v, i) in listData" :key="i">
        <view class="xuyuan_head">
          <view style="opacity: 1; color: #8a8a8a; font-size: 20rpx">打包时间：{{ v.addtime }}</view>
          <view style="font-size: 20rpx; color: #8a8a8a">
            共
            <text style="margin: 0 4rpx; color: #333333">{{ v.count }}</text>
            件
          </view>
        </view>
        <view class="xuyuan_con">
          <view class="xuyuan_item" v-for="(a, b) in v.order_list" :key="b">
            <view class="list_img">
              <image :src="a.goodslist_imgurl"></image>
              <view class="allNum">{{ a.prize_num }}</view>
            </view>
            <view class="xuyuan_item_2 column center">
              <view class="hang1 mt10" style="width: 180rpx">{{
                a.goodslist_title
              }}</view>
              <view class="hang1 mt10" style="width: 180rpx">兑换价：{{ $c.removeTrailingZeros((a.goodslist_money * 100).toFixed(2)) }}</view>
            </view>
          </view>
        </view>

        <view class="xuyuan_foot">
          <view>
            共计兑换{{ $config.getAppSetting("currency2_name") }}：
            <text style="color: #333333">{{ $c.removeTrailingZeros((v.money * 100).toFixed(2)) }}</text>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { getRecoveryRecord } from '@/common/server/warehouse.js';

export default {
  data() {
    return {
      z_imgPath: this.$z_img2 + "mine/",
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      downOption: {
        auto: false,
      },
      listData: [],
    };
  },
  onLoad(e) { },
  methods: {
    back() {
      uni.navigateBack();
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.loadData(page.num);
    },
    async loadData(pageNo) {
      // 模拟接口
      const res = await getRecoveryRecord(pageNo, 10);
      this.mescroll.endByPage(res.data.data.length, res.data.last_page);
      if (pageNo == 1) {
        this.listData = res.data.data;
      } else {
        this.listData = this.listData.concat(res.data.data);
      }
    },
  },
};
</script>

<style lang="scss">
.xuyuan_foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30rpx;
  font-size: 20rpx;
  color: #333333;
}

.xuyuan_item_2 {
  color: #333333;
  font-size: 20rpx;
  width: 100%;
  margin-top: 4rpx;
  padding: 0 10rpx;

  >view:nth-child(2) {
    font-weight: 400;
    font-size: 16rpx;
    color: #8a8a8a;
  }
}

.allNum {
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
  color: #fff;
  padding: 5rpx 20rpx;
}

.list_img .shang_title {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 32rpx;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .type {
    height: 100%;
    padding: 0 16rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);

    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #222222;
  }

  .num {
    padding-right: 10rpx;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.list_img>image {
  width: 100%;
  height: 100%;
}

.list_img {
  width: 100%;
  height: 180rpx;
  position: relative;
  box-sizing: border-box;
  background: #333333;
  border-radius: 20rpx;
  position: relative;
}

.xuyuan_item {
  width: 180rpx;
  box-sizing: border-box;
  margin-right: 20rpx;

  &:last-child {
    margin-right: 0;
  }
}

.xuyuan_con {
  display: flex;
  margin: 14rpx auto 0;
  width: 630rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f3f3f3;
  padding-bottom: 20rpx;
  overflow-x: scroll;
}

.xuyuan_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 24rpx;
  box-sizing: border-box;

  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.xuyuan {
  width: 690rpx;
  margin: 20rpx auto;
  padding-top: 10rpx;
  background: #ffffff;
}

.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);

  .head {
    position: fixed;
    top: 0;
    z-index: 20;

    .header_title {
      height: 70rpx;
      line-height: 70rpx;
      width: 100%;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;

      >view:nth-of-type(1) {
        display: flex;
        align-items: center;
      }

      >view:nth-of-type(2) {
        width: 520rpx;
        text-align: center;
        /* margin: auto; */
      }

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

.tab-list {
  display: flex;
  padding: 30rpx;

  .tab-list-item {
    margin-right: 40rpx;
    position: relative;

    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;

    .arrow {
      position: absolute;
      left: 50%;
      bottom: -28rpx;
      transform: translateX(-50%);
      width: 40rpx;
      height: 20rpx;
    }

    &.active {
      text-shadow: 0 0 10rpx #ba39ff;
    }
  }
}
</style>