|
|
@@ -0,0 +1,507 @@ |
|
|
|
<template> |
|
|
|
<div :class="inPage ? 'page active' : 'page'"> |
|
|
|
<div id="top"></div> |
|
|
|
<!-- 主体内容 --> |
|
|
|
<div class="contnet"> |
|
|
|
<!-- 头部 --> |
|
|
|
<div class="head"> |
|
|
|
<img src="../../assets/icon/icon-loginout.png" alt=""> |
|
|
|
<div class="head-exit"> |
|
|
|
<img src="../../assets/icon/icon-loginoutwhite.png" alt=""> |
|
|
|
退出聊天 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 显示模板区 --> |
|
|
|
<div class="showBody"> |
|
|
|
<!-- 底部渐变区 --> |
|
|
|
<div class="showBody-bottom"> |
|
|
|
<!-- 更换人物模板列表 --> |
|
|
|
<div v-show="PersonButtonAction" class="showBody-modelList"> |
|
|
|
<div v-for="item,index in modelList" :key="item.name" class="showBody-modelList-item" @click="modelItemAction=index"> |
|
|
|
<div class="modelName">{{ item.name }} |
|
|
|
<div v-show="modelItemAction==index" class="showBody-modelList-item-boxBorder"></div> |
|
|
|
</div> |
|
|
|
<img :src="item.url" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 四大按钮 --> |
|
|
|
<div class="showBody-bottom-buttons"> |
|
|
|
<!-- --> |
|
|
|
<div class="showBody-bottom-buttons-item"> |
|
|
|
<div :class="{'buleBtn':PersonButtonAction}" class="defaultBtn" @click="clickPersonButton"> |
|
|
|
<img src="@/assets/icon/icon-person.png" alt=""> |
|
|
|
</div> |
|
|
|
<p>更换人物模板</p> |
|
|
|
</div> |
|
|
|
<!-- --> |
|
|
|
<div class="showBody-bottom-buttons-item"> |
|
|
|
<div :class="{'buleBtn':CameraAction}" class="defaultBtn" @click="clickCameraButton"> |
|
|
|
<img src="@/assets/icon/icon-openCamera.png" alt=""> |
|
|
|
</div> |
|
|
|
<p>摄像头开启</p> |
|
|
|
</div> |
|
|
|
<!-- --> |
|
|
|
<div class="showBody-bottom-buttons-item"> |
|
|
|
<div :class="{'buleBtn':CloseChatAction}" class="defaultBtn" @click="clickCloseChatButton"> |
|
|
|
<img src="@/assets/icon/icon-closeChat.png" alt=""> |
|
|
|
</div> |
|
|
|
<p>对话框关闭</p> |
|
|
|
</div> |
|
|
|
<!-- --> |
|
|
|
<div class="showBody-bottom-buttons-item"> |
|
|
|
<div :class="{'buleBtn':GlobalAction}" class="defaultBtn" @click="clickGlobalButton"> |
|
|
|
<img src="@/assets/icon/icon-global.png" alt=""> |
|
|
|
</div> |
|
|
|
<p>选择对话语言</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 语音说话 --> |
|
|
|
<div class="showBody-bottom-speakDiv"> |
|
|
|
<!-- 没点麦克风 --> |
|
|
|
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-microphone2.png" alt=""> |
|
|
|
</div> |
|
|
|
<!-- 点了麦克风 --> |
|
|
|
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text whiteDiv">按住说话</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-speaking.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 摄像头窗口 --> |
|
|
|
<div v-show="CameraAction" class="showBody-myCamera"></div> |
|
|
|
<!-- 聊天框 --> |
|
|
|
<div v-show="CloseChatAction" class="showBody-chatBox"> |
|
|
|
<!-- 关闭 --> |
|
|
|
<div class="showBody-chatBox-close"> |
|
|
|
<i @click="CloseChatAction=false" class="el-icon-close"></i> |
|
|
|
</div> |
|
|
|
<!-- 聊天记录 --> |
|
|
|
<div class="showBody-chatBox-record"> |
|
|
|
<div class="showBody-chatBox-record-my" :class="{'others':item.form!='me'}" v-for="item,index in chatRecordList" :key="index"> |
|
|
|
<span>{{ item.message }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 底部说话按钮 --> |
|
|
|
<div class="showBody-bottom-speakDiv"> |
|
|
|
<!-- 没点麦克风 --> |
|
|
|
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-microphone2.png" alt=""> |
|
|
|
</div> |
|
|
|
<!-- 点了麦克风 --> |
|
|
|
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-speaking.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 选择语言 --> |
|
|
|
<div v-show="GlobalAction" class="showBody-global"> |
|
|
|
<!-- --> |
|
|
|
<div class="showBody-global-choose"> |
|
|
|
<div class="showBody-global-choose-language"> |
|
|
|
<div class="showBody-global-choose-language-item" v-for="item in languageList" :key="item.type"> |
|
|
|
{{ item.type }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="showBody-global-choose-btn"> |
|
|
|
<div @click="GlobalAction=false" class="showBody-global-choose-btn-no">取消</div> |
|
|
|
<div class="showBody-global-choose-btn-yes">确定</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 底部说话按钮 --> |
|
|
|
<div class="showBody-bottom-speakDiv"> |
|
|
|
<!-- 没点麦克风 --> |
|
|
|
<div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮,快来跟我对话吧!</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-microphone2.png" alt=""> |
|
|
|
</div> |
|
|
|
<!-- 点了麦克风 --> |
|
|
|
<div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div> |
|
|
|
<div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn"> |
|
|
|
<img src="../../assets/icon/icon-speaking.png" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
// 组件 |
|
|
|
import Vue from "vue"; |
|
|
|
import { Toast } from "vant"; |
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
// 工具 |
|
|
|
import { scrollToID } from "../../utils"; |
|
|
|
Vue.use(Toast); |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
inPage: false, |
|
|
|
PersonButtonAction: false,//个人按钮状态 |
|
|
|
CameraAction:false,// 摄像头按钮状态 |
|
|
|
CloseChatAction:false,// 聊天框按钮状态 |
|
|
|
GlobalAction:false,// 语音按钮状态 |
|
|
|
speakingAction: false, // 底部是否说话按钮状态 |
|
|
|
modelList: [ |
|
|
|
{ name:'甘雨',url:require('../../assets/img/module_3_1.png')}, |
|
|
|
{ name:'莫甘娜',url:require('../../assets/img/module_3_1.png')}, |
|
|
|
{ name:'达尔文',url:require('../../assets/img/module_3_1.png')}, |
|
|
|
{ name:'雨果',url:require('../../assets/img/module_3_1.png')}, |
|
|
|
],// 人物模板列表 |
|
|
|
modelItemAction: -1,// 人物模板列表选中高亮 |
|
|
|
chatRecordList: [ |
|
|
|
{ form: 'me', message: '生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1' }, |
|
|
|
{ form: 'you', message: '生于忧患死于安乐2' }, |
|
|
|
{ form: 'me', message: '生于忧患死于安乐3' }, |
|
|
|
{ form: 'you', message: '生于忧患死于安乐4' }, |
|
|
|
{ form: 'me', message: '生于忧患死于安乐5' }, |
|
|
|
{ form: 'me', message: '生于忧患死于安乐6' }, |
|
|
|
{ form: 'me', message: '生于忧患死于安乐7' }, |
|
|
|
],// 聊天记录列表 |
|
|
|
languageList: [ |
|
|
|
{type:'AUTO'}, |
|
|
|
{type:'璃月语'}, |
|
|
|
{type:'JP语'}, |
|
|
|
{type:'english'}, |
|
|
|
{type:'中国话'}, |
|
|
|
{type:'四川话'}, |
|
|
|
{type:'东百话'}, |
|
|
|
{type:'阿拉伯语'}, |
|
|
|
{type:'朝鲜语'}, |
|
|
|
], //语种列表 |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
characters: (state) => state.publicObj.characters, |
|
|
|
}), |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
...mapActions(["setCharacters"]), |
|
|
|
// 点击个人按钮事件 |
|
|
|
clickPersonButton() { |
|
|
|
this.PersonButtonAction=!this.PersonButtonAction |
|
|
|
}, |
|
|
|
// 点击摄像头按钮事件 |
|
|
|
clickCameraButton() { |
|
|
|
this.CameraAction=!this.CameraAction |
|
|
|
}, |
|
|
|
// 点击聊天框按钮事件 |
|
|
|
clickCloseChatButton() { |
|
|
|
this.CloseChatAction=!this.CloseChatAction |
|
|
|
}, |
|
|
|
// 点击语音按钮事件 |
|
|
|
clickGlobalButton() { |
|
|
|
this.GlobalAction=!this.GlobalAction |
|
|
|
}, |
|
|
|
go(url) { |
|
|
|
this.$router.push(url); |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
mounted() { |
|
|
|
this.inPage = true; |
|
|
|
scrollToID("top"); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
transform: translateX(30%); |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.5s; // global-transition |
|
|
|
&.active { |
|
|
|
opacity: 1; |
|
|
|
transform: translateX(0); |
|
|
|
} |
|
|
|
} |
|
|
|
.contnet { |
|
|
|
|
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 4px 10px; |
|
|
|
>img { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
} |
|
|
|
&-exit { |
|
|
|
margin-top: 4px; |
|
|
|
width: 97px; |
|
|
|
height: 28px; |
|
|
|
text-align: center; |
|
|
|
line-height: 28px; |
|
|
|
background: #24A9FF; |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); |
|
|
|
border-radius: 33px; |
|
|
|
>img { |
|
|
|
margin-top: -2px; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.showBody { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: calc(100vh - 44px) ; |
|
|
|
background-color: red; |
|
|
|
&-bottom { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
// height: 150px; |
|
|
|
padding-bottom: 33px; |
|
|
|
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%); |
|
|
|
&-buttons { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
padding: 0 20px; |
|
|
|
color: #fff; |
|
|
|
font-size: 10px; |
|
|
|
&-item { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
p { |
|
|
|
margin-top: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.defaultBtn { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 44px; |
|
|
|
height: 44px; |
|
|
|
background: rgba(0,0,0,0.3); |
|
|
|
border-radius: 22px; |
|
|
|
img { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
&-speakDiv { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 20px; |
|
|
|
padding: 0 15px; |
|
|
|
&-text { |
|
|
|
margin-top: 4px; |
|
|
|
width: 290px; |
|
|
|
height: 36px; |
|
|
|
border-radius: 18px; |
|
|
|
border: 1px solid #FFFFFF; |
|
|
|
font-size: 14px; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 34px; |
|
|
|
} |
|
|
|
.whiteDiv { |
|
|
|
background-color: #ececec; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&-modelList { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
height: 200px; |
|
|
|
padding-left: 15px; |
|
|
|
overflow-x: scroll; |
|
|
|
&-item { |
|
|
|
position: relative; |
|
|
|
margin-right: 15px; |
|
|
|
&-boxBorder { |
|
|
|
position: absolute; |
|
|
|
top: -2px; |
|
|
|
width: 123px; |
|
|
|
height: 183px; |
|
|
|
border-radius: 8px; |
|
|
|
transition: all 0.5s; // |
|
|
|
border: 3px solid #00ffe1; |
|
|
|
} |
|
|
|
.modelName { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 48px; |
|
|
|
height: 28px; |
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
border-radius: 8px 0px 8px 0px; |
|
|
|
color: #fff; |
|
|
|
font-size: 13px; |
|
|
|
line-height: 28px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 120px; |
|
|
|
height: 180px; |
|
|
|
border-radius:8px 5px 5px 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
&-myCamera { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
width: 96px; |
|
|
|
height: 180px; |
|
|
|
background-image:url(../../assets/img/bg.png); |
|
|
|
background-size: contain; |
|
|
|
} |
|
|
|
&-chatBox { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 375px; |
|
|
|
background-color: #ECECEC; |
|
|
|
&-close { |
|
|
|
padding: 10px 15px; |
|
|
|
height: 35px; |
|
|
|
i { |
|
|
|
float: right; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
} |
|
|
|
&-record { |
|
|
|
padding: 5px 10px 0; |
|
|
|
height: 255px; |
|
|
|
overflow-y: scroll; |
|
|
|
font-size: 15px; |
|
|
|
color: #333333; |
|
|
|
line-height: 21px; |
|
|
|
&-my { |
|
|
|
float: right; |
|
|
|
padding: 10px 20px; |
|
|
|
margin-bottom: 15px; |
|
|
|
background: #9EE445; |
|
|
|
border-radius: 20px 20px 2px 20px; |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
.others { |
|
|
|
float: left; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 20px 20px 20px 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.showBody-bottom-speakDiv { |
|
|
|
margin-top: 0; |
|
|
|
height: 85px; |
|
|
|
padding-top: 15px; |
|
|
|
background-color: #fff; |
|
|
|
&-text { |
|
|
|
color: #666; |
|
|
|
border-radius: 18px; |
|
|
|
border: 1px solid #666666; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&-global { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 385px; |
|
|
|
background-color: #ECECEC; |
|
|
|
&-choose { |
|
|
|
padding: 20px 36px 0; |
|
|
|
height: 304px; |
|
|
|
overflow-y: scroll; |
|
|
|
font-size: 15px; |
|
|
|
color: #333333; |
|
|
|
line-height: 21px; |
|
|
|
&-language { |
|
|
|
display: flex; |
|
|
|
justify-content: start; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 300px; |
|
|
|
height: 210px; |
|
|
|
background-color: #fff; |
|
|
|
overflow: hidden; |
|
|
|
border: none; |
|
|
|
border-radius: 15px; |
|
|
|
&-item { |
|
|
|
width: 100px; |
|
|
|
height: 70px; |
|
|
|
text-align: center; |
|
|
|
line-height: 70px; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
border: 1px solid #ECECEC; |
|
|
|
} |
|
|
|
} |
|
|
|
&-btn { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 20px; |
|
|
|
>div { |
|
|
|
width: 139px; |
|
|
|
height: 37px; |
|
|
|
border-radius: 31px; |
|
|
|
text-align: center; |
|
|
|
line-height: 37px; |
|
|
|
font-size: 15px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
&-no { |
|
|
|
color: #333333; |
|
|
|
background: #FFFFFF; |
|
|
|
} |
|
|
|
&-yes { |
|
|
|
color: #FFFFFF; |
|
|
|
background: #24A9FF; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.showBody-bottom-speakDiv { |
|
|
|
margin-top: 0; |
|
|
|
height: 85px; |
|
|
|
padding-top: 15px; |
|
|
|
background-color: #fff; |
|
|
|
&-text { |
|
|
|
color: #666; |
|
|
|
border-radius: 18px; |
|
|
|
border: 1px solid #666666; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.showBody-modelList::-webkit-scrollbar { |
|
|
|
width:0; |
|
|
|
} |
|
|
|
.showBody-chatBox-record::-webkit-scrollbar { |
|
|
|
width:0; |
|
|
|
} |
|
|
|
.defaultBtn { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 44px; |
|
|
|
height: 44px; |
|
|
|
background: rgba(0,0,0,0.3); |
|
|
|
border-radius: 22px; |
|
|
|
img { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |