frontend-app/pages/rwa_package/account/components/account-item-two.vue

<template>
	<view class="shop-item-view" v-if="dataItem">
		<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/alpha.png" v-if="dataItem.name != 'WALLET'"></image>
		<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/no_black_data.png" v-else></image>
		<view class="shop-mid-view-one" v-if="dataItem.name != 'WALLET'">
			<text class="text-32 text-zu1 text-overflow">{{dataItem.account}}</text>
		</view>
		<view class="shop-mid-view" v-else>
			<text class="text-32 text-zu1 text-overflow">BNB Smart Chain（BEP20）</text>
			<text class="text-32 text-fu1 text-overflow">{{address}}</text>
		</view>
		<view class="biao-view">
			<text class="text-20 text-zi" style="line-height: 1.2;">{{dataItem.name != 'WALLET' ? 'Alpha账户' : '区块链账户'}}</text>
		</view>
		<view class="jie-bind" @click="onJie">
			<text class="text-zu1 text-24">解绑</text>
		</view>
	</view>
</template>

<script>
	
	import func from '@/utils/func.js';
	export default {
		props:{
			dataItem:{
				type:Object,
				default:null
			},
			
		},
		computed:{
			address(){
				let tmp = '';
				console.log('this.data',this.dataItem)
				if(this.dataItem && this.dataItem.name == 'WALLET'){
					this.dataItem.address = func.addressTurn(this.dataItem.account,6);
					tmp = this.dataItem.address;
				}
				return tmp;
			}
		},
		mounted(){
		},
		methods: {
			onJie(){
				this.$emit('jie',this.dataItem);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-item-view{
		width:100%;
		min-height:152rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 32rpx 28rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #fff;
		margin-top:24rpx;
		border:2rpx solid #e3e3e3;
		.jie-bind{
			height:48rpx;
			width:112rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius:24rpx;
			position: absolute;
			right:32rpx;
			bottom:24rpx;
			background-color: #F3F3F3;
		}
		.biao-view{
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height:36rpx;
			min-height:36rpx;
			position: absolute;
			border-radius: 0px  12rpx  0px  12rpx;
			top:0;
			right:0;
			background-color: #F2EBFE;
			
		}
		
		.shop-mid-view{
			margin:0 24rpx;
			display: flex;
			flex:1;
			height:88rpx;
			min-height:88rpx;
			flex-direction: column;
			justify-content: space-between;
		}
		.shop-mid-view-one{
			margin:0 24rpx;
			display: flex;
			flex:1;
			height:88rpx;
			min-height:88rpx;
			flex-direction: column;
			justify-content: center;
		}
		image{
			width:88rpx;
			min-width:88rpx;
			height:88rpx;
		}
		
	}
	
</style>