修改样式
This commit is contained in:
@@ -1,6 +1,26 @@
|
||||
<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',
|
||||
@@ -8,26 +28,106 @@ const segmentedList = [
|
||||
'Recipe',
|
||||
]
|
||||
|
||||
function handleSwiperChange(e) {
|
||||
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>
|
||||
<view class="collection-page">
|
||||
<z-paging-swiper>
|
||||
<template #top>
|
||||
<navbar/>
|
||||
<view class="px-30rpx">
|
||||
<view class="text-46rpx lh-46rpx text-#333 font-bold mb-52rpx">{{ t('pages.mine.collection') }}</view>
|
||||
<l-segmented v-model="segmentedValue" :options="segmentedList" shape="round" bg-color="#F2F2F2" active-color="#333" />
|
||||
<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>
|
||||
|
||||
@@ -35,15 +135,95 @@ onMounted(()=> {
|
||||
: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"></order-swiper-list>
|
||||
<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>
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background-color: white;
|
||||
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>
|
||||
Reference in New Issue
Block a user