<template>
|
<view class="productSort" :class="isPageShow?'pageShow':''">
|
<view class="pageBg"></view>
|
<view class="header" :style="{ paddingTop: menuTop + 'px' }">
|
<view class="header_text" :style="{ lineHeight: menuHeight + 'px' }">分类</view>
|
</view>
|
<navigator url="/pages/goods_search/index" class="search_box"
|
:style="{'lineHeight':menuHeight+'px','borderRadius':menuHeight/2+'px'}" hover-class="none"
|
open-type="navigate"><text class="iconfont icon-xiazai5"></text>搜索商品</navigator>
|
<view class="page_content" :style="{ height: height + 'px' }">
|
<view class='aside'>
|
<div class="aside_top"></div>
|
<scroll-view scroll-y="true" scroll-with-animation='true'
|
:style="{height: (height-280/750*windowWidth) + 'px'}" :scroll-into-view="'menu_item'+navActive">
|
<view class='item acea-row row-center-wrapper menu_item' :id="'menu_item'+index"
|
:class='index==navActive?"on":""' v-for="(item,index) in categoryList" :key="index"
|
@click='tap(index,"b"+index)'>
|
<image v-if="item.extra" class="img" :src="item.extra" mode="aspectFill"></image>
|
<view class="text">{{item.name}}</view>
|
</view>
|
</scroll-view>
|
|
</view>
|
<view class="subMenu">
|
<scroll-view :scroll-into-view="'subMenu_item'+subActive" scroll-x="true" scroll-with-animation='true'
|
style="width: 100%;">
|
<view class="subMenu_wrapper">
|
<block v-for="(itemn,indexn) in categoryList[navActive].child" :key="indexn"><text
|
class="subMenu_item" :id="'subMenu_item'+indexn" :class='indexn==subActive?"on":""'
|
@click='tapSub(indexn)'>{{itemn.name}}</text></block>
|
</view>
|
</scroll-view>
|
</view>
|
<view class='conter'
|
:style="{top: (categoryList[navActive].show2Category==0?0:118) + 'rpx',height: (height-(categoryList[navActive].show2Category==0?0:(122/750*windowWidth))) + 'px'}">
|
<scroll-view :scroll-top="scrollTop" class="goodlistScroll" scroll-y="true" style="height:100%;"
|
:scroll-into-view="scrollIntoView" @scroll="handleScroll" :throttle="false">
|
<block v-for="(aitem,aindex) in categoryList" :key="aindex">
|
<view class="list" v-if="aitem.child.length>0" v-for="sitem,sindex in aitem.child" :key="sindex"
|
:style="(aindex==categoryList.length-1&&sindex==aitem.child.length-1)?('min-height:'+(height-370/750*windowWidth)+'px'):''"
|
:id="'list'+aindex+'_'+sindex">
|
<view class="list_title">{{sitem.name}}</view>
|
<view class="list_wrapper cf">
|
<view class="list_column cfl">
|
<block style="float:left" v-if="sitem.productArr.length>0"
|
v-for="(gitem,gindex) in sitem.productArr" :key="gindex">
|
<GoodBlock v-if="gindex%2==0" :size="'small'" :pageName="'分类'"
|
:moduleName="'分类商品列表'" :careBeanRate="careBeanRate" :goodsInfo="gitem">
|
</GoodBlock>
|
</block>
|
</view>
|
<view class="list_column cfr">
|
<block style="float:left" v-if="sitem.productArr.length>0"
|
v-for="(gitem,gindex) in sitem.productArr" :key="gindex">
|
<GoodBlock v-if="gindex%2==1" :size="'small'" :pageName="'分类'"
|
:moduleName="'分类商品列表'" :careBeanRate="careBeanRate" :goodsInfo="gitem">
|
</GoodBlock>
|
</block>
|
</view>
|
</view>
|
<view class="noData" v-if="!sitem.productArr||sitem.productArr.length==0">暂无商品</view>
|
</view>
|
<view class="list" v-if="aitem.child.length==0" :id="'list'+aindex+'_0'"
|
:style="(aindex==categoryList.length-1)?('min-height:'+(height-370/750*windowWidth)+'px'):''">
|
<view class="list_title">{{aitem.name}}</view>
|
<view class="list_wrapper cf">
|
<view class="list_column cfl">
|
<block v-if="aitem.productArr.length>0" v-for="(gitem,gindex) in aitem.productArr"
|
:key="gindex">
|
<GoodBlock v-if="gindex%2==0" :pageName="'分类'" :moduleName="'分类商品列表'"
|
:careBeanRate="careBeanRate" :goodsInfo="gitem"></GoodBlock>
|
</block>
|
</view>
|
<view class="list_column cfr">
|
<block v-if="aitem.productArr.length>0" v-for="(gitem,gindex) in aitem.productArr"
|
:key="gindex">
|
<GoodBlock v-if="gindex%2==1" :pageName="'分类'" :moduleName="'分类商品列表'"
|
:careBeanRate="careBeanRate" :goodsInfo="gitem"></GoodBlock>
|
</block>
|
</view>
|
</view>
|
<view class="noData" v-if="!aitem.productArr||aitem.productArr.length==0">暂无商品</view>
|
</view>
|
</block>
|
<view class="loadingTips">已全部加载</view>
|
<view style="height:190rpx"></view>
|
</scroll-view>
|
</view>
|
</view>
|
<tabBar :tab-id="2"></tabBar>
|
<view class="pauseView" v-if="isPause"></view>
|
<popCoupon ref="popCoupon" :pageName="'goodsCate'"></popCoupon>
|
</view>
|
</template>
|
|
<script>
|
import {
|
parseQueryString
|
} from "@/utils/index.js";
|
import {
|
getProductslist,
|
getCategoryList
|
} from '@/api/store.js';
|
import {
|
handsCoupon
|
} from '@/api/user.js'
|
import GoodBlock from "@/pages/goods_block/index.vue";
|
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
import popCoupon from '@/components/popCoupon/index.vue';
|
export default {
|
components: {
|
GoodBlock,
|
popCoupon
|
},
|
data() {
|
return {
|
navlist: [],
|
categoryList: [],
|
goodList: [],
|
optionId: 0,
|
navActive: 0,
|
subActive: 0,
|
number: "",
|
height: 0,
|
toView: "",
|
tabbarH: 0,
|
where: {
|
page: 1,
|
limit: 20,
|
cid: 0,
|
},
|
loading: false,
|
loadend: false,
|
errorRange: 5,
|
isPause: false,
|
scrollTop: 0,
|
oldScrollTop: 0,
|
windowWidth: 0,
|
windowHeight: 0,
|
isCanUpRefresh: false,
|
scrollIntoView: '',
|
topArr: [],
|
finishNum: 0,
|
totalGetNum: 0,
|
// 首屏优化：当前分类的待完成请求数
|
catePending: [],
|
// 标记各分类是否已派发过请求，避免切换分类时重复请求
|
cateStarted: [],
|
firstScreenReady: true,
|
// 后台加载标记：首屏渲染并关闭loading后，才开始后台加载其余分类
|
bgLoaded: false,
|
// 渲染优化：非首屏分类数据缓冲队列，批量渲染减少setData次数
|
deferredLists: [],
|
deferTimer: null,
|
allRequestsDone: false,
|
careBeanRate: 0,
|
menuTop: 0,
|
menuHeight: 50,
|
menuBottom: 0,
|
isClicking: false,
|
isLoading: false,
|
isPageShow: false,
|
}
|
},
|
onLoad(options) {
|
let that = this;
|
that.menuTop = uni.getMenuButtonBoundingClientRect().top;
|
that.menuHeight = uni.getMenuButtonBoundingClientRect().height;
|
// 尽早计算页面布局高度，避免首屏数据就绪后因 height 为 0 而白屏
|
that.infoScroll();
|
if (that.$store.getters.careBeanRate) {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
})
|
}
|
uni.$once('updateCareBeanRate', () => {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
console.log('get updateCareBeanRate', that.$store.getters.careBeanRate, that
|
.careBeanRate)
|
})
|
});
|
},
|
mounted() {},
|
onReady() {
|
// 页面渲染完成后复核一次布局尺寸（含滚动区域 scrollHeight）
|
this.infoScroll();
|
},
|
onHide() {
|
let that = this;
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onhide事件');
|
return false;
|
}
|
this.isPageShow = false;
|
uni.$off('UPDATE_LOGINSTATUS', that.getAllCategory);
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
},
|
onShow() {
|
let that = this;
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onshow事件');
|
return false;
|
}
|
uni.$off('UPDATE_LOGINSTATUS', that.getAllCategory);
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
that.isPageShow = true;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route', currPage.route);
|
console.log('options', currPage.options);
|
console.log('------------------page onShow end-----------------');
|
|
let ifRefresh = true
|
if (this.$store.getters.switchParams) {
|
var switchJson = parseQueryString(this.$store.getters.switchParams);
|
if (switchJson) {
|
console.log(switchJson);
|
if (switchJson.cid) {
|
this.optionId = switchJson.cid;
|
if(this.categoryList.length>0){
|
console.log('---------',this.optionId,this.categoryList[this.navActive].id,this.categoryList[this.navActive].child[this.subActive].id);
|
if(this.optionId==0
|
||(this.categoryList[this.navActive]&&this.categoryList[this.navActive].id==that.optionId)
|
||(this.categoryList[this.navActive].child&&this.categoryList[this.navActive].child.length>0&&this.categoryList[this.navActive].child[this.subActive].id==this.optionId)
|
){
|
ifRefresh = false
|
}
|
}
|
this.$store.commit('updateSwitchParams', {
|
switchParams: ''
|
});
|
} else {
|
this.optionId = 0;
|
}
|
} else {
|
this.optionId = 0;
|
}
|
} else {
|
this.optionId = 0;
|
}
|
|
console.log('switchJson', this.optionId)
|
// 数据已加载过：直接复用缓存定位，不重新请求
|
if (this.categoryList.length > 0 && this.totalGetNum > 0 && this.finishNum >= this.totalGetNum) {
|
ifRefresh = false;
|
let found = false;
|
if (this.optionId && this.optionId != 0) {
|
// 在已缓存的分类中查找目标分类并定位
|
this.categoryList.forEach((item, index) => {
|
if (this.optionId == item.id) {
|
that.navActive = index;
|
that.subActive = 0;
|
found = true;
|
}
|
if (item.child && item.child.length > 0) {
|
item.child.forEach((item2, index2) => {
|
if (this.optionId == item2.id) {
|
that.navActive = index;
|
that.subActive = index2;
|
found = true;
|
}
|
})
|
}
|
})
|
// 目标分类在缓存中不存在，才重新加载
|
if (!found) {
|
ifRefresh = true;
|
} else {
|
that.isClicking = true;
|
that.scrollIntoView = '';
|
that.$nextTick(() => {
|
that.scrollIntoView = 'list' + that.navActive + '_' + that.subActive;
|
setTimeout(() => {
|
that.isClicking = false;
|
}, 300)
|
})
|
}
|
}
|
// 无指定分类（普通tab切换）：保留用户当前浏览位置，不重置不滚动
|
}
|
if (ifRefresh) {
|
// this.$store.commit('updateSwitchParams', {
|
// switchParams: 'cid=0'
|
// });
|
that.navActive = 0;
|
that.subActive = 0;
|
that.isLoading = true;
|
if (that.$store.getters.unionId) {
|
that.getAllCategory();
|
} else {
|
uni.$once('UPDATE_LOGINSTATUS', that.getAllCategory)
|
}
|
|
}
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
},
|
methods: {
|
belongInfoReadyFn(data) {
|
let that = this;
|
if (!data.isRegister) {
|
that.checkLoginFn();
|
}
|
},
|
checkLoginFn() {
|
console.log('checkLoginFn')
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
that.addTrack('yy_pageView', {
|
pageTitle_var: '分类',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '商品'
|
});
|
if (that.$store.getters.isLogin) {
|
handsCoupon().then(res => {
|
if (res.code == 200) {
|
that.$refs.popCoupon.show();
|
}
|
}); //检查用户有可以手动领取导入优惠券记录
|
|
}
|
},
|
infoScroll: function() {
|
let that = this;
|
//设置商品列表高度
|
uni.getSystemInfo({
|
success: function(res) {
|
that.windowHeight = res.windowHeight;
|
that.windowWidth = res.windowWidth;
|
that.menuBottom = 30 / 750 * that.windowWidth;
|
that.height = that.windowHeight - that.menuTop - that.menuHeight - that
|
.menuBottom - that.menuHeight - 60 /
|
750 * that.windowWidth;
|
that.updateDimensions();
|
},
|
});
|
|
},
|
tap: function(index) {
|
let that = this;
|
that.isClicking = true;
|
that.navActive = index;
|
that.subActive = 0;
|
// loading期间切到尚未发起请求的分类时，立即补发请求，避免loading卡住
|
if (!that.cateStarted[index]) {
|
that.loadCateByIndex(index);
|
}
|
// loading期间切换分类，若目标分类已加载完成则立即关闭loading
|
that.checkFirstScreen(index);
|
that.$nextTick(() => {
|
that.scrollIntoView = 'list' + that.navActive + '_' + that.subActive;
|
setTimeout(() => {
|
that.isClicking = false;
|
}, 300)
|
});
|
},
|
tapSub: function(index) {
|
let that = this;
|
that.isClicking = true;
|
that.subActive = index;
|
// 当前分类尚未发起请求时补发，避免loading卡住
|
if (!that.cateStarted[that.navActive]) {
|
that.loadCateByIndex(that.navActive);
|
}
|
that.checkFirstScreen(that.navActive);
|
that.$nextTick(() => {
|
that.scrollIntoView = 'list' + that.navActive + '_' + that.subActive;
|
setTimeout(() => {
|
that.isClicking = false;
|
}, 300)
|
})
|
},
|
getAllListTop: function() {
|
let that = this;
|
that.scrollIntoView = '';
|
that.topArr = [];
|
that.$nextTick(() => {
|
that.infoScroll();
|
// loading已提前关闭（用户可能已在浏览）时不再强制滚动定位
|
if (that.isLoading) {
|
that.scrollIntoView = 'list' + that.navActive + '_' + that.subActive;
|
}
|
setTimeout(function() {
|
that.isLoading = false;
|
uni.hideLoading();
|
}, 500)
|
|
const query = uni.createSelectorQuery().in(this);
|
query.selectAll('.list').boundingClientRect(data => {
|
data.forEach((item) => {
|
that.topArr.push({
|
top: item.top - data[0].top,
|
id: item.id
|
});
|
});
|
}).exec();
|
})
|
|
},
|
getAllCategory: function() {
|
let that = this;
|
that.firstScreenReady = false;
|
that.allRequestsDone = false;
|
that.bgLoaded = false;
|
that.deferredLists = [];
|
if (that.deferTimer) {
|
clearTimeout(that.deferTimer);
|
that.deferTimer = null;
|
}
|
// 暂不考虑传入cid的情况：一律从第一个分类开始加载首屏
|
that.navActive = 0;
|
that.subActive = 0;
|
uni.showLoading();
|
getCategoryList().then(res => {
|
that.categoryList = res.data || [];
|
// 重置计数，避免重复进入页面时累积
|
that.totalGetNum = 0;
|
that.finishNum = 0;
|
that.catePending = [];
|
that.cateStarted = [];
|
that.categoryList.forEach((item, index) => {
|
if (item.child && item.child.length > 0) {
|
item.child.sort((a, b) => {
|
return a.sort - b.sort;
|
});
|
that.totalGetNum += item.child.length;
|
that.catePending[index] = item.child.length;
|
} else {
|
that.totalGetNum += 1;
|
that.catePending[index] = 1;
|
}
|
})
|
// 分类为空时直接关闭loading，避免一直停留在loading态
|
if (!that.categoryList.length) {
|
that.firstScreenReady = true;
|
that.isLoading = false;
|
uni.hideLoading();
|
return;
|
}
|
// 首屏优化：先只请求第一个分类，保证首屏数据最快返回并直接渲染
|
that.loadCateByIndex(that.navActive);
|
// 其余分类待首屏渲染、loading关闭后，由 loadRestCategory 后台错峰加载
|
})
|
},
|
// 按索引加载某个分类下的商品数据（同一分类只派发一次）
|
loadCateByIndex(index) {
|
let that = this;
|
let item = that.categoryList[index];
|
if (!item) return;
|
if (that.cateStarted[index]) return;
|
that.cateStarted[index] = true;
|
if (item.child && item.child.length > 0) {
|
item.child.forEach((item2, index2) => {
|
that.getAllProductList('isSub', index, index2);
|
})
|
} else {
|
that.getAllProductList(false, index);
|
}
|
},
|
// 首屏渲染并关闭loading后，后台错峰加载其余分类，避免与首屏抢请求/抢渲染
|
loadRestCategory() {
|
let that = this;
|
if (that.bgLoaded) return;
|
that.bgLoaded = true;
|
let delay = 0;
|
that.categoryList.forEach((item, index) => {
|
if (index == that.navActive) return;
|
// 每个分类错开触发，逐步在后台铺开，避免一次性铺满请求队列
|
delay += 50;
|
setTimeout(() => {
|
that.loadCateByIndex(index);
|
}, delay);
|
})
|
},
|
// 当前分类数据全部就绪后立即关闭全屏loading，不必等待所有分类
|
checkFirstScreen(index1) {
|
let that = this;
|
if (that.firstScreenReady || index1 != that.navActive) return;
|
if ((that.catePending[index1] || 0) <= 0) {
|
that.firstScreenReady = true;
|
that.isLoading = false;
|
// 等当前分类DOM渲染完成后再关闭loading，避免loading关闭后白屏等待
|
that.$nextTick(() => {
|
setTimeout(() => {
|
uni.hideLoading();
|
// 首屏已渲染且loading已关闭，此时才开始后台加载其余分类
|
that.loadRestCategory();
|
}, 50)
|
})
|
}
|
},
|
// 定时批量渲染缓冲的非首屏分类数据，多个$set合并为一次渲染
|
scheduleDeferredFlush() {
|
let that = this;
|
if (that.deferTimer) return;
|
that.deferTimer = setTimeout(() => {
|
that.deferTimer = null;
|
that.flushDeferredLists();
|
}, 300)
|
},
|
flushDeferredLists() {
|
let that = this;
|
if (!that.deferredLists.length) return;
|
let queue = that.deferredLists;
|
that.deferredLists = [];
|
// 同一tick内批量$set，只触发一次列表渲染
|
queue.forEach(item => {
|
if (item.isSub) {
|
that.$set(that.categoryList[item.index1].child[item.index2], 'productArr', item.list);
|
} else {
|
that.$set(that.categoryList[item.index1], 'productArr', item.list);
|
}
|
});
|
// 所有请求已完成且缓冲队列已清空，计算各分类滚动位置
|
if (that.allRequestsDone && !that.deferTimer) {
|
that.$nextTick(() => {
|
that.getAllListTop();
|
})
|
}
|
},
|
onUpRefresh() {
|
let that = this;
|
if (that.subActive > 0) {
|
that.tapSub(that.subActive - 1);
|
} else if (that.navActive > 0) {
|
that.tap(that.navActive - 1);
|
} else {
|
that.isCanUpRefresh = false;
|
}
|
},
|
reachBottom() {
|
let that = this;
|
if (!this.loading && !that.isPause) {
|
if (!that.loadend) {
|
that.get_product_list();
|
} else if (that.subActive < that.categoryList[that.navActive].child.length - 1) {
|
that.tapSub(that.subActive + 1);
|
} else if (that.navActive < that.categoryList.length - 1) {
|
that.tap(that.navActive + 1);
|
}
|
}
|
},
|
onRestore() {
|
this.triggered = 'restore'; // 需要重置
|
console.log('restore')
|
},
|
onPulling(e) {
|
if (e.detail.dy < 0) {
|
|
} else {
|
this.isCanUpRefresh = true;
|
}
|
},
|
updateDimensions() {
|
const query = uni.createSelectorQuery().in(this);
|
query.select('.goodlistScroll').boundingClientRect(data => {
|
// 首屏渲染前该节点可能还不存在，避免报错
|
if (data) this.scrollHeight = data.height;
|
}).exec();
|
},
|
handleScroll(e) {
|
let that = this;
|
let scrollTop = e.detail.scrollTop;
|
if (that.isClicking) {
|
return false;
|
}
|
if (that.isLoading) {
|
return false;
|
}
|
if (that.topArr.length > 0) {
|
for (var i = that.topArr.length - 1; i >= 0; i--) {
|
if (scrollTop >= that.topArr[i].top) {
|
let indexArr = that.topArr[i].id.replace('list', '').split('_');
|
that.navActive = indexArr[0];
|
that.subActive = indexArr[1]
|
break;
|
}
|
}
|
}
|
},
|
//查找产品
|
getAllProductList: function(isSub, index1, index2) {
|
let that = this;
|
getProductslist({
|
page: 1,
|
cid: isSub ? that.categoryList[index1].child[index2].id : that.categoryList[index1].id,
|
}).then(res => {
|
let list = res.data.list;
|
// 当前浏览分类即时渲染；其余分类进入缓冲队列批量渲染，
|
// 避免几十次$set各自触发一次全量列表渲染
|
if (index1 == that.navActive && !that.firstScreenReady) {
|
if (isSub) {
|
that.$set(that.categoryList[index1].child[index2], 'productArr', list);
|
} else {
|
that.$set(that.categoryList[index1], 'productArr', list);
|
}
|
} else {
|
that.deferredLists.push({
|
isSub: isSub,
|
index1: index1,
|
index2: index2,
|
list: list
|
});
|
that.scheduleDeferredFlush();
|
}
|
that.finishNum++;
|
that.catePending[index1]--;
|
that.checkFirstScreen(index1);
|
if (that.totalGetNum == that.finishNum) {
|
that.allRequestsDone = true;
|
// 请求全部完成且无待渲染数据时才计算各分类位置
|
if (!that.deferTimer && that.deferredLists.length == 0) {
|
that.getAllListTop();
|
}
|
}
|
}).catch(() => {
|
that.finishNum++;
|
that.catePending[index1]--;
|
that.checkFirstScreen(index1);
|
if (that.totalGetNum == that.finishNum) {
|
that.allRequestsDone = true;
|
if (!that.deferTimer && that.deferredLists.length == 0) {
|
that.getAllListTop();
|
}
|
}
|
});
|
},
|
get_product_list: function() {
|
let that = this;
|
if (that.loadend) return;
|
if (that.loading) return;
|
that.loading = true;
|
that.loadTitle = '';
|
that.isPause = true;
|
getProductslist(that.where).then(res => {
|
let list = res.data.list;
|
let loadend = list.length < that.where.limit;
|
that.loadend = loadend;
|
that.loading = false;
|
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
that.$set(that, 'goodList', list);
|
that.$set(that.where, 'page', that.where.page + 1);
|
|
that.scrollTop = 1000000000;
|
that.$nextTick(() => {
|
that.scrollTop = 0;
|
that.updateDimensions();
|
that.isCanUpRefresh = false;
|
var timer = setTimeout(() => {
|
clearTimeout(timer);
|
that.isPause = false;
|
}, 300)
|
})
|
}).catch(err => {
|
that.loading = false;
|
that.loadTitle = '加载更多';
|
});
|
},
|
searchSubmitValue: function(e) {
|
if (this.$util.trim(e.detail.value).length > 0)
|
uni.navigateTo({
|
url: '/pages/goods_list/index?searchValue=' + e.detail.value
|
})
|
else
|
return this.$util.Tips({
|
title: '请填写要搜索的产品信息'
|
});
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.productSort {
|
overflow: hidden;
|
height: 100%;
|
}
|
|
.pageBg {
|
// width: 100%;
|
// height: 900rpx;
|
// position: absolute;
|
// left: 0;
|
// top: 0;
|
// background: url("https://ossacmall.bluedeer.com.cn/app/static/images/page_commonBg.png") center top/100% auto no-repeat;
|
// z-index: 0;
|
}
|
|
.header {
|
position: sticky;
|
top: 0;
|
z-index: 200000;
|
width: 100%;
|
// padding: 28rpx 0;
|
text-align: center;
|
padding-top: 88rpx;
|
font-size: 30rpx;
|
line-height: 64rpx;
|
font-weight: bold;
|
padding-bottom: 30rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/page_commonBg.png") center top/100% auto no-repeat;
|
|
}
|
|
.page_content {
|
position: relative;
|
}
|
|
|
|
.search_box {
|
width: 690rpx;
|
box-sizing: border-box;
|
margin: 30rpx auto;
|
display: flex;
|
align-items: center;
|
line-height: 50rpx;
|
padding: 0 0 0 30rpx;
|
background: #ffffff;
|
border: 1px solid #f1f1f1;
|
border-radius: 25rpx;
|
color: #cccccc;
|
font-size: 28rpx;
|
position: relative;
|
|
.iconfont {
|
margin-right: 20rpx;
|
font-size: 26rpx;
|
color: #cccccc;
|
margin-right: 20rpx;
|
}
|
}
|
|
.subMenu {
|
position: absolute;
|
width: 610rpx;
|
left: 140rpx;
|
top: 0;
|
overflow: hidden;
|
margin-top: 118rpx;
|
margin-top: 0;
|
background-color: #ffffff;
|
}
|
|
.subMenu_wrapper {
|
width: max-content;
|
white-space: nowrap;
|
}
|
|
.subMenu_item {
|
min-width: 3em;
|
text-align: center;
|
font-size: 27rpx;
|
line-height: 120rpx;
|
color: #979797;
|
margin-right: 50rpx;
|
}
|
|
.subMenu_item:first-child {
|
margin-left: 50rpx;
|
}
|
|
.subMenu_item.on {
|
font-size: 30rpx;
|
color: #016DCC;
|
font-weight: bold;
|
position: relative;
|
|
:after {
|
content: '';
|
display: block;
|
width: 44rpx;
|
height: 12rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -22rpx;
|
bottom: -12rpx;
|
background-image: url('https://ossacmall.bluedeer.com.cn/app/static/images/category_icon.png');
|
background-size: 100% 100%;
|
}
|
}
|
.productSort .aside {
|
position: absolute;
|
width: 140rpx;
|
left: 0;
|
top: 0;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
height: auto;
|
margin-top: 118rpx;
|
margin-top: 0;
|
|
.aside_top {
|
height: 120rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/c_top2.png") center top/100% 100% no-repeat;
|
}
|
}
|
.productSort .aside .item {
|
width: 100%;
|
color: #979797;
|
position: relative;
|
.img{
|
display: block;
|
width: 100%;
|
height: 90rpx;
|
pointer-events: none;
|
}
|
.text{
|
width: 100%;
|
text-align: center;
|
font-size: 24rpx;
|
line-height: 90rpx;
|
white-space: nowrap;
|
position: relative;
|
}
|
&.on {
|
text-align: center;
|
color: #016DCC;
|
font-weight: bold;
|
.text:before{
|
content: '';
|
display: block;
|
position: absolute;
|
width: 4rpx;
|
height: 100%;
|
right: 0;
|
top: 0;
|
background-color: #016DCC;
|
}
|
}
|
}
|
|
.productSort .conter {
|
position: absolute;
|
width: 610rpx;
|
right: 0;
|
bottom: 0;
|
box-sizing: border-box;
|
padding: 0 14rpx;
|
background: #F5F5F5;
|
overflow: hidden;
|
|
.noData {
|
text-align: center;
|
font-size: 27rpx;
|
line-height: 40rpx;
|
color: #979797;
|
margin: 0 auto;
|
margin-top: 4vw;
|
padding-top: 66rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/i_fail.png") center top/ auto 36rpx no-repeat;
|
}
|
}
|
|
.productSort .conter .list {
|
padding-left: 15rpx;
|
padding-right: 15rpx;
|
|
.list_title {
|
width: 100%;
|
font-size: 27rpx;
|
line-height: 50rpx;
|
padding-top: 15rpx;
|
color: #000000;
|
margin-bottom: 20rpx;
|
}
|
|
.list_wrapper {}
|
|
.list_column {}
|
}
|
|
.pauseView {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
|
.loadingTips {
|
width: max-content;
|
padding: 0 0 0 60rpx;
|
font-size: 27rpx;
|
line-height: 60rpx;
|
margin: 0 auto;
|
color: #DDDDDD;
|
background: url('https://ossacmall.bluedeer.com.cn/app/static/images/h_loading.png') left center/41rpx auto no-repeat;
|
}
|
</style>
|
