微信小程序配送物品详细信息支付页面设计制作开发教程

本文给大家带来的是微信小程序配送物品详细信息支付页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/mergeTrans/mergeTrans.wxml-->

<view class="area">
    <view class="left">选择配送的区域</view>
    <view class="right">
          <picker bindchange="bindAreaChange" value="{{index}}" range="{{area}}">
            <text class="country">{{area[index]}}</text>
          </picker>
          <view>
            <image src="../../images/common/Arrow-right.png" class="arrow"></image>
          </view>
    </view>
</view>

<view class="area">
    <view class="left">选择配送方式</view>
    <view class="right">
          <picker bindchange="bindMethodChange" value="{{methodindex}}" range="{{method}}">
            <text class="country">{{method[methodindex]}}</text>
          </picker>
          <view>
            <image src="../../images/common/Arrow-right.png" class="arrow"></image>
          </view>
    </view>
</view>

<view class="area address-border address-border-assit">
    <view class="sleft">
        <view class="left-on">
            <view class="person">
              收件人： <text class="word">布兰奇MA</text>
            </view>
            <view class="mobile">
              电话： <text class="word">18866880008</text> 
            </view>
        </view>
        <view class="left-under">
           收货地址：<text class="word">泰国曼安努蒂第四大街305</text>
        </view>
    </view>
    <view class="sright">
          
          <view>
            <image src="../../images/common/Arrow-right.png" class="arrow"></image>
          </view>
    </view>
</view>
<view class="area" >
    <view class="left">运单备注：</view>
    <view class="right">
          <input   placeholder="可备注一些特殊要求"  class="input" />
          <view>
            <image src="../../images/common/Arrow-right.png" class="arrow"></image>
          </view>
    </view>
</view>

<view class="area" style="margin-top:10px">
      <view class="list">
          <image src="../../images/trans/merge.png" class="mergeImg"></image>
          <text class="list-word">转运物品列表</text>
      </view>
</view>

<view class="area-column" >
    <view class="row bb">
      <view class="first">
        <view class="pid">
          包裹ID:<text class="detail">A2456</text>
        </view>
        <view class="weight">
          重量(KG):<text class="red">0.85</text>
        </view>
      </view>
      <view class="last">
        <view class="waybillnum">快递单号:<text class="detail">54643134642</text></view>
        <view class="count">x2</view>
      </view>
    </view>
    <view class="row">
      <view class="first">
        <view class="pid">
          包裹ID: <text class="detail">54565</text>
        </view>
        <view class="weight">
          重量(KG):<text class="red">0.85</text>
        </view>
      </view>
      <view class="last">
        <view class="waybillnum">快递单号:<text class="detail">54643134642</text></view>
        <view class="count">x2</view>
      </view>
    </view>
</view>
<view class="countbar">
    <view >
      <text class="count-left">共计<text class="allplus">3</text>件商品</text>总重(KG):<text class="red">1.4</text>
    </view>
</view>
<view class="area">
    <view class="left">优惠券</view>
    <view class="right">
          <text style="margin-right:10px;color:#757575"><text class="red" style="margin-right:5px">2</text>张可用</text>
          <view>
            <image src="../../images/common/Arrow-right.png" class="arrow"></image>
          </view>
    </view>
</view>
<view class="area-column">
    <view class="fee">
        <view class="feeleft">运费</view>
        <view class="feeright red">¥55.00</view>
    </view>
    <view class="fee">
        <view class="feeleft">服务费</view>
        <view class="feeright red">¥20.00</view>
    </view>
    <view class="fee">
        <view class="feeleft">报关费</view>
        <view class="feeright red">¥8.00</view>
    </view>
    <view class="fee">
        <view class="feeleft">包装费</view>
        <view class="feeright red">¥5.00</view>
    </view>
    <view class="fee">
        <view class="feeleft">优惠券减</view>
        <view class="feeright red">-¥0.00</view>
    </view>
    <view class="fee">
        <view class="feeleft">运费</view>
        <view class="feeright red">¥55.00</view>
    </view>
</view>
<view class="area">
  <view class="left">
    账户余额：¥0.00
  </view>
  <view class="right" style="color:#757575">
    合计： <text class="red">¥88.00</text>
  </view>
</view>

<view class="btn-group">
  <view class="wechat">
    <button style="background-color:#1aad19;color:#ffffff">微信支付</button>
  </view>
  <view class="rest">
    <button style="background-color:#bfbfbf;color:#fbfbfb">余额支付</button>
  </view>
</view>

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

/* pages/mergeTrans/mergeTrans.wxss */
.area{
display:flex;
justify-content:space-between;
margin:5px 0;
background-color:#ffffff;
padding:10px;
align-items:center;
/* flex-flow:column wrap; */

}
.area-column{
display:flex;
justify-content:space-between;
margin:5px 0;
background-color:#ffffff;
padding:10px;
align-items:center;
 flex-flow:column wrap; 

}

.left{
width: 40%;
color: #757575;
}
.right{
display:flex;
align-items:center;
width: 60%;
justify-content: flex-end;
color: #449ee7;
}
.sleft{
width: 90%;
color: #757575;
}
.sright{
display:flex;
align-items:center;
width: 10%;
justify-content: flex-end;
color: #449ee7;
}
.country{
margin-right: 10px;
}
.arrow{
width:14px;
height:24px;

}
.left-on{
display:flex;
justify-content:space-between;

}
.left-under{
margin-top:10px;
}
.word{

}

.input{
  margin-right:10px;
font-size:13px;
padding: 5px 10px;
}
.imgborder{
  border-bottom:10px  solid  transparent;
  border-image: url('../../images/trans/borderimg.png') 30 30 round; 
}

.list{
display:flex;
align-items:center;
}
.mergeImg{
width:18px;
height:18px
}
.list-word{
margin-left:10px;

}
.row{
display:flex;
width:100%;
color:#757575;
justify-content:space-between;
flex-flow:row wrap;
background-color:#f5f5f5;
padding:5px;

}
.detail{
  color:#b3b3b3;
}




.first{
width:100%;
display:flex;
justify-content:space-between;

}
.last{
width:100%;
display:flex;
justify-content:space-between;
margin-top:10px;

}
.bb{
  border-bottom: 1px solid #eeeeee;
}
.countbar{
  display:flex;
justify-content:flex-end;
margin:5px 0;
background-color:#ffffff;
padding:10px;
align-items:center;
}
.allplus{
  margin:0 5px;

}
.pid{

}
.count-left{
  margin-right: 20px;
}
.fee{
  color: #757575;
  display:flex;
justify-content:space-between;
flex-flow:row wrap;
width:100%;
margin:5px;
}
.btn-group{
  padding: 10px;
}
.wechat{

}
.rest{
  margin-top:10px;

}
.fee-left{

}
.fee-right{

}
.weight{

}
.red{
color: red;
}
.waybillnum{

}
.count{

}

.address-border-assit{
  border-bottom:10px solid transparent;

}
.address-border{
border-image: url('http://oetzcsmir.bkt.clouddn.com/borderimg.png') 0 0 10 0 stretch stretch;
}

三、js页面代码如下：

// pages/mergeTrans/mergeTrans.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    methodindex: 0,
    area:

    ['泰国', '中国', '英国', '美国', '意大利'],

    method: 
      ["百事汇通", "京东商城", "快捷快递", "顺丰快递", "申通E物流", "EMS快递", "圆通快递", "天天快递", "国通快递", "一店通", "申通快递", '急宅送', '全峰速运', '中国邮政'],
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  bindAreaChange: function (e) {

    this.setData({
      index: e.detail.value
    })
  },
  bindMethodChange: function (e) {

    this.setData({
      methodindex: e.detail.value
    })
  },
})

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