kxmall-ui/kxmall-app-ui/pages/user/money.vue

<template>
  <view class="integral-details" ref="container">
    <view class="header">
      <view class="currentScore">当前余额</view>
      <view>{{ data.nowMoney }}</view>
      <view class="line"></view>
    </view>
    <view class="wrapper">
      <view class="nav acea-row">
        <view
          class="item acea-row row-center-wrapper"
          :class="current === navListIndex ? 'on' : ''"
          v-for="(item, navListIndex) in navList"
          :key="navListIndex"
          @click="nav(navListIndex)"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="list" :hidden="current !== 0">
        <!--<view class="tip acea-row row-middle">-->
        <!--<text class="iconfont icon-shuoming"><text-->
        <!--&gt;提示：积分数值的高低会直接影响您的会员等级-->
        <!--</view>-->
        <view
          class="item acea-row row-between-wrapper"
          v-for="(item, listIndex) in list"
          :key="listIndex"
        >
          <view>
            <text class="state">{{ item.title }}</text>
            <div>{{ item.createTime }}</div>
          </view>
          <text class="num" v-if="item.pm == 1">+{{ item.number }}</text>
          <text class="num font-color-red" v-if="item.pm == 0">-{{ item.number }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  name: "Integral",
  props: {},
  data: function() {
    return {
      navList: [
        { name: "分值明细"}
        // { name: "分值提升", icon: "icon-tishengfenzhi" }
      ],
      current: 0,
      where: {
        pageNum: 1,
        pageSize: 15
      },
      data: {
        sign: 1,
        integral: 1,
        all: 1
      },
      list: [],
      info: [],
      loaded: false,
      loading: false
    };
  },
  mounted: function() {
    this.getNowMoney();
    this.getInfo();
  },
  onReachBottom() {
    !this.loading && this.getInfo();
  },
  methods: {
    nav: function(index) {
      this.current = index;
    },
    getInfo: function() {
      let that = this;
      uni.showLoading({
        title: '正在查询'
      })
      this.$api.request('get','app/userBill/listMoney',that.where).then(
        res => {
          uni.hideLoading()
          that.loaded = res.total < that.where.pageSize;
          that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
          that.where.pageNum = that.where.pageNum + 1;
          that.list.push.apply(that.list, res.rows);
        },err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg || err.response.data.msg|| err.response.data.message,
            icon: 'none',
            duration: 2000
          });
        }
      );
    },
    getNowMoney: function() {
      let that = this;
      this.$api.request('get', 'user/app/getUser').then(res => {
        that.data.nowMoney = res.data.nowMoney
      })
    }
  }
};
</script>
<style lang="less">
.list {
}
/*积分详情*/
.integral-details .header {
  background-image: url('https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 3.6 * 100rpx;
  font-size: 0.72 * 100rpx;
  color: #fff;
  padding: 0.31 * 100rpx 0 0.45 * 100rpx 0;
  text-align: center;
  font-family: 'GuildfordProBook 5';
}

.integral-details .header .currentScore {
  font-size: 0.26 * 100rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 0.05 * 100rpx;
}

.integral-details .header .line {
  width: 0.6 * 100rpx;
  height: 0.03 * 100rpx;
  background-color: #fff;
  margin: 0.2 * 100rpx auto 0 auto;
}

.integral-details .header .nav {
  font-size: 0.22 * 100rpx;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  -o-flex: 1;
  -ms-flex: 1;
  margin-top: 0.35 * 100rpx;
}

.integral-details .header .nav .item {
  width: 33.33%;
  text-align: center;
}

.integral-details .header .nav .item .num {
  color: #fff;
  font-size: 0.4 * 100rpx;
}

.integral-details .wrapper .nav {
  flex: 1;
  -o-flex: 1;
  -ms-flex: 1;
  width: 6.9 * 100rpx;
  border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
  margin: -0.96 * 100rpx auto 0 auto;
  background-color: #f7f7f7;
  height: 0.96 * 100rpx;
  font-size: 0.3 * 100rpx;
  color: #bbb;
}

.integral-details .wrapper .nav .item {
  text-align: center;
  width: 100%;
}

/*.integral-details .wrapper .nav .item{text-align:center;width:50%;}*/
.integral-details .wrapper .nav .item.on {
  background-color: #fff;
  color: #eb3729;
  font-weight: bold;
  border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
}

.integral-details .wrapper .nav .item .iconfont {
  font-size: 0.38 * 100rpx;
  margin-right: 0.1 * 100rpx;
}

.integral-details .wrapper .list {
  background-color: #fff;
  padding: 0.24 * 100rpx 0.3 * 100rpx;
}

.integral-details .wrapper .list .tip {
  font-size: 0.25 * 100rpx;
  width: 6.9 * 100rpx;
  height: 0.6 * 100rpx;
  border-radius: 0.5 * 100rpx;
  background-color: #fff5e2;
  border: 1px solid #ffeac1;
  color: #c8a86b;
  padding: 0 0.2 * 100rpx;
  margin-bottom: 0.24 * 100rpx;
}

.integral-details .wrapper .list .tip .iconfont {
  font-size: 0.35 * 100rpx;
  margin-right: 0.15 * 100rpx;
}

.integral-details .wrapper .list .item {
  height: 1.24 * 100rpx;
  border-bottom: 1px solid #eee;
  font-size: 0.24 * 100rpx;
  color: #999;
}

.integral-details .wrapper .list .item .state {
  font-size: 0.28 * 100rpx;
  color: #282828;
  margin-bottom: 0.08 * 100rpx;
}

.integral-details .wrapper .list .item .num {
  font-size: 0.36 * 100rpx;
  font-family: 'GuildfordProBook 5';
  color: #16ac57;
}

.integral-details .wrapper .list2 {
  background-color: #fff;
  padding: 0.24 * 100rpx 0;
}

.integral-details .wrapper .list2 .item {
  background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
  background-image: -moz-linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
  width: 6.9 * 100rpx;
  height: 1.8 * 100rpx;
  position: relative;
  border-radius: 0.1 * 100rpx;
  margin: 0 auto 0.2 * 100rpx auto;
  padding: 0 0.25 * 100rpx 0 1.8 * 100rpx;
}

.integral-details .wrapper .list2 .item .pictrue {
  width: 0.9 * 100rpx;
  height: 1.5 * 100rpx;
  position: absolute;
  bottom: 0;
  left: 0.45 * 100rpx;
}

.integral-details .wrapper .list2 .item .pictrue image {
  width: 100%;
  height: 100%;
}

.integral-details .wrapper .list2 .item .name {
  width: 2.85 * 100rpx;
  font-size: 0.3 * 100rpx;
  font-weight: bold;
  color: #c8a86b;
}

.integral-details .wrapper .list2 .item .earn {
  font-size: 0.26 * 100rpx;
  color: #c8a86b;
  border: 0.02 * 100rpx solid #c8a86b;
  text-align: center;
  line-height: 0.52 * 100rpx;
  height: 0.52 * 100rpx;
  width: 1.6 * 100rpx;
  border-radius: 0.5 * 100rpx;
}

.acea-row.row-center-wrapper{
  align-items: center;
  justify-content: center;
}

.acea-row.row-between-wrapper {
  align-items: center;
  justify-content: space-between;
}

.acea-row {
  display: flex;
  flex-wrap: wrap /* 辅助类 */;
}
</style>