100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
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>
|