301 lines
11 KiB
Vue
301 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 账户余额 -->
|
||
<view class="integra-top">
|
||
<view class="integra-name">
|
||
<block v-if="balanceType == 'silver'">白金账户余额</block>
|
||
<block v-else-if="balanceType == 'drill'">钻石账户余额</block>
|
||
</view>
|
||
<view class="integra-info">
|
||
<view class="integra-right">
|
||
<view class="integra-title"><text>可用余额</text><image src="/static/icon/integra_icon00.png"></image></view>
|
||
<view class="integra-number">{{ balanceData.number }}</view>
|
||
<view class="integra-btn"><text>可用余额，入账记录</text></view>
|
||
<!-- <navigator class="integra-btn" hover-class="none" url="/pages/account/recharge"><text>立即充值</text><image src="/static/icon/rightsArrow.png"></image></navigator> -->
|
||
</view>
|
||
<view class="integra-right">
|
||
<view class="integra-title"><text>待发放</text><image src="/static/icon/integra_icon01.png"></image></view>
|
||
<view class="integra-number">{{ balanceData.blockeds }}</view>
|
||
<navigator hover-class="none" :url="'/pages/frozen/frozen?type=' + balanceType + '&blockeds=' + balanceData.blockeds" class="integra-btn integra-blue">立即查询<image src="/static/icon/rightsArrow.png"></image></navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账变记录 -->
|
||
<view class="integra-cont">
|
||
<view class="integra-cont-title">
|
||
<view class="integra-cont-name">账变记录</view>
|
||
<view class="integra-cont-picker" v-if="balanceData.screenArray[balanceData.screenIndex]">
|
||
<picker @change="screenBind" :value="balanceData.screenIndex" :range-key="'name'" :range="balanceData.screenArray">
|
||
{{ balanceData.screenArray[balanceData.screenIndex].name }}
|
||
</picker>
|
||
<image class="integra-cont-icon" src="/static/icon/arrow_down.png"></image>
|
||
</view>
|
||
</view>
|
||
<block v-if="balanceData.accounts.length > 0">
|
||
<view class="integra-list" v-for="(item,index) in balanceData.accounts" :key="index">
|
||
<view class="integra-text">
|
||
<view class="integra-title">
|
||
<view class="integra-title-tips" :class="{active : item.channel == 'in'}">{{ item.channel == 'in' ? '入' : '出' }}</view>{{ item.title }}
|
||
</view>
|
||
<view class="integra-oints" :class="{active : item.channel == 'in'}">
|
||
{{ item.variable }}
|
||
</view>
|
||
</view>
|
||
<view class="integra-remark">
|
||
{{ item.remark }}
|
||
</view>
|
||
<view class="integra-date">
|
||
<view class="integra-time">
|
||
<text>{{ item.channel == 'in' ? '有效期：' : '扣除时间：' }}</text>
|
||
{{ item.created_at }}{{ item.channel == 'in' ? ' 至 ' + item.expired_at : '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 暂无内容 -->
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="/static/img/null_icon.png"></image>
|
||
<view>抱歉，目前暂无内容~</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { logs } from '@/apis/interfaces/user'
|
||
import { create, store } from '@/apis/interfaces/recharge'
|
||
export default {
|
||
data() {
|
||
return {
|
||
balanceType : '', // 卡来源-类型
|
||
balanceData : {
|
||
blockeds : '', // 待发放余额
|
||
number : '', // 账户余额
|
||
accounts : [], //账户列表
|
||
screenChannel : '', //账变记录筛选数组标识
|
||
screenIndex : 0, //账变记录筛选index
|
||
screenArray : [
|
||
{
|
||
channel: 'all',
|
||
name: '全部'
|
||
},
|
||
{
|
||
channel: 'in',
|
||
name: '入账'
|
||
},
|
||
{
|
||
channel: 'out',
|
||
name: '出账'
|
||
}
|
||
]
|
||
},
|
||
load: {
|
||
page : 1, // 第一页
|
||
allpage : 0, // 总页数
|
||
has_more: false, // 是否有分页
|
||
show : false // 是否有下一页数据
|
||
},
|
||
finished : false, //商品列表没有更多商品是否显示
|
||
LoadData : false //数据加载完渲染
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.balanceType = options.type
|
||
},
|
||
onShow() {
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
methods:{
|
||
// 账变记录
|
||
accountInfo() {
|
||
if (this.load.page == 1) {
|
||
this.balanceData.accounts = [];
|
||
}
|
||
logs({
|
||
type : this.balanceType,
|
||
channel : this.balanceData.screenChannel,
|
||
page : this.load.page
|
||
}).then(res=>{
|
||
//判断金卡、银卡、钻石卡
|
||
let number
|
||
if(this.balanceType == "silver") {
|
||
number = res.account.silver
|
||
} else if(this.balanceType == "gold") {
|
||
number = res.account.gold
|
||
} else if(this.balanceType == "drill") {
|
||
number = res.account.drill
|
||
} else {
|
||
return
|
||
}
|
||
this.balanceData.accounts = this.balanceData.accounts.concat(res.data)
|
||
this.balanceData.number = number
|
||
this.balanceData.blockeds = res.blockeds
|
||
this.load.allpage = res.page.total_page
|
||
this.load.has_more = res.page.has_more
|
||
|
||
// 数据渲染加载
|
||
this.LoadData = true
|
||
})
|
||
},
|
||
|
||
// 筛选账变记录-条件
|
||
screenBind(e) {
|
||
this.balanceData.screenIndex = e.detail.value,
|
||
this.balanceData.screenChannel= this.balanceData.screenArray[e.detail.value].channel
|
||
|
||
// 获取账变记录
|
||
this.accountInfo();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 账户余额
|
||
.integra-top {
|
||
padding: 30rpx 20rpx 0;
|
||
background-color: #dfb48b;
|
||
border-radius: 0 0 100rpx 100rpx;
|
||
.integra-name {
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.integra-info {
|
||
background-color: #fff;
|
||
text-align: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
|
||
padding: 30rpx 20rpx;
|
||
box-sizing: border-box;
|
||
text-align: left;
|
||
.integra-right {
|
||
flex: 2;
|
||
position: relative;
|
||
&:first-child {
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
&:last-child {
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
&:first-child::after {
|
||
display: none;
|
||
}
|
||
.integra-title {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: 4rpx 0 0 10rpx;
|
||
}
|
||
}
|
||
.integra-number {
|
||
font-size: 40rpx;
|
||
}
|
||
.integra-btn {
|
||
font-size: 28rpx;
|
||
margin-top: 20rpx;
|
||
color: #adadad;
|
||
display: flex;
|
||
text {
|
||
color: #dfb48b;
|
||
}
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
}
|
||
.integra-blue {
|
||
color: #317afa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 账变记录
|
||
.integra-cont-title {
|
||
padding: 40rpx 20rpx 10rpx;
|
||
display: flex;
|
||
.integra-cont-name {
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
.integra-cont-picker {
|
||
display: flex;
|
||
color: #797979;
|
||
font-size: 30rpx;
|
||
.integra-cont-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin: 6rpx 0 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.integra-list {
|
||
width: calc(100% - 40rpx);
|
||
margin: 20rpx;
|
||
padding: 30rpx 20rpx;
|
||
position: relative;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
.integra-text {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
.integra-title {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
margin: 0;
|
||
.integra-title-tips {
|
||
background-color: green;
|
||
color: #fff;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 38rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
font-size: 24rpx;
|
||
transform: scale(0.8);
|
||
&.active {
|
||
background-color: red;
|
||
}
|
||
}
|
||
}
|
||
.integra-oints {
|
||
color: green;
|
||
&.active {
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
.integra-remark {
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #4e4e4e;
|
||
background: #f5f5f5;
|
||
display: inline-block;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
.integra-date {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.pages-hint {
|
||
margin: 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
</style>
|