[本时生活h5端]
This commit is contained in:
300
pages/account/account.vue
Normal file
300
pages/account/account.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user