代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BIGO商城首页</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="./css/elementui.css">
<SCRIPT type=text/javascript src="js/swfobject.js"></SCRIPT>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ScrollPic.js"></script>
<script type="text/javascript" src="js/new.js"></script>
<!-- <script type="text/javascript" src="js/focus.js"></script> -->
<script type="text/javascript" src="js/img-show.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="./js/elementui.js"></script>
<style>
.nv {
position: relative;
/*相对定位*/
margin-top: 10px;
}
.box-card {
width: 215px;
height: 330px;
}
.el-card__body {
border-radius: 0px, 0px, 25px, 25px;
}
.el-carousel__item img {
color: #475669;
font-size: 18px;
opacity: 0.75;
/* line-height: 300px; */
margin: 0;
width: 700px;
}
.el-carousel__container {
height: 330px;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-select .el-input {
width: 100px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-button--primary {
color: #ffffff;
background-color: #e4393c;
border-color: #fff;
text-align: justify;
}
.el-backtop {
height: 60px;
width: 60px;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
text-align: center;
line-height: 40px;
color: #e4393c;
}
.el-button:hover {
background: #a7686c !important;
color: white !important;
font-weight: bold;
border-color: #e3e7e8 !important;
}
</style>
</head>
<body>
<div id="main1">
<div class="header">
<div class="minwidth">
<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">
<div style="margin-top: 15px;">
<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>
</div>
</div>
<!-- 修改的搜索框end -->
<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 href="#">全部商品分类</a></li>
<li><a href="101首页.html" class="act">首页</a></li>
<li><a href="#">批发馆</a></li>
<li><a href="#">供爆款</a></li>
<li><a href="#">品牌汇</a></li>
<li><a href="#">新资讯</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="box_l">
<!-- 一级类别和二级标题类别 -->
<div id="typelist">
<el-card class="box-card">
<span v-for="(item1,index) in typelist1">
<h3>
<strong><a :href="'#'+index"> {{item1.bigoType1Name}}</a></strong>
<div class="sidelist_pro_sub">
<ul>
<li class="noborder" v-for="item2 in item1.bigoGoodstype2">
<a :href="'#'+index">{{item2.bigoType2Name}} </a>
</li>
</ul>
</div>
</h3>
</span>
</el-card>
</div>
</div>
<div class="box_r" style="width: 985px;">
<div class="box_r_c">
<div class="box_r_c_l">
<div class="focus line">
<!-- 轮播图 1 修改代码 start -->
<div id="app-yuan">
<el-carousel :interval="3500" :autoplay="true" >
<el-carousel-item v-for="(item1,index) in banner" :key="index">
<img :src="item1.bigoBanner" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<div class="box_r_c_r">
<div class="an_r">
<div id=con>
<div class="login">
<div id="app_btn">
<ul>
<li>
<el-button type="primary"
@click="clikBtn1(btnInfo.btnFlag)">{{btnInfo.btnName1}}</el-button>
</li>
<li>
<el-button type="primary"
@click="clikBtn2(btnInfo.btnFlag)">{{btnInfo.btnName2}}</el-button>
</li>
<li v-show="btnInfo.btnFlag" @click="clikBtn3()">
<el-button style="width: 98px;text-align: center;"
type="primary">购物车</el-button>
</li>
<li v-show="btnInfo.btnFlag">
<el-button type="primary" @click="clikBtn4()">退出登录</el-button>
</li>
</ul>
</div>
</div>
<div class="bao">
<ul>
<li>
<a href="#"><img src="images/bao_1.jpg" /><br />诚信保障</a>
</li>
<li>
<a href="#"><img src="images/bao_2.jpg" /><br />交易安全</a>
</li>
<li>
<a href="#"><img src="images/bao_3.jpg" /><br />商家认证</a>
</li>
</ul>
</div>
<ul id=tags>
<li class=selectTag><A onClick="selectTag('tagContent1',this)"
href="javascript:void(0)">资讯</A></li>
<li><A onClick="selectTag('tagContent0',this)" href="javascript:void(0)">动态</A>
</li>
</ul>
<div id=tagContent>
<div class="tagContent selectTag" id=tagContent1>
<div class="list">
<ul>
<li><a href="#">佳能60D大套 【直降300元】专业</a></li>
<li><a href="#">罗技 M235 无线光电鼠标2代</a></li>
<li><a href="#">限时抢购399！马盖先X7战术电脑背</a></li>
<li><a href="#">摩瑞尔负离子空气净化器</a></li>
</ul>
</div>
</div>
<div class="tagContent" id=tagContent0>
<div class="list">
<ul>
<li>昨日新加入商家：<span>103</span>家</li>
<li>平台入驻商家总数：<span>1033</span>家</li>
<li>昨日新加商品：<span>25412</span>件</li>
<li>平台商品总数：<span>254,121</span>件</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hr_20"></div>
<a href="#">
<div class="adv_l_1 minwidth left"></div>
</a>
<div class="hr_20"></div>
<!--女装strat-->
<div>
<div class="products_w" v-for="(item1,index) in typelist2">
<div class="ld">
<div class="floor">
<b class="fixpng b b1" style="height: 34px; display: block;"></b>
<b class="fixpng b b2"></b>
<b class="b b3">{{index+1}}F</b><b class="fixpng b4"></b>
</div>
</div>
<h3>{{item1.bigoType1Name}}<span class="more" @click="ToGoodslist(item1)"><a
href="javascript:void(0);" :name="index">进入>></a></span>
<dl class="hit">
<span><a href="#"> 最新欧美款</a></span>
<span><a href="#"> 甜美风货源</a></span>
<span><a href="#"> 日式风货源</a></span>
</dl>
</h3>
<hr>
<div class="hr_10"></div>
<!--商品类别-->
<div class="box_l">
<div class="pro_l">
<ul class="lh" v-for="item2 in item1.bigoGoodstype2">
<li class="fov">{{item2.bigoType2Name}}</li>
<li v-for="item3 in item2.bigoGoodstype3"><a href="javascript:void(0);"
@click="getTypeGoodss(item1.bigoTypeid1,item2.bigoTypeid2,item3.bigoTypeid3)">{{item3.bigoType3Name}}</a>
</li>
</ul>
</div>
</div>
<!-- 商品列表 -->
<div class="box_r">
<div class="box_r_c">
<div class="box_r_c_l">
<ul>
<li v-for="itemgood in goodslist[index]" @click="ToGoodsInfo(itemgood)">
<div class="list">
<div class="thumb"><a href="javascript:void(0);">
<img :src="itemgood.bigoGoodsPicture" /></a>
</div>
<div class="name"><a target="_blank"
href="javascript:void(0);">{{itemgood.bigoGoodsName}}</a></div>
<div class="price">批发价：<span
class="font_red font_12">¥{{itemgood.bigoGoodsPrice}}</span>
</div>
</div>
</li>
</ul>
</div>
<div class="box_r_c_r">
<ul class="box_r_c_r">
<li><a href="#"><img src="images/box_r_1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/box_r_2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/box_r_3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="hr_10"></div>
<div class="tb">
<ul>
<li><a href="#"><img src="images/tb_1.gif" alt="" /></a></li>
<li><a href="#"><img src="images/tb_2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/tb_3.png" alt="" /></a></li>
<li><a href="#"><img src="images/tb_4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/tb_5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/tb_6.png" alt="" /></a></li>
<li><a href="#"><img src="images/tb_7.png" alt="" /></a></li>
<li><a href="#"><img src="images/tb_8.gif" alt="" /></a></li>
<li><a href="#"><img src="images/tb_9.jpg" alt="" /></a></li>
</ul>
</div>
<div class="hr_20"></div>
</div>
<!--平台推荐 end-->
<div class="hr_20"></div>
<!-- <img src="images/index/bd_14.png" alt="" class="bdimg_14"/> -->
</div>
</div>
<div class="hr_20"></div>
<div class="help">
<div class="wrapper">
<div class="helpinfo">
<ul>
<li>
<dl class="li-1">
<dt>新手指南</dt>
<dd><a href="#" target="_blank">新人购物指南</a></dd>
<dd><a href="#" target="_blank">商户服务平台</a></dd>
<dd><a href="#" target="_blank">黄河交易规则</a></dd>
</dl>
</li>
<li>
<dl class="li-2">
<dt>诚信保证计划</dt>
<dd><a href="#" target="_blank">先行赔付</a></dd>
<dd><a href="#" target="_blank">7天包退</a></dd>
<dd><a href="#" target="_blank">诚保代充</a></dd>
</dl>
</li>
<li>
<dl class="li-3">
<dt>支付方式</dt>
<dd><a href="#" target="_blank">一点通支付</a></dd>
<dd><a href="#" target="_blank">信用卡支付</a></dd>
<dd><a href="#" target="_blank">借记卡支付</a></dd>
</dl>
</li>
<li>
<dl class="li-4">
<dt>售后服务</dt>
<dd><a href="#" target="_blank">联系客服</a></dd>
<dd><a href="#" target="_blank">消费者维权中心</a></dd>
<dd><a href="#" target="_blank">快捷支付</a></dd>
</dl>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="nav_d">
<div class="wrapper">
友情链接：
<a href="#">黄河在线电商</a>|
<a href="#">淘宝</a>|
<a href="#">京东</a>|
<a href="#">当当</a>|
<a href="#">亚马逊</a>|
<a href="#">腾讯</a>|
<a href="#">阿里巴巴</a>|
<a href="#">百度</a>|
<a href="#">人人网</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 class="backtoTop" id="backToTop1">
<!-- <div id="backToTop-up" class="up-back"><i class="fa fa-angle-up"></i></div>
<div id="backToTop-down" class="down-back"><i class="fa fa-angle-down"></i></div> -->
<el-backtop target="" :bottom="100">
<div>
UP
</div>
</el-backtop>
</div>
</div>
<script type=text/javascript src="./js/axios.js"></script>
<script type=text/javascript src="api.js"></script>
<script type=text/javascript>
new Vue({
el:"#main1",
data() {
return {
//存储搜索框输入内容
searchinput: '',
banner:[],
typelist1:[],
typelist2:[],
goodslist:[],
btnInfo:{
btnName1:"登录按钮",
btnName2:"注册按钮",
btnFlag:false
}
}
},
created() {
if (window.localStorage.getItem("userID")) {
this.btnInfo.btnName1="账号信息"
this.btnInfo.btnName2="我的订单"
this.btnInfo.btnFlag=true
}else{
this.btnInfo.btnName1="登录按钮"
this.btnInfo.btnName2="注册按钮"
this.btnInfo.btnFlag=false
}
},
mounted(){
// 新的函数：附加基本 URL 到目标 URL
function prependBaseUrl(url) {
return baseUrl + url;
}
async function fetchData() {
// 获取轮播图
const res1 = await getbanner();
this.banner = res1.data.data.map(e => {
e.bigoBanner = prependBaseUrl(e.bigoBanner);
return { ...e };
});
// 获取类别一级标签和二级标签
const res2 = await gettypelist1();
this.typelist1 = res2.data.data;
// 获取类别一级标签和二级标签和三级
const res3 = await gettypelist2();
this.typelist2 = res3.data.data;
// 获取三级标签下的第一个的类别的id
const fetchGoodsPromises = this.typelist2.map(async type => {
const type1data = type.bigoTypeid1;
const type2data = type.bigoGoodstype2[0].bigoTypeid2;
const type3data = type.bigoGoodstype2[0].bigoGoodstype3[0].bigoTypeid3;
// 根据三级标签下的第一个类别，获取商品
const res4 = await getByTypeIdGoods(type1data, type2data, type3data,1,100);
// 拼接商品图片
const goodslistdata = res4.data.data.map(e => {
try {
const GoodsPicture = e.bigoGoodsPicture.split(',')[0];
e.bigoGoodsPicture = prependBaseUrl(GoodsPicture);
} catch (error) {
}
return { ...e };
});
// 放到data中
return goodslistdata;
});
// 获取所有商品列表
this.goodslist = await Promise.all(fetchGoodsPromises);
}
// 调用 fetchData 函数
fetchData.call(this);
},
methods: {
//点击类别标签获取商品
getTypeGoodss(t1,t2,t3){
console.log(t1,t2,t3);
getByTypeIdGoods(t1,t2,t3,1,100).then(res=>{
// console.log(res.data);
this.$set(this.goodslist,[t1-1], [])
// console.log(this.goodslist[t1-1]);
//拼接商品图片
let goodslistdata =res.data.data.map(e=>{
try {
let GoodsPicture=e.bigoGoodsPicture.split(',')[0]
e.bigoGoodsPicture=baseUrl+GoodsPicture
} catch (error) {
}
return{...e}
})
// console.log("goods",goodslistdata);
this.$set(this.goodslist,[t1-1], goodslistdata)
})
},
//搜索
searchBtn(){
if (this.searchinput.length>0) {
window.location.href="./115商品搜索页.html?goodsname="+this.searchinput
}else{
this.$message({
message: '搜索不能为空',
type: 'warning'
});
}
},
//跳转到商品列表中
ToGoodslist(item){
console.log(item);
window.location.href="./114商品列表页.html?bigoTypeid1="+item.bigoTypeid1
},
//跳转到商品详情页面
ToGoodsInfo(goods){
console.log(goods);
window.location.href="./113商品详情页.html?goodsId="+goods.bigoGoodsid
},
//按钮1：登录，账号信息
clikBtn1(flag){
//真为账号信息,假为登录
if (flag) {
window.location.href="./402账户信息.html"
}else{
window.location.replace("./503登录页.html")
}
},
//按钮2：注册，我的订单
clikBtn2(flag){
//真为我的订单,假为注册
if (flag) {
window.location.href="./418我的订单.html"
}else{
window.location.replace("./501注册页.html")
}
},
//按钮3：进入购物车
clikBtn3(){
window.location.href="./201购物车.html"
},
//按钮4：退出登录
clikBtn4(){
//清除缓存
window.localStorage.clear()
//刷新页面
location.reload();
}
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
