cfc/cfc-frontend/pages/problem/package-detail.vue

<template>
  <view class="pd-wrap">
    <view class="pd-loading" v-if="loading">加载中...</view>
    <view class="pd-empty" v-else-if="!pkg">暂无套餐信息</view>

    <template v-else>
      <view class="pd-hero">
        <text class="pd-hero-name">{{ pkg.name }}</text>
        <text class="pd-hero-price" v-if="pkg.price">¥{{ pkg.price }}</text>
        <text class="pd-hero-meta" v-if="pkg.validityDays">有效期 {{ pkg.validityDays }} 天</text>
      </view>

      <view class="pd-section">
        <text class="pd-section-title">方案介绍</text>
        <text class="pd-section-text">{{ pkg.description || '暂无详细介绍' }}</text>
      </view>

      <view class="pd-section" v-if="pkg.usageGuide">
        <text class="pd-section-title">使用方式</text>
        <text class="pd-section-text">{{ pkg.usageGuide }}</text>
      </view>

      <view class="pd-section" v-if="includedItems && includedItems.length > 0">
        <text class="pd-section-title">包含项目</text>
        <view class="pd-item" v-for="(item, i) in includedItems" :key="getIncKey(i)">
          <text class="pd-item-icon">•</text>
          <text class="pd-item-text">{{ item }}</text>
        </view>
      </view>

      <view class="pd-section" v-if="pkg.rewardCfValue">
        <text class="pd-section-title">完成奖励</text>
        <text class="pd-section-text">全部任务完成后可获得 {{ pkg.rewardCfValue }} CF 值奖励</text>
      </view>
    </template>

    <view class="pd-buy-bar" v-if="!loading && pkg">
      <view class="pd-buy-price">
        <text class="pd-buy-amount" v-if="pkg.price">¥{{ pkg.price }}</text>
        <text class="pd-buy-free" v-else>免费</text>
      </view>
      <view class="pd-buy-btn" @click="buyNow">
        <text class="pd-buy-btn-text">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getProblemPackageDetail } from '../../utils/api.js'
import { updateUserIntentStage } from '../../utils/api.js'

export default {
  data() {
    return {
      packageId: '',
      code: '',
      pkg: null,
      includedItems: [],
      loading: false,
      buying: false
    }
  },
  onLoad(options) {
    this.packageId = (options && options.packageId) || ''
    this.code = (options && options.code) || ''
    this.loadDetail()
  },
  methods: {
    getIncKey: function(i) { return 'i' + i },
    loadDetail() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      getProblemPackageDetail(self.packageId).then(function(res) {
        uni.hideLoading()
        self.loading = false
        var data = res && res.data
        if (data) {
          self.pkg = data
          // 解析包含项目
          var items = data.includedItems || data.included_items || data.contains || []
          self.includedItems = Array.isArray(items) ? items : []
        } else {
          self.pkg = self.getFallbackPackage()
        }
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        self.pkg = self.getFallbackPackage()
      })
    },
    getFallbackPackage() {
      return {
        id: this.packageId || 0,
        name: '方案套餐',
        description: '包含检测、评估与个性化方案',
        price: 199,
        validityDays: 30,
        rewardCfValue: 500
      }
    },
    buyNow() {
      var self = this
      if (self.buying) return
      self.buying = true
      uni.showLoading({ title: '处理中...', mask: true })
      // 调用创建订单接口
      var api = require('../../utils/api.js')
      var createOrder = api.createPackageOrder || api.buyPackage
      if (createOrder) {
        createOrder({ packageId: self.packageId }).then(function(res) {
          uni.hideLoading()
          self.buying = false
          if (res && (res.code === 0 || res.code === 200)) {
            uni.showToast({ title: '购买成功', icon: 'success' })
            // 推进旅程
            updateUserIntentStage(3).then(function() {}).catch(function() {})
            setTimeout(function() {
              uni.navigateTo({
                url: '/pages/problem/logistics?code=' + self.code
              })
            }, 500)
          } else {
            uni.showToast({ title: res.message || '购买失败', icon: 'none' })
          }
        }).catch(function() {
          uni.hideLoading()
          self.buying = false
          uni.showToast({ title: '购买失败，请重试', icon: 'none' })
        })
      } else {
        // 无创建订单接口，模拟购买
        uni.hideLoading()
        self.buying = false
        uni.showToast({ title: '购买成功', icon: 'success' })
        updateUserIntentStage(3).then(function() {}).catch(function() {})
        setTimeout(function() {
          uni.navigateTo({
            url: '/pages/problem/logistics?code=' + self.code
          })
        }, 500)
      }
    }
  }
}
</script>

<style scoped>
.pd-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 0 0 160rpx;
  box-sizing: border-box;
}

.pd-loading, .pd-empty {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 80rpx 0;
}

.pd-hero {
  background: linear-gradient(135deg, #F97316, #FB923C);
  padding: 60rpx 40rpx;
  text-align: center;
}

.pd-hero-name {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}

.pd-hero-price {
  display: block;
  font-size: 52rpx;
  font-weight: bold;
  color: #fff;
  margin-top: 16rpx;
}

.pd-hero-meta {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8rpx;
}

.pd-section {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.pd-section-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.pd-section-text {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.pd-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.pd-item-icon {
  font-size: 28rpx;
  color: #F97316;
  margin-right: 12rpx;
}

.pd-item-text {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

.pd-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 32rpx 40rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.pd-buy-price {
  flex: 1;
}

.pd-buy-amount {
  font-size: 40rpx;
  font-weight: bold;
  color: #F97316;
}

.pd-buy-free {
  font-size: 32rpx;
  color: #16A34A;
}

.pd-buy-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 48rpx;
  padding: 22rpx 60rpx;
}

.pd-buy-btn:active {
  opacity: 0.9;
}

.pd-buy-btn-text {
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
</style>