<view class="wraper"> <!-- 商品订单 --> <view class="pay"> <text class="product">商品订单</text><text class="price">0.01元</text> </view> <!-- 订单详情 --> <view class="order"> <view class="">订单描述: <text>商城购物</text></view> <view>订单编号: <text>1000009201</text></view> </view> <!-- 支付方式 --> <view class="payTitle"> <text>请选择支付方式</text> </view> <view class="payType"> <view class="payList"> <view class="payImg"><image src="../../images/shouru_weixin.png"></image></view> <view>微信支付</view> </view> <view class="payList"> <view class="payImg"><image src="../../images/shouru_zhifubao.png"></image></view> <view>支付宝支付</view> </view> <view class="payList"> <view class="payImg"><image src="../../images/shouru_bank.png"></image></view> <view>银行卡支付</view> </view> </view> </view> |
/*商品支付*/ .pay{ background: #fff; width: 100%; height:90rpx; line-height: 90rpx; padding-left: 30rpx; padding-right: 30rpx; box-sizing: border-box; } .pay .product{ float: left; color: #666; } .pay .price{ float: right; color: #F00; } /*订单详情*/ .order{ margin-top: 20rpx; background: #fff; width: 100%; padding: 20rpx 0; padding-left: 30rpx; box-sizing: border-box; font-size: 34rpx; color: #666; } .order>view{ line-height: 60rpx; } .payTitle text{ line-height: 90rpx; padding-left: 30rpx; } /*支付方式*/ .payType{ width: 100%; background: #fff; } .payType>view{ height: 140rpx; line-height: 140rpx; padding: 0rpx 30rpx; border-bottom: 1rpx solid #f3f3f3; background: url(../../../images/member_list_arrow.png) no-repeat 95% center; background-size: 40rpx 40rpx; } .payType .payList>view{ float: left; } .payType .payList .payImg{ width: 60rpx; height: 60rpx; margin-right: 30rpx; padding-top: 20rpx; } .payType .payList .payImg image{ width: 100%; height: 100%; } |
Page({ data:{}, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, tosearch:function(){ wx.navigateTo({ url: '../searchProduct/searchProduct' }) } }) |
模板简介:该模板名称为【微信小程序收银台商品订单选择支付方式样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。