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

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

上一篇 下一篇
制作好以后效果图如下：
一、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>
 
二、wxss样式文件代码如下：
/*全部订单*/
.allOrder{
	height: 100rpx;
	line-height: 100rpx;
	background: #fff;
	border-bottom: 1rpx solid #f3f3f3;
}
.allOrder .allOrder-left{
	margin-left: 20rpx;
	float: left;
}
.allOrder .allOrder-right{
	font-size: 26rpx;
	color: #666;
	float: right;
	padding-right: 60rpx;
	background: url(../../../images/member_list_arrow.png) no-repeat 90% center;
	background-size: 30rpx 30rpx;
}

/*头部导航*/
.navTopList{
	display: flex;
	width: 100%;
	height: 160rpx;
	background: #fff;
	border-bottom: 1rpx solid #f3f3f3;
}
.navTopList .order-info{
	padding-top: 30rpx;
	text-align: center;
}
.navTopList .order-info view{
	width: 56rpx;
	height: 56rpx;
	margin-left:31rpx;
}
.navTopList .order-info text{
	font-size: 34rpx;
}
.navTopList .order-info text.active{
	color:#ff6662;
}
.navTopList .ywc{
	flex:1;
}
.navTopList .ywc .ywc-icon{
	background: url(../../../images/icon_jywc.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dfk{
	flex:1;
}
.navTopList .dfk .dfk-icon{
	background: url(../../../images/icon_dfk.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dfh{
	flex:1;
}
.navTopList .dfh .dfh-icon{
	background: url(../../../images/icon_dfh.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dsh{
	flex:1;
}
.navTopList .dsh .dsh-icon{
	background: url(../../../images/icon_dsh.png) no-repeat center;
	background-size: 56rpx 56rpx;
}
.navTopList .yqx{
	flex:1;
}
.navTopList .yqx .yqx-icon{
	background: url(../../../images/icon_yqx.png) no-repeat center;
	background-size: 56rpx 56rpx;
}
.navTopList .tkz{
	flex:1;
}
.navTopList .tkz .tkz-icon{
	background: url(../../../images/icon_tkz.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}

.navTopList .ywc .ywc-icon.active{
	background: url(../../../images/icon_jywc_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dfk .dfk-icon.active{
	background: url(../../../images/icon_dfk_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dfh .dfh-icon.active{
	background: url(../../../images/icon_dfh_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .dsh .dsh-icon.active{
	background: url(../../../images/icon_dsh_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .yqx .yqx-icon.active{
	background: url(../../../images/icon_tkz_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}
.navTopList .tkz .tkz-icon.active{
	background: url(../../../images/icon_tkz_active.png) no-repeat center center;
	background-size: 56rpx 56rpx;
}

/*订单列表*/
.orderDetails{
	background: #fff;
	border-bottom: 20rpx solid #f3f3f3;
}
.orderListTitle{
	height: 100rpx;
	line-height: 100rpx;
	border-bottom: 1rpx solid #f3f3f3;
}
.orderListTitle .userImg{
	float: left;
	width: 70rpx;
	height: 70rpx;
	border-radius: 35rpx;
	margin:15rpx;
}
.orderListTitle .userImg image{
	border-radius: 35rpx;
	width: 100%;
	height: 100%;
}
.orderListTitle .userName{
	padding-right: 50rpx;
	background: url(../../../images/member_list_arrow.png) no-repeat 90% center;
	background-size: 35rpx 35rpx;
}
.orderListTitle .orderStatus{
	float: right;
	margin-right: 20rpx;
	color: #2f7b27;
	font-size: 34rpx;
}
.orderListDetails{
	display: flex;
	height: 180rpx;
	border-bottom: 1rpx solid #f3f3f3;
}
.orderListDetails .productImg{
	flex: 1;
	height: 140rpx;
	margin-top: 20rpx;
	margin-left: 20rpx;
}
.orderListDetails .productImg image{
	width: 100%;
	height: 100%;
}
.orderListDetails .productInfo{
	flex: 4;
	padding: 20rpx 30rpx;
}
.orderListDetails .productInfo .productTitle{
	overflow: hidden;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.orderListDetails .productInfo .productQuantity{
	float: right;
}
.productCount{
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1rpx solid #f3f3f3;
}
.productCount>view{
	float: right;
	margin-right: 30rpx;
}
三、js页面代码如下：
Page({
	allOrderPage:function (){
		wx.navigateTo({
	      url: '../seller_allOrder/seller_allOrder'
	    })
	},
	toOrderDetail:function () {
		wx.navigateTo({
	      url: '../order_detail/order_details'
	    })
	}
	
});

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 78,414次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-01
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 企业网站 微信文章 自适应 微信素材 html5 微信图片 微信公众平台 响应式 微信模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 428
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 502
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,734
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,081
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,440
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,261
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备 42010602001367号 懒人模板-Copyright © 2023 版权所有