754 lines
17 KiB
Vue
754 lines
17 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="wollet">
|
||
<view class="wollet_top">
|
||
<view class="top_left">
|
||
<!-- @click="oneshow = true" -->
|
||
<u-icon name="list" color="#9e9cba" size="28" @click="showMoneyList"></u-icon>
|
||
</view>
|
||
<view class=" top_right">
|
||
<view class="top_wollet" @click="tocreatewallet">
|
||
<image src="/static/wallet.png" mode=""></image>
|
||
</view>
|
||
<view class="top_code" @click="scanCode">
|
||
<image src="/static/wallet2.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 錢包餘額 -->
|
||
<view class="balance">
|
||
<view class="balance_left">
|
||
<view class="num" v-if="showbalance">
|
||
$0
|
||
</view>
|
||
<view class="num" v-else>
|
||
****
|
||
</view>
|
||
<view class="eye" @click="changebalance">
|
||
<image :src="!showbalance ? showbalanceimg : hidebalanceimg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="balance_right">
|
||
<view class="money" style="font-size: 40rpx;">
|
||
$
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- thr -->
|
||
<view class="codelist">
|
||
<view class="codeitem" @click="accountsshowdialog">
|
||
<view class="item_image">
|
||
<image src="/static/wallet6.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item_tit">
|
||
轉賬
|
||
</view>
|
||
</view>
|
||
<view class="codeitem" @click="topaymentcode">
|
||
<view class="item_image">
|
||
<image src="/static/wallet5.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item_tit">
|
||
收款
|
||
</view>
|
||
</view>
|
||
<view class="codeitem" @click="flashexchange">
|
||
<view class="item_image">
|
||
<image src="/static/wallet4.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item_tit">
|
||
閃兌
|
||
</view>
|
||
</view>
|
||
<view class="codeitem" @click="flashexchange">
|
||
<view class="item_image">
|
||
<image src="/static/wallet3.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item_tit">
|
||
更多工具
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- cont -->
|
||
<view class="tabs">
|
||
<view class="tabs_left">
|
||
<u-tabs :list="tabslist" @click="tabs" lineColor="#4c56d6" :activeStyle="{
|
||
color: '#fff'
|
||
}"></u-tabs>
|
||
</view>
|
||
<view class="tabs_right">
|
||
<view class="search" style="width: 220rpx;">
|
||
<u-search placeholder="搜索" v-model="searchvalue" :showAction="false" height="60rpx"
|
||
bgColor="#3f3a63"></u-search>
|
||
</view>
|
||
<view class="add">
|
||
<u-icon name="plus" color="#FFF" size="14" @click="toassets"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- moneybi -->
|
||
<view class="moneylist">
|
||
<view class="moneyitem" @click="biDetail" v-for="item in 4">
|
||
<view class="item_le">
|
||
<image src="/static/wallet7.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="item_ri">
|
||
<view class="name">
|
||
<view class="">
|
||
BNB
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx;">
|
||
<text style="color: #908baf;">$0</text><text
|
||
style="color: limegreen;">+0%</text>
|
||
</view>
|
||
</view>
|
||
<view class="number">
|
||
<view class="" style="color:#fff">
|
||
0
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx;">
|
||
<text style="color: #908baf;">$0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 弹出 -->
|
||
<u-popup :show="oneshow" mode="bottom" @close="oneclose" round="10" :closeable="true"
|
||
:closeOnClickOverlay="false">
|
||
<view style="height: 950rpx;">
|
||
<view class="search">
|
||
<template v-if="!showsearch">
|
||
<u-icon name="search" color="black" size="28" @click="showsearch = true"></u-icon>
|
||
<view class="tit">
|
||
錢包列表
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="" style="width: 500rpx;">
|
||
<u-search placeholder="請輸入錢包名稱" v-model="onesearchvalue" :showAction="false" height="60rpx"
|
||
bgColor="#f6f6f6"></u-search>
|
||
</view>
|
||
<view style="margin-left: 20rpx;" @click="showsearch = false">
|
||
取消
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<!-- cont -->
|
||
<view class="onecontent">
|
||
<!-- 左邊 -->
|
||
<view class="onecont-left">
|
||
<scroll-view scroll-y="true" class="scroll-Y" style="height: 860rpx;">
|
||
<view :class="[{'onecont-leftitem':true},{'oneactive':oneactive == index}]"
|
||
v-for="(index,item) in 6" :key="index" @click="Oneclassification(index)">
|
||
<view class="oneleftimg">
|
||
<image src="/static/wallet7.png" mode="heightFix"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 右邊 -->
|
||
<view class="onecont-right">
|
||
<view class="rig-top">
|
||
<view class="rig-tit">
|
||
幣安智能鏈
|
||
</view>
|
||
<view class="rig-add" @click="show = true">
|
||
<u-icon name="plus" color="#050419" :bold="true" size="10"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- item -->
|
||
<view class="rig-cont">
|
||
<scroll-view scroll-y="true" style="height: 760rpx;">
|
||
<view class="onecont-rightitem" v-for="(item,index) in 6" :key="index"
|
||
@click="pitchon(index)">
|
||
<view class="item_ri">
|
||
<view class="name">
|
||
<view class="" style="color: #6975FF;">
|
||
hi-2
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx;">
|
||
<text
|
||
style="color: #172463;">️{{userMoneyAdressOptions(userMoneyAdress)}}</text>
|
||
<image @tap="copyAdress(userMoneyAdress)" src="/static/copy1.png"
|
||
style="width: 30rpx;height: 30rpx;margin-left: 10px;"></image>
|
||
</view>
|
||
</view>
|
||
<view class="number">
|
||
<view class="">
|
||
<!-- v-show="correctval == index" -->
|
||
<u-icon name="checkmark" color="#6975FF" size="24"
|
||
:class="{'hide':true,'show':correctval == index}"></u-icon>
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx; color:#6975FF">
|
||
1.5588 <text style="margin-left: 10rpx;">BNB</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="botmore">
|
||
<u-icon name="grid" color="#2979ff" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 二层弹框 -->
|
||
<u-popup :show="show" mode="bottom" @close="close" :closeable="true">
|
||
<view style="height: 600rpx; padding: 30rpx;">
|
||
<view style="margin-bottom: 65rpx;">選擇添加方式</view>
|
||
<view class="createwa" @click="towallet">
|
||
創建錢包
|
||
</view>
|
||
<view class="createwa" style="margin-bottom: 120rpx;">
|
||
導入錢包
|
||
</view>
|
||
<view class="createwa" @click="show = false">
|
||
關閉
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 轉賬弹框 -->
|
||
<u-popup :show="accountsshow" mode="bottom" @close="accountsclose" round="10" :closeable="true">
|
||
<view style="height: 800rpx; padding: 30rpx;">
|
||
<view class="accounts">選擇轉賬代幣</view>
|
||
<view class="search" style="width: 655rpx;">
|
||
<u-search placeholder="請輸入代幣名稱進行搜索" v-model="accountsvalue" :showAction="false" height="80rpx"
|
||
bgColor="#f6f6f6"></u-search>
|
||
</view>
|
||
<view class="accountslist">
|
||
<scroll-view scroll-y="true" style="height: 600rpx;">
|
||
<view class="accountsitem" v-for="(item,index) in 5" :key="index" @click="totransfer">
|
||
<view class="item_le">
|
||
<image src="/static/wallet7.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="item_ri">
|
||
<view class="name">
|
||
<view class="">
|
||
ETH
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx;">
|
||
<text style="color: #908baf;">$2,158.98</text><text
|
||
style="color: limegreen;">+5.17%</text>
|
||
</view>
|
||
</view>
|
||
<view class="number">
|
||
<view class="">
|
||
0
|
||
</view>
|
||
<view style="margin-top: 12rpx; font-size: 25rpx;">
|
||
<text style="color: #908baf;">= $0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabslist: [{
|
||
name: '資產',
|
||
}, {
|
||
name: 'DeFi',
|
||
}, {
|
||
name: 'NFT'
|
||
}],
|
||
searchvalue: '',
|
||
onesearchvalue: '',
|
||
showbalanceimg: "/static/eye_on.png",
|
||
hidebalanceimg: "/static/eye_off.png",
|
||
showbalance: false,
|
||
oneshow: false, // 一层
|
||
show: false, //二层
|
||
accountsshow: false,
|
||
userMoneyAdress: '0x8622572752752752752727527527FDc3675',
|
||
oneactive: 1,
|
||
correctval: 0,
|
||
showsearch: false,
|
||
accountsvalue: '' // 轉賬
|
||
};
|
||
},
|
||
methods: {
|
||
accountsshowdialog(){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
this.accountsshow = true;
|
||
},
|
||
showMoneyList(){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
this.oneshow = true;
|
||
},
|
||
biDetail(){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
},
|
||
tabs(item) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
console.log('item', item);
|
||
},
|
||
towallet() {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/createmethod'
|
||
})
|
||
this.show = false
|
||
this.oneshow = false
|
||
},
|
||
// 餘額
|
||
changebalance() {
|
||
this.showbalance = !this.showbalance
|
||
},
|
||
// 一层彈窗
|
||
oneclose() {
|
||
this.oneshow = false
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
accountsclose() {
|
||
this.accountsshow = false
|
||
},
|
||
Oneclassification(i) {
|
||
console.log("iiiiii", i)
|
||
this.oneactive = i
|
||
},
|
||
// 弹框列表
|
||
pitchon(i) {
|
||
this.correctval = i
|
||
},
|
||
userMoneyAdressOptions(data) {
|
||
let start = data.substring(0, 14);
|
||
let end = data.substring(data.length - 4);
|
||
let middle = "…";
|
||
let finalString = start + middle + end;
|
||
return finalString
|
||
},
|
||
tocreatewallet() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/choosewallet'
|
||
})
|
||
},
|
||
// 掃碼
|
||
scanCode() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
uni.scanCode({
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
}
|
||
});
|
||
},
|
||
//暫未開放
|
||
flashexchange() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
},
|
||
// 收款碼
|
||
topaymentcode() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/paymentcode'
|
||
})
|
||
},
|
||
// 資產
|
||
toassets() {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '功能暫未開放',
|
||
duration: 2000
|
||
});
|
||
return
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/assets'
|
||
})
|
||
},
|
||
// 轉賬
|
||
totransfer() {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/transfer'
|
||
})
|
||
this.accountsshow = false
|
||
},
|
||
copyAdress(adress) {
|
||
uni.setClipboardData({
|
||
data: adress,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '複製成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
border-top: 1px solid dimgrey;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(to bottom, #000033, #51599b);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.wollet {
|
||
.wollet_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.top_left {}
|
||
|
||
.top_right {
|
||
display: flex;
|
||
|
||
.top_wollet {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.top_code {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.balance {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
background: linear-gradient(to bottom, #392a94, #7c7dd5);
|
||
margin: 30rpx 0;
|
||
border-radius: 20rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.balance_left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.eye {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.codelist {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
|
||
.codeitem {
|
||
width: 145rpx;
|
||
height: 120rpx;
|
||
background-color: #392e7f;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.item_image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.tabs_right {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.add {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: #3f3a63;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.moneylist {
|
||
margin-top: 30rpx;
|
||
|
||
.moneyitem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 50rpx;
|
||
align-items: center;
|
||
|
||
.item_le {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.item_ri {
|
||
width: 540rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 2rpx solid #534a84;
|
||
|
||
.name {
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.search {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 25rpx;
|
||
|
||
.tit {
|
||
margin-left: 240rpx;
|
||
}
|
||
}
|
||
|
||
.onecontent {
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.botmore {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.onecont-left {
|
||
width: 160rpx;
|
||
background-color: #f6f6f6;
|
||
height: 860rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.onecont-leftitem {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.onecont-right {
|
||
height: 760rpx;
|
||
padding: 25rpx;
|
||
flex: 1;
|
||
|
||
.rig-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 25rpx;
|
||
|
||
.rig-add {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #323232;
|
||
}
|
||
}
|
||
|
||
.rig-cont {
|
||
.onecont-rightitem {
|
||
margin-bottom: 30rpx;
|
||
|
||
.item_ri {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #07052f;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 15rpx;
|
||
|
||
.number {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: end;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.oneleftimg {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
}
|
||
|
||
.oneactive {
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.createwa {
|
||
width: 100%;
|
||
height: 116rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #f6f6f6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.hide {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.show {
|
||
visibility: visible;
|
||
}
|
||
|
||
.accounts {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
border-bottom: 2rpx solid #f6f6f6;
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
.accountslist {
|
||
margin-top: 30rpx;
|
||
|
||
.accountsitem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 50rpx;
|
||
align-items: center;
|
||
border-bottom: 2rpx solid #f6f6f6;
|
||
padding-bottom: 20rpx;
|
||
|
||
|
||
.item_le {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.item_ri {
|
||
width: 590rpx;
|
||
height: 75rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.number {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: end;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |