为什么我获取不到评分

来源：3-2 项目作业

soso_crazy

2019-06-06 22:58:31

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="../lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./header/header.css">
<link rel="stylesheet" href="./categoryContent/categoryContent.css">
<link rel="stylesheet" href="./listContent/listContent.css">
<link rel="stylesheet" href="./getScore/getScore.css">
</head>
<body>

<div class="header">
<div class="search-bar">
<div class="search-location">
<i class="iconfont"></i>
<span class="location-city">佛山</span>
<i class="iconfont"></i>
</div>
<div class="search-btn">
<i class="iconfont"></i>
<input class="placeholder" type="text" name="placeholder" placeholder="鸡翅">
</div>
</div>
<img class="header-img" src="http://xs01.meituan.net/waimai_i/img/bannertemp.e8a6fa63.jpg" alt="">
</div>



<div class="category-content clearfix"></div>



<div class="list-content">
<div class="nearby">
<span class="text-line"></span>
<span>附近商家</span>
<span class="text-line"></span>
</div>
<div class="list-wrap"></div>
</div>


<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/setFontSize.js"></script>
<script type="text/javascript" src="./categoryContent/categoryContent.js"></script>
<script type="text/javascript" src="./listContent/listContent.js"></script>
<script type="text/javascript" src="./getScore/getScore.js"></script>
</body>
</html>

//category.css

/*category结构开始*/
.category-content{
padding-bottom: 0.267rem;
}
/*category结构结束*/

/*category布局开始*/
.category-content .category-item{
float: left;
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.267rem;
}
/*category布局结束*/

/*category内容开始*/
.category-content .item-icon{
width:1.333rem;
}

.category-content .item-text{
margin-top: 0.267rem;
font-size: 0.373rem;
}
/*category内容结束*/

//category.js

;(function () {
//类目内容模板字符串
var categoryContentStr='<div class="category-item">'+
'<img src=$url class="item-icon"/>'+
'<p class="item-text">$text</p>'+
'</div>';

function getData() {
$.get('../json/head.json',function (data) {
console.log(data);
var list=data.data.primary_filter.splice(0,8); //截取数据数组的0-8位数据
list.forEach(function (item,index) {
var str=categoryContentStr.replace('$url',item.url)
.replace('$text',item.name);
// console.log(index);

$('.category-content').append($(str));
});
});
}

function addClick() {
//采用事件代理方式绑定事件
$('.category-content').on('click','.category-item',function () {
alert(1);
});
}

function init() {
getData();
addClick();
}

init();
})();

//getScore.js

;(function () {
//星星评分字符串模板
var scoreStr='<div class="star">$score</div>';

function _Score() {
// var _score=this.score.toString(),
// scoreArray=_score.split('.'),
// //假如评分4.4 scoreArray就是[4,4] 第一个代表满星有4颗第二位代表半星有0颗剩下一颗0星
//
// // 满星
// fullStar=parseInt(scoreArray[0]),
// // 半星
// halfStar=parseInt(scoreArray[1])>5?1:0,
// // 0星
// zeroStar=5-fullStar-halfStar,
//
// starStr='';
//
// for (var i = 0; i < fullStar; i++) {
// starStr += '<div class="star fullStar"></div>';
// }
//
// for (var j = 0; j < halfStar; j++) {
// starStr+='<div class="star halfStar"></div>';
// }
//
// for (var k = 0; k < zeroStar; k++) {
// starStr+='<div class="star nullStar"></div>';
// }
//
// return scoreStr.replace('$score',starStr);
var _score=this.score;
return scoreStr.replace('$score',_score);
}

window.Score=function (score) {
this.score=score||'';
this.Score=_Score;
}
})();

//header.css

/*header结构开始*/
.header{
width: 100%;
position: relative;
}
/*header结构结束*/

/*header布局开始*/
.header .search-bar{
position: absolute;
padding-top: 0.213rem;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}

.header .search-location{
position: relative;
width: 2.427rem;
height: 0.747rem;
background-color: rgba(0,0,0,0.33);
opacity: 0.8;
margin-right: 0.533rem;
border-radius: 0.347rem;
}

.header .header-img{
width: 100%;
height: 4.474rem;
}

.header .search-btn{
position: relative;
width: 4.533rem;
height: 0.8rem;
background-color: #ffffff;
border-radius: 0.533rem;
}
/*header布局结束*/

/*header内容开始*/
.header .search-location i,
.header .search-location span,
.header .search-btn .placeholder{
font-size: 0.373rem;
position: absolute;
}

.header .search-location i:first-child{
left: 0.133rem;
top: 0.187rem;
}

.header .search-location .location-city{
left: 0.8rem;
top: 0.173rem;
}

.header .search-location i:last-child{
right:0.133rem;
top: 0.187rem;
}

.header .search-btn .placeholder{
position: absolute;
border: none;
outline: none;
width: 3.787rem;
height: 0.8rem;
right: 0;
top: 0;
background-color: transparent;
}

.header .search-btn i{
position: absolute;
font-size: 0.48rem;
left: 0.133rem;
top: 0.187rem;
}
/*header内容结束*/

//listContent.css

/*listContent结构开始*/
.list-content{
overflow: hidden;
padding-bottom: 0.8rem;
}
/*listContent结构结束*/

/*listContent布局开始*/
.list-content .nearby{
text-align: center;
font-size: 0.373rem;
margin-top: 0.267rem;
margin-bottom: 0.16rem;
}
/*listContent布局结束*/

/*listContent内容开始*/
.list-content .nearby .text-line{
display: inline-block;
width: 0.8rem;
height: 0.027rem;
border-bottom: 0.027rem solid lightgray;
margin: 0 0.107rem 0.107rem 0.107rem;
}

.list-wrap .item-content{
display: flex;
padding: 0.533rem 0;
margin: 0 0.267rem;
color: #333333;
position: relative;
}

.item-content .item-img{
width: 2.347rem;
height: 1.787rem;
}

.item-content .item-brand{
position: absolute;
top: 0.533rem;
left: 0;
font-size: 0.32rem;
color: white;
height: 0.373rem;
}

.item-brand .brand{
background-color: darkorange;
padding: 0.08rem;
}

.item-brand .new{
background-color: #55a532;
padding: 0.08rem;
}

.item-content .item-info-content{
flex: 1;
overflow: hidden;
margin-left: 0.347rem;
}

.item-content .item-title{
font-size: 0.427rem;
font-weight: 500;
}

.item-content .item-description{
margin-top: 0.267rem;
font-size: 0.32rem;
display: flex;
}

.item-content .item-monthCount{
margin-left: 0.133rem;
}

.item-content .item-time{
margin-left: 1.067rem;
}

.item-info-content .item-limit-price{
font-size: 0.32rem;
margin-top: 0.267rem;
}

.item-others .other-info{
margin-top: 0.187rem;
}

.item-others .info-tag{
float: left;
width: 0.373rem;
height: 0.373rem;
}

.item-others .info-message{
float: left;
font-size: 0.32rem;
margin-left: 0.08rem;
height: 0.373rem;
width: 6.133rem;
}
/*listContent内容结束*/

//listContent.js

;(function () {
//附近商家列表内容模板字符串
var listContentStr='<div class="item-content">'+
'<img class="item-img" src=$url alt=""/>'+
'<div class="item-brand">$brand</div>'+
'<div class="item-info-content">' +
'<div class="item-title">$title</div>'+
'<div class="item-description">' +
'<div class="item-score">$item-score</div>'+
'<div class="item-monthCount">月售$monthCount</div>'+
'<div class="item-time">$time |</div>'+
'<div class="item-distance"> $distance</div>'+
'</div>'+
'<div class="item-limit-price">$limitPrice</div>'+
'<div class="item-others">$others</div>'+
'</div>'+
'</div>';

//渲染others内容
function getOthers(data) {
var arr=data.discounts2,
str='';

arr.forEach(function (item,index) {
var _str='<div class="other-info clearfix">'+
'<img class="info-tag" src="$infoUrl"/>'+
'<p class="info-message">$message</p>'+
'</div>';

_str=_str.replace('$infoUrl',item.icon_url)
.replace('$message',item.info);

str+=_str;
});
//将拼接好的字符串返回，否则局部变量str获取不到就是undefined
return str;
}

function getBrand(data) {
if(data.brand_type) {
return '<div class="brand">品牌</div>';
}else {
return '<div class="new">新到</div>';
}
}

function getMonthNum(data) {
var num=data.month_sale_num;
num=num>999?999+'+':num;
return num;
}

//渲染商家列表结构
function getListContent() {
$.get('../json/homelist.json',function (data) {
console.log(data);
var list=data.data.poilist||[];
list.forEach(function (item,index) {
var str=listContentStr
.replace('$url',item.pic_url)
.replace('$title',item.name)
.replace('$monthCount',getMonthNum(item))
.replace('$time',item.mt_delivery_time)
.replace('$distance',item.distance)
.replace('$limitPrice',item.min_price_tip)
.replace('$others',getOthers(item))
.replace('$brand',getBrand(item))
.replace('$item-score',new Score(item.wm_poi_score));

$('.list-wrap').append($(str));
});
});
}

function init() {
getListContent();
}

init();
})();

//setFontSize.js

;(function () {
'use strict';

var docEl=document.documentElement,
viewPortEl=document.querySelector('meta[name="viewport"'),
dpr=window.devicePixelRatio||1,
maxWidth=1204,
minWidth=320;

dpr=dpr>=3?3:(dpr>=2?2:1);

docEl.setAttribute('data-dpr',dpr);
docEl.setAttribute('max-width', maxWidth);
docEl.setAttribute('min-width', minWidth);

var scale=1/dpr,
content='width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';

if (viewPortEl) {
viewPortEl.setAttribute('content',content);
} else {
viewPortEl=document.createElement('meta');
viewPortEl.setAttribute('name','viewport');
viewPortEl.setAttribute('content',content);
document.head.appendChild(viewPortEl);
}

setUnitRem();

window.addEventListener('resize',setUnitRem);
window.addEventListener('pageshow',function (e) {
if (e.persisted) {
setUnitRem();
}
});

function setUnitRem() {
//以手机375px做标准,px2rem设置root font-size为37.5。所以ratio=375/37.5
var ratio=10,
viewWidth=docEl.getBoundingClientRect().width||window.innerWidth;

console.log(viewWidth);
//如果不设置最大最小宽度，viewWidth=viewWidth*dpr

if (maxWidth&&(viewWidth/dpr>maxWidth)) {
viewWidth=maxWidth*dpr;
}else if (minWidth && (viewWidth / dpr < minWidth)) {
viewWidth = minWidth * dpr;
}

docEl.style.fontSize=viewWidth/ratio +'px';
}
})();