You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
7.9 KiB
280 lines
7.9 KiB
<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--> |
|
<!-->提示:积分数值的高低会直接影响您的会员等级--> |
|
<!--</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()"--> |
|
<!-->--> |
|
<!--<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>
|
|
|