|
- <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>
|