ui设计-1

ui设计-2.png

<template>

    <view class="layout">
        <view class="withdrawal-title container">
            <text>提现</text>
        </view>
        <!-- 扣除手续费提示 -->
        <view class="service-fee container">
            <text>每笔扣除{{serviceFee}}元手续费</text>
        </view>
        <view class="withdrawal container">
            <!-- 提现金额 -->
            <view class="withdrawal-money flex ">
                <text>￥</text>
                <input v-model="moneyInput" class="u-margin-left-32" placeholder="请输入提现金额" type="digit" placeholder-style="color:#E2E4EA;"
                 @input="checkPrice" />
            </view>
            <!-- 剩余金额 -->
            <view class="balance">
                <text>剩余金额{{balance}}元</text>
            </view>
        </view>
        <view class="withdrawal-bank flex container" @click="openPopupBank">
            <image src="../../../static/images/bank_logo@3x.png" mode=""></image>
            <view class="card-info flex u-margin-left-32">
                <text class="bank-name">{{bankName}}(尾号{{lastFourNum}})</text>
                <text class="quota">单笔限额10000元,单日限额10000元</text>
            </view>
            <u-icon name="arrow-right"></u-icon>
        </view>
        <view class="container submit">
            <u-button type="primary" @click="inputPwd" :disabled="moneyInput ==0 ||  checked == false || defaultBank.length ==0 ">确定</u-button>
        </view>
        <!-- 需要阅读的提示 -->
        <view class="tips flex container">
            <u-checkbox-group>
                <u-checkbox @change="!checkboxChange" v-model="checked" shape="circle">
                    <text>我已阅读并同意签署</text>
                    <u-link>《平台协议》《借款协议》《委托协议》</u-link>
                </u-checkbox>
            </u-checkbox-group>
        </view>

        <!-- 底部弹出的选择银行卡选项 -->
        <uni-popup ref="popup" type="bottom">
            <view class="choose-card">
                <view class="choose-title flex choose-card-padding">
                    <text>选择支付类型</text>
                    <u-icon name="close" size="28" @click="bankClose"></u-icon>
                </view>
                <view class="choose-bank-card flex choose-card-padding" v-for="(item,index) in bankList" :key="index" @click="chooseBank(item,index)">
                    <image src="../../../static/images/bank_logo@3x.png" mode=""></image>
                    <view class="card-info flex u-margin-left-32">
                        <text class="bank-name">{{item.bank_name}}(尾号{{item.bank_number.substr(item.bank_number.length-4, item.bank_number.length)}})</text>
                        <text class="quota">单笔限额10000元,单日限额10000元</text>
                    </view>
                    <u-icon v-if="currentIndex == index" name="checkmark" color="#007AFF"></u-icon>
                    <view class="border-bottom">
                    </view>
                </view>
                <view class="choose-bank-card flex choose-card-padding" @click="addNewCard">
                    <image src="../../../static/images/defualt-bank.png" mode=""></image>
                    <view class="card-info flex u-margin-left-32">
                        <text class="bank-name">使用新卡支付</text>
                    </view>
                </view>
                <view class="other">
                </view>
            </view>
        </uni-popup>
        <!-- 点击确定提现输入密码弹窗 -->
 
        <view class="pwdpopup">
            <u-keyboard :mask="true" ref="uKeyboard" :random="random" :dotEnable="false" mode="number" :tooltip="tooltip"
             v-model="show" @change="change" :mask-close-able="false" @backspace="backspace" :dot-enabled="false">
             <u-popup v-model="show" mode="center" closeable close-icon="close" close-icon-pos="top-right" length="80%" @close="close"
              :mask="false" :mask-close-able="false" border-radius="4" class="pwd-popup" negative-top="300" z-index="1000">
                <view class="popuppwd-style" style="height: 395upx">
                    <view class="flex flex-column-center">
                        <text class="withdrawal-input-money">提现{{withdrawal}}元</text>
                        <text class="withdrawal-input-pwd">输入提现密码</text>
                    </view>
                    <view class="input-password u-margin-top-60">
                        <u-toast ref="uToast"></u-toast>
                        <u-message-input :maxlength="6" :value="pwdvalue" mode="bottomLine" :breathe="true" :focus="true" @finish="finish"></u-message-input>
                    </view>
                </view>
             </u-popup>
            </u-keyboard>
        </view>
    </view>



</template>

<script>
    import Https from '../../../api/http.js'
    export default {

        data() {
            return {
                checked: false,
                keyshow: false,
                show: false,
                pwdvalue: '',
                showKeyboard: false,
                maskinput: false,
                // mask: true,
                moneyInput: '',
                // 默认选中银行信息
                defaultBank: {},
                balance: '',
                bankName: '',
                lastFourNum: '',
                serviceFee: '',
                bankList: [],
                currentIndex: '',
                userInfo: {},
                withdrawal: ''
            }
        },
        onLoad() {
            this.withDrawInfo()
        },
        onShow() {
            this.userInfo = this.$store.state.userInfo
        },
        methods: {
            async withDrawInfo() {
                let res = await Https.withDrawInfo()
                this.defaultBank = res.data.one_bank
                this.balance = res.data.money
                this.serviceFee = res.data.withDrawFee
                this.bankName = this.defaultBank.bank_name
                this.lastFourNum = this.defaultBank.bank_number.substr(this.defaultBank.bank_number.length - 4, this.defaultBank.bank_number
                    .length)
            },
            // 输入完密码验证
            finish() {
                Https.userWithdraw({
                    user_id: this.userInfo.id,
                    password: this.pwdvalue,
                    bank_card_id: this.defaultBank.ids,
                    amount: this.moneyInput,
                    vv_time: parseInt(new Date().getTime() / 1000)
                }).then(res2 => {
                    console.log(res2)
                    if (res2.flag == 1) {
                        uni.showToast({
                            title: '银行卡提现成功',
                            icon: 'success',
                            duration: 2000
                        })
                        this.show = false
                        uni.navigateTo({
                            url: '../submit/index?withdrawMoney=' + this.moneyInput + '&serviceFee=' + this.serviceFee + '&bankName=' +
                                this.bankName + '&lastFourNum=' + this.lastFourNum
                        })
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res2.msg,
                            duration: 2000
                        })
                        this.pwdvalue = ''
                        this.show = false
                    }
                })
            },
            // 键盘输入
            change(input) {
                if (this.pwdvalue.length < 6) {
                    this.pwdvalue += input;
                }
                if (this.pwdvalue.length == 6) {
                    this.finish();
                }
            },
            //验证input价格输入框输入内容

            checkPrice: function(e) {
                let that = this;
                let price = e.detail.value
                if (price.indexOf(".") < 0 && price != "") {
                    price = parseFloat(price);

                } else if (price.indexOf(".") == 0) {
                    //'首位小数点情况'
                    price = price.replace(/[^$#$]/g, "0.");
                    price = price.replace(/\.{2,}/g, ".");
                } else if (!(/^(\d?)+(\.\d{0,2})?$/.test(price))) {
                    //去掉最后一位
                    price = price.substring(0, price.length - 1)
                }
                that.$nextTick(function() {
                    that.moneyInput = price
                })
            },
            // 点击键盘回退
            backspace() {
                if (this.pwdvalue.length) this.pwdvalue = this.pwdvalue.substr(0, this.pwdvalue.length - 1);
            },
            backspaceInput() {
                if (this.moneyInput.length) this.moneyInput = this.moneyInput.substr(0, this.moneyInput.length - 1);
            },
            checkboxChange() {
                this.checked = true
            },
            async openPopupBank() {
                this.$refs.popup.open()
                let res1 = await Https.myBankList()
                if (res1.flag == 1) {
                    this.bankList = res1.data.list
                }
            },
            chooseBank(item, index) {
                this.currentIndex = index
                this.defaultBank = item
                this.$refs.popup.close()
                this.bankName = this.defaultBank.bank_name
                this.lastFourNum = this.defaultBank.bank_number.substr(this.defaultBank.bank_number.length - 4, this.defaultBank
                    .bank_number
                    .length)
            },
            bankClose() {
                this.$refs.popup.close()
            },
            // 点击确定提取money
            inputPwd() {
                console.log(this.moneyInput)
                console.log(this.balance)
                if (parseInt(this.moneyInput) > parseInt(this.balance)) {
                    uni.showToast({
                        icon: 'none',
                        title: '超出提现余额，不能提现'
                    })
                    return
                } else {
                    this.withdrawal = this.moneyInput
                    this.show = true
                    this.pwdvalue = ''
                    // this.$refs.popuppwd.open()
                }

            },
            close() {
                this.show = false
            },
            addNewCard() {
                uni.navigateTo({
                    url: '../addCards/index'
                })
            }
            // tap(){
            //  console.log(111)
            //  this.show = true
            // }
        }




    };
</script>

<style lang="scss" scoped>
    @import "../../../assets/css/common.scss";

    .container {
        padding: 0 40upx;
    }

    .layout {
        background-color: $theme-bg-color;
        height: 1536upx;

        .withdrawal-title {
            height: 120upx;
            line-height: 120upx;
            background-color: $theme-words-color;

            text {
                font-size: $theme-f52;
                font-weight: 600;
                color: $theme-title-color;
            }
        }

        .service-fee {

            height: 76upx;
            line-height: 76upx;

            text {
                font-size: $theme-f24;
                color: $theme-info-color;
            }
        }

        .withdrawal {
            background: $theme-words-color;

            .withdrawal-money {
                height: 160upx;
                font-size: $theme-f44;
                align-items: center;
            }

            .balance {
                height: 76upx;
                font-size: $theme-f24;
                color: $theme-text-color;
                line-height: 76upx;
                border-top: 1px solid $theme-border-color;
            }
        }

        .withdrawal-bank {
            height: 140upx;
            margin-top: 20upx;
            background: $theme-words-color;
            align-items: center;

            image {
                width: 60upx;
                height: 60upx;
            }

            .card-info {
                flex-direction: column;

                .bank-name {
                    font-size: $theme-f32;
                    color: $theme-title-color;
                    margin-bottom: 4upx;
                }

                .quota {
                    font-size: $theme-f24;
                    color: $theme-text-color;
                }
            }

            u-icon {
                position: absolute;
                right: 40upx;
                color: $theme-tip-color;
            }
        }

        .submit {
            margin: 40upx 0;
        }

        .tips {
            .u-checkbox__icon.u-checkbox__icon--circle {
                margin-right: 20upx;
            }

            text {
                color: $theme-text-color;

            }
        }

        .choose-card-padding {
            padding: 0 32upx;
            height: 140upx;
        }

        .choose-card {

            background-color: $theme-bg-color;
            color: #333333;

            .choose-title {
                line-height: 140upx;
                font-size: $theme-f36;
                justify-content: center;


                u-icon {
                    position: absolute;
                    right: 32upx;
                    top: 52upx;
                }
            }

            .choose-bank-card {
                position: relative;
                background: $theme-words-color;
                align-items: center;

                .border-bottom:after {
                    content: '';
                    position: absolute;
                    left: 124upx;
                    top: auto;
                    bottom: 0;
                    right: auto;
                    height: 2upx;
                    width: 100%;
                    background-color: $theme-border-color;
                }

                image {
                    width: 60upx;
                    height: 60upx;
                }

                .card-info {
                    flex-direction: column;

                    .bank-name {
                        font-size: $theme-f32;
                        color: $theme-title-color;
                        margin-bottom: 4upx;
                    }

                    .quota {
                        font-size: $theme-f24;
                        color: $theme-text-color;
                    }
                }

                u-icon {
                    position: absolute;
                    right: 40upx;

                }
            }


            .other {
                height: 250upx;
            }
        }

        .popuppwd-style {
            padding-top: 30upx;

            .withdrawal-input-money {
                font-size: $theme-f40;
                color: $theme-title-color;
            }

            .withdrawal-input-pwd {
                margin-top: 20upx;
                font-size: $theme-f28;
                color: $theme-text-color;
            }
        }
    }
</style>