<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>

.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;
}

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
          })
      }
    });
  }
})