From 9239cf020634f700f4bf977c44a1a45fa16e053b Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 7 Mar 2024 18:54:13 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=99=9A=E6=8B=9F=E5=B8=81---=E6=8F=90?=
 =?UTF-8?q?=E7=8E=B0=202024.3.07=20sws?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/plugins/coin/withdrawal/withdrawal.css |  99 +++++++++
 pages/plugins/coin/withdrawal/withdrawal.vue | 221 +++++++++----------
 2 files changed, 205 insertions(+), 115 deletions(-)

diff --git a/pages/plugins/coin/withdrawal/withdrawal.css b/pages/plugins/coin/withdrawal/withdrawal.css
index e69de29b..bcbd49a8 100644
--- a/pages/plugins/coin/withdrawal/withdrawal.css
+++ b/pages/plugins/coin/withdrawal/withdrawal.css
@@ -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;
+}
\ No newline at end of file
diff --git a/pages/plugins/coin/withdrawal/withdrawal.vue b/pages/plugins/coin/withdrawal/withdrawal.vue
index c5053291..266aa416 100644
--- a/pages/plugins/coin/withdrawal/withdrawal.vue
+++ b/pages/plugins/coin/withdrawal/withdrawal.vue
@@ -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,
+                });
             },
         },
     };