|
|
|
@ -61,7 +61,7 @@ |
|
|
|
<swiper class="zaixian-swiper" vertical circular :autoplay="orderListWait.length > 1" |
|
|
|
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration"> |
|
|
|
<swiper-item v-for="(item,index) in orderListWait" :key="index"> |
|
|
|
<view> |
|
|
|
<view style="display: flex;"> |
|
|
|
<view class="pintuan-left"> |
|
|
|
<view class="pintuan-left-img"> |
|
|
|
<img :src="item.productPicture" alt=""> |
|
|
|
@ -90,14 +90,11 @@ |
|
|
|
</swiper> |
|
|
|
</view> |
|
|
|
<!-- 分类栏：移到goods-list外层，position:sticky才能生效 --> |
|
|
|
<view class="menu-list" id="menuList" |
|
|
|
:style="{'top': navBarHeight + 'px','background':lastScrollTop>200?'#fff':''}"> |
|
|
|
<view style="display: flex;height: 72%;margin-top: 10px;"> |
|
|
|
<view id="menuList" style="border-right: 1px solid #eee;font-weight: 700;font-size: 14px;"> |
|
|
|
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" |
|
|
|
:style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777'}"> |
|
|
|
<view style="width: 180rpx;">{{item.categoryName}}</view> |
|
|
|
<img v-if="item.checked" class="checked-img" |
|
|
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" |
|
|
|
alt="" /> |
|
|
|
:style="{'border-radius':item.checked?'10px':'','color':item.checked?'rgba(0, 35, 28, 1)':'#777','background':item.checked?'#fff':'','border-right':item.checked?'5px solid #48D1CC;':''}"> |
|
|
|
<view style="width: 160rpx;">{{item.categoryName}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-list"> |
|
|
|
@ -118,6 +115,8 @@ |
|
|
|
<view class="goods-deal1"> |
|
|
|
月售 <text> 100+</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shop-tag1"> |
|
|
|
<view class="goods-tag" @tap.stop="openOrderWait(item)" v-if="item.orderListWait != undefined && item.orderListWait.length > 0"> |
|
|
|
<view class="pintuan-right-img"> |
|
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png" |
|
|
|
@ -129,26 +128,24 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shop-tag1"> |
|
|
|
<text |
|
|
|
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;"> |
|
|
|
{{item.attributeListPrice | sliceMsg1}} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="goods-bottom"> |
|
|
|
|
|
|
|
<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn" style="margin-left: 6%;" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)"> |
|
|
|
拼团购买¥{{ getGroupPrice(item) }} |
|
|
|
</view> |
|
|
|
<view class="goods-btn" v-if="!groupId" @tap="openPopup('xiadan','dandu',item)" |
|
|
|
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);"> |
|
|
|
style="background: rgba(166, 255, 234, 0.3);border: 1px solid rgba(166, 255, 234, 0.5);height:68rpx;"> |
|
|
|
直接购买¥{{item.attributeListPrice | sliceMsg}} |
|
|
|
</view> |
|
|
|
<view v-if="item.productGroupBuyPrices != null && item.isMoreBuy != 1" class="goods-btn" :style="{'float':groupId != ''?'right':''}" @tap="openPopup('xiadan','pintuan',item)"> |
|
|
|
拼团购买¥{{ getGroupPrice(item) }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uni-load-more :status="loadStatus" @change="onChange" /> |
|
|
|
<view style="height: 80px;width: 100%;"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<uni-load-more :status="loadStatus" @change="onChange" /> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 160rpx;"></view> |
|
|
|
<view class="bottom"> |
|
|
|
@ -549,12 +546,6 @@ |
|
|
|
} |
|
|
|
return name; |
|
|
|
}, |
|
|
|
sliceMsg1(val) { |
|
|
|
var name = '正在有' |
|
|
|
let aa = Math.floor(Math.random() * (15 - 5 + 1)) + 1; |
|
|
|
name += aa + '人下单' |
|
|
|
return name; |
|
|
|
}, |
|
|
|
slicePrice(val) { |
|
|
|
let begin = '' |
|
|
|
if (val != null) { |
|
|
|
@ -568,32 +559,6 @@ |
|
|
|
return begin; |
|
|
|
} |
|
|
|
}, |
|
|
|
onPageScroll(e) { |
|
|
|
const scrollTop = e.scrollTop; |
|
|
|
const isScrollingUp = scrollTop < this.lastScrollTop; |
|
|
|
// 向上滑到靠近页面顶部时（背景头图区域），切换到上一个分类 |
|
|
|
// 门槛用 80px：用户需要明确地滑回头部较大区域，避免误触发 |
|
|
|
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) { |
|
|
|
const currIdx = this.menuList.findIndex(m => m.checked); |
|
|
|
if (currIdx > 0) { |
|
|
|
this._switchCategory(currIdx - 1); |
|
|
|
} |
|
|
|
} |
|
|
|
this.lastScrollTop = scrollTop; |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
// 当前分类还有更多页时，继续加载 |
|
|
|
if (this.searchForm.pageNum < this.total) { |
|
|
|
this.searchForm.pageNum++; |
|
|
|
this.getProduct(this.searchForm.categoryId); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 当前分类已是最后一页，自动切换到下一分类 |
|
|
|
const currIdx = this.menuList.findIndex(m => m.checked); |
|
|
|
if (currIdx !== -1 && currIdx < this.menuList.length - 1) { |
|
|
|
this._switchCategory(currIdx + 1); |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
this.type = option.type; |
|
|
|
if (option.groupId) { |
|
|
|
@ -672,17 +637,6 @@ |
|
|
|
|
|
|
|
that.total = res.result.pages; // pages = 总页数 |
|
|
|
that.pageNum = that.searchForm.pageNum; |
|
|
|
// 当前分类没有商品，自动跳过到下一个分类 |
|
|
|
// 注意：这里不能用isSwitching拦戚，因为_switchCategory本身已置 isSwitching=true |
|
|
|
if (res.result.records.length === 0) { |
|
|
|
const currIdx = that.menuList.findIndex(m => m.checked); |
|
|
|
if (currIdx !== -1 && currIdx < that.menuList.length - 1) { |
|
|
|
console.log('000000000000') |
|
|
|
// 重置锁再跳过，防止连锁导致永远跳不过 |
|
|
|
that.isSwitching = false; |
|
|
|
that._switchCategory(currIdx + 1); |
|
|
|
} |
|
|
|
} |
|
|
|
that.$forceUpdate(); |
|
|
|
} else { |
|
|
|
that.tui.toast(res.message); |
|
|
|
@ -711,16 +665,6 @@ |
|
|
|
uni.hideLoading() |
|
|
|
}).catch((res) => {}) |
|
|
|
}, |
|
|
|
// 内部切换方法：带isSwitching保护，防止程序化滚动期间闪回 |
|
|
|
_switchCategory(index) { |
|
|
|
if (this.isSwitching) return; |
|
|
|
this.isSwitching = true; |
|
|
|
this.checkTab(index); |
|
|
|
// 400ms后解除锁（动画200ms，预留200ms缓冲） |
|
|
|
setTimeout(() => { |
|
|
|
this.isSwitching = false; |
|
|
|
}, 400); |
|
|
|
}, |
|
|
|
checkTab(index) { |
|
|
|
for (let i = 0; i < this.menuList.length; i++) { |
|
|
|
this.menuList[i].checked = (i === index); |
|
|
|
@ -731,13 +675,6 @@ |
|
|
|
this.total = 1; |
|
|
|
this.productItem = []; |
|
|
|
this.getProduct(this.menuList[index].id); |
|
|
|
// 滚动到正确位置：分类栏刚好吸顶在nav-bar下方 |
|
|
|
// menuListOffsetTop - navBarHeight 使分类栏正好在sticky位置，首条商品可见 |
|
|
|
const target = this.menuListOffsetTop - this.navBarHeight; |
|
|
|
uni.pageScrollTo({ |
|
|
|
scrollTop: target > 0 ? target : 0, |
|
|
|
duration: 200 |
|
|
|
}); |
|
|
|
}, |
|
|
|
openOrderWait(item){ |
|
|
|
this.chooseWaitType = false |
|
|
|
@ -1284,6 +1221,7 @@ |
|
|
|
height: 100%; |
|
|
|
font-size: 24rpx; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部背景图随页面滚动（不固定） */ |
|
|
|
@ -1335,6 +1273,7 @@ |
|
|
|
margin-top: -150rpx; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
height: 88%; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img { |
|
|
|
@ -1498,9 +1437,8 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.goods-member { |
|
|
|
padding: 20rpx 0; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
margin: 0 0 20rpx; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1509,10 +1447,11 @@ |
|
|
|
height: auto; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin: 0 auto 20rpx; |
|
|
|
overflow: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-top { |
|
|
|
padding: 20rpx 0; |
|
|
|
padding: 20rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1559,7 +1498,7 @@ |
|
|
|
.goods-tag { |
|
|
|
display: flex; |
|
|
|
margin: 0; |
|
|
|
width: 40%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.goods-content-bottom { |
|
|
|
@ -1583,9 +1522,8 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.goods-bottom { |
|
|
|
display: flex; |
|
|
|
width: 95%; |
|
|
|
margin: 20rpx auto; |
|
|
|
margin: 0 auto; |
|
|
|
height: 70rpx; |
|
|
|
line-height: 70rpx; |
|
|
|
} |
|
|
|
@ -1595,8 +1533,9 @@ |
|
|
|
width: 47%; |
|
|
|
text-align: center; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 600; |
|
|
|
font-weight: 700; |
|
|
|
border-radius: 20rpx; |
|
|
|
float:right; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
@ -1890,20 +1829,6 @@ |
|
|
|
margin-bottom: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.menu-list { |
|
|
|
height: 90rpx; |
|
|
|
width: 100%; |
|
|
|
overflow-x: scroll; |
|
|
|
display: flex; |
|
|
|
overflow-y: hidden; |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
z-index: 90; |
|
|
|
background: #F5F8F5; |
|
|
|
align-items: center; |
|
|
|
padding-bottom: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.checked-img { |
|
|
|
width: 180rpx; |
|
|
|
height: 20rpx; |
|
|
|
@ -1913,10 +1838,10 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.menu1 { |
|
|
|
width: 180rpx; |
|
|
|
height: 70rpx; |
|
|
|
width: 160rpx; |
|
|
|
height: 90rpx; |
|
|
|
position: relative; |
|
|
|
margin-left: 30rpx; |
|
|
|
line-height: 70rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 90rpx; |
|
|
|
} |
|
|
|
</style> |
