109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
|
// 字源溯源弹窗组件
|
||
|
|
Component({
|
||
|
|
properties: {
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
value: false
|
||
|
|
},
|
||
|
|
char: {
|
||
|
|
type: String,
|
||
|
|
value: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data: {
|
||
|
|
pinyin: '',
|
||
|
|
radical: '',
|
||
|
|
strokes: '',
|
||
|
|
wuxing: '',
|
||
|
|
meaning: '',
|
||
|
|
imagery: '',
|
||
|
|
poetry: '',
|
||
|
|
loading: false
|
||
|
|
},
|
||
|
|
|
||
|
|
observers: {
|
||
|
|
'visible, char': function(visible, char) {
|
||
|
|
if (visible && char) {
|
||
|
|
this.loadCharDetail(char);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// 加载汉字详情
|
||
|
|
loadCharDetail(char) {
|
||
|
|
this.setData({ loading: true });
|
||
|
|
|
||
|
|
// 先从本地缓存查找
|
||
|
|
const cache = wx.getStorageSync(`char_${char}`);
|
||
|
|
if (cache) {
|
||
|
|
this.setData({ ...cache, loading: false });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 调用后端接口获取
|
||
|
|
const apiBaseUrl = getApp().globalData.apiBaseUrl;
|
||
|
|
wx.request({
|
||
|
|
url: `${apiBaseUrl}/api/char/detail`,
|
||
|
|
data: { char },
|
||
|
|
success: (res) => {
|
||
|
|
if (res.data && res.data.success) {
|
||
|
|
const data = res.data.data;
|
||
|
|
this.setData({ ...data, loading: false });
|
||
|
|
// 缓存结果
|
||
|
|
wx.setStorageSync(`char_${char}`, data);
|
||
|
|
} else {
|
||
|
|
// 使用默认数据
|
||
|
|
this.setDefaultData(char);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail: () => {
|
||
|
|
this.setDefaultData(char);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 设置默认数据
|
||
|
|
setDefaultData(char) {
|
||
|
|
// 简单的拼音映射（实际应该从后端获取）
|
||
|
|
const pinyinMap = {
|
||
|
|
'兰': 'lán', '泽': 'zé', '芳': 'fāng', '风': 'fēng',
|
||
|
|
'墨': 'mò', '染': 'rǎn', '清': 'qīng', '欢': 'huān',
|
||
|
|
'素': 'sù', '简': 'jiǎn', '雅': 'yǎ', '致': 'zhì'
|
||
|
|
};
|
||
|
|
|
||
|
|
this.setData({
|
||
|
|
pinyin: pinyinMap[char] || '',
|
||
|
|
radical: '',
|
||
|
|
strokes: '',
|
||
|
|
wuxing: '',
|
||
|
|
meaning: '暂无详细解析，点击"问问 AI"获取深度分析',
|
||
|
|
imagery: '',
|
||
|
|
poetry: '',
|
||
|
|
loading: false
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 点击遮罩关闭
|
||
|
|
onMaskTap() {
|
||
|
|
this.triggerEvent('close');
|
||
|
|
},
|
||
|
|
|
||
|
|
// 阻止冒泡
|
||
|
|
onContainerTap() {
|
||
|
|
// 什么都不做，只是阻止冒泡
|
||
|
|
},
|
||
|
|
|
||
|
|
// 点击关闭按钮
|
||
|
|
onClose() {
|
||
|
|
this.triggerEvent('close');
|
||
|
|
},
|
||
|
|
|
||
|
|
// 问问 AI
|
||
|
|
onAskAI() {
|
||
|
|
this.triggerEvent('askAI', { char: this.data.char });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|