小助理

src/project/baidu/AppDialogue/AppDialogue.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="AppDialogue">
+    <div class="footer-tab">
+      <div class="item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
+        <img :src="tabIndex == index ? item.selectIcon : item.icon" alt="">
+        <p :class="tabIndex == index ? 'active' : ''">{{item.text}}</p>
+      </div>
+    </div>
+    <Talk v-if="!tabIndex && !showDetail" />
+    <Record v-if="tabIndex && !showDetail" @toDetail="toDetail" />
+    <Detail v-if="showDetail" :params="params" @back="back" />
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import Talk from './Talk'
+import Record from './Record'
+import Detail from './Detail'
+export default {
+  name: "AppDialogue",
+  appName: "Copilot小助理",
+  data() {
+    return {
+      tabList: [
+        {
+          icon: require('./img/talk.png'),
+          selectIcon: require('./img/talk_selected.png'),
+          text: '对话',
+        },
+        {
+          icon: require('./img/record.png'),
+          selectIcon: require('./img/record_selected.png'),
+          text: '记录'
+        }
+      ],
+      tabIndex: 0,
+      showDetail: false
+    };
+  },
+  components: {Talk, Record, Detail},
+  computed: {
+    ...mapState(["user"]),
+  },
+  onLoad() {
+  },
+  onShow() {
+    document.title = "Copilot小助理"
+  },
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+    toDetail(e) {
+      this.params = e
+      this.showDetail = true
+    },
+    back() {
+      this.showDetail = false
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.AppDialogue {
+  .footer-tab {
+    width: 100%;
+    height: 100px;
+    padding-bottom: 68px;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    display: flex;
+    .item {
+      flex: 1;
+      text-align: center;
+      img {
+        width: 48px;
+        height: 48px;
+        margin: 12px 0 8px 0;
+      }
+      p {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 20px;
+        color: #8A929F;
+      }
+      .active {
+        color: #026AF2;
+      }
+    }
+  }
+}
+</style>