800 lines
26 KiB
HTML
800 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
||
<title>商品页面</title>
|
||
|
||
<link rel="shortcut icon" href="img/foodie.ico" />
|
||
|
||
<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
|
||
<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
|
||
<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
|
||
<link type="text/css" href="css/optstyle.css" rel="stylesheet" />
|
||
<link type="text/css" href="css/style.css" rel="stylesheet" />
|
||
<link type="text/css" href="css/item.css" rel="stylesheet" />
|
||
|
||
<!-- 分页css -->
|
||
<link href="components/VuePaging/zpageNav.css" rel="stylesheet" />
|
||
|
||
<script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
|
||
<script type="text/javascript" src="basic/js/quick_links.js"></script>
|
||
|
||
<script type="text/javascript" src="AmazeUI-2.4.2/assets/js/amazeui.js"></script>
|
||
<script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
|
||
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
|
||
<script type="text/javascript" src="js/list.js"></script>
|
||
|
||
<script src="AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
|
||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
<script src="js/moment.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="items">
|
||
<!--顶部导航条 -->
|
||
<div class="am-container header">
|
||
<ul class="message-l">
|
||
<div class="topMessage">
|
||
<div class="menu-hd" v-show="!userIsLogin">
|
||
<a href="login.html" target="_top" class="h">亲，请登录</a>
|
||
<a href="register.html" target="_top">免费注册</a>
|
||
</div>
|
||
<div class="menu-hd" v-show="userIsLogin">
|
||
<span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
|
||
</div>
|
||
</div>
|
||
</ul>
|
||
<ul class="message-r">
|
||
<div class="topMessage home">
|
||
<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
|
||
</div>
|
||
<div class="topMessage my-shangcheng">
|
||
<div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
|
||
<i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
|
||
<!--悬浮搜索框-->
|
||
<div class="nav white">
|
||
<!-- <div class="logo"><img src="images/logo.png" /></div> -->
|
||
<div class="logoBig">
|
||
<li><a href="index.html"><img src="images/logobig.png" /></a></li>
|
||
</div>
|
||
<div class="search-bar pr">
|
||
<a name="index_none_header_sysc" href="#"></a>
|
||
<form>
|
||
<input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
|
||
placeholder="搜索" autocomplete="off">
|
||
<input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="clear"></div>
|
||
<b class="line"></b>
|
||
<div class="listMain">
|
||
|
||
<!--分类-->
|
||
<div class="nav-table">
|
||
<div class="long-title"><span class="all-goods">商品详情</span></div>
|
||
</div>
|
||
<ol class="am-breadcrumb am-breadcrumb-slash">
|
||
<li><a href="#">首页</a></li>
|
||
<li><a href="#">分类</a></li>
|
||
<li class="am-active">商品</li>
|
||
</ol>
|
||
|
||
<!--放大镜-->
|
||
<div class="item-inform">
|
||
<div class="clearfixLeft" id="clearcontent">
|
||
|
||
<div class="box" id="zoomBox"></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="clearfixRight">
|
||
<!--规格属性-->
|
||
<!--名称-->
|
||
<div class="tb-detail-hd">
|
||
<h1>{{item.itemName}}</h1>
|
||
</div>
|
||
<div class="tb-detail-list">
|
||
<!--价格-->
|
||
<div class="tb-detail-price" style="height: 140px;">
|
||
<li class="price iteminfo_price">
|
||
<dt>促销价</dt>
|
||
<dd><em>¥</em><b class="sys_item_price">{{selectedSku.priceDiscount / 100}}</b></dd>
|
||
</li>
|
||
<li class="price iteminfo_mktprice">
|
||
<dt>原价</dt>
|
||
<dd><em>¥</em><b class="sys_item_mktprice">{{selectedSku.priceNormal / 100}}</b></dd>
|
||
</li>
|
||
<li class="price iteminfo_mktprice">
|
||
<dt>累计销售</dt>
|
||
<dd><b class="">{{item.sellCounts}}</b></dd>
|
||
</li>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="clear"></div>
|
||
|
||
<!--各种规格-->
|
||
<dl class="iteminfo_parameter sys_item_specpara">
|
||
<dt class="theme-login">
|
||
<div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div>
|
||
</dt>
|
||
<dd>
|
||
<!--操作页面-->
|
||
<div class="theme-popover-mask"></div>
|
||
<div class="theme-popover">
|
||
<div class="theme-span"></div>
|
||
<div class="theme-popbod dform">
|
||
<form class="theme-signin" name="loginform" action="" method="post">
|
||
<div class="theme-signin-left">
|
||
<div class="theme-options">
|
||
<div class="cart-title">口味</div>
|
||
<ul>
|
||
<li @click="selectSku(specIdx)"
|
||
v-for="(spec,specIdx) in itemSpecList"
|
||
:class="['sku-line', {'selected' : selectedSku.id == spec.id}]">
|
||
{{spec.name}}<i></i></li>
|
||
</ul>
|
||
</div>
|
||
<div class="theme-options">
|
||
<div class="cart-title number">数量</div>
|
||
<dd>
|
||
<input id="min" class="am-btn am-btn-default" name="" type="button" value="-"
|
||
@click="minus" />
|
||
<input id="text_box" name="" type="text" v-model="buyCounts" style="width:30px;" />
|
||
<input id="add" class="am-btn am-btn-default" name="" type="button" value="+"
|
||
@click="plus" />
|
||
<span id="Stock" class="tb-hidden">库存<span
|
||
class="stock">{{selectedSku.stock}}</span>件</span>
|
||
</dd>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
<div class="btn-op">
|
||
<div class="btn am-btn am-btn-warning">确认</div>
|
||
<div class="btn close am-btn am-btn-warning">取消</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</dd>
|
||
</dl>
|
||
<div class="clear"></div>
|
||
<!--活动 -->
|
||
<div class="shopPromotion gold">
|
||
<div class="hot">
|
||
<dt class="tb-metatit">店铺优惠</dt>
|
||
<div class="gold-list">
|
||
<p v-show="selectedSku.discounts < 1">{{selectedSku.discounts * 10}}折优惠</p>
|
||
<p v-show="selectedSku.discounts >= 1">无优惠</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pay">
|
||
<!-- <li>
|
||
<div class="clearfix tb-btn tb-btn-buy theme-login">
|
||
<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
|
||
</div>
|
||
</li> -->
|
||
<li>
|
||
<div class="clearfix tb-btn tb-btn-basket theme-login">
|
||
<a id="LikBasket"
|
||
style="width:160px; height: 46px;background-color: #df2e33; font-weight: bold; line-height: 46px;font-size: 18px;padding: 0 26px;font-family: 'microsoft yahei';"
|
||
title="加入购物车" href="javascript:void(0);" @click="addToCart"><i></i>加入购物车</a>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="introduce">
|
||
<div class="introduceMain">
|
||
<div class="am-tabs" data-am-tabs>
|
||
<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
|
||
<li class="am-active">
|
||
<a href="#">
|
||
<span class="index-needs-dt-txt">宝贝详情</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<span class="index-needs-dt-txt">全部评价</span></a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="am-tabs-bd">
|
||
<div class="am-tab-panel am-fade am-in am-active">
|
||
<div class="J_Brand">
|
||
|
||
<div class="attr-list-hd tm-clear">
|
||
<h4>产品参数：</h4>
|
||
</div>
|
||
<div class="clear"></div>
|
||
<ul id="J_AttrUL">
|
||
<li title="">产地: {{itemParams.producPlace}}</li>
|
||
<li title="">品牌名: {{itemParams.brand}}</li>
|
||
<li title="">生产厂名: {{itemParams.factoryName}}</li>
|
||
<li title="">生产厂址: {{itemParams.factoryAddress}}</li>
|
||
<li title="">包装方式: {{itemParams.packagingMethod}}</li>
|
||
<li title="">保质期: {{itemParams.footPeriod}}</li>
|
||
<li title="">规格重量: {{itemParams.weight}}</li>
|
||
<li title="">储存方法: {{itemParams.storageMethod}}</li>
|
||
<li title="">食用方式: {{itemParams.eatMethod}}</li>
|
||
</ul>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="details">
|
||
<div class="attr-list-hd after-market-hd">
|
||
<h4>商品细节</h4>
|
||
</div>
|
||
<div class="twlistNews" v-html="item.content"></div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
|
||
<div class="am-tab-panel am-fade">
|
||
|
||
<div class="actor-new comment-summary">
|
||
<div class="rate">
|
||
<div v-if="countsVO.totalCounts == 0">
|
||
<strong>100<span>%</span></strong>
|
||
</div>
|
||
<div v-if="countsVO.totalCounts > 0">
|
||
<strong>{{Math.round(countsVO.goodCounts / countsVO.totalCounts * 100)}}<span>%</span></strong>
|
||
</div>
|
||
<br /><span>好评度</span>
|
||
</div>
|
||
<div class="comment-counts">
|
||
|
||
<div class="counts-words" @click="renderCommentsByLevel('')">全部评价（{{countsVO.totalCounts}}）</div>
|
||
<div class="counts-words" @click="renderCommentsByLevel(1)" style="margin-left: 20px;">好评（{{countsVO.goodCounts}}）</div>
|
||
<div class="counts-words" @click="renderCommentsByLevel(2)" style="margin-left: 20px;">中评（{{countsVO.normalCounts}}）</div>
|
||
<div class="counts-words" @click="renderCommentsByLevel(3)" style="margin-left: 20px;">差评（{{countsVO.badCounts}}）</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
|
||
<ul class="am-comments-list am-comments-list-flip">
|
||
|
||
<li class="am-comment" v-for="(commentRecord, commentIndex) in commentList">
|
||
<!-- 评论容器 -->
|
||
<a href="javascript:void(0);">
|
||
<img class="am-comment-avatar" :src="commentRecord.userFace" />
|
||
<!-- 评论者头像 -->
|
||
</a>
|
||
<div class="am-comment-main">
|
||
<!-- 评论内容容器 -->
|
||
<header class="am-comment-hd">
|
||
<!--<h3 class="am-comment-title">评论标题</h3>-->
|
||
<div class="am-comment-meta">
|
||
<!-- 评论元数据 -->
|
||
<a href="#link-to-user"
|
||
class="am-comment-author">{{commentRecord.nickname}} (匿名)</a>
|
||
<!-- 评论者 -->
|
||
评论于
|
||
<time datetime="">{{commentRecord.createdTime}}</time>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="am-comment-bd">
|
||
<div class="tb-rev-item " data-id="255776406962">
|
||
<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
|
||
{{commentRecord.content}}
|
||
</div>
|
||
<div class="tb-r-act-bar">
|
||
<span class="specName">规格：{{commentRecord.specName}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 评论内容 -->
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="clear"></div>
|
||
|
||
<!-- 分页 start-->
|
||
<div class="wrap" id="wrap">
|
||
<zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
|
||
v-bind:max-page="maxPage" v-on:pagehandler="doPaging">
|
||
</zpagenav>
|
||
</div>
|
||
<!-- 分页 end-->
|
||
|
||
<!--分页 -->
|
||
<!-- <ul class="am-pagination am-pagination-right">
|
||
<li class="am-disabled"><a href="#">«</a></li>
|
||
<li class="am-active"><a href="#">1</a></li>
|
||
<li><a href="#">2</a></li>
|
||
<li><a href="#">3</a></li>
|
||
<li><a href="#">4</a></li>
|
||
<li><a href="#">5</a></li>
|
||
<li><a href="#">»</a></li>
|
||
</ul> -->
|
||
<div class="clear"></div>
|
||
</div>
|
||
<div class="am-tab-panel am-fade">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="clear"></div>
|
||
|
||
<div class="footer ">
|
||
<div class="footer-hd ">
|
||
<p>
|
||
<a href="https://www.imooc.com/" target="_blank">慕课网</a>
|
||
<b>|</b>
|
||
<a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a>
|
||
<b>|</b>
|
||
<a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a>
|
||
<b>|</b>
|
||
<a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a>
|
||
<b>|</b>
|
||
<a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a>
|
||
</p>
|
||
</div>
|
||
<div class="footer-bd ">
|
||
<p>
|
||
<em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!--菜单 -->
|
||
<div class="tip">
|
||
<div id="sidebar">
|
||
<div id="wrap">
|
||
<div id="prof" class="item ">
|
||
<a href="# ">
|
||
<span class="setting "></span>
|
||
</a>
|
||
<div class="ibar_login_box status_login " style="height: 150px">
|
||
<div class="avatar_box ">
|
||
<p class="avatar_imgbox ">
|
||
<img v-show="userIsLogin" :src="userInfo.face" />
|
||
<img v-show="!userIsLogin" src="img/default-face.png" />
|
||
</p>
|
||
<ul class="user_info">
|
||
<li v-show="!userIsLogin">用户未登录</li>
|
||
<li v-show="userIsLogin">用户昵称：{{userInfo.nickname}}</li>
|
||
<li v-show="userIsLogin" @click="logout">退出登录</li>
|
||
</ul>
|
||
</div>
|
||
<i class="icon_arrow_white "></i>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="shopCart " class="item " @click="goToShopcart">
|
||
<a href="# ">
|
||
<span class="message "></span>
|
||
</a>
|
||
<p>购物车</p>
|
||
<p class="cart_num ">{{shopcartItemCounts}}</p>
|
||
</div>
|
||
|
||
<div class="quick_toggle ">
|
||
|
||
<li class="qtitem ">
|
||
<a href="#top " class="return_top "><span class="top "></span></a>
|
||
</li>
|
||
</div>
|
||
|
||
<!--回到顶部 -->
|
||
<div id="quick_links_pop " class="quick_links_pop hide "></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="components/VuePaging/zpageNav.js"></script>
|
||
<script type="text/javascript " src="js/app.js"></script>
|
||
<script type="text/javascript">
|
||
var index = new Vue({
|
||
el: "#items",
|
||
data: {
|
||
userIsLogin: false,
|
||
userInfo: {},
|
||
|
||
keywords: null,
|
||
|
||
item: {},
|
||
itemId: "",
|
||
itemImgList: [],
|
||
itemSpecList: [],
|
||
itemParams: {},
|
||
selectedSku: {},
|
||
|
||
buyCounts: 1,
|
||
|
||
shopcartItemCounts: 0, // 购物车中商品的数量
|
||
|
||
countsVO: {}, // 评论数
|
||
|
||
commentList: [], // 评论列表
|
||
level: "", // 评论等级
|
||
page: 1, // 分页页数
|
||
pageSize: 10, // 分页每页显示数量
|
||
maxPage: 1, // 总页数
|
||
total: 1, // 总记录数
|
||
},
|
||
created() {
|
||
// var me = this;
|
||
// 通过cookie判断用户是否登录
|
||
this.judgeUserLoginStatus();
|
||
|
||
// 渲染商品信息
|
||
var itemId = app.getUrlParam("itemId");
|
||
// 如果itemId为空，跳转到错误页面
|
||
if (itemId == null || itemId == undefined || itemId == '') {
|
||
window.location.href = "http://www.imooc.com/error/noexists";
|
||
return;
|
||
}
|
||
this.itemId = itemId;
|
||
this.renderItemInfo(itemId);
|
||
|
||
// 从购物车中拿到商品的数量
|
||
this.shopcartItemCounts = app.getShopcartItemCounts();
|
||
|
||
|
||
// 渲染商品评价列表内容
|
||
this.renderComments(itemId, this.level, this.page, this.pageSize);
|
||
this.renderCommentLevelCounts(itemId);
|
||
|
||
},
|
||
methods: {
|
||
goUserCenter() {
|
||
// 判断用户是否登录
|
||
var userIsLogin = this.userIsLogin;
|
||
if (!userIsLogin) {
|
||
// 用户未登录，则跳转
|
||
window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
|
||
} else {
|
||
window.location.href = app.centerServerUrl;
|
||
}
|
||
},
|
||
// 渲染商品评价等级数量
|
||
renderCommentLevelCounts(itemId) {
|
||
|
||
var serverUrl = app.serverUrl;
|
||
axios.defaults.withCredentials = true;
|
||
axios.get(
|
||
serverUrl + '/items/commentLevel?itemId=' + itemId, {})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
var countsVO = res.data.data;
|
||
this.countsVO = countsVO;
|
||
// console.log(countsVO);
|
||
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
},
|
||
// 根据评论等级进行查询
|
||
renderCommentsByLevel(level) {
|
||
console.log(level);
|
||
this.level = level;
|
||
this.renderComments(this.itemId, level, 1, this.pageSize);
|
||
},
|
||
// 分页实现方法 跳转到page页
|
||
doPaging: function (page) {
|
||
this.page = page;
|
||
this.renderComments(this.itemId, this.level, page, this.pageSize);
|
||
},
|
||
renderComments(itemId, level, page, pageSize) {
|
||
|
||
var serverUrl = app.serverUrl;
|
||
axios.defaults.withCredentials = true;
|
||
axios.get(
|
||
serverUrl + '/items/comments?itemId=' + itemId + "&level=" + level + "&page=" + page +
|
||
"&pageSize=" + pageSize, {})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
var grid = res.data.data;
|
||
var commentList = grid.rows;
|
||
this.commentList = commentList;
|
||
// console.log(commentList);
|
||
|
||
for (var i = 0 ; i < commentList.length ; i ++) {
|
||
var date = commentList[i].createdTime;
|
||
var formatedTime = moment(date).format('YYYY年MM月DD日 h:mm:ss');
|
||
// console.log(formatedTime);
|
||
commentList[i].createdTime = formatedTime;
|
||
}
|
||
|
||
var maxPage = grid.total; // 获得总页数
|
||
var total = grid.records; // 获得总记录数
|
||
|
||
this.maxPage = maxPage;
|
||
this.total = total;
|
||
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
},
|
||
goToShopcart() {
|
||
window.location.href = "shopcart.html";
|
||
},
|
||
minus() {
|
||
var tmpCounts = parseInt(this.buyCounts) - 1;
|
||
if (tmpCounts <= 0) {
|
||
tmpCounts = 1;
|
||
}
|
||
this.buyCounts = tmpCounts;
|
||
},
|
||
plus() {
|
||
var tmpCounts = parseInt(this.buyCounts) + 1;
|
||
if (tmpCounts >= 100) {
|
||
tmpCounts = 99;
|
||
}
|
||
this.buyCounts = tmpCounts;
|
||
},
|
||
addToCart() {
|
||
// 由于cookie大小限制为4k，另外课程第一阶段是没有redis的，所以相关暂存性内容会存入到cookie中
|
||
var shopcartCounts = app.getShopcartItemCounts();
|
||
if (shopcartCounts >= 8) {
|
||
alert("您购物车中的食物太多啦~请把它们带回家吧~！");
|
||
return;
|
||
}
|
||
|
||
// 创建购物车对象
|
||
var item = this.item;
|
||
var itemImgList = this.itemImgList;
|
||
var selectedSku = this.selectedSku;
|
||
|
||
var tmpBuyCounts = this.buyCounts;
|
||
tmpBuyCounts = parseInt(tmpBuyCounts);
|
||
if (typeof (tmpBuyCounts) != "number") {
|
||
alert("购买数量不能为非数字！");
|
||
// tmpBuyCounts = 1;
|
||
this.buyCounts = 1;
|
||
return;
|
||
}
|
||
|
||
// 构建购物车商品对象
|
||
var shopcartItem = new app.ShopcartItem(item.id,
|
||
itemImgList[0].url,
|
||
item.itemName,
|
||
selectedSku.id,
|
||
selectedSku.name,
|
||
tmpBuyCounts,
|
||
selectedSku.priceDiscount,
|
||
selectedSku.priceNormal);
|
||
// console.log(shopcartItem);
|
||
// 添加商品至购物车list
|
||
app.addItemToShopcart(shopcartItem);
|
||
|
||
// 购物车应该在登录/注册的时候同步
|
||
|
||
// 判断当前用户是否登录，如果登录，则把购物车数据发送至后端（后端需要合并已存在的商品）
|
||
var userIsLogin = this.userIsLogin;
|
||
if (userIsLogin) {
|
||
var userInfo = this.userInfo;
|
||
var serverUrl = app.serverUrl;
|
||
axios.defaults.withCredentials = true;
|
||
axios.post(
|
||
serverUrl + '/shopcart/add?userId=' + userInfo.id,
|
||
shopcartItem, {
|
||
headers: {
|
||
'headerUserId': userInfo.id,
|
||
'headerUserToken': userInfo.userUniqueToken
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
alert("商品添加至购物车成功！");
|
||
|
||
// 以下仅供测试观察数据
|
||
// var foodieShopcartCookie = app.getCookie("shopcart");
|
||
// var foodieShopcart = [];
|
||
// if (foodieShopcartCookie != null && foodieShopcartCookie != "" && foodieShopcartCookie != undefined) {
|
||
// var foodieShopcartStr = decodeURIComponent(foodieShopcartCookie);
|
||
// foodieShopcart = JSON.parse(foodieShopcartStr);
|
||
// }
|
||
// console.log(foodieShopcart);
|
||
|
||
// 刷新购物车数量
|
||
this.shopcartItemCounts = app.getShopcartItemCounts();
|
||
},
|
||
doSearch() {
|
||
var keywords = this.keywords;
|
||
// console.log(keywords);
|
||
if (keywords == null || keywords == undefined || keywords == '') {
|
||
alert("搜索内容不能为空");
|
||
return;
|
||
}
|
||
// window.location.href = "search.html?keywords=" + keywords;
|
||
window.open("search.html?keywords=" + keywords);
|
||
},
|
||
getRequest() {},
|
||
postRequest() {},
|
||
// 渲染商品信息
|
||
renderItemInfo(itemId) {
|
||
var serverUrl = app.serverUrl;
|
||
axios.get(serverUrl + '/items/info/' + itemId, {})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
var itemInfo = res.data.data;
|
||
var item = itemInfo.item;
|
||
// 如果item为空，则商品不存在，跳转错误页面
|
||
if (item == null || item == undefined || item == '') {
|
||
window.location.href = "http://www.imooc.com/error/noexists";
|
||
}
|
||
|
||
// console.log(itemInfo);
|
||
this.item = item;
|
||
|
||
// 商品图片放大镜效果实现
|
||
var itemImgListTemp = itemInfo.itemImgList;
|
||
this.renderZoomItemImgs(itemImgListTemp);
|
||
|
||
// 商品规格实现
|
||
var itemSpecListTemp = itemInfo.itemSpecList;
|
||
this.itemSpecList = itemSpecListTemp;
|
||
var selectedSku = itemSpecListTemp[0];
|
||
this.selectedSku = selectedSku;
|
||
|
||
this.itemParams = itemInfo.itemParams;
|
||
|
||
// console.log(this.itemImgList);
|
||
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
}
|
||
});
|
||
},
|
||
// 选择某一个sku规格后重新渲染页面
|
||
selectSku(arrIndex) {
|
||
// console.log(arrIndex);
|
||
var itemSpecList = this.itemSpecList;
|
||
var selectedSku = itemSpecList[arrIndex];
|
||
this.selectedSku = selectedSku;
|
||
},
|
||
// 商品图片放大镜效果实现
|
||
renderZoomItemImgs(itemImgListTemp) {
|
||
// 循环图片，把头图放在第一张
|
||
for (var i = 0; i < itemImgListTemp.length; i++) {
|
||
var tempImg = itemImgListTemp[i];
|
||
var isMain = tempImg.isMain;
|
||
if (isMain == 1) {
|
||
// 删除主图在数组中的位置
|
||
itemImgListTemp.splice(i, 1);
|
||
// 把主图插入到第一个元素
|
||
itemImgListTemp.unshift(tempImg);
|
||
}
|
||
}
|
||
this.itemImgList = itemImgListTemp;
|
||
|
||
// 循环图片，渲染放大镜商品图
|
||
var zoomBoxHtml = '';
|
||
var mainItemImg = itemImgListTemp[0];
|
||
zoomBoxHtml += '' +
|
||
'<div class="tb-booth tb-pic tb-s310">' +
|
||
'<img src="' + mainItemImg.url + '" alt="细节展示放大镜特效" rel="' + mainItemImg.url +
|
||
'" class="jqzoom" />' +
|
||
'</div>';
|
||
zoomBoxHtml += '<ul class="tb-thumb" id="thumblist">';
|
||
for (var i = 0; i < itemImgListTemp.length; i++) {
|
||
var tempImg = itemImgListTemp[i];
|
||
|
||
if (i == 0) {
|
||
zoomBoxHtml += '<li class="tb-selected">';
|
||
} else {
|
||
zoomBoxHtml += '<li>';
|
||
}
|
||
zoomBoxHtml += '<div class="tb-pic tb-s40">' +
|
||
'<a href="javascript:return;"><img src="' + tempImg.url + '" mid="' + tempImg.url +
|
||
'" big="' + tempImg.url + '"></a>' +
|
||
'</div>' +
|
||
'</li>';
|
||
}
|
||
zoomBoxHtml += '</ul>';
|
||
|
||
var $zoomBox = $('#zoomBox');
|
||
$zoomBox.html(zoomBoxHtml);
|
||
|
||
$(".jqzoom").imagezoom();
|
||
$("#thumblist li a").click(function () {
|
||
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
|
||
$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
|
||
$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
|
||
});
|
||
|
||
// <div class="tb-booth tb-pic tb-s310">
|
||
// <img src="img/img1.png" alt="细节展示放大镜特效" rel="img/img1.png" class="jqzoom" />
|
||
// </div>
|
||
// <ul class="tb-thumb" id="thumblist">
|
||
// <li class="tb-selected">
|
||
// <div class="tb-pic tb-s40">
|
||
// <a href="javascript:return;"><img src="img/img1.png" mid="img/img1.png" big="img/img1.png"></a>
|
||
// </div>
|
||
// </li>
|
||
// <li>
|
||
// <div class="tb-pic tb-s40">
|
||
// <a href="javascript:return;"><img src="img/img2.png" mid="img/img2.png" big="img/img2.png"></a>
|
||
// </div>
|
||
// </li>
|
||
// <li>
|
||
// <div class="tb-pic tb-s40">
|
||
// <a href="javascript:return;"><img src="img/img3.png" mid="img/img3.png" big="img/img3.png"></a>
|
||
// </div>
|
||
// </li>
|
||
// </ul>
|
||
},
|
||
// 通过cookie判断用户是否登录
|
||
judgeUserLoginStatus() {
|
||
var userCookie = app.getCookie("user");
|
||
if (userCookie != null && userCookie != undefined && userCookie != '') {
|
||
var userInfoStr = decodeURIComponent(userCookie);
|
||
// console.log(userInfo);
|
||
if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
|
||
var userInfo = JSON.parse(userInfoStr);
|
||
// 判断是否是一个对象
|
||
if ( typeof(userInfo) == "object" ) {
|
||
this.userIsLogin = true;
|
||
// console.log(userInfo);
|
||
this.userInfo = userInfo;
|
||
} else {
|
||
this.userIsLogin = false;
|
||
this.userInfo = {};
|
||
}
|
||
}
|
||
} else {
|
||
this.userIsLogin = false;
|
||
this.userInfo = {};
|
||
}
|
||
},
|
||
logout() {
|
||
var userId = this.userInfo.id;
|
||
var serverUrl = app.serverUrl;
|
||
|
||
axios.defaults.withCredentials = true;
|
||
axios.post(serverUrl + '/passport/logout?userId=' + userId, {})
|
||
.then(res => {
|
||
if (res.data.status == 200) {
|
||
window.location.href = "index.html";
|
||
} else if (res.data.status == 500) {
|
||
alert(res.data.msg);
|
||
return;
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |