本文给大家带来的是微信小程序饿了么支付结果失败提示页设计制作开发教程,制作好以后效果图如下:
一、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>
</view>
|
二、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;
}
|
三、js页面代码如下:
Page({
data:{
resultType:"",
resultContent:""
},
onLoad:function(options){
var resultType=options.resultType;
if(resultType=="success"){
this.setData({
resultType:"success",
resultContent:"支付成功",
url:'../../order/list/list?status=tosend'
});
}else{
this.setData({
resultType:"warn",
resultContent:"支付失败",
url:'../../order/list/list'
});
}
}
});
|