211 lines
4.8 KiB
Vue
211 lines
4.8 KiB
Vue
|
<template>
|
|||
|
<view class="template-integral tn-safe-area-inset-bottom">
|
|||
|
<view class="top-backgroup">
|
|||
|
<image src='/static/adn4.jpg' mode='widthFix' class='backgroud-image'>
|
|||
|
</image>
|
|||
|
</view>
|
|||
|
<view style="position: absolute;top: 10%;width: 100%;">
|
|||
|
<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-color-white">
|
|||
|
<view class="tn-text-bold tn-text-xxl">本月个人累计积分 :{{userMyScore.my_employee_score.score}}</view>
|
|||
|
<view class="tn-text-bold tn-text-xxl" style="margin-top: 20rpx;">本月团队累计积分 :{{userMyScore.my_team_score.score}}</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<view :style="{top: vuex_custom_bar_height + 'px'}">
|
|||
|
<!-- 顶部标签 -->
|
|||
|
<view class="tn-bg-white" style="padding-bottom: 20rpx;">
|
|||
|
<tn-tabs-swiper ref="tabs" activeColor="#3165CC" inactiveColor="#080808" :list="list"
|
|||
|
:current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
|
|||
|
</view>
|
|||
|
<view v-for="(item,index) in integral" :key="index" class="order__item">
|
|||
|
<view class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
|
|||
|
style="padding:10rpx 20rpx;">
|
|||
|
<view class=" tn-flex tn-flex-nowrap tn-flex-col-center">
|
|||
|
<image @click="openImg(item)" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" :src="item.images[0]"
|
|||
|
mode="aspectFill">
|
|||
|
</image>
|
|||
|
<view style="margin-left: 20rpx;">
|
|||
|
<view style="font-size: 30rpx;font-weight: 600;">{{item.name}}</view>
|
|||
|
<view style="margin-top: 30rpx;font-size: 25rpx;color: #999999">{{item.createtime_text}}</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view
|
|||
|
class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
|||
|
<view style="padding-right: 10rpx;color: #3465CC;font-size: 28rpx;font-weight: 600;">
|
|||
|
积分:+{{item.score}}
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view style="height: 1px;background-color: aliceblue;width: 100%;margin: 30rpx auto;"></view>
|
|||
|
</view>
|
|||
|
<view style="padding-bottom: 50rpx;">
|
|||
|
<tn-load-more class="tn-margin-top" :status="status" :loadText="loadText" ></tn-load-more>
|
|||
|
</view>
|
|||
|
<view class="tn-padding-bottom"></view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import {
|
|||
|
scoreLog,scoreMonth
|
|||
|
} from "@/utils/api";
|
|||
|
export default {
|
|||
|
data() {
|
|||
|
return {
|
|||
|
loadText: {
|
|||
|
loading: '快速加载中...',
|
|||
|
nomore: '下面没有了'
|
|||
|
},
|
|||
|
list: [{
|
|||
|
name: '申请中'
|
|||
|
},
|
|||
|
{
|
|||
|
name: '申请通过'
|
|||
|
},
|
|||
|
{
|
|||
|
name: '被拒绝'
|
|||
|
}
|
|||
|
],
|
|||
|
tabsIndex: 0,
|
|||
|
integral: [],
|
|||
|
page: 1,
|
|||
|
size: 10,
|
|||
|
status: 'loading',
|
|||
|
userMyScore:{}
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad() {
|
|||
|
this.getScoreLog();
|
|||
|
this.getSum();
|
|||
|
},
|
|||
|
onReachBottom() {
|
|||
|
this.page += 1;
|
|||
|
this.getScoreLog();
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 标签栏值发生改变
|
|||
|
tabsChange(index) {
|
|||
|
this.status = 'loading';
|
|||
|
this.page = 1;
|
|||
|
this.integral = [];
|
|||
|
this.tabsIndex = index
|
|||
|
this.getScoreLog();
|
|||
|
},
|
|||
|
openImg(item) {
|
|||
|
uni.previewImage({
|
|||
|
urls: item.images,
|
|||
|
current: 0,
|
|||
|
indicator: 'number'
|
|||
|
});
|
|||
|
},
|
|||
|
getSum() {
|
|||
|
scoreMonth()
|
|||
|
.then(res => {
|
|||
|
console.log(res);
|
|||
|
this.userMyScore=res.data;
|
|||
|
})
|
|||
|
.catch(error => {
|
|||
|
uni.showToast({
|
|||
|
title: error,
|
|||
|
icon: 'none',
|
|||
|
duration: 2000
|
|||
|
});
|
|||
|
})
|
|||
|
},
|
|||
|
getScoreLog() {
|
|||
|
scoreLog({
|
|||
|
page: this.page,
|
|||
|
limit: this.size,
|
|||
|
status: this.tabsIndex,
|
|||
|
time: 'month',
|
|||
|
})
|
|||
|
.then(res => {
|
|||
|
console.log(res);
|
|||
|
if (res.data.list.length == 0 || res.data.list.length < 9) {
|
|||
|
this.status = 'nomore';
|
|||
|
}
|
|||
|
this.integral.push(...res.data.list);
|
|||
|
})
|
|||
|
.catch(error => {
|
|||
|
uni.showToast({
|
|||
|
title: error,
|
|||
|
icon: 'none',
|
|||
|
duration: 2000
|
|||
|
});
|
|||
|
})
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss" scoped>
|
|||
|
.template-order {
|
|||
|
background-color: #F7F7F7CC;
|
|||
|
}
|
|||
|
|
|||
|
/* 自定义导航栏内容 end */
|
|||
|
|
|||
|
.order {
|
|||
|
&--wrap {
|
|||
|
position: fixed;
|
|||
|
left: 0;
|
|||
|
right: 0;
|
|||
|
width: 100%;
|
|||
|
background-color: inherit;
|
|||
|
}
|
|||
|
|
|||
|
/* 导航栏 start */
|
|||
|
&__tabs {
|
|||
|
position: absolute;
|
|||
|
top: 0;
|
|||
|
left: 0;
|
|||
|
right: 0;
|
|||
|
background-color: inherit;
|
|||
|
}
|
|||
|
|
|||
|
/* swiper end */
|
|||
|
|
|||
|
/* 订单内容 start */
|
|||
|
&__item {
|
|||
|
background-color: #FFFFFF;
|
|||
|
border-radius: 18rpx;
|
|||
|
|
|||
|
/* 头部 start */
|
|||
|
&__head {
|
|||
|
|
|||
|
&__title {
|
|||
|
font-weight: bold;
|
|||
|
line-height: normal;
|
|||
|
|
|||
|
&--right-icon {
|
|||
|
font-size: 24rpx;
|
|||
|
margin-left: 8rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
&__status {
|
|||
|
font-size: 22rpx;
|
|||
|
color: #AAAAAA;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
/* 操作按钮 end */
|
|||
|
}
|
|||
|
|
|||
|
/* 订单内容 end */
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
/* 顶部背景图 start */
|
|||
|
.top-backgroup {
|
|||
|
height: 450rpx;
|
|||
|
z-index: -1;
|
|||
|
|
|||
|
.backgroud-image {
|
|||
|
width: 100%;
|
|||
|
height: 450rpx;
|
|||
|
// z-index: -1;
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|