首页 > 小程序教程 > 微信小程序酒业商城输入结算银行卡信息页面设计制作开发教程

微信小程序酒业商城输入结算银行卡信息页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒业商城输入结算银行卡信息页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/mine/bankCard.wxml-->
<view class="container">
   <view class="hd-title font-color-999">我的结算银行卡</view>
   <view class="bd">
        <view class="view-list line-before-bottom ">
            <view class="list__bd">
             <view class="weui-label font-color-666">卡号</view>
               <input class="input-width font-size-36" type="idcard" bindinput="bindKeyInput" placeholder="请输入银行卡号" value="{{customerInfo.customerName}}" placeholder-class="font-color-ccc font-size-18" />
            </view>
        </view>
       <view class="view-list">
            <view class="list__bd">
                <view class="weui-label font-color-666">开户行</view>
               <input class="input-width font-size-36" bindinput="bindKeyInput" placeholder="开户行名称,如 工商银行" placeholder-class="font-color-ccc font-size-18" value="{{customerInfo.customerName}}"/>
            </view>
        </view>
   </view>
   <view class="description font-color-999">
        <text>申请积分体现后款项将会打入该账户</text>
        <text class="margin-top-20">请务必确保是您本人的银行卡,卡号真实有效</text>
   </view>

    <view class="butbox" style="margin:40rpx auto; ">
             <view bindtap="backWind" class="but bg-color-c24e4e font-color-white">保存并返回</view>
      </view>
</view>

 
二、wxss样式文件代码如下:
/* pages/mine/bankCard.wxss */
@import '/assets/styles/view-input.wxss';
.weui-label{
  width: 150rpx;
  line-height: 1;
}
 .view-list .input-width{
    padding-right: 30rpx;   
    width: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
}
.description{
    padding: 30rpx 30rpx 0;
}
三、js页面代码如下:
// pages/mine/bankCard.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  backWind(){
    wx.navigateBack();
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序酒业商城输入结算银行卡信息页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,298次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 微信模板 企业网站 微信公众平台 微信图片 微信文章 单页式简历模板 html5 微信素材 表格式简历模板
您可能会喜欢的其他模板