122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="shop-item-view" v-if="dataItem">
|
|||
|
|
<image src="/static/new/alpha.png" v-if="dataItem.name != 'WALLET'"></image>
|
|||
|
|
<image src="/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>
|