frontend-app/pages/rwa_package/rwa/rwa.vue

<template>
	<view class="content top-view">
		<TopSafe bgColor="rgba(0,0,0,0)"></TopSafe>
		<Header  bgColor="rgba(0,0,0,0)" color="#fff" title="数字积分兑换" />
		<view class="top-panel">
			<text class="text-24 text-white" style="margin-top:24rpx">股东行权</text>
			<text class="text-88 text-white text-bold" style="margin-top:24rpx">{{ curData ? curData.curAmount : 0 }}
				<text class="text-44 text-white">数字积分(TBC)</text>
			</text>
			<view class="btn-view">
				<view class="left-btn" @click="onLeft">
					<up-image src="/static/rwa/tx.png"  style="margin-right:5rpx;margin-top:2rpx" width="18" height="18" bgColor="#f1f6ff00" />
					<text class="text-zi text-32" style="margin-left:5rpx;line-height: 1.2;">兑换</text>
				</view>
				<view class="right-btn" @click="onRight">
					<up-image src="/static/rwa/jl.png"  style="margin-right:5rpx;margin-top:2rpx" width="18" height="18" bgColor="#f1f6ff00" />
					<text class="text-white text-32" style="margin-left:5rpx;line-height: 1.2;">记录</text>
				</view>
			</view>
		</view>
		<view class="bottom-panel">
			<view class="bottom-head-view">
				<text class="text-32 text-bold text-zu1">股东账户</text>
			</view>
			<view class="bottom-list">
				<view class="list-box" v-if="dataList.length">
					<AccountItemTwo :dataItem="item" @jie="onJie"
					v-for="(item,index) in dataList" :key="index"></AccountItemTwo>
				</view>
				<view class="no-box" v-else>
					<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/kzt.png" width="100" height="100"
						bgColor="#f1f6ff00"></up-image>
					<text class="text-32 text-fu1" style="margin-top:32rpx">暂无账户数据～</text>
				</view>
			</view>
		</view>
	
		<ShuTips :itemShow="tipsShow" @close="onClose" @ok="onOk"></ShuTips>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	
import { getExchUsers,unbindExchUsers,getAcctBalance } from '@/api/finance.js';
import { formatDate } from '@/utils/index.js';
import TopSafe from '@/components/common/top-safe.nvue'
import Header from '@/components/common/header.vue';
import ShuTips from '@/pages/rwa_package/account/components/shu-tips.vue';
import AccountItemTwo from '@/pages/rwa_package/account/components/account-item-two.vue'

export default {
	components: { Header, TopSafe,ShuTips,AccountItemTwo },
	data() {
		return {
			dataList:[],
			tipsShow:false,
			curData:null
		};
	},
	onLoad(option) {
		
	},
	onShow(){
		this.acctBalance();
		this.exchUsers()
	},
	methods: {
		exchUsers(){
			getExchUsers().then(res=>{
				if (res && res.bizcode === 100) {
					this.dataList = res.data.entitys || [];
				}
			})
		},
		onJie(item){
			let params = {
				accountId:item.id
			}
			unbindExchUsers(params).then(resp=>{
				if (resp && resp.bizcode === 100) {
					this.$refs.uToastRef.show({
						type: 'success',
						message: '解绑成功',
					});
					
					this.exchUsers()
				}
			})
		},
		onRight(){
			uni.navigateTo({
				url: '/pages/rwa_package/rwa_withdrawal_log/rwa_withdrawal_log?back=rwa',
			})
		},
		onLeft(){
			this.tipsShow = true;
		},
		onClose(){
			this.tipsShow = false;
		},
		onOk(index){
			if(index == 0){
				uni.navigateTo({
					url: '/pages/rwa_package/account/shu',
				})
			}else if(index == 1){
				uni.navigateTo({
					url: '/pages/rwa_package/rwa_binding/rwa_binding',
				})
			}
			this.onClose();
		},
		acctBalance() {
			getAcctBalance().then(resp=>{
				if (resp && resp.bizcode === 100) {
					this.curData = null;
					resp.data.forEach(item=>{
						if(item.categoty == 'vcoin'){
							this.curData = item;
						}
					})
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.top-view{
	background: linear-gradient(90deg, $app-zt-color, #AE61FA);
	.bottom-panel{
		width:100%;
		display: flex;
		flex-direction: column;
		height:calc(100vh - 88rpx - 298rpx - var(--status-bar-height));
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0 32rpx;
		margin-top:32rpx;
		box-sizing: border-box;
		.bottom-head-view{
			width:100%;
			height:88rpx;
			min-height:88rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			
		}
		.bottom-list{
			width:100%;
			height:calc(100% - 88rpx);
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			.no-box{
				width:100%;
				margin-top:100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
		}
	}
	.top-panel{
		width:100%;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		
		.btn-view{
			width:100%;
			height:88rpx;
			min-height:88rpx;
			margin-top:32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.left-btn{
				width:48%;
				height:100%;
				background-color: #fff;
				align-items: center;
				justify-content: center;
				display: flex;
				border-radius: 16rpx;
			}
			.right-btn{
				width:48%;
				height:100%;
				background-color: rgba(0,0,0,0);
				border:2rpx solid #fff;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				display: flex;
				border-radius: 16rpx;
			}
		}
	}
}
</style>