首页 > 小程序教程 > 微信小程序酒商家红色图标下单成功设计制作开发教程

微信小程序酒商家红色图标下单成功设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序酒商家红色图标下单成功设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/wineProcess/placeOrder.wxml-->
<view class="container">
     <view class="placeOrder_info">
        <image class="imgsize" src="/assets/images/buy_sucess@2x.png"></image>
        <view class="font-color-c24e4e font-size" style="margin:30rpx 0;">下单成功</view>
        <view class="font-color-999">订单号:{{order.order_no}}</view>
        <view class="font-color-333"  style="margin-top:30rpx;">厂家会尽快发货</view>
     </view>
     <view class="addressGroup">
         <view class="address-hd font-color-999">客户收货地址</view>
         <view class="address-bd">
             <view class="address-bd-hd font-color-999">地址:</view><view>湖北省武汉市硚口区人名西路302号明日财富大厦20层,迪吧拉亚公司研发部</view>
         </view>
         <view class="address-ft font-color-999">
             <text>收货人:<text class="font-color-hei">轩少</text></text>
               <text style="margin-left:100rpx;">电话:<text class="font-color-hei" >13297090745</text></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>
</view>

 
二、wxss样式文件代码如下:
/* pages/wineProcess/placeOrder.wxss */
@import '/pages/wineProcess/confirmOrder.wxss';
.placeOrder_info{
    display: flex;
    flex-direction: column;
    height: 490rpx;
    align-items: center;
    line-height: 1;
  
}
.placeOrder_info .imgsize{
    margin-top:70rpx;
    width: 200rpx;
    height: 200rpx;
}
.addressGroup{
    background-color: #fff;
    padding: 0rpx 30rpx;
    line-height: 1;
    height:230rpx;
}
.address-hd{
   margin-top: 30rpx; 
}
.address-bd{
    display: flex;
    flex-direction: row;
    margin-top: 30rpx;
    line-height: 1.5;  
    font-size: 24rpx;
}
.address-bd-hd{
    width: 100rpx;
    
    
}
.address-ft{
    margin-top: 20rpx;
    font-size: 24rpx;
}
三、js页面代码如下:
// pages/wineProcess/placeOrder.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(){
    // 页面关闭
  }
})

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

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