本文给大家带来的是微信小程序申请提现金额输入设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/salesCommission/withdraw.wxml-->
<view class="container">
<view class="view-list font-color-999" style=" background-color:transparent;">可提现金额：¥{{amount}}</view>
<view class="withdraw">
<view class="withdraw-hd font-color-c24e4e">输入提现金额：</view>
<view class="withdraw-bd">
<view class="input-box">
<input type="number" class="input" auto-focus/>
</view>
<view class="bg-color-c24e4e but" bindtap="openWin">提现</view>
</view>
<view class="withdraw-ft">
<text class="font-color-999">申请提现后，系统将在工作日的48小时内打款.</text>
<text class="font-color-999">请确保您的<text class="font-color-c24e4e">个人资料</text>中已经绑定收款银行卡</text>
</view>
</view>
<navigator url="withdrawHistory" class="view-list arrow-right margin-top-20" hover-class="weui-cell_active">
<view class="list-text font-color-333">提现记录</view>
</navigator>
</view>
|
二、wxss样式文件代码如下：
/* pages/salesCommission/withdraw.wxss */
.view-list{
display: flex;
flex-direction: row;
height: 120rpx;
padding: 0 30rpx;
align-items: center;
background-color: #fff;
color: #333333;
}
.view-list .list-text{
display: flex;
justify-content: space-between;
flex: 1;
padding-right: 36rpx;
align-items: center;
}
.withdraw{
background-color: #ffffff;
padding: 40rpx;
}
.withdraw-bd{
display:flex;
margin: 40rpx 0 30rpx;
flex-direction: row;
justify-content: space-between;
}
.withdraw-bd .input-box{
border:2rpx solid #999999;
display: flex;
align-items: center;
padding:0 30rpx;
width: 450rpx;
height: 100rpx;
box-sizing: border-box;
}
.withdraw-bd{
display: flex;
flex: 1;
}
.withdraw-bd .but{
width:200rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
color:#fefefe;
}
|
三、js页面代码如下：
// pages/salesCommission/withdraw.js
Page({
data:{
amount:null,
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
amount:350
})
},
openWin(){
wx.navigateTo({
url: 'withdrawResult'
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
