基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情

效果图

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>黄菊华：Vue.js商城实战-产品详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/chanpin_xiangqing.css"><script src="vue2.2.2.min.js" ></script><script src="axios.min.js"></script><link rel="stylesheet" type="text/css" href="lunbo.css">
</head><body>
<div id="app">     <!--头部菜单--><div class="toubu"><div class="toubu_caidan toubu_caidan_xuanzhong">商品</div><a id="lj02" class="toubu_caidan">详情</a><a id="lj03" class="toubu_caidan">评论</a></div><script>//下面代码获取页面的参数urlinfo = window.location.href  //获取当前页面的urlconsole.log(urlinfo);len = urlinfo.length; //获取url的长度offset =urlinfo.indexOf("?");//设置参数字符串开始的位置neirong = urlinfo.substr(offset+1,len);//取出参数字符串 这里会获得类似“id=1”这样的字符串console.log(neirong);neirong1 = neirong.split("&");//对获得的参数字符串按照“=”进行分割cs1 = neirong1[0].split("=");cs1_mc = cs1[0];//得到参数名字cs1_zhi = cs1[1];//得到参数值console.log("参数1的名称："+cs1_mc + " | 参数1的值："+cs1_zhi);cs2 = neirong1[1].split("=");cs2_mc = cs2[0];//得到参数名字cs2_zhi = decodeURI(cs2[1]);//得到参数值console.log("参数2的名称："+cs2_mc + " | 参数2的值："+cs2_zhi);  document.getElementById("lj02").href="chanpin_xiangqing2.html?id=" + cs1_zhi + "&mc=" + cs2_zhi;document.getElementById("lj03").href="chanpin_xiangqing3.html?id=" + cs1_zhi + "&mc=" + cs2_zhi;</script> <div class="qukuai">   <!--轮播图片--><div class="carousel-wrap"><transition-group tag="ul" class='slide-ul' name="list"><li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go"><a :href="list.clickUrl" ><img :src="list.image" :alt="list.desc"></a></li></transition-group><div class="carousel-items"><span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span></div></div>  <!--产品名称（标题）--><div class="biaoti"><div class="biaoti_zhu">{{cp_mingcheng}}</div><div class="biaoti_jiage">¥ {{jiage}}</div><div class="biaoti_fu">{{cp_jianjie}}</div></div><div class="gaodu10"></div><!--会员等级和价格--><div class="huiyuan"><div class="huiyuan_biaoti">会员</div><div class="huiyuan_dengji">银牌会员</div><div class="huiyuan_jiage">享受价格：¥ 22.00</div></div><!--附加属性--><div class="gaodu10"></div><div class="fujia"><div class="fujia_xiangmu"><div class="fujia_xiangmu_zuo">库存：{{cp_kucun}} 件</div><div class="fujia_xiangmu_you">限购：{{xiangou_shuliang}}</div></div><div class="fujia_xiangmu"><div class="fujia_xiangmu_zuo">已销：{{cp_yixiaoshou}} 件</div><div class="fujia_xiangmu_you">评论： 条</div></div>      </div><!--运费--><div class="gaodu10"></div><div class="fujia2"><div class="fujia2_xiangmu"><div class="fujia2_xiangmu_zuo">送至</div><div class="fujia2_xiangmu_you">浙江 杭州 余杭区</div></div><div class="fujia2_xiangmu"><div class="fujia2_xiangmu_zuo">运费</div><div class="fujia2_xiangmu_you">免运费</div></div>        </div><div class="gaodu45"></div></div><!--底部菜单--><div class="dibu" id="dl_yes"><a class="dibu_shouye" href="index.html"><img src="img/shouye.png" class="dibu_shouye_img" /><p class="dibu_shouye_biaoti">首页</p></a><a class="dibu_shoucang" v-on:click="shoucang()"><img src="img/shoucang.png" class="dibu_shoucang_img" /><p class="dibu_shoucang_biaoti" >收藏</p></a><a class="dibu_gouwuche" href="gouwuche.html"><img src="img/gouwuche.png" class="dibu_gouwuche_img" /><p class="dibu_gouwuche_biaoti">购物车</p></a>  <div class="dibu_jiaGWC" v-on:click="gouwuche()">加入购物车</div><div class="dibu_goumai" v-on:click="goumai()">立即购买</div></div><div class="dibu" id="dl_no"><a class="dibu_shouye" href="index.html"><img src="img/shouye.png" class="dibu_shouye_img" /><p class="dibu_shouye_biaoti">首页</p></a><a class="dibu_shoucang" onClick="denglu()"><img src="img/shoucang.png" class="dibu_shoucang_img" /><p class="dibu_shoucang_biaoti" >收藏</p></a><a class="dibu_gouwuche"  onClick="denglu()"><img src="img/gouwuche.png" class="dibu_gouwuche_img" /><p class="dibu_gouwuche_biaoti">购物车</p></a>   <div class="dibu_jiaGWC"  onClick="denglu()">加入购物车</div><div class="dibu_goumai"  onClick="denglu()">立即购买</div></div><script>function denglu(){if(confirm("请登录")){window.location.href = "u_login.html"}}if(localStorage.u_login=="yes"){document.getElementById("dl_yes").style.display="";document.getElementById("dl_no").style.display="none";}else{document.getElementById("dl_yes").style.display="none";document.getElementById("dl_no").style.display="";  }</script></div><!--app-->    <script>new Vue({el: '#app',data: {//轮播代码slideList: [{"clickUrl": "#","desc": "图片轮播说明1","image": "img/ban1.jpg"},{"clickUrl": "#","desc": "图片轮播说明2","image": "img/ban2.jpg"},{"clickUrl": "#","desc": "图片轮播说明3","image": "img/ban3.jpg"}],currentIndex: 0,timer: '',cp_tupian:"",  cp_tupian1:"",  cp_tupian2:"",cp_tupian3:"",cp_tupian4:"",cp_mingcheng:"",jiage:"",cp_jianjie:"",cp_kucun:"",xiangou_shuliang:"",cp_yixiaoshou:""          },//页面初始化要执行的mounted:function(){this.GetCPxinxi();},//自定义的函数（方法）methods:{//轮播代码go() {this.timer = setInterval(() => {this.autoPlay()}, 3000)},stop() {clearInterval(this.timer)this.timer = null},change(index) {this.currentIndex = index},autoPlay() {this.currentIndex++if (this.currentIndex > this.slideList.length - 1) {this.currentIndex = 0}},//获取产品简介信息GetCPxinxi:function(){axios.get('http://vue.yaoyiwangluo.com/wx_sp_info-a.asp',{params:{cp_id:cs1_zhi    //参数1}}                 ).then(function (response) {//response.data 返回值,下面插入你要执行的代码//console.log(response.data);this.cp_tupian = response.data.cp_tupian;this.cp_tupian1 = response.data.cp_tupian1;this.cp_tupian2 = response.data.cp_tupian2;this.cp_tupian3 = response.data.cp_tupian3;this.cp_tupian4 = response.data.cp_tupian4;this.cp_mingcheng = response.data.cp_mingcheng;this.jiage = response.data.jiage;this.cp_jianjie = response.data.cp_jianjie;this.cp_kucun = response.data.cp_kucun;this.xiangou_shuliang = response.data.xiangou_shuliang;this.cp_yixiaoshou = response.data.cp_yixiaoshou;//修改轮播图片this.$set(this.slideList[0],"image",response.data.cp_tupian);this.$set(this.slideList[1],"image",response.data.cp_tupian1);}.bind(this)).catch(function (error) {console.log(error);});                 },//收藏shoucang:function(){axios.get('http://vue.yaoyiwangluo.com/wx_shoucang_add.asp',{params:{cs_uid:localStorage.u_id,    //参数1cs_cpid:cs1_zhi              //参数2}}               ).then(function (response) {//response.data 返回值,下面插入你要执行的代码console.log(response);console.log(response.data);if(response.data.zt=="yes"){alert("收藏成功");}if(response.data.zt=="no"){alert(response.data.xinxi);}                   }.bind(this)).catch(function (error) {console.log(error);});           },//加购物车gouwuche:function(){axios.get('http://vue.yaoyiwangluo.com/wx_gwc_add.asp',{params:{cs_uid:localStorage.u_id,    cs_cpid:cs1_zhi,cs_cp_mingcheng:cs2_zhi,cs_jiage:this.jiage}}              ).then(function (response) {//response.data 返回值,下面插入你要执行的代码if(response.data.zt=="yes"){alert("加入购物车成功");}if(response.data.zt=="no"){alert(response.data.xinxi);}                 }.bind(this)).catch(function (error) {console.log(error);});       },//立即购买goumai:function(){axios.get('http://vue.yaoyiwangluo.com/wx_gwc_add.asp',{params:{cs_uid:localStorage.u_id,    cs_cpid:cs1_zhi,cs_cp_mingcheng:cs2_zhi,cs_jiage:this.jiage}}                ).then(function (response) {//response.data 返回值,下面插入你要执行的代码if(response.data.zt=="yes"){alert("加入购物车成功");window.location.href="gouwuche.html";}if(response.data.zt=="no"){alert(response.data.xinxi);window.location.href="gouwuche.html";}                 }.bind(this)).catch(function (error) {console.log(error);});     },},   //轮播代码created() {this.$nextTick(() => {this.timer = setInterval(() => {this.autoPlay()}, 3000)})}          })
</script></body>
</html>

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情相关推荐

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（1）首页
效果图代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
基于SSM的创意商城动态网站【毕设-附源码】
基于SSM的创意商城动态网站目录 1 引言 1 1.1 课题背景 1 1.2 目的和意义 1 1.3系统开发技术的特色 1 1.4 论文结构安排 2 2 创意商城的需求分析 3 2.1 系统可行性 ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
基于Node.js自我展示博客网站-计算机毕设附源码231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
基于SSM在线服装商城购物网站设计
开发技术: SSM 开发软件:Eclipse或Idea + Mysql 近几年由于兴起了一站式男装线上出售潮流,面向该经济市场的需求开发一套专属男性的服装购物系统指日可待.在这个系统中,用户可以挑选到 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
vue.js毕业设计，基于vue.js前后端分离图书购物商城小程序系统设计与实现
功能介绍 [后台管理员功能] 会员列表:查看所有注册会员信息,支持删除录入资讯:录入资讯标题.内容等信息管理资讯:查看已录入资讯列表,支持删除和修改广告设置:上传图片和设置小程序首页轮播图广告地 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
（附源码）Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情

效果图

代码

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情相关推荐

最新文章

热门文章

基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（5）商品详情

效果图

代码

基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（5）商品详情相关推荐

最新文章

热门文章

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情

基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（5）商品详情相关推荐