<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<title>商品详情</title>
|
<!--轮播图插件-->
|
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.2.6/css/swiper.min.css"/>
|
<script src="https://cdn.bootcss.com/Swiper/4.2.6/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
<!--其它-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css"/>
|
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body>
|
|
<div id="allwai" class="allwai fboxCol">
|
|
<!--顶部-->
|
<div class="topwai fboxRow Ycenter">
|
<!--图标-->
|
<a class="topimg" href="splist.html"><img src="img/index_logo.png"/></a>
|
<!--输入外框-->
|
<div class="flex1 topruwai fboxRow Ycenter canclick">
|
<!--放大镜图片-->
|
<img class="topjing" src="img/index_search.png"/>
|
<!--输入组件-->
|
<div class="topinput font_gray flex1">搜淘宝/天猫宝贝领优惠券</div>
|
</div>
|
</div>
|
|
<!--内容部-->
|
<div class="flex1 fboxRow" style="overflow: scroll;">
|
<div style="width: 100%; height: auto;">
|
|
<!--商品图片区域-->
|
<div id="spimgwai" class="sptuwai">
|
|
<!--轮播图插件-->
|
<div class="swiper-container">
|
<!--轮播图外-->
|
<div class="swiper-wrapper">
|
<!--Vue循环添加节点-->
|
<!--<div v-for='item in img' class="swiper-slide">
|
<div class="lunboimg fboxRow Xcenter Ycenter"><img style="width: 100%;height: 100vw;" v-bind:src="item"/></div>
|
</div>-->
|
</div>
|
</div>
|
|
<!--右上角图片下标展示-->
|
<div class="sptunumwai fboxRow Xcenter Ycenter">
|
<div>{{index_img+1}}</div>
|
<div style="margin: 0 0.3rem;">/</div>
|
<div>{{img.length}}</div>
|
</div>
|
|
<!--商品标题区域-->
|
<div class="sptutitlewai fboxCol">
|
<!--商品标题文字-->
|
<div style="font-weight: bold;line-height: 1.4;">{{title}}</div>
|
<!--商品价格-->
|
<div class="fboxRow" style="margin-top: 0.8rem;">
|
<div v-if="hadquan==true" class="fboxRow Yend sptujiared" style="margin-right: 3rem;">
|
<div>券后价</div>
|
<div>￥</div>
|
<div class="font_max" style="font-weight: bold;">{{money.newjia}}</div>
|
</div>
|
<div class="fboxRow Yend font_gray">
|
<div>在售价</div>
|
<div>￥</div>
|
<div class="font_max">{{money.oldjia}}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<!--淘口令区域-->
|
<div class="taoklwai">
|
<!--口令显示框-->
|
<div class="taokl fboxCol" style="line-height: 1.6;">
|
<div>{{content}}</div>
|
<div>淘口令：{{kouling}}</div>
|
</div>
|
</div>
|
|
<!--复制按钮-->
|
<div class="touklbtnwai fboxRow Xcenter Ycenter">
|
<div class="touklbtn fboxRow Xcenter Ycenter canclick" v-bind:data-clipboard-text="kouling">
|
<div>一键复制淘口令</div>
|
</div>
|
</div>
|
|
</div>
|
</div><!--内容部结束-->
|
|
</div>
|
|
</body>
|
|
<script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
|
<script type="text/javascript">
|
|
$(".allwai").addClass("displayNone");
|
|
//================================== 页面数据 ==========================================
|
var https = "http://flq.yeshitv.com"; //http://flq.yeshitv.com http://192.168.1.200:8088
|
//商品信息
|
var spdata = new Vue({
|
el: '#allwai',
|
data: {
|
uid: null, //用户id
|
id: null, //商品id
|
title: '', //商品标题
|
img: [], //商品图片
|
index_img: 0, //当前图片展示下标
|
money: { oldjia: "", newjia: "" }, //商品价格相关
|
hadquan: null, //是否有券
|
content: '', //口令说明
|
kouling: '', //淘口令
|
},
|
});
|
|
|
//获取传入值id
|
spdata.id = urlParamGet().id;
|
spdata.uid = urlParamGet().uid; //O5DPR/E2afC01+SZmnwYiw== urlParamGet().uid
|
function urlParamGet ()
|
{
|
var url = window.location.search; //获取url中"?"符后的字串
|
var theRequest = new Object();
|
if (url.indexOf("?") != -1)
|
{
|
var str = url.substr(1);
|
strs = str.split("&");
|
for(var i = 0; i < strs.length; i ++)
|
{
|
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
|
}
|
}
|
return theRequest;
|
}
|
//是否获取到用户id
|
if (spdata.uid != null) { doui.cookieSet("uid",spdata.uid,2); }
|
else { spdata.uid = doui.cookieGet("uid"); }
|
//是否获取到商品id
|
if (spdata.id == null) { doui.showToast("未找到商品编码"); }
|
else { Get_spinfo(); }
|
|
|
|
//================================== 组件事件 ==========================================
|
//复制按钮 点击
|
var clipboard = new ClipboardJS('.touklbtn');
|
clipboard.on('success', function(e) { doui.showToast("已复制到剪贴板"); });
|
clipboard.on('error', function(e) { doui.showModal("当前设备不支持，请长按上方口令复制"); });
|
|
|
//搜索框点击
|
$(".topruwai").click(function(){ window.location.href = "search.html"; });
|
|
|
|
//================================== 数据请求 ==========================================
|
//获取商品信息
|
function Get_spinfo ()
|
{
|
doui.showLoading("获取商品");
|
//数据准备
|
var myurl = https + '/fanli/api/h5/v1/webRecommend/getGoodsDetail';
|
var mydata = doui.AjaxData({ id: spdata.id, uid: spdata.uid });
|
//数据请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else
|
{
|
//数据保存
|
spdata.title = res.data.title; //商品标题
|
spdata.img = res.data.imgs; //轮播图保存
|
spdata.money.newjia = res.data.quanPrice; //券后价
|
spdata.money.oldjia = res.data.zkPrice; //原价
|
spdata.hadquan = res.data.quan; //是否有券
|
spdata.content = res.data.shareContent; //口令说明
|
spdata.kouling = res.data.token; //淘口令
|
//向轮播图插件添加html
|
$(".swiper-wrapper").empty();
|
for (var i = 0; i < spdata.img.length; i++)
|
{
|
jiedian = '<div class="swiper-slide">';
|
jiedian += '<div class="lunboimg fboxRow Xcenter Ycenter"><img style="width: 100%;height: 100vw;" src="'+spdata.img[i]+'"/></div>';
|
jiedian += '</div>';
|
$(".swiper-wrapper").append(jiedian);
|
}
|
//进行轮播图插件实例化
|
var mySwiper = new Swiper('.swiper-container',
|
{
|
autoplay: true, //可选选项，自动滑动
|
on: {
|
//切换开始时，告诉我现在是第几个slide
|
slideChangeTransitionStart: function() { spdata.index_img = this.activeIndex; },
|
},
|
});
|
}
|
});
|
}
|
|
|
$(".allwai").removeClass("displayNone");
|
|
</script>
|
|
</html>
|
