Onlife/pages/wallet/paymentcode.vue
2025-04-19 15:38:48 +08:00

178 lines
3.3 KiB
Vue

<template>
<view class="container">
<view class="pamentcode">
<view class="p_top">
<u-icon name="error" color="#EAA97D" size="18"></u-icon>
<view class="tit">
僅向該地址轉入ETH/ERC20相關資產
</view>
</view>
<!-- 收款碼 -->
<view class="p_code">
<view class="towcode">
<image src="/static/code.png" mode=""></image>
</view>
</view>
<!-- 地址 -->
<view class="p_address">
<view class="addresstit">
收款地址
</view>
<view class="address">
{{Adress}}
</view>
</view>
<!-- 複製 -->
<view class="p_copy">
<view class="share" @click="share">
<u-icon name="share-square" color="#626262" size="26"></u-icon>
<view class="">
分享
</view>
</view>
<view class="share" @tap="copyAdress(Adress)">
<view class="img" style="width: 40rpx;height: 40rpx; margin-right: 5rpx;">
<image src="/static/copy2.png"></image>
</view>
<view class="">
複製
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
Adress: 'jlkadjfljf63416461464131312312'
};
},
methods: {
share() {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: "/static/code.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
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%;
}
.pamentcode {
width: 100%;
height: 900rpx;
background-color: #fff;
border-radius: 30rpx;
padding: 20rpx;
box-sizing: border-box;
.p_top {
display: flex;
align-items: center;
justify-content: center;
background-color: #fdf7f2;
width: 100%;
height: 80rpx;
font-size: 28rpx;
border-radius: 20rpx;
.tit {
color: #EAA97D;
}
}
.p_code {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 60rpx 0;
.towcode {
width: 350rpx;
height: 350rpx;
}
}
.p_address {
width: 100%;
height: 210rpx;
background-color: #f7f7f7;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30rpx;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.addresstit {
color: #BCBCBD;
margin-bottom: 20rpx;
}
.address {
width: 600rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.p_copy {
display: flex;
padding: 0 60rpx;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
.share {
width: 240rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>