首页 > 小程序教程 > 微信小程序红色订单详情页面样式设计制作开发教程

微信小程序红色订单详情页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序红色订单详情页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/order/detail.wxml-->
<view class="w100">
		<view class="p_all bg_white df item" wx:for="{{proData}}">
			<view class="cp_photo">			
				<image src="{{item.photo_x}}"></image>
			</view>
			<view class="df_1">	
				<view class="font_14 mt5 ovh1">
		      {{item.name}}
		    </view>
			  <text class="gm_ovh_1h red pt10">¥{{item.price}}</text>
			  <view class="sl">
		        数量:{{item.num}}
		    </view>
			</view>
		</view>		
		
		<view class="p_all bg_white mt10 font_14">
			<view class="df">
				<view class="df_1 c6">
				<view class="l_h20">收货人:{{orderData.receiver}}<text class="fl_r mr10">{{orderData.tel}}</text></view>
				<view class="l_h20 mt5">地址:{{orderData.address_xq}}</view>
				</view>
			</view>
		</view>	

		<view class="p_all bg_white mt10 c6 l_h20  font_14">
			<view >
			订单状态:<text class="red">{{orderData.order_status}}</text>
			</view>
			<view >
			订单编号:{{orderData.order_sn}}
			</view>
			<view class="mt10">
			订单时间:{{orderData.addtime}}
			</view>         
		    </view>

           <view class="p_all bg_white mt10 font_14">
			<textarea class="min_60" auto-height name="remark" disabled="{{true}}" placeholder="订单备注" value="{{orderData.remark?orderData.remark:'未备注'}}"/> 
		</view>	

	<view class="zhifu mt10 tc">金额:<span class="font_20 red">¥ {{orderData.price}}</span></view>
        

	<view class="p_all mt10">
		<view class="btnGreen">
			        <!-- <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="warn"> 确认 </button> -->
        		<!--<contact-button type="default-light" session-from="orderNo_{{orderData.OrderNo}}">
		        客服
		        </contact-button>-->
		</view>
	</view>
</view>
 
二、wxss样式文件代码如下:
/* pages/order/detail.wxss */
.item .cp_photo{ 
    width: 60px; 
    height: 60px;
    overflow: hidden; 
    border-radius: 3px; 
    margin-right: 10px;
}
.item .cp_photo image{ 
    width: 60px; 
    height: 60px;
}
.gm_ovh_2h{
    line-height:25px; 
    height: 50px; 
    margin:0; 
    overflow:hidden;  
    text-overflow:ellipsis; 
    display:-webkit-box; 
    -webkit-line-clamp:2;  
    -webkit-box-orient:vertical; 
    font-size: 16px;
}
.gm_ovh_1h{
    line-height:25px; 
    height: 25px; 
    margin:0; 
    overflow:hidden;  
    text-overflow:ellipsis; 
    display:-webkit-box; 
    -webkit-line-clamp:2;  
    -webkit-box-orient:vertical; 
    font-size: 16px;
} 
.h10_hui{
    height: 10px;
    width: 100%;
    background: #eee;
}

.min_60{
    min-height: 60px;
}

.w100{ width: 100%}

.iconWarn{
   vertical-align:top;padding-right:2px;
}

.iconClear{
  float:right;
  padding-top: 5px;
  padding-left: 10px;
  padding-right:10px;
  margin-top:-36px;
  height: 28px;
}

.inputStyle{
  height: 36px;
  line-height: 36px;
  padding-left: 2px;
  width:80%;
}

.tips{
  margin-bottom:10px;
}
.x_right{
    width:16px;
    height: 18px;
    display:inline-block; 
    vertical-align: middle;
    float: right; 
}
.zhifu{
    background: #fff;
    margin-bottom: 1px;
    padding: 4%;
    width: 92%;
    font-size: 14px;
    color: #666;
}
.font_20{
    font-size: 20px;
    font-weight: bold;
}
.xx_pay_submit{
  margin-top: 10px;
}
.gms_view{  
    width: 100%;
    display: inline-block;
    text-align: right;
}
.gms_view navigator{
    border: 1px solid #ddd;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #666;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    float: right;
    font-weight: bold;
    
}
.gms_view input{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 12px;
    width: 30px;
    margin: 0 5px;
    text-align: center;
    color: #999;
    float: right;
}

.red{
    color: red;
}

.sl{
  font-size: 12px;
  color: #999;
}
三、js页面代码如下:
var app = getApp();
// pages/order/detail.js
Page({
  data:{
    orderId:0,
    orderData:{},
    proData:[],
  },
  onLoad:function(options){
    this.setData({
      orderId: options.orderId,
    })
    this.loadProductDetail();
  },
  loadProductDetail:function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Order/order_details',
      method:'post',
      data: {
        order_id: that.data.orderId,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {

        var status = res.data.status;
        if(status==1){
          var pro = res.data.pro;
          var ord = res.data.ord;
          that.setData({
            orderData: ord,
            proData:pro
          });
        }else{
          wx.showToast({
            title: res.data.err,
            duration: 2000
          });
        }
      },
      fail: function () {
          // fail
          wx.showToast({
            title: '网络异常!',
            duration: 2000
          });
      }
    });
  },

})

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

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