代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单详情页</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
<link rel="stylesheet" type="text/css" href="./css/message.css"/>
<link rel="stylesheet" type="text/css" href="./css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="./css/theme-chalk/index.css"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/browse/element-ui@2.10.1/lib/theme-chalk/fonts/element-icons.ttf"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/browse/element-ui@2.10.1/lib/theme-chalk/fonts/element-icons.woff"/>
<script type="text/javascript" src="./js/jQuery/jquery-3.1.1.js"></script>
<script type="text/javascript" src='./js/vue.js'></script>
<script type="text/javascript" src='./js/element-ui/index.js'></script>
<script type='text/javascript' src='./js/axios.min.js'></script>
<script type="text/javascript">
window.onload = function () {
var left = document.getElementById("left");
var box = document.getElementById("box");
var right = document.getElementById("right");
var pic = document.getElementById("pic");
var cover = document.getElementById("cover");
//1.鼠标移入事件
cover.onmousemove = function (e) {
var ev = window.event || e;
var mouseLeft = ev.offsetX || ev.layerX;
var mouseTop = ev.offsetY || ev.layerY;
var boxLeft = mouseLeft - 100;
var boxTop = mouseTop - 100;
if (boxLeft >= 158) {
boxLeft = 158;
}
if (boxLeft <= 0) {
boxLeft = 0;
}
if (boxTop >= 158) {
boxTop = 158;
}
if (boxTop <= 0) {
boxTop = 0;
}
box.style.left = boxLeft + 'px';
box.style.top = boxTop + 'px';
pic.style.left = boxLeft * -2 + 'px';
pic.style.top = boxTop * -2 + 'px';
}
cover.onmouseover = function () {
box.style.display = 'block';
}
cover.onmouseout = function () {
box.style.display = 'none';
}
}
</script>
</head>
<body>
<div id='app_message'>
<!--头部菜单-->
<div id="top-menu">
<div id="top">
<!--右部菜单-->
<ul id="top-left">
<li class="left-li1">
<a href="javascript:void(0);" class="left-a1"><i class="icon1"></i>Star Plus</a>
</li>
<li class="space"></li>
<li class="left-li2">
<div class="left-div1">
<a id="a" href="javascript:void(0);">Star 会员</a>
<i class="icon2"></i>
</div>
</li>
<li class="left-li3">
<a style="color: #5E5E5E;" href="javascript: void(0);">登录</a>
<a style="color: #5E5E5E;" href="javascript: void(0);">注册</a>
</li>
</ul>
<!--左部菜单-->
<ul id="top-right">
<li class="right-li1">
<a href="javascript: void(0);">我的订单</a>
</li>
<li class="right-li2">
<div class="right-div1">
<a href="javascript: void(0);">我的Star</a>
<i></i>
</div>
<div class="right-dropdown">
<strong>
<div v-if="this.userInfo.username!=''">
<label>欢迎!{{userInfo.username}}</label>
</div>
<div v-else>
<a href="./login.html">请登录</a>
</div>
</strong>
<ul id="order">
<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>
<ul id="coupon">
<li>
<a href="javascript: void(0);">红 券</a>
<ins>-</ins>
</li>
<li>
<a href="javascript: void(0);">蓝 券</a>
<ins>-</ins>
</li>
<li>
<a href="javascript: void(0);">店铺券</a>
<ins>-</ins>
</li>
<li>
<a href="javascript: void(0);">购物券</a>
<ins>-</ins>
</li>
</ul>
<p class="right-p">足迹</p>
<ul id="track">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</li>
<li class="gome-space"></li>
<li class="right-li3">
<a href="javascript: void(0);" @click='personZX'>个人中心</a>
</li>
<li class="service">
<div class="s-div">
<em class="iconfont icon-kefu"></em>
<a href="javascript: void(0);">服务中心</a>
<i></i>
</div>
<div class="s-dropdown">
<p>
<a href="javascript: void(0);">售后服务</a>
</p>
<ul>
<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>
<li>
<a href="javascript: void(0);">研报服务</a>
</li>
<li>
<a href="javascript: void(0);">家电维修</a>
</li>
</ul>
<p>
<a href="javascript: void(0);">帮助服务</a>
</p>
<ul>
<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>
<li>
<a href="javascript: void(0);">退款说明</a>
</li>
<li>
<a href="javascript: void(0);">优惠券说明</a>
</li>
</ul>
<a href="javascript: void(0);" class="a-btn">
<em class="iconfont icon-kefu"></em> 在线客服
</a>
</div>
</li>
<li class="nav">
<div class="n-div">
网站导航
<i></i>
</div>
<div class="n-dropdown">
<dl class="n-dl" style="border: none;">
<dt>主题促销</dt>
<dd>
<ul>
<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>
<ul>
<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>
<ul>
<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>
</dd>
</dl>
</div>
</div>
<!--头部菜单-->
<!--广告-->
<div class="ad-div">
</div>
<!--广告-->
<!--搜索框-->
<div class="gome-head">
<div class="logo" style="margin: 28px 20px 0px -261px;">
<a href="javascript: void(0);">国美在线</a>
</div>
<div class="logo-right-ad">
</div>
<div id="top-search">
<div class="searchbox">
<!-- <form id="searchForm" action="" method="post"> -->
<input v-model="key" type="text" placeholder="哈士奇"/>
<button class="search-btn" @click='search'>搜索</button>
<!-- </form> -->
<a href="javascript: void(0);">
<div class="voice-search"></div>
</a>
</div>
<div class="hotkeyword">
<a v-for='item in recommandGoosList2' href="javascript: void(0);"
@click='searchGoods(item.name)'>{{item.name}}</a>
</div>
</div>
<div class="mygome">
<ul class="topmenu">
<li>
<span class="m-span">
<a href="javascript:void(0)" onclick="vm.MyCat()" class="cartlink">
<em class="i-cart">
<span class="shopnum">
<span>{{UserCarList.length}}</span>
<i></i>
</span>
</em>
<span v-if='this.UserCarList.length==0' class="carttext">购物车空了</span>
<span v-else class="carttext">亲!这里有{{UserCarList.length}}个宠物了哦!</span>
<b></b>
</a>
</span>
<div class="menuhide">
<div class="aside">
<!-- <a href="javascript: void(0);">购物车</a>中还没有商品,赶紧选购吧! -->
<!-- 购物车表格 -->
<el-table :data="UserCarList" style="width: 100%" :show-header='false' :border='true'
fit>
<el-table-column prop="url" label="图片" width="60px">
<template slot-scope="scope">
<!-- <el-image
style="width: 100px; height: 80px"
:src="scope.row.logo"
fit="fill"></el-image>-->
<img :src="scope.row.url" style="width: 100px; height: 80px"/>
</template>
</el-table-column>
<el-table-column prop="goodsName" label="名称">
<template slot-scope="scope">
<!-- <el-image
style="width: 100px; height: 80px"
:src="scope.row.logo"
fit="fill"></el-image>-->
<el-link type="success">{{scope.row.goodsName}}</el-link>
</template>
</el-table-column>
</el-table>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--搜索框-->
<!--分类-->
<div class="category-box" style="border-bottom: 2px solid #d7000f;">
<div class="category">
<div class="sidecategory">
<h2 class="on">
<a href="javascript: void(0);">全部商品分类</a>
</h2>
<div class="navBox">
<div class="lisbg"></div>
<ul class="lisbg-ul">
<li v-for="(goodsTypeOne,index) in goodsTypeList" v-if="`${index+1}==1`"
class="edit-mode nav-item">
<h3>
<a href="javascript: void(0);" @click="searchGoods(goodsTypeOne.typeName)">
{{goodsTypeOne.typeName}}
</a>
</h3>
</li>
</ul>
<div v-for="(goodsTypeOne,index) in goodsTypeList">
<div :class="`subnav l${index+1}`">
<div class="loading">
<div class="fullcategory">
<div class="fullcategory-left">
<div class="fullcategory-title">
<div v-for="(goodsTypeTwo,index) in goodsTypeOne.children">
<a href="javascript: void(0);">
<!-- 二级分类 -->
{{goodsTypeTwo.typeName}}
<i></i>
</a>
</div>
</div>
<!-- 二级分类 -->
<div class="fullcategory-content-box">
<div v-for="(goodsTypeTwo,index) in goodsTypeOne.children"
class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title">{{goodsTypeTwo.typeName}}</div>
<div class="list">
<a v-for="(goodsTypeThree,index) in goodsTypeTwo.children"
href="javascript: void(0);">
{{goodsTypeThree.typeName}}
</a>
</div>
</ul>
</div>
</div>
</div>
<!-- <div class="fullcategory-right">
<div class="brand">
<ul class="brand-box">
<a href="javascript: void(0);">
<img src="images/6.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/7.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/8.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/9.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/10.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/11.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/12.jpg" />
</a>
<a href="javascript: void(0);">
<img src="images/13.jpg" />
</a>
</ul>
</div>
<a href="javascript: void(0);" class="category-img">
<img src="images/23.jpg" />
</a>
</div> -->
</div>
</div>
</div>
</div>
<!--右边的列表页,复制修改其中的内容即可-->
<div class="subnav l10">
<div class="loading">
<div class="fullcategory">
<div class="fullcategory-left">
<div class="fullcategory-title">
<a href="javascript: void(0);">
潮3C
<i></i>
</a>
<a href="javascript: void(0);">
手机
<i></i>
</a>
<a href="javascript: void(0);">
手机配件
<i></i>
</a>
<a href="javascript: void(0);">
数码
<i></i>
</a>
<a href="javascript: void(0);">
以旧换新
<i></i>
</a>
<a href="javascript: void(0);">
手机冲值
<i></i>
</a>
<a href="javascript: void(0);">
美通卡
<i></i>
</a>
<a href="javascript: void(0);">
延保服务
<i></i>
</a>
<a href="javascript: void(0);">
办公生活馆
<i></i>
</a>
</div>
<div class="fullcategory-content-box">
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title">手机通讯</div>
<div class="list">
<a href="javascript: void(0);">手机</a>
<a href="javascript: void(0);">对讲机</a>
</div>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">运营商</div>
<div class="list">
<div class="underline"></div>
<a href="javascript: void(0);">中国移动</a>
<a href="javascript: void(0);">中国电信</a>
<a href="javascript: void(0);">3G上网卡</a>
</div>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">手机配件</div>
<div class="list">
<div class="underline"></div>
<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);">iPhone配件</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>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">摄影摄像</div>
<div class="list">
<div class="underline"></div>
<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>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">摄影配件</div>
<div class="list">
<div class="underline"></div>
<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>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">智能设备</div>
<div class="list">
<div class="underline"></div>
<a href="javascript: void(0);">智能手表</a>
<a href="javascript: void(0);">智能手环</a>
<a href="javascript: void(0);">VR眼镜</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>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">视听娱乐</div>
<div class="list">
<div class="underline"></div>
<a href="javascript: void(0);">耳机/耳麦</a>
<a href="javascript: void(0);">音箱/音响</a>
<a href="javascript: void(0);">MP3/MP4</a>
<a href="javascript: void(0);">收/录音机</a>
</div>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">电子教育</div>
<div class="list">
<div class="underline"></div>
<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>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">充话费</div>
<div class="list">
<div class="underline"></div>
<a href="javascript: void(0);">移动/联通/电信/极信</a>
</div>
</ul>
</div>
<div class="fullcategory-content">
<ul class="fullcategory-list">
<div class="title2">充流量</div>
<div class="list">
<div class="underline"></div>
<a href="javascript: void(0);">移动/联通/电信</a>
</div>
</ul>
</div>
</div>
</div>
<div class="fullcategory-right">
<div class="brand">
<ul class="brand-box">
<a href="javascript: void(0);">
<img src="images/6.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/7.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/8.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/9.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/10.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/11.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/12.jpg"/>
</a>
<a href="javascript: void(0);">
<img src="images/13.jpg"/>
</a>
</ul>
</div>
<a href="javascript: void(0);" class="category-img">
<img src="images/23.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!--右边的列表页,复制修改其中的内容即可-->
</div>
<ul class="mainnav">
<li class="cur">
<a href="javascript: void(0);" @click=' gotoFirstPage '>
<span>首页</span>
</a>
</li>
<li v-for="(goodsTypeOne,index) in goodsTypeList">
<a href="javascript: void(0);">
<span>{{goodsTypeOne.typeName}}</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--分类-->
<!--国美自营头部选中的商品导航-->
<div class="breadcrumbs-wrapper">
<div class="breadcrumbs-container">
<div class="left">
<ul>
<li>
<a href="javascript: void(0)">首页</a>
</li>
<li class="linkBold">
<i class="icon-crumbs-right"></i>
<a href="javascript: void(0)">宠物列表</a>
</li>
<li v-for="type in goodstype">
<i class="icon-crumbs-right"></i>
<a href="javascript: void(0)">{{type.typeName}}</a>
</li>
</ul>
</div>
<div class="right">
<div class="zy-stores">
<a href="javascript: void(0)" class="btn-service hide">
<i></i> 联系送养人
</a>
</div>
</div>
</div>
</div>
<!--头部选中的商品导航-->
<!--订单信息内容-->
<div class="gome-container">
<div class="prd-firstscreen-left">
<div class="magnifier">
<div class="pic-big">
<!-- <div class="jqzoom" id="left">
<img :src="goods.url" width="360" height="360" />
</div> -->
<div class="jqzoom" id="left">
<img width="360" height="360" :src="goods.url"/>
<a href="javascript: void(0)" class="pic-l-b"></a>
<!--放大镜的小方块-->
<div id="box" class="jqBlock"></div>
<!--放大镜的小方块-->
<div id="cover"></div>
</div>
<div id="right" class="zoomdiv">
<img id="pic" :src="goods.url" style="height: auto; width: auto;" class="bigimg"/>
</div>
</div>
</div>
<div class="toolbar" style="margin-top:15px">
<span class="product-number">动物编号:{{goods.goodsNumber}}</span>
<a href="javascript: void(0)" class="collect" style="margin-left: 6px;">
<i></i>
<span @click='insertCollect(userInfo.username,goods.goodsNumber) '> 收藏</span> </a>
</div>
</div>
<d class="prd-firstscreen-center" style="margin-left:50px">
<div class="hgroup" style="margin-top:7px">
<font size="5">{{type}}</font>
</div>
<div style="background-color:#FFFCE6;font-size:13px;width:590px;height:225px">
<div class="prd-properties">
<div class="prd-properties-1">
<div class="prd-properties-other m20 tese">
<label class="prd-properties-left line20" style="margin-top:21px">宠 物 名 称</label>
<div class="prd-properties-right" style="margin-top:25px">
{{goods.petName}}
</div>
</div>
<div class="prd-properties-other m20 tese">
<label class="prd-properties-left line20">宠 物 年 龄</label>
<div class="prd-properties-right" style="margin-top:4px">
{{goods.petAge}}
</div>
</div>
<div class="prd-properties-other m20 tese">
<label class="prd-properties-left line20">联    系   人</label>
<div class="prd-properties-right" style="margin-top:4px">
{{goods.person}}
</div>
</div>
<div class="prd-properties-other m20 tese">
<label class="prd-properties-left line20">联 系 电 话</label>
<div class="prd-properties-right" style="margin-top:4px">
{{goods.userTelephone}}
</div>
</div>
<div class="prd-properties-other m20 tese">
<label class="prd-properties-left line20">联系人地址</label>
<div class="prd-properties-right" style="margin-top:4px">
{{goods.address}}{{goods.xxaddress}}
</div>
</div>
</div>
</div>
</div>
<div class="prd-buttons">
<span class="btn-product btn-addcart" style="margin-left:440px;background-color:#F3A5B3"
@click='insertShappingCar(userInfo.username,goods.goodsNumber) '>加入购物车</span>
</div>
</div>
<!--订单信息内容-->
<!--商品详情-->
<div class="breadcrumbs-container">
<div style="clear:both;"></div>
<div class="prdDescOut">
<div class="pdtl-tab j-fixtg">
<ul class="prdtitbox" style="width: 1198.4px;">
</ul>
</div>
<ul class="pedmainbox">
<li class="l">
<div class="prd-firstscreen-center" style="margin-top:20px">
<font size="5" face="verdana" style="color:#FFB75E">发布者描述——</font>
<div id="detailHtml" style="font-size:13px;margin-top:20px">
    {{goods.beizhu}}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="breadcrumbs-container">
<div style="background-color:#FFFCE6;height:200px;margin-top:330px">
.
</div>
</div>
</div>
<div class="breadcrumbs-container">
<div style="clear:both;"></div>
<div class="prdDescOut">
<div class="pdtl-tab j-fixtg">
<ul class="prdtitbox" style="width: 1198.4px;">
</ul>
</div>
<ul class="pedmainbox">
<li class="l">
<div class="prd-firstscreen-center" style="margin-top:20px">
<div style="background-color:#FFFCE6;height:200px;margin-top:330px"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="./js/message.js"></script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。