dvcp_v2_wxcp_app/src/project/biaopin/AppDialogue/AppDialogue.vue

<template>
  <div class="AppDialogue">
    <div class="footer-tab" v-if="!showDetail">
      <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;
    border-top: 1px solid #eee;
    .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;
        line-height: 28px;
        color: #8A929F;
      }
      .active {
        color: #026AF2;
      }
    }
  }
}
</style>