1
This commit is contained in:
1154079537
parent
71523744c6
commit
0094d1fe79
@ -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>
|
||||
@ -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>
|
||||
@ -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) {
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}, {
|
||||
"path": "pages/whole_sale/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarTitleText": "批发",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</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>
|
||||
@ -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>
|
||||
</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>
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
BIN
static/images/loading.gif
Normal file
BIN
static/images/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Loading…
x
Reference in New Issue
Block a user