warm_man/pages/Cron/detail.vue

<template>
  <view class="body-background">
    <u-image
        :show-loading="true"
        :src="staticImage.bg"
        width="100%"
        height="420"
        radius="10"
        mode="widthFix"
        class="img"
    ></u-image>
  </view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="transparent"
  ></u-navbar>
  <view class="top-container">
    <view class="top-price">
      <u-text mode="price" size="72" color="#020B18" :text="balance"></u-text>
    </view>
    <view class="top-desc">
      暖新币余额
    </view>
  </view>
  <view class="app-wallpaper">
    <u-tabs
        :list="list"
        u-sticky
        lineWidth="64"
        lineHeight="8"
        :inactiveStyle="{color:'#AFB5BE'}"
        :activeStyle="{color:'#F47210'}"
        lineColor="#F47210"
        @change="tabChange"
    ></u-tabs>
  </view>
  <u-list
      @scrolltolower="getCron(true)"
      :height="(size.height)+'px'"
      :custom-style="{padding:'0 26rpx',boxSizing:'border-box'}"
  >
    <u-list-item
        v-for="(item, index) in lists[this.current]"
        :key="index"
    >
      <u-cell
          :title="item.describe"
          :label="item.create_time"
          :icon="staticImage.bg"
          :icon-style="{width:'64rpx',height:'64rpx',marginRight:'22rpx'}"
          :border="false"
          :custom-style="{backgroundColor:'#ffffff',borderRadius:'20rpx',marginBottom:'16rpx'}"
          :title-style="{fontSize: '28rpx',fontWeight: '400',color: '#020B18',marginBottom:'20rpx'}"
      >
        <template #value v-if="item.type === (current+1)">
          <view class="cell-value-add" v-if="item.type === 1">
            +{{ item.number }}币
          </view>
          <view class="cell-value-dec" v-else>
            {{ item.number }}币
          </view>
        </template>
        <template #label>
          <view class="cell-label">
            {{item.create_time}}
          </view>
        </template>
        <template #icon>
          <view class="cell-image">
            <u-image mode="widthFix" width="64" height="64" :src="staticImage.cronAdd" v-if="item.type === 1"></u-image>
            <u-image mode="widthFix" width="50" height="50" :src="staticImage.cronDec" v-else></u-image>
          </view>
        </template>
      </u-cell>
    </u-list-item>
  </u-list>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {cronBalance, cronList} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      list: [{
        name: '暖新币获得'
      }, {
        name: '暖新币兑换'
      },],
      current: 0,
      title: '暖新币明细',
      loading: true,
      staticImage: {
        bg: imghost + '/cron-bg.png',
        newIcon: imghost + '/new-icon.png',
        cronAdd: imghost + '/cron-add.png',
        cronDec: imghost + '/cron-dec.png',
      },
      balance: 0,
      isTop: false,
      lists: [[],[]],
      end: [false, false],
      listsAdd: [],
      listsDec: [],
      page: [1, 1],
      size: {
        height: 0,
      }
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this);
    info.select('.top-container').boundingClientRect(function (data) {

    }).exec(function (res) {
    });
    info.select('.app-wallpaper').boundingClientRect(function (data) {

    }).exec(function (res) {
      let otherHeight = 0;
      res.forEach((item, index) => {
        otherHeight += item.height;
      });
      that.size.height = that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('40rpx');
    });
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
  },
  methods: {
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    getBalance() {
      cronBalance().then((res) => {
        this.balance = res.data.balance;
      })
    },
    getCron(nextPage = false) {
      if (this.end[this.current]) {
        return false;
      }

      cronList({
        type: (this.current+1),
        limit: 10,
        page: this.page[this.current],
      }).then((res) => {
        this.lists[this.current] = this.lists[this.current].concat(res.data)
        if (res.data.length === 0) {
          this.end[this.current] = true;
        }
      })
      if (nextPage) {
        this.page[this.current]++;
      }
    },
    tabChange(e) {
      this.page[e.index] = 1;
      this.end[e.index] = false;
      this.lists = [[],[]];
      this.current = e.index;
      this.getCron(true);
    }
  },
  options: {
    styleIsolation: 'shared'
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getBalance();
    this.getCron(true);
  }
}
</script>

<style lang="scss">
@import './components/detail.scss';
</style>