master/member-miniapp/packageMall/main/main.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"
          @confirm="onSearch"
        />
      </view>
      <view class="category-row">
        <view
          v-for="item in categories"
          :key="item"
          class="category-chip"
          :class="{ active: activeCategory === item }"
          @tap="selectCategory(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="category-row sort-row">
        <view
          v-for="item in sorts"
          :key="item.key"
          class="category-chip"
          :class="{ active: activeSort === item.key }"
          @tap="selectSort(item.key)"
        >
          {{ item.label }}
        </view>
      </view>
      <view class="section-head product-head">
        <text class="section-title">甄选好物</text>
        <text class="section-link">{{ total }} 件在售</text>
      </view>
      <view v-if="products.length" class="waterfall">
        <view class="waterfall-col">
          <view
            v-for="product in leftProducts"
            :key="product.id"
            class="product-card glass-card"
            @tap="previewProduct(product)"
          >
            <view class="product-cover" :style="product.coverStyle">
              <image v-if="product.image" class="product-photo" :src="product.image" mode="aspectFill" />
              <view class="product-cover-mask"></view>
              <text v-if="product.categoryName" class="product-badge">{{ product.categoryName }}</text>
            </view>
            <view class="product-body">
              <text class="product-name">{{ product.name }}</text>
              <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.id"
            class="product-card glass-card"
            @tap="previewProduct(product)"
          >
            <view class="product-cover" :style="product.coverStyle">
              <image v-if="product.image" class="product-photo" :src="product.image" mode="aspectFill" />
              <view class="product-cover-mask"></view>
              <text v-if="product.categoryName" class="product-badge">{{ product.categoryName }}</text>
            </view>
            <view class="product-body">
              <text class="product-name">{{ product.name }}</text>
              <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-if="!loading" class="empty-card glass-card">
        <text class="empty-title">暂未找到相关商品</text>
        <text class="empty-desc">可以换个关键词，或切换分类继续看看。</text>
      </view>
      <view v-if="loading" class="list-tip">正在加载…</view>
      <view v-else-if="finished && products.length" class="list-tip">已经到底啦</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 { getMallList, getMallCategories } from '@/api/mall'
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: '',
      // 分类标签：默认仅「全部」，onLoad 时从后端「分类管理」拉取启用分类
      categories: ['全部'],
      activeSort: 'default',
      sorts: [
        { key: 'default', label: '综合' },
        { key: 'sales', label: '销量' },
        { key: 'priceAsc', label: '价格升' },
        { key: 'priceDesc', label: '价格降' }
      ],
      products: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      finished: false
    }
  },
  computed: {
    distributedColumns() {
      const columns = [
        { height: 0, items: [] },
        { height: 0, items: [] }
      ]
      this.products.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
    }
  },
  onLoad() {
    this.loadCategories()
    this.resetAndLoad()
  },
  onReachBottom() {
    this.loadList()
  },
  onPullDownRefresh() {
    this.resetAndLoad(() => uni.stopPullDownRefresh())
  },
  methods: {
    normalize(item, index) {
      const height = 320 + ((index * 37) % 130)
      return {
        id: item.id,
        name: item.productName,
        image: item.coverImg || '',
        categoryName: item.categoryName || '',
        price: item.price,
        originalPrice: item.originalPrice,
        sales: item.sales || 0,
        stock: item.stock,
        height,
        coverStyle: `height:${height}rpx;background:rgba(245,248,245,0.96);`
      }
    },
    loadCategories() {
      getMallCategories()
        .then((res) => {
          const list = Array.isArray(res) ? res : (res && res.data) || []
          const names = list.map((c) => c.name).filter((n) => !!n)
          this.categories = ['全部'].concat(names)
        })
        .catch(() => {
          this.categories = ['全部']
        })
    },
    resetAndLoad(done) {
      this.currentPage = 1
      this.products = []
      this.total = 0
      this.finished = false
      this.loadList(done)
    },
    loadList(done) {
      if (this.loading || this.finished) {
        if (done) done()
        return
      }
      this.loading = true
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        SortBy: this.activeSort
      }
      const keyword = String(this.searchKeyword || '').trim()
      if (keyword) params.Keyword = keyword
      if (this.activeCategory && this.activeCategory !== '全部') params.CategoryName = this.activeCategory
      getMallList(params)
        .then((res) => {
          const list = (res && res.list) || []
          const startIndex = this.products.length
          const mapped = list.map((item, i) => this.normalize(item, startIndex + i))
          this.products = this.products.concat(mapped)
          const pagination = (res && res.pagination) || {}
          this.total = pagination.total || this.products.length
          if (list.length < this.pageSize || this.products.length >= this.total) {
            this.finished = true
          } else {
            this.currentPage += 1
          }
          this.loading = false
          if (done) done()
        })
        .catch(() => {
          this.loading = false
          if (done) done()
        })
    },
    onSearch() {
      this.resetAndLoad()
    },
    selectCategory(item) {
      if (this.activeCategory === item) return
      this.activeCategory = item
      this.resetAndLoad()
    },
    selectSort(key) {
      if (this.activeSort === key) return
      this.activeSort = key
      this.resetAndLoad()
    },
    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;
    animation: lfFloatSoft 11.8s ease-in-out infinite;
  }
  &::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;
    animation: lfPulseSoft 8.6s ease-in-out infinite;
  }
}
.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;
  animation: lfFloatSoft 13.2s ease-in-out infinite 0.6s;
  &::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;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}
.search-card:active {
  transform: translateY(-3rpx);
}
.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);
  transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease, color 240ms ease;
}
.category-chip:active {
  transform: translateY(-2rpx) scale(0.98);
}
.category-chip.active {
  color: #fff;
  background: $brand-primary-deep;
  border-color: rgba(210, 191, 156, 0.22);
  box-shadow: $shadow-chip;
}
.sort-row {
  margin-top: -8rpx;
}
.product-head {
  margin-bottom: 18rpx;
}
.list-tip {
  margin: 16rpx 0 8rpx;
  text-align: center;
  font-size: 22rpx;
  color: $text-tertiary;
}
.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;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease;
  animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.waterfall-col:nth-child(1) .product-card:nth-child(1),
.waterfall-col:nth-child(2) .product-card:nth-child(1) {
  animation-delay: 0.12s;
}
.waterfall-col:nth-child(1) .product-card:nth-child(2),
.waterfall-col:nth-child(2) .product-card:nth-child(2) {
  animation-delay: 0.2s;
}
.waterfall-col:nth-child(1) .product-card:nth-child(3),
.waterfall-col:nth-child(2) .product-card:nth-child(3) {
  animation-delay: 0.28s;
}
.waterfall-col:nth-child(1) .product-card:nth-child(4),
.waterfall-col:nth-child(2) .product-card:nth-child(4) {
  animation-delay: 0.36s;
}
.product-card:active {
  transform: translateY(-6rpx);
  box-shadow: 0 22rpx 44rpx rgba(54, 77, 64, 0.1);
}
.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-photo {
  transition: transform 1.2s ease;
}
.product-card:active .product-photo {
  transform: scale(1.06);
}
.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;
  transition: transform 240ms ease;
}
.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>