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>
|