antissoft / lvqianmeiye_ERP

<template>
	<view class="mall-page">
		<custom-navbar title="绿纤商城" bgColor="rgba(248,251,250,0.92)">
			<view slot="right" class="nav-cart" @click="goCart">
				<view class="nav-cart__icon"></view>
				<view v-if="cartCount > 0" class="nav-cart__badge">
					<text>{{ cartCount > 99 ? '99+' : cartCount }}</text>
				</view>
			</view>
		</custom-navbar>

		<view class="search-entry" @click="goSearch">
			<view class="search-entry__bar">
				<view class="search-entry__icon"></view>
				<text class="search-entry__ph">搜索美容产品</text>
			</view>
		</view>

		<view class="promo-card">
			<view class="promo-card__badge">限时特惠</view>
			<text class="promo-card__title">新客专享 全场88折</text>
			<view class="promo-card__btn">
				<text>立即抢购</text>
			</view>
		</view>

		<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
			<view class="category-scroll__inner">
				<view
					v-for="(cat, i) in categories"
					:key="i"
					class="category-chip"
					:class="{ 'category-chip--active': activeCatId === cat.id }"
					@click="onCatTap(cat)"
				>
					<view class="category-chip__icon" :style="{ background: cat.bg }">
						<view class="ci" :class="'ci--' + cat.icon"></view>
					</view>
					<text class="category-chip__name">{{ cat.name }}</text>
				</view>
			</view>
		</scroll-view>

		<view class="section-head">
			<text class="section-head__title">{{ sectionTitle }}</text>
		</view>

		<view class="product-grid" v-if="displayProducts.length">
			<view class="product-grid__column">
				<view class="product-card" v-for="p in leftCol" :key="p.id" @click="goDetail(p)">
					<image class="product-card__img" :src="p.img" mode="aspectFill" lazy-load />
					<view class="product-card__body">
						<text class="product-card__name">{{ p.name }}</text>
						<view class="product-card__tags">
							<text
								v-for="(t, ti) in (p.tags || []).slice(0, 2)"
								:key="ti"
								class="product-card__tag"
								:class="{ 'product-card__tag--hot': t === '热销' || t === '新品' }"
							>{{ t }}</text>
						</view>
						<view class="product-card__price-row">
							<view class="product-card__price">
								<text class="symbol">¥</text>
								<text class="int">{{ getPrice(p.price).integer }}</text>
								<text class="decimal">{{ getPrice(p.price).decimal }}</text>
							</view>
							<text v-if="p.orig" class="product-card__del">¥{{ p.orig }}</text>
						</view>
						<text class="product-card__sold">已售{{ p.sales }}</text>
					</view>
				</view>
			</view>
			<view class="product-grid__column">
				<view class="product-card" v-for="p in rightCol" :key="p.id" @click="goDetail(p)">
					<image class="product-card__img" :src="p.img" mode="aspectFill" lazy-load />
					<view class="product-card__body">
						<text class="product-card__name">{{ p.name }}</text>
						<view class="product-card__tags">
							<text
								v-for="(t, ti) in (p.tags || []).slice(0, 2)"
								:key="ti"
								class="product-card__tag"
								:class="{ 'product-card__tag--hot': t === '热销' || t === '新品' }"
							>{{ t }}</text>
						</view>
						<view class="product-card__price-row">
							<view class="product-card__price">
								<text class="symbol">¥</text>
								<text class="int">{{ getPrice(p.price).integer }}</text>
								<text class="decimal">{{ getPrice(p.price).decimal }}</text>
							</view>
							<text v-if="p.orig" class="product-card__del">¥{{ p.orig }}</text>
						</view>
						<text class="product-card__sold">已售{{ p.sales }}</text>
					</view>
				</view>
			</view>
		</view>

		<empty-state v-else text="暂无商品" type="search" />

		<view class="load-tip" v-if="displayProducts.length && !noMore">
			<view v-if="loading" class="ld-dots">
				<view class="ld-dots__i"></view>
				<view class="ld-dots__i"></view>
				<view class="ld-dots__i"></view>
			</view>
			<text v-else class="load-tip__t">上拉加载更多</text>
		</view>
		<view class="load-tip" v-if="noMore && displayProducts.length">
			<text class="load-tip__t">已经到底了</text>
		</view>

		<view class="floating-cart" @click="goCart">
			<view class="floating-cart__btn">
				<view class="floating-cart__icon"></view>
			</view>
			<view v-if="cartCount > 0" class="floating-cart__badge">
				<text>{{ cartCount > 99 ? '99+' : cartCount }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { formatPrice } from '@/common/utils.js'

export default {
	data() {
		return {
			activeCatId: 0,
			cartCount: 3,
			loading: false,
			noMore: false,
			page: 1,
			categories: [
				{ id: 1, name: '面部护理', icon: 'face', bg: 'linear-gradient(135deg, #FFE0E6, #FFC1CF)' },
				{ id: 2, name: '身体护理', icon: 'body', bg: 'linear-gradient(135deg, #EDE0FF, #D4B8FF)' },
				{ id: 3, name: '洗护产品', icon: 'wash', bg: 'linear-gradient(135deg, #D6EDFF, #AED6FF)' },
				{ id: 4, name: '美容仪器', icon: 'device', bg: 'linear-gradient(135deg, #FFE8D6, #FFCBA4)' },
				{ id: 5, name: '面膜系列', icon: 'mask', bg: 'linear-gradient(135deg, #D4F5E9, #A3E8CB)' },
				{ id: 6, name: '精油香薰', icon: 'aroma', bg: 'linear-gradient(135deg, #FFF2D6, #FFE0A3)' },
				{ id: 7, name: '套装礼盒', icon: 'gift', bg: 'linear-gradient(135deg, #FFD6D6, #FFB0B0)' },
				{ id: 8, name: '美甲用品', icon: 'nail', bg: 'linear-gradient(135deg, #D6F5F5, #A3E8E8)' },
				{ id: 9, name: '新品上市', icon: 'spark', bg: 'linear-gradient(135deg, #2DB48D, #7DDFC3)' },
				{ id: 10, name: '更多', icon: 'grid', bg: 'linear-gradient(135deg, #E8ECF0, #D0D5DC)' }
			],
			allProducts: [
				{
					id: '1', catId: 5,
					name: '绿纤玻尿酸补水面膜 20片装',
					img: 'https://picsum.photos/seed/lq1/400/500',
					price: 128.00, orig: '168.00', sales: 2680,
					tags: ['门店同款', '热销']
				},
				{
					id: '2', catId: 1,
					name: '胶原蛋白精华液 30ml 紧致修护',
					img: 'https://picsum.photos/seed/lq2/400/520',
					price: 268.00, orig: '328.00', sales: 1350,
					tags: ['抗衰老', '精华']
				},
				{
					id: '3', catId: 3,
					name: '氨基酸温和洁面乳 150ml',
					img: 'https://picsum.photos/seed/lq3/400/480',
					price: 89.00, orig: '119.00', sales: 4520,
					tags: ['温和', '热销']
				},
				{
					id: '4', catId: 4,
					name: '微电流美容仪 V脸提拉紧致',
					img: 'https://picsum.photos/seed/lq4/400/500',
					price: 899.00, orig: '1299.00', sales: 568,
					tags: ['门店同款']
				},
				{
					id: '5', catId: 6,
					name: '薰衣草舒缓精油 30ml 天然植物',
					img: 'https://picsum.photos/seed/lq5/400/500',
					price: 158.00, orig: '198.00', sales: 980,
					tags: ['助眠']
				},
				{
					id: '6', catId: 7,
					name: '绿纤尊享护肤礼盒 五件套',
					img: 'https://picsum.photos/seed/lq6/400/520',
					price: 688.00, orig: '888.00', sales: 890,
					tags: ['门店同款', '送礼']
				},
				{
					id: '7', catId: 2,
					name: '海盐身体磨砂膏 嫩滑紧致',
					img: 'https://picsum.photos/seed/lq7/400/480',
					price: 118.00, orig: '158.00', sales: 2100,
					tags: ['热销']
				},
				{
					id: '8', catId: 8,
					name: '48W智能光疗美甲灯',
					img: 'https://picsum.photos/seed/lq8/400/500',
					price: 199.00, orig: '299.00', sales: 326,
					tags: ['新品']
				},
				{
					id: '9', catId: 1,
					name: '烟酰胺亮肤精华水 200ml',
					img: 'https://picsum.photos/seed/lq9/400/500',
					price: 158.00, orig: '208.00', sales: 2100,
					tags: ['美白']
				},
				{
					id: '10', catId: 4,
					name: 'LED光子嫩肤面罩 红蓝光',
					img: 'https://picsum.photos/seed/lq10/400/500',
					price: 1299.00, orig: '1699.00', sales: 326,
					tags: ['门店同款']
				}
			]
		}
	},
	computed: {
		displayProducts() {
			if (!this.activeCatId) return this.allProducts
			return this.allProducts.filter(p => p.catId === this.activeCatId)
		},
		leftCol() {
			return this.displayProducts.filter((_, i) => i % 2 === 0)
		},
		rightCol() {
			return this.displayProducts.filter((_, i) => i % 2 === 1)
		},
		sectionTitle() {
			if (!this.activeCatId) return '热销推荐'
			const cat = this.categories.find(c => c.id === this.activeCatId)
			return cat ? cat.name : '热销推荐'
		}
	},
	onPullDownRefresh() {
		this.activeCatId = 0
		this.page = 1
		this.noMore = false
		setTimeout(() => uni.stopPullDownRefresh(), 500)
	},
	onReachBottom() {
		if (this.loading || this.noMore) return
		this.loadMore()
	},
	methods: {
		getPrice(val) {
			return formatPrice(val)
		},
		loadMore() {
			this.loading = true
			setTimeout(() => {
				this.noMore = true
				this.loading = false
			}, 1000)
		},
		onCatTap(cat) {
			if (cat.id === 10) return
			this.activeCatId = this.activeCatId === cat.id ? 0 : cat.id
		},
		goSearch() {
			uni.navigateTo({ url: '/pagesA/search-result/search-result' })
		},
		goDetail(item) {
			uni.navigateTo({ url: `/pagesA/product-detail/product-detail?id=${item.id}` })
		},
		goCart() {
			uni.navigateTo({ url: '/pagesA/cart/cart' })
		}
	}
}
</script>

<style lang="scss" scoped>
.mall-page {
	min-height: 100vh;
	padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
	background:
		radial-gradient(circle at top left, rgba(45,180,141,0.18), transparent 30%),
		radial-gradient(circle at top right, rgba(255,224,192,0.16), transparent 24%),
		linear-gradient(180deg, #f8fbfa 0%, #f3f7f8 44%, #edf2f5 100%);
}

.search-entry {
	padding: 20rpx 24rpx 0;
}

.search-entry__bar {
	height: 84rpx;
	padding: 0 24rpx;
	border-radius: 999rpx;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 18rpx 36rpx rgba(15,23,42,0.06);
	display: flex;
	align-items: center;
}

.search-entry__icon {
	width: 24rpx;
	height: 24rpx;
	border: 4rpx solid $text-tertiary;
	border-radius: 50%;
	position: relative;
}

.search-entry__icon::after {
	content: '';
	position: absolute;
	width: 12rpx;
	height: 4rpx;
	background: $text-tertiary;
	right: -8rpx;
	bottom: -2rpx;
	transform: rotate(45deg);
	border-radius: 2rpx;
}

.search-entry__ph {
	margin-left: 16rpx;
	font-size: 28rpx;
	color: $text-tertiary;
}

.promo-card {
	margin: 24rpx;
	padding: 32rpx 28rpx;
	border-radius: 38rpx;
	background: linear-gradient(135deg, #1fae86 0%, #51cba7 60%, #9be7d8 100%);
	box-shadow: 0 26rpx 58rpx rgba(45,180,141,0.24);
	position: relative;
	overflow: hidden;
}

.promo-card::after {
	content: '';
	position: absolute;
	width: 220rpx;
	height: 220rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.14);
	top: -80rpx;
	right: -70rpx;
}

.promo-card__badge {
	display: inline-flex;
	padding: 8rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(255,255,255,0.18);
	font-size: 22rpx;
	font-weight: 600;
	color: #fff;
	position: relative;
	z-index: 1;
}

.promo-card__title {
	display: block;
	margin-top: 18rpx;
	font-size: 38rpx;
	font-weight: 700;
	color: #fff;
	position: relative;
	z-index: 1;
}

.promo-card__btn {
	margin-top: 24rpx;
	display: inline-flex;
	padding: 16rpx 28rpx;
	border-radius: 999rpx;
	background: rgba(255,255,255,0.96);
	font-size: 24rpx;
	font-weight: 700;
	color: $brand-primary;
	position: relative;
	z-index: 1;
}

.category-scroll {
	white-space: nowrap;
	padding-left: 24rpx;
}

.category-scroll__inner {
	display: inline-flex;
	gap: 14rpx;
	padding-right: 24rpx;
}

.category-chip {
	width: 140rpx;
	padding: 18rpx 14rpx;
	border-radius: 28rpx;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 16rpx 34rpx rgba(15,23,42,0.06);
	text-align: center;
	flex-shrink: 0;
}

.category-chip--active {
	background: rgba(255,255,255,0.98);
	box-shadow: 0 18rpx 38rpx rgba(45,180,141,0.16);
}

.category-chip__icon {
	width: 72rpx;
	height: 72rpx;
	margin: 0 auto;
	border-radius: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-chip__name {
	display: block;
	margin-top: 14rpx;
	font-size: 23rpx;
	line-height: 1.35;
	color: $text-secondary;
}

.category-chip--active .category-chip__name {
	color: $brand-primary;
	font-weight: 700;
}

.section-head {
	padding: 34rpx 24rpx 22rpx;
}

.section-head__title {
	font-size: 36rpx;
	font-weight: 700;
	color: $text-primary;
}

.product-grid {
	display: flex;
	gap: 16rpx;
	padding: 0 24rpx;
}

.product-grid__column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.product-card {
	border-radius: 30rpx;
	overflow: hidden;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 20rpx 46rpx rgba(15,23,42,0.08);
}

.product-card__img {
	width: 100%;
	height: 340rpx;
	background: #e8edf2;
}

.product-card__body {
	padding: 22rpx 22rpx 24rpx;
}

.product-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 28rpx;
	line-height: 1.48;
	font-weight: 700;
	color: $text-primary;
}

.product-card__tags {
	display: flex;
	gap: 8rpx;
	flex-wrap: wrap;
	margin-top: 12rpx;
}

.product-card__tag {
	padding: 6rpx 12rpx;
	border-radius: 999rpx;
	font-size: 20rpx;
	color: $brand-primary;
	background: rgba(45,180,141,0.1);
}

.product-card__tag--hot {
	color: $color-danger;
	background: rgba(230,91,101,0.08);
}

.product-card__price-row {
	margin-top: 14rpx;
	display: flex;
	align-items: baseline;
	gap: 8rpx;
}

.product-card__price {
	color: $color-danger;
	font-weight: 700;
}

.product-card__price .symbol,
.product-card__price .decimal {
	font-size: 22rpx;
}

.product-card__price .int {
	font-size: 36rpx;
}

.product-card__del {
	font-size: 22rpx;
	color: $text-tertiary;
	text-decoration: line-through;
}

.product-card__sold {
	display: block;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: $text-tertiary;
}

.load-tip {
	padding: 32rpx 0 14rpx;
	display: flex;
	justify-content: center;
}

.load-tip__t {
	font-size: 24rpx;
	color: $text-tertiary;
}

.ld-dots {
	display: flex;
	gap: 8rpx;
}

.ld-dots__i {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: $brand-primary;
	animation: pulse 1.2s infinite ease-in-out;
}

.ld-dots__i:nth-child(2) { animation-delay: .2s; }
.ld-dots__i:nth-child(3) { animation-delay: .4s; }

.floating-cart {
	position: fixed;
	right: 28rpx;
	bottom: calc(env(safe-area-inset-bottom) + 160rpx);
	z-index: 40;
}

.floating-cart__btn {
	width: 104rpx;
	height: 104rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #22b18a 0%, #6fdab9 100%);
	box-shadow: 0 22rpx 40rpx rgba(45,180,141,0.28);
	display: flex;
	align-items: center;
	justify-content: center;
}

.floating-cart__icon,
.nav-cart__icon {
	position: relative;
	width: 28rpx;
	height: 22rpx;
	border: 3rpx solid currentColor;
	border-radius: 4rpx 4rpx 10rpx 10rpx;
}

.floating-cart__icon {
	color: #fff;
}

.nav-cart__icon {
	color: $text-primary;
}

.floating-cart__icon::before,
.nav-cart__icon::before {
	content: '';
	position: absolute;
	top: -10rpx;
	left: 50%;
	width: 14rpx;
	height: 10rpx;
	border: 3rpx solid currentColor;
	border-bottom: none;
	border-radius: 10rpx 10rpx 0 0;
	transform: translateX(-50%);
}

.floating-cart__badge,
.nav-cart__badge {
	position: absolute;
	top: -4rpx;
	right: -6rpx;
	min-width: 32rpx;
	height: 32rpx;
	padding: 0 8rpx;
	border-radius: 999rpx;
	background: #E65B65;
	border: 3rpx solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.floating-cart__badge text,
.nav-cart__badge text {
	font-size: 18rpx;
	font-weight: 700;
	color: #fff;
}

.nav-cart {
	position: relative;
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 22rpx rgba(15,23,42,0.06);
}

.ci { position: relative; }
.ci--face { width: 20rpx; height: 26rpx; background: #fff; border-radius: 50% 50% 50% 8rpx; transform: rotate(-45deg); }
.ci--body { width: 24rpx; height: 24rpx; background: #fff; border-radius: 4rpx 50% 4rpx 50%; }
.ci--wash { width: 16rpx; height: 24rpx; background: #fff; border-radius: 50% 8rpx 50% 50%; transform: rotate(45deg); }
.ci--device { width: 10rpx; height: 28rpx; background: #fff; border-radius: 5rpx 5rpx 3rpx 3rpx; }
.ci--device::after { content: ''; position: absolute; top: -6rpx; left: 50%; transform: translateX(-50%); width: 14rpx; height: 14rpx; border-radius: 50%; background: rgba(255,255,255,.55); }
.ci--mask { width: 22rpx; height: 28rpx; background: #fff; border-radius: 50%; }
.ci--aroma { width: 18rpx; height: 24rpx; background: #fff; border-radius: 50% 4rpx 50% 50%; transform: rotate(45deg); }
.ci--gift { width: 24rpx; height: 22rpx; border: 3rpx solid #fff; border-radius: 5rpx; }
.ci--gift::before, .ci--gift::after { content: ''; position: absolute; background: #fff; }
.ci--gift::before { left: 0; right: 0; top: 50%; height: 3rpx; transform: translateY(-50%); }
.ci--gift::after { top: 0; bottom: 0; left: 50%; width: 3rpx; transform: translateX(-50%); }
.ci--nail { width: 18rpx; height: 18rpx; background: #fff; border-radius: 4rpx; transform: rotate(45deg); }
.ci--spark { width: 6rpx; height: 26rpx; background: #fff; border-radius: 3rpx; }
.ci--spark::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26rpx; height: 6rpx; background: #fff; border-radius: 3rpx; }
.ci--grid { width: 26rpx; height: 26rpx; }
.ci--grid::before, .ci--grid::after { content: ''; position: absolute; width: 8rpx; height: 8rpx; background: #fff; border-radius: 50%; }
.ci--grid::before { top: 2rpx; left: 2rpx; box-shadow: 14rpx 0 0 #fff; }
.ci--grid::after { bottom: 2rpx; left: 2rpx; box-shadow: 14rpx 0 0 #fff; }

@keyframes pulse {
	0%,80%,100% { transform: scale(.6); opacity: .3; }
	40% { transform: scale(1); opacity: 1; }
}
</style>