122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
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>
|