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.
458 lines
12 KiB
458 lines
12 KiB
3 years ago
|
<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="integral-shop">积分商城</view>
|
||
|
</view> -->
|
||
|
<view class="week-signIn-box">
|
||
|
<view class="signIn-box-title acea-row row-between-wrapper">
|
||
|
<view class="title-l">可用积分:<text class="colR">{{ integral }}</text></view>
|
||
|
<view class="title-r" @click="toShop">去兑换 <text class="iconfont icon-jiantou"></text></view>
|
||
|
</view>
|
||
|
<view class="day-list acea-row row-between">
|
||
|
<view class="day-item acea-row row-column row-center row-middle"
|
||
|
:class=" index+1 <= signNum ? 'active' : '' "
|
||
|
v-for="(item,index) in signInfos"
|
||
|
:key="index"
|
||
|
v-if="index < signInfos.length - 1">
|
||
|
<view>{{item.day}}</view>
|
||
|
<image src="../../../../../static/glod.png"></image>
|
||
|
<text class="fz20">+{{item.signNum}}积分</text>
|
||
|
</view>
|
||
|
<view class="day-item day-item-last acea-row row-center row-middle"
|
||
|
:class=" signNum == signInfos.length+1 ? 'active' : '' " v-else>
|
||
|
<view class="acea-row row-column row-center">
|
||
|
<view>{{signInfos[signInfos.length-1].day}}</view>
|
||
|
<text class="colG">签到大礼包</text>
|
||
|
<text class="fz20">+{{signInfos[signInfos.length-1].signNum}}积分</text>
|
||
|
</view>
|
||
|
<image src="../../../../../static/glod.png"></image>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="tips-box acea-row">
|
||
|
<image src="../../../../../static/tips.png"></image>
|
||
|
<text>连续签到积分累加</text>
|
||
|
</view>
|
||
|
<view class="signIn-btn acea-row row-column row-center row-middle" :class="isDaySign ? 'default' : ''" @click="handelSignin">
|
||
|
<text class="b-word">{{isDaySign ? '今日已签到' : '立即签到'}}</text>
|
||
|
<text>本轮累计签到{{signNum}}天</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="wrapper">
|
||
|
<!-- <view class="content-title">做任务赚积分</view> -->
|
||
|
<view class="menu-list">
|
||
|
<view class="menu-item acea-row row-between row-middle noBorder">
|
||
|
<view class="menu-item-l acea-row row-middle">
|
||
|
<view class="icon"><image src="../../../../../static/jifen1.png" mode=""></image></view>
|
||
|
<view class="acea-row row-column">
|
||
|
<text>完成个人信息</text>
|
||
|
<text class="integral">+{{completedNum}}积分</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="btn" @click="toPersonalData" :class="isCompleted ? 'default' : ''">{{isCompleted ? '已完成' : '去完成'}}</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>
|
||
|
<view class="acea-row row-column">
|
||
|
<text>每日签到</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="btn" :class="isDaySign ? 'default' : ''">{{isDaySign ? '已签到' : '去签到'}}</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>
|
||
|
<view class="acea-row row-column">
|
||
|
<text>报名学习打榜</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="btn" @click="toCourse">去完成</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, signIntegral, integral } 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: [],
|
||
|
isDaySign: false,
|
||
|
integral: 0,
|
||
|
signInfos: [],
|
||
|
isCompleted: false,
|
||
|
completedNum: 0,
|
||
|
signNum:null,
|
||
|
loaded: false,
|
||
|
loading: false
|
||
|
};
|
||
|
},
|
||
|
onShow(){
|
||
|
this.getIntegral();
|
||
|
},
|
||
|
mounted: function() {
|
||
|
|
||
|
// this.getInfo();
|
||
|
},
|
||
|
// onReachBottom() {
|
||
|
// !this.loading && this.getInfo();
|
||
|
// },
|
||
|
methods: {
|
||
|
getIntegral(){
|
||
|
uni.showLoading({
|
||
|
title: '正在加载中...'
|
||
|
})
|
||
|
integral().then((res)=>{
|
||
|
console.log(res)
|
||
|
if(res.success){
|
||
|
this.signInfos = res.data.signInfos
|
||
|
this.signNum = res.data.signNum
|
||
|
this.isDaySign = res.data.isDaySign
|
||
|
this.integral = res.data.integral
|
||
|
this.isCompleted = res.data.isCompleted
|
||
|
this.completedNum = res.data.completedNum
|
||
|
}
|
||
|
uni.hideLoading()
|
||
|
})
|
||
|
},
|
||
|
handelSignin(){
|
||
|
signIntegral().then((res)=>{
|
||
|
if(res.success){
|
||
|
uni.showToast({
|
||
|
title: '签到成功!'
|
||
|
})
|
||
|
this.getIntegral();
|
||
|
} else{
|
||
|
uni.showToast({
|
||
|
title: res.msg,
|
||
|
icon: 'none'
|
||
|
})
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
toShop(){
|
||
|
this.$yrouter.switchTab("/pages/shop/GoodsClass/index");
|
||
|
},
|
||
|
toPersonalData(){
|
||
|
this.$yrouter.push("/pages/user/PersonalData/index");
|
||
|
},
|
||
|
toCourse(){
|
||
|
this.$yrouter.switchTab("/pages/course/index");
|
||
|
},
|
||
|
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: #EEEEEE;
|
||
|
box-sizing: border-box;
|
||
|
padding: 20rpx 30rpx;
|
||
|
.week-signIn-box{
|
||
|
width: 100%;
|
||
|
background: #fff;
|
||
|
padding: 30rpx 30rpx 40rpx;
|
||
|
font-size: 28rpx;
|
||
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
|
||
|
border-radius: 22rpx;
|
||
|
margin: 20rpx 0;
|
||
|
.signIn-box-title{
|
||
|
.title-l{
|
||
|
font-size: 32rpx;
|
||
|
color: #222;
|
||
|
.colR{
|
||
|
color: #FF0D0D;
|
||
|
}
|
||
|
}
|
||
|
.title-r{
|
||
|
font-size: 20rpx;
|
||
|
color: #f8c06f;
|
||
|
width: 104rpx;
|
||
|
height: 30rpx;
|
||
|
line-height: 30rpx;
|
||
|
text-align: center;
|
||
|
background: #F3F3F3;
|
||
|
border-radius: 14rpx;
|
||
|
.icon-jiantou{
|
||
|
font-size: 20rpx;
|
||
|
margin-top: 2rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.day-list{
|
||
|
.day-item{
|
||
|
width: 148rpx;
|
||
|
height: 160rpx;
|
||
|
background: #EFEFF1;
|
||
|
border-radius: 12rpx;
|
||
|
color: #fff;
|
||
|
font-size: 24rpx;
|
||
|
color: #333;
|
||
|
margin-top: 28rpx;
|
||
|
.fz20{
|
||
|
font-size: 20rpx;
|
||
|
color: #AFAFAF;
|
||
|
}
|
||
|
image{
|
||
|
width: 72rpx;
|
||
|
height: 72rpx;
|
||
|
}
|
||
|
}
|
||
|
.day-item-last{
|
||
|
width: 312rpx;
|
||
|
.colG{
|
||
|
color: #AFAFAF;
|
||
|
margin: 10rpx 0 0;
|
||
|
}
|
||
|
image{
|
||
|
width: 106rpx;
|
||
|
height: 106rpx;
|
||
|
margin-left: 30rpx;
|
||
|
}
|
||
|
}
|
||
|
.active{
|
||
|
color: #fff;
|
||
|
background: #F7C37A;
|
||
|
.fz20{
|
||
|
color: #fff;
|
||
|
}
|
||
|
.colG{
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.tips-box{
|
||
|
font-size: 24rpx;
|
||
|
color: #D1D1D1;
|
||
|
margin: 28rpx 0 48rpx;
|
||
|
image{
|
||
|
width: 36rpx;
|
||
|
height: 36rpx;
|
||
|
margin-right: 8rpx;
|
||
|
}
|
||
|
}
|
||
|
.signIn-btn{
|
||
|
width: 424rpx;
|
||
|
height: 110rpx;
|
||
|
background: linear-gradient(320deg, #FBBE66 0%, #FABF69 100%);
|
||
|
box-shadow: 0px 6rpx 12rpx #F7D08E;
|
||
|
border-radius: 56rpx;
|
||
|
margin: 0 auto;
|
||
|
font-size: 20rpx;
|
||
|
color: #fff;
|
||
|
.b-word{
|
||
|
font-size: 40rpx;
|
||
|
line-height: 56rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
.default{
|
||
|
color: #999 !important;
|
||
|
background: #EFEFF1 !important;
|
||
|
box-shadow: 0px 6rpx 12rpx #EFEFF1 !important;
|
||
|
}
|
||
|
.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{
|
||
|
background: #fff;
|
||
|
padding: 30rpx;
|
||
|
font-size: 28rpx;
|
||
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
|
||
|
border-radius: 22rpx;
|
||
|
.content-title{
|
||
|
font-size: 36rpx;
|
||
|
font-weight: 600;
|
||
|
color: #222222;
|
||
|
line-height: 50rpx;
|
||
|
margin: 50rpx 0;
|
||
|
}
|
||
|
.menu-list{
|
||
|
margin-top: 20rpx;
|
||
|
.menu-item{
|
||
|
width: 100%;
|
||
|
height: 100rpx;
|
||
|
border-top: 1px solid #ececec;
|
||
|
font-size: 28rpx;
|
||
|
color: #222;
|
||
|
image{
|
||
|
width: 76rpx;
|
||
|
height: 76rpx;
|
||
|
}
|
||
|
.icon{
|
||
|
margin-right: 20rpx;
|
||
|
}
|
||
|
.integral{
|
||
|
font-size: 24rpx;
|
||
|
color: #FCBF64;
|
||
|
}
|
||
|
.btn{
|
||
|
width: 122rpx;
|
||
|
height: 52rpx;
|
||
|
background: #FCBF64;
|
||
|
border-radius: 30rpx;
|
||
|
text-align: center;
|
||
|
line-height: 52rpx;
|
||
|
color: #fff;
|
||
|
}
|
||
|
}
|
||
|
.noBorder{
|
||
|
border: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|