394 lines
11 KiB
Vue
394 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar @leftClick="handlerLeft" :title="title" :placeholder="true">
|
|
<view @click="handlerRecord" class="" slot="right" v-if="!isRecord">
|
|
变更记录
|
|
</view>
|
|
<!-- <view style="margin-left: 10rpx;" @click="goPage('/pages/user/Fruit/index')" class="" slot="right" v-if="transferType == 5 && !isRecord">
|
|
水果卡
|
|
</view> -->
|
|
</u-navbar>
|
|
<view class="balance_wrapper bg-w" v-if="!isRecord">
|
|
<view class="balance_wrapper_bg flex flex-center">
|
|
<view class="balance_item">
|
|
{{ transferType == 5 ? '水果券' : '余额' }}
|
|
<u-gap height="30rpx"></u-gap>
|
|
<view class="balance_text">
|
|
<text>¥</text> {{ balance }}
|
|
</view>
|
|
</view>
|
|
<view class="balance_item">
|
|
{{ '冻结资产' }}
|
|
<u-gap height="30rpx"></u-gap>
|
|
<view class="balance_text">
|
|
<text>¥</text> {{ assetFreezeAccount }}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<u-gap height="30rpx"></u-gap>
|
|
<view class="nav_box flex flex-align-center" :class="[transferType == 5 ? 'padding-10' : '']">
|
|
<view class="box flex flex-center" @click="goPage('/pages/user/balance/greenTransfer?type=' + transferType)">
|
|
<text class="zyhs zyhs-zhuanzhang1"></text>转账
|
|
</view>
|
|
<view v-if="transferType == 1" class="box right flex flex-center"
|
|
@click="goPage('/pages/user/balance/rechargeList?type=getRechargeRecord')">
|
|
<text class="zyhs zyhs-chongzhi"></text>充值记录
|
|
</view>
|
|
<block v-if="transferType == 5">
|
|
<view class="box right flex flex-center"
|
|
@click="goPage('/pages/user/balance/rechargeList?type=getRechargeFruitRecord')">
|
|
<text class="zyhs zyhs-chongzhi"></text>充值记录
|
|
</view>
|
|
<!-- <view class="box right flex flex-center middle" @click="goPage('/pages/user/balance/rechargeList?type=getRechargeFruitRecord')">
|
|
<text class="zyhs zyhs-qiandai"></text>提现
|
|
</view> -->
|
|
</block>
|
|
</view>
|
|
<!-- <view v-if="transferType == 5 || transferType == 1" class="chongzhi-box"
|
|
@click="goPage(transferType == 5 ? '/pages/user/balance/recharge?radioIndex=1&noSelect=1' : '/pages/user/balance/recharge')">
|
|
<text>
|
|
充值
|
|
</text>
|
|
</view> -->
|
|
<view v-if="transferType == 5" class="tixian-box"
|
|
@click="zhuanhuan">
|
|
<text>
|
|
转换消费余额
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-tabs class="bg-w tabsId" :list="tabsList" @click="handlerTabClick"></u-tabs>
|
|
<u-list scroll-y="true" :style="{ height: screenHeight + 'px' }" lowerThreshold="300" @scrolltolower="handlerLoad">
|
|
|
|
<view class="listBox" v-if="list.length">
|
|
<view v-for="(order, index) in list" class="listBoxCard" @click="handlerDetail(order)">
|
|
<view class="content">
|
|
<view>
|
|
<!-- <text>{{ tabsIndex == 0 ? '贡献人变更后资产金额':'收益人变更前资产金额'}}:</text>
|
|
<text>{{ tabsIndex == 0 ? order.contributoryAfterMoney: order.beneficiaryAfterMoney}}</text> -->
|
|
{{ order.createTime }}
|
|
<u-icon name="lock-fill" v-if="order.status == 0" color="#2979ff" size="28"></u-icon>
|
|
</view>
|
|
<view class="flex">
|
|
<text>{{ order.changeReason }}</text>
|
|
<text>变更前：{{ tabsIndex == 0 ? order.contributoryBeforeMoney : order.beneficiaryBeforeMoney }}</text>
|
|
</view>
|
|
<view class="flex flex-align-center flex-between">
|
|
<!-- <text>{{ tabsIndex == 0 ? '受益人用户编号':'贡献人用户编号'}}:</text>
|
|
<text>{{ tabsIndex == 0 ? order.beneficiaryUserName: order.contributoryUserName}}</text> -->
|
|
<view>
|
|
<text>变更后：</text>
|
|
<text>{{ tabsIndex == 0 ? order.contributoryAfterMoney : order.beneficiaryAfterMoney }}</text>
|
|
<!-- <text>{{ tabsIndex == 0 ? '-':'' }}{{ order.changeMoney }}</text> -->
|
|
</view>
|
|
<view>
|
|
<text>变更金额：</text>
|
|
<text>{{ order.changeMoney }}</text>
|
|
<!-- <text>{{ tabsIndex == 0 ? '-':'' }}{{ order.changeMoney }}</text> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view>
|
|
<text>{{ tabsIndex == 0 ? '资产变更金额':'资产变更金额'}}:</text>
|
|
<text>{{ order.changeMoney }}</text>
|
|
</view>
|
|
<view>
|
|
<text>{{ tabsIndex == 0 ? '变更原因':'变更原因'}}:</text>
|
|
<text>{{ order.changeReason }}</text>
|
|
</view>
|
|
<view>
|
|
<text>{{ tabsIndex == 0 ? '交易单号':'交易单号'}}:</text>
|
|
<text>{{ order.tranNo }}</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- <view class="content" v-else>
|
|
<view>
|
|
<text></text>
|
|
</view>
|
|
</view> -->
|
|
<!-- <view class="flex1">
|
|
<button class="button"
|
|
style="margin-top: 20upx;background-color: #3c9cff;color: #fff;"
|
|
>详情</button>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex flex-center" style="height: 100%;">
|
|
<u-empty mode="list" text="暂无记录">
|
|
</u-empty>
|
|
</view>
|
|
</u-list>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import url from "@/common/http/url.js";
|
|
import { oldAssetCaseBalance } from '@/api/system/api.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
screenHeight: 500,
|
|
assetFreezeAccount: 0,
|
|
balance: 0,
|
|
type: null,
|
|
title: '',
|
|
transferType: 0,
|
|
list: [],
|
|
pageNum: 1,
|
|
isLoad: false,
|
|
tabsIndex: 0,
|
|
tabsList: [
|
|
{ name: '支出记录' },
|
|
{ name: '收入记录' }
|
|
],
|
|
scrollTop: uni.getStorageSync('system')['statusBarHeight'],
|
|
isRecord: false,
|
|
dpi: uni.getStorageSync('dpi'),
|
|
statusBarHeight: uni.getStorageSync('system')['statusBarHeight']
|
|
};
|
|
},
|
|
onLoad (e) {
|
|
this.type = e.type;
|
|
this.transferType = e.transferType;
|
|
this.title = e.title;
|
|
this.scrollTop = this.statusBarHeight * this.dpi + 570;
|
|
console.log('this.scrollTop', this.scrollTop)
|
|
setTimeout(() => {
|
|
this.getScrollHeight()
|
|
}, 1000)
|
|
},
|
|
onShow () {
|
|
this.list = []
|
|
this.getBalance();
|
|
this.getList()
|
|
},
|
|
computed: {
|
|
...mapState(["myAsset"])
|
|
},
|
|
methods: {
|
|
zhuanhuan(){
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: '确定要转换么',
|
|
success: e => {
|
|
if (e.confirm) {
|
|
oldAssetCaseBalance('shop-7')
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getScrollHeight () {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
// 设备屏幕高度
|
|
const screenHeight = systemInfo.screenHeight
|
|
// 设备底部菜单栏高度
|
|
const navigationBarHeight = systemInfo.navigationBarHeight
|
|
const menuButtonBoundingClientRect = systemInfo.menuButtonBoundingClientRect
|
|
|
|
// 获取当前DOM元素信息
|
|
const querySelector = uni.createSelectorQuery().in(this)
|
|
querySelector.select('.tabsId').boundingClientRect((rect) => {
|
|
console.log(rect, 'querySelector')
|
|
// 计算距离底部的高度
|
|
const distanceToBottom = screenHeight - rect.top
|
|
// 输出距离底部的高度
|
|
this.screenHeight = distanceToBottom
|
|
console.log(screenHeight, 'screenHeight 高度')
|
|
console.log(rect.top, 'screenHeight 高度')
|
|
console.log(distanceToBottom, 'screenHeight 高度')
|
|
}).exec()
|
|
},
|
|
handlerRecord () {
|
|
this.isRecord = true;
|
|
this.scrollTop = this.statusBarHeight * this.dpi + 176;
|
|
this.screenHeight = uni.getSystemInfoSync().screenHeight || 700
|
|
|
|
|
|
},
|
|
handlerLeft () {
|
|
if (this.isRecord) {
|
|
this.isRecord = false;
|
|
this.scrollTop = this.statusBarHeight * this.dpi + 570;
|
|
this.getScrollHeight()
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
handlerLoad () {
|
|
if (this.isLoad) return;
|
|
this.pageNum++;
|
|
this.getList()
|
|
},
|
|
handlerTabClick (e) {
|
|
console.log(e);
|
|
let { index } = e;
|
|
this.isLoad = false;
|
|
this.tabsIndex = index;
|
|
this.list = [];
|
|
this.pageNum = 1;
|
|
this.getList()
|
|
this.getScrollHeight()
|
|
},
|
|
goPage (path) {
|
|
this.$navigateTo(path)
|
|
},
|
|
getBalance () {
|
|
this.$http('GET', url.user.getMyAsset).then(res => {
|
|
// this.balance = res.data[5].assetAccount
|
|
this.myAsset.forEach((item) => {
|
|
if (item.assetType == 3 && this.transferType == 1) this.balance = item.assetAccount;
|
|
if (item.assetType == 7 && this.transferType == 5) {
|
|
this.balance = item.assetAccount;
|
|
this.assetFreezeAccount = item.assetFreezeAccount
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getList (type) {
|
|
this.$http("GET", url.user[this.type], {
|
|
pageNum: this.pageNum,
|
|
pageSzie: 10,
|
|
type: this.tabsIndex + 1
|
|
}).then((res) => {
|
|
console.log('res=========', res);
|
|
let { code, data: { records } } = res;
|
|
if (code == 200) {
|
|
this.list = [...this.list, ...records];
|
|
if (records.length < 10) this.isLoad = true;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.chongzhi-box {
|
|
padding: 20rpx 60rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 10upx;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, rgb(8, 123, 58), rgb(16, 209, 98));
|
|
}
|
|
|
|
.tixian-box {
|
|
padding: 20rpx 60rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 10upx;
|
|
text-align: center;
|
|
background: #2963e2;
|
|
}
|
|
|
|
.padding-10 {
|
|
.box {
|
|
padding: 10rpx 2rpx !important;
|
|
}
|
|
|
|
.middle {
|
|
background: linear-gradient(90deg, rgb(148, 157, 9), rgb(155, 206, 189)) !important;
|
|
}
|
|
}
|
|
|
|
.balance_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.balance_wrapper {
|
|
padding: 20rpx 30rpx;
|
|
color: #fff;
|
|
|
|
.balance_wrapper_bg {
|
|
padding: 40rpx 0;
|
|
border-radius: 20rpx;
|
|
justify-content: space-around;
|
|
background-color: rgb(233, 187, 133);
|
|
font-size: 36rpx;
|
|
|
|
.balance_text {
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
|
|
text {
|
|
font-size: 32rpx;
|
|
font-weight: normal;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav_box {
|
|
justify-content: space-around;
|
|
|
|
.box {
|
|
flex: 1;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
padding: 20rpx 60rpx;
|
|
border-radius: 10rpx;
|
|
background: linear-gradient(90deg, rgb(255, 150, 100), rgb(255, 106, 89));
|
|
|
|
.zyhs {
|
|
font-size: 46rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.zyhs-zhuanzhang1 {
|
|
font-size: 50rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: 30rpx;
|
|
background: linear-gradient(90deg, rgb(60, 152, 250), rgb(130, 120, 220));
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.u-tabs__wrapper__nav__item {
|
|
flex: 1;
|
|
}
|
|
|
|
.scroll_view {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.listBox {
|
|
box-sizing: border-box;
|
|
padding: 20upx;
|
|
padding-top: 0;
|
|
|
|
.listBoxCard {
|
|
margin-top: 20upx;
|
|
background-color: #fff;
|
|
border-radius: 10upx;
|
|
box-sizing: border-box;
|
|
padding: 20upx;
|
|
|
|
.content {
|
|
view {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|