mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
1154079537 2024-05-13 17:23:05 +08:00
parent 71523744c6
commit 0094d1fe79
9 changed files with 1065 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/customTab.vue
View File

@ -3,8 +3,7 @@
<view v-if="newData.status && newData.status.status" style="height: 100rpx;"></view> <view v-if="newData.status && newData.status.status" style="height: 100rpx;"></view>
<view class="foot" v-if="newData.status && newData.status.status"> <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="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" <view class="foot-item" v-for="(item,index) in newData.menuList" :key="index" @click="goRouter(item)">
@click="goRouter(item)">
<block v-if="item.link == activeRouter"> <block v-if="item.link == activeRouter">
<image :src="item.imgList[0]"></image> <image :src="item.imgList[0]"></image>
<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}} <view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
@ -30,7 +29,7 @@
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com> // | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
export default{ export default {
props: { props: {
newData: { newData: {
type: Object, type: Object,
@ -41,7 +40,7 @@
default: '', default: '',
} }
}, },
data(){ data() {
return { return {
} }
@ -49,7 +48,7 @@
mounted() { mounted() {
}, },
methods:{ methods: {
goRouter(item) { goRouter(item) {
var pages = getCurrentPages(); var pages = getCurrentPages();
var page = (pages[pages.length - 1]).$page.fullPath; var page = (pages[pages.length - 1]).$page.fullPath;
@ -65,7 +64,6 @@
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -85,9 +83,11 @@
box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32); box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/ padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/ padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
&.filter{
&.filter {
filter: blur(2rpx); filter: blur(2rpx);
} }
.foot-item { .foot-item {
display: flex; display: flex;
width: max-content; width: max-content;
@ -95,6 +95,7 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.count-num { .count-num {
position: absolute; position: absolute;
display: flex; display: flex;
@ -111,12 +112,14 @@
padding: 4rpx; padding: 4rpx;
} }
} }
.foot-item image { .foot-item image {
height: 50rpx; height: 50rpx;
width: 50rpx; width: 50rpx;
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
} }
.foot-item .txt { .foot-item .txt {
font-size: 24rpx; font-size: 24rpx;
} }

272
components/easy-loadimage/easy-loadimage.vue
View File

@ -1,56 +1,63 @@
<template> <template>
<view class="easy-loadimage" :id="uid"> <view class="easy-loadimage" :id="uid">
<image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg" <image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg"
:class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}" :class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
@load="handleImgLoad" @error="handleImgError"> @load="handleImgLoad" @error="handleImgError">
</image> </image>
<view class="loadfail-img" v-else-if="isLoadError" :style="{ 'background-image': `url(${domain}/static/images/loadfail.png)`}"></view> <view class="loadfail-img" v-else-if="isLoadError"
<view :class="['loading-img','spin-circle',loadingMode]" v-show="!showImg&&!isLoadError" :style="{ 'background-image': `url(${domain}/static/images/loading.gif)`}"></view> :style="{ 'background-image': `url(${domain}/static/easy-loadimage/loadfail.png)`}"></view>
</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> </template>
<script> <script>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ] // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved. // | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com> // | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------- // +----------------------------------------------------------------------
import { throttle } from '@/libs/uniApi'; import {
import { HTTP_REQUEST_URL } from '@/config/app'; throttle
// 生成全局唯一id } from '@/libs/uniApi';
function generateUUID() { import {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { HTTP_REQUEST_URL
        let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); } from '@/config/app';
        return v.toString(16); // 生成全局唯一id
    }) function generateUUID() {
} return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
export default{ let r = Math.random() * 16 | 0,
props:{ v = c == 'x' ? r : (r & 0x3 | 0x8);
imageSrc:{ return v.toString(16);
})
}
export default {
props: {
imageSrc: {
type: String, type: String,
}, },
mode:{ mode: {
type: String, type: String,
}, },
loadingMode:{ loadingMode: {
type: String, type: String,
default:'looming-gray' default: 'looming-gray'
}, },
openTransition:{ openTransition: {
type: Boolean, type: Boolean,
default:true, default: true,
}, },
viewHeight:{ viewHeight: {
type:Number, type: Number,
default() { default () {
return uni.getSystemInfoSync().windowHeight; return uni.getSystemInfoSync().windowHeight;
} }
} }
}, },
data(){ data() {
const that = this; const that = this;
return { return {
domain: HTTP_REQUEST_URL, domain: HTTP_REQUEST_URL,
@ -65,7 +72,7 @@ export default{
if (that.loadImg || that.isLoadError) return; if (that.loadImg || that.isLoadError) return;
const id = that.uid const id = that.uid
const query = uni.createSelectorQuery().in(that); const query = uni.createSelectorQuery().in(that);
let t = 0; let t = 0;
query.select('#' + id).boundingClientRect(data => { query.select('#' + id).boundingClientRect(data => {
if (!data) return; if (!data) return;
if (data.top - that.viewHeight < 0) { if (data.top - that.viewHeight < 0) {
@ -75,15 +82,15 @@ export default{
}).exec() }).exec()
}, 200) }, 200)
} }
}, },
methods:{ methods: {
init() { init() {
this.$nextTick(this.onScroll) this.$nextTick(this.onScroll)
}, },
handleBorderLoad(){ handleBorderLoad() {
this.borderLoaded = 1; this.borderLoaded = 1;
}, },
handleBorderError(){ handleBorderError() {
this.borderLoaded = 2; this.borderLoaded = 2;
}, },
handleImgLoad(e) { handleImgLoad(e) {
@ -98,88 +105,107 @@ export default{
onScroll() { onScroll() {
this.scrollFn(); this.scrollFn();
}, },
}, },
mounted() { mounted() {
this.init() this.init()
uni.$on('scroll', this.scrollFn); uni.$on('scroll', this.scrollFn);
this.onScroll(); this.onScroll();
}, },
beforeDestroy() { beforeDestroy() {
uni.$off('scroll', this.scrollFn); uni.$off('scroll', this.scrollFn);
} }
} }
</script> </script>
<style scoped> <style scoped>
/* 官方优化图片tips */ /* 官方优化图片tips */
image{ image {
will-change: transform 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>
/* 渐变过渡效果处理 */
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>

210
components/recommend/index.vue
View File

@ -46,6 +46,7 @@
里海新闻</view> 里海新闻</view>
<view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view> <view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
</view> </view>
<view class="information" v-if="showTab&&list.length>0"> <view class="information" v-if="showTab&&list.length>0">
<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;"> <scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
<view class="nav-item" style="display: inline-block;margin-right: 16rpx;" <view class="nav-item" style="display: inline-block;margin-right: 16rpx;"
@ -65,22 +66,43 @@
<!-- tab导航 --> <!-- tab导航 -->
<view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}"> <view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}">
<block v-for="(item,indx) in tabsArr" :key="indx"> <block v-for="(item,indx) in tabsArr" :key="indx">
<view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view> <!-- <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 :class="{'tabs-item-active':indx==currTabIndex}" class="tabs-item" @click="changeTab(indx)">
<view class="tabs-item-main">{{item.name}}</view> <view class="tabs-item-main">{{item.name}}</view>
<view class="tabs-item-sub">{{item.desc}}</view> <view class="tabs-item-sub">{{item.desc}}</view>
</view> </view>
</block> </block>
</view> </view>
<view class='recommendList' :class="indexP?'on':''"> <!-- 滑动 49 55 var(--status-bar-height)-->
<WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0" <swiper :indicator-dots="false" :autoplay="false" :duration="0" :current="currTabIndex" @change="changeTab"
:sale_type="sale_type" /> :style="{height:'calc(100vh - 98rpx - 110rpx - 108rpx - var(--status-bar-height))'}">
<view class='pictrue' v-if="!loading&&hostProduct.length==0"> <swiper-item v-for="(item,indx) in tabsArr" :key="indx">
<image :src="`${domain}/static/images/noCart.png`"></image> <scroll-view style="height: 100%;" :scroll-y="scrollY" @scroll="onscroll"
<view>暂无商品，看点别的吧</view> @scrolltolower="onScrollBottom" @scrolltoupper="onScrollTop">
</view> <view class='recommendList' :class="indexP?'on':''">
</view> <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> </view>
</template> </template>
@ -107,18 +129,27 @@
import { import {
Toast Toast
} from "../../libs/uniApi"; } from "../../libs/uniApi";
import {
getProductslist,
getProductHot,
storeCategory
} from '@/api/store.js';
export default { export default {
components: { components: {
WaterfallsFlow WaterfallsFlow
}, },
computed: mapGetters(['uid']), computed: mapGetters(['uid']),
props: { props: {
hostProduct: { // hostProduct: {
type: Array, // type: Array,
default: function() { // default: function() {
return []; // return [];
} // }
}, // },
// loadTitle: {
// type: String,
// default: '加载更多...'
// },
showTab: { showTab: {
type: Boolean, type: Boolean,
default: false default: false
@ -160,18 +191,153 @@
desc: '特色农副', desc: '特色农副',
val: 4 val: 4
}], }],
currTabs: 1, currTabIndex: 0,
list: [] 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() { mounted() {
this.getArticleList(); this.getArticleList();
// 初始化
this.loadGoods(0);
}, },
methods: { methods: {
changeTab(e) { // 父页面滚动
this.currTabs = e; parentPageScroll(boolean) {
this.$emit('changeRecommedTab', e) 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) { navTo(url) {
uni.navigateTo({ uni.navigateTo({
url: url, url: url,
@ -180,6 +346,7 @@
} }
}) })
}, },
getArticleList() { getArticleList() {
getArticleList(20, { getArticleList(20, {
page: 1, page: 1,
@ -188,6 +355,7 @@
this.list = res.data.list; this.list = res.data.list;
}) })
}, },
goDetail(item) { goDetail(item) {
goShopDetail(item, this.uid).then(res => { goShopDetail(item, this.uid).then(res => {
if (this.isLogin) { if (this.isLogin) {

2
pages.json
View File

@ -25,7 +25,7 @@
}, { }, {
"path": "pages/whole_sale/index", "path": "pages/whole_sale/index",
"style": { "style": {
"enablePullDownRefresh": true, "enablePullDownRefresh": false,
"navigationBarTitleText": "批发", "navigationBarTitleText": "批发",
"navigationStyle": "custom" "navigationStyle": "custom"
} }

679
pages/cloud_warehouse/market/market.vue
View File

@ -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> <template>
<view class="wholeSale"> <view class="wholeSale">
@ -742,3 +403,343 @@
} }
} }
</script> </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>

423
pages/cloud_warehouse/specialty/specialty.vue
View File

@ -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> <template>
<view class="wholeSale"> <view class="wholeSale">
<!-- 适配不同机 --> <!-- 适配不同机 -->
@ -479,3 +268,215 @@
} }
} }
</script> </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>

83
pages/index/index.vue
View File

@ -42,16 +42,16 @@
<!-- 首页推荐 --> <!-- 首页推荐 -->
<view v-if="recommend_switch == 1" class="index-product-wrapper"> <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" @changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading"> :loading="loading">
</recommend> </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]"> v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai" <text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text> :hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }} {{ hotTitle }}
</view> </view> -->
</view> </view>
</view> </view>
<view v-show="navIndex == 0" class="loadingicon acea-row row-center-wrapper" <view v-show="navIndex == 0" class="loadingicon acea-row row-center-wrapper"
@ -111,12 +111,12 @@
@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin" @changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading"> :loading="loading">
</recommend> </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]"> v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai" <text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text> :hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }} {{ hotTitle }}
</view> </view> -->
</view> </view>
</view> </view>
<view class="loadingicon acea-row row-center-wrapper" <view class="loadingicon acea-row row-center-wrapper"
@ -345,7 +345,7 @@
setVisit, setVisit,
spread spread
} from '@/api/user.js'; } from '@/api/user.js';
import recommend from '@/components/recommend'; import recommend from '@/components/recommend/';
import card from './component/card'; import card from './component/card';
// #ifndef H5 // #ifndef H5
import passwordPopup from '@/components/passwordPopup'; import passwordPopup from '@/components/passwordPopup';
@ -490,12 +490,15 @@
[], [],
[] []
], ],
hotPageArr: [1, 1, 1, 1],
hotScrollArr: [true, true, true, true],
hostIndex: 0, hostIndex: 0,
hotPage: 1, hotPage: 1,
hotLimit: 20, hotLimit: 20,
hotScroll: true, hotScroll: true,
hotLoading: [false, false, false, false], hotLoading: [false, false, false, false],
hotTitle: '加载更多', hotTitle: '加载更多',
hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
// #ifdef MP || APP-PLUS // #ifdef MP || APP-PLUS
isFixed: false, isFixed: false,
// #endif // #endif
@ -586,6 +589,15 @@
selectedIconPath: "/static/tabbar_icon/a-a.png" 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; // that.overflow = true;
// #ifdef APP-PLUS // #ifdef APP-PLUS
setTimeout(() => { setTimeout(() => {
this.hotPage = 1; this.hotPageArr[this.hostIndex] = 1;
this.hotScroll = true; this.hotScrollArr[this.hostIndex] = true;
let hostList = this.hostProduct;
hostList[this.hostIndex] = []; // this.hotPage = 1;
this.$set(this, 'hostProduct', hostList); // this.hotScroll = true;
this.loadGoods(this.hostIndex + 1); // let hostList = this.hostProduct;
// hostList[this.hostIndex] = [];
// this.$set(this, 'hostProduct', hostList);
this.loadGoods(this.hostIndex);
}, 50) }, 50)
// #endif // #endif
}, },
@ -1082,27 +1097,30 @@
}); });
}, },
/** /**
* 点击组件选项卡 * 点击组件选项卡 e
*/ */
changeRecommedTab(e) { changeRecommedTab(e) {
this.hotPage = 1; // this.hotPage = 1;
this.hotScroll = true; // this.hotScroll = true;
this.hostIndex = e - 1; // this.hostIndex = e - 1;
let hostList = this.hostProduct; this.hotPageArr[e] = 1;
hostList[e - 1] = []; this.hotScrollArr[e] = true;
this.$set(this, 'hostProduct', hostList); this.hostIndex = e;
// let hostList = this.hostProduct;
// hostList[e - 1] = [];
// this.$set(this, 'hostProduct', hostList);
this.loadGoods(e); this.loadGoods(e);
}, },
loadGoods(e = 1) { loadGoods(e = 0) {
this.$nextTick(() => { this.$nextTick(() => {
if (e == 1) return this.get_host_product(0); if (e == 0) return this.get_host_product(0);
if (e == 2) return this.get_host_home({ if (e == 1) return this.get_host_home({
mer_type: 1 mer_type: 1
}, 1); }, 1);
if (e == 3) return this.get_host_home({ if (e == 2) return this.get_host_home({
mer_type: 2 mer_type: 2
}, 2); }, 2);
if (e == 4) return this.get_host_home({ if (e == 3) return this.get_host_home({
mer_type: 3 mer_type: 3
}, 3); }, 3);
}) })
@ -1112,7 +1130,6 @@
*/ */
get_host_product: function(e = 0) { get_host_product: function(e = 0) {
let that = this; let that = this;
let num = that.hotLimit;
if (!that.hotScroll) return; if (!that.hotScroll) return;
if (that.hotLoading[e]) return; if (that.hotLoading[e]) return;
@ -1142,7 +1159,6 @@
*/ */
get_host_home: function(query = {}, e = 1) { get_host_home: function(query = {}, e = 1) {
let that = this; let that = this;
let num = that.hotLimit;
if (!that.hotScroll) return; if (!that.hotScroll) return;
if (that.hotLoading[e]) return; if (that.hotLoading[e]) return;
that.hotLoading[e] = true; that.hotLoading[e] = true;
@ -1273,9 +1289,22 @@
}, },
// 滚动到底部 // 滚动到底部
onReachBottom() { 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) { 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) { } else if (this.navIndex == 1) {
// 分类栏目加载更多 // 分类栏目加载更多
if (this.sortProduct.length > 0) { if (this.sortProduct.length > 0) {

186
pages/whole_sale/index.vue
View File

@ -19,7 +19,7 @@
</scroll-view> </scroll-view>
</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" <u-subsection v-if="tabsCurr==2" :list="subList" @change="changeSub" :current="subCurr"
mode="subsection" activeColor="#40ae36" fontSize="14" style="margin-bottom: 24rpx;"></u-subsection> mode="subsection" activeColor="#40ae36" fontSize="14" style="margin-bottom: 24rpx;"></u-subsection>
@ -136,67 +136,72 @@
</view> </view>
</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" <view class="goods_list" v-else>
:type="0" :sale_type="2" /> <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">
<view class="goods_list" v-else> <template v-slot:loading>
<view class="goods" v-for="(item, index) in shopList" :key="index" @click="goStore(item.mer_id)"> <u-loading-icon color="#999" size="15" />
<view class="avatar"> </template>
<u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill"> </u--image>
<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> </view>
<view class="content-two"> <view class="content">
<view class="score"> <view class="content-head">
<view class="star"> <view class="title">{{item.mer_name}}</view>
<view <text style="font-size: 21.03rpx;color: #aaa;"
:style="{width: `${(item.service_score / 5 * 100).toFixed(0)}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}"> 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> </view>
</view> <text
<text style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text>
style="margin-left: 20rpx;color: #FF6D20;font-size: 22.78rpx; ">{{item.service_score}}</text> <text v-if="item.distance"
<text v-if="item.distance" style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
style="margin-left: 20rpx;font-size: 21.03rpx;color: #aaa;">{{item.distance}}</text>
<text style="margin-left: 20rpx;" class="line1">{{item.category_name}}</text> <text style="margin-left: 20rpx;" class="line1">{{item.category_name}}</text>
</view> </view>
<view class="content-two"> <view class="content-two">
<u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx" <u--image :showLoading="true" src="/static/images/GXSC/DH.png" width="33.85rpx"
height="33.85rpx"></u--image> height="33.85rpx"></u--image>
<text> {{item.service_phone}}</text> <text> {{item.service_phone}}</text>
<u--image style="margin-left: 28rpx;" v-if="item.mer_take_time" :showLoading="true" <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> 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> <text
</view> v-if="item.mer_take_time">{{item.mer_take_time[0]}}-{{item.mer_take_time[1]}}</text>
<view class="content-two"> </view>
<u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx" <view class="content-two">
height="33.85rpx"></u--image> <u--image :showLoading="true" src="/static/images/GXSC/DW.png" width="33.85rpx"
<text class="address">{{item.mer_address}}</text> height="33.85rpx"></u--image>
<text class="address">{{item.mer_address}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view>
<loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0" style="padding: 40rpx 0 150rpx; 0"> <loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0"
</loadmore> style="padding: 40rpx 0 150rpx; 0">
<view class='pictrue' v-if="!isLoading && hostProduct.length == 0"> </loadmore>
<image :src="`${domain}/static/images/noCart.png`"></image> <view class='pictrue' v-if="!isLoading && hostProduct.length == 0">
<view>暂无商品，看点别的吧</view> <image :src="`${domain}/static/images/noCart.png`"></image>
</view> <view>暂无商品，看点别的吧</view>
</view>
</scroll-view>
</view> </view>
<!-- 弹框大分类 --> <!-- 弹框大分类 -->
@ -230,18 +235,6 @@
</block> </block>
</view> </view>
</block> </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> </view>
</view> </view>
@ -327,6 +320,9 @@
bigTypeDomInfo: null, bigTypeDomInfo: null,
smallTypeDomInfo: null, smallTypeDomInfo: null,
categoryWrapHeight: 0, categoryWrapHeight: 0,
wrapHeight: 332,
isShowSmall: false,
scrollTop: 0,
} }
}, },
computed: { computed: {
@ -372,24 +368,49 @@
}) })
} }
}, },
onPullDownRefresh() { // onPullDownRefresh() {
this.initData(true, true); // this.initData(true, true);
}, // },
onReachBottom() { // onReachBottom() {
this.initData(false, true); // this.initData(false, true);
}, // },
onReady() {
// 获取dom信息 watch: {
// this.$util.getDom(this, '.category', (res) => { 'where.cate_pid'(newVal, oldVal) {
// this.bigTypeDomInfo = res; if (newVal && !oldVal) {
// this.categoryWrapHeight = res.height; 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: { methods: {
onAllCategory() { onAllCategory() {
this.$refs.popup.open(); 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) { initData(re = false, stop = false) {
if (!stop) this.getStoreCategory(); if (!stop) this.getStoreCategory();
if (this.tabsCurr == 2 && this.subCurr == 1) this.storeMerchantList(re, stop); if (this.tabsCurr == 2 && this.subCurr == 1) this.storeMerchantList(re, stop);
@ -460,6 +481,7 @@
this.cate_change = 0; this.cate_change = 0;
this.cate_change_children = 0; this.cate_change_children = 0;
if (this.tabsCurr != 2 || (this.tabsCurr == 2 && this.subCurr != 1)) this.where.mer_type = e; 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); this.initData(true);
}, },
changeCate(e) { changeCate(e) {
@ -612,6 +634,10 @@
} }
.wholeSale-header-search-wrap { .wholeSale-header-search-wrap {
position: sticky;
top: calc(82rpx + var(--status-bar-height));
transition: height .5s;
overflow: hidden;
padding: 30rpx 20rpx 0; padding: 30rpx 20rpx 0;
background-color: #fff; background-color: #fff;
} }
@ -688,14 +714,9 @@
} }
} }
.category_wrap {
overflow: hidden;
}
.category { .category {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
margin-bottom: 20rpx;
position: relative; position: relative;
padding-right: 70rpx; padding-right: 70rpx;
@ -908,7 +929,6 @@
.goods_list { .goods_list {
.goods { .goods {
// width: 690rpx;
height: 200rpx; height: 200rpx;
margin: 20rpx auto; margin: 20rpx auto;
margin-top: 0; margin-top: 0;

BIN
static/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB