java美团购物车,仿美团详情页与购物车源码-订单页
项目整体图
首先是order.html
订单
(function () {
var docEl = document.documentElement;
function setRemUnit(){
// 获取到rem的基准值
var rem = docEl.clientWidth / 10;
// 动态设置html根元素的font-size
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// 窗口大小变化时 触发
window.addEventListener('resize', setRemUnit);
// 窗口出现在当前屏幕时 (有浏览器兼容性)
window.addEventListener('pageshow', function(e){
if (e.persisted) {
setRemUnit();
}
});
})();
reset.css和bottomBar.css跟首页的一样
然后是订单页头部样式 header.css
.header {
width: 100%;
height: 1.706667rem;
background-color: #fff;
border-bottom: 1px solid #b2b2b2;
font-size: 0.45rem;
color: #333;
text-align: center;
line-height: 1.706667rem;
font-weight: bold;
}
订单页列表样式 contentList.css
.order-item {
border-top:0.346667rem solid #efefef;
}
.order-item .order-item-inner {
display: flex;
padding-bottom: 0.48rem;
border-bottom: 1px solid #e0e0e0;
}
.order-item .item-img {
width: 1.066667rem;
height: 1.066667rem;
margin-top: 0.213333rem;
margin-left: 0.426667rem;
display: block;
border-radius: 50%;
}
.order-item .item-right {
flex: 1;
margin-left: 0.4rem;
font-size: 0.37rem;
}
.order-item .item-top {
height: 1.466667rem;
padding-top: 0.053333rem;
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.order-item .order-name {
font-size: 0.42rem;
width: 4.8rem;
height: 0.426667rem;
font-weight: 600;
}
.order-item .arrow {
width: 0.213333rem;
height: 0.213333rem;
border: 1px solid #999;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
-webkit-transform: 45deg;
}
.order-item .order-state {
font-size: 0.37rem;
margin-left: 1.066667rem;
color: #999;
}
.order-item .product-item {
font-size: 0.37rem;
color: #666;
margin-top: 0.32rem;
}
.order-item .p-conunt {
float: right;
margin-right: 0.4rem;
}
.order-item .p-total-count {
float: right;
margin-right: 0.4rem;
font-size: 0.32rem;
}
.order-item .total-price {
font-size: 0.37rem;
color: #151515;
margin-left: 0.053333rem;
letter-spacing: 0.026667rem;
}
.order-item .evaluation {
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
}
.order-item .evaluation-btn {
float: right;
width: 2.666667rem;
height: 0.853333rem;
color: #6b450a;
background-color: #ffd161;
font-size: 0.37rem;
line-height: 0.853333rem;
text-align: center;
margin-right: 0.266667rem;
}
.loading {
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
font-size: 0.42rem;
text-align: center;
color: #ccc;
}
.wrap {
padding-bottom: 2.666667rem;
}
订单页列表contentList.js
.order-item {
border-top:0.346667rem solid #efefef;
}
.order-item .order-item-inner {
display: flex;
padding-bottom: 0.48rem;
border-bottom: 1px solid #e0e0e0;
}
.order-item .item-img {
width: 1.066667rem;
height: 1.066667rem;
margin-top: 0.213333rem;
margin-left: 0.426667rem;
display: block;
border-radius: 50%;
}
.order-item .item-right {
flex: 1;
margin-left: 0.4rem;
font-size: 0.37rem;
}
.order-item .item-top {
height: 1.466667rem;
padding-top: 0.053333rem;
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.order-item .order-name {
font-size: 0.42rem;
width: 4.8rem;
height: 0.426667rem;
font-weight: 600;
}
.order-item .arrow {
width: 0.213333rem;
height: 0.213333rem;
border: 1px solid #999;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
-webkit-transform: 45deg;
}
.order-item .order-state {
font-size: 0.37rem;
margin-left: 1.066667rem;
color: #999;
}
.order-item .product-item {
font-size: 0.37rem;
color: #666;
margin-top: 0.32rem;
}
.order-item .p-conunt {
float: right;
margin-right: 0.4rem;
}
.order-item .p-total-count {
float: right;
margin-right: 0.4rem;
font-size: 0.32rem;
}
.order-item .total-price {
font-size: 0.37rem;
color: #151515;
margin-left: 0.053333rem;
letter-spacing: 0.026667rem;
}
.order-item .evaluation {
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
}
.order-item .evaluation-btn {
float: right;
width: 2.666667rem;
height: 0.853333rem;
color: #6b450a;
background-color: #ffd161;
font-size: 0.37rem;
line-height: 0.853333rem;
text-align: center;
margin-right: 0.266667rem;
}
.loading {
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
font-size: 0.42rem;
text-align: center;
color: #ccc;
}
.wrap {
padding-bottom: 2.666667rem;
}
订单页列表 contentList.js
(function(){
// 订单卡片模版
var itemTmpl = '
'
''+
'
'
'
$poi_name
'+
'
'
'+
'
'+
'
'+
'
'+
'
'+
'$getComment'+
'
';
/**
* 渲染评价按钮
* @param {}
*/
function getComment(data){
var evaluation = !data.is_comment;
if (evaluation) {
return '
'
'+
'
'
}
return '';
}
/**
* 渲染总计菜品
* @param {}
*/
function getTotalPrice(data){
var str = '
'...'+
'
'总计'+data.product_count+'个菜,实付'+
'¥'+data.total+''+
'
'+
'
';
return str;
}
/**
* 渲染具体商品
* @param {}
*/
function getProduct(data){
var list = data.product_list || [];
list.push({type:'more'});
var str = '';
list.forEach(function(item){
if (item.type === 'more') {
str += getTotalPrice(data)
} else {
str += '
+item.product_name+
'
+item.product_count+
'
'+
'
';
}
})
return str;
}
/**
* 渲染列表
* @param []
*/
function initContentList(list){
list.forEach(function(item){
var str = itemTmpl.replace('$poi_pic',item.poi_pic)
.replace('$poi_name',item.poi_name)
.replace('$status_description',item.status_description)
.replace('$getProduct',getProduct(item))
.replace('$getComment',getComment(item));
$('.order-list').append(str);
});
}
var page = 0;
var isLoading = false;
/**
* 请求数据
* @param
*/
function getList(){
page++;
isLoading = true;
$.get('../json/orders.json', function(data){
setTimeout(function(){
console.log(data);
var list = data.data.digestlist || [];
initContentList(list);
isLoading = false;
},1000);
});
}
function addEvent(){
window.addEventListener('scroll', function(){
var clientHeight = document.documentElement.clientHeight;
var scrollHeight = document.body.scrollHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var preDis = 30;
if (scrollTop + clientHeight >= (scrollHeight -preDis)) {
if (page < 3) {
if (isLoading) {
return;
}
getList();
} else {
$('.loading').text('加载完成');
}
}
});
}
function init(){
getList();
addEvent();
}
init();
})();
bottomBar.js 跟之前一样
现在是订单页效果图
java美团购物车,仿美团详情页与购物车源码-订单页相关推荐
- java简单计算器课程设计_java仿windows简易计算器课程设计 源码+报告
[实例简介] java仿windows简易计算器课程设计 源码+报告 课直接运行. [实例截图] [核心代码] Java课设-简易计算器 └── Java课设-简易计算器 ├── Java课程设计.d ...
- 2021最新外卖霸王餐小程序、H5、微信公众号版外系统源码|霸王餐美团/饿了么系统 粉丝裂变玩源码下载
2021年了,你还在用淘宝客吗?赶紧跟上互联网的大势吧,外卖cps就是cps人群趋势! 个人.个体.企业均可使用 外卖霸王餐小程序.H5.微信公众号版外系统源码|霸王餐美团/饿了么系统 粉丝裂变玩 2 ...
- java写脸萌_FaceLovely 本项目是一个仿安卓脸萌app应用的源码, 款非常有趣的拼脸软件,即使你不会画 android 259万源代码下载- www.pudn.com...
文件名称: FaceLovely下载 收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 6940 KB 上传时间: 2016-05-25 下载次数: 0 详细说明:本项 ...
- JAVA根据营地号获取王者荣耀数据(王者荣耀战绩及王者荣耀对局详情查询)网页源码下载
目录 营地号查询 战绩查询 对局详情查询 下载 营地号查询 根据营地号获取王者荣耀战绩.皮肤.英雄数据 可提接口测试 战绩查询 对局详情查询 下载 网页源码
- 畅玩mt3单机游戏服务器维护,【梦幻西游】MT3仿端手工游戏服务端源码[教程+授权物品后台]...
[梦幻西游]MT3仿端手工游戏服务端源码[教程+授权物品后台] 架设教程 系统:CentOS 6.8 64位 1.关闭防火墙 chkconfig iptables off service iptab ...
- JAVA并发容器-ConcurrentHashMap 1.7和1.8 源码解析
HashMap是一个线程不安全的类,在并发情况下会产生很多问题,详情可以参考HashMap 源码解析:HashTable是线程安全的类,但是它使用的是synchronized来保证线程安全,线程竞争激 ...
- 精仿互站模板 友价源码商城T5内核二次开发运营版
精仿互站模板,友价T5内核1:1大型源码虚拟物品交易网站T5仿互站友价仿互站全新运营版,去住所有后门并且加强了防护(各种软件已经检测) 运行环境: 支持: IIS.apache.nginx PHP:p ...
- java毕业生设计中小型连锁超市配送中心配送管理计算机源码+系统+mysql+调试部署+lw
java毕业生设计中小型连锁超市配送中心配送管理计算机源码+系统+mysql+调试部署+lw java毕业生设计中小型连锁超市配送中心配送管理计算机源码+系统+mysql+调试部署+lw 本源码技术栈 ...
- 计算机毕业设计Java企业员工考勤系统的设计与实现(源码+系统+mysql数据库+lw文档)
计算机毕业设计Java企业员工考勤系统的设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java企业员工考勤系统的设计与实现(源码+系统+mysql数据库+lw文档) 本源码技术栈 ...
最新文章
- 8.0系统安装Xposed框架失败Xposed framework version XX is installed
- 远看像乱序执行,近看是内存屏障的 BUG 是如何解决的?
- java中System类简介(转)
- 面试官:说说 Java 中的 Unsafe 和 CAS
- 技术团队新官上任之中层篇
- CentOS6.7 安装git
- LeetCode MySQL 1142. 过去30天的用户活动 II
- 如何在Windows11和Windows10上获取驱动程序更新
- 骗子收录网站源码PHP搭建
- Windows 控制台cmd中文乱码的解决办法
- stacking模型融合_算法实践七:模型融合
- Intel-VT 与虚拟化限制
- sqlmap的安装教程
- java笔试题(题目+解析)
- python查询12306余票_python命令行查询12306火车票
- python Linux下的安装
- 互联网中越老越吃香的行业是?
- socket 端口复用
- java离线日期授权解决方案 解决改系统日期 Java代码混淆 日期混淆
- 嵌入式算法创业的窘境与思考