325 lines
7.5 KiB
Vue
325 lines
7.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="title">
|
||
<view class="title-name">消费金账户余额</view>
|
||
</view>
|
||
|
||
<view class="redBack">
|
||
<view class="list">
|
||
<view class="label">
|
||
<view class="label-title">可用余额<image src="/static/icon/giftPack-show.png" mode="widthFix"></image></view>
|
||
<view class="label-number">{{account.gold}}</view>
|
||
<view class="label-go">可用余额，入账记录 </view>
|
||
</view>
|
||
<view class="label">
|
||
<view class="label-title">待发放</view>
|
||
<view class="label-number">{{blockeds}}</view>
|
||
<navigator hover-class="none" :url="'/pages/giftPack/logsFrozen?type=gold' + '&blockeds=' + blockeds" class="label-go">立即查询 > </navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="integra-cont">
|
||
<view class="integra-title">
|
||
<view class="integra-title-name">明细记录</view>
|
||
<view class="integra-title-picker">
|
||
<picker @change="screenBind" :value="screenIndex" :range-key="'name'" :range="screenArray">
|
||
{{screenArray[screenIndex].name}}
|
||
</picker>
|
||
<image class="integra-title-icon" src="/static/icon/arrow_down.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="integra-cont-list" v-if="accounts.length > 0">
|
||
<view class="integra-cont-label" v-for="(item, index) in accounts" :key="index">
|
||
<view class="integra-cont-title">
|
||
<view class="integra-cont-name">{{item.title}}</view>
|
||
<view class="integra-cont-tips">消费金余额</view>
|
||
</view>
|
||
<view class="integra-cont-time">扣除时间：{{item.created_at}}</view>
|
||
<view class="integra-cont-number">{{item.variable}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 暂无内容 -->
|
||
<view class="recommend-hint" v-else>
|
||
<image src="/static/img/legal_tips.png"></image>
|
||
<view>抱歉，目前暂无内容~</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { logs } from '@/apis/interfaces/giftPack'
|
||
import { index } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
blockeds : '',
|
||
account : '',
|
||
accounts : '', // 账户列表
|
||
screenArray : [
|
||
{
|
||
channel: 'all',
|
||
name: '全部'
|
||
},
|
||
{
|
||
channel: 'in',
|
||
name: '入账'
|
||
},
|
||
{
|
||
channel: 'out',
|
||
name: '出账'
|
||
}
|
||
], //账变记录筛选数组
|
||
screenChannel: '', //账变记录筛选数组标识
|
||
screenIndex : 0 , //账变记录筛选index
|
||
page : 1, //分页
|
||
lodingStats : false //加载状态
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {
|
||
// 存储环境-月兑活动
|
||
getApp().globalData.envType = 'giftPEnv'
|
||
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
methods: {
|
||
// 账变记录
|
||
accountInfo(page) {
|
||
logs({
|
||
type : 'gold',
|
||
page : page || '',
|
||
channel : this.screenChannel
|
||
}).then(res=>{
|
||
let newStores = this.accounts,
|
||
newData = []
|
||
if(page == 1 || page == undefined) newStores = []
|
||
newData = newStores.concat(res.data)
|
||
this.accounts = newData
|
||
this.blockeds = res.blockeds
|
||
this.account = res.account
|
||
this.page = res.page
|
||
this.lodingStats = false
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
|
||
// 筛选账变记录-条件
|
||
screenBind(e) {
|
||
this.screenIndex = e.detail.value,
|
||
this.screenChannel= this.screenArray[e.detail.value].channel
|
||
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
|
||
// 页面相关事件处理函数--监听用户下拉动作
|
||
onPullDownRefresh() {
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
|
||
// 上拉加载
|
||
onReachBottom(){
|
||
this.lodingStats = true
|
||
let pageNumber = this.page.current
|
||
if(this.page.has_more){
|
||
pageNumber++
|
||
// 获取账变记录
|
||
this.accountInfo(pageNumber);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff9f9;
|
||
height: 100vh;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
.title-name {
|
||
text-align: center;
|
||
position: relative;
|
||
width: 440rpx;
|
||
margin: 0 auto;
|
||
color: #f25448;
|
||
line-height: 60rpx;
|
||
&::after,
|
||
&::before {
|
||
position: absolute;
|
||
content: '';
|
||
top: calc(50% - 14rpx);
|
||
background-image: url('/static/img/giftPackArrow.png');
|
||
background-size: 100%;
|
||
background-position: center;
|
||
width: 80rpx;
|
||
height: 28rpx;
|
||
display: block;
|
||
}
|
||
&::after {
|
||
left: 0;
|
||
transform: rotate(180deg);
|
||
}
|
||
&::before {
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.redBack {
|
||
background-image: linear-gradient(to top, #fe796f, #f25549);
|
||
border-radius: 30rpx;
|
||
padding: 30rpx 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin: 30rpx 0;
|
||
position: relative;
|
||
}
|
||
.redBack::after,
|
||
.redBack::before {
|
||
position: absolute;
|
||
content: '';
|
||
left: 20rpx;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
}
|
||
.redBack::after {
|
||
background-color: rgba(243, 85, 73, .4);
|
||
z-index: 2;
|
||
width: calc(100% - 40rpx);
|
||
left: 20rpx;
|
||
bottom: -14px;
|
||
height: 14px;
|
||
}
|
||
.redBack::before {
|
||
background-color: rgba(243, 85, 73, .2);
|
||
z-index: 1;
|
||
width: calc(100% - 80rpx);
|
||
left: 40rpx;
|
||
bottom: -50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
.label {
|
||
flex: 2;
|
||
color: #ffffff;
|
||
box-sizing: border-box;
|
||
&:last-child {
|
||
padding-left: 60rpx;
|
||
position: relative;
|
||
}
|
||
&:first-child {
|
||
padding-left: 40rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
&:last-child::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 15%;
|
||
width: 2rpx;
|
||
height: 70%;
|
||
background-color: #ffffff;
|
||
opacity: .6;
|
||
}
|
||
}
|
||
.label-title {
|
||
line-height: 54rpx;
|
||
display: flex;
|
||
image {
|
||
width: 32rpx;
|
||
margin: 14rpx 0 0 15rpx;
|
||
}
|
||
}
|
||
.label-number {
|
||
margin: 10rpx 0 30rpx;
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
}
|
||
.label-go {
|
||
font-size: 26rpx;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
|
||
.integra-cont {
|
||
margin-top: 100rpx;
|
||
.integra-title {
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
.integra-title-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
.integra-title-picker {
|
||
display: flex;
|
||
color: #797979;
|
||
font-size: 32rpx;
|
||
.integra-title-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin: 6rpx 0 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.integra-cont-label {
|
||
background-color: #ffffff;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
position: relative;
|
||
.integra-cont-title {
|
||
display: flex;
|
||
line-height: 40rpx;
|
||
.integra-cont-tips {
|
||
margin-left: 20rpx;
|
||
color: #ff9833;
|
||
border: 2rpx solid #ff9833;
|
||
border-radius: 80rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 15rpx;
|
||
}
|
||
}
|
||
.integra-cont-time {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-top: 20rpx;
|
||
}
|
||
.integra-cont-number {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
right: 30rpx;
|
||
color: #f25448;
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 暂无内容 */
|
||
.recommend-hint {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 100rpx 0;
|
||
}
|
||
|
||
.recommend-hint image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
</style> |