cfc/cfc-frontend/components/intent-picker.vue

<template>
  <view class="ip-mask" v-if="show" @click="onMaskTap">
    <view class="ip-panel" @click.stop>
      <view class="ip-header">
        <text class="ip-title">告诉我，你想怎么开始？</text>
        <text class="ip-sub">浠艾福为你定制专属家庭成长方案</text>
      </view>

      <!-- A 随便看看 -->
      <view class="ip-card" @click="emitSelect('A')">
        <view class="ip-card-icon" style="background: rgba(249,115,22,0.12);"><text class="ip-card-emoji">🎯</text></view>
        <view class="ip-card-body">
          <text class="ip-card-title">随便看看</text>
          <text class="ip-card-desc">先到处逛逛，了解浠艾福和各式服务</text>
        </view>
        <text class="ip-card-arrow">›</text>
      </view>

      <!-- B 问卷 -->
      <view class="ip-card" @click="emitSelect('B')">
        <view class="ip-card-icon" style="background: rgba(14,165,233,0.12);"><text class="ip-card-emoji">📋</text></view>
        <view class="ip-card-body">
          <text class="ip-card-title">智能问卷</text>
          <text class="ip-card-desc">先答几道题，系统为你匹配推荐方案</text>
        </view>
        <text class="ip-card-arrow">›</text>
      </view>

      <!-- C 问题域 -->
      <view class="ip-card" @click="onDomainTap">
        <view class="ip-card-icon" style="background: rgba(16,185,129,0.12);"><text class="ip-card-emoji">🔍</text></view>
        <view class="ip-card-body">
          <text class="ip-card-title">解决问题</text>
          <text class="ip-card-desc">选择你关心的问题，获得完整解决方案</text>
        </view>
        <text class="ip-card-arrow">›</text>
      </view>

      <!-- C 子级：问题域列表 -->
      <view class="ip-domain-wrap" v-if="showDomains">
        <view
          v-for="d in domains"
          :key="getKey(d)"
          class="ip-domain-item"
          :class="{ 'ip-domain-item-active': d.code === selectedCode }"
          @click="selectDomain(d)">
          <text class="ip-domain-icon">{{ d.icon || '🧭' }}</text>
          <text class="ip-domain-name">{{ d.name }}</text>
          <text class="ip-domain-check" v-if="d.code === selectedCode">✓</text>
        </view>
        <view class="ip-domain-confirm" @click="confirmDomain">
          <text class="ip-domain-confirm-text">开始我的方案</text>
        </view>
      </view>

      <view class="ip-skip" @click="onSkip">
        <text class="ip-skip-text">暂时跳过</text>
      </view>
    </view>
  </view>
</template>

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

export default {
  name: 'IntentPicker',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDomains: false,
      domains: [],
      selectedCode: '',
      selectedName: '',
      loading: false
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.showDomains = false
        this.selectedCode = ''
        this.selectedName = ''
        this.loadDomains()
      }
    }
  },
  methods: {
    getKey(d) {
      return d.id || d.code
    },
    loadDomains() {
      if (this.domains.length > 0 || this.loading) return
      this.loading = true
      var self = this
      getProblemDomainList().then(function(res) {
        self.loading = false
        var list = res && res.data
        self.domains = Array.isArray(list) ? list : []
      }).catch(function() {
        self.loading = false
        self.domains = []
      })
    },
    onMaskTap() {
      // 点击遮罩不关闭，防止误触跳过
    },
    onDomainTap() {
      this.showDomains = !this.showDomains
      this.loadDomains()
    },
    selectDomain(d) {
      this.selectedCode = d.code
      this.selectedName = d.name
    },
    confirmDomain() {
      if (!this.selectedCode) {
        uni.showToast({ title: '请先选择一个关注的问题', icon: 'none' })
        return
      }
      this.$emit('select', {
        intentType: 'C',
        problemDomainCode: this.selectedCode,
        problemDomainName: this.selectedName
      })
    },
    emitSelect(intentType) {
      this.$emit('select', { intentType: intentType })
    },
    onSkip() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.ip-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
}

.ip-panel {
  width: 100%;
  background: #FFF7ED;
  border-radius: 32rpx 32rpx 0 0;
  padding: 48rpx 40rpx 60rpx;
  box-sizing: border-box;
  max-height: 88vh;
  overflow-y: auto;
}

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

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

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

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

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

.ip-card-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.ip-card-emoji {
  font-size: 44rpx;
}

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

.ip-card-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

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

.ip-card-arrow {
  font-size: 44rpx;
  color: #CCC;
  margin-left: 12rpx;
}

.ip-domain-wrap {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.ip-domain-item {
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  margin-bottom: 12rpx;
}

.ip-domain-item:last-child {
  margin-bottom: 0;
}

.ip-domain-item-active {
  border-color: #F97316;
  background: #FFF7ED;
}

.ip-domain-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.ip-domain-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.ip-domain-check {
  color: #F97316;
  font-size: 32rpx;
  font-weight: bold;
}

.ip-domain-confirm {
  margin-top: 16rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 40rpx;
  padding: 22rpx 0;
  text-align: center;
}

.ip-domain-confirm:active {
  opacity: 0.9;
}

.ip-domain-confirm-text {
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}

.ip-skip {
  text-align: center;
  margin-top: 20rpx;
  padding: 16rpx 0;
}

.ip-skip-text {
  font-size: 26rpx;
  color: #999;
  text-decoration: underline;
}
</style>