diancan_uni/pages/shopRole/cashout/index.vue

<template>
    <view class="container">
        <view class="money">
            <text class="title">账户余额</text>
            <text class="cash">
                <text class="cash_tag">¥</text>
                <text class="cash_num">{{ info.money }}</text>
            </text>
            <!-- 小圆圈 -->
            <view class="square"></view>
        </view>
        <!-- 弧度背景 -->
        <image class="bg" src="/static/statics/img/user/bg.png"></image>
        <!-- 提现金额 -->
        <view class="recharge_wrap">
            <view class="recharge_title">提现金额</view>
            <van-field :value="money" placeholder="请输入提现金额" :border="false" class="field" @input="getChargeMoney" />
        </view>
        <!-- 充值 -->
        <view class="actions">
            <view class="logout" @tap="nextFun">立即提现</view>
        </view>
    </view>
</template>

<script>
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            info: null,
            money: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
        that.getShopInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        /**
         * 用户点击右上角分享
         */
        // 获取个人信息
        getShopInfo() {
            let that = this;
            myPro
                .wxRequest('store/info', 'GET', {})
                .then((res) => {
                    that.setData({
                        info: res.result
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 获取输入金额
        getChargeMoney(event) {
            // console.log(event)
            let that = this;
            that.setData({
                money: event.detail
            });
        },

        // 提现
        nextFun() {
            let that = this;

            if (!that.money) {
                uni.showToast({
                    title: '请输入提现金额',
                    icon: 'none'
                });
                return;
            }

            let params = {
                money: parseFloat(that.money)
            };
            myPro
                .wxRequest('store/tx/apply', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.goCashOutLog();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 进入提现列表
        goCashOutLog() {
            uni.navigateTo({
                url: '/pages/shopRole/cashoutlog/index?status=0'
            });
        }
    }
};
</script>
<style>
/* pages/recharge/index.wxss */
/* 余额 */
.money {
    /* padding-top: 72rpx;
	text-align: center; */
    width: 100vw;
    height: 154rpx;
    background: #295c56;
    position: relative;
    text-align: center;
    color: #ffffff;
}
.money .title {
    font-size: 26rpx;
    /* color:rgba(51,51,51,1); */
}
.cash {
    padding-left: 20rpx;
    font-size: 48rpx;
    /* color:rgba(213,76,67,1); */
}
.cash .cash_tag {
    font-size: 30rpx;
}
.cash .cash_num {
    padding-left: 4rpx;
}
/* 下一步 */
.actions {
    /* position: fixed;
	bottom: 48rpx;
	width: 100vw; */
    width: 100vw;
}
.actions .logout {
    width: 690rpx;
    height: 90rpx;
    background: #295c56;
    border-radius: 45rpx;
    margin: 0 auto;
    font-size: 34rpx;
    color: #ffffff;
    text-align: center;
    line-height: 90rpx;
}
/* 背景上的弧度 */
.bg {
    width: 750rpx;
    height: 34rpx;
    display: block;
}
.square {
    content: '';
    display: block;
    width: 26rpx;
    height: 26rpx;
    background: rgba(255, 255, 255, 1);
    opacity: 0.1;
    border-radius: 50%;
    position: absolute;
    bottom: 120rpx;
    right: 120rpx;
}
/* 提现 */
.recharge_wrap {
    width: 690rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(0, 0, 0, 0.09);
    border-radius: 10rpx;
    position: relative;
    left: 50%;
    top: -60rpx;
    transform: translateX(-50%);
    padding: 50rpx 30rpx;
}
.recharge_title {
    font-size: 36rpx;
    color: rgba(51, 51, 51, 1);
    text-align: center;
}
.recharge {
    padding-top: 12rpx;
}
.recharge .card {
    width: 200rpx;
    height: 122rpx;
    background: rgba(255, 255, 255, 1);
    border: 1rpx solid rgba(233, 233, 233, 1);
    border-radius: 5rpx;
    margin-top: 18rpx;
    margin-right: 15rpx;
    font-size: 36rpx;
    color: rgba(213, 76, 67, 1);
    text-align: center;
    line-height: 122rpx;
}
.recharge .card:nth-of-type(3n) {
    margin-right: 0;
}
.recharge .card.active {
    background: rgba(255, 244, 244, 1);
    border: 1rpx solid rgba(255, 113, 113, 1);
}
/* 选择门店 */
.selecteShop_nr {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}
.selecteShop_nr .text {
    font-size: 28rpx;
}
/* 提现金额 */
.recharge_wrap .van-cell {
    padding: 10rpx 0 !important;
    line-height: normal !important;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
.recharge_wrap .van-field__body {
    font-size: 30rpx;
    padding-top: 30rpx;
}
</style>