首页 > 小程序教程 > 微信小程序购买酒商品确认订单支付页面设计制作开发教程

微信小程序购买酒商品确认订单支付页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序购买酒商品确认订单支付页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/wineProcess/confirmOrder.wxml-->
<view class="container">
    <view class="order-title">
       <text ><text class="font-color-333">订单号</text><text style="margin-left:40rpx;">{{order.order_no}}</text></text>
       <text class="font-color-999">{{order.create_time}}</text>
    </view>
    <!--<view class="order-status">
       <view class="group-hd">订单状态</view>
       <view wx:for="{{ order.order_stauts}}" wx:for-item="status"  class="{{status==order.order_stauts[0] ? 'content font-color-c24e4e' :'content'}}" >
            <text>{{status.update_time}}:</text>
            <text style="margin-left:40rpx;">{{status.content}}</text>
       </view>
    </view>-->
    <view class="order-group">
       <view class="group-hd">商品</view>
       <view class="group-bd  line-after-top ">
           <view class="food-list line-before-bottom" wx:for="{{order.order_foods}}" wx:for-item="foodlist">
              <image src="{{foodlist.foods_img}}" class="imgsize"></image>
              <view class="food-text">
                <view class="font-size-16">{{foodlist.foods_name}}</view>
                 <view><text class="font-color-999"><text class="font-color-c24e4e" style="font-size:40rpx;margin-left:24rpx;">¥{{foodlist.foods_price}}</text>{{foodlist.foods_weight}}</text>
                       <text class="font-color-999">数量:<text class="font-color-c24e4e" style="margin-left:24rpx;">{{foodlist.foods_num}}</text></text>
                 </view>
              </view>
           </view>
       </view>
       <view class="group-ft">
          <text class="font-color-999">订单总额:<text class="font-color-c24e4e" style="font-size:40rpx; margin-left:24rpx;">¥{{order.order_sum}}</text></text>
       </view>
    </view>
    <navigator  url="chooseCustomer" class="address-group arrow-right">
         <view class="address-group-hd"><text>客户(收货信息)</text></view> 
    </navigator>     
    <!--<view class="address-group">
         <view class="address-group-hd line-before-bottom">
             <text>客户</text>
              <text>{{order.customer.customer_name}}</text>   
         </view>
         <view class="address-group-bd">
             <text>地址:{{order.customer.customer_address}}</text>
             <text ><text>收货人:{{order.customer.receiver}}</text><text style="margin-left:2em;">联系电话:{{order.customer.phone}}</text></text>
         </view>
    </view>-->
    <view class="order-group ">
       <view class="group-hd line-before-bottom">备注信息</view>
      <view class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="请在此填写备注信息" style="height: 3.3em" />
            <view class="weui-textarea-counter">0/200</view>
        </view>
    </view>   
</view>
<view style="width:100%;height:140rpx;"></view>
<view class="fixed-ft foot-box">
<view class="pay-box font-color-white" bindtap="wxPay">微信支付</view>
</view>

 
二、wxss样式文件代码如下:
/* pages/wineProcess/confirmOrder.wxss */
@import '/pages/myOrder/orderDetail.wxss';
.order-group .weui-cell__bd{
    padding: 30rpx 0;

}
.pay-box{
    width: 710rpx;
    height: 100rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #339933;
    border-radius: 8rpx;
}

.foot-box{
    padding: 20rpx 0;
    background-color: #eeeeee;
    
}
三、js页面代码如下:
// pages/wineProcess/confirmOrder.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
     this.setData({
      order:{
        order_no:'SA02201703052988',
        create_time:'2017.03.05 18:30',
        order_stauts:[{
           update_time:'2017.03.05 18:16',
           content:'厂家已确认,准备发货'
        },
        {
           update_time:'2017.03.05 18:16',
           content:'厂家已确认,准备发货'
        },
        {
           update_time:'2017.03.05 18:16',
           content:'厂家已确认,准备发货'
        }],
        order_foods:[{
            foods_img:'/assets/testimages/timg1.jpg',
            foods_name:'永泰老酒1915 六瓶/件',
            foods_price:'1950',
            foods_weight:'/件(6瓶)',
            foods_num:1,
        },{
            foods_img:'/assets/testimages/timg1.jpg',
            foods_name:'永泰老酒1988 六瓶/件',
            foods_price:'1950',
            foods_weight:'/件(6瓶)',
            foods_num:2,
        }],
        order_sum:4549,
        customer:{
          customer_name:'迪巴拉公司袁小娇',
          customer_address:'湖北省武汉市硚口区人民路302号迪巴拉公司研发部',
          receiver:'李璇',
          phone:'13297090125'
          
        },
        remarks:'喝假酒喝怕了,请快点...'
      }
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  wxPay(){
    wx.requestPayment({
      'timeStamp': '',
      'nonceStr': '',
      'package': '',
      'signType': 'MD5',
      'paySign': '',
      'success':(res)=>{
      },
      'fail':(res)=>{
      }
    })
  }
})

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

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