|
@@ -19,6 +19,7 @@ const selectGoods = ref(false)
|
|
|
// 多规格商品skuid
|
|
// 多规格商品skuid
|
|
|
const selectSkuId = ref(0)
|
|
const selectSkuId = ref(0)
|
|
|
const SelectGoodsNum = ref(1)
|
|
const SelectGoodsNum = ref(1)
|
|
|
|
|
+const goodsInTo = ref()
|
|
|
const goodsInfo = ref<Api.xsbCategoryProductList | Api.xsbProductDetail | undefined>()
|
|
const goodsInfo = ref<Api.xsbCategoryProductList | Api.xsbProductDetail | undefined>()
|
|
|
definePage({
|
|
definePage({
|
|
|
name: 'xsb-classfiy',
|
|
name: 'xsb-classfiy',
|
|
@@ -41,15 +42,10 @@ const x = computed(() => `${basllObj.value.x}px`)
|
|
|
const y = computed(() => `${basllObj.value.y}px`)
|
|
const y = computed(() => `${basllObj.value.y}px`)
|
|
|
const left = computed(() => `${basllObj.value.left}px`)
|
|
const left = computed(() => `${basllObj.value.left}px`)
|
|
|
const top = computed(() => `${basllObj.value.top}px`)
|
|
const top = computed(() => `${basllObj.value.top}px`)
|
|
|
-const hasCartData = computed(() => {
|
|
|
|
|
- if (cartList.value.length) {
|
|
|
|
|
- return '390rpx'
|
|
|
|
|
- }
|
|
|
|
|
- return '260rpx'
|
|
|
|
|
-})
|
|
|
|
|
|
|
+
|
|
|
const productList = ref<Api.xsbCategoryProductList[]>([])
|
|
const productList = ref<Api.xsbCategoryProductList[]>([])
|
|
|
const topScrollView = ref()
|
|
const topScrollView = ref()
|
|
|
-const scrollTop = ref(0)
|
|
|
|
|
|
|
+const scrollTop = ref<number | undefined>(0)
|
|
|
const goodsLoading = ref<LoadMoreState>()
|
|
const goodsLoading = ref<LoadMoreState>()
|
|
|
const navHeight = computed(() => {
|
|
const navHeight = computed(() => {
|
|
|
return (`${Number(MenuButtonHeight.value) + Number(statusBarHeight.value)}px`)
|
|
return (`${Number(MenuButtonHeight.value) + Number(statusBarHeight.value)}px`)
|
|
@@ -104,6 +100,25 @@ async function getProductList() {
|
|
|
},
|
|
},
|
|
|
})
|
|
})
|
|
|
productList.value = res.data
|
|
productList.value = res.data
|
|
|
|
|
+ console.log(isTopLoading.value, '=====================')
|
|
|
|
|
+ if (!res.data.length) {
|
|
|
|
|
+ scrollTop.value = undefined
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ scrollTop.value = 0
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!isTopLoading.value) {
|
|
|
|
|
+ goodsInTo.value = null
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ goodsInTo.value = res.data.length ? res.data[0].prodId : null
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ goodsInTo.value = null
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ goodsInTo.value = res.data.length ? res.data[res.data.length - 4].prodId : null
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
goodsLoading.value = 'finished'
|
|
goodsLoading.value = 'finished'
|
|
|
isTopLoading.value = false
|
|
isTopLoading.value = false
|
|
|
setProductNum()
|
|
setProductNum()
|
|
@@ -111,10 +126,13 @@ async function getProductList() {
|
|
|
|
|
|
|
|
function handlScrollBottom() {
|
|
function handlScrollBottom() {
|
|
|
goodsLoading.value = 'loading'
|
|
goodsLoading.value = 'loading'
|
|
|
|
|
+
|
|
|
const index = categories?.value.findIndex(it => it.code === leftActive.value)
|
|
const index = categories?.value.findIndex(it => it.code === leftActive.value)
|
|
|
console.log(index, '-================')
|
|
console.log(index, '-================')
|
|
|
- if (index + 1 === categories.value.length)
|
|
|
|
|
|
|
+ if (index + 1 === categories.value.length) {
|
|
|
|
|
+ goodsLoading.value = 'finished'
|
|
|
return
|
|
return
|
|
|
|
|
+ }
|
|
|
if (index !== -1) {
|
|
if (index !== -1) {
|
|
|
handleChange({ value: categories.value[index + 1].code })
|
|
handleChange({ value: categories.value[index + 1].code })
|
|
|
}
|
|
}
|
|
@@ -419,7 +437,7 @@ function handlePay() {
|
|
|
<view v-if="item.code == leftActive" class="absolute left-0 top-20rpx h60rpx w8rpx rounded-4rpx bg-[var(--them-color)]" />
|
|
<view v-if="item.code == leftActive" class="absolute left-0 top-20rpx h60rpx w8rpx rounded-4rpx bg-[var(--them-color)]" />
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
- <view class="content">
|
|
|
|
|
|
|
+ <view class="content relative">
|
|
|
<view class="p20rpx">
|
|
<view class="p20rpx">
|
|
|
<image :src="`${StaticUrl}/class.png`" class="h144rpx w-full" @click="useGlobalToast().show('敬请期待 !')" />
|
|
<image :src="`${StaticUrl}/class.png`" class="h144rpx w-full" @click="useGlobalToast().show('敬请期待 !')" />
|
|
|
<view class="my20rpx flex items-center justify-end rounded-16rpx bg-#F6F6F6 px20rpx py8rpx">
|
|
<view class="my20rpx flex items-center justify-end rounded-16rpx bg-#F6F6F6 px20rpx py8rpx">
|
|
@@ -432,11 +450,13 @@ function handlePay() {
|
|
|
<scroll-view
|
|
<scroll-view
|
|
|
:lower-threshold="10"
|
|
:lower-threshold="10"
|
|
|
:refresher-triggered="isTopLoading" :scroll-top="scrollTop"
|
|
:refresher-triggered="isTopLoading" :scroll-top="scrollTop"
|
|
|
- :style="{ height: `calc(100vh - ${navHeight} - 700rpx)` }" enable-passive scroll-with-animation scroll-y scroll-anchoring refresher-enabled :throttle="false"
|
|
|
|
|
- @refresherrefresh="handleSrollTop" @scrolltolower="handlScrollBottom"
|
|
|
|
|
|
|
+ :style="{ height: `calc(100vh - ${navHeight} - 700rpx)` }" enable-passive scroll-y scroll-anchoring refresher-enabled :throttle="false"
|
|
|
|
|
+ :scroll-into-view="`class${goodsInTo}`"
|
|
|
|
|
+ @refresherrefresh="handleSrollTop"
|
|
|
|
|
+ @scrolltolower="handlScrollBottom"
|
|
|
>
|
|
>
|
|
|
<view v-if="productList.length" class="p20rpx">
|
|
<view v-if="productList.length" class="p20rpx">
|
|
|
- <view v-for="item in productList" :key="item.id" class="relative">
|
|
|
|
|
|
|
+ <view v-for="item in productList" :id="`class${item.prodId}`" :key="item.id" class="relative">
|
|
|
<view class="flex" @click="handleGo(item)">
|
|
<view class="flex" @click="handleGo(item)">
|
|
|
<view class="mr20rpx h172rpx w172rpx flex-shrink-0 overflow-hidden rounded-16rpx bg-#F6F6F6">
|
|
<view class="mr20rpx h172rpx w172rpx flex-shrink-0 overflow-hidden rounded-16rpx bg-#F6F6F6">
|
|
|
<image :src="item.pic" lazy-load class="h-full w-full" />
|
|
<image :src="item.pic" lazy-load class="h-full w-full" />
|
|
@@ -505,15 +525,18 @@ function handlePay() {
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <wd-loadmore :state="goodsLoading" />
|
|
|
|
|
|
|
+ <wd-loadmore :state="goodsLoading" :loading-props="{ color: '#9ED605', size: 20 }" />
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
<wd-status-tip v-else image="content" tip="暂无内容" />
|
|
<wd-status-tip v-else image="content" tip="暂无内容" />
|
|
|
- <view v-if="goodsLoading == 'finished'" class="h-50vh" />
|
|
|
|
|
|
|
+ <view v-if="!productList.length" class="h-50vh" />
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
|
|
+ <view v-if="goodsLoading == 'loading' || isTopLoading" class="absolute left-0 top-0 z-10 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,.6)]">
|
|
|
|
|
+ <wd-loading color="#9ED605" :size="20" />
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view
|
|
<view
|
|
|
- v-if="cartList.length"
|
|
|
|
|
class="fixedShadow fixed bottom-60rpx left-0 z-100 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
|
|
class="fixedShadow fixed bottom-60rpx left-0 z-100 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
|
|
|
>
|
|
>
|
|
|
<view class="ios w-full flex items-center justify-between">
|
|
<view class="ios w-full flex items-center justify-between">
|
|
@@ -601,6 +624,8 @@ function handlePay() {
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <wd-status-tip v-if="!cartList.length" image="content" tip="暂无内容" />
|
|
|
|
|
+
|
|
|
<view class="h320rpx" />
|
|
<view class="h320rpx" />
|
|
|
</view>
|
|
</view>
|
|
|
</Zpopup>
|
|
</Zpopup>
|
|
@@ -637,9 +662,9 @@ function handlePay() {
|
|
|
|
|
|
|
|
.wraper {
|
|
.wraper {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- height: calc(100vh - var(--window-top) - v-bind(navHeight) - v-bind(hasCartData) - var(--window-bottom));
|
|
|
|
|
- height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - v-bind(navHeight) - v-bind(hasCartData) - var(--window-bottom));
|
|
|
|
|
- height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - v-bind(navHeight) - v-bind(hasCartData) - var(--window-bottom));
|
|
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - v-bind(navHeight) - 390rpx - var(--window-bottom));
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx - var(--window-bottom));
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx - var(--window-bottom));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
.content {
|