|
|
@@ -0,0 +1,194 @@
|
|
|
+var productList = new Vue({
|
|
|
+ el:'#productList',
|
|
|
+ data:{
|
|
|
+ userId:0,
|
|
|
+ searchFlag: false,
|
|
|
+ listLoading: true,
|
|
|
+ requestFlag: true,
|
|
|
+ noMore: false,
|
|
|
+ classify:[],
|
|
|
+ smalltypeList:[],//二级分类
|
|
|
+ tinytypeList:[],//三级分类
|
|
|
+ listData:[],
|
|
|
+ bigName:'',
|
|
|
+ smallName:'',
|
|
|
+ tinyName:'',
|
|
|
+ bigTypeID:'',
|
|
|
+ smallTypeID:'',//二级分类id
|
|
|
+ tinyTypeID:'',//三级分类id
|
|
|
+ listRecord: 0,
|
|
|
+ pageInput: '1',
|
|
|
+ source:'www',
|
|
|
+ params: {
|
|
|
+ id:'',
|
|
|
+ identity:GLOBAL_USER_IDENTITY,
|
|
|
+ sortField:'',
|
|
|
+ sortType: 1, // 1降序，其他升序
|
|
|
+ pageSize: 24,
|
|
|
+ pageNum: 1,
|
|
|
+ idType:1
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ pageTotal: function () {
|
|
|
+ var total = Math.ceil(this.listRecord / this.params.pageSize);
|
|
|
+ return total > 0 ? total : 1;
|
|
|
+ },
|
|
|
+ showPageBtn: function () {
|
|
|
+ var total = Math.ceil(this.listRecord / this.params.pageSize);
|
|
|
+ total = total > 0 ? total : 1;
|
|
|
+ var index = this.params.pageNum, arr = [];
|
|
|
+ if (total <= 6) {
|
|
|
+ for (var i = 1; i <= total; i++) {
|
|
|
+ arr.push(i);
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+ if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
|
|
|
+ if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
|
|
|
+ return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.GetSearchProduct(_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);
|
|
|
+ }
|
|
|
+ _self.listLoading = false;
|
|
|
+ _self.requestFlag = true;
|
|
|
+ }else {
|
|
|
+ CAIMEI.Alert(res.msg,'确定',false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkNum: function () {
|
|
|
+ if (this.pageInput > this.pageTotal) {
|
|
|
+ this.pageInput = this.pageTotal;
|
|
|
+ } else if (this.pageInput < 1) {
|
|
|
+ this.pageInput = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toPagination: function (pageNum) {
|
|
|
+ if (pageNum <= this.pageTotal) {
|
|
|
+ this.params.pageNum = pageNum;
|
|
|
+ this.getproductList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toSortList: function (sortField, sortType) {
|
|
|
+ this.params.sortField= sortField;
|
|
|
+ this.params.sortType = sortType;
|
|
|
+ this.params.pageNum = 1;
|
|
|
+ this.getproductList();
|
|
|
+ },
|
|
|
+ removesmall:function(){//删除二级
|
|
|
+ this.smallName = '';
|
|
|
+ },
|
|
|
+ removetiny:function(){//删除三级分类
|
|
|
+ this.tinyName = ''
|
|
|
+ },
|
|
|
+ checkedClasslyFn:function(item,index){
|
|
|
+ this.params.pageNum = 1;
|
|
|
+ this.params.idType = index;
|
|
|
+ switch (index) {
|
|
|
+ case 1://选择1集分类查询
|
|
|
+ this.bigName=item.name;
|
|
|
+ this.smallName = '';
|
|
|
+ this.bigTypeID = item.bigTypeID;
|
|
|
+ this.params.id = item.bigTypeID;
|
|
|
+ this.getclassify();
|
|
|
+ break;
|
|
|
+ case 2://选择二级分类查询
|
|
|
+ this.smallName = item.name;
|
|
|
+ this.tinyName = '';
|
|
|
+ this.smallTypeID = item.smallTypeID;
|
|
|
+ this.params.id = item.smallTypeID;
|
|
|
+ this.tinytypeList =item.tinytypeList;
|
|
|
+ break;
|
|
|
+ case 3://选择三级分类查询
|
|
|
+ this.tinyName = item.name;
|
|
|
+ this.tinyTypeID = item.tinyTypeID;
|
|
|
+ this.params.id = item.tinyTypeID;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.getproductList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created:function () {
|
|
|
+ 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;
|
|
|
+ var typeSort = getUrlParam('typeSort');
|
|
|
+ PublicApi.GetProductClassify({typeSort:typeSort,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){
|
|
|
+ _self.getproductList();
|
|
|
+ $('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.pageSize)?Math.ceil(_self.listRecord / _self.params.pageSize):1;
|
|
|
+ var next = _self.params.pageNum+1;
|
|
|
+ if(next <= totalPage){
|
|
|
+ if (_self.requestFlag){
|
|
|
+ _self.params.pageNum = next;
|
|
|
+ // 获取列表数据
|
|
|
+ _self.getproductList();
|
|
|
+ }
|
|
|
+ _self.requestFlag = false;
|
|
|
+ }else{
|
|
|
+ //到底了
|
|
|
+ _self.noMore = true;
|
|
|
+ $('footer').removeClass("noneImportant");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+})
|
