msumshk/TakeoutSaaS.C-Side-Mini-Program-V1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 拆分小程序 vue 结构

Browse Source
This commit is contained in:
MSuMshk
2026-03-11 14:11:26 +08:00
commit b050c01a24
141 changed files with 24904 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/cart-drawer/index.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<view v-if="props.visible" class="overlay" @click="emit('close')" />
<view v-if="props.visible" class="cart-drawer">
<view class="cart-drawer__handle" />
<template v-if="props.lineList.length">
<scroll-view scroll-y class="cart-drawer__scroll">
<view class="cart-drawer__header">
<view class="cart-drawer__header-left">
<view class="cart-drawer__header-icon">
<text class="cart-drawer__icon-text">🛒</text>
</view>
<text class="cart-drawer__title">购物车</text>
<text class="cart-drawer__count">{{ props.itemCount }} 件</text>
</view>
<view class="cart-drawer__clear" @click="emit('clear')">
<text>清空</text>
</view>
</view>
<view class="cart-drawer__list">
<view
v-for="line in props.lineList"
:key="line.lineKey"
class="cart-drawer__item"
>
<view class="cart-drawer__item-info">
<text class="cart-drawer__item-name">{{ line.name }}</text>
<text v-if="line.specText" class="cart-drawer__item-spec">
{{ line.specText }}
</text>
</view>
<view class="cart-drawer__item-right">
<text class="cart-drawer__item-price">
<text class="cart-drawer__unit">¥</text>{{ line.lineAmountText }}
</text>
<view class="cart-drawer__stepper">
<view
class="cart-drawer__stepper-btn"
@click="emit('changeQty', line.lineKey, -1)"
>
<text>-</text>
</view>
<text class="cart-drawer__stepper-val">{{ line.quantity }}</text>
<view
class="cart-drawer__stepper-btn"
@click="emit('changeQty', line.lineKey, 1)"
>
<text>+</text>
</view>
</view>
</view>
</view>
</view>
<view class="cart-drawer__amount">
<view class="cart-drawer__amount-row">
<text class="cart-drawer__amount-label">商品小计</text>
<text class="cart-drawer__amount-value">¥{{ props.totalAmountText }}</text>
</view>
<view class="cart-drawer__amount-row cart-drawer__amount-row--total">
<text class="cart-drawer__amount-label">合计</text>
<text class="cart-drawer__amount-value cart-drawer__amount-value--total">
<text class="cart-drawer__unit">¥</text>{{ props.totalAmountText }}
</text>
</view>
</view>
</scroll-view>
<view class="cart-drawer__footer">
<view class="cart-drawer__footer-left">
<text class="cart-drawer__footer-summary">
共 <text class="cart-drawer__footer-num">{{ props.itemCount }}</text> 件
</text>
<view class="cart-drawer__footer-total">
<text class="cart-drawer__footer-unit">¥</text>
<text class="cart-drawer__footer-value">{{ props.totalAmountText }}</text>
</view>
</view>
<view class="cart-drawer__footer-btn" @click="emit('checkout')">
<text>去结算</text>
</view>
</view>
</template>
<view v-else class="cart-drawer__empty">
<text class="cart-drawer__empty-title">购物车还是空的</text>
<text class="cart-drawer__empty-desc">先去选几样喜欢的商品吧</text>
<view class="cart-drawer__empty-btn" @click="emit('close')">
<text>去选购</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import type { CartDrawerLineItem } from './useCartDrawer'
const props = defineProps<{
visible: boolean
lineList: CartDrawerLineItem[]
itemCount: number
totalAmountText: string
}>()
const emit = defineEmits<{
close: []
clear: []
checkout: []
changeQty: [lineKey: string, delta: number]
}>()
</script>
<style lang="scss">
@import './styles/index.scss';
</style>

79
src/components/cart-drawer/styles/base.scss Normal file
View File

@@ -0,0 +1,79 @@
@import '../../../styles/variables';
.cart-drawer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 75%;
background: $card;
border-radius: 28px 28px 0 0;
z-index: 210;
display: flex;
flex-direction: column;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
overflow: hidden;
}
.cart-drawer__handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: $text-5;
margin: 10px auto 0;
flex-shrink: 0;
}
.cart-drawer__scroll {
flex: 1;
overflow-y: auto;
max-height: 60vh;
}
.cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 20px 14px;
}
.cart-drawer__header-left {
display: flex;
align-items: center;
gap: 8px;
}
.cart-drawer__header-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: $primary-light;
display: flex;
align-items: center;
justify-content: center;
}
.cart-drawer__icon-text {
font-size: 14px;
}
.cart-drawer__title {
font-size: 17px;
font-weight: 700;
color: $text-1;
}
.cart-drawer__count {
font-size: 12px;
color: $text-4;
font-weight: 500;
background: $border;
padding: 2px 8px;
border-radius: 10px;
}
.cart-drawer__clear {
font-size: 13px;
color: $text-4;
padding: 8px 0;
}

38
src/components/cart-drawer/styles/empty.scss Normal file
View File

@@ -0,0 +1,38 @@
@import '../../../styles/variables';
.cart-drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px 60px;
text-align: center;
flex: 1;
}
.cart-drawer__empty-title {
font-size: 15px;
font-weight: 600;
color: $text-3;
}
.cart-drawer__empty-desc {
font-size: 13px;
color: $text-4;
margin-top: 6px;
}
.cart-drawer__empty-btn {
margin-top: 20px;
height: 38px;
padding: 0 24px;
border-radius: 19px;
border: 1.5px solid $primary;
background: transparent;
color: $primary;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

63
src/components/cart-drawer/styles/footer.scss Normal file
View File

@@ -0,0 +1,63 @@
@import '../../../styles/variables';
.cart-drawer__footer {
flex-shrink: 0;
padding: 12px 20px 28px;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
background: $card;
display: flex;
align-items: center;
gap: 14px;
}
.cart-drawer__footer-left {
flex: 1;
min-width: 0;
}
.cart-drawer__footer-summary {
font-size: 12px;
color: $text-3;
}
.cart-drawer__footer-num {
color: $primary;
font-weight: 700;
}
.cart-drawer__footer-total {
display: flex;
align-items: baseline;
gap: 2px;
margin-top: 2px;
}
.cart-drawer__footer-unit {
font-size: 14px;
font-weight: 700;
color: $primary-dark;
}
.cart-drawer__footer-value {
font-size: 28px;
font-weight: 800;
color: $primary-dark;
line-height: 1;
}
.cart-drawer__footer-btn {
height: 50px;
min-width: 130px;
padding: 0 32px;
border-radius: 25px;
font-size: 16px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
letter-spacing: 0.5px;
}

4
src/components/cart-drawer/styles/index.scss Normal file
View File

@@ -0,0 +1,4 @@
@import './base.scss';
@import './list.scss';
@import './footer.scss';
@import './empty.scss';

124
src/components/cart-drawer/styles/list.scss Normal file
View File

@@ -0,0 +1,124 @@
@import '../../../styles/variables';
.cart-drawer__list {
padding: 0 20px;
}
.cart-drawer__item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 0.5px solid $border;
&:last-child { border-bottom: none; }
}
.cart-drawer__item-info {
flex: 1;
min-width: 0;
}
.cart-drawer__item-name {
font-size: 14px;
font-weight: 600;
color: $text-1;
line-height: 1.4;
}
.cart-drawer__item-spec {
font-size: 12px;
color: $text-4;
margin-top: 3px;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-drawer__item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.cart-drawer__item-price {
font-size: 15px;
font-weight: 700;
color: $text-1;
}
.cart-drawer__unit {
font-size: 11px;
font-weight: 600;
}
.cart-drawer__stepper {
display: flex;
align-items: center;
}
.cart-drawer__stepper-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid $text-5;
background: $card;
display: flex;
align-items: center;
justify-content: center;
color: $text-2;
font-size: 14px;
}
.cart-drawer__stepper-val {
width: 32px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: $text-1;
}
.cart-drawer__amount {
margin: 0 20px;
padding: 14px 0 6px;
border-top: 1px dashed $border;
}
.cart-drawer__amount-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
&--total {
padding: 10px 0 4px;
margin-top: 6px;
border-top: 0.5px solid $border;
}
}
.cart-drawer__amount-label {
font-size: 13px;
color: $text-3;
.cart-drawer__amount-row--total & {
font-size: 15px;
font-weight: 600;
color: $text-1;
}
}
.cart-drawer__amount-value {
font-size: 13px;
color: $text-2;
font-weight: 500;
&--total {
font-size: 20px;
font-weight: 800;
color: $primary-dark;
}
}

8
src/components/cart-drawer/useCartDrawer.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { CartLine } from '@/stores/cart'
export interface CartDrawerLineItem extends CartLine {
lineAmount: number
lineAmountText: string
unitPriceText: string
specText: string
}

30
src/components/page-hero/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<view class="page-hero">
<view class="page-hero__head">
<view class="page-hero__copy">
<text class="page-hero__title">{{ props.title }}</text>
<text class="page-hero__subtitle">{{ props.subtitle }}</text>
</view>
<view v-if="props.badge" class="page-hero__badge">{{ props.badge }}</view>
</view>
<view v-if="hasExtra" class="page-hero__extra">
<slot />
</view>
</view>
</template>
<script setup lang="ts">
import { usePageHero } from './usePageHero'
const props = defineProps<{
title: string
subtitle: string
badge?: string
}>()
const { hasExtra } = usePageHero()
</script>
<style lang="scss">
@import './styles.scss';
</style>

46
src/components/page-hero/styles.scss Normal file
View File

@@ -0,0 +1,46 @@
.page-hero {
padding: 18px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(22, 163, 74, 0.92));
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
.page-hero__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.page-hero__copy {
flex: 1;
}
.page-hero__title {
display: block;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #ffffff;
}
.page-hero__subtitle {
display: block;
margin-top: 8px;
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.page-hero__badge {
flex: none;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
font-size: 12px;
color: #ffffff;
}
.page-hero__extra {
margin-top: 16px;
}

10
src/components/page-hero/usePageHero.ts Normal file
View File

@@ -0,0 +1,10 @@
import { computed, useSlots } from 'vue'
export function usePageHero () {
const slots = useSlots()
const hasExtra = computed(() => Boolean(slots.default))
return {
hasExtra
}
}

66
src/components/product-card/index.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<view class="product-card" @click="emit('select', props.product)">
<view class="product-card__img-wrap">
<image
class="product-card__img"
:src="props.product.coverImageUrl"
mode="aspectFill"
/>
<text
v-if="props.product.tagTexts?.length"
class="product-card__img-tag"
:class="tagClass"
>
{{ props.product.tagTexts[0] }}
</text>
</view>
<view class="product-card__body">
<view>
<text class="product-card__name">{{ props.product.name }}</text>
<text class="product-card__desc">{{ props.product.description }}</text>
<view class="product-card__meta">
<text class="product-card__sales">{{ props.product.salesText }}</text>
</view>
</view>
<view class="product-card__bottom">
<view class="product-card__price">
<text class="product-card__price-unit">¥</text>
<text class="product-card__price-value">{{ props.product.price }}</text>
<text
v-if="props.product.originalPriceText"
class="product-card__price-origin"
>
¥{{ props.product.originalPriceText }}
</text>
</view>
<view
class="product-card__btn"
:class="{ 'product-card__btn--disabled': props.product.soldOut }"
@click.stop="emit('action', props.product)"
>
<text>{{ props.product.hasOptions ? '选规格' : '加入购物车' }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import type { MiniProductCard } from '@/shared'
import { useProductCard } from './useProductCard'
const props = defineProps<{
product: MiniProductCard
}>()
const emit = defineEmits<{
select: [product: MiniProductCard]
action: [product: MiniProductCard]
}>()
const { tagClass } = useProductCard(props)
</script>
<style lang="scss">
@import './styles.scss';
</style>

132
src/components/product-card/styles.scss Normal file
View File

@@ -0,0 +1,132 @@
@import '../../styles/variables';
.product-card {
background: $card;
border-radius: $r-lg;
padding: 12px;
box-shadow: $shadow-sm;
display: flex;
gap: 12px;
}
.product-card__img-wrap {
width: 110px;
height: 110px;
border-radius: $r-md;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.product-card__img {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #FED7AA, #FDBA74);
}
.product-card__img-tag {
position: absolute;
top: 6px;
left: 6px;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 6px;
color: #fff;
line-height: 1.5;
&--hot { background: rgba(239, 68, 68, 0.85); }
&--new { background: rgba(22, 163, 74, 0.85); }
&--sale { background: rgba(245, 158, 11, 0.85); }
}
.product-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-card__name {
font-size: 15px;
font-weight: 600;
color: $text-1;
line-height: 1.4;
}
.product-card__desc {
font-size: 12px;
color: $text-3;
margin-top: 3px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card__meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.product-card__sales {
font-size: 11px;
color: $text-4;
}
.product-card__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: auto;
padding-top: 6px;
}
.product-card__price {
display: flex;
align-items: baseline;
gap: 2px;
}
.product-card__price-unit {
font-size: 12px;
font-weight: 600;
color: $primary-dark;
}
.product-card__price-value {
font-size: 20px;
font-weight: 700;
color: $primary-dark;
line-height: 1;
}
.product-card__price-origin {
font-size: 11px;
color: $text-4;
text-decoration: line-through;
margin-left: 4px;
}
.product-card__btn {
height: 30px;
padding: 0 14px;
background: $primary;
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
display: flex;
align-items: center;
gap: 3px;
white-space: nowrap;
&--disabled {
opacity: 0.45;
pointer-events: none;
}
}

16
src/components/product-card/useProductCard.ts Normal file
View File

@@ -0,0 +1,16 @@
import { computed } from 'vue'
import type { MiniProductCard } from '@/shared'
export function useProductCard (props: { product: MiniProductCard }) {
const tagClass = computed(() => {
const tag = props.product.tagTexts?.[0] || ''
if (['招牌', '热卖', '热销'].includes(tag)) return 'product-card__img-tag--hot'
if (['新品'].includes(tag)) return 'product-card__img-tag--new'
if (['超值', '加购王'].includes(tag)) return 'product-card__img-tag--sale'
return 'product-card__img-tag--hot'
})
return {
tagClass
}
}

46
src/components/scene-switcher/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<view class="scene-switcher">
<view
v-for="option in props.options"
:key="option.value"
class="scene-switcher__item"
>
<NutButton
size="small"
:type="option.value === props.modelValue ? 'primary' : 'default'"
:plain="option.value !== props.modelValue"
@click="handleSelect(option.value)"
>
{{ option.label }}
</NutButton>
<text class="scene-switcher__desc">{{ option.description }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { Button as NutButton } from '@nutui/nutui-taro'
import { useSceneSwitcher } from './useSceneSwitcher'
interface SceneOption {
label: string
value: string
description?: string
}
const props = defineProps<{
modelValue: string
options: SceneOption[]
}>()
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void
(event: 'change', value: string): void
}>()
const { handleSelect } = useSceneSwitcher(emit)
</script>
<style lang="scss">
@import './styles.scss';
</style>

17
src/components/scene-switcher/styles.scss Normal file
View File

@@ -0,0 +1,17 @@
.scene-switcher {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.scene-switcher__item {
min-width: 96px;
}
.scene-switcher__desc {
display: block;
margin-top: 6px;
font-size: 11px;
line-height: 1.5;
color: #94a3b8;
}

15
src/components/scene-switcher/useSceneSwitcher.ts Normal file
View File

@@ -0,0 +1,15 @@
interface SceneSwitcherEmits {
(event: 'change', value: string): void
(event: 'update:modelValue', value: string): void
}
export function useSceneSwitcher (emit: SceneSwitcherEmits) {
function handleSelect (value: string) {
emit('update:modelValue', value)
emit('change', value)
}
return {
handleSelect
}
}

153
src/components/spec-popup/index.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<view v-if="props.visible" class="overlay" @click="emit('close')" />
<view v-if="props.visible" class="spec-popup">
<view class="spec-popup__handle" />
<scroll-view scroll-y class="spec-popup__scroll">
<view class="spec-popup__header">
<image
class="spec-popup__img"
:src="props.product.coverImageUrl"
mode="aspectFill"
/>
<view class="spec-popup__info">
<text class="spec-popup__name">{{ props.product.name }}</text>
<text class="spec-popup__desc">
{{ props.product.subtitle || props.product.description }}
</text>
<view class="spec-popup__tags">
<text
v-for="tag in props.product.tagTexts"
:key="tag"
class="spec-popup__tag"
:class="tagClass(tag)"
>
{{ tag }}
</text>
</view>
<view class="spec-popup__price-row">
<text class="spec-popup__price-unit">¥</text>
<text class="spec-popup__price-current">{{ props.displayUnitPrice }}</text>
<text
v-if="props.product.originalPriceText"
class="spec-popup__price-origin"
>
¥{{ props.product.originalPriceText }}
</text>
</view>
</view>
<view class="spec-popup__close" @click="emit('close')">
<text>✕</text>
</view>
</view>
<view
v-for="group in props.product.optionGroups"
:key="group.id"
class="spec-popup__group"
>
<view class="spec-popup__group-header">
<text class="spec-popup__group-title">{{ group.name }}</text>
<text
v-if="group.required"
class="spec-popup__group-tag spec-popup__group-tag--required"
>
必选
</text>
<text
v-else-if="group.selectionType === 'multiple'"
class="spec-popup__group-tag spec-popup__group-tag--multi"
>
可多选
</text>
</view>
<view class="spec-popup__pills">
<view
v-for="option in group.options"
:key="option.id"
class="spec-popup__pill"
:class="{
'spec-popup__pill--selected': props.isSelected(group.id, option.id),
'spec-popup__pill--disabled': option.soldOut
}"
@click="emit('toggleOption', group, option)"
>
<text>{{ option.name }}</text>
<text v-if="option.extraPrice" class="spec-popup__pill-extra">
+¥{{ option.extraPriceText }}
</text>
</view>
</view>
</view>
<view class="spec-popup__stepper-row">
<text class="spec-popup__stepper-label">数量</text>
<view class="spec-popup__stepper">
<view
class="spec-popup__stepper-btn"
:class="{ 'spec-popup__stepper-btn--disabled': props.quantity <= 1 }"
@click="emit('changeQty', -1)"
>
<text>-</text>
</view>
<text class="spec-popup__stepper-value">{{ props.quantity }}</text>
<view class="spec-popup__stepper-btn" @click="emit('changeQty', 1)">
<text>+</text>
</view>
</view>
</view>
</scroll-view>
<view class="spec-popup__footer">
<view class="spec-popup__footer-price">
<text class="spec-popup__footer-label">合计</text>
<view class="spec-popup__footer-total">
<text class="spec-popup__footer-unit">¥</text>
<text class="spec-popup__footer-value">{{ props.totalPriceText }}</text>
</view>
<text class="spec-popup__footer-summary">{{ props.summaryText }}</text>
</view>
<view
class="spec-popup__footer-btn"
:class="{ 'spec-popup__footer-btn--disabled': !props.canAdd }"
@click="props.canAdd && emit('addToCart')"
>
<text>{{ props.canAdd ? '加入购物车' : props.disabledText }}</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import type {
MiniProductDetail,
MiniProductOption,
MiniProductOptionGroup
} from '@/shared'
import { useSpecPopup } from './useSpecPopup'
const props = defineProps<{
visible: boolean
product: MiniProductDetail
quantity: number
displayUnitPrice: number
totalPriceText: string
summaryText: string
canAdd: boolean
disabledText: string
isSelected: (groupId: string, optionId: string) => boolean
}>()
const emit = defineEmits<{
close: []
addToCart: []
toggleOption: [group: MiniProductOptionGroup, option: MiniProductOption]
changeQty: [delta: number]
}>()
const { tagClass } = useSpecPopup()
</script>
<style lang="scss">
@import './styles/index.scss';
</style>

31
src/components/spec-popup/styles/base.scss Normal file
View File

@@ -0,0 +1,31 @@
@import '../../../styles/variables';
.spec-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 82%;
background: $card;
border-radius: 28px 28px 0 0;
z-index: 210;
display: flex;
flex-direction: column;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
overflow: hidden;
}
.spec-popup__handle {
width: 36px;
height: 4px;
border-radius: 2px;
background: $text-5;
margin: 10px auto 0;
flex-shrink: 0;
}
.spec-popup__scroll {
flex: 1;
overflow-y: auto;
max-height: 60vh;
}

74
src/components/spec-popup/styles/footer.scss Normal file
View File

@@ -0,0 +1,74 @@
@import '../../../styles/variables';
.spec-popup__footer {
padding: 14px 20px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
background: $card;
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.spec-popup__footer-price {
flex: 1;
min-width: 0;
}
.spec-popup__footer-label {
font-size: 11px;
color: $text-4;
margin-bottom: 2px;
}
.spec-popup__footer-total {
display: flex;
align-items: baseline;
gap: 2px;
}
.spec-popup__footer-unit {
font-size: 14px;
font-weight: 700;
color: $primary-dark;
}
.spec-popup__footer-value {
font-size: 26px;
font-weight: 800;
color: $primary-dark;
line-height: 1;
}
.spec-popup__footer-summary {
font-size: 11px;
color: $text-4;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.spec-popup__footer-btn {
height: 48px;
min-width: 140px;
padding: 0 28px;
border-radius: 24px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
letter-spacing: 0.3px;
&--disabled {
background: $text-5;
box-shadow: none;
pointer-events: none;
}
}

104
src/components/spec-popup/styles/header.scss Normal file
View File

@@ -0,0 +1,104 @@
@import '../../../styles/variables';
.spec-popup__header {
display: flex;
gap: 14px;
padding: 6px 20px 16px;
position: relative;
}
.spec-popup__img {
width: 100px;
height: 100px;
border-radius: $r-md;
flex-shrink: 0;
box-shadow: $shadow-sm;
background: linear-gradient(135deg, #FED7AA, #FDBA74);
}
.spec-popup__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.spec-popup__name {
font-size: 17px;
font-weight: 700;
color: $text-1;
line-height: 1.4;
}
.spec-popup__desc {
font-size: 12px;
color: $text-3;
margin-top: 4px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.spec-popup__tags {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.spec-popup__tag {
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 5px;
line-height: 1.5;
&--hot { background: $red-light; color: #DC2626; }
&--new { background: $primary-light; color: $primary; }
&--sales { background: $border; color: $text-3; }
}
.spec-popup__price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 8px;
}
.spec-popup__price-unit {
font-size: 13px;
font-weight: 700;
color: $primary-dark;
}
.spec-popup__price-current {
font-size: 22px;
font-weight: 800;
color: $primary-dark;
line-height: 1;
}
.spec-popup__price-origin {
font-size: 12px;
color: $text-4;
text-decoration: line-through;
}
.spec-popup__close {
position: absolute;
top: 6px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: $border;
display: flex;
align-items: center;
justify-content: center;
color: $text-4;
font-size: 14px;
}

5
src/components/spec-popup/styles/index.scss Normal file
View File

@@ -0,0 +1,5 @@
@import './base.scss';
@import './header.scss';
@import './options.scss';
@import './stepper.scss';
@import './footer.scss';

73
src/components/spec-popup/styles/options.scss Normal file
View File

@@ -0,0 +1,73 @@
@import '../../../styles/variables';
.spec-popup__group {
padding: 16px 20px;
border-top: 0.5px solid $border;
}
.spec-popup__group-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.spec-popup__group-title {
font-size: 15px;
font-weight: 600;
color: $text-1;
}
.spec-popup__group-tag {
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
line-height: 1.6;
&--required { background: $red-light; color: $red; }
&--multi { background: $primary-light; color: $primary; }
}
.spec-popup__pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.spec-popup__pill {
height: 38px;
padding: 0 18px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: $text-2;
background: $bg;
border: 1.5px solid transparent;
border-radius: 14px;
white-space: nowrap;
&--selected {
background: $primary-lighter;
border-color: $primary;
color: $primary-darker;
font-weight: 600;
}
&--disabled {
opacity: 0.35;
pointer-events: none;
}
}
.spec-popup__pill-extra {
font-size: 12px;
color: $text-4;
font-weight: 400;
.spec-popup__pill--selected & {
color: $primary;
}
}

46
src/components/spec-popup/styles/stepper.scss Normal file
View File

@@ -0,0 +1,46 @@
@import '../../../styles/variables';
.spec-popup__stepper-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-top: 0.5px solid $border;
}
.spec-popup__stepper-label {
font-size: 15px;
font-weight: 600;
color: $text-1;
}
.spec-popup__stepper {
display: flex;
align-items: center;
}
.spec-popup__stepper-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid $text-5;
background: $card;
display: flex;
align-items: center;
justify-content: center;
color: $text-2;
font-size: 16px;
&--disabled {
opacity: 0.35;
pointer-events: none;
}
}
.spec-popup__stepper-value {
width: 48px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: $text-1;
}

11
src/components/spec-popup/useSpecPopup.ts Normal file
View File

@@ -0,0 +1,11 @@
export function useSpecPopup () {
function tagClass (tag: string) {
if (['招牌', '热卖', '热销'].includes(tag)) return 'spec-popup__tag--hot'
if (['新品'].includes(tag)) return 'spec-popup__tag--new'
return 'spec-popup__tag--sales'
}
return {
tagClass
}
}