city-gather/src/subPack-xsb/commonTab/components/classfiy.vue

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import { StaticUrl } from '@/config'
import router from '@/router'

const props = defineProps<{ categoryList: Api.xsbCategories[] }>()
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const { topNavActive, leftActive } = storeToRefs(useSysXsbStore())
const classfiylist = computed(() => props.categoryList)
const sortClassBtn = ref(1)
const show = ref(false)
const showball = ref(false)
definePage({
  name: 'xsb-classfiy',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹分类',
    disableScroll: true,
  },
})
const isTopLoading = ref(false)
const basllObj = ref({
  left: 0,
  top: 0,
  x: 0,
  y: 0,
})
const x = computed(() => `${basllObj.value.x}px`)
const y = computed(() => `${basllObj.value.y}px`)
const left = computed(() => `${basllObj.value.left}px`)
const top = computed(() => `${basllObj.value.top}px`)
const productList = ref<Api.xsbCategoryProductList[]>([])
const topScrollView = ref()
const scrollTop = ref(0)
const goodsLoading = ref<LoadMoreState>()
const navHeight = computed(() => {
  return (`${Number(MenuButtonHeight.value) + Number(statusBarHeight.value)}px`)
})
function handleTopNavChange(item: Api.xsbCategoriesChildren) {
  topNavActive.value = item.code
  leftActive.value = item.children[0].code
  show.value = false
  topScrollView.value = null
  nextTick(() => {
    topScrollView.value = item.code
  })
  getProductList()
}
function handleOpen() {
  show.value = true
  console.log(navHeight.value, '打开')
}

const categories = computed(() => {
  return classfiylist.value.find(it => it.code === topNavActive.value)?.children || []
})
const categoriesId = computed(() => {
  return categories.value.find(it => it.code === leftActive.value)?.id
})

function handleChange({ value }: { value: string }) {
  leftActive.value = value
  getProductList()
}
async function getProductList() {
  const res = await Apis.xsb.getCategoryProductList({
    data: {
      categoryId: Number(categoriesId.value),
      shopId: 1,
    },
  })
  productList.value = res
  goodsLoading.value = 'finished'
  isTopLoading.value = false
}

function handlScrollBottom() {
  goodsLoading.value = 'loading'
  const index = categories?.value.findIndex(it => it.code === leftActive.value)
  if (index !== -1) {
    handleChange({ value: categories.value[index + 1].code })
  }
}
function handleSrollTop() {
  isTopLoading.value = true
  const index = categories?.value.findIndex(it => it.code === leftActive.value)
  if (index !== -1) {
    if (index === 0) {
      nextTick(() => isTopLoading.value = false)
    }
    else {
      handleChange({ value: categories.value[index - 1].code })
    }
  }
}
function handleAddCart(event: WechatMiniprogram.TouchEvent, item: Api.xsbCategoryProductList) {
  console.log(event.detail.x, item)
  if (showball.value)
    return
  basllObj.value.left = event.detail.x
  basllObj.value.top = event.detail.y
  showball.value = true
  setTimeout(() => {
    showball.value = false
  }, 500)
}
onMounted(() => {
  if (leftActive.value) {
    handleChange({ value: leftActive.value })
  }
  if (topNavActive.value) {
    topScrollView.value = null
    nextTick(() => {
      topScrollView.value = topNavActive.value
    })
  }
  const query = uni.createSelectorQuery().in(getCurrentInstance())
  query.select('.cart-box').boundingClientRect()
  query.exec((res) => {
    basllObj.value.y = res[0].top
    uni.getSystemInfo().then((info) => {
      basllObj.value.x = -(info.screenWidth - res[0].left - 15)
    })
  })
})
</script>

<template>
  <view class="page-xsb">
    <wd-navbar
      title="" custom-style="background-color:#F4FFD1" :bordered="false" :z-index="99" safe-area-inset-top
      fixed
    >
      <template #left>
        <view class="flex items-center">
          <view
            class="h60rpx w-474rpx flex items-center justify-between border-2rpx border-[var(--them-color)] rounded-40rpx border-solid bg-white pr6rpx"
          >
            <view class="flex items-center pb14rpx pl24rpx pt16rpx">
              <wd-icon name="search" size="14" color="#ccc" />
              <view class="search ml12rpx h-full w-full overflow-hidden">
                <wd-notice-bar
                  :text="['霸王茶姬', '牛奶', '洗衣机']" custom-class="notice-bar" color="#ccc"
                  background-color="#fff" direction="vertical"
                />
              </view>
            </view>
            <view class="flex items-center pr28rpx">
              <wd-divider vertical />
              <view class="ml6rpx text-28rpx text-[var(--them-color)] font-semibold">
                搜索
              </view>
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <view
      class="h162rpx flex items-center justify-between bg-#F4FFD1 pl24rpx"
      :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
    >
      <scroll-view
        scroll-x :scroll-into-view-offset="-150" scroll-with-animation enable-passive
        class="scrollx w-90% flex-shrink-0 whitespace-nowrap" :scroll-into-view="`id${topScrollView}`"
      >
        <view class="flex items-end pb10rpx">
          <view
            v-for="item in classfiylist" :id="`id${item.code}`" :key="item.code"
            class="mr24rpx flex flex-col items-center justify-center" @click="handleTopNavChange(item)"
          >
            <image
              :src="item.icon"
              :class="[topNavActive == item.code ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h84rpx w-84rpx' : 'h72rpx w-72rpx']"
            />
            <view
              class="mt16rpx text-22rpx"
              :class="[topNavActive == item.code ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </scroll-view>
      <view
        class="right-nav box-border h144rpx w64rpx flex flex-shrink-0 flex-col items-center justify-center px20rpx text-24rpx font-semibold"
        @click="handleOpen"
      >
        展开
        <image :src="`${StaticUrl}/xia.png`" class="mt20rpx h20rpx w20rpx" />
      </view>
      <wd-popup v-model="show" position="top" custom-style="border-radius:32rpx;">
        <view
          class="box-border bg-#F4FFD1 p24rpx"
          :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
        >
          <view class="mb24rpx mt24rpx text-28rpx font-semibold">
            全部一级分类
          </view>
          <view class="h400rpx overflow-y-scroll">
            <view class="grid grid-cols-5 box-border gap-x-24rpx gap-y-24rpx">
              <view
                v-for="item in classfiylist" :key="item.code"
                class="box-border h150rpx w114rpx flex flex-col items-center justify-center"
                @click="handleTopNavChange(item)"
              >
                <image
                  :src="item.icon"
                  :class="[topNavActive == item.code ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h88rpx w-88rpx' : 'h76rpx w-76rpx']"
                />
                <view
                  class="mt16rpx whitespace-nowrap text-nowrap text-22rpx"
                  :class="[topNavActive == item.code ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="mt24rpx w-full flex items-center justify-center" @click="show = false">
            <view class="mr8rpx text-24rpx">
              点击收起
            </view>
            <wd-icon name="arrow-down" size="18px" />
          </view>
        </view>
      </wd-popup>
    </view>
    <view class="wraper">
      <wd-sidebar v-model="leftActive" @change="handleChange">
        <wd-sidebar-item
          v-for="(item) in categories" :key="item.code"
          custom-style="font-size:28rpx; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
          :value="item.code" :label="item.name"
        />
      </wd-sidebar>
      <view class="content">
        <view class="p20rpx">
          <image :src="`${StaticUrl}/class.png`" class="h144rpx w-full" />
          <view class="my20rpx flex items-center justify-end rounded-16rpx bg-#F6F6F6 px20rpx py8rpx">
            <view class="mr40rpx text-24rpx">
              销量
            </view>
            <wd-sort-button v-model="sortClassBtn" :line="false" title="价格" />
          </view>
        </view>
        <scroll-view
          :lower-threshold="10"
          :refresher-triggered="isTopLoading" :scroll-top="scrollTop"
          :style="{ height: `calc(100vh - ${navHeight} - 700rpx)` }" enable-passive scroll-y scroll-with-animation scroll-anchoring refresher-enabled :throttle="false"
          @refresherrefresh="handleSrollTop" @scrolltolower="handlScrollBottom"
        >
          <view v-if="productList.length" class="p20rpx">
            <view v-for="item in productList" :key="item.id" @click="router.push({ name: 'xsb-goods', params: { id: String(item.id) } })">
              <view class="flex">
                <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" />
                </view>
                <view class="flex-1">
                  <view class="text-left text-28rpx font-semibold">
                    <!-- <view v-for="i in 2" :key="i" class="mr5px inline-block">
                      <wd-tag type="primary">
                        新品{{ i }}
                      </wd-tag>
                    </view> -->
                    {{ item.prodName }}
                  </view>
                  <view class="text-22rpx text-#AAAAAA">
                    <view class="mt10rpx flex items-center">
                      <view>{{ item.spec }}</view>
                    </view>
                    <view class="mt6rpx">
                      已售 {{ item.soldNum }}+
                    </view>
                  </view>
                  <view class="flex items-center justify-between">
                    <view class="text-#FF4D3A font-semibold">
                      <text class="text-24rpx">
                        ￥
                      </text> <text class="text-36rpx">
                        {{ item.channelProdPrice }}
                      </text>
                    </view>
                    <view @click.stop="handleAddCart($event, item)">
                      <image :src="`${StaticUrl}/cart-yes.png`" class="h52rpx w52rpx" />
                    </view>
                  </view>
                </view>
              </view>
              <view class="line">
                <wd-divider color="#F0F0F0" />
              </view>
            </view>
            <wd-loadmore :state="goodsLoading" />
          </view>
          <wd-status-tip v-else image="content" tip="暂无内容" />
        </scroll-view>
      </view>
    </view>
    <view
      class="fixedShadow fixed bottom-60rpx left-0 z-99 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="flex items-center">
          <image :src="`${StaticUrl}/cart-lanzi.png`" class="cart-box h100rpx w100rpx" />
        </view>
        <view class="flex items-center">
          <view class="flex items-center font-semibold">
            <view class="text-22rpx text-#222">
              总计：
            </view>
            <view class="flex items-baseline text-24rpx text-#FF4A39">
              ￥
              <text class="text-36rpx">
                8.9
              </text>
            </view>
          </view>
          <view class="ml20rpx w160rpx">
            <wd-button block size="large">
              结算
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showball" class="ball">
      <image :src="`${StaticUrl}/cart-yes.png`" class="cart-img h52rpx w52rpx" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.right-nav {
  background: linear-gradient(180deg, #FAFFEC 0%, #F6FFDE 11%, #E7FFA5 100%);
  box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.07);
}
.fixedShadow{
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.05);
}

.wraper {
  display: flex;
  height: calc(100vh - var(--window-top) - v-bind(navHeight) - 390rpx);
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx);
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx);
}

.content {
  flex: 1;
  background: #fff;

}

@keyframes moveX {
  to {
    transform: translateX(v-bind(x));
  }
}

@keyframes moveY {
  to {
    transform: translateY(v-bind(y));
  }
}

.ball {
  position: fixed;
  z-index: 80;
  left: v-bind(left);
  top: v-bind(top);
  animation: moveX .5s linear forwards;
}

.cart-img {
  animation: moveY .5s cubic-bezier(1,-1.26,1,1) forwards;
}
</style>