From f2c461935a58da0c44bf1c2078d71683397da744 Mon Sep 17 00:00:00 2001 From: Fam Zheng Date: Sat, 1 Mar 2025 11:26:55 +0000 Subject: [PATCH] more ai chat pages --- .../components/contentstream/contentstream.js | 44 ++- .../contentstream/contentstream.wxml | 24 +- .../contentstream/contentstream.wxss | 69 +++- .../components/servicemodal/servicemodal.js | 23 +- .../components/servicemodal/servicemodal.wxml | 6 +- .../components/servicemodal/servicemodal.wxss | 24 +- scanner/pages/chat/chat.js | 302 +++++++++++++++++- scanner/pages/chat/chat.json | 3 +- scanner/pages/chat/chat.wxml | 19 +- scanner/pages/chat/chat.wxss | 48 ++- scanner/pages/test/test.wxml | 3 +- 11 files changed, 511 insertions(+), 54 deletions(-) diff --git a/scanner/components/contentstream/contentstream.js b/scanner/components/contentstream/contentstream.js index f797d86..04695e7 100644 --- a/scanner/components/contentstream/contentstream.js +++ b/scanner/components/contentstream/contentstream.js @@ -8,7 +8,10 @@ Component({ content: { type: Array, value: [] - } + }, + is_prompt: { + type: Boolean, + }, }, /** @@ -24,12 +27,34 @@ Component({ * Component methods */ methods: { + restart_content_output() { + console.log('restart_content_output'); + if (this.properties.is_prompt) { + this.setData({ + visible_content: this.properties.content + }); + return; + } + setTimeout(() => { + this.update_interval = setInterval(() => { + this.update_visible_content(); + }, 50); + }, 500); + }, + handle_onclick(event) { + var index = event.currentTarget.dataset.index; + if (this.properties.content[index].onclick) { + console.log('call onclick'); + this.properties.content[index].onclick(); + } + }, update_visible_content() { if (this.data.next_index >= this.properties.content.length) { clearInterval(this.update_interval); return; } var next_entry = this.properties.content[this.data.next_index]; + console.log('next_entry', next_entry); if (next_entry.type != 'text') { // just add the next entry to the visible content this.setData({ @@ -49,11 +74,11 @@ Component({ } // here we have some remaining text to add to the last visible content if (this.data.next_offset == 0) { + var next_entry = this.properties.content[this.data.next_index]; + var new_entry = JSON.parse(JSON.stringify(next_entry)); + new_entry.content = ""; this.setData({ - visible_content: this.data.visible_content.concat({ - type: 'text', - content: "", - }) + visible_content: this.data.visible_content.concat(new_entry) }); } var last_visible_entry = this.data.visible_content[this.data.visible_content.length - 1]; @@ -67,14 +92,9 @@ Component({ }, ready() { - console.log('onShow', this.data.next_index, this.data.next_offset); - setTimeout(() => { - this.update_interval = setInterval(() => { - this.update_visible_content(); - }, 50); - }, 500); + this.restart_content_output(); }, detached() { clearInterval(this.update_interval); - } + }, }) \ No newline at end of file diff --git a/scanner/components/contentstream/contentstream.wxml b/scanner/components/contentstream/contentstream.wxml index 9d8f571..b01eacc 100644 --- a/scanner/components/contentstream/contentstream.wxml +++ b/scanner/components/contentstream/contentstream.wxml @@ -1,13 +1,17 @@ - - - - - - - {{ item.content }} - - + + + + + + + + ✓{{ item.content }} + + + + + + {{ item.title }} - \ No newline at end of file diff --git a/scanner/components/contentstream/contentstream.wxss b/scanner/components/contentstream/contentstream.wxss index 1698589..fc5e419 100644 --- a/scanner/components/contentstream/contentstream.wxss +++ b/scanner/components/contentstream/contentstream.wxss @@ -9,6 +9,12 @@ margin-right: 30rpx; } +.icon { + position: relative; + width: 80rpx; + height: 80rpx; +} + .icon image { width: 80rpx; height: 80rpx; @@ -17,15 +23,70 @@ .item .content { display: inline-block; min-height: 80rpx; + max-width: calc(100% - 80rpx); + overflow: hidden; +} + +.content .text { + display: flex; + align-items: center; + margin-bottom: 40rpx; } .content text { - display: block; - margin-bottom: 40rpx; - font-size: 35rpx; - margin-right: 20rpx; + font-size: 30rpx; } .content view.media { margin-bottom: 40rpx; +} + +view.splitline { + width: 90%; + border-top: 1px dotted #ccc; + height: 40rpx; +} + +text.secondary { + font-size: 25rpx; + color: #666; +} + +view.suggestion { + background-color: #f0f0f0; + height: 68rpx; + border-radius: 30rpx; + color: #ef4823; + font-size: 28rpx; + margin-bottom: 10rpx; + width: 400rpx; + padding-left: 30rpx; + display: flex; + align-items: center; +} + +.green { + color: #ef4823; +} + +.item.prompt { + display: flex; + justify-content: flex-end; +} + +.content.prompt view.text { + background-color: #ef4823; + color: #fff; + border-radius: 40rpx; + height: 80rpx; + padding-left: 30rpx; + padding-right: 30rpx; +} + +view.text.margin-bottom-10 { + margin-bottom: 10rpx; +} + +view.text.bold { + font-weight: bold; } \ No newline at end of file diff --git a/scanner/components/servicemodal/servicemodal.js b/scanner/components/servicemodal/servicemodal.js index 793f2d0..6c67570 100644 --- a/scanner/components/servicemodal/servicemodal.js +++ b/scanner/components/servicemodal/servicemodal.js @@ -5,7 +5,14 @@ Component({ * Component properties */ properties: { - + show_hide_button: { + type: Boolean, + value: false, + }, + wechat_channel: { + type: Boolean, + value: false, + }, }, /** @@ -13,22 +20,34 @@ Component({ */ data: { qr_url: 'https://emblem-resources.oss-accelerate.aliyuncs.com/service-qr2.png', + title: '', }, /** * Component methods */ methods: { - + close() { + console.log('servic modal close'); + this.triggerEvent('hide', {}, {}); + } }, attached() { var gd = getApp().globalData; var tid = gd.tenant_id || ''; var qr_url = gd.server_url + "/api/v1/service-qr/?tenant=" + tid; + var title = ''; console.log(qr_url); + if (this.properties.wechat_channel) { + qr_url = "https://emblem-resources.oss-accelerate.aliyuncs.com/wechat-channel.png" + title = "长按识别二维码，关注公众号" + } else { + title = "长按识别二维码，添加人工客服" + } this.setData({ qr_url, + title, }); } }) diff --git a/scanner/components/servicemodal/servicemodal.wxml b/scanner/components/servicemodal/servicemodal.wxml index 46bbb93..c8eaf64 100644 --- a/scanner/components/servicemodal/servicemodal.wxml +++ b/scanner/components/servicemodal/servicemodal.wxml @@ -5,7 +5,11 @@ - 长按识别二维码，添加人工客服 + {{ title }} + + + + 返回 diff --git a/scanner/components/servicemodal/servicemodal.wxss b/scanner/components/servicemodal/servicemodal.wxss index 028bd66..5c4f100 100644 --- a/scanner/components/servicemodal/servicemodal.wxss +++ b/scanner/components/servicemodal/servicemodal.wxss @@ -15,7 +15,8 @@ view.box { height: 80%; margin: 100rpx auto; border-radius: 30rpx; - background-image: linear-gradient(0deg, #8b8986 0%, #414141 36%, #414141 92%, #515151 100%); + background-image: linear-gradient(180deg, #b5c0e7 0%, #ffc0b8 100%); + z-index: 1000; } view.imagebox { @@ -36,6 +37,25 @@ view.imagebox image { view.text { margin-top: 50rpx; font-size: 37rpx; - color: #eee; + color: #333; } +view.return { + font-size: 28rpx; + color: #333; + border: 1rpx solid #333; + width: 100rpx; + margin: 50rpx auto; + padding: 10rpx 40rpx; + border-color: #ef4823; + border-radius: 20rpx; + display: flex; + align-items: center; + justify-content: center; +} + +view.return image { + margin-right: 10rpx; + width: 25rpx; + height: 25rpx; +} \ No newline at end of file diff --git a/scanner/pages/chat/chat.js b/scanner/pages/chat/chat.js index 1712ebb..5e72252 100644 --- a/scanner/pages/chat/chat.js +++ b/scanner/pages/chat/chat.js @@ -5,7 +5,10 @@ Page({ * Page initial data */ data: { - initial_message: [ + show_modal: '', + prompt: [], + response: [], + welcome_response: [ { type: 'text', content: '欢迎使用徵象AI,让每一次验证都成为与品牌的深度对话。' @@ -25,14 +28,23 @@ Page({ type: 'text', content: '保持画面完整覆盖定位点(图示区域), 系统将自动触发高精度图像分割算法完成验证。 ' }, - ] + ], + prompt_message_verify_result: [ + { + type: 'text', + content: '查看验证结果' + }, + ], }, /** * Lifecycle function--Called when page load */ onLoad(options) { - + this.show_welcome_response(); + this.show_verify_result(); + this.show_product_details(); + this.show_promotions(); }, /** @@ -88,5 +100,287 @@ Page({ wx.navigateTo({ url: '/pages/camera/camera', }) - } + }, + + show_service() { + this.setData({ + show_modal: 'service', + }) + }, + + show_channel() { + this.setData({ + show_modal: 'channel', + }) + }, + hide_modal() { + console.log('hide_modal'); + this.setData({ + show_modal: '', + }) + }, + show_verify_tech() { + this.setData({ + prompt: [ + { + type: 'text', + content: '这个验证结果可信吗？' + }, + ], + response: [ + { + type: 'text', + content: '本次验证使用「Al图像识别+微米级特征对比」T4.2.2模型', + classes: 'margin-bottom-10', + }, + { + type: 'text', + content: '更新时间:2025年2月27日', + classes: 'secondary', + }, + { + type: 'text', + content: '1.微观特征捕捉:系统以0.1mm精度扫描二维码的30+项微观特征' + }, + { + type: 'text', + content: '2.加密特征匹配:比对云端预存的特征图像代码,误差率万分之一' + }, + { + type: 'text', + content: '若对验证结果有疑虑,可通过人工客服通道咨询' + }, + { + type: 'splitline', + }, + { + type: 'text', + content: '你可能会问:' + }, + { + type: 'suggestion', + title: '重看验证结果', + onclick: () => { + this.show_verify_result(); + } + }, + { + type: 'suggestion', + title: '这个产品怎么样?', + onclick: () => { + this.show_product_details(); + } + }, + { + type: 'suggestion', + title: '有什么福利活动吗?', + onclick: () => { + this.show_promotions(); + } + } + ] + }) + }, + show_verify_result() { + var resp = [ + { + type: 'text', + content: '正在生成您的专属验真档案...' + }, + { + type: 'text', + content: '验真结论:', + classes: 'margin-bottom-10', + }, + { + type: 'text', + content: '正品认证通过!', + mark: 'tick', + }, + { + type: 'text', + content: '经系统比对,您扫描的【徵象AI体验码】产品二维码为官方认证正品,可放心使用。' + }, + { + type: 'text', + content: '验证编码: xxxxx', + classes: 'margin-bottom-10', + }, + { + type: 'text', + content: '验证时间: 2025-02-24 14:30' + }, + { + type: 'splitline', + }, + { + type: 'text', + classes: 'secondary', + content: '你可能会问:' + }, + { + type: 'suggestion', + title: '这个验证结果可信吗?', + onclick: () => { + this.show_verify_tech(); + } + }, + { + type: 'suggestion', + title: '这个产品怎么样?', + onclick: () => { + this.show_product_details(); + } + }, + { + type: 'suggestion', + title: '有什么福利活动吗?', + onclick: () => { + this.show_promotions(); + } + }, + ] + this.setData({ + prompt: [{ + type: 'text', + content: '查看验证结果' + }], + response: resp, + }) + }, + show_welcome_response() { + this.setData({ + response: this.data.welcome_response, + }) + }, + show_product_details() { + var resp = [ + { + type: 'text', + content: '微象AI是由「广州市诚投科技有限公司」开发的AI驱动的智能防伪平台。' + }, + { + type: 'text', + content: '通过「多模态特征识别」构建新一代防伪验证体系,实现从物理防伪到数字认证的全链路保护。系统采用ISO 12931国际防伪标准,已获取国家发明专利(证书编号:CN 115222000 B)。' + }, + { + type: 'text', + content: '应用场景', + classes: 'margin-bottom-10 bold', + }, + { + type: 'text', + content: '1.商品防伪', + classes: 'margin-bottom-10 bold', + }, + { + type: 'text', + content: '2.证件安全验证', + classes: 'margin-bottom-10 bold', + }, + { + type: 'text', + content: '3.工业品防伪', + classes: 'bold', + }, + { + type: 'splitline', + }, + { + type: 'text', + content: '你可能会问:', + classes: 'secondary', + }, + { + type: 'suggestion', + title: '重看验证结果', + onclick: () => { + this.show_verify_result(); + } + }, + { + type: 'suggestion', + title: '这个验证结果可信吗?', + onclick: () => { + this.show_verify_tech(); + } + }, + { + type: 'suggestion', + title: '有什么福利活动吗?', + onclick: () => { + this.show_promotions(); + } + } + ] + this.setData({ + prompt: [{ + type: 'text', + content: '这个产品怎么样' + }], + response: resp, + }) + }, + show_promotions() { + var resp = [ + { + type: 'text', + content: '感谢您选择正品!为保障权益,建议:' + }, + { + type: 'text', + content: '·关注品牌公众号', + classes: 'margin-bottom-10', + }, + { + type: 'text', + content: '·定期访问「会员中心」查看产品溯源信息', + classes: 'margin-bottom-10', + }, + { + type: 'text', + content: '·参与【正品守护计划】赢取专属福利' + }, + { + type: 'text', + content: '若发现异常验证结果,请立即通过官方客服通道举报' + }, + { + type: 'splitline', + }, + { + type: 'text', + content: '你可能会问:', + classes: 'secondary', + }, + { + type: 'suggestion', + title: '重看验证结果', + onclick: () => { + this.show_verify_result(); + } + }, + { + type: 'suggestion', + title: '这个产品怎么样?', + onclick: () => { + this.show_product_details(); + } + }, + { + type: 'suggestion', + title: '这个验证结果可信吗?', + onclick: () => { + this.show_verify_tech(); + } + } + ] + this.setData({ + prompt: [{ + type: 'text', + content: '有什么福利活动吗?' + }], + response: resp, + }) + }, }) \ No newline at end of file diff --git a/scanner/pages/chat/chat.json b/scanner/pages/chat/chat.json index a197071..ecbb0d4 100644 --- a/scanner/pages/chat/chat.json +++ b/scanner/pages/chat/chat.json @@ -1,6 +1,7 @@ { "usingComponents": { - "contentstream": "/components/contentstream/contentstream" + "contentstream": "/components/contentstream/contentstream", + "servicemodal": "/components/servicemodal/servicemodal" }, "navigationBarTitleText": "徵象AI" } \ No newline at end of file diff --git a/scanner/pages/chat/chat.wxml b/scanner/pages/chat/chat.wxml index 27971d2..175f549 100644 --- a/scanner/pages/chat/chat.wxml +++ b/scanner/pages/chat/chat.wxml @@ -1,9 +1,20 @@ - - + + + - - + + + + 关注公众号 + + + + 人工客服 + + + + 开启AI验证 diff --git a/scanner/pages/chat/chat.wxss b/scanner/pages/chat/chat.wxss index 5798a97..2c3194a 100644 --- a/scanner/pages/chat/chat.wxss +++ b/scanner/pages/chat/chat.wxss @@ -1,20 +1,21 @@ .chatlog { width: 750rpx; - height: calc(100vh - 200rpx); + height: calc(100vh - 380rpx); margin-top: 40rpx; + overflow-y: scroll; } -.chatinput { +.bottom { position: fixed; bottom: 0; width: 750rpx; - height: 200rpx; + height: 300rpx; } -.chatinput .inputbox { +.bottom .inputbox { display: flex; margin: 30rpx; - height: 120rpx; + height: 100rpx; border-radius: 60rpx; background: #eee; flex-direction: row; @@ -23,23 +24,44 @@ padding: 0 20rpx; } -.chatinput .placeholder { - font-size: 38rpx; +.bottom .placeholder { + font-size: 30rpx; flex: 1; display: flex; align-items: center; padding-left: 30rpx; } -.chatinput .icon { - width: 100rpx; - height: 100rpx; +.bottom .icon { display: flex; align-items: center; justify-content: center; } -.chatinput .icon .up { - width: 80rpx; - height: 80rpx; +.bottom .icon .up { + width: 60rpx; + height: 60rpx; +} + +.bottom .quick-actions { + display: flex; + flex-direction: row; + padding: 0 40rpx; +} + +.bottom .quick-action { + height: 68rpx; + font-size: 28rpx; + color: #ef4823; + background: #eee; + border-radius: 60rpx; + padding: 0 28rpx; + display: flex; + align-items: center; + justify-content: center; + margin-right: 20rpx; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/scanner/pages/test/test.wxml b/scanner/pages/test/test.wxml index 6504b0c..602ec9e 100644 --- a/scanner/pages/test/test.wxml +++ b/scanner/pages/test/test.wxml @@ -1 +1,2 @@ - +a +b