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

<template>
  <view class="pm-wrap">
    <view class="pm-header">
      <text class="pm-title">推荐方案</text>
      <text class="pm-sub">根据你的情况，我们推荐以下方案</text>
    </view>

    <view class="pm-loading" v-if="loading">加载中...</view>
    <view class="pm-empty" v-else-if="packages.length === 0">暂无推荐方案</view>

    <view class="pm-list" v-else>
      <view class="pm-card" v-for="p in packages" :key="getKey(p)">
        <view class="pm-card-top">
          <text class="pm-card-name">{{ p.name }}</text>
          <text class="pm-card-price" v-if="p.price">¥{{ p.price }}</text>
        </view>
        <text class="pm-card-desc" v-if="p.description">{{ p.description }}</text>
        <view class="pm-card-meta" v-if="p.validityDays">
          <text class="pm-card-meta-text">有效期：{{ p.validityDays }}天</text>
        </view>
        <view class="pm-card-badges" v-if="p.badges && p.badges.length > 0">
          <text class="pm-badge" v-for="(b, i) in p.badges" :key="getBadgeKey(i)">{{ b }}</text>
        </view>
        <view class="pm-card-btn" @click="goDetail(p)">
          <text class="pm-card-btn-text">查看套餐详情</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      code: '',
      packages: [],
      loading: false
    }
  },
  onLoad(options) {
    this.code = (options && options.code) || ''
    this.loadPackages()
  },
  methods: {
    getBadgeKey: function(i) { return 'b' + i },
    getKey(p) {
      return p.id || p.code || Math.random()
    },
    loadPackages() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      // 从问题域关联的推荐产品获取套餐列表
      var api = require('../../utils/api.js')
      var getDomainList = api.getProblemDomainList
      getDomainList().then(function(res) {
        uni.hideLoading()
        self.loading = false
        var list = res && res.data
        if (Array.isArray(list)) {
          var found = null
          for (var i = 0; i < list.length; i++) {
            if (list[i].code === self.code) {
              found = list[i]
              break
            }
          }
          if (found && found.recommended_product_ids) {
            var ids = String(found.recommended_product_ids).split(',').filter(function(s) { return s.trim() })
            // 每个ID调用详情接口
            self.loadPackageDetails(ids)
          } else {
            self.packages = self.getDefaultPackages()
          }
        } else {
          self.packages = self.getDefaultPackages()
        }
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        self.packages = self.getDefaultPackages()
      })
    },
    loadPackageDetails(ids) {
      if (ids.length === 0) {
        this.packages = this.getDefaultPackages()
        return
      }
      var self = this
      var results = []
      var loaded = 0
      ids.forEach(function(id) {
        getProblemPackageDetail(id).then(function(res) {
          loaded++
          var data = res && res.data
          if (data) {
            results.push(data)
          }
          if (loaded >= ids.length) {
            self.packages = results.length > 0 ? results : self.getDefaultPackages()
          }
        }).catch(function() {
          loaded++
          if (loaded >= ids.length) {
            self.packages = results.length > 0 ? results : self.getDefaultPackages()
          }
        })
      })
    },
    getDefaultPackages() {
      return [
        { id: 0, name: '标准方案', description: '包含基础检测与评估', price: 199, validityDays: 30, badges: ['推荐'] },
        { id: 1, name: '进阶方案', description: '含深度检测与个性化方案', price: 399, validityDays: 60, badges: ['热门'] },
        { id: 2, name: '全面方案', description: '全维度检测+定制任务+专家咨询', price: 699, validityDays: 90, badges: ['全面'] }
      ]
    },
    goDetail(p) {
      uni.navigateTo({
        url: '/pages/problem/package-detail?packageId=' + (p.id || '') + '&code=' + this.code
      })
    }
  }
}
</script>

<style scoped>
.pm-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
}

.pm-header {
  margin-bottom: 32rpx;
}

.pm-title {
  display: block;
  font-size: 38rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.pm-sub {
  display: block;
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-top: 10rpx;
}

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

.pm-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.pm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.pm-card-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.pm-card-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #F97316;
}

.pm-card-desc {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.pm-card-meta {
  margin-bottom: 12rpx;
}

.pm-card-meta-text {
  font-size: 24rpx;
  color: #999;
}

.pm-card-badges {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16rpx;
}

.pm-badge {
  font-size: 22rpx;
  color: #F97316;
  background: rgba(249, 115, 22, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 12rpx;
}

.pm-card-btn {
  background: #FFF7ED;
  border: 2rpx solid #F97316;
  border-radius: 36rpx;
  padding: 18rpx 0;
  text-align: center;
}

.pm-card-btn:active {
  background: #FED7AA;
}

.pm-card-btn-text {
  color: #F97316;
  font-size: 28rpx;
  font-weight: 600;
}
</style>