欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-07-02 09:34 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序红色订单详情页面样式设计制作开发教程,制作好以后效果图如下:
    一、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>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议