微信小程序代付款订单输入备注页面样式设计制作开发教程

本文给大家带来的是微信小程序代付款订单输入备注页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
     <form bindsubmit="createOrder" report-submit="true">
     <view class="address-box" wx:if="{{isNeedLogistics > 0}}">
        <view class="add-address" hidden="{{curAddressData}}">
            <view class="title" bindtap="addAddress">新增收货地址</view>
        </view>
        <view class="show-address" hidden="{{!curAddressData}}" bindtap="selectAddress">
            <view class="name-tel">{{curAddressData.linkMan}}  {{curAddressData.mobile}}</view>
            <view class="addr-text">{{curAddressData.address}}</view>
        </view>
     </view>
     <view class="goods-list">
        <view class="list-title">商品列表</view>
        <view class="a-goods" wx:for-items="{{goodsList}}" wx:key="{{index}}">
            <view class="img-box">
                <image src="{{item.pic}}" class="img" />
            </view>
            <view class="text-box">
                <view class="arow arow01">
                    <view class="goods-name">{{item.name}}</view>
                    <view class="goods-price">¥ {{item.price}}</view>
                </view>
                <view class="arow">
                    <view class="goods-label">{{item.label}}</view>
                    <view class="goods-num">x {{item.number}}</view>
                </view>
            </view>
        </view>
     </view>
     <view class="peisong-way">
        <view class="row-box" wx:if="{{isNeedLogistics > 0}}">
            <view class="row-label">配送方式</view>
            <view class="right-text" wx:if="{{yunPrice > 0}}">快递</view>
            <view class="right-text" wx:if="{{yunPrice == 0}}">包邮</view>
        </view>
        <view class="row-box">
            <view class="row-label">备注</view>
            <view class="right-text">
                <input name="remark" type="text" class="liuyan" placeholder="如需备注请输入" />
            </view>
        </view>
     </view>
     <view class="peisong-way" hidden="{{hasNoCoupons}}">
        <view class="row-box" style="border-bottom:none;">
            <view class="row-label">选择使用优惠券</view>
        </view>
        <view class="row-box" style="border-bottom:none;">
          <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 150rpx;" value="0" bindchange="bindChangeCoupon">
            <picker-view-column>
              <view style="line-height: 50px">不使用优惠券</view>
              <view wx:for="{{coupons}}" wx:key="id" style="line-height: 50px">{{item.money}}元 {{item.name}}</view>
            </picker-view-column>
          </picker-view>
        </view>
     </view>
     <view class="goods-info">
        <view class="row-box" wx:if="{{isNeedLogistics > 0 && yunPrice > 0}}">
            <view class="row-label">商品金额</view>
            <view class="right-text">¥ {{allGoodsPrice}}</view>
        </view>
        <view class="row-box" wx:if="{{isNeedLogistics > 0 && yunPrice > 0}}">
            <view class="row-label">运费</view>
            <view class="right-text">+ ¥ {{yunPrice}}</view>
        </view>
        <view class="row-box" wx:if="{{!hasNoCoupons}}">
            <view class="row-label">优惠券</view>
            <view class="right-text">- ¥ {{youhuijine}}</view>
        </view>
     </view>
     <view class="jiesuan-box">
        <view class="left-price">
            <view class="total">合计：¥ {{allGoodsAndYunPrice - youhuijine}}</view>
        </view>
        <button class="to-pay-btn" formType="submit">提交订单</button>
    </view>
    </form>
</view>

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

.container{
    background-color:#F2f2f2;
}
.address-box{
    width: 100%;
    background: url(https://cdn.it120.cc/images/weappshop/arrow-right.png) no-repeat 705rpx center ,
                url(https://cdn.it120.cc/images/weappshop/addr-line.png) no-repeat center bottom;
    background-size: 16rpx auto,750rpx auto;
    background-color: #fff;
    margin: 20rpx 0; 
}
.add-addres{
    width: 100%;
}
.add-address .title{
    font-size: 28rpx;
    color: #000;
    margin-left: 30rpx;
    background: url(https://cdn.it120.cc/images/weappshop/ico-add-addr.png) no-repeat left center;
    background-size: 60rpx auto;
    padding: 40rpx 0 40rpx 90rpx; 
}
.show-address{
    width: 664rpx;
    box-sizing: border-box;
    padding-left: 100rpx;
    background: url(https://cdn.it120.cc/images/weappshop/ico-addr.png) no-repeat 30rpx 35rpx;
    background-size: 30rpx auto;
}
.show-address .name-tel{
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0 20rpx 0;
}
.show-address .addr-text{
    font-size: 24rpx;
    color: #888;
    padding-bottom: 34rpx;
    line-height: 36rpx;
}
form{
    width: 100%;
}
.goods-list{
    width:100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}
.goods-list .list-title{
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0 25rpx 30rpx;
}
.goods-list  .a-goods{
    width: 720rpx;
    margin-left: 30rpx;
    display: flex;
    /*justify-content: space-between;*/
    border-top: 1px solid #eee;
    padding: 30rpx 30rpx 30rpx 0;
}
.goods-list  .a-goods .img-box{
    width: 160rpx;
    height:160rpx;
    overflow: hidden;
    margin-right: 20rpx;
    background-color: #d8d8d8;
}

.goods-list .img-box .img{
    width: 160rpx;
    height:160rpx;
}
.goods-list  .a-goods .text-box{
    width: 510rpx;
    box-sizing: border-box;
    padding-top: 10rpx;
}
.a-goods .text-box .arow{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
.a-goods .text-box .arow .goods-name{
     width: 360rpx;
     font-size:26rpx;
     height: 74rpx;
     color:#000000;
     line-height: 1.6;
     overflow: hidden;
 }
.a-goods .text-box .arow01{
    margin-bottom: 30rpx;
}
.a-goods .text-box .arow .goods-price{
    font-size:26rpx;
    color:#000000;
    align-self: flex-start;
}
.a-goods .text-box .arow .goods-label{
    font-size: 26rpx;
    color: #999;
}
.a-goods .text-box .arow .goods-num{
    font-size: 26rpx;
    color: #999;
}
.peisong-way{
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}
.peisong-way .row-box{
    width: 720rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 0 24rpx 30rpx;
    border-bottom: 1rpx solid #eee;
}
.peisong-way .row-label{
    font-size: 28rpx;
    color: #000;
}
.peisong-way .right-text{
    font-size: 28rpx;
    color: #666;
    padding-right: 30rpx;
}
.peisong-way .liuyan{
    width: 510rpx;
    font-size: 28rpx;
}
.goods-info{
    width: 100%;
    background-color: #fff;
    margin-bottom: 120rpx;
    padding-bottom: 24rpx;
}
.goods-info .row-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 30rpx 12rpx 30rpx;
    font-size: 28rpx;
    color: #000;
}
.goods-info .row-box .right-text{
    text-align: right;
}
.jiesuan-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top:1px solid #eee; 
    background-color: #fff;
}
.jiesuan-box .to-pay-btn{
    width:250rpx;
    text-align: center;
    height: 100%;
    line-height: 100rpx;
    background-color: #e64340;
    font-size:32rpx;
    color:#ffffff;
    border-radius: 0;
}

.jiesuan-box  .left-price{
    display: flex;
    width: 500rpx;
    justify-content:flex-end;
    line-height: 100rpx;
    padding: 0 30rpx 0 0;
    font-size:28rpx;
    box-sizing: border-box;
}

.jiesuan-box .total{
    color: #e64340;
    text-align: right;
}

三、js页面代码如下：

//index.js
//获取应用实例
var app = getApp()

Page({
  data: {
    goodsList:[],
    isNeedLogistics:0, // 是否需要物流信息
    allGoodsPrice:0,
    yunPrice:0,
    allGoodsAndYunPrice:0,
    goodsJsonStr:"",
    orderType:"", //订单类型，购物车下单或立即支付下单，默认是购物车，

    hasNoCoupons: true,
    coupons: [],
    youhuijine:0, //优惠券金额
    curCoupon:null // 当前选择使用的优惠券
  },
  onShow : function () {
    var that = this;
    var shopList = [];
    //立即购买下单
    if ("buyNow"==that.data.orderType){
      var buyNowInfoMem = wx.getStorageSync('buyNowInfo');
      if (buyNowInfoMem && buyNowInfoMem.shopList) {
        shopList = buyNowInfoMem.shopList
      }
    }else{
      //购物车下单
      var shopCarInfoMem = wx.getStorageSync('shopCarInfo');
      if (shopCarInfoMem && shopCarInfoMem.shopList) {
        // shopList = shopCarInfoMem.shopList
        shopList = shopCarInfoMem.shopList.filter(entity => {
          return entity.active;
        });
      }
    }
    that.setData({
      goodsList: shopList,
    });
    that.initShippingAddress();
  },

  onLoad: function (e) {
    var that = this;
    //显示收货地址标识
    that.setData({
      isNeedLogistics: 1,
      orderType: e.orderType
    });
  },

  getDistrictId : function (obj, aaa){
    if (!obj) {
      return "";
    }
    if (!aaa) {
      return "";
    }
    return aaa;
  },

  createOrder:function (e) {
    wx.showLoading();
    var that = this;
    var loginToken = app.globalData.token // 用户登录 token
    var remark = ""; // 备注信息
    if (e) {
      remark = e.detail.value.remark; // 备注信息
    }

    var postData = {
      token: loginToken,
      goodsJsonStr: that.data.goodsJsonStr,
      remark: remark
    };
    if (that.data.isNeedLogistics > 0) {
      if (!that.data.curAddressData) {
        wx.hideLoading();
        wx.showModal({
          title: '错误',
          content: '请先设置您的收货地址！',
          showCancel: false
        })
        return;
      }
      postData.provinceId = that.data.curAddressData.provinceId;
      postData.cityId = that.data.curAddressData.cityId;
      if (that.data.curAddressData.districtId) {
        postData.districtId = that.data.curAddressData.districtId;
      }
      postData.address = that.data.curAddressData.address;
      postData.linkMan = that.data.curAddressData.linkMan;
      postData.mobile = that.data.curAddressData.mobile;
      postData.code = that.data.curAddressData.code;
    }
    if (that.data.curCoupon) {
      postData.couponId = that.data.curCoupon.id;
    }
    if (!e) {
      postData.calculate = "true";
    }


    wx.request({
      url: 'https://api.it120.cc/'+ app.globalData.subDomain +'/order/create',
      method:'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: postData, // 设置请求的 参数
      success: (res) =>{
        wx.hideLoading();
        if (res.data.code != 0) {
          wx.showModal({
            title: '错误',
            content: res.data.msg,
            showCancel: false
          })
          return;
        }

        if (e && "buyNow" != that.data.orderType) {
          // 清空购物车数据
          wx.removeStorageSync('shopCarInfo');
        }
        if (!e) {
          that.setData({
            isNeedLogistics: res.data.data.isNeedLogistics,
            allGoodsPrice: res.data.data.amountTotle,
            allGoodsAndYunPrice: res.data.data.amountLogistics + res.data.data.amountTotle,
            yunPrice: res.data.data.amountLogistics
          });
          that.getMyCoupons();
          return;
        }
        // 配置模板消息推送
        var postJsonString = {};
        postJsonString.keyword1 = { value: res.data.data.dateAdd, color: '#173177' }
        postJsonString.keyword2 = { value: res.data.data.amountReal + '元', color: '#173177' }
        postJsonString.keyword3 = { value: res.data.data.orderNumber, color: '#173177' }
        postJsonString.keyword4 = { value: '订单已关闭', color: '#173177' }
        postJsonString.keyword5 = { value: '您可以重新下单，请在30分钟内完成支付', color:'#173177'}
        app.sendTempleMsg(res.data.data.id, -1,
          'uJQMNVoVnpjRm18Yc6HSchn_aIFfpBn1CZRntI685zY', e.detail.formId,
          'pages/index/index', JSON.stringify(postJsonString));
        postJsonString = {};
        postJsonString.keyword1 = { value: '您的订单已发货，请注意查收', color: '#173177' }
        postJsonString.keyword2 = { value: res.data.data.orderNumber, color: '#173177' }
        postJsonString.keyword3 = { value: res.data.data.dateAdd, color: '#173177' }
        app.sendTempleMsg(res.data.data.id, 2,
          'GeZutJFGEWzavh69savy_KgtfGj4lHqlP7Zi1w8AOwo', e.detail.formId,
          'pages/order-details/index?id=' + res.data.data.id, JSON.stringify(postJsonString));
        // 下单成功，跳转到订单管理界面
        wx.redirectTo({
          url: "/pages/order-list/index"
        });
      }
    })
  },
  initShippingAddress: function () {
    var that = this;
    wx.request({
      url: 'https://api.it120.cc/'+ app.globalData.subDomain +'/user/shipping-address/default',
      data: {
        token:app.globalData.token
      },
      success: (res) =>{
        if (res.data.code == 0) {
          that.setData({
            curAddressData:res.data.data
          });
        }else{
          that.setData({
            curAddressData: null
          });
        }
        that.processYunfei();
      }
    })
  },
  processYunfei: function () {
    var that = this;
    var goodsList = this.data.goodsList;
    var goodsJsonStr = "[";
    var isNeedLogistics = 0;
    var allGoodsPrice = 0;

    for (let i = 0; i < goodsList.length; i++) {
      let carShopBean = goodsList[i];
      if (carShopBean.logistics) {
        isNeedLogistics = 1;
      }
      allGoodsPrice += carShopBean.price * carShopBean.number;

      var goodsJsonStrTmp = '';
      if (i > 0) {
        goodsJsonStrTmp = ",";
      }


      let inviter_id = 0;
      let inviter_id_storge = wx.getStorageSync('inviter_id_' + carShopBean.goodsId);
      if (inviter_id_storge) {
        inviter_id = inviter_id_storge;
      }


      goodsJsonStrTmp += '{"goodsId":' + carShopBean.goodsId + ',"number":' + carShopBean.number + ',"propertyChildIds":"' + carShopBean.propertyChildIds + '","logisticsType":0, "inviter_id":' + inviter_id +'}';
      goodsJsonStr += goodsJsonStrTmp;


    }
    goodsJsonStr += "]";
    //console.log(goodsJsonStr);
    that.setData({
      isNeedLogistics: isNeedLogistics,
      goodsJsonStr: goodsJsonStr
    });
    that.createOrder();
  },
  addAddress: function () {
    wx.navigateTo({
      url:"/pages/address-add/index"
    })
  },
  selectAddress: function () {
    wx.navigateTo({
      url:"/pages/select-address/index"
    })
  },
  getMyCoupons: function () {
    var that = this;
    wx.request({
      url: 'https://api.it120.cc/' + app.globalData.subDomain + '/discounts/my',
      data: {
        token: app.globalData.token,
        status:0
      },
      success: function (res) {
        if (res.data.code == 0) {
          var coupons = res.data.data.filter(entity => {
            return entity.moneyHreshold <= that.data.allGoodsAndYunPrice;
          });
          if (coupons.length > 0) {
            that.setData({
              hasNoCoupons: false,
              coupons: coupons
            });
          }
        }
      }
    })
  },
  bindChangeCoupon: function (e) {
    const selIndex = e.detail.value[0] - 1;
    if (selIndex == -1) {
      this.setData({
        youhuijine: 0,
        curCoupon:null
      });
      return;
    }
    //console.log("selIndex:" + selIndex);
    this.setData({
      youhuijine: this.data.coupons[selIndex].money,
      curCoupon: this.data.coupons[selIndex]
    });
  }
})

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