first commit
first commit
This commit is contained in:
zhouchengrong
470
src/component/HomePage/Generate.vue
Normal file
470
src/component/HomePage/Generate.vue
Normal file
@@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal class="my_material_modal"
|
||||
v-model:visible="generateShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_title">My Library</div>
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_material_content">
|
||||
<div class="material_content_top">
|
||||
<div class="material_content_top_title"></div>
|
||||
<div class="material_content_top_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="designType"
|
||||
:options="disignTypeList"
|
||||
placeholder="All"
|
||||
:allowClear="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
|
||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material_content_body scroll_style">
|
||||
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
|
||||
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
|
||||
</div>
|
||||
<div class="content_img_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showSizeChanger="false"
|
||||
:showQuickJumper="true"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { message } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let myMaterialModalShow = ref(false)
|
||||
let imgList = ref([])
|
||||
let selectImgList:any = ref([])
|
||||
let selectImgListIds:any = ref([])
|
||||
let isShowLoading:any = ref(false)
|
||||
let selectCode:any = ref('')
|
||||
let currentPage:any = ref(1)
|
||||
let searchPictureName = ref('')
|
||||
let pageSize = ref(20)
|
||||
let total = ref(0)
|
||||
let searcMaterialhName:any = ref('') //搜索名字
|
||||
let designType:any = ref(null)
|
||||
let disignTypeList = [
|
||||
{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
]
|
||||
let boardList = {
|
||||
Moodboard:'Mood',
|
||||
Printboard:'Print',
|
||||
Sketchboard:'Sketch',
|
||||
MarketingSketch:'MarketingSketch'
|
||||
}
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
selectImgList,
|
||||
selectImgListIds,
|
||||
isShowLoading,
|
||||
selectCode,
|
||||
currentPage,
|
||||
searchPictureName,
|
||||
pageSize,
|
||||
total,
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
disignTypeList,
|
||||
boardList
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
init(code:any){
|
||||
this.selectCode = code
|
||||
this.myMaterialModalShow = true
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
selectImgItem(imgData:any){
|
||||
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
|
||||
if(this.selectImgListIds.indexOf(imgData.id) === -1){
|
||||
this.selectImgList.push(imgData)
|
||||
this.selectImgListIds.push(imgData.id)
|
||||
}else{
|
||||
let index = this.selectImgListIds.indexOf(imgData.id)
|
||||
this.selectImgList.splice(index,1)
|
||||
this.selectImgListIds.splice(index,1)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
selectAllImg(){
|
||||
if(this.selectImgListIds.length == this.imgList.length){
|
||||
this.selectImgListIds = []
|
||||
this.selectImgList = []
|
||||
}else{
|
||||
this.selectImgListIds = this.imgList.map((v:any) => v.id)
|
||||
this.selectImgList = this.imgList
|
||||
}
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type:this.designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
}
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv: any) => {
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowLoading = false
|
||||
});
|
||||
},
|
||||
|
||||
confirmSelect(){
|
||||
if(!this.selectImgList.length){
|
||||
message.error('Please select at least one image')
|
||||
return
|
||||
}
|
||||
this.$emit('confirmSelect',this.selectImgList)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.myMaterialModalShow = false
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.selectImgList = []
|
||||
this.selectImgListIds = []
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
this.pageSize = 10
|
||||
this.total = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.my_material_modal{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my_material_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 6.6rem;
|
||||
background: #F7F7F7;
|
||||
padding: 0 3.4rem 0 3.1rem;
|
||||
|
||||
.my_material_title{
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.my_material_header_right{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.content_search_block{
|
||||
margin-right: 5rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 30rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4rem;
|
||||
line-height: 3.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon_close{
|
||||
color: rgba(174, 178, 183, 1);
|
||||
font-size: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.my_material_content{
|
||||
padding: 0 3rem 3.5rem 3rem;
|
||||
height: calc(100% - 6.6rem);
|
||||
position: relative;
|
||||
|
||||
.material_content_top{
|
||||
padding: 1.3rem 0 2.1rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.material_content_top_title{
|
||||
font-size: 20px;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.material_content_top_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select_block{
|
||||
background: #FFFFFF;
|
||||
color: #1A1A1A !important;
|
||||
margin-right: 2.3rem;
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
color: #64686D;
|
||||
cursor: pointer;
|
||||
|
||||
&.check_all{
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.check_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
padding: 0.3rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
.check_block_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.material_content_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 19rem);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 1.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
.content_img_item_block{
|
||||
border: 0.1rem solid transparent;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_item_img{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.print_content_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.content_img_name{
|
||||
width: 16.5rem;
|
||||
height: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
&.loading_block{
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.material_confirm{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
line-height: 3.6rem;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
color: #FFFFFF;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
position: absolute;
|
||||
bottom: 3.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="header_component">
|
||||
<img class="header_logo" @click="turnToNewPage('https://www.aidlab.hk/en/')" src="@/assets/images/loginPage/aida_logo.png" />
|
||||
<nav class="header_nav_content">
|
||||
<div :class="['nav_item', $route.name === 'home'?'select_nav':'']" @click="turnToPage('home')">HOME</div>
|
||||
<div :class="['nav_item', $route.name === 'library'?'select_nav':'']" @click="turnToPage('library')">LIBRARY</div>
|
||||
<div :class="['nav_item', $route.name === 'history'?'select_nav':'']" @click="turnToPage('history')">HISTORY</div>
|
||||
</nav>
|
||||
<div class="header_right_content">
|
||||
<div class="header_icon icon iconfont icon-touxiang3"></div>
|
||||
<div class="header_user_content">
|
||||
<div class="username">{{userInfo?.userName}}</div>
|
||||
<div :class="['icon','iconfont', 'icon-xiala', isShowOperate?'icon_rotate':'']" @click.stop="changeShowOperateContent()"></div>
|
||||
<div class="username">{{ userInfo?.userName }}</div>
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
isShowOperate ? 'icon_rotate' : '',
|
||||
]"
|
||||
@click.stop="changeShowOperateContent()"
|
||||
></div>
|
||||
<nav class="select_block" v-show="isShowOperate">
|
||||
<!-- <div class="select_item" @click="showBindEmailModal()">
|
||||
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
|
||||
</div> -->
|
||||
<div class="select_item" @click="logout()">
|
||||
<span class="icon iconfont icon-tuichu"></span><span class="select_item_des">log off</span>
|
||||
<span class="icon iconfont icon-tuichu"></span
|
||||
><span class="select_item_des">log off</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header_nav_content">
|
||||
<div
|
||||
:class="[
|
||||
'nav_item',
|
||||
$route.name === 'home' ? 'select_nav' : '',
|
||||
]"
|
||||
@click="turnToPage('home')"
|
||||
>
|
||||
HOME
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'nav_item',
|
||||
$route.name === 'library' ? 'select_nav' : '',
|
||||
]"
|
||||
@click="turnToPage('library')"
|
||||
>
|
||||
LIBRARY
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'nav_item',
|
||||
$route.name === 'history' ? 'select_nav' : '',
|
||||
]"
|
||||
@click="turnToPage('history')"
|
||||
>
|
||||
HISTORY
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="header_right">
|
||||
<img
|
||||
class="header_logo"
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
<Habit></Habit>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a-modal class="modal_component"
|
||||
v-model:visible="bindEmailVisible"
|
||||
:footer="null"
|
||||
<a-modal
|
||||
class="modal_component"
|
||||
v-model:visible="bindEmailVisible"
|
||||
:footer="null"
|
||||
title="Mailbox binding"
|
||||
width="56rem"
|
||||
:maskClosable="false"
|
||||
@@ -37,284 +80,323 @@
|
||||
</template>
|
||||
<div class="bind_email_content" v-if="isHaveBindEmail">
|
||||
<div class="bind_email_tip">you have binded email</div>
|
||||
<div class="bind_email">{{userInfo.email}}</div>
|
||||
<div class="bind_email">{{ userInfo.email }}</div>
|
||||
</div>
|
||||
<div class="bind_email_content" v-else>
|
||||
<div class="bind_email_content" v-else>
|
||||
<!-- 绑定邮箱第一步 start -->
|
||||
<div v-show="bindEmailStep === 1">
|
||||
<div class="bind_email_form_content">
|
||||
<div class="bind_email_form_title">Email</div>
|
||||
<input class="bind_email_form_input" placeholder="Enter a new email" v-model="email" @keydown.enter="emailNextStepFun()">
|
||||
<input
|
||||
class="bind_email_form_input"
|
||||
placeholder="Enter a new email"
|
||||
v-model="email"
|
||||
@keydown.enter="emailNextStepFun()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="bind_email_submit_button"
|
||||
@click="emailNextStepFun()"
|
||||
>
|
||||
Next step
|
||||
</div>
|
||||
<div class="bind_email_submit_button" @click="emailNextStepFun()">Next step</div>
|
||||
</div>
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
|
||||
<!-- 绑定邮箱第二步 start -->
|
||||
<div v-show="bindEmailStep === 2">
|
||||
<div @click="emailLastStepFun()">
|
||||
<span class="icon iconfont icon--shangyibu"></span><span class="email_last_step_content">Enter verification code</span>
|
||||
<span class="icon iconfont icon--shangyibu"></span
|
||||
><span class="email_last_step_content"
|
||||
>Enter verification code</span
|
||||
>
|
||||
</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">Sent to {{email}}</div>
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ email }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{time}}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()">Resend</span>
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()"
|
||||
>Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationCodeInput :ct="emailCode" @sendCaptcha="submitBindEmail($event)"></VerificationCodeInput>
|
||||
<VerificationCodeInput
|
||||
:ct="emailCode"
|
||||
@sendCaptcha="submitBindEmail($event)"
|
||||
></VerificationCodeInput>
|
||||
</div>
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script >
|
||||
import { defineComponent ,createVNode} from 'vue'
|
||||
import {isEmail} from '@/tool/util'
|
||||
import {setCookie, getCookie, WriteCookie} from '@/tool/cookie'
|
||||
import VerificationCodeInput from '@/component/LoginPage/verificationCodeInput.vue'
|
||||
import { defineComponent, createVNode } from "vue";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import Habit from "@/component/Detail/habit.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
VerificationCodeInput,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isShowOperate:false,
|
||||
bindEmailVisible:false,
|
||||
isHaveBindEmail:false,
|
||||
bindEmailStep:1,
|
||||
email:'',
|
||||
emailCode:['','','','','',''],//邮箱验证码
|
||||
time:60,//60秒倒计时
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowOperate: false,
|
||||
bindEmailVisible: false,
|
||||
isHaveBindEmail: false,
|
||||
bindEmailStep: 1,
|
||||
email: "",
|
||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||
time: 60, //60秒倒计时
|
||||
timer: 0,
|
||||
userInfo:{},
|
||||
timerOperate:null,
|
||||
numTime:30,
|
||||
timerSec:null,
|
||||
modalWarning:null
|
||||
}
|
||||
userInfo: {},
|
||||
timerOperate: null,
|
||||
numTime: 30,
|
||||
timerSec: null,
|
||||
modalWarning: null,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.userInfo = JSON.parse(getCookie('userInfo'))
|
||||
if(!this.userInfo){
|
||||
this.$router.replace('/login')
|
||||
}else{
|
||||
this.accountIsLogin(this.userInfo)
|
||||
mounted() {
|
||||
this.userInfo = JSON.parse(getCookie("userInfo"));
|
||||
if (!this.userInfo) {
|
||||
this.$router.replace("/login");
|
||||
} else {
|
||||
this.accountIsLogin(this.userInfo);
|
||||
}
|
||||
this.isHaveBindEmail = this.userInfo?.email ? true : false
|
||||
this.isHaveBindEmail = this.userInfo?.email ? true : false;
|
||||
|
||||
this.operateClick()
|
||||
document.addEventListener('click',this.operateClick)
|
||||
this.operateClick();
|
||||
document.addEventListener("click", this.operateClick);
|
||||
},
|
||||
methods:{
|
||||
turnToNewPage(url){
|
||||
window.open(url)
|
||||
methods: {
|
||||
turnToNewPage(url) {
|
||||
window.open(url);
|
||||
},
|
||||
|
||||
turnToPage(name){
|
||||
let noRefresh = name === 'home' ? true :false
|
||||
this.$router.push({name:name,params: {noRefresh:noRefresh}})
|
||||
turnToPage(name) {
|
||||
let noRefresh = name === "home" ? true : false;
|
||||
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
|
||||
},
|
||||
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent(){
|
||||
this.isShowOperate = !this.isShowOperate
|
||||
document.addEventListener('click',this.closeShowOperateContent,false)
|
||||
changeShowOperateContent() {
|
||||
this.isShowOperate = !this.isShowOperate;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
this.closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
//关闭下拉图标
|
||||
closeShowOperateContent(){
|
||||
this.isShowOperate = false
|
||||
document.removeEventListener('click',this.closeShowOperateContent)
|
||||
closeShowOperateContent() {
|
||||
this.isShowOperate = false;
|
||||
document.removeEventListener("click", this.closeShowOperateContent);
|
||||
},
|
||||
|
||||
//打开绑定邮箱弹窗
|
||||
showBindEmailModal(){
|
||||
this.bindEmailVisible = true
|
||||
showBindEmailModal() {
|
||||
this.bindEmailVisible = true;
|
||||
},
|
||||
|
||||
emailNextStepFun(){
|
||||
if(!isEmail(this.email)){
|
||||
message.error('The email format is incorrect');
|
||||
return
|
||||
emailNextStepFun() {
|
||||
if (!isEmail(this.email)) {
|
||||
message.error("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
email:this.email,
|
||||
email: this.email,
|
||||
operationType: "BIND_MAILBOX",
|
||||
}
|
||||
const hide = message.loading('loading', 0);
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv) =>{
|
||||
if(rv){
|
||||
this.bindEmailStep = 2
|
||||
this.emailCode = ['','','','','',''],
|
||||
this.createTimer()
|
||||
hide()
|
||||
message.success('Succeeded in binding the mailbox.')
|
||||
}
|
||||
}).catch(res=>{
|
||||
hide()
|
||||
})
|
||||
};
|
||||
const hide = message.loading("loading", 0);
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data)
|
||||
.then((rv) => {
|
||||
if (rv) {
|
||||
this.bindEmailStep = 2;
|
||||
(this.emailCode = ["", "", "", "", "", ""]),
|
||||
this.createTimer();
|
||||
hide();
|
||||
message.success("Succeeded in binding the mailbox.");
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
hide();
|
||||
});
|
||||
},
|
||||
|
||||
//绑定邮箱的上一步
|
||||
emailLastStepFun(){
|
||||
this.bindEmailStep = 1
|
||||
this.email = ''
|
||||
this.emailCode = ['','','','','',''],
|
||||
this.clearTimer()
|
||||
emailLastStepFun() {
|
||||
this.bindEmailStep = 1;
|
||||
this.email = "";
|
||||
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||
},
|
||||
|
||||
//创建定时器
|
||||
createTimer(){
|
||||
this.timer = setInterval(()=>{
|
||||
this.time--
|
||||
if(!this.time){
|
||||
clearInterval(this.timer)
|
||||
createTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.time--;
|
||||
if (!this.time) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},1000)
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer(){
|
||||
this.time = 60
|
||||
if(this.timer){
|
||||
clearInterval(this.timer)
|
||||
clearTimer() {
|
||||
this.time = 60;
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
|
||||
//登出
|
||||
logout(){
|
||||
logout() {
|
||||
let data = {
|
||||
userId:this.userInfo.userId
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) =>{
|
||||
this.$router.replace('/login')
|
||||
WriteCookie('token')
|
||||
})
|
||||
userId: this.userInfo.userId,
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||
this.$router.replace("/login");
|
||||
WriteCookie("token");
|
||||
});
|
||||
},
|
||||
|
||||
//绑定邮箱
|
||||
submitBindEmail(emailVerifyCode){
|
||||
let data = {
|
||||
userEmail:this.email,
|
||||
submitBindEmail(emailVerifyCode) {
|
||||
let data = {
|
||||
userEmail: this.email,
|
||||
userId: this.userInfo.userId,
|
||||
emailVerifyCode:emailVerifyCode
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then((rv) =>{
|
||||
if(rv){
|
||||
this.userInfo.email = this.email
|
||||
setCookie('userInfo',JSON.stringify(this.userInfo))
|
||||
this.bindEmailVisible = false,
|
||||
this.bindEmailStep = 1
|
||||
this.clearTimer()
|
||||
this.emailCode = ['','','','','','']
|
||||
emailVerifyCode: emailVerifyCode,
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
this.userInfo.email = this.email;
|
||||
setCookie("userInfo", JSON.stringify(this.userInfo));
|
||||
(this.bindEmailVisible = false),
|
||||
(this.bindEmailStep = 1);
|
||||
this.clearTimer();
|
||||
this.emailCode = ["", "", "", "", "", ""];
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
//判断是否登录
|
||||
accountIsLogin(userInfo){
|
||||
let data ={
|
||||
userId:userInfo.userId
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) =>{
|
||||
if(!rv){
|
||||
this.$router.replace('/login')
|
||||
accountIsLogin(userInfo) {
|
||||
let data = {
|
||||
userId: userInfo.userId,
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
|
||||
if (!rv) {
|
||||
this.$router.replace("/login");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
//点击重置判断是否长时间五操作
|
||||
operateClick(){
|
||||
if(this.timer){
|
||||
clearTimeout(this.timer)
|
||||
operateClick() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
let _this = this
|
||||
let timeNum = 1000 * 60 *120
|
||||
this.timer = setTimeout(()=>{
|
||||
this.modalWarning = Modal.warning ({
|
||||
title: () => `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
|
||||
let _this = this;
|
||||
let timeNum = 1000 * 60 * 120;
|
||||
this.timer = setTimeout(() => {
|
||||
this.modalWarning = Modal.warning({
|
||||
title: () =>
|
||||
`You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Ok',
|
||||
okText: "Ok",
|
||||
onOk() {
|
||||
_this.numTime = 30
|
||||
clearInterval(_this.timerSec)
|
||||
}
|
||||
_this.numTime = 30;
|
||||
clearInterval(_this.timerSec);
|
||||
},
|
||||
});
|
||||
_this.numCounter()
|
||||
},timeNum)
|
||||
_this.numCounter();
|
||||
}, timeNum);
|
||||
},
|
||||
|
||||
numCounter(){
|
||||
this.timerSec = setInterval(()=>{
|
||||
if(this.numTime > 0){
|
||||
this.numTime = this.numTime - 1
|
||||
}else{
|
||||
clearTimeout(this.timer)
|
||||
clearInterval(this.timerSec)
|
||||
this.logout()
|
||||
this.modalWarning.destroy()
|
||||
numCounter() {
|
||||
this.timerSec = setInterval(() => {
|
||||
if (this.numTime > 0) {
|
||||
this.numTime = this.numTime - 1;
|
||||
} else {
|
||||
clearTimeout(this.timer);
|
||||
clearInterval(this.timerSec);
|
||||
this.logout();
|
||||
this.modalWarning.destroy();
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header_component{
|
||||
.header_component {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 0.1rem solid rgba(3,3,3,0.1);
|
||||
border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
|
||||
position: relative;
|
||||
|
||||
.header_logo{
|
||||
align-items: center;
|
||||
.header_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header_logo {
|
||||
width: 14.4rem;
|
||||
height: 3.2rem;
|
||||
margin: 2.1rem 0 0 2.8rem;
|
||||
margin: 2.1rem 2.8rem 0 ;
|
||||
// position: absolute;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header_nav_content{
|
||||
.header_nav_content {
|
||||
display: flex;
|
||||
margin-left: 28.9rem;
|
||||
// margin-left: 28.9rem;
|
||||
// margin-left: 46.2rem;
|
||||
align-items: center;
|
||||
|
||||
.nav_item{
|
||||
.nav_item {
|
||||
padding: 1.1rem 1rem;
|
||||
border-bottom: 0.1rem solid transparent;
|
||||
margin-right: 3.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3rem;
|
||||
color: #333333;
|
||||
// color: #333333;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-weight: 900;
|
||||
|
||||
&.select_nav{
|
||||
background: #E6E6F6;
|
||||
&.select_nav {
|
||||
background: #e6e6f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_right_content{
|
||||
position: absolute;
|
||||
.header_right_content {
|
||||
// position: absolute;
|
||||
top: 0;
|
||||
right: 3.2rem;
|
||||
// right: 3.2rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
.header_icon{
|
||||
width: 33%;
|
||||
.header_icon {
|
||||
font-size: 3.6rem;
|
||||
position: relative;
|
||||
top: 0.3rem;
|
||||
}
|
||||
|
||||
.header_user_content{
|
||||
.header_user_content {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -322,53 +404,53 @@ export default defineComponent({
|
||||
top: 1.2rem;
|
||||
height: 3.7rem;
|
||||
|
||||
.username{
|
||||
.username {
|
||||
font-size: 1.6rem;
|
||||
color: #1A1A1A;
|
||||
color: #1a1a1a;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.icon-xiala{
|
||||
.icon-xiala {
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
.icon_rotate {
|
||||
-moz-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.select_block{
|
||||
.select_block {
|
||||
position: absolute;
|
||||
right: -1.5rem;
|
||||
top: 3.7rem;
|
||||
width: 11.4rem;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0,0,0,0.1);
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
|
||||
z-index: 9;
|
||||
overflow: hidden;
|
||||
border: 1px solid #000000;
|
||||
|
||||
.select_item{
|
||||
.select_item {
|
||||
padding-left: 1.5rem;
|
||||
height: 4.1rem;
|
||||
color: #4D4D4D;
|
||||
color: #4d4d4d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select:none;
|
||||
user-select: none;
|
||||
|
||||
&:hover{
|
||||
background: #F7F7F7;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.select_item_des{
|
||||
.select_item_des {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
@@ -376,32 +458,32 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.modal_component{
|
||||
|
||||
.skip_content{
|
||||
.modal_component {
|
||||
.skip_content {
|
||||
width: 6rem;
|
||||
height: 3rem;
|
||||
line-height: 2.8rem;
|
||||
border: 0.1rem solid #343579;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
color: #343579;
|
||||
position: absolute;
|
||||
top: 1.8rem;
|
||||
right: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bind_email_content{
|
||||
|
||||
.bind_email_content {
|
||||
padding: 4.8rem 9.2rem 6rem;
|
||||
|
||||
.bind_email_tip{
|
||||
.bind_email_tip {
|
||||
font-size: 1.8rem;
|
||||
color: #A5B0C2;
|
||||
color: #a5b0c2;
|
||||
line-height: 1.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
.bind_email{
|
||||
.bind_email {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
@@ -409,51 +491,50 @@ export default defineComponent({
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bind_email_form_content{
|
||||
|
||||
.bind_email_form_title{
|
||||
.bind_email_form_content {
|
||||
.bind_email_form_title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.bind_email_form_input{
|
||||
.bind_email_form_input {
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #B4BED7;
|
||||
border: 0.1rem solid #b4bed7;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 4.6rem;
|
||||
font-size: 1.8rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color:#A5B0C2,
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bind_email_submit_button{
|
||||
.bind_email_submit_button {
|
||||
height: 4.6rem;
|
||||
line-height: 4.6rem;
|
||||
background: #343579;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
width: 12.8rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 3rem auto 0;
|
||||
}
|
||||
|
||||
.icon--shangyibu{
|
||||
.icon--shangyibu {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.email_last_step_content{
|
||||
.email_last_step_content {
|
||||
margin-left: 1rem;
|
||||
font-size: 2.2rem;
|
||||
font-family: PingFang SC;
|
||||
@@ -461,24 +542,24 @@ export default defineComponent({
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.tip_content{
|
||||
.tip_content {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.email_last_step_des{
|
||||
.email_last_step_des {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.sent_email_content{
|
||||
.sent_email_content {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #A5B0C2;
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>Generate</span>
|
||||
</div>
|
||||
<div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div>
|
||||
</div>
|
||||
|
||||
363
src/component/HomePage/RobotAssist.vue
Normal file
363
src/component/HomePage/RobotAssist.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="robot" @click="robotmax">
|
||||
<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
|
||||
<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in dialogue" ref="robotChildDom">
|
||||
<div class="robot_text">{{item.str}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="robot_bottom">
|
||||
<div class="robot_input" v-fade="robotInput,'flex'">
|
||||
<input
|
||||
placeholder="write a message~"
|
||||
v-model="chatCentent"
|
||||
@keydown.enter="roborSend()"
|
||||
@input="robotmax"
|
||||
/>
|
||||
<div class="robot_btn">
|
||||
<i class="fi fi-ss-paper-plane-top" @click="roborSend"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="robot_img">
|
||||
<img src="@/assets/images/homePage/robot.png" @click="robotBtn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, createVNode, ref,Ref} from "vue";
|
||||
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import axios from 'axios'
|
||||
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
UserOutlined,
|
||||
},
|
||||
setup() {
|
||||
const robotDom = ref<HTMLElement | null>(null);
|
||||
const robotChildDom = ref<HTMLElement | null>(null);
|
||||
let chatCentent = ref<string>('');
|
||||
const robotTop = ref(false)
|
||||
const robotInput = ref(false)
|
||||
let timeTop:any = 0;
|
||||
let timeInput:any = 0;
|
||||
let dialogue:any = ref([
|
||||
{
|
||||
state:1,
|
||||
str:"2222222 22222222 222"
|
||||
},
|
||||
{
|
||||
state:2,
|
||||
str:"2222 22222 22 2222 22"
|
||||
},
|
||||
{
|
||||
state:1,
|
||||
str:"222 22222 222 2222 222"
|
||||
},
|
||||
])
|
||||
const userInfo:any = {}
|
||||
|
||||
return {
|
||||
robotTop,
|
||||
robotInput,
|
||||
chatCentent,
|
||||
dialogue,
|
||||
robotDom,
|
||||
robotChildDom,
|
||||
timeTop,
|
||||
timeInput,
|
||||
userInfo,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.textScroll()
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
console.log(22);
|
||||
|
||||
const data = {
|
||||
"user_id": "83",
|
||||
"session_id": "",
|
||||
"message": "Hello, can you tell me what holiday is on July 1st",
|
||||
};
|
||||
|
||||
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
},
|
||||
directives:{
|
||||
fade:{
|
||||
updated (el,oldVal){
|
||||
if(oldVal.value){
|
||||
el.style.display = oldVal.arg
|
||||
setTimeout(() => {
|
||||
el.classList.add("active")
|
||||
}, 100);
|
||||
}else{
|
||||
el.classList.remove("active")
|
||||
setTimeout(() => {
|
||||
el.style.display="none"
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
robotBtn(){
|
||||
if(!this.robotTop||!this.robotInput){
|
||||
this.robotTop = true
|
||||
this.robotInput = true
|
||||
|
||||
}else{
|
||||
this.robotTop = false
|
||||
this.robotInput = false
|
||||
}
|
||||
this.textScroll()//聊天定位到最低部
|
||||
this.createTimer()
|
||||
},
|
||||
textScroll(){
|
||||
|
||||
|
||||
this.$nextTick(()=>{
|
||||
if(this.robotDom && this.robotChildDom){
|
||||
// const items = this.robotChildDom._rawValue
|
||||
let num = 0
|
||||
for (let index = 0; index < (this.$refs.robotChildDom as any).length; index++) {
|
||||
const height = (this.$refs.robotChildDom as any)[index].clientHeight;
|
||||
num = num+40+height
|
||||
}
|
||||
this.robotDom.scrollTop = num
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
robotmax(){//点击内容就设置为true显示 重置定时器
|
||||
this.createTimer()
|
||||
},
|
||||
roborSend (){
|
||||
this.createTimer()
|
||||
if(!this.chatCentent){
|
||||
message.error("Please enter content");
|
||||
return
|
||||
}
|
||||
this.dialogue.push({
|
||||
state:2,
|
||||
str:this.chatCentent
|
||||
})
|
||||
let a = true
|
||||
let data = {
|
||||
"user_id" : this.userInfo.userId,
|
||||
// "message" : this.chatCentent,
|
||||
"message" : "Hello, can you tell me what holiday is on July 1st",
|
||||
|
||||
"session_id":""
|
||||
}
|
||||
console.log(getCookie('token'));
|
||||
|
||||
let interaction = {onDownloadProgress: (progressEvent:any) => {
|
||||
this.clearTimer()
|
||||
console.log(progressEvent);
|
||||
|
||||
if(a){
|
||||
this.dialogue.push({
|
||||
state:1,
|
||||
// str:progressEvent.event.currentTarget.response
|
||||
})
|
||||
a = false
|
||||
}else{
|
||||
this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
|
||||
}
|
||||
},
|
||||
}
|
||||
// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
|
||||
// (rv: any) => {
|
||||
// a = true
|
||||
// this.createTimer()
|
||||
// }
|
||||
// ).catch(res=>{
|
||||
// this.createTimer()
|
||||
// });
|
||||
|
||||
// new Promise((resolve, reject) => {
|
||||
|
||||
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
|
||||
// axios.post("/api/python/chatStream", data,{
|
||||
// onDownloadProgress: (progressEvent:any) => {
|
||||
// // this.clearTimer()
|
||||
// console.log(progressEvent);
|
||||
|
||||
// // if(a){
|
||||
// // this.dialogue.push({
|
||||
// // state:1,
|
||||
// // // str:progressEvent.event.currentTarget.response
|
||||
// // })
|
||||
// // a = false
|
||||
// // }else{
|
||||
// // this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
|
||||
// // }
|
||||
// },
|
||||
// }).then(response => {
|
||||
// // resolve(response)
|
||||
// console.log(response);
|
||||
|
||||
// }).catch((error) => {
|
||||
// console.log(error);
|
||||
|
||||
// })
|
||||
|
||||
// });
|
||||
|
||||
this.chatCentent = ""
|
||||
this.textScroll()
|
||||
|
||||
},
|
||||
//创建定时器
|
||||
createTimer() {
|
||||
if (this.robotTop || this.robotInput) {
|
||||
this.clearTimer()
|
||||
this.timeTop = setInterval(() => {
|
||||
this.robotTop = false
|
||||
}, 10000);
|
||||
this.timeInput = setInterval(() => {
|
||||
this.robotInput = false
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer() {
|
||||
|
||||
clearInterval(this.timeTop);
|
||||
clearInterval(this.timeInput);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.robot{
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 50px;
|
||||
z-index: 9999;
|
||||
// width: 400px;
|
||||
.robot_top{
|
||||
// width: 70%;
|
||||
width: 250px;
|
||||
margin-left: auto;
|
||||
height: 140px;
|
||||
overflow-x: hidden;
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
}
|
||||
&.robot_top::-webkit-scrollbar{display: none;}
|
||||
.robot_text{
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
max-width: 80%;
|
||||
}
|
||||
.text_left,.text_right{
|
||||
margin: 20px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.text_left{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
>div{
|
||||
background-color: #e8e8ea;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.text_right{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
>div{
|
||||
background-color: #835ff7;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.robot_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.robot_input{
|
||||
border: 1px solid #d5d5d7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
// height: 32px;
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
margin-right: 40px;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
}
|
||||
.robot_btn{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fi-ss-paper-plane-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.fi-ss-paper-plane-top::before{
|
||||
color: #835df8;
|
||||
}
|
||||
}
|
||||
.robot_img{
|
||||
margin-left: auto;
|
||||
img{
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
// margin-left: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,10 +8,10 @@
|
||||
:centered="true"
|
||||
>
|
||||
<template #title>
|
||||
<div v-show="collectionStep === 1">Moodboard Upload</div>
|
||||
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard Upload</div>
|
||||
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard Upload</div>
|
||||
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard Upload</div>
|
||||
<div v-show="collectionStep === 1">Moodboard</div>
|
||||
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div>
|
||||
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div>
|
||||
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div>
|
||||
<div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
|
||||
</template>
|
||||
<template #closeIcon>
|
||||
|
||||
Reference in New Issue
Block a user