chanyishenghuo-uniapp/pagesB/pages/user/signIn/Integral/index.vue

<template>
  <view class="integral-details" ref="container">
    <view class="header acea-row row-between row-middle">
			<view class="acea-row row-column row-between">
				<view class="integral">{{ info.integral }}</view>
				<view class="rule">
					<text>积分规则</text>
					<text class="icon-font"></text>
				</view>
			</view>
      <!-- <view class="currentScore">当前积分</view> -->
			<view class="integral-shop">积分商城</view>
      <!-- <view class="line"></view> -->
      <!--<view class="nav acea-row">-->
      <!--<view class="item">-->
      <!--<view class="num">{{ info.sum_integral }}</view>-->
      <!--<view>累计积分</view>-->
      <!--</view>-->
      <!--<view class="item">-->
      <!--<view class="num">{{ info.deduction_integral }}</view>-->
      <!--<view>累计消费</view>-->
      <!--</view>-->
      <!--<view class="item">-->
      <!--<view class="num">{{ info.today_integral }}</view>-->
      <!--<view>今日获得</view>-->
      <!--</view>-->
      <!--</view>-->
    </view>
    <view class="wrapper">
			<view class="content-title">做任务赚积分</view>
			<view class="menu-list">
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen1.png" mode=""></image></view>
						<text>完成个人信息</text>
						<text class="integral">+10积分</text>
					</view>
					<view class="btn">去完成</view>
				</view>
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen2.png" mode=""></image></view>
						<text>每日签到</text>
						<text class="integral">+10积分</text>
					</view>
					<view class="btn">去签到</view>
				</view>
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen3.png" mode=""></image></view>
						<text>阅读文章2篇</text>
						<text class="integral">+10积分</text>
					</view>
					<view class="btn">去完成</view>
				</view>
				<view class="menu-item acea-row row-between row-middle">
					<view class="menu-item-l acea-row row-middle">
						<view class="icon"><image src="../../../../../static/jifen4.png" mode=""></image></view>
						<text>报名1项课程</text>
						<text class="integral">+80积分</text>
					</view>
					<view class="btn">去完成</view>
				</view>
			</view>
      <!-- <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)"
        >
          <text class="iconfont" :class="item.icon"></text>
          {{ 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 class="list2" :hidden="current !== 1">-->
      <!--<view class="item acea-row row-between-wrapper" @click="goHome()">-->
      <!--<view class="pictrue"><image :src="`${$VUE_APP_RESOURCES_URL}/images/score.png`" /></view>-->
      <!--<view class="name">购买商品可获得积分奖励</view>-->
      <!--<view class="earn">赚积分</view>-->
      <!--</view>-->
      <!--<view-->
      <!--class="item acea-row row-between-wrapper"-->
      <!--@click="goSignIn()"-->
      <!--&gt;-->
      <!--<view class="pictrue"><image :src="`${$VUE_APP_RESOURCES_URL}/images/score.png`" /></view>-->
      <!--<view class="name">每日签到可获得积分奖励</view>-->
      <!--<view class="earn">赚积分</view>-->
      <!--</view>-->
      <!--</view>-->
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>
<script>
import { getIntegralList, postSignUser } from "@/api/user";
import Loading from "@/components/Loading";
import { dataFormat } from "@/utils";

export default {
  name: "Integral",
  components: {
    Loading,
  },
  props: {},
  data: function() {
    return {
      navList: [
        { name: "分值明细", icon: "icon-mingxi" }
        // { name: "分值提升", icon: "icon-tishengfenzhi" }
      ],
      current: 0,
      where: {
        page: 1,
        limit: 15
      },
      data: {
        sign: 1,
        integral: 1,
        all: 1
      },
      list: [],
      info: [],
      loaded: false,
      loading: false
    };
  },
  mounted: function() {
    this.getIntegral();
    this.getInfo();
  },
  onReachBottom() {
    !this.loading && this.getInfo();
  },
  methods: {
    dataFormat,
    goSignIn() {
      this.$yrouter.push("/pages/user/signIn/Sign/index");
    },
    goHome() {
      this.$yrouter.switchTab("/pages/home/index");
    },
    nav: function(index) {
      this.current = index;
    },
    getInfo: function() {
      let that = this;
      if (that.loaded == true || that.loading == true) return;
      that.loading = true;
      getIntegralList(that.where).then(
        res => {
          that.loading = false;
          that.loaded = res.data.length < that.where.limit;
          that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
          that.where.page = that.where.page + 1;
          that.list.push.apply(that.list, res.data);
        },
        err => {
          uni.showToast({
						title: err.msg || err.response.data.msg|| err.response.data.message,
						icon: 'none',
						duration: 2000
					});
        }
      );
    },
    getIntegral: function() {
      let that = this;
      postSignUser(that.data).then(
        res => {
          that.info = res.data;
        },
        err => {
          uni.showToast({
						title: err.msg || err.response.data.msg|| err.response.data.message,
						icon: 'none',
						duration: 2000
					});
        }
      );
    }
  }
};
</script>
<style lang="less" scoped>
.integral-details {
	height: 100vh;
	background: #fff;
	.header{
		background-image: none;
		width: 750rpx;
		height: 266rpx;
		padding: 0 40rpx;
		background: linear-gradient(176deg, #EC1C07 0%, #F94F0F 100%);
		border-radius: 0px 0px 60rpx 60rpx;
		.integral{
			font-size: 80rpx;
			color: #fff;
		}
		.rule{
			width: 150rpx;
			height: 44rpx;
			background: rgba(0,0,0,.2);
			border-radius: 27rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 24rpx;
		}
		.integral-shop{
			width: 206rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: linear-gradient(133deg, #FEF2D7 0%, #FCD86D 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #F53D0D;
		}
	}
	.wrapper{
		
		padding: 0 30rpx;
		font-size: 28rpx;
		.content-title{
			font-size: 36rpx;
			font-weight: 600;
			color: #222222;
			line-height: 50rpx;
			margin: 50rpx 0;
		}
		.menu-list{
			.menu-item{
				width: 100%;
				height: 136rpx;
				border-top: 1px solid #ececec;
				image{
					width: 76rpx;
					height: 76rpx;
				}
				.icon{
					margin-right: 20rpx;
				}
				.integral{
					font-size: 32rpx;
					color: #FD513B;
					margin-left: 20rpx;
				}
				.btn{
					width: 122rpx;
					height: 52rpx;
					background: #FD513B;
					border-radius: 30rpx;
					text-align: center;
					line-height: 52rpx;
					color: #fff;
				}
			}
		}
	}
}
</style>