master/member-miniapp/packageMall/product-detail/product-detail.vue

<template>
  <view class="page-shell product-detail-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>
    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">商品详情</text>
          <text class="subpage-subtitle">把门店里的护理感，慢慢带回日常</text>
        </view>
      </view>
      <view class="product-hero glass-card">
        <image v-if="product.coverImg" class="product-image" :src="product.coverImg" mode="aspectFill" />
        <view class="product-image-mask"></view>
        <view class="product-image-glow"></view>
        <text v-if="product.categoryName" class="product-hero-badge">{{ product.categoryName }}</text>
      </view>
      <view class="subpage-card">
        <text v-if="product.categoryName" class="product-badge">{{ product.categoryName }}</text>
        <text class="product-title">{{ product.productName }}</text>
        <view class="price-line">
          <text class="product-price">¥{{ currentPrice }}</text>
          <text v-if="currentOriginalPrice && currentOriginalPrice > currentPrice" class="product-origin-price">¥{{ currentOriginalPrice }}</text>
        </view>
        <view class="meta-grid">
          <text class="meta-pill">库存 {{ currentStock }}</text>
          <text class="meta-pill">已售 {{ product.sales || 0 }}</text>
        </view>
        <text v-if="product.description" class="product-desc">{{ product.description }}</text>
      </view>
      <view v-if="skus.length" class="subpage-card">
        <view class="section-head">
          <text class="section-title">选择规格</text>
          <text class="section-link">{{ selectedSku ? selectedSku.skuName : '请选择' }}</text>
        </view>
        <view class="sku-row">
          <view
            v-for="sku in skus"
            :key="sku.id"
            class="sku-chip"
            :class="{ active: selectedSku && selectedSku.id === sku.id, disabled: sku.stock <= 0 }"
            @tap="selectSku(sku)"
          >
            {{ sku.skuName }}
          </view>
        </view>
      </view>
      <view class="subpage-card qty-card">
        <text class="qty-label">购买数量</text>
        <view class="qty-stepper">
          <view class="qty-btn" :class="{ disabled: quantity <= 1 }" @tap="changeQty(-1)">−</view>
          <text class="qty-value">{{ quantity }}</text>
          <view class="qty-btn" :class="{ disabled: quantity >= currentStock }" @tap="changeQty(1)">+</view>
        </view>
      </view>
      <view v-if="product.detail" class="subpage-card">
        <view class="section-head">
          <text class="section-title">产品说明</text>
          <text class="section-link">居家护理</text>
        </view>
        <text class="detail-copy">{{ product.detail }}</text>
      </view>
      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">购买流程</text>
          <text class="section-link">门店自提</text>
        </view>
        <view class="flow-list">
          <view v-for="(item, index) in purchaseSteps" :key="item.title" class="flow-item">
            <view class="flow-index">{{ index + 1 }}</view>
            <view class="flow-copy">
              <text class="flow-title">{{ item.title }}</text>
              <text class="flow-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
        <view class="soft-panel flow-note">
          <text class="flow-note-text">支付完成后会自动生成取件码，到店出示后门店核销即可完成自提。</text>
        </view>
      </view>
      <view class="cta-row">
        <view class="secondary-button" @tap="addWishlist">{{ isWishlisted ? '查看心愿单' : '加入心愿单' }}</view>
        <view class="primary-button" @tap="goOrder">立即购买</view>
      </view>
    </view>
  </view>
</template>
<script>
import { getMallDetail } from '@/api/mall'
const WISHLIST_KEY = 'lf_wishlist'
export default {
  data() {
    return {
      productId: '',
      product: {},
      skus: [],
      selectedSku: null,
      quantity: 1,
      isWishlisted: false,
      purchaseSteps: [
        { title: '下单支付', desc: '确认商品后完成支付，订单会立即进入自提流程。' },
        { title: '生成取件码', desc: '支付成功后，小程序会自动生成专属取件码。' },
        { title: '到店出示', desc: '前往自提门店，出示取件码即可。' },
        { title: '门店核销', desc: '门店完成核销，订单状态会同步更新。' },
        { title: '完成自提', desc: '核销完成后即可当场自提商品，流程更轻更快。' }
      ]
    }
  },
  computed: {
    currentPrice() {
      return this.selectedSku ? this.selectedSku.price : (this.product.price || 0)
    },
    currentOriginalPrice() {
      return this.selectedSku ? this.selectedSku.originalPrice : this.product.originalPrice
    },
    currentStock() {
      const stock = this.selectedSku ? this.selectedSku.stock : this.product.stock
      return stock || 0
    }
  },
  onLoad(options) {
    this.productId = options.id
    this.loadDetail()
  },
  onShow() {
    this.loadWishlistState()
  },
  methods: {
    loadDetail() {
      getMallDetail(this.productId)
        .then((data) => {
          this.product = data || {}
          this.skus = (data && data.skus) || []
          if (this.skus.length) {
            const firstInStock = this.skus.find(s => s.stock > 0)
            this.selectedSku = firstInStock || this.skus[0]
          }
          this.loadWishlistState()
        })
        .catch(() => {})
    },
    loadWishlistState() {
      const list = uni.getStorageSync(WISHLIST_KEY) || []
      this.isWishlisted = list.some(item => String(item.id) === String(this.productId))
    },
    selectSku(sku) {
      if (sku.stock <= 0) {
        uni.showToast({ title: '该规格暂时缺货', icon: 'none' })
        return
      }
      this.selectedSku = sku
      if (this.quantity > sku.stock) this.quantity = 1
    },
    changeQty(delta) {
      const next = this.quantity + delta
      if (next < 1) return
      if (next > this.currentStock) {
        uni.showToast({ title: '已达库存上限', icon: 'none' })
        return
      }
      this.quantity = next
    },
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({ url: '/packageMall/main/main' })
        }
      })
    },
    addWishlist() {
      const list = uni.getStorageSync(WISHLIST_KEY) || []
      if (this.isWishlisted) {
        uni.navigateTo({ url: '/packageMall/wishlist/wishlist' })
        return
      }
      list.push({
        id: this.product.id,
        name: this.product.productName,
        image: this.product.coverImg || '',
        price: this.product.price,
        desc: this.product.description || ''
      })
      uni.setStorageSync(WISHLIST_KEY, list)
      this.isWishlisted = true
      uni.showToast({ title: '已加入心愿单', icon: 'none' })
      setTimeout(() => {
        uni.navigateTo({ url: '/packageMall/wishlist/wishlist' })
      }, 280)
    },
    goOrder() {
      if (this.skus.length && !this.selectedSku) {
        uni.showToast({ title: '请先选择规格', icon: 'none' })
        return
      }
      if (this.currentStock <= 0) {
        uni.showToast({ title: '商品暂时缺货', icon: 'none' })
        return
      }
      const query = [`productId=${this.product.id}`, `quantity=${this.quantity}`]
      if (this.selectedSku) query.push(`skuId=${this.selectedSku.id}`)
      uni.navigateTo({ url: `/packageMall/order-confirm/order-confirm?${query.join('&')}` })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.product-hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  margin-bottom: 28rpx;
  min-height: 620rpx;
}
.product-hero:active .product-image {
  transform: scale(1.05);
}
.product-image {
  width: 100%;
  height: 620rpx;
  display: block;
  transition: transform 1.2s ease;
}
.product-image-mask,
.product-image-glow,
.product-hero-badge {
  position: absolute;
}
.product-image-mask {
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 53, 45, 0.04), rgba(32, 53, 45, 0.12) 54%, rgba(32, 53, 45, 0.3) 100%);
}
.product-image-glow {
  right: -80rpx;
  top: -20rpx;
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  animation: lfFloatSoft 11.8s ease-in-out infinite;
}
.product-hero-badge {
  left: 28rpx;
  top: 28rpx;
  z-index: 2;
  @include chip-inverse;
}
.product-badge,
.product-price {
  position: relative;
  z-index: 2;
}
.product-badge {
  @include chip-soft;
  transition: transform 240ms ease;
}
.product-badge:active {
  transform: scale(0.97);
}
.product-title {
  display: block;
  margin-top: 18rpx;
  font-size: 40rpx;
  line-height: 1.4;
  font-weight: 700;
}
.product-price {
  display: block;
  margin-top: 18rpx;
  font-size: 46rpx;
  font-weight: 700;
  color: $brand-primary-deep;
}
.product-desc,
.detail-copy {
  display: block;
  margin-top: 18rpx;
  font-size: 24rpx;
  line-height: 1.8;
  color: $text-secondary;
}
.price-line {
  display: flex;
  align-items: baseline;
  margin-top: 18rpx;
}
.product-origin-price {
  margin-left: 16rpx;
  font-size: 26rpx;
  color: $text-tertiary;
  text-decoration: line-through;
}
.sku-row {
  display: flex;
  flex-wrap: wrap;
}
.sku-chip {
  padding: 16rpx 28rpx;
  margin: 0 16rpx 16rpx 0;
  border-radius: 999rpx;
  font-size: 24rpx;
  color: $text-secondary;
  background: rgba(255, 255, 255, 0.82);
  border: 1rpx solid rgba(210, 191, 156, 0.16);
  transition: transform 240ms ease, background 240ms ease, color 240ms ease;
}
.sku-chip.active {
  color: #fff;
  background: $brand-primary-deep;
  border-color: rgba(210, 191, 156, 0.24);
  box-shadow: $shadow-chip;
}
.sku-chip.disabled {
  opacity: 0.4;
}
.qty-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qty-label {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}
.qty-stepper {
  display: flex;
  align-items: center;
}
.qty-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18rpx;
  font-size: 36rpx;
  color: $brand-primary-deep;
  background: rgba(210, 191, 156, 0.14);
}
.qty-btn.disabled {
  opacity: 0.4;
}
.qty-value {
  min-width: 80rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
  color: $text-primary;
}
.spec-panel {
  margin-top: 24rpx;
}
.spec-item {
  display: block;
  font-size: 24rpx;
  line-height: 1.9;
  color: $text-primary;
  transition: transform 220ms ease;
}
.spec-item:active {
  transform: translateX(6rpx);
}
.flow-list {
  margin-top: 4rpx;
}
.flow-item {
  display: flex;
  align-items: flex-start;
  padding: 18rpx 0;
  border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
}
.flow-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.flow-index {
  width: 52rpx;
  height: 52rpx;
  margin-right: 18rpx;
  flex-shrink: 0;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 700;
  color: $brand-primary-deep;
  background: rgba(210, 191, 156, 0.14);
}
.flow-copy {
  flex: 1;
}
.flow-title,
.flow-desc,
.flow-note-text {
  display: block;
}
.flow-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
}
.flow-desc {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 1.8;
  color: $text-secondary;
}
.flow-note {
  margin-top: 24rpx;
}
.flow-note-text {
  font-size: 23rpx;
  line-height: 1.8;
  color: $brand-primary-deep;
}
</style>