首页 > 小程序教程 > 微信小程序白色订单详情页面样式模板制作设计下载

微信小程序白色订单详情页面样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<!-- 物流信息 -->
<view bindtap="kuaidiInfo" class="kuaidi">
	<view class="kuaidiIcon">
		<image src="../../../images/icon_logistics.png"></image>
	</view>
	<view class="kuaidiInfo">
		<view>
			<text>承运来源:</text><text>顺丰快递</text>
		</view>
		<view>
			<text>运单编号:</text><text>1123164</text>
		</view>
		<view>
			<text>物流状态:</text><text>已收货</text>
		</view>
	</view>
</view>

<!-- 收货地址 -->
<view bindtap="todeliver" class="address">
	<view>
		<text class="name">杨天佑</text><text class="number">12166292893</text>
	</view>
	<view>
		上海市上海闵行区|七宝老街
	</view>
</view>

<!-- 订单详情 -->
<view class="orderDetails">
	<view class="orderDetailsTit">订单详情</view>
	<view class="orderDetailsStatus">
		<view>订单编号<text class="orderNum">1003455</text></view>
		<view>下单时间<text class="orderNum">2016-11-03 15:30:07</text></view>
		<view>订单状态<text class="orderStatus">交易完成</text></view>
	</view>
</view>

<!-- 商品订单详情 -->
<view class="productDetails">
	<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 bindtap="toProductDetails" 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样式文件代码如下:
/*快递信息*/page{  background: #fff;}.kuaidi{  height: 160rpx;  border-top: 1rpx solid #f3f3f3;  border-bottom: 20rpx solid #f3f3f3;  background: url(../../../images/member_list_arrow.png) no-repeat 95% center;  background-size: 40rpx 40rpx;}.kuaidi .kuaidiIcon{  float: left;  width: 100rpx;  height: 100rpx;  margin: 30rpx 30rpx 0 40rpx;}.kuaidi .kuaidiIcon image{  width: 100%;  height: 100%;}.kuaidi .kuaidiInfo{  float: left;  font-size: 34rpx;

/*快递信息*/
page{
	background: #fff;
}
.kuaidi{
	height: 160rpx;
	border-top: 1rpx solid #f3f3f3;
	border-bottom: 20rpx solid #f3f3f3;


查找
/pages/central/order_detail/order_details.wxss 
三、js页面代码如下:
Page({
	kuaidiInfo:function(){
		wx.navigateTo({
	      url: '../kuaidi_info/kuaidi_info'
	    })
	},
	toProductDetails:function(){
		 wx.navigateTo({
	      url: '../../details/index'
	    })
	},
	todeliver:function(){
		 wx.navigateTo({
	      url: '../deliver_info/deliver'
	    })
	}
});

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 35,649次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-04
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 企业网站 html5 微信公众平台 响应式 单页式简历模板 微信图片 微信文章 自适应 微信素材
您可能会喜欢的其他模板