cfc/cfc-frontend/pages/problem/domain-list.vue

<template>
  <view class="dl-wrap">
    <view class="dl-header">
      <text class="dl-title">你关心什么问题？</text>
      <text class="dl-sub">选择一个你关注的领域，获取定制解决方案</text>
    </view>
    <view class="dl-list" v-if="loading">
      <view class="dl-loading">加载中...</view>
    </view>
    <view class="dl-list" v-else-if="domains.length === 0">
      <view class="dl-empty">暂无可用问题域</view>
    </view>
    <view class="dl-list" v-else>
      <view class="dl-card" v-for="d in domains" :key="getKey(d)" @click="onSelect(d)">
        <view class="dl-card-icon">
          <text class="dl-card-emoji">{{ d.icon || '🧭' }}</text>
        </view>
        <view class="dl-card-body">
          <text class="dl-card-name">{{ d.name }}</text>
          <text class="dl-card-desc">{{ d.description || '了解详情，获取专属方案' }}</text>
        </view>
        <text class="dl-card-arrow">›</text>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      domains: [],
      loading: false
    }
  },
  onLoad() {
    this.loadDomains()
  },
  methods: {
    getKey(d) {
      return d.id || d.code
    },
    loadDomains() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      getProblemDomainList().then(function(res) {
        uni.hideLoading()
        self.loading = false
        var list = res && res.data
        self.domains = Array.isArray(list) ? list : []
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        self.domains = []
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    onSelect(d) {
      uni.navigateTo({
        url: '/pages/problem/flow-intro?code=' + (d.code || '')
      })
    }
  }
}
</script>

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

.dl-header {
  margin-bottom: 40rpx;
}

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

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

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

.dl-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.dl-card:active {
  transform: scale(0.98);
}

.dl-card-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 24rpx;
  background: rgba(249, 115, 22, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.dl-card-emoji {
  font-size: 48rpx;
}

.dl-card-body {
  flex: 1;
}

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

.dl-card-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.dl-card-arrow {
  font-size: 48rpx;
  color: #CCC;
  margin-left: 12rpx;
}
</style>