cfc/cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
    <scroll-view v-else-if="product.id" scroll-y class="content">
      <image
        class="cover"
        :src="product.coverImage || '/static/default-product.png'"
        mode="widthFix"
        @error="onImageError"
      />
      <view class="info-section">
        <view class="name-row">
          <text class="product-name">{{ product.name }}</text>
        </view>
        <view class="price-row">
          <text class="price">{{ formatPriceWithSymbol(product.price) }}</text>
          <text v-if="product.memberPrice" class="member-price">会员价 {{ formatPriceWithSymbol(product.memberPrice) }}</text>
        </view>
        <view class="meta-row">
          <text class="meta-item" v-if="product.productType">{{ typeLabel }}</text>
          <text class="meta-item" v-if="product.domain">{{ domainLabel }}</text>
          <text class="meta-item">库存 {{ product.stock || 0 }}</text>
        </view>
        <view class="vendor-row">
          <text class="vendor-label">供应商：</text>
          <text class="vendor-name">{{ product.vendorName || '平台官方' }}</text>
        </view>
      </view>

      <view class="desc-section">
        <text class="section-title">商品介绍</text>
        <text class="desc-text">{{ product.description || '暂无介绍' }}</text>
      </view>

      <view v-if="product.intro" class="intro-section">
        <text class="section-title">详细介绍</text>
        <text class="intro-text">{{ product.intro }}</text>
      </view>

      <view class="bottom-bar">
        <view class="price-info">
          <text class="bottom-price">{{ formatPriceWithSymbol(product.price) }}</text>
          <text v-if="product.memberPrice" class="bottom-member">会员{{ formatPriceWithSymbol(product.memberPrice) }}</text>
        </view>
        <view class="action-btns">
          <view class="action-extra">
            <button class="btn-cart" @click="onAddToCart">加入购物车</button>
          </view>
          <button class="btn-buy" @click="onBuy">立即购买</button>
        </view>
      </view>
    </scroll-view>
    <view v-else class="empty-wrap">
      <text class="empty-text">商品不存在或已下架</text>
    </view>
  </view>
</template>

<script>
import { productDetail, productOrderCreate, productOrderPay, cartAdd } from '@/utils/api.js'

export default {
  data() {
    return {
      product: {},
      loading: false
    }
  },
  computed: {
    typeLabel() {
      const map = {
        activity: '活动',
        course: '课程',
        physical: '实物',
        digital: '数字',
        service: '服务'
      }
      return map[this.product.productType] || this.product.productType
    },
    domainLabel() {
      const map = {
        action: '行动',
        mind: '心智',
        body: '身体',
        wisdom: '智慧',
        wealth: '财富'
      }
      return map[this.product.domain] || this.product.domain
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadDetail(options.id)
    }
  },
  methods: {
    onImageError(e) {
      // 图片加载失败时，使用占位图（default-activity.png 已存在于 static/）
      this.product.coverImage = '/static/default-activity.png'
    },
    loadDetail(id) {
      this.loading = true
      productDetail({ id: parseInt(id) }).then(res => {
        this.loading = false
        if (res.code === 200 && res.data) {
          this.product = res.data
        }
      }).catch(() => {
        this.loading = false
      })
    },
    onBuy() {
      const userId = uni.getStorageSync('userId')
      if (!userId) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }
      uni.showLoading({ title: '创建订单...' })
      productOrderCreate({
        productId: this.product.id,
        quantity: 1,
        paymentMethod: 'wechat'
      }).then(res => {
        uni.hideLoading()
        if (res.code === 200 && res.data) {
          const orderNo = res.data.orderNo
          uni.showModal({
            title: '订单已创建',
            content: '订单号：' + orderNo + '，确定支付吗？',
            success: (confirm) => {
              if (confirm.confirm) {
                this.doPay(orderNo)
              }
            }
          })
        } else {
          uni.showToast({ title: res.message || '创建订单失败', icon: 'none' })
        }
      }).catch(() => {
        uni.hideLoading()
        uni.showToast({ title: '创建订单失败', icon: 'none' })
      })
    },
    onAddToCart() {
      const userId = uni.getStorageSync('userId')
      if (!userId) {
        uni.navigateTo({ url: '/pages/login/login' })
        return
      }
      uni.showLoading({ title: '加入购物车...' })
      cartAdd({
        userId: userId,
        productId: this.product.id,
        quantity: 1
      }).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '已加入购物车', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '加入购物车失败', icon: 'none' })
        }
      }).catch(() => {
        uni.hideLoading()
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    },
    doPay(orderNo) {
      uni.showLoading({ title: '支付中...' })
      productOrderPay({ orderNo }).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          uni.showToast({ title: '支付成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
          }, 1500)
        } else {
          uni.showToast({ title: res.message || '支付失败', icon: 'none' })
        }
      }).catch(() => {
        uni.hideLoading()
        uni.showToast({ title: '支付失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.loading-wrap,
.empty-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}
.loading-text,
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.content {
  height: calc(100vh - 120rpx);
  padding-bottom: 120rpx;
}
.cover {
  width: 100%;
  background: #f0f0f0;
}
.info-section {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.name-row {
  margin-bottom: 16rpx;
}
.product-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}
.price-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}
.price {
  font-size: 40rpx;
  color: #F97316;
  font-weight: bold;
  margin-right: 20rpx;
}
.member-price {
  font-size: 26rpx;
  color: #999;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12rpx;
}
.meta-item {
  font-size: 22rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}
.vendor-row {
  display: flex;
  align-items: center;
}
.vendor-label {
  font-size: 24rpx;
  color: #999;
}
.vendor-name {
  font-size: 24rpx;
  color: #666;
}
.desc-section,
.intro-section {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}
.desc-text,
.intro-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  justify-content: space-between;
  z-index: 100;
}
.price-info {
  display: flex;
  align-items: baseline;
}
.bottom-price {
  font-size: 36rpx;
  color: #F97316;
  font-weight: bold;
}
.bottom-member {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}
.action-btns {
  display: flex;
  align-items: center;
}
.btn-buy {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 60rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 36rpx;
  border: none;
}
.btn-buy::after {
  border: none;
}
.action-extra {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}
.btn-favorite {
  font-size: 40rpx;
  margin-right: 16rpx;
  padding: 0 8rpx;
}
.btn-cart {
  background: #fff;
  color: #F97316;
  border: 2rpx solid #F97316;
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
}
.btn-cart::after {
  border: none;
}
</style>