<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="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="css/doui.min.css"/>
|
<script src="js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/publicFunction.js" type="text/javascript" charset="utf-8"></script>
|
<style type="text/css">
|
/*热门卡片*/
|
.sea_hot{ min-width: 0.5rem; height: 0.5rem; line-height: 0.5rem; padding: 0 0.25rem; margin-right: 0.2rem; margin-bottom: 0.2rem; border-radius: 0.25rem; text-align: center; background-color: white; }
|
/*筛选横栏*/
|
.sea_sai{ width: 100%; height: 0.8rem; background-color: #F9F9F9; border-bottom: 1px solid #E9E8E6; }
|
/*单个选项*/
|
.sea_check{ height: 100%; border-left: 1px solid #E9E8E6; }
|
.sea_check:nth-of-type(1){ border-left: none; }
|
.sea_checkimg{ width: 0.2rem; height: 0.36rem; margin-left: 0.1rem; }
|
/*价格确定按钮*/
|
.sea_okBtn{ width: 1.3rem; height: 0.55rem; line-height: 0.55rem; margin-left: 0.3rem; border-radius: 0.1rem; text-align: center; color: white; }
|
</style>
|
</head>
|
|
<body style="display:none;">
|
<div id="allwai" class="heightenBox fontMobile">
|
|
<!--顶部-->
|
<div class="header">
|
<div class="fboxRow Xstart Ycenter" v-bind:class="appType=='flq'?'topF':'topH'">
|
<!--首页图标-->
|
<img v-if="appType=='flq'" class="topF_home" src="img/flq/app_home.png" v-on:click="doui.pageToUrl('index.html')"/>
|
<i v-else class="fa fa-home topH_home" v-on:click="doui.pageToUrl('index.html')"></i>
|
<!--输入外框-->
|
<div class="flex1 fboxRow Xstart Ycenter" v-bind:class="appType=='flq'?'topF_search':'topH_search'">
|
<!--放大镜图片-->
|
<img class="top_glass" v-bind:src="appType=='hcj'?'img/hcj/index_search.png':'img/flq/index_search.png'"/>
|
<!--输入组件-->
|
<div class="top_input flex1"><input class="font24" type="search" placeholder="搜索淘宝/天猫宝贝领优惠券" v-model="strKey" v-on:keyup.enter="searchClick()"/></div>
|
</div>
|
<!--帮助图标-->
|
<img v-if="appType=='flq'" class="topF_help" src="img/flq/app_help.png" v-on:click="doui.pageToUrl('http://apph5.banliapp.com/apppage/all_help_content.html?id=152')"/>
|
<!--<img v-else class="topF_help" src="img/flq/app_help.png" v-on:click="doui.pageToUrl('http://help.haicaojie.com/content.html?id=91')"/>-->
|
</div>
|
</div>
|
|
|
<!--热门搜索-->
|
<div v-show="hot.show" style="width:7.5rem;">
|
<!--栏目标题-->
|
<div style="width:7.5rem; padding:0.3rem;"><div class="font30">热门搜索：</div></div>
|
<!--热门字段卡片列表-->
|
<div class="fboxWrap Xstart Ystart" style="width:6.9rem; margin-left:0.3rem;">
|
<!--Vue循环添加-->
|
<div v-for="item in hot.list" class="sea_hot do-click font25 font-black" v-on:click="Click_remen(item.name)">{{item.name}}</div>
|
</div>
|
</div>
|
|
|
<!--商品列表-->
|
<div v-show="sp.show" style="width:7.5rem;">
|
|
<!--排序设置处-->
|
<div style="width:7.5rem;">
|
<!--1. 返利券 筛选选项-->
|
<div v-if="appType=='flq'" class="sea_sai fboxRow Xstart Ystart">
|
<!--销量-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='sp.paixu==0?"bg-white ziF_red":""' v-on:click="Click_paixu('xiao')">
|
<div class="font28">销量</div>
|
</div>
|
<!--人气-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='sp.paixu==1?"bg-white ziF_red":""' v-on:click="Click_paixu('renqi')">
|
<div class="font28">人气</div>
|
</div>
|
<!--价格-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='(sp.paixu==2||sp.paixu==3)?"bg-white ziF_red":""' v-on:click="Click_paixu('jiage')">
|
<div class="font28">价格</div>
|
<img v-if="sp.paixu==2" class="sea_checkimg" src="img/flq/search_xu1.png" />
|
<img v-else-if="sp.paixu==3" class="sea_checkimg" src="img/flq/search_xu2.png" />
|
<img v-else class="sea_checkimg" src="img/flq/search_xu0.png" />
|
</div>
|
</div>
|
<!--2. 海草街 筛选选项-->
|
<div v-if="appType=='hcj'" class="sea_sai fboxRow Xstart Ystart">
|
<!--销量-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='sp.paixu==0?"bg-white ziH_red":""' v-on:click="Click_paixu('xiao')">
|
<div class="font28">销量</div>
|
</div>
|
<!--人气-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='sp.paixu==1?"bg-white ziH_red":""' v-on:click="Click_paixu('renqi')">
|
<div class="font28">人气</div>
|
</div>
|
<!--价格-->
|
<div class="flex1 sea_check do-click fboxRow Xcenter Ycenter" v-bind:class='(sp.paixu==2||sp.paixu==3)?"bg-white ziH_red":""' v-on:click="Click_paixu('jiage')">
|
<div class="font28">价格</div>
|
<img v-if="sp.paixu==2" class="sea_checkimg" src="img/hcj/search_xu1.png" />
|
<img v-else-if="sp.paixu==3" class="sea_checkimg" src="img/hcj/search_xu2.png" />
|
<img v-else class="sea_checkimg" src="img/hcj/search_xu0.png" />
|
</div>
|
</div>
|
<!--价格输入-->
|
<div class="sea_sai fboxRow Xstart Ycenter">
|
<div class="font-black" style="margin-left:0.2rem;">价格：</div>
|
<!--最低输入-->
|
<div class="num_input"><input id="inputNumMin" class="flex1 font24" type="number" min="0" placeholder="最低" v-model="sp.moneymin"/></div>
|
<!--分割线-->
|
<div class="font-gray" style="margin:0 0.1rem;">~</div>
|
<!--最高输入-->
|
<div class="num_input"><input class="flex1 font24" type="number" min="0" placeholder="最高" v-model="sp.moneymax"/></div>
|
<!--确定按钮-->
|
<div class="sea_okBtn do-click" v-bind:class="appType=='hcj'?'beiH_red':'beiF_red'" v-on:click="searchClick()">确定</div>
|
</div>
|
</div>
|
|
<!--1. 返利券 放商品框的外框-->
|
<div v-if="appType=='flq'" class="fboxWrap Xstart Ystart" style="width:7.5rem; padding-top:0.1rem;">
|
|
<!--Vue循环添加商品单框-->
|
<div v-for="(item, index) in sp.list" class="sp2" v-on:click="pageToGoods(item.auctionId, vm)">
|
|
<!--图片区域-->
|
<div class="sp2_img">
|
<img class="sp2_imgsrc" src="img/flq/sp_imgDef.png"/>
|
<img class="sp2_imgsrc" v-bind:src="item.pictUrl" />
|
</div>
|
|
<!--文字内容区域-->
|
<div class="sp2_content">
|
|
<!--商品标题区域-->
|
<div class="sp2_title fboxRow Xstart Ycenter">
|
<!--标题文字-->
|
<div class="sp2_titleFont font-ell2">{{item.title}}</div>
|
<!--来源-->
|
<div class="sp_type">
|
<img v-if='item.shopType==1' src="img/flq/sp_type1.png" />
|
<img v-else-if='item.shopType==2' src="img/flq/sp_type2.png" />
|
</div>
|
</div>
|
|
<!--商品返利和销量-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.2rem;">
|
<!--原价-->
|
<div v-if="item.shopType==1" class="sp2_yuanFont">淘宝价￥{{item.zkPrice}}</div>
|
<div v-else-if="item.shopType==2" class="sp2_yuanFont">天猫价￥{{item.zkPrice}}</div>
|
<div v-else class="sp2_yuanFont">原价￥{{item.zkPrice}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--销量-->
|
<div class="sp2_xiaoFont">月销 {{item.biz30day}}</div>
|
</div>
|
|
<!--价格栏-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.2rem;">
|
<!--现价数目-->
|
<div class="ziF_red fboxRow Xstart Ybaseline">
|
<div class="font21">￥</div>
|
<div v-if="item.taoBaoQuanInfo" class="font36 font-weight">{{item.quanPrice}}</div>
|
<div v-else class="font36 font-weight">{{item.zkPrice}}</div>
|
</div>
|
<!--空白-->
|
<div class="flex1"></div>
|
<!--优惠券-->
|
<div v-if="item.taoBaoQuanInfo" class="sp2_quan spF_quanBg">{{item.taoBaoQuanInfo.couponAmount}}元券</div>
|
</div>
|
|
</div>
|
|
</div><!--Vue循环结束-->
|
|
</div>
|
|
<!--2. 海草街 放商品框的外框-->
|
<div v-if="appType=='hcj'" class="fboxWrap Xstart Ystart" style="width:7.5rem; padding-top:0.1rem;">
|
|
<!--Vue循环添加商品单框-->
|
<div v-for="(item, index) in sp.list" class="sp2" v-on:click="pageToGoods(item.auctionId, vm)">
|
|
<!--商品图片-->
|
<div class="sp2_img">
|
<img class="sp2_imgsrc" v-bind:src="item.pictUrl" />
|
</div>
|
|
<!--文字内容区域-->
|
<div class="sp2_content">
|
|
<!--商品标题区域-->
|
<div class="sp2_title fboxRow Xstart Ycenter">
|
<!--标题文字-->
|
<div class="sp2_titleFont font-ell2">{{item.title}}</div>
|
<!--来源-->
|
<div class="sp_type">
|
<img v-if='item.shopType==1' src="img/hcj/sp_type1.png" />
|
<img v-else-if='item.shopType==2' src="img/hcj/sp_type2.png" />
|
</div>
|
</div>
|
|
<!--商品返利和销量-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.2rem;">
|
<!--原价-->
|
<div v-if="item.shopType==1" class="sp2_yuanFont">淘宝价￥{{item.zkPrice}}</div>
|
<div v-else-if="item.shopType==2" class="sp2_yuanFont">天猫价￥{{item.zkPrice}}</div>
|
<div v-else class="sp2_yuanFont">原价￥{{item.zkPrice}}</div>
|
<!--空白区域-->
|
<div class="flex1"></div>
|
<!--销量-->
|
<div class="sp2_xiaoFont">月销 {{item.biz30day}}</div>
|
</div>
|
|
<!--价格栏-->
|
<div class="fboxRow Xstart Ycenter" style="margin-top:0.2rem;">
|
<!--现价数目-->
|
<div class="ziH_red fboxRow Xstart Ybaseline">
|
<div class="font21">￥</div>
|
<div v-if="item.taoBaoQuanInfo" class="font36 font-weight">{{item.quanPrice}}</div>
|
<div v-else class="font36 font-weight">{{item.zkPrice}}</div>
|
</div>
|
<!--空白-->
|
<div class="flex1"></div>
|
<!--优惠券-->
|
<div v-if="item.taoBaoQuanInfo" class="sp2_quan spH_quanBg">{{item.taoBaoQuanInfo.couponAmount}}元券</div>
|
</div>
|
|
</div>
|
|
</div><!--Vue循环结束-->
|
|
</div>
|
|
</div>
|
|
|
<!--loading-->
|
<div class="do-scrollLoading"></div>
|
|
<!--回到顶部火箭-->
|
<div class="backTop displayNone" v-on:click="doui.scrollTo('body', 0);"><img v-bind:src="appType=='hcj'?'img/hcj/backTop.png':'img/flq/backTop.png'"/></div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
// ================================================================================== 页面数据
|
var vm = null;
|
|
doui.importComplete(getImport(), function()
|
{
|
// vue实例化
|
vm = new Vue({
|
el: '#allwai',
|
data: {
|
// ------------------------------------------------------- 系统信息
|
appType: null, // app：flq-返利券 hcj-海草街
|
strKey: "", // 搜索输入字符串
|
topPx: 0, // 页面距离顶部距离
|
|
// ============================================================== 热门搜索区域
|
hot: {
|
show: true, // 是否显示
|
list: []
|
},
|
|
// ============================================================== 商品内容区域
|
sp: {
|
show: false, // 是否显示
|
paixu: 0, // 排序选择下标
|
moneymin: '', // 最低价格
|
moneymax: '', // 最高价格
|
|
yema: 1, // 当前页码
|
yemamax: 1, // 页码最大值
|
pagesize: 20, // 每页数据量
|
list: [],
|
},
|
},
|
// 数据改变监听
|
watch:
|
{
|
// 输入框中内容改变
|
strKey: function (res)
|
{
|
// 初始化搜索设置
|
if (res.length <= 0)
|
{
|
// 初始化
|
vm.creatTable();
|
vm.creatOpt();
|
// 列表隐藏
|
vm.sp.show = false;
|
// 热门显示
|
vm.hot.show = true;
|
}
|
},
|
// 输入最小值监听
|
'sp.moneymin': function (val, oldVal)
|
{
|
// 有输入值才判定
|
if (val)
|
{
|
// 对输入值进行判断
|
var reg = /^(\d)+$/;
|
if (!reg.test(val)) { console.log("错误格式，回到之前"); vm.sp.moneymin = oldVal; }
|
}
|
},
|
// 输入最大值监听
|
'sp.moneymax': function (val, oldVal)
|
{
|
// 有输入值才判定
|
if (val)
|
{
|
// 对输入值进行判断
|
var reg = /^(\d)+$/;
|
if (!reg.test(val)) { console.log("错误格式，回到之前"); vm.sp.moneymax = oldVal; }
|
}
|
},
|
},
|
// 初始化事件
|
methods:
|
{
|
// 商品列表初始化
|
creatTable: function () { doui.scrollTo('body', 0, false); vm.sp.yema = 1; vm.sp.yemamax = 1; vm.sp.pagesize = 20; vm.sp.list = []; },
|
// 设置项初始化
|
creatOpt: function () { vm.sp.paixu = 0; vm.sp.moneymin = ''; vm.sp.moneymax = ''; },
|
},
|
});
|
|
|
// 获取地址栏信息
|
var urldata = doui.urlParamGet();
|
// 获取app类型
|
if (urldata.appType) { vm.appType = urldata.appType; }
|
else { vm.appType = appTypeGet(); }
|
|
// 获取搜索值
|
if (urldata.key)
|
{
|
vm.strKey = urldata.key;
|
// 隐藏热门
|
vm.hot.show = false;
|
vm.sp.show = true;
|
// 加载商品
|
doui.showScrollLoading('加载商品^_^', function(){ Get_searsp(); });
|
}
|
|
|
// 获取搜索设置
|
var searchData = doui.sessionStorageGet('search');
|
if (searchData)
|
{
|
vm.strKey = searchData.strKey;
|
vm.hot = searchData.hot;
|
vm.sp = searchData.sp;
|
setTimeout(function()
|
{
|
doui.scrollTo('body', searchData.topPx, false);
|
doui.sessionStorageDel('search');
|
}, 200);
|
}
|
else
|
{
|
// 加载热门搜索
|
Get_hot();
|
}
|
|
|
// 滚动框触底
|
doui.scrolling("body", function(res)
|
{
|
vm.topPx = res.scrollTop;
|
//页面滚动300px后 //让火箭显示
|
if (res.scrollTop > 500) { $(".backTop").removeClass("displayNone"); }
|
//让火箭隐藏
|
else { $(".backTop").addClass("displayNone"); }
|
// 到底了
|
if (res.overBottom == true)
|
{
|
// loading
|
if (vm.sp.show == true)
|
{
|
doui.showScrollLoading('加载更多商品', function()
|
{
|
vm.sp.yema++;
|
Get_searsp();
|
});
|
}
|
}
|
});
|
|
|
$("body").css("display",'block');
|
});
|
|
|
|
// ================================================================================== 页面事件
|
// 热门搜索卡片 点击
|
function Click_remen (keyC)
|
{
|
// 将搜索写入
|
vm.strKey = keyC;
|
// 热门隐藏
|
vm.hot.show = false;
|
// 初始化
|
vm.creatOpt();
|
vm.creatTable();
|
// 商品显示
|
vm.sp.show = true;
|
// 搜索关键词
|
doui.showScrollLoading('加载商品^_^', function(){ Get_searsp(); }, true);
|
}
|
|
// 键盘右下角 搜索 点击
|
function searchClick ()
|
{
|
$(".top_input").blur();
|
// 热门隐藏
|
vm.hot.show = false;
|
// 初始化
|
vm.creatTable();
|
// 商品显示
|
vm.sp.show = true;
|
// loading
|
doui.showScrollLoading('加载商品^_^', function(){ Get_searsp(); }, true);
|
}
|
|
// 排序设置选项
|
function Click_paixu (typeC)
|
{
|
// 点击了销量
|
if (typeC == "xiao") { vm.sp.paixu = 0; }
|
// 点击了人气
|
else if (typeC == "renqi") { vm.sp.paixu = 1; }
|
// 点击了价格
|
else if (typeC == "jiage") { if (vm.sp.paixu == 2) { vm.sp.paixu = 3; } else { vm.sp.paixu = 2; } }
|
// 初始化
|
vm.creatTable();
|
// loading
|
doui.showScrollLoading('加载商品^_^', function(){ Get_searsp(); }, true);
|
}
|
|
|
|
// ================================================================================== 数据请求
|
// 获取热门搜索
|
function Get_hot ()
|
{
|
// 请求准备
|
var myurl = getHttp(vm.appType) + '/api/h5/v1/webSearch/getHotSearch';
|
var mydata = doui.AjaxData({});
|
// 发起请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else { vm.hot.list = res.data.hotSearchList; }
|
});
|
}
|
|
// 获取搜索商品列表
|
function Get_searsp ()
|
{
|
// 有输入通过
|
if (vm.strKey.length > 0)
|
{
|
// 验证输入
|
// 1. 输入合法性
|
// var min = 0;
|
// var max = 0;
|
// if (vm.sp.moneymin) { min = parseInt(vm.sp.moneymin); }
|
// if (vm.sp.moneymax) { max = parseInt(vm.sp.moneymax); }
|
// // 2. 最小值 < 最大值
|
// if (min > max) { $("input").blur(); doui.showToast("规范：最低金额 < 最高金额"); return false; }
|
|
// 请求准备
|
var myurl = getHttp(vm.appType) + '/api/h5/v1/webSearch/search';
|
var mydata = doui.AjaxData({
|
kw: vm.strKey, // 输入搜索内容
|
page: vm.sp.yema, // 页码
|
pagesize: vm.sp.pagesize, // 每页数量
|
order: vm.sp.paixu, // 排序方式
|
filter: 1,
|
startprice: vm.sp.moneymin,
|
endprice: vm.sp.moneymax,
|
});
|
// 发起请求
|
doui.AjaxJsonp(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.hideScrollLoading(); doui.showToast(res.msg); vm.creatTable(); vm.creatOpt(); }
|
else
|
{
|
var mo = res.data.result;
|
|
if (mo.length <= 0) { doui.showToast("未找到该商品"); vm.creatTable(); }
|
else
|
{
|
// 将大于10000的销量转化
|
for (var i = 0; i < mo.length; i++)
|
{
|
if (parseInt(mo[i].biz30day) > 10000)
|
{
|
var xlmo = parseInt(parseInt(mo[i].biz30day) / 1000) / 10;
|
mo[i].biz30day = xlmo + "万";
|
}
|
}
|
}
|
|
// 列表保存
|
if (vm.sp.yema <= 1) { vm.sp.list = mo; }
|
else { vm.sp.list = vm.sp.list.concat(mo); }
|
doui.hideScrollLoading();
|
}
|
});
|
}
|
}
|
</script>
|
