scanner: add chat page

scanner/app.json

@@ -9,7 +9,8 @@
         "pages/productinfo/productinfo",
         "pages/test/test",
         "pages/article/article",
-        "pages/nav/nav"
+        "pages/nav/nav",
+        "pages/chat/chat"
     ],
     "window": {
         "backgroundTextStyle": "light",

scanner/components/contentstream/contentstream.js

@@ -0,0 +1,80 @@
+// components/contentstream/contentstream.js
+Component({
+
+    /**
+     * Component properties
+     */
+    properties: {
+        content: {
+            type: Array,
+            value: []
+        }
+    },
+
+    /**
+     * Component initial data
+     */
+    data: {
+        visible_content: [],
+        next_index: 0,
+        next_offset: 0,
+    },
+
+    /**
+     * Component methods
+     */
+    methods: {
+        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];
+            if (next_entry.type != 'text') {
+                // just add the next entry to the visible content
+                this.setData({
+                    visible_content: this.data.visible_content.concat(next_entry),
+                    next_index: this.data.next_index + 1,
+                    next_offset: 0
+                });
+                return;
+            }
+            if (this.data.next_offset >= next_entry.content.length) {
+                // end of current entry, move to the next entry
+                this.setData({
+                    next_index: this.data.next_index + 1,
+                    next_offset: 0,
+                })
+                return;
+            }
+            // here we have some remaining text to add to the last visible content
+            if (this.data.next_offset == 0) {
+                this.setData({
+                    visible_content: this.data.visible_content.concat({
+                        type: 'text',
+                        content: "",
+                    })
+                });
+            }
+            var last_visible_entry = this.data.visible_content[this.data.visible_content.length - 1];
+            var new_text = next_entry.content.slice(this.data.next_offset, this.data.next_offset + 1);
+            last_visible_entry.content = last_visible_entry.content + new_text;
+            this.setData({
+                visible_content: this.data.visible_content.slice(0, this.data.visible_content.length - 1).concat(last_visible_entry),
+                next_offset: this.data.next_offset + 1,
+            });
+        }
+
+    },
+    ready() {
+        console.log('onShow', this.data.next_index, this.data.next_offset);
+        setTimeout(() => {
+            this.update_interval = setInterval(() => {
+                this.update_visible_content();
+            }, 50);
+        }, 500);
+    },
+    detached() {
+        clearInterval(this.update_interval);
+    }
+})

scanner/components/contentstream/contentstream.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "scanguidecss": "/components/scanguidecss/scanguidecss"
+    }
+}

scanner/components/contentstream/contentstream.wxml

@@ -0,0 +1,13 @@
+<view class="item">
+<view class="icon">
+<image class="gray" src="/static/logo.png"></image>
+</view>
+<view class="content">
+    <view wx:for="{{ visible_content }}" wx:key="index">
+        <text wx:if="{{ item.type == 'text'}}">{{ item.content }}</text>
+        <view wx:if="{{ item.type == 'scanguidecss' }}" class="media">
+            <scanguidecss wx:if="{{ item.type == 'scanguidecss' }}" hide_title="1"></scanguidecss>
+        </view>
+    </view>
+</view>
+</view>

scanner/components/contentstream/contentstream.wxss

@@ -0,0 +1,31 @@
+
+.item {
+    display: flex;
+    margin: 30rpx;
+}
+
+.item .icon {
+    display: inline-block;
+    margin-right: 30rpx;
+}
+
+.icon image {
+    width: 80rpx;
+    height: 80rpx;
+}
+
+.item .content {
+    display: inline-block;
+    min-height: 80rpx;
+}
+
+.content text {
+    display: block;
+    margin-bottom: 40rpx;
+    font-size: 35rpx;
+    margin-right: 20rpx;
+}
+
+.content view.media {
+    margin-bottom: 40rpx;
+}

scanner/components/scanguidecss/scanguidecss.js

@@ -5,7 +5,10 @@ Component({
      * Component properties
      */
     properties: {
-
+        hide_title: {
+            type: Boolean,
+            value: false
+        }
     },
 
     /**

scanner/components/scanguidecss/scanguidecss.wxml

@@ -1,5 +1,5 @@
 <view class="scanguide">
-    <view class="title">
+    <view wx:if="{{ ! hide_title }}" class="title">
         <view class="text1">
             移近一点
         </view>
@@ -13,7 +13,7 @@
             采集完成
         </view>
     </view>
-    <view class="scan">
+    <view class="scan {{ hide_title ? '' : 'with-title' }}">
         <image class="markers-glow" src="/static/scan-guide-qrmarkers-glow.png"></image>
         <image class="markers" src="/static/scan-guide-qrmarkers.png"></image>
         <image class="qr" src="/static/scan-guide-qr.png"></image>

scanner/components/scanguidecss/scanguidecss.wxss

@@ -66,6 +66,9 @@
     width: 100%;
     box-sizing: border-box;
     height: 400rpx;
+}
+
+.scan.with-title {
     top: 80rpx;
 }
 

scanner/pages/chat/chat.js

@@ -0,0 +1,92 @@
+// pages/chat/chat.js
+Page({
+
+    /**
+     * Page initial data
+     */
+    data: {
+        initial_message: [
+            {
+                type: 'text',
+                content: '欢迎使用徵象AI,让每一次验证都成为与品牌的深度对话。'
+            },
+            {
+                type: 'text',
+                content: '为保障您的权益,本系统采用多模态AI深度鉴真引擎,通过多重校验机制实现智能二维码防伪核验。'
+            },
+            {
+                type: 'text',
+                content: '请将手机摄像头对准产品智能二维码,'
+            },
+            {
+                type: 'scanguidecss',
+            },
+            {
+                type: 'text',
+                content: '保持画面完整覆盖定位点(图示区域), 系统将自动触发高精度图像分割算法完成验证。 '
+            },
+        ]
+    },
+
+    /**
+     * Lifecycle function--Called when page load
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * Lifecycle function--Called when page is initially rendered
+     */
+    onReady() {
+
+    },
+
+    /**
+     * Lifecycle function--Called when page show
+     */
+    onShow() {
+
+    },
+
+    /**
+     * Lifecycle function--Called when page hide
+     */
+    onHide() {
+
+    },
+
+    /**
+     * Lifecycle function--Called when page unload
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * Page event handler function--Called when user drop down
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * Called when page reach bottom
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * Called when user click on the top right corner to share
+     */
+    onShareAppMessage() {
+
+    },
+    
+    goto_camera() {
+        wx.navigateTo({
+            url: '/pages/camera/camera',
+        })
+    }
+})

scanner/pages/chat/chat.json

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

scanner/pages/chat/chat.wxml

@@ -0,0 +1,13 @@
+<view class="container">
+    <view class="chatlog">
+        <contentstream content="{{ initial_message }}"></contentstream>
+    </view>
+    <view class="chatinput" bindtap="goto_camera">
+        <view class="inputbox">
+            <view class="placeholder">开启AI验证</view>
+            <view class="icon">
+                <image src="/static/up-button.png" class="up"></image>
+            </view>
+        </view>
+    </view>
+</view>

scanner/pages/chat/chat.wxss

@@ -0,0 +1,45 @@
+.chatlog {
+    width: 750rpx;
+    height: calc(100vh - 200rpx);
+    margin-top: 40rpx;
+}
+
+.chatinput {
+    position: fixed;
+    bottom: 0;
+    width: 750rpx;
+    height: 200rpx;
+}
+
+.chatinput .inputbox {
+    display: flex;
+    margin: 30rpx;
+    height: 120rpx;
+    border-radius: 60rpx;
+    background: #eee;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20rpx;
+}
+
+.chatinput .placeholder {
+    font-size: 38rpx;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding-left: 30rpx;
+}
+
+.chatinput .icon {
+    width: 100rpx;
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chatinput .icon .up {
+    width: 80rpx;
+    height: 80rpx;
+}

scanner/project.private.config.json

@@ -2,6 +2,13 @@
     "condition": {
         "miniprogram": {
             "list": [
+                {
+                    "name": "chat",
+                    "pathName": "pages/chat/chat",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
                 {
                     "name": "camera (dev)",
                     "pathName": "pages/camera/camera",