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

    微信小程序个人全部订单页面样式模板制作设计下载

    2018-06-01 09:45 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <view bindtap="allOrderPage" class="allOrder">
    	<text class="allOrder-left">全部订单</text>
    	<text class="allOrder-right">查看全部订单</text>
    </view>
    <view class="navTopList">
    	<view class="ywc order-info">
    		<view class="ywc-icon active"></view>
    		<text class="ywc-txt active">已完成</text>
    	</view>
    	<view class="dfk order-info">
    		<view class="dfk-icon"></view>
    		<text class="dfk-txt">待付款</text>
    	</view>
    	<view class="dfh order-info">
    		<view class="dfh-icon"></view>
    		<text class="dfh-txt">待发货</text>
    	</view>
    	<view class="dsh order-info">
    		<view class="dsh-icon"></view>
    		<text class="dsh-txt">待收货</text>
    	</view>
    	<view class="yqx order-info">
    		<view class="yqx-icon"></view>
    		<text class="yqx-txt">已取消</text>
    	</view>
    	<view class="tkz order-info">
    		<view class="tkz-icon"></view>
    		<text class="tkz-txt">退款中</text>
    	</view>
    </view>
    <view bindtap="toOrderDetail" class="orderDetails">
    	<view class="orderListTitle">
    		<view class="userImg"><image src="http://ojhq3mgil.bkt.clouddn.com/web/478/20170116/201701161749246654.jpg"></image></view>
    		<text class="userName">上善若水</text>
    		<text class="orderStatus">交易成功</text>
    	</view>
    	<view class="orderListDetails">
    		<view class="productImg">
    			<image src="http://ojhq3mgil.bkt.clouddn.com/465/20161024/201610241238006043.jpg"></image>
    		</view>
    		<view class="productInfo">
    			<view class="productTitle">Canmake缤纷糖果保湿唇彩 唇蜜 01经典粉色</view>
    			<text class="productPrice">¥132.00</text>
    			<text class="productQuantity">x1</text>
    		</view>
    	</view>
    	<view class="productCount">
    		<view>合计:¥<text>132.00</text></view>
    	</view>
    </view>	
    <view class="orderDetails">
    	<view class="orderListTitle">
    		<view class="userImg"><image src="http://ojhq3mgil.bkt.clouddn.com/web/478/20170116/201701161749246654.jpg"></image></view>
    		<text class="userName">上善若水</text>
    		<text class="orderStatus">交易成功</text>
    	</view>
    	<view class="orderListDetails">
    		<view class="productImg">
    			<image src="http://ojhq3mgil.bkt.clouddn.com/465/20161024/201610241238006043.jpg"></image>
    		</view>
    		<view class="productInfo">
    			<view class="productTitle">Canmake缤纷糖果保湿唇彩 唇蜜 01经典粉色</view>
    			<text class="productPrice">¥132.00</text>
    			<text class="productQuantity">x1</text>
    		</view>
    	</view>
    	<view class="productCount">
    		<view>合计:¥<text>132.00</text></view>
    	</view>
    </view>	

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