|
|
@@ -0,0 +1,161 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+const { themeVars } = storeToRefs(useManualThemeStore())
|
|
|
+const { userInfo } = storeToRefs(useUserStore())
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'xsb-goods-collect',
|
|
|
+ islogin: true,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '商品收藏',
|
|
|
+ navigationStyle: 'default',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const isManaging = ref(false)
|
|
|
+const selectedIds = ref<Set<number>>(new Set())
|
|
|
+const keyword = ref('')
|
|
|
+
|
|
|
+const { data: collectList, isLastPage, page, loading, reload } = usePagination(
|
|
|
+ (pageNum, pageSize) => Apis.xsb.myCollect({
|
|
|
+ params: {
|
|
|
+ channelId: userInfo.value.channelId,
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ ...(keyword.value ? { skuName: keyword.value } : {}),
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ { data: resp => resp.data, initialPage: 1, initialPageSize: 10, immediate: true, append: true },
|
|
|
+)
|
|
|
+
|
|
|
+const isAllSelected = computed(() => {
|
|
|
+ return selectedIds.value.size === collectList.value.length && collectList.value.length > 0
|
|
|
+})
|
|
|
+
|
|
|
+function toggleManage() {
|
|
|
+ isManaging.value = !isManaging.value
|
|
|
+ if (!isManaging.value) {
|
|
|
+ selectedIds.value.clear()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function toggleSelect(id: number) {
|
|
|
+ const newSet = new Set(selectedIds.value)
|
|
|
+ if (newSet.has(id)) {
|
|
|
+ newSet.delete(id)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ newSet.add(id)
|
|
|
+ }
|
|
|
+ selectedIds.value = newSet
|
|
|
+}
|
|
|
+
|
|
|
+function toggleSelectAll() {
|
|
|
+ if (isAllSelected.value) {
|
|
|
+ selectedIds.value = new Set()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ selectedIds.value = new Set(collectList.value.map(item => item.id))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleSearch() {
|
|
|
+ useGlobalLoading().loading({ msg: '加载中...' })
|
|
|
+ reload()
|
|
|
+ useGlobalLoading().close()
|
|
|
+}
|
|
|
+
|
|
|
+function handleScrollBottom() {
|
|
|
+ if (!isLastPage.value) {
|
|
|
+ page.value++
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleDelete() {
|
|
|
+ if (!selectedIds.value.size) {
|
|
|
+ useGlobalToast().show({ msg: '请选择要删除的商品' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ useGlobalMessage().confirm({
|
|
|
+ title: '提示',
|
|
|
+ msg: '确认删除吗?',
|
|
|
+ success: async () => {
|
|
|
+ const ids = [...selectedIds.value].join(',')
|
|
|
+ await Apis.xsb.batchCancelCollect({ pathParams: { ids } })
|
|
|
+ useGlobalToast().show({ msg: '删除成功' })
|
|
|
+ selectedIds.value.clear()
|
|
|
+ isManaging.value = false
|
|
|
+ reload()
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="page-xsb page-class">
|
|
|
+ <view class="fixed top-0 z-99 h-80rpx flex items-center gap-20rpx bg-#FFFFFF px-24rpx py-10rpx">
|
|
|
+ <view class="h-40rpx w-626rpx flex rounded-40rpx bg-#F1F1F1 py-12rpx">
|
|
|
+ <input v-model="keyword" placeholder="请输入商品名称" class="ml-24rpx w-580rpx text-28rpx" placeholder-class="text-#AAA text-28rpx" @blur="handleSearch">
|
|
|
+ <view class="mr-24rpx" @click="handleSearch">
|
|
|
+ <wd-icon name="search" color="#AAA" size="18px" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="w-100rpx text-28rpx font-bold" @click="toggleManage">
|
|
|
+ {{ isManaging ? '取消' : '管理' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-100rpx" />
|
|
|
+ <scroll-view scroll-y class="view" @scrolltolower="handleScrollBottom">
|
|
|
+ <view class="goods-list px-24rpx">
|
|
|
+ <view v-for="item in collectList" :key="item.id" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })">
|
|
|
+ <view class="flex items-center gap-20rpx">
|
|
|
+ <image :src="`${StaticUrl}/order-icon.png`" class="h-36rpx w-36rpx" />
|
|
|
+ <view class="text-28rpx font-bold">
|
|
|
+ {{ item.shopName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="flex items-center gap-20rpx">
|
|
|
+ <view v-show="isManaging" @click.stop="toggleSelect(item.id)">
|
|
|
+ <wd-icon :name="selectedIds.has(item.id) ? 'check-circle-filled' : 'circle1'" :color="selectedIds.has(item.id) ? themeVars.colorTheme : ''" size="16px" />
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center gap-20rpx">
|
|
|
+ <image :src="item.pic || `${StaticUrl}/order-icon.png`" class="h-200rpx w-200rpx rounded-16rpx" />
|
|
|
+ <view>
|
|
|
+ <view class="flex items-start gap-8rpx">
|
|
|
+ <view class="funt-bold flex-1 break-words text-32rpx">
|
|
|
+ {{ item.skuName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-62rpx text-36rpx text-#FF4D3A font-800">
|
|
|
+ ¥{{ item.price }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <StatusTip v-if="!collectList.length && !loading" tip="暂无收藏" />
|
|
|
+ <view class="h-180rpx" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view v-show="isManaging" class="fixed bottom-0 z-99 h-166rpx w-full flex items-center justify-between rounded-[16rpx,16rpx,0,0] bg-#FFF shadow-[0rpx_-6rpx_12rpx_2rpx_rgba(0,0,0,0.05)]">
|
|
|
+ <view class="ml-24rpx flex items-center gap-20rpx" @click="toggleSelectAll">
|
|
|
+ <wd-icon :name="isAllSelected ? 'check-circle-filled' : 'circle1'" :color="isAllSelected ? themeVars.colorTheme : ''" size="16px" />
|
|
|
+ <view>全选</view>
|
|
|
+ </view>
|
|
|
+ <view class="mr-24rpx">
|
|
|
+ <wd-button type="error" @click="handleDelete">
|
|
|
+ 删除
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.view {
|
|
|
+ height: calc(100vh - var(--window-top) - 80rpx);
|
|
|
+}
|
|
|
+</style>
|