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>

      <!-- 开始测试 -->
      <view class="ip-card" @click="onStart">
        <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">3分钟了解你的家庭健康需求，生成专属成长方案</text>
        </view>
        <text class="ip-card-arrow">›</text>
      </view>

      <!-- 以后再说 -->
      <view class="ip-skip" @click="onSkip">
        <text class="ip-skip-text">{{ skipHint }}</text>
      </view>
    </view>
  </view>
</template>

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

export default {
  name: 'IntentPicker',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      skipping: false
    }
  },
  computed: {
    skipHint() {
      var count = parseInt(uni.getStorageSync('intent_skip_count') || '0')
      if (count >= 3) return ''
      if (count > 0) return '以后再说（' + (3 - count) + '次机会）'
      return '以后再说'
    }
  },
  methods: {
    onMaskTap() {},
    onStart() {
      this.$emit('select', { intentType: 'B' })
    },
    onSkip() {
      var self = this
      if (self.skipping) return
      self.skipping = true
      skipUserIntent().then(function(res) {
        self.skipping = false
        if (res.code === 200 && res.data) {
          var count = (res.data.skipCount || 0) + 1
          uni.setStorageSync('intent_skip_count', count)
          if (count >= 3) {
            uni.setStorageSync('intent_skip_max', '1')
          }
          uni.showToast({ title: '好的，随时可以回来测', icon: 'none' })
          setTimeout(function() { self.$emit('close') }, 500)
        } else {
          self.$emit('close')
        }
      }).catch(function() {
        self.skipping = false
        self.$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: 56rpx 40rpx 64rpx;
  box-sizing: border-box;
}
.ip-header { margin-bottom: 36rpx; }
.ip-title {
  display: block;
  font-size: 40rpx; font-weight: bold; color: #333;
  text-align: center; line-height: 1.3;
}
.ip-sub {
  display: block;
  font-size: 26rpx; color: #888;
  text-align: center; margin-top: 12rpx; line-height: 1.5;
}
.ip-card {
  display: flex; align-items: center;
  background: #fff; border-radius: 24rpx;
  padding: 32rpx 28rpx;
  box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.1);
  border: 2rpx solid rgba(249,115,22,0.15);
}
.ip-card:active { opacity: 0.88; }
.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; min-width: 0; }
.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; line-height: 1.4;
}
.ip-card-arrow { font-size: 36rpx; color: #F97316; flex-shrink: 0; }
.ip-skip { text-align: center; margin-top: 28rpx; padding: 12rpx 0; }
.ip-skip-text { font-size: 26rpx; color: #bbb; }
</style>