master/member-miniapp/pages/mall/mall.vue

<template>
  <view class="page-shell mall-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>
    <view class="page-content">
      <view class="mall-header capsule-safe">
        <view>
          <text class="mall-title">美容商城</text>
          <text class="mall-subtitle">把门店里的护理感，慢慢带回日常。</text>
        </view>
      </view>
      <view class="feature-card glass-card">
        <view class="feature-copy">
          <text class="feature-tag">CURATED COLLECTION</text>
          <text class="feature-title">把门店里的护理感带回家</text>
          <text class="feature-desc">按当下所需慢慢挑选，在轻盈的双列陈列里，找到适合自己的护理好物。</text>
        </view>
        <view class="feature-art-wrap">
          <image class="feature-art" src="/static/images/art-home.png" mode="aspectFill" />
        </view>
      </view>
      <view class="search-card glass-card">
        <view class="search-icon"></view>
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索精华、面膜、身体护理、香氛好物"
          placeholder-class="search-placeholder"
          confirm-type="search"
        />
      </view>
      <view class="category-row">
        <view
          v-for="item in categories"
          :key="item"
          class="category-chip"
          :class="{ active: activeCategory === item }"
          @tap="activeCategory = item"
        >
          {{ item }}
        </view>
      </view>
      <view class="section-head product-head">
        <text class="section-title">甄选好物</text>
        <text class="section-link">{{ filteredProducts.length }} 件在售</text>
      </view>
      <view v-if="filteredProducts.length" class="waterfall">
        <view class="waterfall-col">
          <view
            v-for="product in leftProducts"
            :key="product.name"
            class="product-card glass-card"
            @tap="previewProduct(product)"
          >
            <view class="product-cover" :style="product.coverStyle">
              <image class="product-photo" :src="product.image" mode="aspectFill" />
              <view class="product-cover-mask"></view>
              <text class="product-badge">{{ product.badge }}</text>
              <text class="product-cover-title">{{ product.coverTitle }}</text>
            </view>
            <view class="product-body">
              <text class="product-name">{{ product.name }}</text>
              <view class="product-tags">
                <text v-for="tag in product.tags" :key="tag" class="product-tag">{{ tag }}</text>
              </view>
              <view class="product-footer">
                <view>
                  <text class="price-symbol">¥</text>
                  <text class="product-price">{{ product.price }}</text>
                </view>
                <text class="product-sales">已售 {{ product.sales }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="waterfall-col">
          <view
            v-for="product in rightProducts"
            :key="product.name"
            class="product-card glass-card"
            @tap="previewProduct(product)"
          >
            <view class="product-cover" :style="product.coverStyle">
              <image class="product-photo" :src="product.image" mode="aspectFill" />
              <view class="product-cover-mask"></view>
              <text class="product-badge">{{ product.badge }}</text>
              <text class="product-cover-title">{{ product.coverTitle }}</text>
            </view>
            <view class="product-body">
              <text class="product-name">{{ product.name }}</text>
              <view class="product-tags">
                <text v-for="tag in product.tags" :key="tag" class="product-tag">{{ tag }}</text>
              </view>
              <view class="product-footer">
                <view>
                  <text class="price-symbol">¥</text>
                  <text class="product-price">{{ product.price }}</text>
                </view>
                <text class="product-sales">已售 {{ product.sales }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-card glass-card">
        <text class="empty-title">暂未找到相关商品</text>
        <text class="empty-desc">可以换个关键词，或切换分类继续看看。</text>
      </view>
      <view class="safe-bottom-space"></view>
    </view>
    <view class="lf-tabbar-wrap">
      <view class="lf-tabbar-panel">
        <view
          v-for="item in tabs"
          :key="item.key"
          class="lf-tabbar-item"
          :class="{ active: item.key === 'mall' }"
          @tap="goTab(item)"
        >
          <view class="lf-tabbar-icon-shell">
            <image
              class="lf-tabbar-icon"
              :src="item.key === 'mall' ? item.activeIcon : item.icon"
              mode="aspectFit"
            />
          </view>
          <text class="lf-tabbar-label">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { products } from '@/packageMall/data/products'
export default {
  data() {
    return {
      tabs: [
        {
          key: 'home',
          label: '首页',
          path: '/pages/home/home',
          icon: '/static/images/tab-home.png',
          activeIcon: '/static/images/tab-home-active.png'
        },
        {
          key: 'booking',
          label: '预约',
          path: '/pages/booking/booking',
          icon: '/static/images/tab-booking.png',
          activeIcon: '/static/images/tab-booking-active.png'
        },
        {
          key: 'mall',
          label: '商城',
          path: '/packageMall/main/main',
          icon: '/static/images/tab-mall.png',
          activeIcon: '/static/images/tab-mall-active.png'
        },
        {
          key: 'profile',
          label: '我的',
          path: '/pages/profile/profile',
          icon: '/static/images/tab-profile.png',
          activeIcon: '/static/images/tab-profile-active.png'
        }
      ],
      activeCategory: '推荐',
      searchKeyword: '',
      categories: ['推荐', '新品', '面部护理', '身体护理', '香氛好物'],
      products
    }
  },
  computed: {
    filteredProducts() {
      const categoryList = this.activeCategory === '推荐'
        ? this.products.filter(item => item.categories.indexOf('推荐') > -1)
        : this.products.filter(item => item.categories.indexOf(this.activeCategory) > -1)
      const keyword = String(this.searchKeyword || '').trim()
      if (!keyword) {
        return categoryList
      }
      return categoryList.filter(item =>
        item.name.indexOf(keyword) > -1 ||
        item.coverTitle.indexOf(keyword) > -1 ||
        item.tags.join(' ').indexOf(keyword) > -1 ||
        item.categories.join(' ').indexOf(keyword) > -1
      )
    },
    distributedColumns() {
      const columns = [
        { height: 0, items: [] },
        { height: 0, items: [] }
      ]
      this.filteredProducts.forEach((product) => {
        const target = columns[0].height <= columns[1].height ? columns[0] : columns[1]
        target.items.push(product)
        target.height += product.height
      })
      return columns
    },
    leftProducts() {
      return this.distributedColumns[0].items
    },
    rightProducts() {
      return this.distributedColumns[1].items
    }
  },
  methods: {
    previewProduct(product) {
      uni.navigateTo({
        url: `/packageMall/product-detail/product-detail?id=${product.id}`
      })
    },
    goTab(item) {
      if (item.key === 'mall') {
        return
      }
      uni.redirectTo({
        url: item.path
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
.mall-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28rpx;
}
.mall-title {
  display: block;
  font-size: 44rpx;
  font-weight: 700;
}
.mall-subtitle {
  display: block;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: $text-secondary;
  line-height: 1.7;
}
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 260rpx;
  margin-bottom: 28rpx;
  padding: 34rpx;
  &::after {
    content: '';
    position: absolute;
    right: -82rpx;
    top: -10rpx;
    width: 380rpx;
    height: 380rpx;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 140, 118, 0.04), rgba(100, 140, 118, 0));
    z-index: 0;
  }
  &::before {
    content: '';
    position: absolute;
    right: 6rpx;
    top: 60rpx;
    width: 220rpx;
    height: 220rpx;
    border-radius: 50%;
    border: 2rpx solid rgba(100, 140, 118, 0.035);
    z-index: 1;
  }
}
.feature-copy {
  position: relative;
  z-index: 3;
  max-width: 100%;
  padding-right: 36rpx;
}
.feature-tag {
  display: inline-block;
  font-size: 20rpx;
  letter-spacing: 3rpx;
  color: $brand-primary;
}
.feature-title {
  display: block;
  margin: 16rpx 0 12rpx;
  font-size: 40rpx;
  font-weight: 700;
  line-height: 1.35;
}
.feature-desc {
  display: block;
  font-size: 24rpx;
  color: $text-secondary;
  line-height: 1.8;
}
.feature-art-wrap {
  position: absolute;
  right: -118rpx;
  top: -34rpx;
  z-index: 1;
  width: 420rpx;
  height: 420rpx;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 34% 40%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0));
  }
}
.feature-art {
  width: 480rpx;
  height: 480rpx;
  margin-left: -38rpx;
  margin-top: -28rpx;
  transform: rotate(-10deg) scale(1.04);
  filter: saturate(0.72) brightness(1.04);
}
.search-card {
  @include outlined-card(0.92);
  display: flex;
  align-items: center;
  min-height: 92rpx;
  margin-bottom: 24rpx;
  padding: 0 26rpx;
}
.search-icon {
  position: relative;
  width: 36rpx;
  height: 36rpx;
  margin-right: 18rpx;
  border: 3rpx solid rgba(182, 142, 154, 0.42);
  border-radius: 50%;
  &::after {
    content: '';
    position: absolute;
    width: 16rpx;
    height: 3rpx;
    right: -8rpx;
    bottom: 0;
    background: rgba(182, 142, 154, 0.42);
    transform: rotate(45deg);
    border-radius: 999rpx;
  }
}
.search-input {
  flex: 1;
  height: 92rpx;
  font-size: 26rpx;
  color: $text-primary;
}
.search-placeholder {
  color: $text-tertiary;
}
.category-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 28rpx;
}
.category-chip {
  padding: 16rpx 28rpx;
  margin: 0 16rpx 16rpx 0;
  border-radius: 999rpx;
  font-size: 24rpx;
  color: $text-secondary;
  background: rgba(255, 255, 255, 0.80);
  border: 1rpx solid rgba(210, 191, 156, 0.14);
}
.category-chip.active {
  color: #fff;
  background: $brand-primary-deep;
  border-color: rgba(210, 191, 156, 0.22);
  box-shadow: $shadow-chip;
}
.product-head {
  margin-bottom: 18rpx;
}
.waterfall {
  display: flex;
  justify-content: space-between;
}
.waterfall-col {
  width: calc((100% - 18rpx) / 2);
}
.product-card {
  @include outlined-card(0.92);
  overflow: hidden;
  margin-bottom: 20rpx;
  padding: 0;
}
.product-cover {
  position: relative;
  padding: 24rpx;
  color: #fff;
}
.product-photo,
.product-cover-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.product-cover-mask {
  background: linear-gradient(180deg, rgba(32, 53, 45, 0.02), rgba(32, 53, 45, 0.08) 56%, rgba(32, 53, 45, 0.36) 100%);
}
.product-badge {
  position: relative;
  z-index: 2;
  @include chip-inverse;
}
.product-cover-title {
  position: absolute;
  left: 24rpx;
  right: 24rpx;
  bottom: 24rpx;
  z-index: 2;
  font-size: 34rpx;
  line-height: 1.35;
  font-weight: 700;
}
.product-body {
  padding: 24rpx;
}
.product-name {
  display: block;
  font-size: 30rpx;
  line-height: 1.45;
  font-weight: 700;
}
.product-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16rpx;
}
.product-tag {
  @include chip-soft;
  margin: 0 12rpx 12rpx 0;
  font-size: 20rpx;
  padding: 8rpx 16rpx;
}
.product-tag:nth-child(2) {
  @include chip-rose;
}
.product-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12rpx;
}
.price-symbol,
.product-price {
  color: $brand-primary-deep;
  font-weight: 700;
}
.price-symbol {
  font-size: 22rpx;
  color: $brand-accent;
}
.product-sales {
  color: $brand-rose;
}
.product-price {
  font-size: 38rpx;
}
.product-sales {
  font-size: 22rpx;
  color: $text-tertiary;
}
.empty-card {
  @include outlined-card(0.94);
  padding: 40rpx 32rpx;
  text-align: center;
}
.empty-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: $text-primary;
}
.empty-desc {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: $text-secondary;
}
</style>