微信小程序实战之 pay(支付页面)
2018-01-26 08:52
357 查看
项目目录:
逻辑层:
pay.js
页面布局:
pay.wxml
样式:
pay.wxss
效果图:
逻辑层:
pay.js
// pages/pay/pay.js Page({ /** * 页面的初始数据 */ data: { resultType: "", resultContent: "", url:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var resultType = options.resultType; if (resultType == "success") { this.setData({ resultType: "success", resultContent: "支付成功", url: '../list/list?status=tosend' }); } else { this.setData({ resultType: "warn", resultContent: "支付失败", url: '../list/list' }); } } })
页面布局:
pay.wxml
<!--pages/pay/pay.wxml--> <view class="result_contain"> <view class="result_img"> <icon type="{{resultType}}" size="72"></icon> </view> <view class="result_content">{{resultContent}}</view> <navigator url="{{url}}"> <text class="result_to_order" >查看订单</text> </navigator> <navigator url="../goods/goods"> <text class="result_to_order" >返回上一页</text> </navigator> </view>
样式:
pay.wxss
/* pages/pay/pay.wxss */ .result_contain{ padding:25% 0; height:50%; } .result_img{ text-align:center; } .result_content{ text-align: center; font-size: 16px; padding:10px; } .result_to_order{ display:block; background-color:#69C3AA; color:#FFF; border-radius:3px; width:50%; text-align:center; margin:20px auto; padding:10px; }
效果图:
相关文章推荐
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- webview打开微信支付,web view h5页面中调用小程序支付——小程序web-view高级用法11
- 实战:微信小程序支付开发具体流程
- 微信小程序支付签名失败,错误的解决方法,小程序支付签名paySign开发demo
- 微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定
- 实战:微信小程序支付开发具体流程
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
- 微信小程序实战(二)---实现搜索页面
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
- 微信小程序支付组件开发实战
- 微信小程序实战(二)---实现搜索页面
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作
- 微信小程序实战之登录页面制作(5)
- Laravel 微信小程序支付
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件