全新UI视觉体验,移动端API优化降低重复调用,提高并发6倍,修复N多Bug

This commit is contained in:
stivepeim
2021-06-11 17:41:16 +08:00
parent 0b9f28fa52
commit b76840e10f
582 changed files with 35633 additions and 28276 deletions

View File

@@ -1,9 +1,5 @@
<template>
<view class='productSort copy-data'>
<!-- #ifdef APP-PLUS -->
<view class="sys-head" :style="{height:sysHeight}"></view>
<!-- #endif -->
<view class='productSort'>
<view class='header acea-row row-center-wrapper'>
<view class='acea-row row-between-wrapper input'>
<text class='iconfont icon-sousuo'></text>
@@ -11,15 +7,18 @@
placeholder-class='placeholder'></input>
</view>
</view>
<view class='aside'>
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
:key="index" @click='tap(index,"b"+index)'><text>{{item.name}}</text></view>
</scroll-view>
</view>
<view class='conter'>
<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;"' @scroll="scroll"
<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"' @scroll="scroll"
scroll-with-animation='true'>
<block v-for="(item,index) in productList" :key="index">
<view class='listw' :id="'b'+index">
<view class='title acea-row row-center-wrapper'>
<view class='line'></view>
@@ -29,10 +28,7 @@
<view class='list acea-row'>
<block v-for="(itemn,indexn) in item.child" :key="indexn">
<navigator hover-class='none' :url='"/pages/goods_list/index?cid="+itemn.id+"&title="+itemn.name' class='item acea-row row-column row-middle'>
<!-- <view class='picture' :style="{'background-color':(itemn.extra&&itemn.extra.indexOf('https://') > -1) || (itemn.extra&&itemn.extra.indexOf('http://') > -1)?'none':'#f7f7f7'}">
<image :src='itemn.extra'></image>
</view> -->
<view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
<view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
<image :src='itemn.extra'></image>
</view>
<view class='name line1'>{{itemn.name}}</view>
@@ -48,7 +44,6 @@
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import {
getCategoryList
} from '@/api/store.js';
@@ -63,25 +58,25 @@
height: 0,
hightArr: [],
toView: "",
tabbarH: 0,
sysHeight: sysHeight,
tabbarH: 0
}
},
onLoad(options) {
this.getAllCategory();
},
onShow() {},
onShow(){
},
methods: {
infoScroll: function() {
let that = this;
let len = that.productList.length;
let child = that.productList[len - 1] && that.productList[len - 1].child ? that.productList[len - 1].child : [];
this.number = child ? child.length : 0;
let child = that.productList[len - 1]&&that.productList[len - 1].child?that.productList[len - 1].child:[];
this.number = child?child.length:0;
//设置商品列表高度
uni.getSystemInfo({
success: function(res) {
that.height = (res.windowHeight) * (750 / res.windowWidth);
that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
},
});
let height = 0;
@@ -106,9 +101,9 @@
let that = this;
getCategoryList().then(res => {
that.productList = res.data;
setTimeout(function() {
setTimeout(function(){
that.infoScroll();
}, 500)
},500)
})
},
scroll: function(e) {
@@ -139,9 +134,6 @@
</script>
<style scoped lang="scss">
.sys-head{
background-color: #fff;
}
.productSort .header {
width: 100%;
height: 96rpx;
@@ -153,7 +145,7 @@
z-index: 9;
border-bottom: 1rpx solid #f5f5f5;
}
.productSort .header .input {
width: 700rpx;
height: 60rpx;
@@ -162,45 +154,42 @@
box-sizing: border-box;
padding: 0 25rpx;
}
.productSort .header .input .iconfont {
font-size: 35rpx;
font-size: 26rpx;
color: #555;
}
.productSort .header .input .placeholder {
color: #999;
}
.productSort .header .input input {
font-size: 26rpx;
height: 100%;
width: 597rpx;
}
.productSort .aside {
position: fixed;
width: 24%;
width: 180rpx;
left: 0;
top: 0;
top:0;
background-color: #f7f7f7;
overflow-y: auto;
overflow-y: scroll;
overflow-x: hidden;
height: auto;
margin-top: 96rpx;
/* 兼容 IOS<11.2 */
bottom: calc(100rpx+ constant(safe-area-inset-bottom));
/* 兼容 IOS>11.2 */
bottom: calc(100rpx + env(safe-area-inset-bottom));
}
.productSort .aside .item {
height: 100rpx;
width: 100%;
font-size: 26rpx;
color: #424242;
}
.productSort .aside .item.on {
background-color: #fff;
border-left: 4rpx solid #fc4141;
@@ -209,55 +198,58 @@
color: #fc4141;
font-weight: bold;
}
.productSort .conter {
margin: 96rpx 0 0 180rpx;
padding: 0 14rpx;
background-color: #fff;
}
.productSort .conter .listw {
padding-top: 20rpx;
}
.productSort .conter .listw .title {
height: 90rpx;
}
.productSort .conter .listw .title .line {
width: 100rpx;
height: 2rpx;
background-color: #f0f0f0;
}
.productSort .conter .listw .title .name {
font-size: 28rpx;
color: #333;
margin: 0 30rpx;
font-weight: bold;
}
.productSort .conter .list {
flex-wrap: wrap;
}
.productSort .conter .list .item {
width: 177rpx;
margin-top: 26rpx;
}
.productSort .conter .list .item .picture {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.productSort .conter .list .item .picture image {
width: 100%;
height: 100%;
border-radius: 50%;
div{
background-color: #f7f7f7;
}
}
.productSort .conter .list .item .name {
font-size: 24rpx;
color: #333;