代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索列表页</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script src="js/vue.js"></script>
<script src="./js/elementui.js"></script>
<link rel="stylesheet" href="./css/elementui.css">
<!-- <script type="text/javascript">
$(document).ready(function() {
//colorPopupCreate();
$("#brandopen").click(function() {
$("#brandMini").hide();
$("#brandMore").show();
$("#brandclose").show();
$("#brandopen").hide();
return false;
});
$("#brandclose").click(function() {
$("#brandMore").hide();
$("#brandMini").show();
$("#brandclose").hide();
$("#brandopen").show();
return false;
});
});
</script> -->
<style>
/* .raido2{
background-color: rgb(231, 42, 42);
} */
.el-radio-button__inner:hover {
color: red;
}
</style>
</head>
<body>
<div id="main5">
<div class="header">
<div class="minwidth">
<div style="width:1200px;overflow: hidden;margin:5px auto;">
<!-- <dl class="login">
<div class="top_left">
<dd><a href="javascript:void(0)"><img src="images/header_top_1.jpg" alt=""/> 收藏本站</a></dd>
<dd>Hi！欢迎来到必购商城</dd> -->
<!--<dd style="float:left;margin-right:740px;"><a href="javascript:void(0)">页面风格：</a>-->
<!--<a href="javascript:changepagestyle('')"><img src="images/page_style_1.png" width="10" height="10"/></a>-->
<!--<a href="javascript:changepagestyle(1)"><img src="images/page_style_2.png" width="10" height="10"/></a>-->
<!--</dd>-->
<!-- <dd><a href="javascript:void(0)">[登录]</a></dd>
<dd><a href="javascript:void(0)">[注册]</a></dd>
</div>
<div class="top_right"> -->
<!--<dd><a href="javascript:void(0)">[消息中心]</a></dd>-->
<!-- <dd><a href="javascript:void(0)" ><img src="images/header_top_2.jpg" alt=""/>购物车</a></dd>
<dd><a href="402-00买家中心首页.html" target="_blank"><img src="images/header_top_3.jpg" alt=""/>会员中心</a></dd>
<dd><a href="javascript:void(0)"><img src="images/header_top_4.jpg" alt=""/>帮助中心</a></dd>
<dd><a href="javascript:void(0)"><img src="images/header_top_5.jpg" alt=""/>网站地图</a></dd>
</div>
</dl> -->
</div>
<div class="clear"></div>
<!-- <div class="topadv">
<div style="width: 1200px;margin: 0 auto;">
<img src="./images/header_bgad.png" alt="" class="header_img">
</div>
</div> -->
<div class="login_d" style="width:1200px; margin:0 auto;overflow: hidden;padding:10px 0">
<a href="101首页.html">
<div class="logo"></div>
</a>
<div class="search">
<!-- 修改的搜索框start -->
<div id="selectdiv">
<el-input placeholder="请输入商品名称" v-model="searchinput" class="input-with-select"
@keyup.enter.native="searchBtn()">
<el-button slot="append" icon="el-icon-search" @click="searchBtn()"></el-button>
</el-input>
<!-- <div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="searchinput" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div> -->
</div>
<!-- 修改的搜索框end -->
<!-- <div class="search-triggers">
<ul class="switchable-nav" id="sear_ch">
<li class="J_SearchTab goods-search-tab selected" onClick="seachTag('seach_tag1')" id="seach_tag1">商品</li>
<li class="J_SearchTab tmall-search-tab"onClick="seachTag('seach_tag2')" id="seach_tag2">店铺</li>
<li class="J_SearchTab shop-search-tab" onClick="seachTag('seach_tag3')" id="seach_tag3">样品</li>
</ul>
<div class="search-tab-icon"><i><em></em><span></span></i></div>
</div> -->
<!-- <div class="i-search ld">
<ul id="shelper" class="hide"></ul>
<div class="form">
<input type="text" class="text" accesskey="s" id="key" autocomplete="off"
onkeydown="javascript:if(event.keyCode==13) search('key');">
<input type="button" value="搜索" class="button" onclick="search('key');return false;">
</div>
<div class="advanced_search"><a href="javascript:void(0)">高级搜索</a></div>
</div> -->
<!-- <div class="hotwords"><strong>热门搜索：</strong><a href="javascript:void(0)" target="_blank" style="color:#ff0000">新年盛典</a><a
href="#" target="_blank">圣诞活动</a><a href="javascript:void(0)" target="_blank">家电满减</a><a href="javascript:void(0)" target="_blank">车品满减</a>
</div> -->
</div>
<div class="tab">
<div>
<img src="images/index/make.png" alt="" class="make_img" />
</div>
</div>
</div>
</div>
<div class="nav-menu minwidth">
<div class="nav-menu_1">
<ul>
<li style="width: 215px"><a a href="javascript:void(0)">全部商品分类﹀</a></li>
<li><a href="101首页.html" class="act">首页</a></li>
<li><a href="javascript:void(0)">批发馆</a></li>
<li><a href="javascript:void(0)">供爆款</a></li>
<li><a href="javascript:void(0)">品牌汇</a></li>
<li><a href="javascript:void(0)">新资讯</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<!-- <div class="hr_20"></div>
<img src="images/list/customers_gd.png" alt=""/>
<div class="hr_20"></div> -->
<div class="box_r_t" style="width: 100%">
<div class="hr_10"></div>
<div class="tuan_list">
<ul v-for="item in goods">
<li @click="ToGoodsInfo(item)">
<div class="pic"><a href="javascript:void(0)"><img :src="item.bigoGoodsPicture" /></a>
</div>
<div class="tx">
<h4><a href="javascript:void(0)">{{item.bigoGoodsName}}</a></h4>
</div>
<div class="btn"><span class="price font_red">¥ {{item.bigoGoodsPrice}}</span><span
class="order">价值：<del>¥ {{item.bigoGoodsPrice}}</del></span></div>
<div class="p_r"><span class="font_red"><b>{{item.bigoGoodsSales}}</b></span>人已购买</div>
</li>
</ul>
<div class="hr_20"></div>
</div>
</div>
</div>
</div>
<div class="hr_20"></div>
<div id="app" style="margin-left: 54%;">
<el-pagination background layout="prev, pager, next" :page-size="15" :total="total"
@current-change="goodspage" hide-on-single-page>
</div>
<div class="help">
<div class="wrapper">
<div class="helpinfo">
<ul>
<li>
<dl class="li-1">
<dt>新手指南</dt>
<dd><a href="javascript:void(0)" target="_blank">新人购物指南</a></dd>
<dd><a href="javascript:void(0)" target="_blank">商户服务平台</a></dd>
<dd><a href="javascript:void(0)" target="_blank">黄河交易规则</a></dd>
</dl>
</li>
<li>
<dl class="li-2">
<dt>诚信保证计划</dt>
<dd><a href="javascript:void(0)" target="_blank">先行赔付</a></dd>
<dd><a href="javascript:void(0)" target="_blank">7天包退</a></dd>
<dd><a href="javascript:void(0)" target="_blank">诚保代充</a></dd>
</dl>
</li>
<li>
<dl class="li-3">
<dt>支付方式</dt>
<dd><a href="javascript:void(0)" target="_blank">一点通支付</a></dd>
<dd><a href="javascript:void(0)" target="_blank">信用卡支付</a></dd>
<dd><a href="javascript:void(0)" target="_blank">借记卡支付</a></dd>
</dl>
</li>
<li>
<dl class="li-4">
<dt>售后服务</dt>
<dd><a href="javascript:void(0)" target="_blank">联系客服</a></dd>
<dd><a href="javascript:void(0)" target="_blank">消费者维权中心</a></dd>
<dd><a href="javascript:void(0)" target="_blank">快捷支付</a></dd>
</dl>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<!--/*邮件订阅*/-->
<div class="nav_d">
<div class="wrapper">
<div class="e-mial">
<img src="images/index/email.png" alt="" />
<span>邮件订阅</span>
<input type="text" name="email" class="input_email" />
<a href="javascript:void(0)" style="margin: 0px 2px;"><img src="images/index/dingyue.png"
alt="" /></a>
<a href="javascript:void(0)" style="margin: 0px 2px;"><img src="images/index/tuiding.png"
alt="" /></a>
</div>
</div>
</div>
<!--/*底部导航*/-->
<div class="nav_d">
<div class="wrapper">
<a href="javascript:void(0)">公司简介</a>|
<a href="javascript:void(0)">合作意向</a>|
<a href="javascript:void(0)">联系我们</a>|
<a href="javascript:void(0)">招标信息</a>|
<a href="javascript:void(0)">房地产</a>|
<a href="javascript:void(0)">休闲农业</a>|
<a href="javascript:void(0)">环保能源</a>
</div>
</div>
<div class="nav_d">
<div class="wrapper">
友情链接：
<a href="javascript:void(0)">黄河在线电商</a>|
<a href="javascript:void(0)">淘宝</a>|
<a href="javascript:void(0)">京东</a>|
<a href="javascript:void(0)">当当</a>|
<a href="javascript:void(0)">亚马逊</a>|
<a href="javascript:void(0)">腾讯</a>|
<a href="javascript:void(0)">阿里巴巴</a>|
<a href="javascript:void(0)">百度</a>|
<a href="javascript:void(0)">人人网</a>
</div>
</div>
<!--/*版权信息*/-->
<div class="hr_20"></div>
<div class="footer">
<p>Copyright ©黄河在线商城. All Rights Reserved. 粤ICP证080047号</p>
</div>
<div style="text-align: center;margin: 5px auto 10px;">
<img src="images/copyright.png" alt="">
</div>
<!--backtoTop1-->
<!--兼容所有现代浏览器同时包括 ie6/7/8/9 （ie6会有一点点抖动）-->
</div>
<script type=text/javascript src="./js/axios.js"></script>
<script type=text/javascript src="api.js"></script>
<script type="application/javascript">
new Vue({
el: "#main5",
data() {
return {
Ystart: 1,
Yend: 15,
start: 1,
end: 15,
total: 0,
searchinput: '',
goodsname: '',
goods: [],
}
},
mounted() {
// 获取地址栏id
this.urlParams = getUrlParams(window.location.href);
this.goodsname = this.urlParams.goodsname
//获取商品信息
this.getgoodslist(this.start, this.end)
},
methods: {
//搜索
searchBtn() {
if (this.searchinput.length > 0) {
window.location.href = "./115商品搜索页.html?goodsname=" + this.searchinput
} else {
this.$message({
message: '搜索不能为空',
type: 'warning'
});
}
},
getgoodslist(start, end) {
//获取数据
const loading = this.$loading({
lock: true,
text: '正在加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
searchGoods(this.goodsname, start, end).then(res => {
console.log("结果", res.data.data);
if (res.data.data.length == 0) {
this.$message({
message: '搜索商品为空！',
type: 'warning'
});
}
this.total = Number(res.data.message)
this.goods = res.data.data.map(e => {
e.bigoGoodsPicture = baseUrl + e.bigoGoodsPicture.split(',')[0]
return { ...e }
})
loading.close();
})
},
searchBtn() {
if (this.searchinput.length > 0) {
this.goodsname = this.searchinput
this.getgoodslist(this.Ystart, this.Yend)
} else {
this.goodsname = this.urlParams.goodsname
this.getgoodslist(this.Ystart, this.Yend)
}
},
ToGoodsInfo(val) {
window.location.href = "./113商品详情页.html?goodsId=" + val.bigoGoodsid
},
goodspage(val) {
console.log(val);
this.getgoodslist(val, this.end)
},
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
