Files
dtx_store/pages/mission/get-dt/get-dt.vue

112 lines
2.3 KiB
Vue

<template>
<view class="content">
<view class="dt-header">
<view class="title">已领取DT积分</view>
<view class="num">{{glz}}</view>
</view>
<view class="logs-title">账户记录</view>
<block v-if="log.length > 0">
<view class="logs-item" v-for="(item, index) in log" :key="index">
<view class="logs-item-title">{{item.remark}}</view>
<view class="logs-item-time">{{item.created_at}}</view>
<view class="logs-item-price" :class="item.amount > 0 ? 'add': 'remove'">{{item.amount}}</view>
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
<u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999" text="暂无领取记录~" />
</view>
</block>
</view>
</template>
<script>
import { integral } from '@/apis/interfaces/account.js'
export default {
data() {
return {
glz: '0.00',
log: []
};
},
created() {
integral().then(res => {
this.glz = res.glz
this.log = res.lists.data
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
</script>
<style lang="scss">
.pages-empty {
height: 50vh;
}
.content{
background: $window-color;
min-height: 100vh;
.dt-header{
background: $main-color;
padding: $padding*2 $padding $padding*2;
.title{
color: rgba(255, 255, 255, .9);
font-size: 28rpx;
}
.num{
font-weight: bold;
font-size: 60rpx;
padding-top: 10rpx;
color: white;
}
}
// 账户记录
.logs-title{
padding: 0 $padding;
font-weight: bold;
line-height: 90rpx;
color: #333;
font-size: 30rpx;
}
.logs-item{
position: relative;
background: white;
border-radius: $radius;
padding: $padding - 10 $padding;
padding-right: 240rpx;
box-sizing: border-box;
margin: 0 $margin ($margin - 10);
.logs-item-title{
font-weight: bold;
font-size: 30rpx;
line-height: 50rpx;
}
.logs-item-time{
font-size: 28rpx;
line-height: 40rpx;
color: gray;
}
.logs-item-price{
position: absolute;
right: $padding;
top: $padding - 10;
line-height: 90rpx;
width: 180rpx;
text-align: right;
font-weight: bold;
@extend .nowrap;
&.add{
color: $main-color;
}
&.remove{
color: $text-price;
}
}
}
}
</style>