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.
457 lines
12 KiB
457 lines
12 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="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>
|
|
|