sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.虚拟币---提现 

2024.3.07 sws
master
sws 2024-03-07 18:54:13 +08:00
parent cb33a2190f
commit 9239cf0206
2 changed files with 205 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
pages/plugins/coin/withdrawal/withdrawal.css
View File

@ -0,0 +1,99 @@
/*
* 顶部
*/
.withdrawal .title {
background: radial-gradient(60% 70% at 90% 79%, rgba(33, 125, 239, 0.85) 0%, #A6C8F3 100%);
padding-top: 130rpx;
/* #ifndef H5 */
padding-top: calc(var(--status-bar-height) + 5px + 130rpx);
/* #endif */
padding-bottom: 180rpx;
}
.coin-dropdown {
--height: 48rpx;
display: inline-block;
height: var(--height);
line-height: var(--height);
padding: 0 64rpx 0 32rpx;
background: rgba(255, 255, 255, 0.23);
border-radius: 12px;
}
.coin-dropdown-icon {
right: -36rpx;
top: 2rpx;
padding: 0;
}
.withdrawal .detail {
--height: 64rpx;
height: var(--height);
line-height: var(--height);
background: rgba(255, 255, 255, 0.34);
border-radius: 200rpx 0 0 200rpx;
padding: 0 32rpx;
margin-top: 40rpx;
}
.withdrawal .text {
color: #EBF3FF;
}
/*
* 内容
*/
.withdrawal .content {
margin-top: -200rpx;
border-radius: 32rpx 32rpx 0 0;
min-height: calc(100vh - 528rpx);
/* #ifndef H5 */
min-height: calc(100vh - 528rpx - var(--status-bar-height) - 5px);
/* #endif */
}
.withdrawal .content-input-bg {
background-color: #fafafc;
}
.withdrawal .price-item {
--size: -10rpx;
margin-left: var(--size);
margin-right: var(--size);
width: calc(100% - var(--size));
}
.withdrawal .price-list {
background: #F5F7F9;
border: 2rpx solid #F5F7F9;
border-radius: 16rpx;
padding: 20rpx 0;
margin: 18rpx 10rpx;
width: calc((100% / 3) - 24rpx);
}
.withdrawal .price-img {
--size: 36rpx;
width: var(--size);
height: var(--size) !important;
}
.withdrawal .btn {
background: linear-gradient(107deg, #31B4FC 0%, #0842E2 100%);
transition: all 0.3s ease-in-out;
}
.withdrawal .btn:active {
background: linear-gradient(107deg, #FC6F31 0%, #E22C08 100%);
}
.withdrawal .content-tips .item::before {
content: '';
width: 12rpx;
height: 12rpx;
border-radius: 12rpx;
background: #30B3FC;
position: absolute;
left: 0;
top: 12rpx;
}

221
pages/plugins/coin/withdrawal/withdrawal.vue
View File

@ -1,39 +1,76 @@
<template>
<view :class="theme_view">
<component-nav-back></component-nav-back>
<view>
<view class="withdrawal">
<scroll-view :scroll-y="true" class="scroll-box" lower-threshold="60" @scroll="scroll_event">
<view class="coin-title flex-col padding-lg" :style="'background-image:url(' + wallet_static_url + 'title-bg.png)'">
<view class="margin-bottom-main flex-row jc-sb align-c margin-top-xl">
<view>
<view class="cr-base text-size-md">总数量</view>
<view class="text-size-40 fw-b">{{ is_price_show ? '5410.00' : '***' }}</view>
</view>
<view @tap="price_change">
<iconfont :name="is_price_show ? 'icon-wodeqianbao-eye' : 'icon-wodeqianbao-eyeclo2'" size="44rpx"></iconfont>
</view>
</view>
<view class="flex-row jc-sb padding-bottom-main">
<view v-for="(item, index) in coin_oprate_list" class="tc text-size-xs" :key="index" :data-value="item.url" @tap="url_event">
<view class="coin-oprate-list bg-white flex-row align-c jc-c margin-bottom-main">
<iconfont :name="item.icon" size="44rpx" color="#635BFF"></iconfont>
<view class="title flex-col padding-lg">
<view class="margin-bottom-xxxl flex-row jc-sb margin-top-xl">
<view class="cr-white">
<view class="flex-row align-e margin-bottom-main">
<picker class="coin-dropdown text-size-md pr" @change="coin_event" :value="coin_index" :range="coin_list" range-key="name">
<view class="picker pr">
<text>{{ coin_list[coin_index]['name'] }}</text>
<view class="coin-dropdown-icon pa padding-left-xxl">
<iconfont name="icon-arrow-bottom" size="24rpx" color="#fff"></iconfont>
</view>
</view>
</picker>
<view class="text-size-xs fw-b padding-left-main text">可提现金额</view>
</view>
<view class="flex-row align-e">
<view class="text-size-40 fw-b">{{ coin_num }}</view>
<view class="padding-left-sm margin-bottom-main cr-grey-d">$300.00</view>
</view>
<view>{{ item.name }}</view>
</view>
<view class="detail pa right-0 fw-b cr-white">提现明细</view>
</view>
</view>
<view class="coin-content padding-lg">
<view class="bg-white radius-lg padding-lg">
<view v-for="(item, index) in coin_data" :key="index" class="flex-row jc-sb align-c" :class="coin_data.length == index + 1 ? '' : 'br-b-f5 margin-bottom-lg padding-bottom-lg'">
<view class="flex-1 flex-width flex-row align-c padding-right-main">
<image :src="item.img" mode="widthFix" class="coin-content-list-img round" />
<text class="fw-b single-text margin-left-main">{{ item.name }}</text>
<view class="content padding-main">
<view class="padding-xxxl bg-white radius-md">
<view class="margin-bottom-xxxl">
<view class="margin-bottom-main fw-b">提现数量</view>
<view class="padding-vertical-main br-b-e flex-row align-c">
<input type="digit" :value="input_coin_num" class="flex-1 flex-width" placeholder-class="text-size-sm cr-grey-9" placeholder="请输入" />
<view @tap.stop="all_withdrawal_event">全部提现</view>
</view>
<view class="flex-col">
<view class="margin-bottom-xss">{{ item.num }}</view>
<view class="cr-grey-9">{{ item.price }}</view>
</view>
<view class="margin-bottom-xxxl">
<view class="margin-bottom-main">提币地址</view>
<view class="recharge-content-input-bg padding-main border-radius-sm flex-row align-c">
<view class="single-text padding-right-sm flex-1 flex-width">4gfgefg33445fghfghh4bfbfghebdfb34fgdfg44gfgefg33445fghfghh4bfbfghebdfb34fgdfg4</view>
<view @tap.stop="text_copy_event">
<iconfont name="icon-copy" size="24rpx" color="#999"></iconfont>
</view>
</view>
</view>
<view class="margin-bottom-xxxl">
<view class="margin-bottom-main">提币网络</view>
<picker class="content-input-bg padding-main margin-bottom-main border-radius-sm" @change="withdrawal_event" :value="withdrawal_web_index" :range="withdrawal_web_list" range-key="name">
<view class="picker arrow-bottom">
{{ withdrawal_web_list[withdrawal_web_index]['name'] }}
</view>
</picker>
<input type="text" class="" placeholder-class="text-size-sm cr-grey-9" placeholder="请输入提现备注信息" />
</view>
<view class="margin-bottom-xxxl">
<view class="margin-bottom-xs">选择充值金额</view>
<view class="flex-row flex-warp price-item margin-bottom-xs">
<view v-for="(item, index) in withdrawal_price_list" :key="index" class="price-list flex-col align-c jc-c">
<view class="flex-row align-c jc-c">
<image :src="wallet_static_url + 'withdrawal-price.png'" mode="widthFix" class="price-img round" />
<view>{{ item.name }}</view>
</view>
<view>{{ item.price }}</view>
</view>
</view>
<view class="content-input-bg padding-main border-radius-sm flex-row align-c margin-bottom-xxl">
<text>其他数量</text>
<view class="padding-left-lg">
<input type="digit" class="" placeholder-class="text-size-sm cr-grey-9" placeholder="请输入充值数量" />
</view>
</view>
<button type="default" class="withdrawal-btn cr-white round" @tap="popup_goods_search_event">立即充值</button>
</view>
</view>
</view>
</scroll-view>
@ -57,109 +94,51 @@
wallet_static_url: wallet_static_url,
status_bar_height: bar_height,
// 是否显示虚拟币
is_price_show: false,
// 虚拟币操作列表
coin_oprate_list: [
// 虚拟币
coin_num: 38000,
input_coin_num: 0,
// 虚拟币状态
coin_index: 0,
coin_list: [
{
name: '充值',
icon: 'icon-recharge',
url: '/pages/plugins/coin/recharge/recharge',
name: 'BTC',
},
{
name: '转换',
icon: 'icon-convert',
url: '/pages/plugins/coin/convert/convert',
},
{
name: '提现',
icon: 'icon-withdrawal',
url: '/pages/plugins/coin/withdrawal/withdrawal',
},
{
name: '明细',
icon: 'icon-detail',
url: '/pages/plugins/coin/detail/detail',
name: 'USDT-polygon',
},
],
coin_data: [
// 充币网络
withdrawal_web_index: 0,
withdrawal_web_list: [
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
name: 'USDT-polygon',
},
],
// 充值金额
withdrawal_price_list: [
{
name: '100',
price: '100',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
name: '400',
price: '400',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
name: '400',
price: '400',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
name: '400',
price: '400',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
name: '400',
price: '400',
},
],
};
@ -209,8 +188,18 @@
// 显示隐藏虚拟币
price_change() {
this.setData({});
},
// 虚拟币切换
coin_event(e) {
this.setData({
is_price_show: !this.is_price_show,
coin_index: parseInt(e.detail.value || 0),
});
},
// 充币网络切换
withdrawal_event(e) {
this.setData({
withdrawal_web_index: parseInt(e.detail.value || 0),
});
},
// 页面滚动监听
@ -218,9 +207,11 @@
uni.$emit('onPageScroll', e.detail);
},
// url事件
url_event(e) {
app.globalData.url_event(e);
// 全部提现
all_withdrawal_event(e) {
this.setData({
input_coin_num: this.coin_num,
});
},
},
};