frontend-app/pages/rwa_package/account/index.vue

<template>
	<view class="content">
		<TopSafe bgColor="rgba(0,0,0,0)"></TopSafe>
		<Header title="账户管理" bgColor="rgba(0,0,0,0)" />
		<view class="setting-view">
			<view class="tab-view">
				<view class="tab-list" v-for="(item,index) in tabList" :key="index" @click="onTab(index)" >
					<text class="text-fu text-28" v-if="index != 1" :style="{color:type == index ? '#7934F6' :'#666' }">{{item}}</text>
					<view class="tab-line" v-if="type == index"></view>
				</view>
			</view>
			<view class="mid-view">
				<AccountItem :type="type" v-if="type == 2 || type == 3" :itemData="item" @ok="onItemOk" v-for="(item,index) in dataList" :key="index"></AccountItem>
				<AccountItemTwo v-if="type == 0 || type == 1" :dataItem="item" @jie="onJie"
				v-for="(item,index) in dataList" :key="index"></AccountItemTwo>
			</view>
		</view>
		<view class="bottom-btn">
			<MyBtn :text="bottomText" @ok="onJump"></MyBtn>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getExchUsers,unbindExchUsers } from '@/api/finance.js';
import { getWithdraw,unbindWithdraw } from '@/api/common.js';
import Header from '@/components/common/header.vue';
import { clear } from '@/utils/auth.js';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import func from '@/utils/func.js';
import AccountItem from './components/account-item.vue'
import AccountItemTwo from './components/account-item-two.vue'


export default {
	components: { Header, TopSafe,MyBtn,AccountItem,AccountItemTwo },
	data() {
		return {
			type:0,
			tabList:['区块链账户','Alpha账户','支付宝账户','微信账户'],
			bottomText:'',
			dataList:[]
		};
	},
	onLoad(option){
		if(option.id){
			if(option.id == '3'){
				this.type = 0;
				this.bottomText = '添加区块链账户';
			}else if(option.id == '4'){
				this.type = 1;
				this.bottomText = '添加Alpha账户';
			}else if(option.id == '1'){
				this.type = 2;
				this.bottomText = '添加支付宝账户';
			}else{
				this.type = 3;
				this.bottomText = '添加微信账户';
			}
		}
	},
	onShow() {
		this.init();
		// this.userinfo();
	},
	methods: {
		init() {
			if(this.type == 0){
				this.bottomText = '添加区块链账户';
			}else if(this.type == 1){
				this.bottomText = '添加Alpha账户';
			}else if(this.type == 2){
				this.bottomText = '添加支付宝账户';
			}else{
				this.bottomText = '添加微信账户';
			}
			// this.userinfo()
			// #ifdef WEB
			this.tabList = ['区块链账户','Alpha账户','支付宝账户'];
			// #endif 
			this.getList();
		},
		onJie(item){
			let params = {
				accountId:item.id
			}
			unbindExchUsers(params).then(resp=>{
				if (resp && resp.bizcode === 100) {
					this.$refs.uToastRef.show({
						type: 'success',
						message: '解绑成功',
					});
					
					this.init();
				}
			})
		},
		onItemOk(item){
			let params = {
				bindId:item.id
			}
			unbindWithdraw(params).then(res=>{
				if (res.bizcode === 100) {
					this.$refs.uToastRef.show({
						type: 'success',
						message:'解绑成功',
					});
					this.init();
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
					return null;
				}
			})
		},
		getList(){
			if(this.type == 0 || this.type == 1){
				let params = {
					name:this.type == 0 ? 'WALLET' : 'ALPHACEX'
				}
				getExchUsers(params).then(res=>{
					if (res.bizcode === 100) {
						this.dataList = res.data.entitys ? res.data.entitys : [];
					} else {
						this.$refs.uToastRef.show({
							type: 'error',
							message: res.msg,
						});
						return null;
					}
				})
			}else{
				getWithdraw({platform:this.type == 2?1:2}).then(res=>{
					if (res.bizcode === 100) {
						this.dataList = res.data;
						this.dataList.forEach(item=>{
							item.name = item.accountName;
							item.account = item.accountNumber;
						})
					} else {
						this.$refs.uToastRef.show({
							type: 'error',
							message: res.msg,
						});
						return null;
					}
				})
			}
			
		},
		onTab(index){
			if(index != this.type){
				this.dataList = [];
				this.type = index;
				this.init();
			}
		},
		onJump(){
			console.log('his.typ',this.type)
			if(this.type == 0){
				uni.navigateTo({
					url:`/pages/rwa_package/account/shuAdd`
				})
			}else if(this.type == 1){
				uni.navigateTo({
					url: '/pages/rwa_package/rwa_binding/rwa_binding',
				})
			}else{
				uni.navigateTo({
					url:`/pages/rwa_package/account/bind?type=${this.type == 2?0:1}`
				})
			}
			
		}
	}
}
</script>

<style lang="scss" scoped>
.bottom-btn{
	width: 100%;
	margin-bottom:92rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
	
}
.setting-view {
	width: 100%;
	height: calc(100% - 88rpx - 92rpx - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
	.mid-view{
		width:100%;
		height:calc(100% - 88rpx);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}
	.tab-view{
		width:100%;
		height:88rpx;
		display: flex;
		flex-direction: row;
		// align-items: center;
		.tab-list{
			margin-right:32rpx;
			height:55rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.tab-line{
				width:50rpx;
				height:4rpx;
				min-height:4rpx;
				background-color: #7934F6;
			}
		}
	}
	
}
</style>