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