代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>113求购详情页</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" />
<!-- 样式引入 -->
<script src="js/vue.js"></script>
<script src="./js/elementui.js"></script>
<link rel="stylesheet" href="./css/elementui.css">
<script type="text/javascript" src="js/ScrollPic.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type=text/javascript src="js/lib.js"></script>
<script type=text/javascript src="js/163css.js"></script>
<!-- <script type="text/javascript">
var jiathis_config = {
summary: "",
hideMore: false
}
</script> -->
<style>
.el-radio-group {
font-size: 0;
width: 500px;
}
/* .el-button--primary.is-active,
.el-button--primary:active {
background: rgb(230, 162, 60);
border-color: rgb(230, 162, 60);
color: #fff;
}
.el-button--primary:focus,
.el-button--primary:hover {
background: rgb(230, 162, 60);
border-color: rgb(230, 162, 60);
color: #fff;
} */
</style>
</head>
<body>
<div id="main4">
<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">
<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 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 class="nav-mycart">-->
<!--<div><a href="javascript:void(0)"><img src="images/mycart.jpg" alt=""/><span>我的购物车(<b>1</b>)</span></a></div>-->
<!--</div>-->
</div>
</div>
<!-- <script type=text/javascript>
function seachTag(seach_tag) {
// 操作标签
var tag = document.getElementById("sear_ch").getElementsByTagName("li");
var taglength = tag.length;
for (var i = 0; i < taglength; i++) {
tag[i].className = "";
}
document.getElementById(seach_tag).className = "selected";
}
</script> -->
</div>
<div class="nav-menu minwidth">
<div class="nav-menu_1">
<ul>
<li style="width: 215px"><a a href="#">全部商品分类﹀</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>
<div class="box_r_t">
<div class="products_txt">
<div id=preview>
<div class=jqzoom id=spec-n1 >
<IMG height=390 :src="clikpic" :jqimg="clikpic" width=390>
</div>
<div id=spec-n5>
<div id=spec-left @click="spec_btn('-')"> <img src="images/left.gif" /> </div>
<div id="spec-list">
<ul class="list-h">
<li v-for="(item,index) in pic" @click="clikpicitem(item,index)"><img
:src="item"> </li>
</ul>
</div>
<div id=spec-right @click="spec_btn('+')"> <img src="images/right.gif" /> </div>
</div>
</div>
<div class="t_list">
<div class="title line">商品名称：{{goods.bigoGoodsName}} </div>
<div class="suxing line">
<p class="f1">商品价格：<span
style="font-size: larger; color: red;"><b>￥ {{goods.bigoGoodsPrice}}
</b></span></p>
<!-- <p class="f1"></p> -->
</div>
<div class="suxing line">
<p class="f1">商品销量：{{goods.bigoGoodsSales}} 件/月</p>
<p class="f1">评价数量：{{goods.bigoGoodsRate}} 条</p>
<p class="f1"></p>
<p class="f1">发布日期：{{goods.bigoGoodsTime}} </p>
</div>
<div class="share suxing line"><!-- JiaThis Button BEGIN -->
<div id="ckepop" style="float:left; width:250px;">
<div id="sizebnt" style="width: 400px;">
<el-radio-group v-model="norms">
<el-radio v-for="item in goods.bigoNorms" :key="item.bigoNormsid"
:label="item.bigoNormsName" size="mini"
border>{{item.bigoNormsName}}</el-radio>
</el-radio-group>
</div>
</div>
<!-- <a href="javascript:void(0)" class="btn_7 right">收藏此商品</a> -->
</div>
<div class="price" style="margin-top: 10px;border: 1px solid #ddd8d8;">
<!-- <div class="clear"></div> -->
<!-- <p><a href="javascript:void(0)" class="btn_b">我要答复</a></p> -->
<div id="gmbtn">
<el-button type="danger" @click="Tobuy">立即购买</el-button>
<el-button type="danger" @click="Tocart">加入购物车</el-button>
</div>
</div>
</div>
<div class="hr_20"></div>
<div class="products_tab">
<div id=con_b>
<ul id=tags_b>
<li class=selectTag><A onClick="selectTag('tagContent_b0',this)"
href="javascript:void(0)">商品详情</A> </li>
<li><A onClick="selectTag('tagContent_b1',this)"
href="javascript:void(0)">报价记录（125）</A> </li>
</ul>
<div id=tagContent_b>
<div class="tagContent_b selectTag" id=tagContent_b0>
<img v-for="itemp in pic" :src="itemp" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<!-- <img src="images/list/listconeter_2.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_3.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_4.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_5.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_6.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_7.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_8.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" />
<img src="images/list/listconeter_9.png" alt=""
style="width: 860px;margin-left: 15px;margin-top: 10px" /> -->
</div>
<div class=tagContent_b id=tagContent_b1>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table">
<tr class="tr1">
<td width="25%">卖家</td>
<td width="25%">报价</td>
<td width="25%"> 购买数量</td>
<td width="25%">报价日期</td>
</tr>
<tr>
<td>xieqingzhuo**cheryl</td>
<td>998</td>
<td>5</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr class="tr2">
<td>tangxuan**yahoo.cn</td>
<td>998</td>
<td>15</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr>
<td>lvchunling</td>
<td>998</td>
<td>1</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr class="tr2">
<td>dengwenbin</td>
<td>988</td>
<td>13</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr>
<td>xieqingzhuo**cheryl</td>
<td>998</td>
<td>5</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr class="tr2">
<td>tangxuan**yahoo.cn</td>
<td>998</td>
<td>15</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr>
<td>lvchunling</td>
<td>998</td>
<td>1</td>
<td>2012-08-31 11:22:12</td>
</tr>
<tr class="tr2">
<td>dengwenbin</td>
<td>988</td>
<td>13</td>
<td>2012-08-31 11:22:12</td>
</tr>
</table>
<div class="hr_10"></div>
<div class="pages">
<div class="btn"><a href="javascript:void(0)"><img src="images/point_r.png"
width="20" height="16" /></a></div>
<ul>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">4</a></li>
<li><a href="javascript:void(0)">5</a></li>
<li><a href="javascript:void(0)">6</a></li>
<li><a href="javascript:void(0)">7</a></li>
<li><a href="javascript:void(0)">8</a></li>
<li><a href="javascript:void(0)">9</a></li>
</ul>
<div class="btn"><a href="javascript:void(0)"><img src="images/point_l.png"
width="20" height="16" /></a></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- <script type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags_b").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent_b"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script> -->
</div>
</div>
</div>
<div class="box_l_t">
<div class="p_list_l line">
<div class="p_list_l_1">
<h2>交易动态</h2>
<div class="list">
<ul>
<li>
<div class="pic" style="position:relative;"><a href="javascript:void(0)"><img
src="images/p_l_01.png" width="72" height="72" /></a>
</div>
<div class="title"><a href="javascript:void(0)">2013-01-13 12:15:35</a></div>
<div class="price">卖家：广州多艺多旗舰店<br />完成应答</div>
</li>
<li>
<div class="pic"><a href="javascript:void(0)"><img src="images/p_l_02.png"
width="72" height="72" /></a>
</div>
<div class="title"><a href="javascript:void(0)">2013-01-13 12:15:35</a></div>
<div class="price">卖家：广州多艺多旗舰店<br />完成应答</div>
</li>
<li>
<div class="pic"><a href="javascript:void(0)"><img src="images/p_l_03.png"
width="72" height="72" /></a>
</div>
<div class="title"><a href="javascript:void(0)">2013-01-13 12:15:35</a></div>
<div class="price">卖家：广州多艺多旗舰店<br />完成应答</div>
</li>
<li>
<div class="pic"><a href="javascript:void(0)"><img src="images/p_l_04.png"
width="72" height="72" /></a>
</div>
<div class="title"><a href="javascript:void(0)">2013-01-13 12:15:35</a></div>
<div class="price">卖家：广州多艺多旗舰店<br />完成应答</div>
</li>
<li>
<div class="pic"><a href="javascript:void(0)"><img src="images/p_l_05.png"
width="72" height="72" /></a>
</div>
<div class="title"><a href="javascript:void(0)">2013-01-13 12:15:35</a></div>
<div class="price">卖家：广州多艺多旗舰店 <br />完成应答</div>
</li>
</ul>
</div>
</div>
</div>
<div class="hr_20"></div>
<div class="p_list_l">
<img src="images/list/qiugou1.png" alt="" />
<div class="hr_20"></div>
<img src="images/list/qiugou2.png" alt="" />
</div>
</div>
</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="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>
$(function(){
$(".jqzoom").jqueryzoom({
xzoom:400,
yzoom:400,
offset:10,
position:"right",
preload:1,
lens:1
});
$("#spec-list").jdMarquee({
deriction:"left",
width:400,
height:56,
step:1,
speed:5,
delay:10,
control:true,
_front:"#spec-right",
_back:"#spec-left"
});
$("#spec-list img").bind("mouseover",function(){
var src=$(this).attr("src");
$("#spec-n1 img").eq(0).attr({
src:src.replace("\/n5\/","\/n1\/"),
jqimg:src.replace("\/n5\/","\/n0\/")
});
$(this).css({
"border":"2px solid #ff6600",
"padding":"1px"
});
}).bind("mouseout",function(){
$(this).css({
"border":"1px solid #ccc",
"padding":"2px"
});
});
})
</script>
<script type=text/javascript src="./js/axios.js"></script>
<script type=text/javascript src="api.js"></script>
<script type="text/javascript">
new Vue({
el: "#main4",
data() {
return {
norms: '',
searchinput: '',
clikpic: "",
pic: [],
goods: {},
picindex: 0
}
},
mounted() {
//获取数据
const loading = this.$loading({
lock: true,
text: '正在加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
function prependBaseUrl(url) {
return baseUrl + url;
}
async function fetchGoodsInfo() {
// 清空图片数组
this.pic = [];
// 获取地址栏id
let urlParams = getUrlParams(window.location.href);
try {
// 获取商品数据
const res = await goodsinfo(urlParams.goodsId);
this.goods = res.data.data;
// 格式化日期
this.goods.bigoGoodsTime = getdateformat(this.goods.bigoGoodsTime);
// 商品图片数组
this.pic = this.goods.bigoGoodsPicture.split(',').map(e => prependBaseUrl(e));
// 默认选中第一个图片
this.clikpic = this.pic[0];
// 默认选中第一个 radio
this.norms = this.goods.bigoNorms[0].bigoNormsName;
console.log(this.goods);
} catch (error) {
console.error('Error fetching goods info:', error);
}
loading.close();
}
// 调用 fetchGoodsInfo 函数
fetchGoodsInfo.call(this);
},
methods: {
//搜索
searchBtn() {
if (this.searchinput.length > 0) {
window.location.href = "./115商品搜索页.html?goodsname=" + this.searchinput
} else {
this.$message({
message: '搜索不能为空',
type: 'warning'
});
}
},
//点击按钮切换图片
spec_btn(val) {
if (val == "+") {
if (this.picindex < (this.pic.length - 1)) {
this.clikpic = this.pic[++this.picindex]
} else {
this.picindex = 0
this.clikpic = this.pic[0]
}
} else {
if (this.picindex != 0) {
this.clikpic = this.pic[--this.picindex]
} else {
this.clikpic = this.pic[0]
}
}
},
//点击图片切换
clikpicitem(val, index) {
this.clikpic = val
this.picindex = index
},
//添加购物车
Tocart() {
if (!window.localStorage.getItem("userID")) {
this.$message({
message: '请先登录后进行购买！',
type: 'warning',
duration: 1200,
onClose: () => {
//跳转页面或执行方法
window.location.replace("./503登录页.html")
}
});
} else {
addCartInfo({
"bigoUserid": window.localStorage.getItem("userID"),
"bigoGoodsid": this.goods.bigoGoodsid,
"bigoGoodsNorms": this.norms,
"bigoGoodsNum": 1
}).then(res => {
if (res.data.code == 200) {
this.$message({
message: '加入购物车成功',
type: 'success'
});
}
})
}
},
//前往购买
Tobuy() {
if (!window.localStorage.getItem("userID")) {
this.$message({
message: '请先登录后进行购买！',
type: 'warning',
duration: 1200,
onClose: () => {
//跳转页面或执行方法
window.location.replace("./503登录页.html")
}
});
}
addCartInfo({
"bigoUserid": window.localStorage.getItem("userID"),
"bigoGoodsid": this.goods.bigoGoodsid,
"bigoGoodsNorms": this.norms,
"bigoGoodsNum": 1
}).then(res => {
if (res.data.code == 200) {
window.location.href = "./201购物车.html"
}
})
}
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
