首页 > 小程序教程 > 微信小程序深度保洁确认支付页面样式设计制作开发教程

微信小程序深度保洁确认支付页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序深度保洁确认支付页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
  <view class="wrap">
    <view class="top">
      <view class="server">服务类型:{{serverkind}}</view>
      <view class="server">服务地址:{{serveraddr}}</view>
      <view class="server">上门时间:{{date}} {{time}}上门</view>
      <view class="server">费用明细:玻璃面积{{area}}平米,{{sum}}元</view>
    </view>
  <view class="payall ">
    <text class="info">支付全款(包含预付款130元)</text>
    <text class="money">{{sum}}元</text>
  </view>
  <view class="message">
    <input type="text" placeholder="添加留言"/>
  </view>
  <view class="pay">
    <text class="total">{{sum}}元</text>
    <button id="payment" bindtap="pay">确认支付</button>

  </view>
  </view>
</view>
 
二、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;
}
三、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
          })
      }
    });
  }
})

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

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