diff --git a/components/customTab.vue b/components/customTab.vue
index ef96390..3ce94ae 100644
--- a/components/customTab.vue
+++ b/components/customTab.vue
@@ -3,8 +3,7 @@
<view v-if="newData.status && newData.status.status" style="height: 100rpx;"></view>
<view class="foot" v-if="newData.status && newData.status.status">
<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
- <view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
- @click="goRouter(item)">
+ <view class="foot-item" v-for="(item,index) in newData.menuList" :key="index" @click="goRouter(item)">
<block v-if="item.link == activeRouter">
<image :src="item.imgList[0]"></image>
<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
@@ -30,7 +29,7 @@
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
- export default{
+ export default {
props: {
newData: {
type: Object,
@@ -41,15 +40,15 @@
default: '',
}
},
- data(){
+ data() {
return {
-
+
}
},
mounted() {
-
+
},
- methods:{
+ methods: {
goRouter(item) {
var pages = getCurrentPages();
var page = (pages[pages.length - 1]).$page.fullPath;
@@ -65,7 +64,6 @@
},
}
}
-
</script>
<style lang="scss" scoped>
@@ -85,9 +83,11 @@
box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
- &.filter{
+
+ &.filter {
filter: blur(2rpx);
}
+
.foot-item {
display: flex;
width: max-content;
@@ -95,6 +95,7 @@
justify-content: center;
flex-direction: column;
position: relative;
+
.count-num {
position: absolute;
display: flex;
@@ -111,14 +112,16 @@
padding: 4rpx;
}
}
+
.foot-item image {
height: 50rpx;
width: 50rpx;
text-align: center;
margin: 0 auto;
}
+
.foot-item .txt {
font-size: 24rpx;
}
}
-</style>
+</style>
\ No newline at end of file
diff --git a/components/easy-loadimage/easy-loadimage.vue b/components/easy-loadimage/easy-loadimage.vue
index 508ccbf..10b135f 100644
--- a/components/easy-loadimage/easy-loadimage.vue
+++ b/components/easy-loadimage/easy-loadimage.vue
@@ -1,56 +1,63 @@
<template>
- <view class="easy-loadimage" :id="uid">
- <image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg"
- :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
- @load="handleImgLoad" @error="handleImgError">
- </image>
- <view class="loadfail-img" v-else-if="isLoadError" :style="{ 'background-image': `url(${domain}/static/images/loadfail.png)`}"></view>
- <view :class="['loading-img','spin-circle',loadingMode]" v-show="!showImg&&!isLoadError" :style="{ 'background-image': `url(${domain}/static/images/loading.gif)`}"></view>
- </view>
+ <view class="easy-loadimage" :id="uid">
+ <image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg"
+ :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
+ @load="handleImgLoad" @error="handleImgError">
+ </image>
+ <view class="loadfail-img" v-else-if="isLoadError"
+ :style="{ 'background-image': `url(${domain}/static/easy-loadimage/loadfail.png)`}"></view>
+ <view :class="['loading-img','spin-circle',loadingMode]" v-show="!showImg&&!isLoadError"
+ :style="{ 'background-image': `url(${domain}/static/easy-loadimage/loading.gif)`}"></view>
+ </view>
</template>
<script>
-// +----------------------------------------------------------------------
-// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
-// +----------------------------------------------------------------------
-// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
-// +----------------------------------------------------------------------
-// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
-// +----------------------------------------------------------------------
-// | Author: CRMEB Team <admin@crmeb.com>
-// +----------------------------------------------------------------------
-import { throttle } from '@/libs/uniApi';
-import { HTTP_REQUEST_URL } from '@/config/app';
-// 生成全局唯一id
-function generateUUID() {
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
- let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
- return v.toString(16);
- })
-}
-export default{
- props:{
- imageSrc:{
+ // +----------------------------------------------------------------------
+ // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
+ // +----------------------------------------------------------------------
+ // | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
+ // +----------------------------------------------------------------------
+ // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
+ // +----------------------------------------------------------------------
+ // | Author: CRMEB Team <admin@crmeb.com>
+ // +----------------------------------------------------------------------
+ import {
+ throttle
+ } from '@/libs/uniApi';
+ import {
+ HTTP_REQUEST_URL
+ } from '@/config/app';
+ // 生成全局唯一id
+ function generateUUID() {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+ let r = Math.random() * 16 | 0,
+ v = c == 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ })
+ }
+ export default {
+ props: {
+ imageSrc: {
type: String,
},
- mode:{
+ mode: {
type: String,
},
- loadingMode:{
+ loadingMode: {
type: String,
- default:'looming-gray'
+ default: 'looming-gray'
},
- openTransition:{
+ openTransition: {
type: Boolean,
- default:true,
+ default: true,
},
- viewHeight:{
- type:Number,
- default() {
- return uni.getSystemInfoSync().windowHeight;
+ viewHeight: {
+ type: Number,
+ default () {
+ return uni.getSystemInfoSync().windowHeight;
}
}
- },
- data(){
+ },
+ data() {
const that = this;
return {
domain: HTTP_REQUEST_URL,
@@ -65,7 +72,7 @@ export default{
if (that.loadImg || that.isLoadError) return;
const id = that.uid
const query = uni.createSelectorQuery().in(that);
- let t = 0;
+ let t = 0;
query.select('#' + id).boundingClientRect(data => {
if (!data) return;
if (data.top - that.viewHeight < 0) {
@@ -75,15 +82,15 @@ export default{
}).exec()
}, 200)
}
- },
- methods:{
+ },
+ methods: {
init() {
this.$nextTick(this.onScroll)
},
- handleBorderLoad(){
+ handleBorderLoad() {
this.borderLoaded = 1;
},
- handleBorderError(){
+ handleBorderError() {
this.borderLoaded = 2;
},
handleImgLoad(e) {
@@ -98,88 +105,107 @@ export default{
onScroll() {
this.scrollFn();
},
- },
- mounted() {
- this.init()
- uni.$on('scroll', this.scrollFn);
- this.onScroll();
- },
+ },
+ mounted() {
+ this.init()
+ uni.$on('scroll', this.scrollFn);
+ this.onScroll();
+ },
beforeDestroy() {
uni.$off('scroll', this.scrollFn);
}
-}
+ }
</script>
<style scoped>
- /* 官方优化图片tips */
- image{
- will-change: transform
- }
- /* 渐变过渡效果处理 */
- image.origin-img{
- width: 100%;
- height: 100%;
- opacity: 0.3;
- max-height: 360rpx;
- }
- image.origin-img.show-transition{
- transition: opacity .5s;
- opacity: 1;
- }
- image.origin-img.no-transition{
- opacity: 1;
- }
- /* 加载失败、加载中的占位图样式控制 */
- .loadfail-img{
- height: 100%;
- background-repeat: no-repeat;
- background-size: 50%;
- background-position: center;
- }
- .loading-img{
- height: 100%;
- background-position: center;
- }
- /* 转圈 */
- .spin-circle{
- background-repeat: no-repeat;
- background-size: 60%;
- }
- /* 动态灰色若隐若现 */
- .looming-gray{
- animation: looming-gray 1s infinite linear;
- background-color: #e3e3e3;
- }
- @keyframes looming-gray{
- 0% {background-color:#e3e3e3aa;}
- 50% {background-color:#e3e3e3;}
- 100% {background-color:#e3e3e3aa;}
- }
- /* 骨架屏1 */
- .skeleton-1{
- background-color: #e3e3e3;
- background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
- background-size: 100rpx 100%;
- background-repeat: repeat-y;
- background-position:0 0;
- animation: skeleton-1 .6s infinite;
- }
- @keyframes skeleton-1 {
- to {
- background-position: 200% 0;
- }
- }
- /* 骨架屏2 */
- .skeleton-2{
- background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%,#fefefe 100%);
- background-size: 400% 400%;
- background-position:0 0;
- animation: skeleton-2 1.2s ease-in-out infinite;
- }
- @keyframes skeleton-2{
- to {
- background-position: -135% 0;
- }
- }
-</style>
+ /* 官方优化图片tips */
+ image {
+ will-change: transform
+ }
+ /* 渐变过渡效果处理 */
+ image.origin-img {
+ width: 100%;
+ height: 100%;
+ opacity: 0.3;
+ max-height: 360rpx;
+ }
+
+ image.origin-img.show-transition {
+ transition: opacity .5s;
+ opacity: 1;
+ }
+
+ image.origin-img.no-transition {
+ opacity: 1;
+ }
+
+ /* 加载失败、加载中的占位图样式控制 */
+ .loadfail-img {
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: 50%;
+ background-position: center;
+ }
+
+ .loading-img {
+ height: 100%;
+ background-position: center;
+ }
+
+ /* 转圈 */
+ .spin-circle {
+ background-repeat: no-repeat;
+ background-size: 60%;
+ }
+
+ /* 动态灰色若隐若现 */
+ .looming-gray {
+ animation: looming-gray 1s infinite linear;
+ background-color: #e3e3e3;
+ }
+
+ @keyframes looming-gray {
+ 0% {
+ background-color: #e3e3e3aa;
+ }
+
+ 50% {
+ background-color: #e3e3e3;
+ }
+
+ 100% {
+ background-color: #e3e3e3aa;
+ }
+ }
+
+ /* 骨架屏1 */
+ .skeleton-1 {
+ background-color: #e3e3e3;
+ background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
+ background-size: 100rpx 100%;
+ background-repeat: repeat-y;
+ background-position: 0 0;
+ animation: skeleton-1 .6s infinite;
+ }
+
+ @keyframes skeleton-1 {
+ to {
+ background-position: 200% 0;
+ }
+ }
+
+ /* 骨架屏2 */
+ .skeleton-2 {
+ background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%, #fefefe 100%);
+ background-size: 400% 400%;
+ background-position: 0 0;
+ animation: skeleton-2 1.2s ease-in-out infinite;
+ }
+
+ @keyframes skeleton-2 {
+ to {
+ background-position: -135% 0;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/components/recommend/index.vue b/components/recommend/index.vue
index 1846bbd..a49337f 100644
--- a/components/recommend/index.vue
+++ b/components/recommend/index.vue
@@ -46,6 +46,7 @@
里海新闻</view>
<view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
</view>
+
<view class="information" v-if="showTab&&list.length>0">
<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
<view class="nav-item" style="display: inline-block;margin-right: 16rpx;"
@@ -65,22 +66,43 @@
<!-- tab导航 -->
<view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}">
<block v-for="(item,indx) in tabsArr" :key="indx">
- <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view>
- <view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
+ <!-- <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view> -->
+ <view :class="{'tabs-item-active':indx==currTabIndex}" class="tabs-item" @click="changeTab(indx)">
<view class="tabs-item-main">{{item.name}}</view>
<view class="tabs-item-sub">{{item.desc}}</view>
</view>
</block>
</view>
- <view class='recommendList' :class="indexP?'on':''">
- <WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0"
- :sale_type="sale_type" />
- <view class='pictrue' v-if="!loading&&hostProduct.length==0">
- <image :src="`${domain}/static/images/noCart.png`"></image>
- <view>暂无商品，看点别的吧</view>
- </view>
- </view>
+ <!-- 滑动 49 55 var(--status-bar-height)-->
+ <swiper :indicator-dots="false" :autoplay="false" :duration="0" :current="currTabIndex" @change="changeTab"
+ :style="{height:'calc(100vh - 98rpx - 110rpx - 108rpx - var(--status-bar-height))'}">
+ <swiper-item v-for="(item,indx) in tabsArr" :key="indx">
+ <scroll-view style="height: 100%;" :scroll-y="scrollY" @scroll="onscroll"
+ @scrolltolower="onScrollBottom" @scrolltoupper="onScrollTop">
+ <view class='recommendList' :class="indexP?'on':''">
+ <WaterfallsFlow :wfList='hostProduct[currTabIndex]' @itemTap="goDetail" :type="0"
+ :sale_type="sale_type" />
+ <view class='pictrue' v-if="!loading&&hostProduct[currTabIndex].length==0">
+ <image :src="`${domain}/static/images/noCart.png`"></image>
+ <view>暂无商品，看点别的吧</view>
+ </view>
+ </view>
+ <view class="loadingicon acea-row row-center-wrapper">
+ <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
+ {{ hotTitleArr[currTabIndex] }}
+ </view>
+ </scroll-view>
+ </swiper-item>
+ </swiper>
+
+ <!-- <swiper class="tab-box" ref="swiper1" :current="tabIndex" :duration="300" @change="onswiperchange"
+ @transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
+ <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
+ <newsPage class="page-item" :nid="page.newsid" :ref="'page' + index"></newsPage>
+ </swiper-item>
+ </swiper> -->
+
</view>
</template>
@@ -107,18 +129,27 @@
import {
Toast
} from "../../libs/uniApi";
+ import {
+ getProductslist,
+ getProductHot,
+ storeCategory
+ } from '@/api/store.js';
export default {
components: {
WaterfallsFlow
},
computed: mapGetters(['uid']),
props: {
- hostProduct: {
- type: Array,
- default: function() {
- return [];
- }
- },
+ // hostProduct: {
+ // type: Array,
+ // default: function() {
+ // return [];
+ // }
+ // },
+ // loadTitle: {
+ // type: String,
+ // default: '加载更多...'
+ // },
showTab: {
type: Boolean,
default: false
@@ -160,18 +191,153 @@
desc: '特色农副',
val: 4
}],
- currTabs: 1,
- list: []
+ currTabIndex: 0,
+ list: [],
+ loadTitle: '加载更多',
+ hostProduct: [
+ [],
+ [],
+ [],
+ []
+ ],
+ hotPageArr: [1, 1, 1, 1],
+ hotScrollArr: [true, true, true, true],
+ hostIndex: 0,
+ hotPage: 1,
+ hotLimit: 20,
+ hotScroll: true,
+ hotLoading: [false, false, false, false],
+ hotTitle: '加载更多',
+ hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
+ scrollY: false
};
},
mounted() {
this.getArticleList();
+ // 初始化
+ this.loadGoods(0);
},
+
methods: {
- changeTab(e) {
- this.currTabs = e;
- this.$emit('changeRecommedTab', e)
+ // 父页面滚动
+ parentPageScroll(boolean) {
+ this.scrollY = boolean;
+ this.$forceUpdate();
},
+
+ // 滚动底部 触底刷新
+ onScrollBottom() {
+ this.loadGoods();
+ },
+
+ // 滚动顶部
+ onScrollTop() {},
+
+ // 滚动商品
+ onscroll() {
+ console.log(1111);
+ },
+
+
+ changeTab(e) {
+ if (e.detail) this.currTabIndex = e.detail.current;
+ else this.currTabIndex = e;
+ },
+
+ loadGoods(e = 0) {
+ this.$nextTick(() => {
+ if (e == 0) return this.get_host_product(0);
+ if (e == 1) return this.get_host_home({
+ mer_type: 1
+ }, 1);
+ if (e == 2) return this.get_host_home({
+ mer_type: 2
+ }, 2);
+ if (e == 3) return this.get_host_home({
+ mer_type: 3
+ }, 3);
+ })
+ },
+ /**
+ * 获取我的推荐
+ */
+ get_host_product: function(e = 0) {
+ let that = this;
+ if (!that.hotScroll) return;
+ if (that.hotLoading[e]) return;
+
+ that.hotLoading[e] = true;
+ that.hotTitleArr[that.currTabIndex] = '加载中';
+ getProductHot(that.hotPageArr[that.currTabIndex], that.hotLimit, 1, 1).then(res => {
+ console.log(res.data.list);
+ res.data.list = this.shuffleArray(res.data.list);
+ let list = res.data.list;
+ let productList = that.hostProduct[that.currTabIndex];
+ // if (!that.hostProduct[that.currTabIndex]) productList[e] = [];
+ productList = [...productList, ...res.data.list];
+
+ console.log(productList);
+
+ let hotScroll = list.length <= res.data.limit && list.length != 0;
+ that.hotScrollArr[that.currTabIndex] = hotScroll;
+
+ that.hotLoading[that.currTabIndex] = false;
+ that.hotTitleArr[that.currTabIndex] = !hotScroll ? '已全部加载' : '加载更多';
+
+ // that.$set(that, 'hostProduct', productList);
+ that.hostProduct[that.currTabIndex] = productList;
+ // if (this.hostIndex == e) this.$forceUpdate();
+ that.hotPageArr[that.currTabIndex] = res.data.page + 1
+ // that.$set(that, 'hotPage', res.data.page + 1);
+ that.$set(that, 'hotLimit', res.data.limit);
+
+
+ console.log(that.hostProduct);
+ this.$forceUpdate()
+ });
+ },
+ /**
+ * 获取里海云仓, 云市场, 名优特产
+ */
+ get_host_home: function(query = {}, e = 1) {
+ let that = this;
+ if (!that.hotScroll) return;
+ if (that.hotLoading[e]) return;
+ that.hotLoading[e] = true;
+ that.hotTitle = '加载中';
+ query.page = that.hotPage;
+ query.limit = that.hotLimit;
+ query.sale_type = 1;
+ query.rand = 1;
+ getProductslist({
+ ...query
+ }).then(res => {
+ uni.stopPullDownRefresh();
+ res.data.list = this.shuffleArray(res.data.list);
+ let list = res.data.list;
+ let productList = that.hostProduct;
+ if (!productList[e]) productList[e] = [];
+ productList[e] = [...productList[e], ...list];
+ let hotScroll = list.length <= res.data.limit && list.length != 0;
+ that.hotScroll = hotScroll;
+ that.hotLoading[e] = false;
+ that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
+ that.$set(that, 'hostProduct', productList);
+ if (this.hostIndex == e) this.$forceUpdate();
+ that.$set(that, 'hotPage', res.data.page + 1);
+ that.$set(that, 'hotLimit', res.data.limit);
+ });
+ },
+
+ // 数组乱序
+ shuffleArray(array) {
+ for (let i = array.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [array[i], array[j]] = [array[j], array[i]];
+ }
+ return array;
+ },
+
navTo(url) {
uni.navigateTo({
url: url,
@@ -180,6 +346,7 @@
}
})
},
+
getArticleList() {
getArticleList(20, {
page: 1,
@@ -188,6 +355,7 @@
this.list = res.data.list;
})
},
+
goDetail(item) {
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {
diff --git a/pages.json b/pages.json
index 78a0cc2..8f2929b 100644
--- a/pages.json
+++ b/pages.json
@@ -25,7 +25,7 @@
}, {
"path": "pages/whole_sale/index",
"style": {
- "enablePullDownRefresh": true,
+ "enablePullDownRefresh": false,
"navigationBarTitleText": "批发",
"navigationStyle": "custom"
}
diff --git a/pages/cloud_warehouse/market/market.vue b/pages/cloud_warehouse/market/market.vue
index 88ba57c..9abb926 100644
--- a/pages/cloud_warehouse/market/market.vue
+++ b/pages/cloud_warehouse/market/market.vue
@@ -1,342 +1,3 @@
-<style lang="scss" scoped>
- page {
- background-color: #f8fafb !important;
- }
-
- .wholeSale {
-
- .wholeSale-header-search-wrap {
- padding: 30rpx 20rpx 0;
- background-color: #fff;
- }
-
- .wholeSale-header {
- position: sticky;
- top: 0;
- z-index: 90;
- margin-bottom: 20rpx;
- background-color: #40AE36;
- }
-
- .wholeSale-section {
- position: sticky;
- top: calc(82rpx + var(--status-bar-height));
- padding: 0rpx 20rpx;
- background-color: #fff;
- transition: height .5s;
- overflow: hidden;
- margin-bottom: 20rpx;
-
- .wholeSale-nav {
- display: flex;
- align-items: center;
- margin-bottom: 40rpx;
-
- .icon {
- margin-right: 20rpx;
- }
-
- .search_content {
- // margin-bottom: 40rpx;
- flex: 1;
- height: 70rpx;
- padding: 2px 2px 2px 21.05rpx;
- border-radius: 80rpx;
- background: #EDEFF2;
- position: relative;
- box-sizing: border-box;
-
- .search_content_wrap {
- width: 100%;
-
- .icon-sousuo {
- font-size: 26.32rpx;
- font-weight: bold;
- color: #c8c7c6;
- margin-right: 17.54rpx;
- }
-
- input {
- width: 80%;
- }
- }
-
- .search_btn {
- width: 106rpx;
- height: 60rpx;
- line-height: 60rpx;
- background: #40AE36;
- border-radius: 100px;
- font-size: 28rpx;
- color: #fff;
- }
- }
- }
-
- .category {
- position: relative;
- width: 100%;
- overflow: auto;
- margin-bottom: 20rpx;
- padding-right: 70rpx;
-
- .category-wrap {
- display: flex;
- padding-bottom: 20rpx;
-
- .category-item {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-right: 38rpx;
-
- text {
- margin-top: 16rpx;
- font-size: 24rpx;
- color: #666666;
- white-space: nowrap;
- }
-
- .category-item-text {
- width: 120rpx;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .category-item-active {
- position: relative;
-
- .category-item-img {
- border: 2px solid #40AE36;
- border-radius: 50%;
- }
-
- text {
- background-color: #40AE36;
- color: #fff;
- padding: 2rpx 10rpx 6rpx 10rpx;
- border-radius: 50rpx;
- }
- }
- }
-
- .category-all {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- height: 100%;
- background-color: #f3f3f3;
- z-index: 10;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- font-size: 24rpx;
- border-radius: 4rpx;
- width: 70rpx;
- color: #919191;
- }
- }
- }
-
- .popup-wrap {
- background-color: #fff;
- padding: 20rpx;
-
- .popup-wrap-title {
- font-size: 36rpx;
- color: #333;
- font-weight: bold;
- margin-bottom: 20rpx;
- }
-
- .popup-wrap-category {
- width: 100%;
-
- .popup-wrap-category-wrap {
- display: flex;
- flex-wrap: wrap;
-
- .popup-wrap-category-item {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin: 0 20rpx 20rpx 0;
-
- &:nth-child(5n) {
- margin-right: 0;
- }
-
- text {
- margin-top: 16rpx;
- font-size: 24rpx;
- color: #666666;
- white-space: nowrap;
- }
-
- .popup-wrap-category-item-text {
- width: 120rpx;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .popup-wrap-category-item-active {
- position: relative;
-
- .popup-wrap-category-item-img {
- border: 2px solid #40AE36;
- border-radius: 50%;
- }
-
- text {
- background-color: #40AE36;
- color: #fff;
- padding: 2rpx 10rpx 6rpx 10rpx;
- border-radius: 50rpx;
- }
- }
- }
- }
- }
-
- .wholeSale-con {
- margin: 0 20rpx;
- }
-
- .goods_list {
- padding-bottom: 30rpx;
- background-color: #f8fafb;
-
- .goods {
- width: 710rpx;
- height: 200rpx;
- margin: 20rpx auto;
- margin-top: 0;
- background-color: #fff;
- border-radius: 24rpx;
- display: flex;
-
- .avatar {
- height: 160rpx;
- width: 160rpx;
- margin: 20rpx;
- border-radius: 12rpx;
- overflow: hidden;
- position: relative;
- }
-
- .content {
- margin: 20rpx 0;
- width: 500rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .content-head {
- width: 500rpx;
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- font-size: 28rpx;
- color: #333;
-
- .title {
- width: 360rpx;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-
- .content-two {
- display: flex;
- font-size: 24rpx;
- color: #666;
- }
- }
- }
- }
- }
-
- .score {
- display: flex;
- align-items: center;
- font-weight: 500;
- font-size: 24rpx;
- line-height: 1;
- color: #000;
-
- .score-title {
- margin-right: 15rpx;
-
- }
-
- .score_text {
- color: #fd5d2e;
- }
-
- .star {
- position: relative;
- width: 111rpx;
- height: 19rpx;
- margin-right: 10rpx;
- background: url(../../columnGoods/images/star.png) left top/100% 100% no-repeat;
- overflow: hidden;
-
- view {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: url(../../columnGoods/images/star_active.png) left top/111rpx 19rpx no-repeat;
-
- &.star_purple {
- background: url(../../columnGoods/images/star_active_purple.png) left top/111rpx 19rpx no-repeat;
- }
- }
- }
- }
-
- .position-address {
- position: absolute;
- top: 70rpx;
- right: -10rpx;
- z-index: 101;
- width: 250rpx;
- padding: 20rpx;
- padding-top: 30rpx;
- font-size: 26rpx;
- text-align: center;
- border-radius: 10rpx;
- background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/39cd0202404171145486922.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
-
- .icon {
- position: absolute;
- right: 10rpx;
- top: 25rpx;
- }
-
- .btn {
- background-color: #40AE36;
- width: 100%;
- height: 40rpx;
- margin-top: 20rpx;
- border-radius: 40rpx;
- }
- }
-</style>
<template>
<view class="wholeSale">
@@ -741,4 +402,344 @@
},
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+ page {
+ background-color: #f8fafb !important;
+ }
+
+ .wholeSale {
+
+ .wholeSale-header-search-wrap {
+ padding: 30rpx 20rpx 0;
+ background-color: #fff;
+ }
+
+ .wholeSale-header {
+ position: sticky;
+ top: 0;
+ z-index: 90;
+ margin-bottom: 20rpx;
+ background-color: #40AE36;
+ }
+
+ .wholeSale-section {
+ position: sticky;
+ top: calc(82rpx + var(--status-bar-height));
+ padding: 0rpx 20rpx;
+ background-color: #fff;
+ transition: height .5s;
+ overflow: hidden;
+ margin-bottom: 20rpx;
+
+ .wholeSale-nav {
+ display: flex;
+ align-items: center;
+ margin-bottom: 40rpx;
+
+ .icon {
+ margin-right: 20rpx;
+ }
+
+ .search_content {
+ // margin-bottom: 40rpx;
+ flex: 1;
+ height: 70rpx;
+ padding: 2px 2px 2px 21.05rpx;
+ border-radius: 80rpx;
+ background: #EDEFF2;
+ position: relative;
+ box-sizing: border-box;
+
+ .search_content_wrap {
+ width: 100%;
+
+ .icon-sousuo {
+ font-size: 26.32rpx;
+ font-weight: bold;
+ color: #c8c7c6;
+ margin-right: 17.54rpx;
+ }
+
+ input {
+ width: 80%;
+ }
+ }
+
+ .search_btn {
+ width: 106rpx;
+ height: 60rpx;
+ line-height: 60rpx;
+ background: #40AE36;
+ border-radius: 100px;
+ font-size: 28rpx;
+ color: #fff;
+ }
+ }
+ }
+
+ .category {
+ position: relative;
+ width: 100%;
+ overflow: auto;
+ margin-bottom: 20rpx;
+ padding-right: 70rpx;
+
+ .category-wrap {
+ display: flex;
+ padding-bottom: 20rpx;
+
+ .category-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-right: 38rpx;
+
+ text {
+ margin-top: 16rpx;
+ font-size: 24rpx;
+ color: #666666;
+ white-space: nowrap;
+ }
+
+ .category-item-text {
+ width: 120rpx;
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .category-item-active {
+ position: relative;
+
+ .category-item-img {
+ border: 2px solid #40AE36;
+ border-radius: 50%;
+ }
+
+ text {
+ background-color: #40AE36;
+ color: #fff;
+ padding: 2rpx 10rpx 6rpx 10rpx;
+ border-radius: 50rpx;
+ }
+ }
+ }
+
+ .category-all {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 100%;
+ background-color: #f3f3f3;
+ z-index: 10;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-size: 24rpx;
+ border-radius: 4rpx;
+ width: 70rpx;
+ color: #919191;
+ }
+ }
+ }
+
+ .popup-wrap {
+ background-color: #fff;
+ padding: 20rpx;
+
+ .popup-wrap-title {
+ font-size: 36rpx;
+ color: #333;
+ font-weight: bold;
+ margin-bottom: 20rpx;
+ }
+
+ .popup-wrap-category {
+ width: 100%;
+
+ .popup-wrap-category-wrap {
+ display: flex;
+ flex-wrap: wrap;
+
+ .popup-wrap-category-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 20rpx 20rpx 0;
+
+ &:nth-child(5n) {
+ margin-right: 0;
+ }
+
+ text {
+ margin-top: 16rpx;
+ font-size: 24rpx;
+ color: #666666;
+ white-space: nowrap;
+ }
+
+ .popup-wrap-category-item-text {
+ width: 120rpx;
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .popup-wrap-category-item-active {
+ position: relative;
+
+ .popup-wrap-category-item-img {
+ border: 2px solid #40AE36;
+ border-radius: 50%;
+ }
+
+ text {
+ background-color: #40AE36;
+ color: #fff;
+ padding: 2rpx 10rpx 6rpx 10rpx;
+ border-radius: 50rpx;
+ }
+ }
+ }
+ }
+ }
+
+ .wholeSale-con {
+ margin: 0 20rpx;
+ }
+
+ .goods_list {
+ padding-bottom: 30rpx;
+ background-color: #f8fafb;
+
+ .goods {
+ width: 710rpx;
+ height: 200rpx;
+ margin: 20rpx auto;
+ margin-top: 0;
+ background-color: #fff;
+ border-radius: 24rpx;
+ display: flex;
+
+ .avatar {
+ height: 160rpx;
+ width: 160rpx;
+ margin: 20rpx;
+ border-radius: 12rpx;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .content {
+ margin: 20rpx 0;
+ width: 500rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .content-head {
+ width: 500rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ font-size: 28rpx;
+ color: #333;
+
+ .title {
+ width: 360rpx;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .content-two {
+ display: flex;
+ font-size: 24rpx;
+ color: #666;
+ }
+ }
+ }
+ }
+ }
+
+ .score {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+ font-size: 24rpx;
+ line-height: 1;
+ color: #000;
+
+ .score-title {
+ margin-right: 15rpx;
+
+ }
+
+ .score_text {
+ color: #fd5d2e;
+ }
+
+ .star {
+ position: relative;
+ width: 111rpx;
+ height: 19rpx;
+ margin-right: 10rpx;
+ background: url(../../columnGoods/images/star.png) left top/100% 100% no-repeat;
+ overflow: hidden;
+
+ view {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url(../../columnGoods/images/star_active.png) left top/111rpx 19rpx no-repeat;
+
+ &.star_purple {
+ background: url(../../columnGoods/images/star_active_purple.png) left top/111rpx 19rpx no-repeat;
+ }
+ }
+ }
+ }
+
+ .position-address {
+ position: absolute;
+ top: 70rpx;
+ right: -10rpx;
+ z-index: 101;
+ width: 250rpx;
+ padding: 20rpx;
+ padding-top: 30rpx;
+ font-size: 26rpx;
+ text-align: center;
+ border-radius: 10rpx;
+ background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/39cd0202404171145486922.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+
+ .icon {
+ position: absolute;
+ right: 10rpx;
+ top: 25rpx;
+ }
+
+ .btn {
+ background-color: #40AE36;
+ width: 100%;
+ height: 40rpx;
+ margin-top: 20rpx;
+ border-radius: 40rpx;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/pages/cloud_warehouse/specialty/specialty.vue b/pages/cloud_warehouse/specialty/specialty.vue
index a9d585a..385fe77 100644
--- a/pages/cloud_warehouse/specialty/specialty.vue
+++ b/pages/cloud_warehouse/specialty/specialty.vue
@@ -1,214 +1,3 @@
-<style lang="scss" scoped>
- page {
- background-color: #f8fafb !important;
- }
-
- .wholeSale {
-
- .wholeSale-header {
- position: sticky;
- top: 0;
- z-index: 90;
- background-color: #40AE36;
- }
-
- .wholeSale-section {
- position: sticky;
- top: calc(82rpx + var(--status-bar-height));
- padding: 0rpx 20rpx;
- background-color: #fff;
- transition: height .5s;
- overflow: hidden;
- margin-bottom: 20rpx;
- padding-top: 20rpx;
- z-index: 20;
-
- .wholeSale-nav {
- display: flex;
- align-items: center;
- margin-bottom: 40rpx;
-
- .icon {
- margin-right: 20rpx;
- }
-
- .search_content {
- flex: 1;
- height: 70rpx;
- padding: 2px 2px 2px 21.05rpx;
- border-radius: 80rpx;
- background: #EDEFF2;
- position: relative;
- box-sizing: border-box;
-
- .search_content_wrap {
- width: 100%;
-
- .icon-sousuo {
- font-size: 26.32rpx;
- font-weight: bold;
- color: #c8c7c6;
- margin-right: 17.54rpx;
- }
-
- input {
- width: 80%;
- }
- }
-
- .search_btn {
- width: 106rpx;
- height: 60rpx;
- line-height: 60rpx;
- pic: #40AE36;
- border-radius: 100px;
- font-size: 28rpx;
- color: #fff;
- }
- }
- }
-
- .category {
- position: relative;
- width: 100%;
- overflow: auto;
- margin-bottom: 20rpx;
- padding-right: 70rpx;
-
- .category-wrap {
- display: flex;
- padding-bottom: 20rpx;
-
- .category-item {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-right: 38rpx;
-
- text {
- margin-top: 16rpx;
- font-size: 24rpx;
- color: #666666;
- white-space: nowrap;
- }
-
- .category-item-text {
- width: 120rpx;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .category-item-active {
- position: relative;
-
- .category-item-img {
- border: 2px solid #40AE36;
- border-radius: 50%;
- }
-
- text {
- background-color: #40AE36;
- color: #fff;
- padding: 2rpx 10rpx 6rpx 10rpx;
- border-radius: 50rpx;
- }
- }
- }
-
- .category-all {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- height: 100%;
- background-color: #f3f3f3;
- z-index: 10;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- font-size: 24rpx;
- border-radius: 4rpx;
- width: 70rpx;
- color: #919191;
- }
- }
- }
-
- .popup-wrap {
- background-color: #fff;
- padding: 20rpx;
-
- .popup-wrap-title {
- font-size: 36rpx;
- color: #333;
- font-weight: bold;
- margin-bottom: 20rpx;
- }
-
- .popup-wrap-category {
- width: 100%;
-
- .popup-wrap-category-wrap {
- display: flex;
- flex-wrap: wrap;
-
- .popup-wrap-category-item {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin: 0 20rpx 20rpx 0;
-
- &:nth-child(5n) {
- margin-right: 0;
- }
-
- text {
- margin-top: 16rpx;
- font-size: 24rpx;
- color: #666666;
- white-space: nowrap;
- }
-
- .popup-wrap-category-item-text {
- width: 120rpx;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .popup-wrap-category-item-active {
- position: relative;
-
- .popup-wrap-category-item-img {
- border: 2px solid #40AE36;
- border-radius: 50%;
- }
-
- text {
- background-color: #40AE36;
- color: #fff;
- padding: 2rpx 10rpx 6rpx 10rpx;
- border-radius: 50rpx;
- }
- }
- }
- }
- }
-
- .wholeSale-con {
- padding-bottom: 30rpx;
- margin: 0 20rpx;
- }
- }
-</style>
<template>
<view class="wholeSale">
<!-- 适配不同机 -->
@@ -478,4 +267,216 @@
}
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+ page {
+ background-color: #f8fafb !important;
+ }
+
+ .wholeSale {
+
+ .wholeSale-header {
+ position: sticky;
+ top: 0;
+ z-index: 90;
+ background-color: #40AE36;
+ }
+
+ .wholeSale-section {
+ position: sticky;
+ top: calc(82rpx + var(--status-bar-height));
+ padding: 0rpx 20rpx;
+ background-color: #fff;
+ transition: height .5s;
+ overflow: hidden;
+ margin-bottom: 20rpx;
+ padding-top: 20rpx;
+ z-index: 20;
+
+ .wholeSale-nav {
+ display: flex;
+ align-items: center;
+ margin-bottom: 40rpx;
+
+ .icon {
+ margin-right: 20rpx;
+ }
+
+ .search_content {
+ flex: 1;
+ height: 70rpx;
+ padding: 2px 2px 2px 21.05rpx;
+ border-radius: 80rpx;
+ background: #EDEFF2;
+ position: relative;
+ box-sizing: border-box;
+
+ .search_content_wrap {
+ width: 100%;
+
+ .icon-sousuo {
+ font-size: 26.32rpx;
+ font-weight: bold;
+ color: #c8c7c6;
+ margin-right: 17.54rpx;
+ }
+
+ input {
+ width: 80%;
+ }
+ }
+
+ .search_btn {
+ width: 106rpx;
+ height: 60rpx;
+ line-height: 60rpx;
+ pic: #40AE36;
+ border-radius: 100px;
+ font-size: 28rpx;
+ color: #fff;
+ }
+ }
+ }
+
+ .category {
+ position: relative;
+ width: 100%;
+ overflow: auto;
+ margin-bottom: 20rpx;
+ padding-right: 70rpx;
+
+ .category-wrap {
+ display: flex;
+ padding-bottom: 20rpx;
+
+ .category-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-right: 38rpx;
+
+ text {
+ margin-top: 16rpx;
+ font-size: 24rpx;
+ color: #666666;
+ white-space: nowrap;
+ }
+
+ .category-item-text {
+ width: 120rpx;
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .category-item-active {
+ position: relative;
+
+ .category-item-img {
+ border: 2px solid #40AE36;
+ border-radius: 50%;
+ }
+
+ text {
+ background-color: #40AE36;
+ color: #fff;
+ padding: 2rpx 10rpx 6rpx 10rpx;
+ border-radius: 50rpx;
+ }
+ }
+ }
+
+ .category-all {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 100%;
+ background-color: #f3f3f3;
+ z-index: 10;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-size: 24rpx;
+ border-radius: 4rpx;
+ width: 70rpx;
+ color: #919191;
+ }
+ }
+ }
+
+ .popup-wrap {
+ background-color: #fff;
+ padding: 20rpx;
+
+ .popup-wrap-title {
+ font-size: 36rpx;
+ color: #333;
+ font-weight: bold;
+ margin-bottom: 20rpx;
+ }
+
+ .popup-wrap-category {
+ width: 100%;
+
+ .popup-wrap-category-wrap {
+ display: flex;
+ flex-wrap: wrap;
+
+ .popup-wrap-category-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 20rpx 20rpx 0;
+
+ &:nth-child(5n) {
+ margin-right: 0;
+ }
+
+ text {
+ margin-top: 16rpx;
+ font-size: 24rpx;
+ color: #666666;
+ white-space: nowrap;
+ }
+
+ .popup-wrap-category-item-text {
+ width: 120rpx;
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .popup-wrap-category-item-active {
+ position: relative;
+
+ .popup-wrap-category-item-img {
+ border: 2px solid #40AE36;
+ border-radius: 50%;
+ }
+
+ text {
+ background-color: #40AE36;
+ color: #fff;
+ padding: 2rpx 10rpx 6rpx 10rpx;
+ border-radius: 50rpx;
+ }
+ }
+ }
+ }
+ }
+
+ .wholeSale-con {
+ padding-bottom: 30rpx;
+ margin: 0 20rpx;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 09b9bf6..f47bf45 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -42,16 +42,16 @@
<!-- 首页推荐 -->
<view v-if="recommend_switch == 1" class="index-product-wrapper">
<!-- 首发新品 -->
- <recommend ref="recommendRef" :hostProduct="hostProduct[hostIndex]"
+ <recommend ref="recommendRef" :hostProduct="hostProduct" :loadTitle="hotTitle"
@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading">
</recommend>
- <view class="loadingicon acea-row row-center-wrapper"
+ <!-- <view class="loadingicon acea-row row-center-wrapper"
v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }}
- </view>
+ </view> -->
</view>
</view>
<view v-show="navIndex == 0" class="loadingicon acea-row row-center-wrapper"
@@ -111,12 +111,12 @@
@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading">
</recommend>
- <view class="loadingicon acea-row row-center-wrapper"
+ <!-- <view class="loadingicon acea-row row-center-wrapper"
v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }}
- </view>
+ </view> -->
</view>
</view>
<view class="loadingicon acea-row row-center-wrapper"
@@ -345,7 +345,7 @@
setVisit,
spread
} from '@/api/user.js';
- import recommend from '@/components/recommend';
+ import recommend from '@/components/recommend/';
import card from './component/card';
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
@@ -490,12 +490,15 @@
[],
[]
],
+ hotPageArr: [1, 1, 1, 1],
+ hotScrollArr: [true, true, true, true],
hostIndex: 0,
hotPage: 1,
hotLimit: 20,
hotScroll: true,
hotLoading: [false, false, false, false],
hotTitle: '加载更多',
+ hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
// #ifdef MP || APP-PLUS
isFixed: false,
// #endif
@@ -586,6 +589,15 @@
selectedIconPath: "/static/tabbar_icon/a-a.png"
})
}
+
+ this.$util.getDom(this, '.tabs', (res) => {
+ console.log(res.top);
+ if (86 >= res.top) {
+ this.$refs.recommendRef.parentPageScroll(true);
+ } else {
+ this.$refs.recommendRef.parentPageScroll(false);
+ }
+ })
},
/**
@@ -679,12 +691,15 @@
// that.overflow = true;
// #ifdef APP-PLUS
setTimeout(() => {
- this.hotPage = 1;
- this.hotScroll = true;
- let hostList = this.hostProduct;
- hostList[this.hostIndex] = [];
- this.$set(this, 'hostProduct', hostList);
- this.loadGoods(this.hostIndex + 1);
+ this.hotPageArr[this.hostIndex] = 1;
+ this.hotScrollArr[this.hostIndex] = true;
+
+ // this.hotPage = 1;
+ // this.hotScroll = true;
+ // let hostList = this.hostProduct;
+ // hostList[this.hostIndex] = [];
+ // this.$set(this, 'hostProduct', hostList);
+ this.loadGoods(this.hostIndex);
}, 50)
// #endif
},
@@ -1082,27 +1097,30 @@
});
},
/**
- * 点击组件选项卡
+ * 点击组件选项卡 e
*/
changeRecommedTab(e) {
- this.hotPage = 1;
- this.hotScroll = true;
- this.hostIndex = e - 1;
- let hostList = this.hostProduct;
- hostList[e - 1] = [];
- this.$set(this, 'hostProduct', hostList);
+ // this.hotPage = 1;
+ // this.hotScroll = true;
+ // this.hostIndex = e - 1;
+ this.hotPageArr[e] = 1;
+ this.hotScrollArr[e] = true;
+ this.hostIndex = e;
+ // let hostList = this.hostProduct;
+ // hostList[e - 1] = [];
+ // this.$set(this, 'hostProduct', hostList);
this.loadGoods(e);
},
- loadGoods(e = 1) {
+ loadGoods(e = 0) {
this.$nextTick(() => {
- if (e == 1) return this.get_host_product(0);
- if (e == 2) return this.get_host_home({
+ if (e == 0) return this.get_host_product(0);
+ if (e == 1) return this.get_host_home({
mer_type: 1
}, 1);
- if (e == 3) return this.get_host_home({
+ if (e == 2) return this.get_host_home({
mer_type: 2
}, 2);
- if (e == 4) return this.get_host_home({
+ if (e == 3) return this.get_host_home({
mer_type: 3
}, 3);
})
@@ -1112,7 +1130,6 @@
*/
get_host_product: function(e = 0) {
let that = this;
- let num = that.hotLimit;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
@@ -1142,7 +1159,6 @@
*/
get_host_home: function(query = {}, e = 1) {
let that = this;
- let num = that.hotLimit;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
that.hotLoading[e] = true;
@@ -1273,9 +1289,22 @@
},
// 滚动到底部
onReachBottom() {
+
+ // this.$util.getDom(this, '.tabs', (res) => {
+
+ // if () == res.top) {
+ // this.$refs.recommendRef.parentPageScroll(true);
+ // } else {
+ // this.$refs.recommendRef.parentPageScroll(false);
+ // }
+ // this.scrollTop = res.top;
+ // })
+
+ return;
+ console.log(12312);
if (this.recommend_switch == 1 && this.navIndex == 0) {
// 首页加载更多
- this.loadGoods(this.$refs.recommendRef.currTabs || 1);
+ this.loadGoods(this.$refs.recommendRef.currTabs || 0);
} else if (this.navIndex == 1) {
// 分类栏目加载更多
if (this.sortProduct.length > 0) {
diff --git a/pages/whole_sale/index.vue b/pages/whole_sale/index.vue
index 5980cbb..6abd3ff 100644
--- a/pages/whole_sale/index.vue
+++ b/pages/whole_sale/index.vue
@@ -19,7 +19,7 @@
</scroll-view>
</view>
- <view class="wholeSale-header-search-wrap">
+ <view class="wholeSale-header-search-wrap" :style="{height:wrapHeight + 'rpx'}">
<u-subsection v-if="tabsCurr==2" :list="subList" @change="changeSub" :current="subCurr"
mode="subsection" activeColor="#40ae36" fontSize="14" style="margin-bottom: 24rpx;"></u-subsection>
@@ -136,67 +136,72 @@
</view>
</view>
- <!-- 内容 style="padding-top: calc(var(--status-bar-height) + 120rpx);" -->
- <view class="wholeSale-con">
+ <!-- 内容 -->
+ <view class="wholeSale-con"
+ :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}">
+ <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
+ @scrolltoupper="scrolltoupper" :refresher-threshold="0">
+ <!-- 流水瀑布 -->
+ <WaterfallsFlow v-if="subCurr!=1 || (subCurr==1 && tabsCurr!=2)" :wfList='hostProduct'
+ @itemTap="goDetail" :type="0" :sale_type="2" />
- <!-- 流水瀑布 -->
- <WaterfallsFlow v-if="subCurr!=1 || (subCurr==1 && tabsCurr!=2)" :wfList='hostProduct' @itemTap="goDetail"
- :type="0" :sale_type="2" />
-
- <!-- 列表 -->
- <view class="goods_list" v-else>
- <view class="goods" v-for="(item, index) in shopList" :key="index" @click="goStore(item.mer_id)">
- <view class="avatar">
- <u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill">
- <template v-slot:loading>
- <u-loading-icon color="#999" size="15" />
- </template>
- </u--image>
- </view>
- <view class="content">
- <view class="content-head">
- <view class="title">{{item.mer_name}}</view>
- <text style="font-size: 21.03rpx;color: #aaa;"
- v-if="item.sales>=100">月销{{item.sales}}</text>
+ <!-- 列表 -->
+ <view class="goods_list" v-else>
+ <view class="goods" v-for="(item, index) in shopList" :key="index" @click="goStore(item.mer_id)">
+ <view class="avatar">
+ <u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill">
+ <template v-slot:loading>
+ <u-loading-icon color="#999" size="15" />
+ </template>
+ </u--image>
</view>
- <view class="content-two">
- <view class="score">
- <view class="star">
- <view
- :style="{width: `${(item.service_score / 5 * 100).toFixed(0)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}">
+ <view class="content">
+ <view class="content-head">
+ <view class="title">{{item.mer_name}}</view>
+ <text style="font-size: 21.03rpx;color: #aaa;"
+ v-if="item.sales>=100">月销{{item.sales}}</text>
+ </view>
+ <view class="content-two">
+ <view class="score">
+ <view class="star">
+ <view
+ :style="{width: `${(item.service_score / 5 * 100).toFixed(0)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}">
+ </view>
</view>
</view>
- </view>
- <text
- style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text>
- <text v-if="item.distance"
- style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
+ <text
+ style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text>
+ <text v-if="item.distance"
+ style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
- <text style="margin-left: 20rpx;" class="line1">{{item.category_name}}</text>
- </view>
- <view class="content-two">
- <u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
- height="33.85rpx"></u--image>
- <text> {{item.service_phone}}</text>
- <u--image style="margin-left: 28rpx;" v-if="item.mer_take_time" :showLoading="true"
- src="/static/images/GXSC/SJ.png" width="33.85rpx" height="33.85rpx"></u--image>
- <text v-if="item.mer_take_time">{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
- </view>
- <view class="content-two">
- <u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
- height="33.85rpx"></u--image>
- <text class="address">{{item.mer_address}}</text>
+ <text style="margin-left: 20rpx;" class="line1">{{item.category_name}}</text>
+ </view>
+ <view class="content-two">
+ <u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
+ height="33.85rpx"></u--image>
+ <text> {{item.service_phone}}</text>
+ <u--image style="margin-left: 28rpx;" v-if="item.mer_take_time" :showLoading="true"
+ src="/static/images/GXSC/SJ.png" width="33.85rpx" height="33.85rpx"></u--image>
+ <text
+ v-if="item.mer_take_time">{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
+ </view>
+ <view class="content-two">
+ <u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
+ height="33.85rpx"></u--image>
+ <text class="address">{{item.mer_address}}</text>
+ </view>
</view>
</view>
</view>
- </view>
- <loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0" style="padding: 40rpx 0 150rpx; 0">
- </loadmore>
- <view class='pictrue' v-if="!isLoading && hostProduct.length == 0">
- <image :src="`${domain}/static/images/noCart.png`"></image>
- <view>暂无商品，看点别的吧</view>
- </view>
+ <loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0"
+ style="padding: 40rpx 0 150rpx; 0">
+ </loadmore>
+ <view class='pictrue' v-if="!isLoading && hostProduct.length == 0">
+ <image :src="`${domain}/static/images/noCart.png`"></image>
+ <view>暂无商品，看点别的吧</view>
+ </view>
+ </scroll-view>
</view>
<!-- 弹框大分类 -->
@@ -230,18 +235,6 @@
</block>
</view>
</block>
- <!-- <block v-for="(item,index) in store_category" :key="index">
- <view class="popup-wrap-category-item" :class="{'category-item-active': index==cate_change}"
- @click="changeCate(index)">
- <u--image class="popup-wrap-category-item-img" width="108rpx" :src="item.pic"
- height="108rpx" shape="circle">
- <template v-slot:loading>
- <u-loading-icon color="#999" size="15" />
- </template>
- </u--image>
- <text class="popup-wrap-category-item-text">{{item.cate_name}}</text>
- </view>
- </block> -->
</view>
</view>
</view>
@@ -327,6 +320,9 @@
bigTypeDomInfo: null,
smallTypeDomInfo: null,
categoryWrapHeight: 0,
+ wrapHeight: 332,
+ isShowSmall: false,
+ scrollTop: 0,
}
},
computed: {
@@ -372,24 +368,49 @@
})
}
},
- onPullDownRefresh() {
- this.initData(true, true);
- },
- onReachBottom() {
- this.initData(false, true);
- },
- onReady() {
- // 获取dom信息
- // this.$util.getDom(this, '.category', (res) => {
- // this.bigTypeDomInfo = res;
- // this.categoryWrapHeight = res.height;
- // });
+ // onPullDownRefresh() {
+ // this.initData(true, true);
+ // },
+ // onReachBottom() {
+ // this.initData(false, true);
+ // },
+
+ watch: {
+ 'where.cate_pid'(newVal, oldVal) {
+ if (newVal && !oldVal) {
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : (332 + 48);
+ this.isShowSmall = true;
+ }
+ if (!newVal && oldVal) {
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : 332;
+ this.isShowSmall = false;
+ }
+ }
},
+
methods: {
onAllCategory() {
this.$refs.popup.open();
},
+ scrolltoupper() {
+ this.initData(true, true);
+ },
+
+ onScrollBottom(e) {
+ this.initData(false, true);
+ },
+
+ onScroll(e) {
+ if (this.scrollTop >= e.target.scrollTop) { //上拉
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : 332;
+ if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
+ } else {
+ this.wrapHeight = 0;
+ }
+ this.scrollTop = e.target.scrollTop;
+ },
+
initData(re = false, stop = false) {
if (!stop) this.getStoreCategory();
if (this.tabsCurr == 2 && this.subCurr == 1) this.storeMerchantList(re, stop);
@@ -460,6 +481,7 @@
this.cate_change = 0;
this.cate_change_children = 0;
if (this.tabsCurr != 2 || (this.tabsCurr == 2 && this.subCurr != 1)) this.where.mer_type = e;
+ this.wrapHeight = this.tabsCurr == 2 ? 400 : this.where.cate_pid ? (332 + 48) : 332;
this.initData(true);
},
changeCate(e) {
@@ -612,6 +634,10 @@
}
.wholeSale-header-search-wrap {
+ position: sticky;
+ top: calc(82rpx + var(--status-bar-height));
+ transition: height .5s;
+ overflow: hidden;
padding: 30rpx 20rpx 0;
background-color: #fff;
}
@@ -688,14 +714,9 @@
}
}
- .category_wrap {
- overflow: hidden;
- }
-
.category {
width: 100%;
overflow: auto;
- margin-bottom: 20rpx;
position: relative;
padding-right: 70rpx;
@@ -908,7 +929,6 @@
.goods_list {
.goods {
- // width: 690rpx;
height: 200rpx;
margin: 20rpx auto;
margin-top: 0;
diff --git a/static/images/loading.gif b/static/images/loading.gif
new file mode 100644
index 0000000..5e1f8fa
Binary files /dev/null and b/static/images/loading.gif differ