more ai chat pages

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({
+                    visible_content: this.data.visible_content.concat(new_entry)
-                        type: 'text',
-                        content: "",
-                    })
                 });
             }
             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);
+        this.restart_content_output();
-        setTimeout(() => {
-            this.update_interval = setInterval(() => {
-                this.update_visible_content();
-            }, 50);
-        }, 500);
     },
     detached() {
         clearInterval(this.update_interval);
-    }
+    },
 })

scanner/components/contentstream/contentstream.wxml

@@ -1,13 +1,17 @@
-<view class="item">
+<view class="item {{ is_prompt ? 'prompt' : '' }}">
-<view class="icon">
+    <view wx:if="{{ ! is_prompt }}" class="icon">
-<image src="/static/chatlogo.png"></image>
+        <image src="/static/chatlogo.png"></image>
-</view>
+    </view>
-<view class="content">
+    <view class="content {{ is_prompt ? 'prompt' : '' }}">
-    <view wx:for="{{ visible_content }}" wx:key="index">
+        <view wx:for="{{ visible_content }}" wx:key="index">
-        <text wx:if="{{ item.type == 'text'}}">{{ item.content }}</text>
+            <view wx:if="{{ item.type == 'text'}}" class="text {{ item.classes }}">
-        <view wx:if="{{ item.type == 'scanguidecss' }}" class="media">
+                <text wx:if="{{ item.mark == 'tick' }}" class="green">✓</text><text class="{{ item.classes }}">{{ item.content }}</text>
-            <scanguidecss wx:if="{{ item.type == 'scanguidecss' }}" hide_title="1"></scanguidecss>
+            </view>
+            <view wx:if="{{ item.type == 'scanguidecss' }}" class="media">
+                <scanguidecss wx:if="{{ item.type == 'scanguidecss' }}" hide_title="1"></scanguidecss>
+            </view>
+            <view wx:if="{{ item.type == 'splitline' }}" class="splitline"></view>
+            <view wx:if="{{ item.type == 'suggestion' }}" class="suggestion" data-index="{{ index }}" bindtap="handle_onclick">{{ item.title }}</view>
         </view>
     </view>
-</view>
 </view>

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;
+    font-size: 30rpx;
-    margin-bottom: 40rpx;
-    font-size: 35rpx;
-    margin-right: 20rpx;
 }
 
 .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;
 }

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,
     });
   }
 })

scanner/components/servicemodal/servicemodal.wxml

@@ -5,7 +5,11 @@
             </image>
         </view>
         <view class="text">
-            长按识别二维码，添加人工客服
+            {{ title }}
+        </view>
+        <view class="return" bindtap="close" wx:if="{{ show_hide_button }}">
+            <image src="/assets/return.png" />
+            <text>返回</text>
         </view>
     </view>
 </view>

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;
+}

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,
+        })
+    },
 })

scanner/pages/chat/chat.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
-        "contentstream": "/components/contentstream/contentstream"
+        "contentstream": "/components/contentstream/contentstream",
+        "servicemodal": "/components/servicemodal/servicemodal"
     },
     "navigationBarTitleText": "徵象AI"
 }

scanner/pages/chat/chat.wxml

@@ -1,9 +1,20 @@
 <view class="container">
-    <view class="chatlog">
+    <view class="chatlog {{ show_modal.length > 0 ? 'hidden' : '' }}">
-        <contentstream content="{{ initial_message }}"></contentstream>
+        <contentstream wx:if="{{ prompt.length > 0 }}" content="{{ prompt }}" is_prompt="1"></contentstream>
+        <contentstream content="{{ response }}"></contentstream>
     </view>
-    <view class="chatinput" bindtap="goto_camera">
+    <view class="bottom">
-        <view class="inputbox">
+        <view class="quick-actions">
+            <view bindtap="show_channel" class="quick-action">
+                关注公众号
+            </view>
+            <servicemodal wechat_channel="1" show_hide_button="1" bindhide="hide_modal" wx:if="{{ show_modal == 'channel' }}" />
+            <view bindtap="show_service" class="quick-action">
+                人工客服
+            </view>
+            <servicemodal show_hide_button="1" bindhide="hide_modal" wx:if="{{ show_modal == 'service' }}" />
+        </view>
+        <view class="inputbox" bindtap="goto_camera">
             <view class="placeholder">开启AI验证</view>
             <view class="icon">
                 <image src="/static/up-button.png" class="up"></image>

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 {
+.bottom .placeholder {
-    font-size: 38rpx;
+    font-size: 30rpx;
     flex: 1;
     display: flex;
     align-items: center;
     padding-left: 30rpx;
 }
 
-.chatinput .icon {
+.bottom .icon {
-    width: 100rpx;
-    height: 100rpx;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.chatinput .icon .up {
+.bottom .icon .up {
-    width: 80rpx;
+    width: 60rpx;
-    height: 80rpx;
+    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;
 }

scanner/pages/test/test.wxml

@@ -1 +1,2 @@
-<scanguide></scanguide>
+<text>a</text>
+<text>b</text>