509 lines
11 KiB
Vue
509 lines
11 KiB
Vue
<template>
|
||
<view class="integral">
|
||
<view class="header" :class="'bg-' + themeColor.name">
|
||
<view class="title">当前步数</view>
|
||
<text class="num">
|
||
{{
|
||
(todayStep) ||
|
||
'0'
|
||
}}
|
||
</text>
|
||
|
||
<view class="line" />
|
||
<view class="nav">
|
||
<view class="item" @tap="stepToBlance">
|
||
<text class="num">
|
||
兑换
|
||
</text>
|
||
<text class="title">兑换积分</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="num">
|
||
{{
|
||
(
|
||
allowStep ) || '0'
|
||
}}
|
||
</text>
|
||
<text class="title">可兑换步数</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="num">
|
||
{{
|
||
(allowStep/1000) ||
|
||
'0'
|
||
}}
|
||
</text>
|
||
<text class="title">可兑换积分</text>
|
||
</view>
|
||
</view>
|
||
<view class="tab">
|
||
<view class="item" :class="current === index ? `text-${themeColor.name} on` : ''" v-for="(item, index) in navList"
|
||
:key="index" @tap="nav(index)">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wrapper">
|
||
<view class="list1" :hidden="current !== 1">
|
||
<view class="tip acea-row row-middle">
|
||
<span class="iconfont icon-shuoming"></span>提示：
|
||
</view>
|
||
<view class="list b-b" v-for="(item, index) in integralList" :key="index">
|
||
<view class="wrapper">
|
||
<view class="address-box">
|
||
{{ index+1 }}
|
||
</view>
|
||
<view class="u-box">
|
||
{{ item.userName }}
|
||
</view>
|
||
</view>
|
||
<text class="change-num" :class="
|
||
userInfo.id==item.userId ? 'change-num-add' : 'change-num-reduce'
|
||
">{{ item.step }}</text>
|
||
</view>
|
||
<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
|
||
</view>
|
||
<view class="list1" :hidden="current !== 0">
|
||
<view class="tip acea-row row-middle">
|
||
<span class="iconfont icon-shuoming"></span>提示：
|
||
</view>
|
||
<view class="list b-b" v-for="(item, index) in integralOrderList" :key="index">
|
||
<view class="wrapper">
|
||
<view class="address-box">
|
||
{{ index+1 }}
|
||
</view>
|
||
<view class="u-box">
|
||
{{ item.data }}
|
||
</view>
|
||
</view>
|
||
<text class="change-num" :class="
|
||
true ? 'change-num-add' : 'change-num-reduce'
|
||
">{{ item.step }}</text>
|
||
</view>
|
||
<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
|
||
</view>
|
||
</view>
|
||
<!--加载动画-->
|
||
<rfLoading isFullScreen :active="loading"></rfLoading>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @des 积分中心
|
||
*
|
||
* @author 237524947@qq.com
|
||
* @date 2020-01-10 15:24
|
||
* @copyright 2019
|
||
*/
|
||
import {
|
||
runData,
|
||
selectOrderBYStep,stepToBlance,
|
||
queryStepData
|
||
} from '@/api/userInfo';
|
||
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
|
||
|
||
import moment from '@/common/moment';
|
||
export default {
|
||
name: 'Integral',
|
||
components: {
|
||
rfLoadMore
|
||
},
|
||
data() {
|
||
return {
|
||
navList: [{
|
||
name: '我的步数'
|
||
}, {
|
||
name: '步数排名'
|
||
}],
|
||
current: 0,
|
||
allowStep:0,
|
||
todayStep:0,
|
||
pointAdd: 0,
|
||
pointMin: 0,
|
||
integralList: [],
|
||
integralOrderList: [],
|
||
loadingType: 'more',
|
||
pageNum: 0,
|
||
userInfo: {},
|
||
loading: true
|
||
};
|
||
},
|
||
// 小程序分享
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
|
||
this.initData();
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh();
|
||
}, 250);
|
||
},
|
||
onShareAppMessage() {
|
||
if (!this.hasLogin) {
|
||
let userInfo = uni.getStorageSync('userInfo')
|
||
return {
|
||
title: `邀请好友获取步数来兑换奖品吧!`,
|
||
path: '/pages/index/index?recommondCode='+userInfo.selfRecommendCode
|
||
};
|
||
} else {
|
||
return {
|
||
title: `邀请好友获取步数来兑换奖品吧!`,
|
||
path: '/pages/index/index'
|
||
};
|
||
}
|
||
|
||
},
|
||
onLoad(option) {
|
||
this.initData(option);
|
||
},
|
||
filters: {
|
||
time(val) {
|
||
return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
|
||
},
|
||
numFilter(val) {
|
||
return val >= 0 ? `+${val.toString()}` : val;
|
||
}
|
||
},
|
||
// 加载更多
|
||
onReachBottom() {
|
||
if (this.loadingType === 'nomore') return;
|
||
this.pageNum++;
|
||
this.getIntegralListList();
|
||
},
|
||
methods: {
|
||
toCategory() {
|
||
this.$mRouter.reLaunch({
|
||
route: '/pages/category/category'
|
||
});
|
||
},
|
||
nav(index) {
|
||
this.loading = true;
|
||
this.current = index;
|
||
this.pageNum = 0;
|
||
this.integralOrderList.length = 0;
|
||
if (index == 1) {
|
||
this.selectOrderBYStep();
|
||
} else {
|
||
this.queryStepData();
|
||
}
|
||
|
||
},
|
||
async stepToBlance(){
|
||
console.log(this.allowStep)
|
||
if(this.allowStep<1001){
|
||
this.$mHelper.toast('步数不够1000，不能兑换');
|
||
return false;
|
||
}
|
||
await this.$http
|
||
.get(`${stepToBlance}`, {
|
||
|
||
})
|
||
.then(r => {
|
||
|
||
this.$mHelper.toast('成功兑换'+r+'个积分');
|
||
this.pageNum = 0;
|
||
this.integralOrderList.length = 0;
|
||
this.initData();
|
||
});
|
||
},
|
||
initData(option) {
|
||
// if (false) {
|
||
if (this.$mStore.getters.hasLogin) {
|
||
var baseUrl = `${this.$mConfig.baseUrl}`;
|
||
let aStep =0;
|
||
uni.authorize({
|
||
scope: 'scope.werun',
|
||
success() {
|
||
wx.getWeRunData({
|
||
success: function(res) {
|
||
wx.request({
|
||
url: baseUrl + `${runData}`,
|
||
method: 'post',
|
||
header: {
|
||
'content-type': 'application/json',
|
||
'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
|
||
},
|
||
data: {
|
||
iv: res.iv,
|
||
encryptedData: res.encryptedData,
|
||
sessionKey: uni.getStorageSync('sessionKey')
|
||
},
|
||
success: res => {
|
||
|
||
uni.setStorageSync('todayStep', res.data.data.currentStep)
|
||
uni.setStorageSync('allowStep', res.data.data.allowStep)
|
||
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: err,
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
this.allowStep=uni.getStorageSync('allowStep')
|
||
this.todayStep=uni.getStorageSync('todayStep')
|
||
}
|
||
this.userInfo = uni.getStorageSync('userInfo') || undefined;
|
||
|
||
if (option && option.index == 1) {
|
||
this.nav(1)
|
||
this.selectOrderBYStep();
|
||
} else {
|
||
this.queryStepData();
|
||
}
|
||
|
||
|
||
},
|
||
|
||
|
||
async queryStepData() {
|
||
await this.$http
|
||
.get(`${queryStepData}`, {
|
||
pageNum: this.pageNum,
|
||
|
||
})
|
||
.then(r => {
|
||
this.loading = false;
|
||
if (r.rows) {
|
||
this.loadingType = r.rows.length === 10 ? 'more' : 'nomore';
|
||
this.integralOrderList = [...this.integralOrderList, ...r.rows];
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
uni.setStorageSync('todayStep', this.integralOrderList[0].step)
|
||
this.allowStep=uni.getStorageSync('allowStep')
|
||
this.todayStep=uni.getStorageSync('todayStep')
|
||
},
|
||
async selectOrderBYStep() {
|
||
await this.$http
|
||
.get(`${selectOrderBYStep}`, {
|
||
pageNum: this.pageNum,
|
||
})
|
||
.then(r => {
|
||
this.loading = false;
|
||
this.integralList = r;
|
||
var count = 0;
|
||
this.integralList.forEach(level => {
|
||
console.log(level.step+',,'+level.userId)
|
||
count++;
|
||
if (level.userId == this.userInfo.id) {
|
||
|
||
if (count > 99) {
|
||
uni.setStorageSync('todayRank', '99+' )
|
||
} else { let counts=1;
|
||
counts=count;
|
||
uni.setStorageSync('todayRank', counts)
|
||
}
|
||
throw Error();
|
||
}
|
||
})
|
||
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
page {
|
||
background-color: $color-white;
|
||
}
|
||
|
||
.integral {
|
||
background-color: $color-white;
|
||
/* #ifndef H5 */
|
||
height: 100vh;
|
||
|
||
/* #endif */
|
||
.header {
|
||
opacity: 0.9;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 420upx;
|
||
font-size: $font-base;
|
||
color: #fff;
|
||
padding: 20upx 0;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
.title {
|
||
font-size: $font-sm;
|
||
margin: 10upx 0;
|
||
}
|
||
|
||
.num {
|
||
/*<!--color: $base-color;-->*/
|
||
font-size: $font-lg + 20upx;
|
||
font-weight: lighter;
|
||
line-height: 1;
|
||
}
|
||
|
||
.line {
|
||
width: 10%;
|
||
height: 3upx;
|
||
background-color: #fff;
|
||
margin: 20upx auto 30upx;
|
||
}
|
||
|
||
.nav {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
.item {
|
||
flex: 1;
|
||
|
||
.num {
|
||
font-size: $font-lg + 4upx;
|
||
display: block;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
position: absolute;
|
||
bottom: -2upx;
|
||
display: flex;
|
||
width: 80%;
|
||
margin: 0 10%;
|
||
border-radius: 20upx 20upx 0 0;
|
||
background-color: #f7f7f7;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
font-size: $font-base;
|
||
color: #bbb;
|
||
|
||
.item {
|
||
flex: 1;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
}
|
||
|
||
.on {
|
||
background-color: #fff;
|
||
font-weight: bold;
|
||
border-radius: 20upx 0 0 0;
|
||
}
|
||
|
||
.on:last-child {
|
||
border-radius: 0 20upx 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.wrapper .list1 {
|
||
background-color: #fff;
|
||
|
||
.tip {
|
||
font-size: $font-sm;
|
||
width: 90%;
|
||
margin: $spacing-base 5%;
|
||
height: 64upx;
|
||
line-height: 64upx;
|
||
border-radius: 30upx;
|
||
background-color: #fff5e2;
|
||
border: 1px solid #ffeac1;
|
||
color: #c8a86b;
|
||
text-align: center;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20upx 36upx;
|
||
background: #fff;
|
||
position: relative;
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
|
||
.address-box {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: $font-base;
|
||
color: $font-color-dark;
|
||
}
|
||
|
||
.u-box {
|
||
color: $font-color-light;
|
||
font-size: $font-sm;
|
||
}
|
||
}
|
||
|
||
.change-num {
|
||
font-size: $font-lg + 4upx;
|
||
color: $font-color-base;
|
||
}
|
||
|
||
.change-num-add {
|
||
color: #16ac57;
|
||
}
|
||
|
||
.change-num-reduce {
|
||
color: $base-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wrapper .list2 {
|
||
/*background-color: #F76260;*/
|
||
}
|
||
|
||
.wrapper .list2 .item {
|
||
background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
|
||
width: 90%;
|
||
margin: $spacing-base 5%;
|
||
height: 120upx;
|
||
line-height: 120upx;
|
||
position: relative;
|
||
border-radius: 20upx;
|
||
padding: 0 20upx;
|
||
display: flex;
|
||
}
|
||
|
||
.wrapper .list2 .item .pictrue {
|
||
width: 60upx;
|
||
height: 100upx;
|
||
margin: 20upx 0;
|
||
|
||
image {
|
||
width: 80%;
|
||
height: 80%;
|
||
}
|
||
}
|
||
|
||
.wrapper .list2 .item .name {
|
||
flex: 1;
|
||
font-size: $font-sm;
|
||
font-weight: bold;
|
||
color: #c8a86b;
|
||
margin: 0 20upx;
|
||
}
|
||
|
||
.wrapper .list2 .item .earn {
|
||
font-size: $font-sm;
|
||
color: #c8a86b;
|
||
border: 2upx solid #c8a86b;
|
||
text-align: center;
|
||
height: 48upx;
|
||
margin: 36upx 0;
|
||
width: 120upx;
|
||
border-radius: 10upx;
|
||
}
|
||
</style>
|