yanghao
/
chanyishenghuo-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
24 Commits
3 Branches
0 Tags
10 MiB
 
 
 
 
Tree: 343edf0e99
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '343edf0e99'
${ noResults }
chanyishenghuo-uniapp/pagesB/pages/user/signIn/Integral/index.vue

457 lines
12 KiB
Raw Blame History

<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-->
<!--&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, 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>