Onlife/pages/wallet/index.vue

754 lines
17 KiB
Vue
Raw Permalink Normal View History

2025-04-19 15:38:48 +08:00
<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>