|
|
@@ -1,52 +1,14 @@
|
|
|
var productList = new Vue({
|
|
|
el:'#productList',
|
|
|
data:{
|
|
|
+ userId:0,
|
|
|
searchFlag: false,
|
|
|
listLoading: true,
|
|
|
requestFlag: true,
|
|
|
noMore: false,
|
|
|
- classify:[
|
|
|
- {
|
|
|
- name:'面部抗衰',
|
|
|
- smallTypeID:'1001',
|
|
|
- tinytypeList:[
|
|
|
- { name: "高端护理",smallTypeID:'101'},
|
|
|
- { name: "高端护理",smallTypeID:'102'},
|
|
|
- { name: "高端护理",smallTypeID:'103'},
|
|
|
- { name: "高端护理",smallTypeID:'104'},
|
|
|
- { name: "高端护理",smallTypeID:'105'},
|
|
|
- ]},
|
|
|
- {
|
|
|
- name:'瘦身塑形',
|
|
|
- smallTypeID:'1002',
|
|
|
- tinytypeList:[
|
|
|
- { name: "超声",smallTypeID:'2002'},
|
|
|
- { name: "射频",smallTypeID:'2003'},
|
|
|
- { name: "激光",smallTypeID:'2004'},
|
|
|
- { name: "高端护理",smallTypeID:'2005'},
|
|
|
- { name: "高端护理",smallTypeID:'2001'},
|
|
|
- ]},
|
|
|
- {
|
|
|
- name:'产后修复',
|
|
|
- smallTypeID:'1003',
|
|
|
- tinytypeList:[
|
|
|
- { name: "修复",smallTypeID:'3003'},
|
|
|
- { name: "修复",smallTypeID:'3002'},
|
|
|
- { name: "修复",smallTypeID:'3004'},
|
|
|
- { name: "修复",smallTypeID:'3005'},
|
|
|
- { name: "修复",smallTypeID:'3001'},
|
|
|
- ]},
|
|
|
- {
|
|
|
- name:'精油系列',
|
|
|
- smallTypeID:'1004',
|
|
|
- tinytypeList:[
|
|
|
- { name: "补水",smallTypeID:'4005'},
|
|
|
- { name: "保湿",smallTypeID:'4004'},
|
|
|
- { name: "保湿",smallTypeID:'4003'},
|
|
|
- { name: "保湿",smallTypeID:'4002'},
|
|
|
- { name: "补水",smallTypeID:'4001'},
|
|
|
- ]},
|
|
|
- ],
|
|
|
+ classify:[],
|
|
|
+ smalltypeList:[],//二级分类
|
|
|
+ tinytypeList:[],//三级分类
|
|
|
listData:[
|
|
|
{
|
|
|
actStatus: 1,
|
|
|
@@ -151,35 +113,36 @@ var productList = new Vue({
|
|
|
userIdentity: 3,
|
|
|
},
|
|
|
],
|
|
|
- termsName:'',
|
|
|
- twoclassName:'',
|
|
|
- smallTypeID:'',
|
|
|
- twosmallTypeID:'',
|
|
|
- tinytypeList:[],
|
|
|
+ bigName:'',
|
|
|
+ smallName:'',
|
|
|
+ tinyName:'',
|
|
|
+ bigTypeID:'',
|
|
|
+ smallTypeID:'',//二级分类id
|
|
|
+ tinyTypeID:'',//三级分类id
|
|
|
termsNameflag:false,
|
|
|
- twoclassflag:false,
|
|
|
+ tinyflag:false,
|
|
|
+ smallflag:false,
|
|
|
listRecord: 0,
|
|
|
pageInput: '1',
|
|
|
+ source:'www',
|
|
|
params: {
|
|
|
- size: 0,
|
|
|
- num: 0,
|
|
|
- keyword: "",
|
|
|
- sortField: "",
|
|
|
+ id:'',
|
|
|
+ identity:GLOBAL_USER_IDENTITY,
|
|
|
+ sortField:'',
|
|
|
sortType: 1, // 1降序，其他升序
|
|
|
- bid: "",
|
|
|
- sid: "",
|
|
|
- tid: ""
|
|
|
+ pageSize: 24,
|
|
|
+ pageNum: 1,
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
pageTotal: function () {
|
|
|
- var total = Math.ceil(this.listRecord / this.params.size);
|
|
|
+ var total = Math.ceil(this.listRecord / this.params.pageSize);
|
|
|
return total > 0 ? total : 1;
|
|
|
},
|
|
|
showPageBtn: function () {
|
|
|
- var total = Math.ceil(this.listRecord / this.params.size);
|
|
|
+ var total = Math.ceil(this.listRecord / this.params.pageSize);
|
|
|
total = total > 0 ? total : 1;
|
|
|
- var index = this.params.num, arr = [];
|
|
|
+ var index = this.params.pageNum, arr = [];
|
|
|
if (total <= 6) {
|
|
|
for (var i = 1; i <= total; i++) {
|
|
|
arr.push(i);
|
|
|
@@ -192,6 +155,84 @@ var productList = new Vue({
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ getclassify:function(){
|
|
|
+ var _self = this;
|
|
|
+ ProductApi.GetbigTypeclassify({source:_self.source,bigTypeID:_self.bigTypeID},function (res) {
|
|
|
+ if(res.code==0){
|
|
|
+ _self.smalltypeList = res.data;
|
|
|
+ }else {
|
|
|
+ CAIMEI.Alert(res.msg,'确定',false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getproductList:function(){//一级商品列表
|
|
|
+ var _self=this;
|
|
|
+ ProductApi.GetProductList(_self.params,function (res) {
|
|
|
+ if( res.code==0){
|
|
|
+ var result = JSON.parse(res.data);
|
|
|
+ _self.listRecord = result.total;
|
|
|
+ var resultData = setSearchProductList(result.items, _self.userId, function(){
|
|
|
+ _self.$forceUpdate();
|
|
|
+ setTimeout(function(){
|
|
|
+ // 图片懒加载
|
|
|
+ $("img[data-original]").lazyload();
|
|
|
+ },500);
|
|
|
+ });
|
|
|
+ if(isPC){
|
|
|
+ _self.listData = resultData;
|
|
|
+ }else{
|
|
|
+ _self.listData = _self.listData.concat(resultData);
|
|
|
+ }
|
|
|
+ console.log(_self.listData)
|
|
|
+ }else {
|
|
|
+ CAIMEI.Alert(res.msg,'确定',false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getsmallList:function(){//二级商品列表
|
|
|
+ var _self=this;
|
|
|
+ ProductApi.GetProductsmallList(_self.params,function (res) {
|
|
|
+ if( res.code==0){
|
|
|
+ var result = JSON.parse(res.data);
|
|
|
+ _self.listRecord = result.total;
|
|
|
+ _self.listRecord = result.total;
|
|
|
+ var resultData = setSearchProductList(result.items, _self.userId, function(){
|
|
|
+ _self.$forceUpdate();
|
|
|
+ setTimeout(function(){
|
|
|
+ // 图片懒加载
|
|
|
+ $("img[data-original]").lazyload();
|
|
|
+ },500);
|
|
|
+ });
|
|
|
+ if(isPC){
|
|
|
+ _self.listData = resultData;
|
|
|
+ }else{
|
|
|
+ _self.listData = _self.listData.concat(resultData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ gettinyList:function(){//三级商品列表
|
|
|
+ var _self=this;
|
|
|
+ ProductApi.GetProducttinyList(_self.params,function (res) {
|
|
|
+ if( res.code==0){
|
|
|
+ var result = JSON.parse(res.data);
|
|
|
+ _self.listRecord = result.total;
|
|
|
+ _self.listRecord = result.total;
|
|
|
+ var resultData = setSearchProductList(result.items, _self.userId, function(){
|
|
|
+ _self.$forceUpdate();
|
|
|
+ setTimeout(function(){
|
|
|
+ // 图片懒加载
|
|
|
+ $("img[data-original]").lazyload();
|
|
|
+ },500);
|
|
|
+ });
|
|
|
+ if(isPC){
|
|
|
+ _self.listData = resultData;
|
|
|
+ }else{
|
|
|
+ _self.listData = _self.listData.concat(resultData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
toPagination: function (pageNum) {
|
|
|
if (pageNum <= this.pageTotal) {
|
|
|
var params = {pageNum: pageNum};
|
|
|
@@ -199,32 +240,102 @@ var productList = new Vue({
|
|
|
}
|
|
|
},
|
|
|
toSortList: function (sortField, sortType) {
|
|
|
- var params = {
|
|
|
- sortfield: sortField,
|
|
|
- sorttype: sortType
|
|
|
- };
|
|
|
- window.location.href = updateUrlParam(params);
|
|
|
+ this.params.sortField=sortField;
|
|
|
+ this.params.sortType = sortType;
|
|
|
+ this.getproductList();
|
|
|
},
|
|
|
- remove:function(){
|
|
|
- this.twoclassflag = false;
|
|
|
+ removesmall:function(){//删除二级
|
|
|
+ this.smallName = '';
|
|
|
+ },
|
|
|
+ removetiny:function(){//删除三级分类
|
|
|
+ this.tinyName = ''
|
|
|
},
|
|
|
oneclass:function (item) {//选择一及分类
|
|
|
- this.termsName=item.name;
|
|
|
- this.smallTypeID = item.smallTypeID;
|
|
|
- this.tinytypeList = item.tinytypeList;
|
|
|
- this.termsNameflag = true
|
|
|
+ this.bigName=item.name;
|
|
|
+ this.smallName = '';
|
|
|
+ this.bigTypeID = item.bigTypeID;
|
|
|
+ this.params.id = item.bigTypeID;
|
|
|
+ this.termsNameflag = true;
|
|
|
+ this.getclassify();
|
|
|
+ this.getproductList();
|
|
|
},
|
|
|
twoclass:function (item) {//选择二级分类
|
|
|
- this.twoclassName = item.name;
|
|
|
- this.twosmallTypeID = item.smallTypeID;
|
|
|
- this.twoclassflag = true;
|
|
|
+ this.smallName = item.name;
|
|
|
+ this.tinyName = '';
|
|
|
+ this.smallTypeID = item.smallTypeID;
|
|
|
+ this.params.id = item.smallTypeID;
|
|
|
+ this.smallflag = true;
|
|
|
+ this.tinytypeList =item.tinytypeList;
|
|
|
+ this.getsmallList();
|
|
|
+ },
|
|
|
+ tinyclass:function (item) {//选择三级分类
|
|
|
+ this.tinyName = item.name;
|
|
|
+ this.params.tinyTypeID = item.tinyTypeID;
|
|
|
+ this.tinyflag = true;
|
|
|
+ this.gettinyList();
|
|
|
}
|
|
|
},
|
|
|
created:function () {
|
|
|
- setTimeout(function(){
|
|
|
- // 图片懒加载
|
|
|
- $("img[data-original]").lazyload();
|
|
|
- },500)
|
|
|
+ var userInfo = localStorage.getItem('userInfo');
|
|
|
+ if(userInfo){
|
|
|
+ this.userId = JSON.parse(userInfo).userId;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted:function () {
|
|
|
+ var _self = this;
|
|
|
+ this.bigTypeID = getUrlParam('bigTypeID');
|
|
|
+ this.params.id=this.bigTypeID;
|
|
|
+ PublicApi.GetProductClassify({typeSort:2,source:'www'},function (res) {
|
|
|
+ if (res.code==0){
|
|
|
+ _self.classify = res.data;
|
|
|
+ _self.classify.forEach(function (item) {
|
|
|
+ if(_self.bigTypeID == item.bigTypeID){
|
|
|
+ _self.bigName = item.name;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ CAIMEI.Alert(res.msg, '确定', false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.getclassify();
|
|
|
+ this.getproductList();
|
|
|
+ if(!isPC){
|
|
|
+ $('footer').addClass("noneImportant");
|
|
|
+ //移动端上垃加载更多
|
|
|
+ $(window).on('scroll', function(){
|
|
|
+ var scrollTop = $(this).scrollTop();
|
|
|
+ var scrollHeight = $(document).height();
|
|
|
+ var windowHeight = window.innerHeight;
|
|
|
+ if (scrollTop + windowHeight >= scrollHeight) {
|
|
|
+ //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
|
|
|
+ var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
|
|
|
+ var next = _self.params.num+1;
|
|
|
+ if(next <= totalPage){
|
|
|
+ if (_self.requestFlag){
|
|
|
+ _self.params.num = next;
|
|
|
+ if (_self.searchFlag) {
|
|
|
+ // 获取列表数据
|
|
|
+ _self.getListByKeyword();
|
|
|
+ } else {
|
|
|
+ // 根据分类获取数据
|
|
|
+ if (_self.params.tid && _self.params.tid>0) {
|
|
|
+ _self.getListByCategory("tinyType", _self.params.tid);
|
|
|
+ } else if (_self.params.sid && _self.params.sid>0){
|
|
|
+ _self.getListByCategory("smallType", _self.params.sid);
|
|
|
+ } else if (_self.params.bid && _self.params.bid>0) {
|
|
|
+ _self.getListByCategory("bigType", _self.params.bid);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _self.requestFlag = false;
|
|
|
+ }else{
|
|
|
+ //到底了
|
|
|
+ _self.noMore = true;
|
|
|
+ $('footer').removeClass("noneImportant");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
})
|
Administrator