效果
{include file="common/top"}
<div id="background">
<div id="plan">
<div class="shenjiax">
<div class="shenjiaxtop clearfix">
个性方案：<a href="#">管理</a>
<span class="rt clearfix shenjiaxtopr">
<a href="{:url('discount/index')}" class="fl">神价排行榜</a>
<a href="javascript:void(0)" class="rt yx-jinpin-open">展开筛选条件</a>
</span>
</div>
<div class="shenjiaxx" style="display: none;">
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">筛选商城：</div>
<ul class="clearfix shenjiaxx-listul">
<li v-for="item in less_cate"><input v-model="cate_v" type="checkbox"
name="chksitename"
:value="item.cate_id"><label for="chk1">{{item.title}}</label></li>
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">价格：</div>
<div class="clearfix shenjiaxx-listul">
<input v-model="start_price_v" type="text" class="shenjiaxx-listinput" title="最低价">
<em>-</em>
<input v-model="end_price_v" class="shenjiaxx-listinput" title="最高价">
</div>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">更新时间：</div>
<ul class="clearfix shenjiaxx-listul">
<li v-for="item in create_time">
<input v-model="create_time_v" type="radio" name="uptime" id="t4"
:value="item.val"><label
for="t4">{{item.msg
}}</label>
</li>
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">折扣低于：</div>
<ul class="clearfix shenjiaxx-listul">
<li v-for="item in less">
<input v-model="less_v" type="radio" name="rdozk" id="zk1" :value="item.val"><label
for="zk1">{{item.val}}折
</label>
</li>
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">排序方式：</div>
<ul class="clearfix shenjiaxx-listul">
<li v-for="item in sort">
<input v-model="sort_v" id="s0" type="radio" :value="item.val"
name="identity"><label
for="s0">{{item.msg}}</label>
</li>
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<!--
<div class="shenjiaxx-listfl">辅助设置：</div>
<ul class="clearfix shenjiaxx-listul">
<input type="checkbox" id="saleType" checked="checked" value="1"><label style="margin-right: 20px;" for="saleType">排除第三方</label>
<input type="checkbox" id="ckxless"><label style="margin-right: 20px;" for="ckxless">低于历史最低价</label>
<input type="checkbox" id="ckxless2" checked="checked"><label style="margin-right: 20px;" for="ckxless2">低于或等于历史最低价</label>
</ul>
-->
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">搜索关键词：</div>
<ul class="clearfix shenjiaxx-listul">
<input v-model="key_v" type="text" class="shenjiax-listinpu">
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl">排除关键词：</div>
<ul class="clearfix shenjiaxx-listul">
<input v-model="no_key_v" type="text" class="shenjiax-listinpu">
</ul>
</div>
<div class="shenjiaxx-list clearfix">
<div class="shenjiaxx-listfl"> </div>
<ul class="clearfix shenjiaxx-listul driving-site-mo">
<a href="javascript:" v-on:click="search"
class="shenjia-listbtn driving-record-mr2">搜索
</a>
<a @click="resetData" href="javascript:"
class="shenjia-listbtn driving-record-mr2">重置</a>
<!--
<a href="javascript:" class="shenjia-listbtn">保存以上查询条件</a>
-->
</ul>
</div>
</div>
</div>
<table class="table-member driving-record-mt" style="width: 1200px;">
<tr>
<th style="text-align:left;">商品信息</th>
<th>当前价</th>
<th>折扣</th>
<th>原价</th>
<th>历史最低价</th>
<th>操作</th>
</tr>
<tr v-for="item in pageContent">
<td>
<a :href="'/jump?u=' + item.item_url " target="_blank">
<div class="lf zindeximg">
<img :src="item.pic" alt="" style="max-width: 60px;max-height: 60px;">
</div>
<div class="z-cxright-glccsp">
<p><a :href="'/jump?u=' + item.item_url " target="_blank">{{item.title}}</a></p>
<p class="hr-huis"><span class="driving-record-mr10">{{item.cate.title}}
</span></p>
</div>
</a>
</td>
<td><b class="hr-cheng">￥{{item.cur_price}}</b></td>
<td><span class="z-indexzk z-indexzklan">{{item.discount/10}}折</span></td>
<td><span class="hr-huis">{{item.before_price}}</span></td>
<td><span>{{item.min_price}}</span></td>
<td><a :href="'/jump?u=' + item.item_url "><span class="z-indexzk z-indexzkhon">去抢购</span></a></td>
</tr>
</table>
<!-- vue 分页 -->
<ul class="pagination">
<li @click="home"><span>首页</span></li>
<li @click="prev"><span>上一页</span></li>
<li v-for="item of pages" class="item" :class="{active: current === item}" @click="active(item)">
<a>{{item}}</a>
</li>
<li @click="next"><span>下一页</span></li>
<li @click="trailer"><span>尾页</span></li>
<li><span> {{count}} 页</span></li>
<li><span>跳转 <input style="width: 50px;height: 15px" type="text" v-model="much"> 页
</span></li>
<li @click="goPage"><span>确定</span></li>
</ul>
<!-- end vue -->
</div><!-- 更多神价end -->
</div>
{include file="common/footer"}
<script>
$(function(){
$(".yx-jinpin-open").click(function () {
$(".shenjiaxx").toggle(100);
if ($(this).text() == "展开筛选条件") {
$(this).html("收起筛选条件");
}
else {
$(this).html("展开筛选条件");
}
});
});
</script>
<script type="text/javascript">
$(function(){
//回到顶部
showScroll();
function showScroll(){
$(window).scroll( function() {
var scrollValue=$(window).scrollTop();
scrollValue > 450 ? $('div[class="zscroll"]').fadeIn():$('div[class="zscroll"]').fadeOut();
} );
$('#scroll').click(function(){
$("html,body").animate({scrollTop:0},200);
});
}
})
</script>
<!-- 引入vue js -->
<script src="__static__/home/common/js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#plan',
data: function() {
return {
/** 分页条件 **/
count: 0, //总页数
current: 1,
much: '',
content: [],
pageContent: [],
flag: true,
force:false,//强制更新
size:10, //分页大小
condi_str:"", //条件,
/** 下面为用户搜索条件 **/
sort:[{"msg":"最近更新优先","val":"1"},{"msg":"折扣从小到大","val":"2"},{"msg":"折扣从大到小","val":"3"},{"msg":"价格从小到大","val":"4"},{"msg":"价格从大到小","val":"5"}],//排序
less:[{"val":"1"},{"val":"2"},{"val":"3"},{"val":"4"},{"val":"5"},{"val":"6"},{"val":"7"},{"val":"8"}],//折扣
create_time:[{"msg":"30分钟内","val":"30"},{"msg":"1小时内","val":"60"},{"msg":"3小时内","val":"180"},{"msg":"6小时内","val":"360"},{"msg":"12小时内","val":"720"}],//更新时间
less_cate:[], //商城类目
/** 搜索条件 双向绑定**/
key_v:"",//搜索关键字
no_key_v:"", //不包含关键字
start_price_v:"",
end_price_v:"",
sort_v:"",
less_v:"",
create_time_v:"",
cate_v:[]
}
},
created () {
this._getCate();
this._getData();
},
methods: {
active (item) {
this.current = item;
},
prev (){
this.current > 1 && this.current--
},
next () {
this.current < this.count && this.current++
},
home () {
this.current = 1
},
trailer () {
this.current = this.count
},
goPage () {
let num = parseInt(this.much);
if (num >= 1 && num <= this.count) {
this.current = num;
} else if (num > this.count) {
this.current = this.count;
} else {
this.current = 1;
}
},
_getData () {
// 这里其实用forEach来遍历并不是太好，后续我会再进行改进
this.content.forEach(item => { //当前页等于数据中key 直接调用key中值(不再调用接口中值 缓存)
if (item.key === this.current) {
this.pageContent = item.data;
this.flag = false;
}
})
if (!this.flag) {
this.flag = true;
return
}
var _this = this;
axios.post('{:url("portal/less/getPage")}', {
'page': this.current,
'size': this.size,
'condi':this.condi_str
}).then(function (res) {
// 保存为 [{key:'',data:''} {key:'', data:''}] 的形式 用以切换直接调用
var data = res.data.data;
_this.count = res.data.data.page_total;
_this.content.push({
key: _this.current,
data:data.data
});
})
.catch(function (error) {
console.log(error);
});
},
_getCate()//获取栏目
{
var _this = this;
axios.get('{:url("portal/less/getLessCate")}').then((function (res) {
if(res.data.code=="00")
{
var data = res.data.data;
_this.less_cate = data;
console.log(_this.less_cate);
}
}))
},
search()//搜索
{
this.condi_str =
{"key":this.key_v,"no_key":this.no_key_v,"start_price":this.start_price_v,"end_price":this.end_price_v,"sort":this.sort_v,"less":this.less_v,"cate":this.cate_v,"create_time":this.create_time_v};
this.current = 1;//重置分页条件
this.content = [];//重置分页内容
this._getData ();
},
resetData()//重置
{
Object.assign(this.$data, this.$options.data());
this._getCate();
this._getData ();
}
},
computed: {
pages () {
let left = 1
let right = this.count
let arr = []
if (this.count >= 5) {
if (this.current > 3 && this.current <= this.count - 2){
left = this.current - 2
right = this.current + 2
} else {
if (this.current <= 3){
left = 1
right = 5
} else {
right = this.count
left = this.count - 4
}
}
}
while (left <= right) {
arr.push(left)
left++
}
return arr
},
},
watch: {
current () {
this._getData();
},
content () {
this.content.forEach(item => {
if (item.key === this.current) {
this.pageContent = item.data;
console.log(item.key);
}
})
}
}
})
</script>
</body>
</html>后端
<?php
/**
* Created by july_c
* Date: 2018/7/9
* Time: 22:23
* Desc: 神价
*/
namespace app\portal\controller;
use think\Request;
class Less extends Base
{
/**
* 神价列表
*/
public function index()
{
$list = model("PriceLess")->getPageList();
$this->assign("list", $list);
return $this->fetch();
}
/**
* 获取神价类目
*/
public function getLessCate()
{
$result = model("Category")->getLessCate();
return json(["code"=>"00","data"=>$result]);
}
/**
* ajax 获取分页
*/
public function getPage()
{
if (!Request::instance()->isPost()) {
$this->error("非法请求");
}
$params = Request::instance()->post();
if (!$params['page'] || !$params['size']) {
return json(["msg" => "参数不完整"]);
}
$condi = $this->pageFormCondi($params['condi']);//组成条件
$result = model("PriceLess")->getPaging($condi['where'], $condi['order'], $params['page'], $params['size'],"cate");
if (!empty($result)) {
$res_arr = [
"code" => "00",
"data" => $result
];
} else {
$res_arr = [
"code" => "-1",
"msg" => "没有数据"
];
}
return json($res_arr);
}
/**
* 组成分页条件
*/
private function pageFormCondi($condi)
{
$where = [];
if(!empty($condi['cate']))
{
$where['plat_id'] = ["in",$condi['cate']];
}
if(!empty($condi['key'])) //关键词
{
$where['title'] = ["like","%".$condi['key']."%"];
}
if(!empty($condi['no_key'])) //不包括关键词
{
$where['title'] = ["not like","%".$condi['no_key']."%"];
}
if(!empty($condi['key'])&&!empty($condi['no_key']))
{
$where['title'] = [["like","%".$condi['key']."%"],["not like","%".$condi['no_key']."%"]];
}
if(!empty($condi['less'])) //折扣
{
$where['discount'] = ["<=",($condi['less']*10)];
}
if(!empty($condi['create_time'])) //创建时间 30/60/180/360/720
{
$where['create_time'] = [">=",time()-($condi['create_time']*60)];
}
if(!empty($condi['start_price']))
{
$where['cur_price'] = [">=",$condi['start_price']];
}
if(!empty($condi['end_price']))
{
$where['cur_price'] = ["<=",$condi['end_price']];
}
if(!empty($condi['start_price'])&&!empty($condi['end_price']))
{
$where['cur_price'] = ["between",[$condi['start_price'],$condi['end_price']]];
}
//排序
$order = "";
if(!empty($condi['sort']))
{
switch ($condi['sort'])
{
case "1": //最先更新
$order = "create_time desc";
break;
case "2": //折扣从小到大
$order = "discount asc";
break;
case "3": //折扣从大到小
$order = "discount desc";
break;
case "4": //价格从小到大
$order = "cur_price asc";
break;
case "5": //价格从大到小
$order = "cur_price desc";
break;
default:
$order = "id desc";
break;
}
}
else
{
$order = "id desc";
}
return ["where"=>$where,"order"=>$order];
}
}
4548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
