89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import React from 'react';
|
||
import { t } from '@/i18n';
|
||
// Taro mini-program component
|
||
|
||
/**
|
||
* AI引导组件（小程序/H5版）
|
||
*
|
||
* type=recommendation: 首页顶部AI推荐标签条
|
||
* type=purchase: 新用户购买引导气泡
|
||
*/
|
||
|
||
interface AiGuideProps {
|
||
type: 'recommendation' | 'purchase';
|
||
}
|
||
|
||
const AiGuide: React.FC<AiGuideProps> = ({ type }) => {
|
||
if (type === 'recommendation') {
|
||
return (
|
||
<scroll-view scrollX className="ai-suggest-bar">
|
||
{[
|
||
{ id: 1, text: '星巴克 8.5折' },
|
||
{ id: 2, text: 'Nike 限时特价' },
|
||
{ id: 3, text: '新品餐饮券' },
|
||
{ id: 4, text: '高评级推荐' },
|
||
].map(s => (
|
||
<view key={s.id} className="ai-tag">
|
||
<text className="ai-tag-icon">✨</text>
|
||
<text className="ai-tag-text">{s.text}</text>
|
||
</view>
|
||
))}
|
||
</scroll-view>
|
||
);
|
||
}
|
||
|
||
// Purchase guide bubble
|
||
return (
|
||
<view className="ai-bubble">
|
||
<view className="ai-bubble-avatar">
|
||
<text className="ai-bubble-avatar-icon">✨</text>
|
||
</view>
|
||
<view className="ai-bubble-content">
|
||
<text className="ai-bubble-text">
|
||
{t('ai_guide_greeting')}
|
||
</text>
|
||
</view>
|
||
<view className="ai-bubble-close">
|
||
<text className="ai-bubble-close-text">×</text>
|
||
</view>
|
||
</view>
|
||
);
|
||
};
|
||
|
||
export default AiGuide;
|
||
|
||
/*
|
||
CSS:
|
||
|
||
.ai-suggest-bar {
|
||
display: flex; white-space: nowrap;
|
||
padding: 16rpx 32rpx;
|
||
}
|
||
.ai-tag {
|
||
display: inline-flex; align-items: center;
|
||
padding: 8rpx 20rpx; margin-right: 12rpx;
|
||
background: #F3F1FF; border-radius: 999rpx;
|
||
}
|
||
.ai-tag-icon { font-size: 24rpx; margin-right: 6rpx; }
|
||
.ai-tag-text { font-size: 24rpx; color: #6C5CE7; font-weight: 500; white-space: nowrap; }
|
||
|
||
.ai-bubble {
|
||
display: flex; align-items: flex-start;
|
||
margin: 16rpx 32rpx; padding: 20rpx;
|
||
background: #F3F1FF; border-radius: 16rpx;
|
||
border: 1rpx solid rgba(108,92,231,0.15);
|
||
}
|
||
.ai-bubble-avatar {
|
||
width: 48rpx; height: 48rpx;
|
||
background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
|
||
border-radius: 12rpx; display: flex;
|
||
align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.ai-bubble-avatar-icon { font-size: 24rpx; }
|
||
.ai-bubble-content { flex: 1; margin: 0 16rpx; }
|
||
.ai-bubble-text { font-size: 26rpx; color: #5C6478; line-height: 1.5; }
|
||
.ai-bubble-close { padding: 4rpx; }
|
||
.ai-bubble-close-text { font-size: 28rpx; color: #A0A8BE; }
|
||
*/
|