package com.alatus.search.service.impl;
import com.alatus.common.to.es.SkuEsModel;
import com.alatus.search.vo.*;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import com.alatus.common.utils.R;
import com.alatus.search.config.MallElasticSearchConfig;
import com.alatus.search.constant.EsConstant;
import com.alatus.search.feign.ProductFeignService;
import com.alatus.search.service.MallSearchService;
import org.apache.commons.lang.StringUtils;
import org.apache.lucene.search.join.ScoreMode;
import org.elasticsearch.action.search.SearchRequest;
import org.elasticsearch.action.search.SearchResponse;
import org.elasticsearch.client.RestHighLevelClient;
import org.elasticsearch.index.query.BoolQueryBuilder;
import org.elasticsearch.index.query.NestedQueryBuilder;
import org.elasticsearch.index.query.QueryBuilders;
import org.elasticsearch.index.query.RangeQueryBuilder;
import org.elasticsearch.search.SearchHit;
import org.elasticsearch.search.SearchHits;
import org.elasticsearch.search.aggregations.AggregationBuilders;
import org.elasticsearch.search.aggregations.bucket.nested.NestedAggregationBuilder;
import org.elasticsearch.search.aggregations.bucket.nested.ParsedNested;
import org.elasticsearch.search.aggregations.bucket.terms.ParsedLongTerms;
import org.elasticsearch.search.aggregations.bucket.terms.ParsedStringTerms;
import org.elasticsearch.search.aggregations.bucket.terms.Terms;
import org.elasticsearch.search.aggregations.bucket.terms.TermsAggregationBuilder;
import org.elasticsearch.search.builder.SearchSourceBuilder;
import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
import org.elasticsearch.search.sort.SortOrder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
@Service
public class MallSearchServiceImpl implements MallSearchService {
@Autowired
private RestHighLevelClient client;
@Autowired
private ProductFeignService productFeignService;
@Override
public SearchResult search(SearchParam searchParam) {
// 动态构建出查询所需要的DSL语句
SearchResult searchResult = null;
// 准备检索请求
SearchRequest searchRequest = buildSearchRequest(searchParam);
try {
// 执行查询检索请求
SearchResponse response = client.search(searchRequest, MallElasticSearchConfig.COMMON_OPTIONS);
// 分析响应数据并封装成返回的数据
searchResult = buildSearchResult(response,searchParam);
} catch (IOException e) {
throw new RuntimeException(e);
}
return searchResult;
}
private SearchResult buildSearchResult(SearchResponse response,SearchParam searchParam) {
SearchResult result = new SearchResult();
SearchHits hits = response.getHits();
// 返回所有查询到的商品
if(hits.getHits()!=null&&hits.getHits().length>0){
List<SkuEsModel> skuEsModelList = new ArrayList<>();
for (SearchHit hit : hits.getHits()) {
String sourceAsString = hit.getSourceAsString();
SkuEsModel skuEsModel = JSON.parseObject(sourceAsString, SkuEsModel.class);
if(!StringUtils.isEmpty(searchParam.getKeyword())){
//拿到高亮信息显示标题
skuEsModel.setSkuTitle(hit.getHighlightFields().get("skuTitle").getFragments()[0].toString());
}
skuEsModelList.add(skuEsModel);
}
result.setProducts(skuEsModelList);
}
// 当前涉及到的所有属性信息
ParsedNested attrAgg = response.getAggregations().get("attr_agg");
ParsedLongTerms attrIdAgg = attrAgg.getAggregations().get("attr_id_agg");
List<SearchResult.AttrVo> attrVoList = new ArrayList<>();
for (Terms.Bucket bucket : attrIdAgg.getBuckets()) {
SearchResult.AttrVo attrVo = new SearchResult.AttrVo();
// 设置属性ID
attrVo.setAttrId(Long.parseLong(bucket.getKeyAsString()));
// 设置属性名字
ParsedStringTerms attrNameAgg = bucket.getAggregations().get("attr_name_agg");
attrVo.setAttrName(attrNameAgg.getBuckets().get(0).getKeyAsString());
// 设置属性值
ParsedStringTerms attrValueAgg = bucket.getAggregations().get("attr_value_agg");
List<String> attrValue = new ArrayList<>();
for (Terms.Bucket attrValueAggBucket : attrValueAgg.getBuckets()) {
attrValue.add(attrValueAggBucket.getKeyAsString());
}
attrVo.setAttrValue(attrValue);
attrVoList.add(attrVo);
}
result.setAttrs(attrVoList);
// 当前商品涉及到的所有品牌信息
ParsedLongTerms brandAgg = response.getAggregations().get("brand_agg");
List<SearchResult.BrandVo> brandVoList = new ArrayList<>();
for (Terms.Bucket bucket : brandAgg.getBuckets()) {
SearchResult.BrandVo brandVo = new SearchResult.BrandVo();
// 设置品牌ID
brandVo.setBrandId(Long.parseLong(bucket.getKeyAsString()));
// 设置品牌名字
ParsedStringTerms brandNameAgg = bucket.getAggregations().get("brand_name_agg");
brandVo.setBrandName(brandNameAgg.getBuckets().get(0).getKeyAsString());
// 设置品牌图片
ParsedStringTerms brandImgAgg = bucket.getAggregations().get("brand_img_agg");
brandVo.setBrandImg(brandImgAgg.getBuckets().get(0).getKeyAsString());
brandVoList.add(brandVo);
}
result.setBrands(brandVoList);
// 当前商品涉及到的所有分类信息
ParsedLongTerms catalogAgg = response.getAggregations().get("catalog_agg");
List<SearchResult.CatalogVo> catalogVoList = new ArrayList<>();
for (Terms.Bucket bucket : catalogAgg.getBuckets()) {
SearchResult.CatalogVo catalogVo = new SearchResult.CatalogVo();
// 设置分类ID
catalogVo.setCatalogId(Long.parseLong(bucket.getKeyAsString()));
// 获取分类ID下分类名字的子聚合
ParsedStringTerms catalogNameAgg = bucket.getAggregations().get("catalog_name_agg");
// 设置分类名字
catalogVo.setCatalogName(catalogNameAgg.getBuckets().get(0).getKeyAsString());
catalogVoList.add(catalogVo);
}
result.setCatalogs(catalogVoList);
// 分页信息页码
if(searchParam.getPageNum()!=null){
result.setPageNum(searchParam.getPageNum());
}
// 总记录数
long total = hits.getTotalHits().value;
result.setTotal(total);
// 总页码
Integer totalPage = ((total%EsConstant.PRODUCT_PAGESIZE==0)?(int)(total/EsConstant.PRODUCT_PAGESIZE):(int)((total/EsConstant.PRODUCT_PAGESIZE)+1));
result.setTotalPages(totalPage);
if(searchParam.getAttrs()!=null&&!searchParam.getAttrs().isEmpty()){
// 构建面包屑导航
List<SearchResult.NavVo> navVoList = searchParam.getAttrs().stream().map(attr -> {
// 分析每一个传递的Attr信息,构建navVo
SearchResult.NavVo navVo = new SearchResult.NavVo();
String[] attrs = attr.split("_");
navVo.setNavValue(attrs[1]);
R info = productFeignService.info(Long.parseLong(attrs[0]));
if(info.getCode()==0){
navVo.setNavName(info.get("attr",new TypeReference<AttrResponseVo>(){}).getAttrName());
}
else{
navVo.setNavName(attrs[0]);
}
// TODO 取消面包屑以后,我们怎么跳转
// 将请求地址的URL当前部分置空,拿到所有的查询条件,去掉当前的
String replace = replaceQueryString(searchParam, attr, "attrs");
navVo.setLink("http://search.alatusmall.com/list.html?"+replace);
return navVo;
}).collect(Collectors.toList());
result.setNavs(navVoList);
}
// TODO 品牌
if(searchParam.getBrandId()!=null&&!searchParam.getBrandId().isEmpty()){
SearchResult.NavVo navVo = new SearchResult.NavVo();
navVo.setNavName("品牌");
// TODO 远程查询所有的品牌信息
R brandsInfo = productFeignService.brandsInfo(searchParam.getBrandId());
StringBuilder brandName = new StringBuilder();
if(brandsInfo.getCode()==0){
List<BrandVo> brands = brandsInfo.get("brands", new TypeReference<List<BrandVo>>(){});
String replaced = null;
for (BrandVo brand : brands) {
brandName.append(brand.getName()+";");
replaced = replaceQueryString(searchParam, brand.getBrandId().toString(), "brandId");
}
navVo.setNavValue(brandName.toString());
navVo.setLink("http://search.alatusmall.com/list.html?"+replaced);
}
result.getNavs().add(navVo);
}
// TODO 分类
if(searchParam.getCatalog3Id()!=null){
SearchResult.NavVo navVo = new SearchResult.NavVo();
// TODO 远程查询所有的类目信息
R catInfo = productFeignService.catInfo(searchParam.getCatalog3Id());
if(catInfo.getCode()==0){
CategoryVo category = catInfo.get("category", new TypeReference<CategoryVo>(){});
navVo.setNavName("分类");
navVo.setNavValue(category.getName());
String replaced = replaceQueryString(searchParam, category.getCatId().toString(),"catalog3Id");
navVo.setLink("http://search.alatusmall.com/list.html?"+replaced);
}
result.getNavs().add(navVo);
}
return result;
}
private String replaceQueryString(SearchParam searchParam,String attr,String key){
String encode = null;
searchParam.set_queryString(searchParam.get_queryString().replace("&&",""));
try {
encode = URLEncoder.encode(attr, "UTF-8");
} catch (UnsupportedEncodingException e) {
throw new RuntimeException(e);
}
String change = key+"=" + encode;
return searchParam.get_queryString().replace(change,"");
}
//准备检索请求
private SearchRequest buildSearchRequest(SearchParam searchParam) {
// 构建DSL语句
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
// 查询条件,模糊查询,过滤,按照属性,分类品牌,价格区间,库存
// 构建了bool-query
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
// must
if(!StringUtils.isEmpty(searchParam.getKeyword())){
boolQuery.must(QueryBuilders.matchQuery("skuTitle",searchParam.getKeyword()));
}
// filter按照三级分类ID查询
if(searchParam.getCatalog3Id()!=null){
boolQuery.filter(QueryBuilders.termQuery("catalogId",searchParam.getCatalog3Id()));
}
// filter按照品牌ID查询
if(searchParam.getBrandId()!=null && !searchParam.getBrandId().isEmpty()){
boolQuery.filter(QueryBuilders.termsQuery("brandId",searchParam.getBrandId()));
}
// filter按照属性ID查询
if(searchParam.getAttrs()!=null && !searchParam.getAttrs().isEmpty()){
for (String attrStr : searchParam.getAttrs()) {
BoolQueryBuilder nestedBoolQuery = QueryBuilders.boolQuery();
String[] attr = attrStr.split("_");
String attrId = attr[0];//属性ID
String[] attrValues = attr[1].split(":");//属性值
nestedBoolQuery.must(QueryBuilders.termQuery("attrs.attrId",attrId));
nestedBoolQuery.must(QueryBuilders.termsQuery("attrs.attrValue",attrValues));
// 每一个都必须有一个嵌入式的查询
NestedQueryBuilder attrs = QueryBuilders.nestedQuery("attrs", nestedBoolQuery, ScoreMode.None);
boolQuery.filter(attrs);
}
}
// 按照库存进行查询
if(searchParam.getHasStock()!=null){
boolQuery.filter(QueryBuilders.termQuery("hasStock", searchParam.getHasStock()==1));
}
// 按照价格区间
if(!StringUtils.isEmpty(searchParam.getSkuPrice())){
RangeQueryBuilder rangeQuery = QueryBuilders.rangeQuery("skuPrice");
String[] price = searchParam.getSkuPrice().split("_");
if(price.length == 2){
rangeQuery.gte(price[0]).lte(price[1]);
}
else if (price.length == 1) {
if(searchParam.getSkuPrice().startsWith("_")){
rangeQuery.lte(price[0]);
}
else if(searchParam.getSkuPrice().endsWith("_")){
rangeQuery.gte(price[0]);
}
}
boolQuery.filter(rangeQuery);
}
// 把所有条件全部封装
sourceBuilder.query(boolQuery);
// 排序
if(!StringUtils.isEmpty(searchParam.getSort())){
String sort = searchParam.getSort();
String[] sortString = sort.split("_");
sourceBuilder.sort(sortString[0],sortString[1].equalsIgnoreCase("asc")?SortOrder.ASC:SortOrder.DESC);
}
// 分页
sourceBuilder.size(EsConstant.PRODUCT_PAGESIZE);
if(searchParam.getPageNum()!=null){
sourceBuilder.from((searchParam.getPageNum()-1)*EsConstant.PRODUCT_PAGESIZE);
}
// 高亮
if (!StringUtils.isEmpty(searchParam.getKeyword())){
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.field("skuTitle");
highlightBuilder.preTags("<b style='color:red'>");
highlightBuilder.postTags("</b>");
sourceBuilder.highlighter(highlightBuilder);
}
// 品牌聚合
TermsAggregationBuilder brandAgg = AggregationBuilders.terms("brand_agg").field("brandId").size(50);
// 品牌聚合的品牌名字子聚合
brandAgg.subAggregation(AggregationBuilders.terms("brand_name_agg").field("brandName").size(1));
// 品牌聚合的品牌图片子聚合
brandAgg.subAggregation(AggregationBuilders.terms("brand_img_agg").field("brandImg").size(1));
// 把品牌聚合放里面
sourceBuilder.aggregation(brandAgg);
// 分类聚合
TermsAggregationBuilder catalogAgg = AggregationBuilders.terms("catalog_agg").field("catalogId").size(50);
// 分类聚合的品牌名字子聚合
catalogAgg.subAggregation(AggregationBuilders.terms("catalog_name_agg").field("catalogName").size(1));
// 把分类聚合放里面
sourceBuilder.aggregation(catalogAgg);
// 属性聚合
NestedAggregationBuilder attrAgg = AggregationBuilders.nested("attr_agg", "attrs");
// 属性ID聚合查询
TermsAggregationBuilder attrIdAgg = AggregationBuilders.terms("attr_id_agg").field("attrs.attrId").size(50);
// 属性名子聚合
attrIdAgg.subAggregation(AggregationBuilders.terms("attr_name_agg").field("attrs.attrName").size(1));
// 属性值子聚合
attrIdAgg.subAggregation(AggregationBuilders.terms("attr_value_agg").field("attrs.attrValue").size(50));
// 把属性ID聚合查询放进属性内嵌查询
attrAgg.subAggregation(attrIdAgg);
// 把属性聚合放里面
sourceBuilder.aggregation(attrAgg);
return new SearchRequest(new String[]{EsConstant.PRODUCT_INDEX},sourceBuilder);
}
}
package com.alatus.search.service.impl;
import com.alatus.common.to.es.SkuEsModel;
import com.alatus.search.vo.*;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.TypeReference;
import com.alatus.common.utils.R;
import com.alatus.search.config.MallElasticSearchConfig;
import com.alatus.search.constant.EsConstant;
import com.alatus.search.feign.ProductFeignService;
import com.alatus.search.service.MallSearchService;
import org.apache.commons.lang.StringUtils;
import org.apache.lucene.search.join.ScoreMode;
import org.elasticsearch.action.search.SearchRequest;
import org.elasticsearch.action.search.SearchResponse;
import org.elasticsearch.client.RestHighLevelClient;
import org.elasticsearch.index.query.BoolQueryBuilder;
import org.elasticsearch.index.query.NestedQueryBuilder;
import org.elasticsearch.index.query.QueryBuilders;
import org.elasticsearch.index.query.RangeQueryBuilder;
import org.elasticsearch.search.SearchHit;
import org.elasticsearch.search.SearchHits;
import org.elasticsearch.search.aggregations.AggregationBuilders;
import org.elasticsearch.search.aggregations.bucket.nested.NestedAggregationBuilder;
import org.elasticsearch.search.aggregations.bucket.nested.ParsedNested;
import org.elasticsearch.search.aggregations.bucket.terms.ParsedLongTerms;
import org.elasticsearch.search.aggregations.bucket.terms.ParsedStringTerms;
import org.elasticsearch.search.aggregations.bucket.terms.Terms;
import org.elasticsearch.search.aggregations.bucket.terms.TermsAggregationBuilder;
import org.elasticsearch.search.builder.SearchSourceBuilder;
import org.elasticsearch.search.fetch.subphase.highlight.HighlightBuilder;
import org.elasticsearch.search.sort.SortOrder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
@Service
public class MallSearchServiceImpl implements MallSearchService {
@Autowired
private RestHighLevelClient client;
@Autowired
private ProductFeignService productFeignService;
@Override
public SearchResult search(SearchParam searchParam) {
// 动态构建出查询所需要的DSL语句
SearchResult searchResult = null;
// 准备检索请求
SearchRequest searchRequest = buildSearchRequest(searchParam);
try {
// 执行查询检索请求
SearchResponse response = client.search(searchRequest, MallElasticSearchConfig.COMMON_OPTIONS);
// 分析响应数据并封装成返回的数据
searchResult = buildSearchResult(response,searchParam);
} catch (IOException e) {
throw new RuntimeException(e);
}
return searchResult;
}
private SearchResult buildSearchResult(SearchResponse response,SearchParam searchParam) {
SearchResult result = new SearchResult();
SearchHits hits = response.getHits();
// 返回所有查询到的商品
if(hits.getHits()!=null&&hits.getHits().length>0){
List<SkuEsModel> skuEsModelList = new ArrayList<>();
for (SearchHit hit : hits.getHits()) {
String sourceAsString = hit.getSourceAsString();
SkuEsModel skuEsModel = JSON.parseObject(sourceAsString, SkuEsModel.class);
if(!StringUtils.isEmpty(searchParam.getKeyword())){
//拿到高亮信息显示标题
skuEsModel.setSkuTitle(hit.getHighlightFields().get("skuTitle").getFragments()[0].toString());
}
skuEsModelList.add(skuEsModel);
}
result.setProducts(skuEsModelList);
}
// 当前涉及到的所有属性信息
ParsedNested attrAgg = response.getAggregations().get("attr_agg");
ParsedLongTerms attrIdAgg = attrAgg.getAggregations().get("attr_id_agg");
List<SearchResult.AttrVo> attrVoList = new ArrayList<>();
for (Terms.Bucket bucket : attrIdAgg.getBuckets()) {
SearchResult.AttrVo attrVo = new SearchResult.AttrVo();
// 设置属性ID
attrVo.setAttrId(Long.parseLong(bucket.getKeyAsString()));
// 设置属性名字
ParsedStringTerms attrNameAgg = bucket.getAggregations().get("attr_name_agg");
attrVo.setAttrName(attrNameAgg.getBuckets().get(0).getKeyAsString());
// 设置属性值
ParsedStringTerms attrValueAgg = bucket.getAggregations().get("attr_value_agg");
List<String> attrValue = new ArrayList<>();
for (Terms.Bucket attrValueAggBucket : attrValueAgg.getBuckets()) {
attrValue.add(attrValueAggBucket.getKeyAsString());
}
attrVo.setAttrValue(attrValue);
attrVoList.add(attrVo);
}
result.setAttrs(attrVoList);
// 当前商品涉及到的所有品牌信息
ParsedLongTerms brandAgg = response.getAggregations().get("brand_agg");
List<SearchResult.BrandVo> brandVoList = new ArrayList<>();
for (Terms.Bucket bucket : brandAgg.getBuckets()) {
SearchResult.BrandVo brandVo = new SearchResult.BrandVo();
// 设置品牌ID
brandVo.setBrandId(Long.parseLong(bucket.getKeyAsString()));
// 设置品牌名字
ParsedStringTerms brandNameAgg = bucket.getAggregations().get("brand_name_agg");
brandVo.setBrandName(brandNameAgg.getBuckets().get(0).getKeyAsString());
// 设置品牌图片
ParsedStringTerms brandImgAgg = bucket.getAggregations().get("brand_img_agg");
brandVo.setBrandImg(brandImgAgg.getBuckets().get(0).getKeyAsString());
brandVoList.add(brandVo);
}
result.setBrands(brandVoList);
// 当前商品涉及到的所有分类信息
ParsedLongTerms catalogAgg = response.getAggregations().get("catalog_agg");
List<SearchResult.CatalogVo> catalogVoList = new ArrayList<>();
for (Terms.Bucket bucket : catalogAgg.getBuckets()) {
SearchResult.CatalogVo catalogVo = new SearchResult.CatalogVo();
// 设置分类ID
catalogVo.setCatalogId(Long.parseLong(bucket.getKeyAsString()));
// 获取分类ID下分类名字的子聚合
ParsedStringTerms catalogNameAgg = bucket.getAggregations().get("catalog_name_agg");
// 设置分类名字
catalogVo.setCatalogName(catalogNameAgg.getBuckets().get(0).getKeyAsString());
catalogVoList.add(catalogVo);
}
result.setCatalogs(catalogVoList);
// 分页信息页码
if(searchParam.getPageNum()!=null){
result.setPageNum(searchParam.getPageNum());
}
// 总记录数
long total = hits.getTotalHits().value;
result.setTotal(total);
// 总页码
Integer totalPage = ((total%EsConstant.PRODUCT_PAGESIZE==0)?(int)(total/EsConstant.PRODUCT_PAGESIZE):(int)((total/EsConstant.PRODUCT_PAGESIZE)+1));
result.setTotalPages(totalPage);
if(searchParam.getAttrs()!=null&&!searchParam.getAttrs().isEmpty()){
// 构建面包屑导航
List<SearchResult.NavVo> navVoList = searchParam.getAttrs().stream().map(attr -> {
// 分析每一个传递的Attr信息,构建navVo
SearchResult.NavVo navVo = new SearchResult.NavVo();
String[] attrs = attr.split("_");
navVo.setNavValue(attrs[1]);
R info = productFeignService.info(Long.parseLong(attrs[0]));
if(info.getCode()==0){
navVo.setNavName(info.get("attr",new TypeReference<AttrResponseVo>(){}).getAttrName());
}
else{
navVo.setNavName(attrs[0]);
}
// TODO 取消面包屑以后,我们怎么跳转
// 将请求地址的URL当前部分置空,拿到所有的查询条件,去掉当前的
String replace = replaceQueryString(searchParam, attr, "attrs");
navVo.setLink("http://search.alatusmall.com/list.html?"+replace);
return navVo;
}).collect(Collectors.toList());
result.setNavs(navVoList);
}
// TODO 品牌
if(searchParam.getBrandId()!=null&&!searchParam.getBrandId().isEmpty()){
SearchResult.NavVo navVo = new SearchResult.NavVo();
navVo.setNavName("品牌");
// TODO 远程查询所有的品牌信息
R brandsInfo = productFeignService.brandsInfo(searchParam.getBrandId());
StringBuilder brandName = new StringBuilder();
if(brandsInfo.getCode()==0){
List<BrandVo> brands = brandsInfo.get("brands", new TypeReference<List<BrandVo>>(){});
String replaced = null;
for (BrandVo brand : brands) {
brandName.append(brand.getName()+";");
replaced = replaceQueryString(searchParam, brand.getBrandId().toString(), "brandId");
}
navVo.setNavValue(brandName.toString());
navVo.setLink("http://search.alatusmall.com/list.html?"+replaced);
}
result.getNavs().add(navVo);
}
// TODO 分类
if(searchParam.getCatalog3Id()!=null){
SearchResult.NavVo navVo = new SearchResult.NavVo();
// TODO 远程查询所有的类目信息
R catInfo = productFeignService.catInfo(searchParam.getCatalog3Id());
if(catInfo.getCode()==0){
CategoryVo category = catInfo.get("category", new TypeReference<CategoryVo>(){});
navVo.setNavName("分类");
navVo.setNavValue(category.getName());
String replaced = replaceQueryString(searchParam, category.getCatId().toString(),"catalog3Id");
navVo.setLink("http://search.alatusmall.com/list.html?"+replaced);
}
result.getNavs().add(navVo);
}
return result;
}
private String replaceQueryString(SearchParam searchParam,String attr,String key){
String encode = null;
searchParam.set_queryString(searchParam.get_queryString().replace("&&",""));
try {
encode = URLEncoder.encode(attr, "UTF-8");
} catch (UnsupportedEncodingException e) {
throw new RuntimeException(e);
}
String change = key+"=" + encode;
return searchParam.get_queryString().replace(change,"");
}
//准备检索请求
private SearchRequest buildSearchRequest(SearchParam searchParam) {
// 构建DSL语句
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
// 查询条件,模糊查询,过滤,按照属性,分类品牌,价格区间,库存
// 构建了bool-query
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
// must
if(!StringUtils.isEmpty(searchParam.getKeyword())){
boolQuery.must(QueryBuilders.matchQuery("skuTitle",searchParam.getKeyword()));
}
// filter按照三级分类ID查询
if(searchParam.getCatalog3Id()!=null){
boolQuery.filter(QueryBuilders.termQuery("catalogId",searchParam.getCatalog3Id()));
}
// filter按照品牌ID查询
if(searchParam.getBrandId()!=null && !searchParam.getBrandId().isEmpty()){
boolQuery.filter(QueryBuilders.termsQuery("brandId",searchParam.getBrandId()));
}
// filter按照属性ID查询
if(searchParam.getAttrs()!=null && !searchParam.getAttrs().isEmpty()){
for (String attrStr : searchParam.getAttrs()) {
BoolQueryBuilder nestedBoolQuery = QueryBuilders.boolQuery();
String[] attr = attrStr.split("_");
String attrId = attr[0];//属性ID
String[] attrValues = attr[1].split(":");//属性值
nestedBoolQuery.must(QueryBuilders.termQuery("attrs.attrId",attrId));
nestedBoolQuery.must(QueryBuilders.termsQuery("attrs.attrValue",attrValues));
// 每一个都必须有一个嵌入式的查询
NestedQueryBuilder attrs = QueryBuilders.nestedQuery("attrs", nestedBoolQuery, ScoreMode.None);
boolQuery.filter(attrs);
}
}
// 按照库存进行查询
if(searchParam.getHasStock()!=null){
boolQuery.filter(QueryBuilders.termQuery("hasStock", searchParam.getHasStock()==1));
}
// 按照价格区间
if(!StringUtils.isEmpty(searchParam.getSkuPrice())){
RangeQueryBuilder rangeQuery = QueryBuilders.rangeQuery("skuPrice");
String[] price = searchParam.getSkuPrice().split("_");
if(price.length == 2){
rangeQuery.gte(price[0]).lte(price[1]);
}
else if (price.length == 1) {
if(searchParam.getSkuPrice().startsWith("_")){
rangeQuery.lte(price[0]);
}
else if(searchParam.getSkuPrice().endsWith("_")){
rangeQuery.gte(price[0]);
}
}
boolQuery.filter(rangeQuery);
}
// 把所有条件全部封装
sourceBuilder.query(boolQuery);
// 排序
if(!StringUtils.isEmpty(searchParam.getSort())){
String sort = searchParam.getSort();
String[] sortString = sort.split("_");
sourceBuilder.sort(sortString[0],sortString[1].equalsIgnoreCase("asc")?SortOrder.ASC:SortOrder.DESC);
}
// 分页
sourceBuilder.size(EsConstant.PRODUCT_PAGESIZE);
if(searchParam.getPageNum()!=null){
sourceBuilder.from((searchParam.getPageNum()-1)*EsConstant.PRODUCT_PAGESIZE);
}
// 高亮
if (!StringUtils.isEmpty(searchParam.getKeyword())){
HighlightBuilder highlightBuilder = new HighlightBuilder();
highlightBuilder.field("skuTitle");
highlightBuilder.preTags("<b style='color:red'>");
highlightBuilder.postTags("</b>");
sourceBuilder.highlighter(highlightBuilder);
}
// 品牌聚合
TermsAggregationBuilder brandAgg = AggregationBuilders.terms("brand_agg").field("brandId").size(50);
// 品牌聚合的品牌名字子聚合
brandAgg.subAggregation(AggregationBuilders.terms("brand_name_agg").field("brandName").size(1));
// 品牌聚合的品牌图片子聚合
brandAgg.subAggregation(AggregationBuilders.terms("brand_img_agg").field("brandImg").size(1));
// 把品牌聚合放里面
sourceBuilder.aggregation(brandAgg);
// 分类聚合
TermsAggregationBuilder catalogAgg = AggregationBuilders.terms("catalog_agg").field("catalogId").size(50);
// 分类聚合的品牌名字子聚合
catalogAgg.subAggregation(AggregationBuilders.terms("catalog_name_agg").field("catalogName").size(1));
// 把分类聚合放里面
sourceBuilder.aggregation(catalogAgg);
// 属性聚合
NestedAggregationBuilder attrAgg = AggregationBuilders.nested("attr_agg", "attrs");
// 属性ID聚合查询
TermsAggregationBuilder attrIdAgg = AggregationBuilders.terms("attr_id_agg").field("attrs.attrId").size(50);
// 属性名子聚合
attrIdAgg.subAggregation(AggregationBuilders.terms("attr_name_agg").field("attrs.attrName").size(1));
// 属性值子聚合
attrIdAgg.subAggregation(AggregationBuilders.terms("attr_value_agg").field("attrs.attrValue").size(50));
// 把属性ID聚合查询放进属性内嵌查询
attrAgg.subAggregation(attrIdAgg);
// 把属性聚合放里面
sourceBuilder.aggregation(attrAgg);
return new SearchRequest(new String[]{EsConstant.PRODUCT_INDEX},sourceBuilder);
}
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/search/css/index.css">
<link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
<script src="/static/search/js/jquery-3.2.1.min.js"></script>
<script src="/static/search/js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<!--头部-->
<div class="header_head">
<div class="header_head_box">
<b class="header_head_p">
<div style="overflow: hidden">
<a href="http://alatusmall.com" class="header_head_p_a1" style="width:73px;">
直营商城首页
</a>
<a class="header_head_p_a">
<img src="/static/search/img/img_05.png" style="border-radius: 50%;"/>
北京</a>
</div>
<div class="header_head_p_cs">
<a style="background: #C81623;color: #fff;">北京</a>
<a >上海</a>
<a >天津</a>
<a >重庆</a>
<a >河北</a>
<a >山西</a>
<a >河南</a>
<a >辽宁</a>
<a >吉林</a>
<a >黑龙江</a>
<a >内蒙古</a>
<a >江苏</a>
<a >山东</a>
<a >安徽</a>
<a >浙江</a>
<a >福建</a>
<a >湖北</a>
<a >湖南</a>
<a >广东</a>
<a >广西</a>
<a >江西</a>
<a >四川</a>
<a >海南</a>
<a >贵州</a>
<a >云南</a>
<a >西藏</a>
<a >陕西</a>
<a >甘肃</a>
<a >青海</a>
<a >宁夏</a>
<a >新疆</a>
<a >港澳</a>
<a >台湾</a>
<a >钓鱼岛</a>
<a >海外</a>
</div>
</b>
<ul>
<li>
<a class="li_2">你好，请登录</a>
</li>
<li>
<a >免费注册</a>
</li>
<span>|</span>
<li>
<a >我的订单</a>
</li>
<span>|</span>
<li class="header_wdjd" style="width:80px;">
<a >我的直营商城</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wdjd_txt">
<ul>
<li>
<a >待处理订单</a>
</li>
<li>
<a >消息</a>
</li>
<li>
<a >返修退换货</a>
</li>
<li>
<a >我的回答</a>
</li>
<li>
<a >降价商品</a>
</li>
<li>
<a >我的关注</a>
</li>
</ul>
<ul>
<li>
<a >我的京豆</a>
</li>
<li>
<a >我的优惠券</a>
</li>
<li>
<a >我的白条</a>
</li>
<li>
<a >我的理财</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li>
<a >直营商城会员</a>
</li>
<span>|</span>
<li>
<a >企业采购</a>
</li>
<span>|</span>
<li class="header_wdjd1">
<a >客户服务</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wdjd_txt">
<ul>
<p style="width:100%;">客户</p>
<li>
<a >帮助中心</a>
</li>
<li>
<a >售后服务</a>
</li>
<li>
<a >在线客服</a>
</li>
<li>
<a >意见建议</a>
</li>
<li>
<a >电话客服</a>
</li>
<li>
<a >客服邮箱</a>
</li>
<li>
<a >金融资讯</a>
</li>
<li>
<a >售全球客服</a>
</li>
</ul>
<ul>
<p style="width:100%;">商户</p>
<li>
<a >合作招商</a>
</li>
<li>
<a >学习中心</a>
</li>
<li>
<a >商家后台</a>
</li>
<li>
<a >京麦工作台</a>
</li>
<li>
<a >商家帮助</a>
</li>
<li>
<a >规则平台</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_wzdh">
<a >网站导航</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wzdh_txt">
<ul style="width: 25%;">
<p style="width:100%;">特色主题</p>
<li>
<a >直营商城试用</a>
</li>
<li>
<a >直营商城金融</a>
</li>
<li>
<a >全球售</a>
</li>
<li>
<a >国际站</a>
</li>
<li>
<a >直营商城会员</a>
</li>
<li>
<a >直营商城预售</a>
</li>
<li>
<a >买什么</a>
</li>
<li>
<a >俄语站</a>
</li>
<li>
<a >装机大师</a>
</li>
<li>
<a >0元评测</a>
</li>
<li>
<a >定期送</a>
</li>
<li>
<a >港澳售</a>
</li>
<li>
<a >优惠券</a>
</li>
<li>
<a >秒杀</a>
</li>
<li>
<a >闪购</a>
</li>
<li>
<a >印尼站</a>
</li>
<li>
<a >直营商城金融科技</a>
</li>
<li>
<a >In货推荐</a>
</li>
<li>
<a >陪伴计划</a>
</li>
<li>
<a >出海招商</a>
</li>
</ul>
<ul style="width: 20%;">
<p style="width:100%;">行业频道</p>
<li>
<a >手机</a>
</li>
<li>
<a >智能数码</a>
</li>
<li>
<a >玩3c</a>
</li>
<li>
<a >电脑办公</a>
</li>
<li>
<a >家用电器</a>
</li>
<li>
<a >直营商城智能</a>
</li>
<li>
<a >服装城</a>
</li>
<li>
<a >美妆馆</a>
</li>
<li>
<a >家装城</a>
</li>
<li>
<a >母婴</a>
</li>
<li>
<a >食品</a>
</li>
<li>
<a >运动户外</a>
</li>
<li>
<a >农资频道</a>
</li>
<li>
<a >整车</a>
</li>
<li>
<a >图书</a>
</li>
</ul>
<ul style="width: 21%;">
<p style="width:100%;">生活服务</p>
<li>
<a >白条</a>
</li>
<li>
<a >直营商城金融App</a>
</li>
<li>
<a >直营商城小金库</a>
</li>
<li>
<a >理财</a>
</li>
<li>
<a >智能家电</a>
</li>
<li>
<a >话费</a>
</li>
<li>
<a >水电煤</a>
</li>
<li>
<a >彩票</a>
</li>
<li>
<a >旅行</a>
</li>
<li>
<a >机票酒店</a>
</li>
<li>
<a >电影票</a>
</li>
<li>
<a >直营商城到家</a>
</li>
<li>
<a >直营商城众测</a>
</li>
<li>
<a >游戏</a>
</li>
</ul>
<ul style="width: 23%; border-right: 0;">
<p style="width:100%;">更多精选</p>
<li>
<a >合作招商</a>
</li>
<li>
<a >直营商城通信</a>
</li>
<li>
<a >直营商城E卡</a>
</li>
<li>
<a >企业采购</a>
</li>
<li>
<a >服务市场</a>
</li>
<li>
<a >办公生活馆</a>
</li>
<li>
<a >乡村招募</a>
</li>
<li>
<a >校园加盟</a>
</li>
<li>
<a >京友帮</a>
</li>
<li>
<a >直营商城社区</a>
</li>
<li>
<a >智能社区</a>
</li>
<li>
<a >游戏社区</a>
</li>
<li>
<a >知识产权维权</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_sjjd">
<a >手机直营商城</a>
<div class="header_sjjd_div">
<img src="/static/search/img/01.png" />
</div>
</li>
</ul>
</div>
</div>
<!--搜索导航-->
<div class="header_sous">
<div class="logo">
<a href="http://alatusmall.com"><img src="/static/search/image/logo1.jpg" alt=""></a>
</div>
<div class="header_form">
<input type="text" placeholder="手机" id="keywordInput" th:value="${param.keyword}" onkeydown="if(event.key === 'Enter') { searchByKeyword(); }"/>
<a href="javascript:searchByKeyword()">搜索</a>
</div>
<div class="header_ico">
<div class="header_gw">
<span><a >我的购物车</a></span>
<img src="/static/search/image/settleup-@1x.png" />
<span>0</span>
</div>
<div class="header_ko">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</div>
<div class="header_form_nav">
<ul>
<li>
<a >直营商城之家</a>
</li>
<li>
<a >直营商城专卖店</a>
</li>
<li>
<a >平板</a>
</li>
<li>
<a >电脑</a>
</li>
<li>
<a >ipad</a>
</li>
</ul>
</div>
<nav>
<ul>
<li class="nav_li1">
<a >全部商品分类</a>
</li>
<li class="nav_li">
<a >服装城</a>
</li>
<li class="nav_li">
<a >没装馆</a>
</li>
<li class="nav_li">
<a >超市</a>
</li>
<li class="nav_li">
<a >生鲜</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a >全球购</a>
</li>
<li class="nav_li">
<a >闪购</a>
</li>
<li class="nav_li">
<a >拍卖</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a >金融</a>
</li>
</ul>
</nav>
<div class="header_main_left">
<ul>
<li>
<a class="header_main_left_a"><b>家用电器</b></a>
</li>
<li class="header_li2">
<a class="header_main_left_a"><b>手机</b> / <b>运营商</b> / <b>数码</b></a>
<div class="header_main_left_main">
<div class="header_sj">
<a class="header_sj_a">玩3c</a>
<a class="header_sj_a">手机频道</a>
<a class="header_sj_a">网上营业厅</a>
<a class="header_sj_a">配件选购中心</a>
<a class="header_sj_a">企业购</a>
<a class="header_sj_a">以旧换新</a>
</div>
<ol class="header_ol">
<a style="color: #111;" class="aaa">手机通讯 ></a>
<li>
<a style="color: #999;">手机</a>
<a style="color: #999;">对讲机</a>
<a style="color: #999;">手机维修</a>
<a style="color: #999;">以旧换新</a>
</li>
<a style="color: #111;" class="aaa">运营商 ></a>
<li>
<a style="color: #999;">合约机</a>
<a style="color: #999;">固话宽带</a>
<a style="color: #999;">办套餐</a>
<a style="color: #999;">从话费/流量</a>
<a style="color: #999;">中国电信</a>
<a style="color: #999;">中国移动</a>
<a style="color: #999;">中国联通</a>
<a style="color: #999;">直营商城通信</a>
<a style="color: #999;">170选号</a>
</li>
<a style="color: #111;" class="aaa">手机配件 ></a>
<li style="height: 60px;">
<a style="color: #999;">手机壳</a>
<a style="color: #999;">贴膜</a>
<a style="color: #999;">手机储存卡</a>
<a style="color: #999;">数据线</a>
<a style="color: #999;">存电器</a>
<a style="color: #999;">手机耳机</a>
<a style="color: #999;">创业配件</a>
<a style="color: #999;">手机饰品</a>
<a style="color: #999;">手机电池</a>
<a style="color: #999;">苹果周边</a>
<a style="color: #999;">移动电源</a>
<a style="color: #999;">蓝牙耳机</a>
<a style="color: #999;">手机支架</a>
<a style="color: #999;">车载配件</a>
<a style="color: #999;">拍照配件</a>
</li>
<a style="color: #111;" class="aaa">摄影摄像 ></a>
<li style="height: 60px;">
<a style="color: #999;">数码相机</a>
<a style="color: #999;">单电/微单相机</a>
<a style="color: #999;">单反相机</a>
<a style="color: #999;">拍立得</a>
<a style="color: #999;">运动相机</a>
<a style="color: #999;">摄像机</a>
<a style="color: #999;">镜头</a>
<a style="color: #999;">户外器材</a>
<a style="color: #999;">影棚器材</a>
<a style="color: #999;">冲印服务</a>
<a style="color: #999;">数码相框</a>
</li>
<a style="color: #111;" class="aaa">数码配件 ></a>
<li style="height: 60px;">
<a style="color: #999;">三脚架/云台</a>
<a style="color: #999;">相机包</a>
<a style="color: #999;">滤镜</a>
<a style="color: #999;">散光灯/手柄</a>
<a style="color: #999;">相机清洁</a>
<a style="color: #999;">机身附件</a>
<a style="color: #999;">镜头附件</a>
<a style="color: #999;">读卡器</a>
<a style="color: #999;">支架</a>
<a style="color: #999;">电池/存电器</a>
</li>
<a style="color: #111;" class="aaa">影音娱乐 ></a>
<li>
<a style="color: #999;">耳机/耳麦</a>
<a style="color: #999;">音箱/音响</a>
<a style="color: #999;">智能音箱</a>
<a style="color: #999;">便携/无线音箱</a>
<a style="color: #999;">收音机</a>
<a style="color: #999;">麦克风</a>
<a style="color: #999;">MP3/MP4</a>
<a style="color: #999;">专业音频</a>
</li>
<a style="color: #111;" class="aaa">智能设备 ></a>
<li style="height: 60px;">
<a style="color: #999;">智能手环</a>
<a style="color: #999;">智能手表</a>
<a style="color: #999;">智能眼镜</a>
<a style="color: #999;">智能机器人</a>
<a style="color: #999;">运动跟踪器</a>
<a style="color: #999;">健康监测</a>
<a style="color: #999;">智能配饰</a>
<a style="color: #999;">智能家居</a>
<a style="color: #999;">体感车</a>
<a style="color: #999;">无人机</a>
<a style="color: #999;">其他配件</a>
</li>
<a style="color: #111;" class="aaa">电子教育 ></a>
<li>
<a style="color: #999;">学生平板</a>
<a style="color: #999;">点读机</a>
<a style="color: #999;">早教益智</a>
<a style="color: #999;">录音笔</a>
<a style="color: #999;">电纸书</a>
<a style="color: #999;">电子词典</a>
<a style="color: #999;">复读机</a>
</li>
</ol>
<div class="header_r">
<div class="header_r_tu">
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
</div>
<div class="header_r_tu1">
<a ><img src="/static/search/img/JD_ash7.png" /></a>
<a ><img src="/static/search/img/JD_ash6.png" /></a>
</div>
</div>
</div>
</li>
<li>
<a class="header_main_left_a"><b>电脑</b> / <b>办公</b></a>
</li>
<li>
<a class="header_main_left_a"><b>家居</b> / <b>家具</b> / <b>家装</b> / <b>厨具</b></a>
</li>
<li>
<a class="header_main_left_a"><b>男装</b> / <b>女装</b> / <b>童装</b> / <b>内衣</b></a>
</li>
<li>
<a class="header_main_left_a"><b>美妆个护 </b>/ <b>宠物</b></a>
</li>
<li>
<a class="header_main_left_a"><b>女鞋</b> / <b>箱包</b> / <b>钟表</b> / <b>珠宝</b></a>
</li>
<li>
<a class="header_main_left_a"><b>男鞋</b> / <b>运动</b> / <b>户外</b></a>
</li>
<li>
<a class="header_main_left_a"><b>汽车</b> / <b>汽车用品</b></a>
</li>
<li>
<a class="header_main_left_a"><b>母婴</b> / <b>玩具乐器</b></a>
</li>
<li>
<a class="header_main_left_a"><b>食品</b> / <b>酒类</b> / <b>生鲜</b> / <b>特产</b></a>
</li>
<li>
<a class="header_main_left_a"><b>礼品鲜花</b> / <b>农资绿植</b></a>
</li>
<li>
<a class="header_main_left_a"><b>医药保健</b> / <b>计生情趣</b></a>
</li>
<li>
<a class="header_main_left_a"><b>图书</b> / <b>音箱</b>/ <b>电子书</b></a>
</li>
<li>
<a class="header_main_left_a"><b>机票</b> / <b>酒店</b> / <b>旅游</b> / <b>生活</b></a>
</li>
<li>
<a class="header_main_left_a"><b>理财</b> / <b>众筹</b> / <b>白条</b> / <b>保险</b></a>
</li>
</ul>
</div>
</div>
<hr style="border: 1px solid red;margin-top: -7px;">
<!--热卖促销-->
<div class="JD_temai">
<div class="JD_main">
<div class="JD_left">
<div class="hd">
热卖推荐
</div>
<div class="bd mc">
<ul class="mc">
<li>
<a class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
<li>
<a class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥1699.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
<li style="margin-right: 0">
<a class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_right">
<div class="hd"> 促销活动</div>
<div class="bd">
<ul>
<li> . <a >红米千元全面屏手机上市</a></li>
<li> . <a >锤子坚果Pro2火爆预约中</a></li>
<li> . <a >大牌新品 疯狂抢购</a></li>
<li> . <a >X20 vivo蓝新色上市</a></li>
<li> . <a >荣耀畅玩7X新品上市</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--手机-->
<div class="JD_ipone">
<div class="JD_ipone_bar">
<div class="JD_ipone_one a">
<a >手机</a>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one b">
<a class="qqq">手机通讯录 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a >手机通讯</a>
<a >运营商</a>
<a >手机配件</a>
<a >手机服务</a>
</div>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one c">
<a class="qqq">手机 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a >手机</a>
<a >老人机</a>
<a >对讲机</a>
<a >女性手机</a>
<a >超续航手机</a>
<a >全面屏手机</a>
<a >拍照手机</a>
<a >游戏手机</a>
</div>
</div>
<div class="JD_ipone_one c" th:each="nav:${result.getNavs()}">
<!-- 遍历面包屑导航-->
<a class="qqq" th:href="${nav.getLink()}">
<span th:text="${nav.getNavName()}"></span>:
<span th:text="${nav.getNavValue()}"></span> x
</a>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
</div>
</div>
</div>
<!--商品筛选和排序-->
<div class="JD_banner w">
<div class="JD_nav">
<div class="JD_selector">
<!--手机商品筛选-->
<div class="title">
<h3><b>手机</b><em>商品筛选</em></h3>
<div class="st-ext">共 <span th:text="${result.getTotal()}"></span>个商品 </div>
</div>
<div class="JD_nav_logo" th:with="brandId=${param.brandId},catelogId=${param.catalog3Id}">
<!--品牌-->
<div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
<div class="sl_key">
<span><b>品牌：</b></span>
</div>
<div class="sl_value">
<div class="sl_value_logo">
<ul>
<li th:each="brand:${result.getBrands()}">
<a th:href="${'javascript:searchProducts("brandId",'+brand.getBrandId()+')'}">
<img th:src="${brand.getBrandImg()}" alt="">
<div th:text="${brand.getBrandName()}">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="sl_ext">
<a >
更多
<i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a >
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--分类-->
<div th:if="${#strings.isEmpty(catelogId)}" class="JD_pre">
<div class="sl_key">
<span><b>分类：</b></span>
</div>
<div class="sl_value">
<ul>
<li th:each="catalog:${result.getCatalogs()}"><a th:href="${'javascript:searchProducts("catalog3Id",'+catalog.getCatalogId()+')'}" th:text="${catalog.getCatalogName()}"></a></li>
</ul>
</div>
<div class="sl_ext">
<a >
更多
<i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a >
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--属性-->
<div class="JD_pre" th:each="attr:${result.getAttrs()}">
<div class="sl_key">
<span th:text="${attr.getAttrName()+'：'}"></span>
</div>
<div class="sl_value">
<ul>
<li th:each="value:${attr.getAttrValue()}"><a th:href="${'javascript:searchProducts("attrs","'+attr.getAttrId()+'_'+value+'")'}" th:text="${value}"></a></li>
</ul>
</div>
</div>
</div>
<div class="JD_show">
<a >
<span>
更多选项（ CPU核数、网络、机身颜色 等）
</span>
</a>
</div>
</div>
<!--排序-->
<div class="JD_banner_main">
<!--商品精选-->
<div class="JD_con_left">
<div class="JD_con_left_bar">
<div class="JD_con_one">
<div class="mt">
<h3>商品精选</h3>
<span>广告</span>
</div>
<div class="mc">
<ul>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">12466</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">12466</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">15600</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">5369</a>
人评价
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one">
<div class="mt">
<h3>达人选购</h3>
</div>
<div class="mc">
<ul>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a >
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a >
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a >
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a >
<em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one" style="border:none;">
<div class="mt">
<h3>商品精选</h3>
<span>广告</span>
</div>
<div class="mc">
<ul>
<li>
<a ><img src="/static/search/img/599a806bn9d829c1c.jpg" alt=""></a>
</li>
<li>
<a ><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--综合排序-->
<div class="JD_con_right">
<div class="filter">
<!--综合排序-->
<div class="filter_top">
<div class="filter_top_left" th:with="sort=${param.sort},skuRange=${param.skuPrice}">
<a sort="hotScore"
th:attr="style=${(#strings.isEmpty(sort)||#strings.startsWith(sort,'hotScore'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'hotScore')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
综合排序[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'hotScore'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a sort="saleCount"
th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
销量[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'saleCount'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a sort="skuPrice"
th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
价格[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'skuPrice'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a>评论分</a>
<a>上架时间</a>
<input style="width: 100px;margin-left: 30px;" id="skuPriceFrom" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringBefore(skuRange,'_'))}"> -
<input style="width: 100px;" id="skuPriceTo" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringAfter(skuRange,'_'))}">
<button id="skuPriceSearchBtn">确定</button>
</div>
<div class="filter_top_right">
<span class="fp-text">
<b>1</b><em>/</em><i>169</i>
</span>
<a class="prev"><</a>
<a class="next"> > </a>
</div>
</div>
<!--收货地址-->
<div class="filter_bottom">
<div class="filter_bottom_left">
<div class="fs-cell">收货地</div>
<div class="dizhi">
<div class="dizhi_show">
<em>北京朝阳区三环以内</em>
<b></b>
</div>
</div>
<div class="dizhi_con">
<ul id="tab">
<li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab2" value="2">朝阳 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab3" value="3">三环以内 <img src="/static/search/image/down-@1x.png" alt=""></li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
<a >北京</a>
<a >上海</a>
<a >天津</a>
<a >重庆</a>
<a >河北</a>
<a >山西</a>
<a >河南</a>
<a >辽宁</a>
<a >吉林</a>
<a >黑龙江</a>
<a >内蒙古</a>
<a >江苏</a>
<a >山东</a>
<a >安徽</a>
<a >浙江</a>
<a >福建</a>
<a >湖北</a>
<a >湖南</a>
<a >广东</a>
<a >广西</a>
<a >江西</a>
<a >四川</a>
<a >海南</a>
<a >贵州</a>
<a >云南</a>
<a >西藏</a>
<a >陕西</a>
<a >甘肃</a>
<a >青海</a>
<a >宁夏</a>
<a >新疆</a>
<a >港澳</a>
<a >台湾</a>
<a >钓鱼岛</a>
<a >海外</a>
</div>
<div id="content2">
<a >朝阳区</a>
<a >海淀区</a>
<a >西城区</a>
<a >东城区</a>
<a >大兴区</a>
<a >丰台区</a>
<a >昌平区</a>
<a >顺义区</a>
</div>
<div id="content3">
<a >三环以内</a>
<a >管庄</a>
<a >北苑</a>
<a >定福庄</a>
<a >三环到四环之间</a>
<a >四环到五环之间</a>
<a >五环到六环之间</a>
</div>
</div>
</div>
</div>
<div class="filter_bottom_right">
<ul>
<li>
<a >
<i></i>
直营商城配送
</a>
</li>
<li>
<a >
<i></i>
京尊达 </a>
</li>
<li>
<a >
<i></i>
货到付款
</a>
</li>
<li>
<a class="hasStock" th:with="checked=${param.hasStock}">
<input th:checked="${#strings.equals(checked,'1')}" type="checkbox" class="hasStock" id="hasStockChecked">
仅显示有货
</a>
</li>
<li>
<a >
<i></i>
可配送全球
</a>
</li>
</ul>
</div>
</div>
<!--排序内容;每四个一组-->
<div class="rig_tab">
<div th:each="product:${result.getProducts()}">
<div class="ico">
<i class="iconfont icon-weiguanzhu"></i>
<a >关注</a>
</div>
<p class="da">
<a th:title="${product.getSkuTitle()}">
<img th:src="${product.getSkuImg()}" class="dim">
</a>
</p>
<ul class="tab_im">
<li><a title="黑色">
<img th:src="${product.getSkuImg()}" c></a></li>
</ul>
<p class="tab_R">
<span th:text="'¥'+${product.getSkuPrice()}"></span>
</p>
<p class="tab_JE">
<a th:utext="${product.getSkuTitle()}">
</a>
</p>
<p class="tab_PI">已有<span>11万+</span>热门评价
<a >二手有售</a>
</p>
<p class="tab_CP"><a title="直营商城Apple产品专营店">直营商城Apple产品...</a>
<a href='#' title="联系供应商进行咨询">
<img src="/static/search/img/xcxc.png">
</a>
</p>
<div class="tab_FO">
<div class="FO_one">
<p>自营
<span>直营商城自营,品质保证</span>
</p>
<p>满赠
<span>该商品参加满赠活动</span>
</p>
</div>
</div>
</div>
</div>
<!--分页-->
<div class="filter_page">
<div class="page_wrap">
<span class="page_span1">
<a class="page_a" th:attr="pn=${(result.getPageNum())-1}" th:if="${result.getPageNum()>1}">
< 上一页
</a>
<a class="page_a" th:attr="pn=${i},style=${i==result.getPageNum()?'border: 0;color:#ee2222;background: #fff':''}"
th:each="i:${#numbers.sequence(1, result.totalPages)}" th:text="${i}">
[[${i}]]
</a>
<a th:if="${(result.getTotalPages()-result.getPageNum())>10}" style="border: 0;font-size: 20px;color: #999;background: #fff">...</a>
<a class="page_a" th:attr="pn=${(result.getPageNum())+1}" th:if="${result.getPageNum()<result.getTotalPages()}">
下一页 >
</a>
</span>
<span class="page_span2">
<em>共<b>[[${result.getTotalPages()}]]</b>页 到第</em>
<input type="number" th:value="${result.getPageNum()}" id="inputPage">
<em>页</em>
<a id="choosePage">确定</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--商品精选-->
<div class="JD_jx">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">商品精选</strong>
<img src="/static/search/image/u-ad.gif" alt="">
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--猜你喜欢-->
<div class="JD_cnxh">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">猜你喜欢</strong>
<a >
<img src="/static/search/image/update.png" alt="">
换一批
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59bf3c.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--我的足迹-->
<div class="JD_zuji">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">我的足迹</strong>
<a >
更多浏览记录
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59e58a11Nc38676d5.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥2998.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a28acccN73689386.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥88.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a1690ddN441b5dce.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥199.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a02bde7N7d4453b1.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥799.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a122dbeN044ebf19.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥599.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59c493a7N3f9b9c85.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥699.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a08f6f6N5bab2c1c.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥715.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="width: 1210px;margin: 0 auto;margin-bottom: 10px"><img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt=""></div>
<!--底部-->
<footer class="footer">
<div class="footer_top">
<ul>
<li>
<span></span>
<h3>品类齐全，轻松购物</h3>
</li>
<li>
<span></span>
<h3>多仓直发，极速配发</h3>
</li>
<li>
<span></span>
<h3>正品行货，精致服务</h3>
</li>
<li>
<span></span>
<h3>天天低价，畅选无忧</h3>
</li>
</ul>
</div>
<div class="footer_center">
<ol>
<li>购物指南</li>
<li><a style="color: rgb(114, 114, 114);">购物流程</a>
</li>
<li><a style="color: rgb(114, 114, 114);">会员介绍</a>
</li>
<li><a >生活旅行</a>
</li>
<li><a style="color: rgb(114, 114, 114);">常见问题</a>
</li>
<li><a >大家电</a>
</li>
<li><a style="color: rgb(114, 114, 114);">联系客服</a>
</li>
</ol>
<ol>
<li>配送方式</li>
<li><a style="color: rgb(114, 114, 114);">上门自提</a>
</li>
<li><a style="color: rgb(114, 114, 114);">211限时达</a>
</li>
<li><a style="color: rgb(114, 114, 114);">配送服务查询</a>
</li>
<li><a style="color: rgb(114, 114, 114);">配送费收取标准</a>
</li>
<li><a style="color: rgb(114, 114, 114);">海外配送</a>
</li>
</ol>
<ol>
<li>支付方式</li>
<li><a style="color: rgb(114, 114, 114);">货到付款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">在线支付</a>
</li>
<li><a style="color: rgb(114, 114, 114);">分期付款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">邮局汇款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">公司转账</a>
</li>
</ol>
<ol>
<li>售后服务</li>
<li><a style="color: rgb(114, 114, 114);">售后政策</a>
</li>
<li><a style="color: rgb(114, 114, 114);">价格保护</a>
</li>
<li><a style="color: rgb(114, 114, 114);">退款说明</a>
</li>
<li><a style="color: rgb(114, 114, 114);">返修/退换货</a>
</li>
<li><a >取消订单</a>
</li>
</ol>
<ol>
<li>特色服务</li>
<li><a style="color: rgb(114, 114, 114);">夺宝岛</a>
</li>
<li><a >DIY装机</a>
</li>
<li><a style="color: rgb(114, 114, 114);">延保服务</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城E卡</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城通信</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城gulimall+</a>
</li>
</ol>
<ol>
<li>直营商城自营覆盖区域</li>
<li>
直营商城已向全国2661个区县提供自<br> 营配送服务，支持货到付款、
<br> POS机刷卡和售后上门服务。
</li>
<li><a style="color: rgb(114, 114, 114);">查看详情></a>
</li>
</ol>
</div>
<div class="footer_foot">
<p class="footer_p p1">
<a >关于我们</a>
<span></span>
<a style="color: rgb(114, 114, 114);">联系我们</a>
<span></span>
<a >联系客服</a>
<span></span>
<a style="color: rgb(114, 114, 114);">合作招商</a>
<span></span>
<a style="color: rgb(114, 114, 114);">商家帮助</a>
<span></span>
<a style="color: rgb(114, 114, 114);">营销中心</a>
<span></span>
<a style="color: rgb(114, 114, 114);">手机直营商城</a>
<span></span>
<a style="color: rgb(114, 114, 114);">友情链接</a>
<span></span>
<a style="color: rgb(114, 114, 114);">销售联盟</a>
<span></span>
<a style="color: rgb(114, 114, 114);">直营商城社区</a>
<span></span>
<a style="color: rgb(114, 114, 114);">风险监测</a>
<span></span>
<a >隐私政策</a>
<span></span>
<a >直营商城公益</a>
<span></span>
<a style="color: rgb(114, 114, 114);">English Site</a>
<span></span>
<a >media & IR</a>
</p>
<p class="footer_p">
<a >京公网安备 11000002000088号</a>
<span></span>
<a >京ICP证070359号</a>
<span></span>
<a >互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
<span></span>
<a >新出发京零 字第大120007号</a>
</p>
<p class="footer_p">
<a >互联网出版许可证编号新出网证(京)字150号</a>
<span></span>
<a >出版物经营许可证</a>
<span></span>
<a >网络文化经营许可证京网文[2014]2148-348号</a>
<span></span>
<a >违法和不良信息举报电话：4006561155</a>
</p>
<p class="footer_p">
<a >Copyright © 2004 - 2017 直营商城JD.com 版权所有</a>
<span></span>
<a >消费者维权热线：4006067733</a>
<a >经营证照</a>
</p>
<p class="footer_p">
<a >直营商城旗下网站:</a>
<a >直营商城支付</a>
<span></span>
<a >直营商城云</a>
</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>
<!--右侧侧边栏-->
<div class="header_bar">
<div class="header_bar_box">
<ul>
<li>
<a ><img src="/static/search/img/wo.png" /></a>
<div class="div">
<a >直营商城会员</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/gouwuche.png" /></a>
<div class="div">
<a >购物车</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/taoxin.png" /></a>
<div class="div">
<a >我的关注</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/shi.png" /></a>
<div class="div">
<a >我的足迹</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a >我的消息</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/qianbao.png" /></a>
<div class="div">
<a >资讯JIMI</a>
</div>
</li>
</ul>
<ul>
<li>
<a ><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
<div class="div">
<a >顶部</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a >反馈</a>
</div>
</li>
</ul>
</div>
</div>
<script>
$(".sl_ext a:nth-child(1)").hover(function(){
$(this).children("b").stop(true).animate({top:"3px"},50);
$(this).children("i").stop(true).animate({top:"-23px"},50)
},function(){
$(this).children("b").stop(true).animate({top:"24px"},50);
$(this).children("i").stop(true).animate({top:"3px"},50)
});
$(".sl_ext a:nth-child(2)").hover(function(){
$(this).children("span").stop(true).animate({top:"-1px"},100);
$(this).children("i").stop(true).animate({top:"-14px"},100).css({display:"none"})
},function(){
$(this).children("span").stop(true).animate({top:"14px"},100);
$(this).children("i").stop(true).animate({top:"-1px"},100).css({display:"block"})
});
$('.tab_im img').hover(function(){
var a=$(this).prop('src');
var index=$(this).parents('li').index();
$(this).parents('li').css('border','2px solid red').siblings('li').css('border','1px solid #ccc');
$(this).parents('ul').prev().find('img').prop('src',a);
$(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display','block').siblings('a').css('display','none');
$(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display','block').siblings('span').css('display','none')
});
$(".JD_ipone_one").hover(function(){
$(this).children("div").css({display:"block"})
},function(){
$(this).children("div").css({display:"none"})
});
$("#tab>li").click(function() {
let i = $(this).index();
$("#container>div").hide().eq(i).show()
});
$(".dizhi_show").hover(function(){
$(".dizhi_con").css({display:"block"})
},function(){
$(".dizhi_con").css({display:"none"})
});
$(".dizhi_con").hover(function(){
$(this).css({display:"block"})
},function(){
$(this).css({display:"none"})
});
//显示隐藏
let $li = $(".JD_nav_logo>div:gt(3)").hide();
$('.JD_show span').click(function(){
if($li.is(':hidden')){
$li.show();
$(this).css({width:"86px"}).text('收起 ^');
}else{
$li.hide();
$('.JD_show span').css({width:"291px"}).text('更多选项（ CPU核数、网络、机身颜色 等）');
}
return false;
});
$(".rig_tab>div").hover(function(){
var i = $(this).index();
$(this).find('.ico').css({display:'block'}).stop(true).animate({top:"190px"},300)
},function(){
var i = $(this).index();
$(this).find('.ico').css({display:'none'}).stop(true).animate({top:"230px"})
});
$('.header_main_left>ul>li').hover(function() {
$(this).css({
background: "#f0f0f0"
}).find('.header_main_left_main').stop(true).fadeIn(300)
}, function() {
$(this).css({
background: "#fff"
}).find(".header_main_left_a").css({
color: "#000"
});
$(this).find('.header_main_left_main').stop(true).fadeOut(100)
});
$(".header_sj a").hover(function() {
$(this).css({
background: "#444"
})
}, function() {
$(this).css({
background: "#6e6568"
})
});
$(".nav_li1 a").hover(function(){
$(".header_main_left").stop(true).fadeIn()
},function(){
$(".header_main_left").stop(true).fadeOut()
});
$(".header_main_left").hover(function(){
$(this).stop(true).fadeIn()
},function(){
$(this).stop(true).fadeOut()
});
//右侧侧边栏
$(".header_bar_box ul li").hover(function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "block"
}).stop(true).animate({
left: "-60px"
}, 300)
}, function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "none"
}).stop(true).animate({
left: "0"
}, 300)
});
//底部
$(".footer_foot .p1 a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
});
$(".footer .footer_center ol li a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
})
function searchProducts(name,value){
let href = location.href + "";
if(href.indexOf("?")===-1){
location.href = location.href + "?" + name + "=" + value;
}
else{
location.href = location.href+"&"+name+"="+value;
}
}
function replaceParamVal(url, paramName, replaceVal) {
let oUrl = url.toString();
let re = eval('/('+paramName+'=)([^&]*)/gi');
let nUrl = oUrl.replace(re,paramName+'='+replaceVal);
return nUrl;
}
function hrefChange(key,value){
let href = location.href + "";
if(href.indexOf(key)===-1){
searchProducts(key,value);
}
else{
location.href = replaceParamVal(href,key,value);
}
}
$(".page_a").click(function(){
let pn = $(this).attr("pn");
hrefChange("pageNum",pn);
});
document.getElementById("choosePage").onclick = function(){
let inputPage = document.getElementById("inputPage").value;
hrefChange("pageNum",inputPage);
}
$(".sort_a").click(function(){
$(this).toggleClass("desc");
// 获取排序字段
let sort = $(this).attr("sort");
// 获取升降序
let value = $(this).hasClass("desc")?"_desc":"_asc";
// 跳转到指定位置
let sortWay = sort + value;
hrefChange("sort",sortWay);
});
$("#skuPriceSearchBtn").click(function(){
// 拼上价格区间的值
let from = $("#skuPriceFrom").val();
let to = $("#skuPriceTo").val();
let query = from + "_" + to;
let href = location.href+"";
if(href.indexOf("skuPrice=")===-1){
searchProducts("skuPrice",query);
}
else{
location.href = replaceParamVal(href,"skuPrice",query);
}
});
$(".hasStock").change(function(){
if($("#hasStockChecked").prop('checked')){
hrefChange("hasStock",1);
}
else{
hrefChange("hasStock",0);
}
});
function searchByKeyword(){
hrefChange("keyword",$("#keywordInput").val());
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/search/css/index.css">
<link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
<script src="/static/search/js/jquery-3.2.1.min.js"></script>
<script src="/static/search/js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<!--头部-->
<div class="header_head">
<div class="header_head_box">
<b class="header_head_p">
<div style="overflow: hidden">
<a href="http://alatusmall.com" class="header_head_p_a1" style="width:73px;">
直营商城首页
</a>
<a class="header_head_p_a">
<img src="/static/search/img/img_05.png" style="border-radius: 50%;"/>
北京</a>
</div>
<div class="header_head_p_cs">
<a style="background: #C81623;color: #fff;">北京</a>
<a >上海</a>
<a >天津</a>
<a >重庆</a>
<a >河北</a>
<a >山西</a>
<a >河南</a>
<a >辽宁</a>
<a >吉林</a>
<a >黑龙江</a>
<a >内蒙古</a>
<a >江苏</a>
<a >山东</a>
<a >安徽</a>
<a >浙江</a>
<a >福建</a>
<a >湖北</a>
<a >湖南</a>
<a >广东</a>
<a >广西</a>
<a >江西</a>
<a >四川</a>
<a >海南</a>
<a >贵州</a>
<a >云南</a>
<a >西藏</a>
<a >陕西</a>
<a >甘肃</a>
<a >青海</a>
<a >宁夏</a>
<a >新疆</a>
<a >港澳</a>
<a >台湾</a>
<a >钓鱼岛</a>
<a >海外</a>
</div>
</b>
<ul>
<li>
<a class="li_2">你好，请登录</a>
</li>
<li>
<a >免费注册</a>
</li>
<span>|</span>
<li>
<a >我的订单</a>
</li>
<span>|</span>
<li class="header_wdjd" style="width:80px;">
<a >我的直营商城</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wdjd_txt">
<ul>
<li>
<a >待处理订单</a>
</li>
<li>
<a >消息</a>
</li>
<li>
<a >返修退换货</a>
</li>
<li>
<a >我的回答</a>
</li>
<li>
<a >降价商品</a>
</li>
<li>
<a >我的关注</a>
</li>
</ul>
<ul>
<li>
<a >我的京豆</a>
</li>
<li>
<a >我的优惠券</a>
</li>
<li>
<a >我的白条</a>
</li>
<li>
<a >我的理财</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li>
<a >直营商城会员</a>
</li>
<span>|</span>
<li>
<a >企业采购</a>
</li>
<span>|</span>
<li class="header_wdjd1">
<a >客户服务</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wdjd_txt">
<ul>
<p style="width:100%;">客户</p>
<li>
<a >帮助中心</a>
</li>
<li>
<a >售后服务</a>
</li>
<li>
<a >在线客服</a>
</li>
<li>
<a >意见建议</a>
</li>
<li>
<a >电话客服</a>
</li>
<li>
<a >客服邮箱</a>
</li>
<li>
<a >金融资讯</a>
</li>
<li>
<a >售全球客服</a>
</li>
</ul>
<ul>
<p style="width:100%;">商户</p>
<li>
<a >合作招商</a>
</li>
<li>
<a >学习中心</a>
</li>
<li>
<a >商家后台</a>
</li>
<li>
<a >京麦工作台</a>
</li>
<li>
<a >商家帮助</a>
</li>
<li>
<a >规则平台</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_wzdh">
<a >网站导航</a>
<img src="/static/search/image/down-@1x.png" />
<b class="glyphicon glyphicon-menu-down"></b>
<div class="header_wzdh_txt">
<ul style="width: 25%;">
<p style="width:100%;">特色主题</p>
<li>
<a >直营商城试用</a>
</li>
<li>
<a >直营商城金融</a>
</li>
<li>
<a >全球售</a>
</li>
<li>
<a >国际站</a>
</li>
<li>
<a >直营商城会员</a>
</li>
<li>
<a >直营商城预售</a>
</li>
<li>
<a >买什么</a>
</li>
<li>
<a >俄语站</a>
</li>
<li>
<a >装机大师</a>
</li>
<li>
<a >0元评测</a>
</li>
<li>
<a >定期送</a>
</li>
<li>
<a >港澳售</a>
</li>
<li>
<a >优惠券</a>
</li>
<li>
<a >秒杀</a>
</li>
<li>
<a >闪购</a>
</li>
<li>
<a >印尼站</a>
</li>
<li>
<a >直营商城金融科技</a>
</li>
<li>
<a >In货推荐</a>
</li>
<li>
<a >陪伴计划</a>
</li>
<li>
<a >出海招商</a>
</li>
</ul>
<ul style="width: 20%;">
<p style="width:100%;">行业频道</p>
<li>
<a >手机</a>
</li>
<li>
<a >智能数码</a>
</li>
<li>
<a >玩3c</a>
</li>
<li>
<a >电脑办公</a>
</li>
<li>
<a >家用电器</a>
</li>
<li>
<a >直营商城智能</a>
</li>
<li>
<a >服装城</a>
</li>
<li>
<a >美妆馆</a>
</li>
<li>
<a >家装城</a>
</li>
<li>
<a >母婴</a>
</li>
<li>
<a >食品</a>
</li>
<li>
<a >运动户外</a>
</li>
<li>
<a >农资频道</a>
</li>
<li>
<a >整车</a>
</li>
<li>
<a >图书</a>
</li>
</ul>
<ul style="width: 21%;">
<p style="width:100%;">生活服务</p>
<li>
<a >白条</a>
</li>
<li>
<a >直营商城金融App</a>
</li>
<li>
<a >直营商城小金库</a>
</li>
<li>
<a >理财</a>
</li>
<li>
<a >智能家电</a>
</li>
<li>
<a >话费</a>
</li>
<li>
<a >水电煤</a>
</li>
<li>
<a >彩票</a>
</li>
<li>
<a >旅行</a>
</li>
<li>
<a >机票酒店</a>
</li>
<li>
<a >电影票</a>
</li>
<li>
<a >直营商城到家</a>
</li>
<li>
<a >直营商城众测</a>
</li>
<li>
<a >游戏</a>
</li>
</ul>
<ul style="width: 23%; border-right: 0;">
<p style="width:100%;">更多精选</p>
<li>
<a >合作招商</a>
</li>
<li>
<a >直营商城通信</a>
</li>
<li>
<a >直营商城E卡</a>
</li>
<li>
<a >企业采购</a>
</li>
<li>
<a >服务市场</a>
</li>
<li>
<a >办公生活馆</a>
</li>
<li>
<a >乡村招募</a>
</li>
<li>
<a >校园加盟</a>
</li>
<li>
<a >京友帮</a>
</li>
<li>
<a >直营商城社区</a>
</li>
<li>
<a >智能社区</a>
</li>
<li>
<a >游戏社区</a>
</li>
<li>
<a >知识产权维权</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_sjjd">
<a >手机直营商城</a>
<div class="header_sjjd_div">
<img src="/static/search/img/01.png" />
</div>
</li>
</ul>
</div>
</div>
<!--搜索导航-->
<div class="header_sous">
<div class="logo">
<a href="http://alatusmall.com"><img src="/static/search/image/logo1.jpg" alt=""></a>
</div>
<div class="header_form">
<input type="text" placeholder="手机" id="keywordInput" th:value="${param.keyword}" οnkeydοwn="if(event.key === 'Enter') { searchByKeyword(); }"/>
<a href="javascript:searchByKeyword()">搜索</a>
</div>
<div class="header_ico">
<div class="header_gw">
<span><a >我的购物车</a></span>
<img src="/static/search/image/settleup-@1x.png" />
<span>0</span>
</div>
<div class="header_ko">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</div>
<div class="header_form_nav">
<ul>
<li>
<a >直营商城之家</a>
</li>
<li>
<a >直营商城专卖店</a>
</li>
<li>
<a >平板</a>
</li>
<li>
<a >电脑</a>
</li>
<li>
<a >ipad</a>
</li>
</ul>
</div>
<nav>
<ul>
<li class="nav_li1">
<a >全部商品分类</a>
</li>
<li class="nav_li">
<a >服装城</a>
</li>
<li class="nav_li">
<a >没装馆</a>
</li>
<li class="nav_li">
<a >超市</a>
</li>
<li class="nav_li">
<a >生鲜</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a >全球购</a>
</li>
<li class="nav_li">
<a >闪购</a>
</li>
<li class="nav_li">
<a >拍卖</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a >金融</a>
</li>
</ul>
</nav>
<div class="header_main_left">
<ul>
<li>
<a class="header_main_left_a"><b>家用电器</b></a>
</li>
<li class="header_li2">
<a class="header_main_left_a"><b>手机</b> / <b>运营商</b> / <b>数码</b></a>
<div class="header_main_left_main">
<div class="header_sj">
<a class="header_sj_a">玩3c</a>
<a class="header_sj_a">手机频道</a>
<a class="header_sj_a">网上营业厅</a>
<a class="header_sj_a">配件选购中心</a>
<a class="header_sj_a">企业购</a>
<a class="header_sj_a">以旧换新</a>
</div>
<ol class="header_ol">
<a style="color: #111;" class="aaa">手机通讯 ></a>
<li>
<a style="color: #999;">手机</a>
<a style="color: #999;">对讲机</a>
<a style="color: #999;">手机维修</a>
<a style="color: #999;">以旧换新</a>
</li>
<a style="color: #111;" class="aaa">运营商 ></a>
<li>
<a style="color: #999;">合约机</a>
<a style="color: #999;">固话宽带</a>
<a style="color: #999;">办套餐</a>
<a style="color: #999;">从话费/流量</a>
<a style="color: #999;">中国电信</a>
<a style="color: #999;">中国移动</a>
<a style="color: #999;">中国联通</a>
<a style="color: #999;">直营商城通信</a>
<a style="color: #999;">170选号</a>
</li>
<a style="color: #111;" class="aaa">手机配件 ></a>
<li style="height: 60px;">
<a style="color: #999;">手机壳</a>
<a style="color: #999;">贴膜</a>
<a style="color: #999;">手机储存卡</a>
<a style="color: #999;">数据线</a>
<a style="color: #999;">存电器</a>
<a style="color: #999;">手机耳机</a>
<a style="color: #999;">创业配件</a>
<a style="color: #999;">手机饰品</a>
<a style="color: #999;">手机电池</a>
<a style="color: #999;">苹果周边</a>
<a style="color: #999;">移动电源</a>
<a style="color: #999;">蓝牙耳机</a>
<a style="color: #999;">手机支架</a>
<a style="color: #999;">车载配件</a>
<a style="color: #999;">拍照配件</a>
</li>
<a style="color: #111;" class="aaa">摄影摄像 ></a>
<li style="height: 60px;">
<a style="color: #999;">数码相机</a>
<a style="color: #999;">单电/微单相机</a>
<a style="color: #999;">单反相机</a>
<a style="color: #999;">拍立得</a>
<a style="color: #999;">运动相机</a>
<a style="color: #999;">摄像机</a>
<a style="color: #999;">镜头</a>
<a style="color: #999;">户外器材</a>
<a style="color: #999;">影棚器材</a>
<a style="color: #999;">冲印服务</a>
<a style="color: #999;">数码相框</a>
</li>
<a style="color: #111;" class="aaa">数码配件 ></a>
<li style="height: 60px;">
<a style="color: #999;">三脚架/云台</a>
<a style="color: #999;">相机包</a>
<a style="color: #999;">滤镜</a>
<a style="color: #999;">散光灯/手柄</a>
<a style="color: #999;">相机清洁</a>
<a style="color: #999;">机身附件</a>
<a style="color: #999;">镜头附件</a>
<a style="color: #999;">读卡器</a>
<a style="color: #999;">支架</a>
<a style="color: #999;">电池/存电器</a>
</li>
<a style="color: #111;" class="aaa">影音娱乐 ></a>
<li>
<a style="color: #999;">耳机/耳麦</a>
<a style="color: #999;">音箱/音响</a>
<a style="color: #999;">智能音箱</a>
<a style="color: #999;">便携/无线音箱</a>
<a style="color: #999;">收音机</a>
<a style="color: #999;">麦克风</a>
<a style="color: #999;">MP3/MP4</a>
<a style="color: #999;">专业音频</a>
</li>
<a style="color: #111;" class="aaa">智能设备 ></a>
<li style="height: 60px;">
<a style="color: #999;">智能手环</a>
<a style="color: #999;">智能手表</a>
<a style="color: #999;">智能眼镜</a>
<a style="color: #999;">智能机器人</a>
<a style="color: #999;">运动跟踪器</a>
<a style="color: #999;">健康监测</a>
<a style="color: #999;">智能配饰</a>
<a style="color: #999;">智能家居</a>
<a style="color: #999;">体感车</a>
<a style="color: #999;">无人机</a>
<a style="color: #999;">其他配件</a>
</li>
<a style="color: #111;" class="aaa">电子教育 ></a>
<li>
<a style="color: #999;">学生平板</a>
<a style="color: #999;">点读机</a>
<a style="color: #999;">早教益智</a>
<a style="color: #999;">录音笔</a>
<a style="color: #999;">电纸书</a>
<a style="color: #999;">电子词典</a>
<a style="color: #999;">复读机</a>
</li>
</ol>
<div class="header_r">
<div class="header_r_tu">
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a ><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
</div>
<div class="header_r_tu1">
<a ><img src="/static/search/img/JD_ash7.png" /></a>
<a ><img src="/static/search/img/JD_ash6.png" /></a>
</div>
</div>
</div>
</li>
<li>
<a class="header_main_left_a"><b>电脑</b> / <b>办公</b></a>
</li>
<li>
<a class="header_main_left_a"><b>家居</b> / <b>家具</b> / <b>家装</b> / <b>厨具</b></a>
</li>
<li>
<a class="header_main_left_a"><b>男装</b> / <b>女装</b> / <b>童装</b> / <b>内衣</b></a>
</li>
<li>
<a class="header_main_left_a"><b>美妆个护 </b>/ <b>宠物</b></a>
</li>
<li>
<a class="header_main_left_a"><b>女鞋</b> / <b>箱包</b> / <b>钟表</b> / <b>珠宝</b></a>
</li>
<li>
<a class="header_main_left_a"><b>男鞋</b> / <b>运动</b> / <b>户外</b></a>
</li>
<li>
<a class="header_main_left_a"><b>汽车</b> / <b>汽车用品</b></a>
</li>
<li>
<a class="header_main_left_a"><b>母婴</b> / <b>玩具乐器</b></a>
</li>
<li>
<a class="header_main_left_a"><b>食品</b> / <b>酒类</b> / <b>生鲜</b> / <b>特产</b></a>
</li>
<li>
<a class="header_main_left_a"><b>礼品鲜花</b> / <b>农资绿植</b></a>
</li>
<li>
<a class="header_main_left_a"><b>医药保健</b> / <b>计生情趣</b></a>
</li>
<li>
<a class="header_main_left_a"><b>图书</b> / <b>音箱</b>/ <b>电子书</b></a>
</li>
<li>
<a class="header_main_left_a"><b>机票</b> / <b>酒店</b> / <b>旅游</b> / <b>生活</b></a>
</li>
<li>
<a class="header_main_left_a"><b>理财</b> / <b>众筹</b> / <b>白条</b> / <b>保险</b></a>
</li>
</ul>
</div>
</div>
<hr style="border: 1px solid red;margin-top: -7px;">
<!--热卖促销-->
<div class="JD_temai">
<div class="JD_main">
<div class="JD_left">
<div class="hd">
热卖推荐
</div>
<div class="bd mc">
<ul class="mc">
<li>
<a class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
<li>
<a class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥1699.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
<li style="margin-right: 0">
<a class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a class="mc_div_a2">立即抢购</a>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_right">
<div class="hd"> 促销活动</div>
<div class="bd">
<ul>
<li> . <a >红米千元全面屏手机上市</a></li>
<li> . <a >锤子坚果Pro2火爆预约中</a></li>
<li> . <a >大牌新品 疯狂抢购</a></li>
<li> . <a >X20 vivo蓝新色上市</a></li>
<li> . <a >荣耀畅玩7X新品上市</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--手机-->
<div class="JD_ipone">
<div class="JD_ipone_bar">
<div class="JD_ipone_one a">
<a >手机</a>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one b">
<a class="qqq">手机通讯录 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a >手机通讯</a>
<a >运营商</a>
<a >手机配件</a>
<a >手机服务</a>
</div>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one c">
<a class="qqq">手机 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a >手机</a>
<a >老人机</a>
<a >对讲机</a>
<a >女性手机</a>
<a >超续航手机</a>
<a >全面屏手机</a>
<a >拍照手机</a>
<a >游戏手机</a>
</div>
</div>
<div class="JD_ipone_one c" th:each="nav:${result.getNavs()}">
<!-- 遍历面包屑导航-->
<a class="qqq" th:href="${nav.getLink()}">
<span th:text="${nav.getNavName()}"></span>:
<span th:text="${nav.getNavValue()}"></span> x
</a>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
</div>
</div>
</div>
<!--商品筛选和排序-->
<div class="JD_banner w">
<div class="JD_nav">
<div class="JD_selector">
<!--手机商品筛选-->
<div class="title">
<h3><b>手机</b><em>商品筛选</em></h3>
<div class="st-ext">共 <span th:text="${result.getTotal()}"></span>个商品 </div>
</div>
<div class="JD_nav_logo" th:with="brandId=${param.brandId},catelogId=${param.catalog3Id}">
<!--品牌-->
<div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
<div class="sl_key">
<span><b>品牌：</b></span>
</div>
<div class="sl_value">
<div class="sl_value_logo">
<ul>
<li th:each="brand:${result.getBrands()}">
<a th:href="${'javascript:searchProducts("brandId",'+brand.getBrandId()+')'}">
<img th:src="${brand.getBrandImg()}" alt="">
<div th:text="${brand.getBrandName()}">
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="sl_ext">
<a >
更多
<i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a >
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--分类-->
<div th:if="${#strings.isEmpty(catelogId)}" class="JD_pre">
<div class="sl_key">
<span><b>分类：</b></span>
</div>
<div class="sl_value">
<ul>
<li th:each="catalog:${result.getCatalogs()}"><a th:href="${'javascript:searchProducts("catalog3Id",'+catalog.getCatalogId()+')'}" th:text="${catalog.getCatalogName()}"></a></li>
</ul>
</div>
<div class="sl_ext">
<a >
更多
<i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a >
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--属性-->
<div class="JD_pre" th:each="attr:${result.getAttrs()}">
<div class="sl_key">
<span th:text="${attr.getAttrName()+'：'}"></span>
</div>
<div class="sl_value">
<ul>
<li th:each="value:${attr.getAttrValue()}"><a th:href="${'javascript:searchProducts("attrs","'+attr.getAttrId()+'_'+value+'")'}" th:text="${value}"></a></li>
</ul>
</div>
</div>
</div>
<div class="JD_show">
<a >
<span>
更多选项（ CPU核数、网络、机身颜色 等）
</span>
</a>
</div>
</div>
<!--排序-->
<div class="JD_banner_main">
<!--商品精选-->
<div class="JD_con_left">
<div class="JD_con_left_bar">
<div class="JD_con_one">
<div class="mt">
<h3>商品精选</h3>
<span>广告</span>
</div>
<div class="mc">
<ul>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">12466</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">12466</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">15600</a>
人评价
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a class="number">5369</a>
人评价
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one">
<div class="mt">
<h3>达人选购</h3>
</div>
<div class="mc">
<ul>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a >
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/59bf3c.jpg" alt=""></a>
<a >
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a >
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
</div>
</li>
<li>
<a title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a >
<em>vivo Xplay6 全网通 6GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one" style="border:none;">
<div class="mt">
<h3>商品精选</h3>
<span>广告</span>
</div>
<div class="mc">
<ul>
<li>
<a ><img src="/static/search/img/599a806bn9d829c1c.jpg" alt=""></a>
</li>
<li>
<a ><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--综合排序-->
<div class="JD_con_right">
<div class="filter">
<!--综合排序-->
<div class="filter_top">
<div class="filter_top_left" th:with="sort=${param.sort},skuRange=${param.skuPrice}">
<a sort="hotScore"
th:attr="style=${(#strings.isEmpty(sort)||#strings.startsWith(sort,'hotScore'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'hotScore')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
综合排序[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'hotScore'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a sort="saleCount"
th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'saleCount')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
销量[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'saleCount'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a sort="skuPrice"
th:attr="style=${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice'))?'color:#FFF;border-color:#e4393c;background:#e4393c':'color:#333;border-color:#CCC;background:#fff'}"
th:class="${(!#strings.isEmpty(sort)&&#strings.startsWith(sort,'skuPrice')&&#strings.endsWith(sort,'desc'))?'sort_a desc':'sort_a'}">
价格[[${((!#strings.isEmpty(sort))&&(#strings.startsWith(sort,'skuPrice'))&&(#strings.endsWith(sort,'desc')))?'↓':'↑'}]]
</a>
<a>评论分</a>
<a>上架时间</a>
<input style="width: 100px;margin-left: 30px;" id="skuPriceFrom" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringBefore(skuRange,'_'))}"> -
<input style="width: 100px;" id="skuPriceTo" type="number" th:value="${#strings.isEmpty(skuRange)?'':(#strings.substringAfter(skuRange,'_'))}">
<button id="skuPriceSearchBtn">确定</button>
</div>
<div class="filter_top_right">
<span class="fp-text">
<b>1</b><em>/</em><i>169</i>
</span>
<a class="prev"><</a>
<a class="next"> > </a>
</div>
</div>
<!--收货地址-->
<div class="filter_bottom">
<div class="filter_bottom_left">
<div class="fs-cell">收货地</div>
<div class="dizhi">
<div class="dizhi_show">
<em>北京朝阳区三环以内</em>
<b></b>
</div>
</div>
<div class="dizhi_con">
<ul id="tab">
<li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab2" value="2">朝阳 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab3" value="3">三环以内 <img src="/static/search/image/down-@1x.png" alt=""></li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
<a >北京</a>
<a >上海</a>
<a >天津</a>
<a >重庆</a>
<a >河北</a>
<a >山西</a>
<a >河南</a>
<a >辽宁</a>
<a >吉林</a>
<a >黑龙江</a>
<a >内蒙古</a>
<a >江苏</a>
<a >山东</a>
<a >安徽</a>
<a >浙江</a>
<a >福建</a>
<a >湖北</a>
<a >湖南</a>
<a >广东</a>
<a >广西</a>
<a >江西</a>
<a >四川</a>
<a >海南</a>
<a >贵州</a>
<a >云南</a>
<a >西藏</a>
<a >陕西</a>
<a >甘肃</a>
<a >青海</a>
<a >宁夏</a>
<a >新疆</a>
<a >港澳</a>
<a >台湾</a>
<a >钓鱼岛</a>
<a >海外</a>
</div>
<div id="content2">
<a >朝阳区</a>
<a >海淀区</a>
<a >西城区</a>
<a >东城区</a>
<a >大兴区</a>
<a >丰台区</a>
<a >昌平区</a>
<a >顺义区</a>
</div>
<div id="content3">
<a >三环以内</a>
<a >管庄</a>
<a >北苑</a>
<a >定福庄</a>
<a >三环到四环之间</a>
<a >四环到五环之间</a>
<a >五环到六环之间</a>
</div>
</div>
</div>
</div>
<div class="filter_bottom_right">
<ul>
<li>
<a >
<i></i>
直营商城配送
</a>
</li>
<li>
<a >
<i></i>
京尊达 </a>
</li>
<li>
<a >
<i></i>
货到付款
</a>
</li>
<li>
<a class="hasStock" th:with="checked=${param.hasStock}">
<input th:checked="${#strings.equals(checked,'1')}" type="checkbox" class="hasStock" id="hasStockChecked">
仅显示有货
</a>
</li>
<li>
<a >
<i></i>
可配送全球
</a>
</li>
</ul>
</div>
</div>
<!--排序内容;每四个一组-->
<div class="rig_tab">
<div th:each="product:${result.getProducts()}">
<div class="ico">
<i class="iconfont icon-weiguanzhu"></i>
<a >关注</a>
</div>
<p class="da">
<a th:title="${product.getSkuTitle()}">
<img th:src="${product.getSkuImg()}" class="dim">
</a>
</p>
<ul class="tab_im">
<li><a title="黑色">
<img th:src="${product.getSkuImg()}" c></a></li>
</ul>
<p class="tab_R">
<span th:text="'¥'+${product.getSkuPrice()}"></span>
</p>
<p class="tab_JE">
<a th:utext="${product.getSkuTitle()}">
</a>
</p>
<p class="tab_PI">已有<span>11万+</span>热门评价
<a >二手有售</a>
</p>
<p class="tab_CP"><a title="直营商城Apple产品专营店">直营商城Apple产品...</a>
<a href='#' title="联系供应商进行咨询">
<img src="/static/search/img/xcxc.png">
</a>
</p>
<div class="tab_FO">
<div class="FO_one">
<p>自营
<span>直营商城自营,品质保证</span>
</p>
<p>满赠
<span>该商品参加满赠活动</span>
</p>
</div>
</div>
</div>
</div>
<!--分页-->
<div class="filter_page">
<div class="page_wrap">
<span class="page_span1">
<a class="page_a" th:attr="pn=${(result.getPageNum())-1}" th:if="${result.getPageNum()>1}">
< 上一页
</a>
<a class="page_a" th:attr="pn=${i},style=${i==result.getPageNum()?'border: 0;color:#ee2222;background: #fff':''}"
th:each="i:${#numbers.sequence(1, result.totalPages)}" th:text="${i}">
[[${i}]]
</a>
<a th:if="${(result.getTotalPages()-result.getPageNum())>10}" style="border: 0;font-size: 20px;color: #999;background: #fff">...</a>
<a class="page_a" th:attr="pn=${(result.getPageNum())+1}" th:if="${result.getPageNum()<result.getTotalPages()}">
下一页 >
</a>
</span>
<span class="page_span2">
<em>共<b>[[${result.getTotalPages()}]]</b>页 到第</em>
<input type="number" th:value="${result.getPageNum()}" id="inputPage">
<em>页</em>
<a id="choosePage">确定</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--商品精选-->
<div class="JD_jx">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">商品精选</strong>
<img src="/static/search/image/u-ad.gif" alt="">
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a >15930</a>
<span>人好评</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--猜你喜欢-->
<div class="JD_cnxh">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">猜你喜欢</strong>
<a >
<img src="/static/search/image/update.png" alt="">
换一批
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59bf3c.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机"><img src="/static/search/img/59c493a7N3f9b9c86.jpg" alt=""></a>
</div>
<div class="mc_name">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a >已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--我的足迹-->
<div class="JD_zuji">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">我的足迹</strong>
<a >
更多浏览记录
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59e58a11Nc38676d5.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥2998.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a28acccN73689386.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥88.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a1690ddN441b5dce.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥199.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a02bde7N7d4453b1.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥799.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a122dbeN044ebf19.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥599.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59c493a7N3f9b9c85.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥699.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a08f6f6N5bab2c1c.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥715.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="width: 1210px;margin: 0 auto;margin-bottom: 10px"><img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt=""></div>
<!--底部-->
<footer class="footer">
<div class="footer_top">
<ul>
<li>
<span></span>
<h3>品类齐全，轻松购物</h3>
</li>
<li>
<span></span>
<h3>多仓直发，极速配发</h3>
</li>
<li>
<span></span>
<h3>正品行货，精致服务</h3>
</li>
<li>
<span></span>
<h3>天天低价，畅选无忧</h3>
</li>
</ul>
</div>
<div class="footer_center">
<ol>
<li>购物指南</li>
<li><a style="color: rgb(114, 114, 114);">购物流程</a>
</li>
<li><a style="color: rgb(114, 114, 114);">会员介绍</a>
</li>
<li><a >生活旅行</a>
</li>
<li><a style="color: rgb(114, 114, 114);">常见问题</a>
</li>
<li><a >大家电</a>
</li>
<li><a style="color: rgb(114, 114, 114);">联系客服</a>
</li>
</ol>
<ol>
<li>配送方式</li>
<li><a style="color: rgb(114, 114, 114);">上门自提</a>
</li>
<li><a style="color: rgb(114, 114, 114);">211限时达</a>
</li>
<li><a style="color: rgb(114, 114, 114);">配送服务查询</a>
</li>
<li><a style="color: rgb(114, 114, 114);">配送费收取标准</a>
</li>
<li><a style="color: rgb(114, 114, 114);">海外配送</a>
</li>
</ol>
<ol>
<li>支付方式</li>
<li><a style="color: rgb(114, 114, 114);">货到付款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">在线支付</a>
</li>
<li><a style="color: rgb(114, 114, 114);">分期付款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">邮局汇款</a>
</li>
<li><a style="color: rgb(114, 114, 114);">公司转账</a>
</li>
</ol>
<ol>
<li>售后服务</li>
<li><a style="color: rgb(114, 114, 114);">售后政策</a>
</li>
<li><a style="color: rgb(114, 114, 114);">价格保护</a>
</li>
<li><a style="color: rgb(114, 114, 114);">退款说明</a>
</li>
<li><a style="color: rgb(114, 114, 114);">返修/退换货</a>
</li>
<li><a >取消订单</a>
</li>
</ol>
<ol>
<li>特色服务</li>
<li><a style="color: rgb(114, 114, 114);">夺宝岛</a>
</li>
<li><a >DIY装机</a>
</li>
<li><a style="color: rgb(114, 114, 114);">延保服务</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城E卡</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城通信</a>
</li>
<li><a style="color: rgb(114, 114, 114);">直营商城gulimall+</a>
</li>
</ol>
<ol>
<li>直营商城自营覆盖区域</li>
<li>
直营商城已向全国2661个区县提供自<br> 营配送服务，支持货到付款、
<br> POS机刷卡和售后上门服务。
</li>
<li><a style="color: rgb(114, 114, 114);">查看详情></a>
</li>
</ol>
</div>
<div class="footer_foot">
<p class="footer_p p1">
<a >关于我们</a>
<span></span>
<a style="color: rgb(114, 114, 114);">联系我们</a>
<span></span>
<a >联系客服</a>
<span></span>
<a style="color: rgb(114, 114, 114);">合作招商</a>
<span></span>
<a style="color: rgb(114, 114, 114);">商家帮助</a>
<span></span>
<a style="color: rgb(114, 114, 114);">营销中心</a>
<span></span>
<a style="color: rgb(114, 114, 114);">手机直营商城</a>
<span></span>
<a style="color: rgb(114, 114, 114);">友情链接</a>
<span></span>
<a style="color: rgb(114, 114, 114);">销售联盟</a>
<span></span>
<a style="color: rgb(114, 114, 114);">直营商城社区</a>
<span></span>
<a style="color: rgb(114, 114, 114);">风险监测</a>
<span></span>
<a >隐私政策</a>
<span></span>
<a >直营商城公益</a>
<span></span>
<a style="color: rgb(114, 114, 114);">English Site</a>
<span></span>
<a >media & IR</a>
</p>
<p class="footer_p">
<a >京公网安备 11000002000088号</a>
<span></span>
<a >京ICP证070359号</a>
<span></span>
<a >互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
<span></span>
<a >新出发京零 字第大120007号</a>
</p>
<p class="footer_p">
<a >互联网出版许可证编号新出网证(京)字150号</a>
<span></span>
<a >出版物经营许可证</a>
<span></span>
<a >网络文化经营许可证京网文[2014]2148-348号</a>
<span></span>
<a >违法和不良信息举报电话：4006561155</a>
</p>
<p class="footer_p">
<a >Copyright © 2004 - 2017 直营商城JD.com 版权所有</a>
<span></span>
<a >消费者维权热线：4006067733</a>
<a >经营证照</a>
</p>
<p class="footer_p">
<a >直营商城旗下网站:</a>
<a >直营商城支付</a>
<span></span>
<a >直营商城云</a>
</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>
<!--右侧侧边栏-->
<div class="header_bar">
<div class="header_bar_box">
<ul>
<li>
<a ><img src="/static/search/img/wo.png" /></a>
<div class="div">
<a >直营商城会员</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/gouwuche.png" /></a>
<div class="div">
<a >购物车</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/taoxin.png" /></a>
<div class="div">
<a >我的关注</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/shi.png" /></a>
<div class="div">
<a >我的足迹</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a >我的消息</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/qianbao.png" /></a>
<div class="div">
<a >资讯JIMI</a>
</div>
</li>
</ul>
<ul>
<li>
<a ><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
<div class="div">
<a >顶部</a>
</div>
</li>
<li>
<a ><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a >反馈</a>
</div>
</li>
</ul>
</div>
</div>
<script>
$(".sl_ext a:nth-child(1)").hover(function(){
$(this).children("b").stop(true).animate({top:"3px"},50);
$(this).children("i").stop(true).animate({top:"-23px"},50)
},function(){
$(this).children("b").stop(true).animate({top:"24px"},50);
$(this).children("i").stop(true).animate({top:"3px"},50)
});
$(".sl_ext a:nth-child(2)").hover(function(){
$(this).children("span").stop(true).animate({top:"-1px"},100);
$(this).children("i").stop(true).animate({top:"-14px"},100).css({display:"none"})
},function(){
$(this).children("span").stop(true).animate({top:"14px"},100);
$(this).children("i").stop(true).animate({top:"-1px"},100).css({display:"block"})
});
$('.tab_im img').hover(function(){
var a=$(this).prop('src');
var index=$(this).parents('li').index();
$(this).parents('li').css('border','2px solid red').siblings('li').css('border','1px solid #ccc');
$(this).parents('ul').prev().find('img').prop('src',a);
$(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display','block').siblings('a').css('display','none');
$(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display','block').siblings('span').css('display','none')
});
$(".JD_ipone_one").hover(function(){
$(this).children("div").css({display:"block"})
},function(){
$(this).children("div").css({display:"none"})
});
$("#tab>li").click(function() {
let i = $(this).index();
$("#container>div").hide().eq(i).show()
});
$(".dizhi_show").hover(function(){
$(".dizhi_con").css({display:"block"})
},function(){
$(".dizhi_con").css({display:"none"})
});
$(".dizhi_con").hover(function(){
$(this).css({display:"block"})
},function(){
$(this).css({display:"none"})
});
//显示隐藏
let $li = $(".JD_nav_logo>div:gt(3)").hide();
$('.JD_show span').click(function(){
if($li.is(':hidden')){
$li.show();
$(this).css({width:"86px"}).text('收起 ^');
}else{
$li.hide();
$('.JD_show span').css({width:"291px"}).text('更多选项（ CPU核数、网络、机身颜色 等）');
}
return false;
});
$(".rig_tab>div").hover(function(){
var i = $(this).index();
$(this).find('.ico').css({display:'block'}).stop(true).animate({top:"190px"},300)
},function(){
var i = $(this).index();
$(this).find('.ico').css({display:'none'}).stop(true).animate({top:"230px"})
});
$('.header_main_left>ul>li').hover(function() {
$(this).css({
background: "#f0f0f0"
}).find('.header_main_left_main').stop(true).fadeIn(300)
}, function() {
$(this).css({
background: "#fff"
}).find(".header_main_left_a").css({
color: "#000"
});
$(this).find('.header_main_left_main').stop(true).fadeOut(100)
});
$(".header_sj a").hover(function() {
$(this).css({
background: "#444"
})
}, function() {
$(this).css({
background: "#6e6568"
})
});
$(".nav_li1 a").hover(function(){
$(".header_main_left").stop(true).fadeIn()
},function(){
$(".header_main_left").stop(true).fadeOut()
});
$(".header_main_left").hover(function(){
$(this).stop(true).fadeIn()
},function(){
$(this).stop(true).fadeOut()
});
//右侧侧边栏
$(".header_bar_box ul li").hover(function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "block"
}).stop(true).animate({
left: "-60px"
}, 300)
}, function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "none"
}).stop(true).animate({
left: "0"
}, 300)
});
//底部
$(".footer_foot .p1 a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
});
$(".footer .footer_center ol li a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
})
function searchProducts(name,value){
let href = location.href + "";
if(href.indexOf("?")===-1){
location.href = location.href + "?" + name + "=" + value;
}
else{
location.href = location.href+"&"+name+"="+value;
}
}
function replaceParamVal(url, paramName, replaceVal) {
let oUrl = url.toString();
let re = eval('/('+paramName+'=)([^&]*)/gi');
let nUrl = oUrl.replace(re,paramName+'='+replaceVal);
return nUrl;
}
function hrefChange(key,value){
let href = location.href + "";
if(href.indexOf(key)===-1){
searchProducts(key,value);
}
else{
location.href = replaceParamVal(href,key,value);
}
}
$(".page_a").click(function(){
let pn = $(this).attr("pn");
hrefChange("pageNum",pn);
});
document.getElementById("choosePage").onclick = function(){
let inputPage = document.getElementById("inputPage").value;
hrefChange("pageNum",inputPage);
}
$(".sort_a").click(function(){
$(this).toggleClass("desc");
// 获取排序字段
let sort = $(this).attr("sort");
// 获取升降序
let value = $(this).hasClass("desc")?"_desc":"_asc";
// 跳转到指定位置
let sortWay = sort + value;
hrefChange("sort",sortWay);
});
$("#skuPriceSearchBtn").click(function(){
// 拼上价格区间的值
let from = $("#skuPriceFrom").val();
let to = $("#skuPriceTo").val();
let query = from + "_" + to;
let href = location.href+"";
if(href.indexOf("skuPrice=")===-1){
searchProducts("skuPrice",query);
}
else{
location.href = replaceParamVal(href,"skuPrice",query);
}
});
$(".hasStock").change(function(){
if($("#hasStockChecked").prop('checked')){
hrefChange("hasStock",1);
}
else{
hrefChange("hasStock",0);
}
});
function searchByKeyword(){
hrefChange("keyword",$("#keywordInput").val());
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
