代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>乐优商城--商品搜索结果页</title>
<link rel="icon" href="assets/img/favicon.ico">
<link href='./css/material.css' rel="stylesheet">
<link href="./css/vuetify.min.css" rel="stylesheet">
<script src="./js/vue/vue.js"></script>
<script src="./js/vue/vuetify.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
<link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
<link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
<style type="text/css">
* {
box-sizing: unset;
}
.btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
width: 46px;
height: 23px;
border: 1px solid #DDD;
background: #FFF;
line-height: 23px;
font-family: "\5b8b\4f53";
text-align: center;
font-size: 16px;
color: #AAA;
text-decoration: none;
out-line: none
}
.btn-arrow:hover {
background-color: #1299ec;
color: whitesmoke;
}
.top-pagination {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: 700;
line-height: 18px;
color: #999;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
text-transform: uppercase;
float: right;
margin-top: 6px
}
.top-pagination span {
margin-right: 10px;
}
.logo-list li {
padding: 8px;
}
.logo-list li:hover {
background-color: #f3f3f3;
}
.type-list a:hover {
color: #1299ec;
}
.skus {
list-style: none;
}
.skus li {
list-style: none;
display: inline-block;
float: left;
margin-left: 2px;
border: 2px solid #f3f3f3;
}
.skus li.selected {
border: 2px solid #dd1144;
}
.skus img {
width: 25px;
height: 25px;
}
</style>
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>
<body>
<div id="searchApp">
<div id="nav-bottom">
<ly-top/>
</div>
<!--list-content-->
<div class="main">
<div class="py-container">
<div class="bread">
<!--面包屑-->
<ul class="fl sui-breadcrumb">
<li><span>全部结果:</span></li>
<li><a href="#">手机</a></li>
<li><span>手机通讯</span></li>
</ul>
<!--已选择过滤项-->
<ul class="tags-choose">
<li class="tag">
品牌:<span style="color: red">apple</span>
<i class="sui-icon icon-tb-close"></i>
</li>
<li class="tag">
内存:<span style="color: red">4G</span>
<i class="sui-icon icon-tb-close"></i>
</li>
</ul>
<div class="clearfix"></div>
</div>
<!--selector-->
<div class="clearfix selector">
<div class="type-wrap" v-for="(value,key,index) in remainFilterConditions" :key="index" v-if="key!='品牌'"
v-show="index<5 || showMore">
<div class="fl key">{{key}}</div>
<div class="fl value">
<ul class="type-list">
<li v-for="(v,i) in value" :key="i" @click="clickFilterParamHandler(key,v)">
<a>{{v.name || v}}</a>
</li>
</ul>
</div>
<div class="fl ext"></div>
</div>
<div class="type-wrap logo" v-else>
<div class="fl key brand">品牌</div>
<div class="value logos">
<ul class="logo-list">
<li v-for="(b,i) in value" :key="i" v-if="b.image" @click="clickFilterParamHandler(key,b)">
<img :src="b.image"/>
</li>
<li style="text-align: center" v-else @click="clickFilterParamHandler(key,b)">
<a style="line-height: 30px; font-size: 12px" href="#">{{b.name}}</a>
</li>
</ul>
</div>
<div class="fl ext">
<a href="javascript:void(0);" class="sui-btn">多选</a>
</div>
</div>
<div class="type-wrap" style="text-align: center">
<v-btn small flat @click="showMore=true" v-if="!showMore">
更多
<v-icon>arrow_drop_down</v-icon>
</v-btn>
<v-btn small="" flat @click="showMore=false" v-else>
收起
<v-icon>arrow_drop_up</v-icon>
</v-btn>
</div>
</div>
<!--details-->
<div class="details">
<div class="sui-navbar">
<div class="navbar-inner filter">
<ul class="sui-nav">
<li class="active">
<a href="#">综合</a>
</li>
<li>
<a href="#">销量</a>
</li>
<li>
<a href="#">新品</a>
</li>
<li>
<a href="#">评价</a>
</li>
<li>
<a href="#">价格</a>
</li>
</ul>
<div class="top-pagination">
<span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
<span><i style="color: red;">{{searchParams.page}}</i>/{{totalPage}}</span>
<a class="btn-arrow" href="javascript:void(0)" @click="prevPage"
style="display: inline-block"><</a>
<a class="btn-arrow" href="javascript:void(0)" @click="nextPage"
style="display: inline-block">></a>
</div>
</div>
</div>
<div class="goods-list">
<ul class="yui3-g">
<li class="yui3-u-1-5" v-for="(item,index) in items" :key="index">
<div class="list-wrap">
<div class="p-img">
<a :href="'/item/'+ item.id +'.html'" target="_blank"><img
:src="item.selectedSku.images" height="200"/></a>
<ul class="skus">
<li :class="{selected:sku.id==item.selectedSku.id}" v-for="(sku,i) in item.skus"
@mouseover="item.selectedSku=sku" :key="i">
<img :src="sku.images">
</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="price">
<strong>
<em>¥</em>
<i>{{ly.formatPrice(item.selectedSku.price)}}</i>
</strong>
</div>
<div class="attr" style="overflow: hidden">
<em v-html="item.spuName"></em>
</div>
<div class="cu" style="overflow: hidden">
<span>促</span><em v-html="item.subTitle"></em>
</div>
<div class="commit">
<i class="command">已有2000人评价</i>
</div>
<div class="operate">
<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
</div>
</div>
</li>
</ul>
</div>
<div class="fr">
<div class="sui-pagination pagination-large">
<ul>
<li :class="{prev:true,disabled:searchParams.page==1}">
<a href="javascript:void(0)" @click="prevPage">«上一页</a>
</li>
<li :class="{active:searchParams.page==index(i)}" v-for="i in Math.min(5,totalPage)">
<a href="javascript:void(0)" @click="toPage(index(i))">{{index(i)}}</a>
</li>
<li class="dotted"><span>...</span></li>
<li :class="{next:true,disabled:searchParams.page==totalPage}">
<a href="javascript:void(0)" @click="nextPage">下一页»</a>
</li>
</ul>
<div><span>共{{totalPage}}页 </span><span>
到第
<input type="text" class="page-num">
页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
</div>
</div>
</div>
<!--hotsale-->
<div class="clearfix hot-sale">
<h4 class="title">热卖商品</h4>
<div class="hot-list">
<ul class="yui3-g">
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/like_01.png"/>
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4088.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/like_03.png"/>
</div>
<div class="attr">
<em>金属A面，360°翻转，APP下单省300！</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4088.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/like_04.png"/>
</div>
<div class="attr">
<em>256SSD商务大咖，完爆职场，APP下单立减200</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4068.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有20人评价</i>
</div>
</div>
</li>
<li class="yui3-u-1-4">
<div class="list-wrap">
<div class="p-img">
<img src="img/like_02.png"/>
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>4088.00</i>
</strong>
</div>
<div class="commit">
<i class="command">已有700人评价</i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#searchApp",
data: {
ly,//把外部的ly对象赋值给vue的data
//定义参数
//前端->后端
searchParams: {
key: '',//搜索关键词
page: 1,//当前页码,
filterParams: {},//过滤条件参数
},
//后端->前端
items: [],//商品列表
total: 1,//总记录数
totalPage: 1,//总页数
filterConditions: {},//过滤参数
showMore: false //是否显示更多
},
created() {
//获取当前用户输入的搜索关键词
let key = ly.getUrlParam('key');
if (key == '') {
alert('请输入关键词');
return;
}
//给参数赋值
//1）获取当前URL的所有参数
//key=value&key=value转换为json对象
let paramJson = ly.parse(location.search.substring(1));
//2）把所有参数赋值给searchParams对象
//给默认值
paramJson.page = paramJson.page || 1;
paramJson.filterParams = paramJson.filterParams || {};
//再赋值
this.searchParams = paramJson;
this.searchPage();
},
//计算属性
computed: {
//remainFilterConditions:该属性用于存储值的数量大于1个的参数
remainFilterConditions() {
//1.定义新对象，用于存储数量超过1个的参数
let remainFilterConditions = {};
//2.遍历现有的参数，筛选出数量大于1个的参数
for (let key in this.filterConditions) {
if (this.filterConditions[key].length > 1) {
remainFilterConditions[key] = this.filterConditions[key];
}
}
//3.返回筛选后的参数
return remainFilterConditions;
}
},
watch: {
//监听page的变化
"searchParams.page": {
handler() {
//更新URL地址栏
this.replaceLocationUrl();
//调用换页方法
this.pageChange();
}
}
},
methods: {
//分页搜索商品
searchPage() {
//请求后端获取商品搜索结果
ly.http.post('/search/page', this.searchParams).then(resp => {
//接收后端返回的商品数据
//把所有items的每个Spu的skus属性转换为Js对象，再从中定义出一个selectedSku属性作为当前选择的Sku对象
resp.data.items.forEach(item => {
//把字符串转换为js对象
item.skus = JSON.parse(item.skus);
//在item中添加一个selectedSku属性，把skus中的第一个作为默认选中的
item.selectedSku = item.skus[0];
});
this.items = resp.data.items;
this.total = resp.data.total;
this.totalPage = resp.data.totalPage;
this.filterConditions = resp.data.filterConditions;//接收过滤条件
}).catch(e => {
console.log('商品搜索失败');
});
},
//计算方块里面数字
index(i) {
if (this.searchParams.page <= 3 || this.totalPage <= 5) {
//当前页为前三页的情况或总页数<=5的情况，返回 i
return i;
} else if (this.searchParams.page >= this.totalPage - 2) {
//当前页为后三页的情况，返回 总页数-5+i
return this.totalPage - 5 + i;
} else {
//当前页为前三页和后三页中间的情况，返回当前页-3+i
return this.searchParams.page - 3 + i;
}
},
//上一页
prevPage() {
if (this.searchParams.page > 1) {
this.searchParams.page--;
}
},
//跳转到指定页面
toPage(curPage) {
this.searchParams.page = curPage;
},
//下一页
nextPage() {
if (this.searchParams.page < this.totalPage) {
this.searchParams.page++;
}
},
//商品分页的换页方法
pageChange() {
//请求后端获取商品搜索结果
ly.http.post('/search/page/change', this.searchParams).then(resp => {
resp.data.forEach(item => {
//把字符串转换为js对象
item.skus = JSON.parse(item.skus);
//在item中添加一个selectedSku属性，把skus中的第一个作为默认选中的
item.selectedSku = item.skus[0];
});
this.items = resp.data;
}).catch(e => {
console.log('商品换页失败');
});
},
//过滤条件点击
clickFilterParamHandler(key, value) {
//处理分类和品牌，往后台传递分类和品牌的ID
if (key == '分类' || key == '品牌') {
value = value.id;
}
//把key和value值存入searchParmas的filterParms变量中
this.searchParams.filterParams[key] = value;
//更新URL地址栏
this.replaceLocationUrl();
//重置回第一页
this.searchParams.page = 1;
//请求后台
this.searchPage();
},
//把当前searchParams的所有参数更新到URL地址栏中
replaceLocationUrl() {
//需求：把当前页的页码拼接到URL地址栏里面
//1）获取searchParms的所有参数，把js对象转换为普通参数，格式：key=value&key=value...
let paramsStr = ly.stringify(this.searchParams); //格式：key=value&key=value...
//2）把刚才拼接好的参数，放在当前页面后面
//2.1 拼装最终的地址
let newURL = location.origin + location.pathname + "?" + paramsStr;
//2.2 使用最终的地址改写浏览器的URL地址
//window.location.href: 修改href属性，同时修改了URL地址，并进行页面跳转。不能使用该属性来修改
//window.history.replaceState()方法： 使用该方法只能回修改URL地址，而不会产生页面跳转
/**
* 参数一： 状态码
* 参数二： 地址栏的标题
* 参数三： 需要修改的URL地址
*/
window.history.replaceState(null, null, newURL);
}
},
components: {
lyTop: () => import("./js/pages/top.js")
}
});
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
<div class="tbar-cart-item">
<div class="jtc-item-promo">
<em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
<div class="promo-text">已购满600元，您可领赠品</div>
</div>
<div class="jtc-item-goods">
<span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
<div class="p-name">
<a href="#">{1}</a>
</div>
<div class="p-price"><strong>¥{3}</strong>×{4}</div>
<a href="#none" class="p-del J-del">删除</a>
</div>
</div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#service").hover(function () {
$(".service").show();
}, function () {
$(".service").hide();
});
$("#shopcar").hover(function () {
$("#shopcarlist").show();
}, function () {
$("#shopcarlist").hide();
});
})
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
