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