chatAI页面

src/router/index.js

@@ -484,6 +484,18 @@ const router = new VueRouter({
         },
       ],
     },
+    {
+      path: '/chatAIPage',
+      component: layout,
+      redirect: '/chatAIPage',
+      children: [
+        {
+          path: '/chatAIPage',
+          name: 'chatAIPage',
+          component: () => import('@/views/chatAIPage/index.vue'),
+        },
+      ],
+    },
   ],
 });
 export default router;

src/views/chatAIPage/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="chatAIPage">
+    <div class="header">
+      <div class="icon"><van-icon name="flower-o" size="25" /></div>
+      <div class="titleTip">欢迎进入随身邦chatBl，智能助理为您提供以下服务</div>
+    </div>
+    <div class="content">
+      <div class="tabItem" v-for="item in tabData" :style="{ background: item.backColor }">
+        <div class="tabName">{{ item.tabName }}</div>
+        <div class="message">{{ item.message }}</div>
+        <div class="icon">
+          <van-icon :name="item.icon" size="45" />
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="tip">对话发起</div>
+      <div class="chatBox">
+        <van-field
+          v-model="chatBoxMessage"
+          rows="3"
+          type="textarea"
+          :border="true"
+          placeholder="【随身邦chatBl】将与您对话，请输入…." />
+        <van-icon name="guide-o" class="sendIcon" size="40" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'chatAIPage',
+  data() {
+    return {
+      tabData: [
+        {
+          tabName: '指标查询',
+          message: '帮助您用自然语言查询指标、支持多条件组合查询',
+          icon: 'bar-chart-o',
+          backColor: '#665bb9',
+        },
+        {
+          tabName: '门店圈选',
+          message: '帮助您使用自然语言进行筛选，支持多条件组合筛选',
+          icon: 'list-switching',
+          backColor: '#68a3e7',
+        },
+      ],
+      chatBoxMessage: '',
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chatAIPage {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    .icon {
+      color: #666;
+    }
+    .titleTip {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  .content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 0;
+    .tabItem {
+      width: 48%;
+      float: left;
+      margin-right: 4%;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      color: #fff;
+      border-radius: 15px;
+      &:nth-child(even) {
+        margin-right: 0;
+      }
+      .tabName {
+        font-size: 16px;
+        margin-bottom: 10px;
+      }
+      .message {
+        font-size: 14px;
+        margin-bottom: 15px;
+      }
+      .icon {
+        text-align: center;
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .footer {
+    .tip {
+      font-size: 16px;
+      padding: 10px;
+    }
+    .chatBox {
+      position: relative;
+      .van-cell {
+        padding-bottom: 30px;
+      }
+      .sendIcon {
+        position: absolute;
+        right: 3px;
+        bottom: 0px;
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -173,7 +173,10 @@ export default {
         buryingPointName: 'Ai',
         buryingPointPosition: '首页-Ai',
       });
-      window.location.href = 'https://deepseek.nipponpaint.com.cn';
+      this.$router.push({
+        path: '/chatAIPage',
+      });
+      // window.location.href = 'https://deepseek.nipponpaint.com.cn';
     },
   },
 };