cheflinkuser/src/pages-user/pages/collection/index.vue

<script setup lang="ts">
import OrderSwiperList from "./components/order-swiper-list/order-swiper-list.vue";
import { useUserStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";

const {t} = useI18n()
const userStore = useUserStore();

const cartBadgeTotal = computed(() => {
  const list = userStore.userCartAllData;
  if (!Array.isArray(list) || list.length === 0) return 0;
  let n = 0;
  for (const m of list) {
    n +=
      (m as { merchantCartVoList?: unknown[] })?.merchantCartVoList
        ?.length || 0;
  }
  return n;
});

onShow(() => {
  userStore.getUserCartAllData();
});
const segmentedValue = ref(0);
const segmentedList = [
    'Store',
    'Dish',
    'Recipe',
]

function handleSwiperChange(e: any) {
  segmentedValue.value = e.detail.current;
}

const orderSwiperListRef = ref()

const batchDeleteMode = ref(false)

onMounted(()=> {
  nextTick(()=> {
    orderSwiperListRef.value[segmentedValue.value].reload()
  })
})

function exitBatchDeleteMode() {
  batchDeleteMode.value = false
}

function handleBatchDeleteSuccess() {
  batchDeleteMode.value = false
}

function navigateBack() {
  uni.navigateBack({
    delta: 1,
  })
}

function handleDeleteCollection() {
  if (!batchDeleteMode.value) {
    batchDeleteMode.value = true
    uni.showToast({
      title: t('pages.mine.collectionBatchModeHint'),
      icon: 'none',
    })
    return
  }
  const inst = orderSwiperListRef.value?.[segmentedValue.value]
  inst?.runBatchDelete?.()
}

function navigateToCart() {
  uni.navigateTo({
    url: '/pages-user/pages/cart/index'
  })
}
</script>

<template>
  <view class="collection-page">
    <z-paging-swiper>
      <template #top>
        <status-bar />
        <view class="header-wrap px-30rpx pt-14rpx">
          <view class="flex items-center justify-between mb-34rpx">
            <image
              @click="navigateBack"
              src="@img/chef/1327.png"
              mode="aspectFill"
              class="w-48rpx h-48rpx"
            />
            <view class="text-38rpx lh-38rpx text-#111 font-600">{{ t('pages.mine.collection') }}</view>
            <view class="flex items-center gap-16rpx">
              <text
                v-if="batchDeleteMode"
                class="text-28rpx text-#666"
                @click="exitBatchDeleteMode"
              >{{ t('common.cancel') }}</text>
              <view
                v-if="!batchDeleteMode"
                class="collection-header-cart w-66rpx h-66rpx rounded-50% bg-#F5F5F5 center shrink-0"
                @click="navigateToCart"
              >
                <view class="i-carbon:shopping-cart text-36rpx text-#14181b"></view>
                <view
                  v-if="userStore.isLogin && cartBadgeTotal > 0"
                  class="collection-header-cart-badge"
                  >{{ cartBadgeTotal > 99 ? "99+" : cartBadgeTotal }}</view
                >
              </view>
              <view
              v-if="!batchDeleteMode"
                class="w-66rpx h-66rpx rounded-50% bg-#F5F5F5 center"
                @click="handleDeleteCollection"
              >
                <image src="@img/chef/1278.png" mode="aspectFill" class="w-66rpx h-66rpx" />
              </view>
            </view>
          </view>
          <l-segmented
            v-model="segmentedValue"
            :options="segmentedList"
            shape="round"
            bg-color="#F2F3F5"
            active-color="#fff"
            color="#5E5E5E"
            padding="0rpx"
            slider-color="#000"
            height="62rpx"
          />
        </view>
      </template>

      <swiper class="h-full"
              :current="segmentedValue"
              @change="handleSwiperChange">
        <swiper-item class="swiper-item" v-for="(item, index) in segmentedList" :key="index">
          <order-swiper-list
            ref="orderSwiperListRef"
            :currentIndex="segmentedValue"
            :index="index"
            :batch-delete-mode="batchDeleteMode"
            @batch-delete-success="handleBatchDeleteSuccess"
          />
        </swiper-item>
      </swiper>
    </z-paging-swiper>

    <view class="cart-bar-wrap px-24rpx pb-24rpx" v-if="batchDeleteMode">
      <view class="delete-bar">
        <view class="text-30rpx  text-#1d1d1d ml-20rpx" style="color: #fff;">{{ t('common.delete') || '删除' }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
page {
  background-color: #fff;
}

.collection-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.header-wrap {
  background: #fff;
}

:deep(.l-segmented) {
  height: 62rpx !important;
  border-radius: 34rpx !important;
}

:deep(.l-segmented-item) {
  font-size: 30rpx !important;
  color: #666 !important;
}

:deep(.l-segmented-item--active) {
  color: #fff !important;
  font-weight: 600 !important;
  background: #111 !important;
}

.cart-bar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: linear-gradient(to top, #fff 65%, rgba(255, 255, 255, 0));
}

.collection-header-cart {
  position: relative;
}

.collection-header-cart-badge {
  position: absolute;
  top: 2rpx;
  right: 2rpx;
  min-width: 28rpx;
  height: 28rpx;
  padding: 0 6rpx;
  font-size: 18rpx;
  line-height: 28rpx;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: #e23636;
  border-radius: 999rpx;
}

.delete-bar {
  height: 96rpx;
  border-radius: 48rpx;
  background: #000;
  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid #efefef;
  padding: 0 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>