<template>
|
<z-paging ref="paging" class="z-paging page_bg" v-model="useList" @query="getInfo"
|
:hide-loading-more-when-no-more-by-limit="5">
|
<view class="flex-col group_2">
|
<view class="flex-col section_1">
|
<view class="flex-col section_2">
|
<text class="text_1">我的学习币</text>
|
<view class="justify-between group_3">
|
<text class="text_2">{{coin}}</text>
|
<view class="flex-col items-center group_4" v-if="flag"
|
@click="navigateTo('/pages/mine/account/recharge', false)">
|
<text>充值</text>
|
<image src="/static/local/ba579c85d15446a8613e2c81f95c7556.png" class="image_2" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="flex-row group_5">
|
<image src="/static/local/3aa07251028c2ee9d409337d259cb3f9.png" class="image_3" />
|
<text class="text_4">明细记录</text>
|
</view>
|
</view>
|
<view class="justify-between group_6" v-for="item in useList" :key="item._id">
|
<view class="flex-col">
|
<text class="text_5">{{showText(item.useOrRecharge)}}</text>
|
<text class="text_6">{{item._add_time_str}}</text>
|
</view>
|
<text class="text_7">{{item.useOrRecharge == 'use' ? '-' : '+'}} {{item.number}}</text>
|
</view>
|
</z-paging>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
coin: 0,
|
useList: [],
|
|
flag: true
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
computed: {
|
showText() {
|
return (type) => {
|
switch (type) {
|
case 'use':
|
return '使用学习币'
|
case 'recharge':
|
return '充值学习币'
|
case 'admin':
|
return '管理员充值'
|
}
|
}
|
}
|
},
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
if (uni.getSystemInfoSync().platform === 'android') this.flag = true
|
},
|
getInfo(pageIndex, pageSize) {
|
vk.callFunction({
|
url: 'client/accout/kh/getCoinAndList',
|
title: '请求中...',
|
data: { pageIndex, pageSize, need_user_info: true },
|
success: function (data) {
|
that.coin = data.coin
|
that.$refs.paging.complete(data.rows);
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.group_2 {
|
padding: 20rpx 20rpx 0;
|
background: #F5F5F5;
|
|
.section_1 {
|
background-image: url('/static/local/9219dd8ac587f03ba0b85aaac780edad.png');
|
background-position: 0px 0px;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
.section_2 {
|
padding: 66rpx 30rpx 62rpx 45rpx;
|
background-image: url('/static/local/16403090578239045115.png');
|
background-position: 0px 0px;
|
background-size: 709rpx 276rpx;
|
background-repeat: no-repeat;
|
|
.text_1 {
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.group_3 {
|
margin-top: 16rpx;
|
|
.text_2 {
|
color: rgb(51, 51, 51);
|
font-size: 80rpx;
|
line-height: 96rpx;
|
white-space: nowrap;
|
font-weight: bold;
|
}
|
|
.group_4 {
|
margin-top: 42rpx;
|
padding: 12rpx 0 10rpx;
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
width: 134rpx;
|
position: relative;
|
|
.image_2 {
|
border-radius: 10rpx;
|
width: 134rpx;
|
height: 56rpx;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
position: absolute;
|
}
|
}
|
}
|
}
|
}
|
|
.group_5 {
|
padding: 34rpx 0 23rpx;
|
color: rgb(51, 51, 51);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
|
.image_3 {
|
margin: 9rpx 0;
|
width: 20rpx;
|
height: 20rpx;
|
}
|
|
.text_4 {
|
margin-left: 10rpx;
|
}
|
}
|
}
|
|
.group_6 {
|
padding: 30rpx 20rpx;
|
border-bottom: 1px solid #F0F0F0;
|
|
.text_7 {
|
align-self: center;
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
}
|
|
.text_5 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 36rpx;
|
white-space: nowrap;
|
}
|
|
.text_6 {
|
margin-top: 16rpx;
|
color: rgb(153, 153, 153);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
