懒人模板制作效果图，制作好以后的效果图

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

懒人模板制作效果图，制作好以后的效果图

本文为大家带来微信小程序深度清理确认支付页面样式的设计制作开发教程。 制作完成后效果图如下：

1、wxml页面代码如下：

  
    
      服务类型：{{serverkind}}
      服务地址：{{serveraddr}}
      上门时间：{{date}} {{time}}上门
      费用明细：玻璃面积{{area}}平米,{{sum}}元
    
  
    支付全款（包含预付款130元)
    {{sum}}元
  
  
    
  
  
    {{sum}}元
    确认支付
  
  

2、wxss样式文件代码如下：

.container{
  width: 100%;
}
.wrap{
  width: 90%;
  margin: 10px auto;
}
.top{
  font-size: 14px;
  color: #666;
  border-bottom: 1rpx dotted #dadada;
  margin-bottom: 15px;
}
.server{
  margin-bottom: 15px;
}
.payall{
  font-size: 18px;
  background: url('../../images/人民币.png') no-repeat;
  background-size: 30px 30px;
  background-position: 0 30%;
  padding-left: 28px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
.payall .money{
  color: red;
  float: right;
}
.message{
  font-size: 16px;
  background: url('../../images/message.png') no-repeat;
  background-size: 26px 26px;
  background-position: 0 14%;
  padding-left: 28px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.pay{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.total{
  padding-left: 16px;
  box-sizing: border-box;
  border-top:1px solid #dadada;
  color: red;
  flex:1;
}
.pay button{
  width: 140px;
  height: 60px;
  line-height: 60px;
  background-color: #00beaf;
  color: #fff;
  border-radius: 0px;
}

3、js页面代码如下：

var app=getApp();
Page({
  data:{
    serverkind:'',
    serveraddr:'',
    date:'',
    time:'',
    area:'',
    sum:'',
  },
  pay:function(e){
    console.log(e.currentTarget.id);
    wx.setStorage({
      key:"id",
      data:e.currentTarget.id
    });
    wx.showToast({
      title: '支付成功',
      icon: 'success',
      duration: 1000,
      success: setTimeout(function(){
                    wx.switchTab({ url: '../order/index' })
                }, 1000)
    });
  },
  onShow:function(){
    let that=this;
    // 调用getStorageAPI同步数据
    wx.getStorage({
      key: 'kind',
      success:function(res){
          console.log(res.data);
          that.setData({
            serverkind:res.data
          })
      }
    });
    wx.getStorage({
      key: 'order',
      success:function(res){
          console.log(res.data);
          that.setData({
            serveraddr:res.data.addr,
            date:res.data.date,
            time:res.data.time,
            area:res.data.area,
            sum:parseInt(res.data.area)*14+130
          })
      }
    });
  }
})

模板介绍：本模板名称为【微信小程序深度清理确认支付页面风格制作制作开发教程】，大小为家政小程序制作模板，文档格式为，建议打开，图片、文字等数据作品中可以修改，请点击 选中作品中的图片并替换即可。 要修改文字，只需点击文字修改即可。 您还可以添加或修改作品中的内容。 该模板由用户共享。 如有侵权懒人模板制作效果图，制作好以后的效果图，请联系网站客服。 欢迎来到懒人模板【小程序教程】专栏寻找您需要的精美模板。

相关搜索

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等