aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/component/Account/account.vue
View File

@@ -4,11 +4,29 @@
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div> -->
<div class="account_page_content_box">
<div class="content_item_user">
<div class="content_item_user_left">
<div class="content_item_user_left_detail">
<img :src="userInfo?.avatar" alt="">
</div>
<div class="content_item_user_left_detail">
<div class="modal_title_text">
<div>{{ cookieUserInfo.userName }}</div>
<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
</div>
<div class="content_item_user_left_detail_bottom">
<div>
<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
</div>
<div>
<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
</div>
</div>
</div>
</div>
</div>
<div class="account_page_content">
<div class="account_page_content_left">
<div class="content_left_item">
<!-- <div>{{$t('account.personCentered')}}</div> -->
</div>
<!-- {{ router.path }} -->
<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
<i class="fi" :class="item.icon"></i>
@@ -45,15 +63,19 @@ export default defineComponent({
const {t} = useI18n()
const store = useStore();
let userInfo:any= computed(()=>{
return store.state.UserHabit.userInfo
})
let cookieUserInfo = ref(null)
if(getCookie('userInfo')){
let userInfo:any = getCookie('userInfo')
cookieUserInfo.value = JSON.parse(userInfo)
}
let accountHomeData = reactive({
rootSubmenuKeys:[
{
name:t('account.Home'),
route:'/home/account/accountHome',
icon:'fi-rr-house-chimney'
},{
name:t('account.myInformation'),
route:'/home/account/accountEdit',
name:t('account.frontPage'),
route:'/home/account/frontPage',
icon:'fi-rr-user'
},{
name:t('account.Messages'),
@@ -74,6 +96,8 @@ export default defineComponent({
router.push({path:event.item.route})
}
return{
userInfo,
cookieUserInfo,
...toRefs(accountHomeData),
router,
handleClick,
@@ -89,8 +113,11 @@ export default defineComponent({
<style lang="less" scoped>
.account_page{
height: 100%;
overflow-y: auto;
padding: 0 9rem;
// overflow-y: auto;
padding: 0 30rem;
padding-top: 10rem;
display: flex;
overflow: hidden;
.account_page_titleImg{
img{
width: 100%;
@@ -99,43 +126,96 @@ export default defineComponent({
}
}
.account_page_content_box{
padding: 5rem 0;
.account_page_content{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.content_item_user{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7rem;
.content_item_user_left{
display: flex;
.content_item_user_left_detail{
> .modal_title_text{
margin: 0;
> div{
margin-bottom: 1rem;
}
}
img{
border-radius: 50%;
width: 10rem;
height: 10rem
}
.content_item_user_left_detail_bottom{
display: flex;
font-size: 1.8rem;
>div{
font-weight: 900;
width: 10rem;
span{
font-weight: 600;
color: rgba(0,0,0,.45);
}
}
}
}
.content_item_user_left_detail:last-child{
margin-left: 3rem;
}
}
}
.account_page_content{
display: flex;
flex: 1;
overflow: hidden;
.account_page_content_left{
width: 20%;
width: 24rem;
text-align: center;
background: #fafafa;
border-right: 1px solid #e9eaec;
margin-right: 10rem;
}
.account_page_content_right{
width: 80%;
flex: 1;
overflow: hidden;
.account_message{
height: 100%;
:deep(.account_message_body){
height: 100%;
.ant-tabs-content-holder{
flex: 1;
}
.ant-tabs-content{
height: 100%;
overflow-y: auto;
}
}
}
}
.content_left_item{
display: flex;
align-items: center;
justify-content: center;
height: 10rem;
height: 6rem;
color: #232323;
div{
white-space: nowrap;
width: 15rem;
color: #232323;
text-align-last: justify;
font-size: 3rem;
color: #999999;
// text-align-last: justify;
text-align: left;
font-size: 2rem;
}
i{
color: #cfcfcf;
font-size: 2.5rem;
font-size: 2rem;
display: flex;
margin-right: 2rem;
margin: 0 2rem;
}
&.active{
color: #fff;
background: #39215b;
background: #000;
div{
color: #fff;
font-weight: 900;
@@ -155,10 +235,6 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
position: sticky;
top: 0;
@@ -188,12 +264,9 @@ export default defineComponent({
}
}
.account_generalMessage_center{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
// box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
// border: 1px solid #e9eaec;
border-radius: 5px;
padding: 2rem 0;
margin-right: 5rem;
margin-left: 5rem;
.account_generalMessage_item{
margin-right: 0;
margin-left: 0;
@@ -208,8 +281,6 @@ export default defineComponent({
}
}
.account_generalMessage_item{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
padding: 5rem 5rem;
margin-right: 5rem;

24
src/component/Account/accountFollowFans.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="account_followFans">
<div class="account_followFans_title modal_title_text">
<!-- <div class="account_followFans_title modal_title_text">
<div class="">
{{$t('account.Interact')}}
</div>
<!-- <div class="account_followFans_title_setting">设置</div> -->
</div>
<div class="account_followFans_title_setting">设置</div>
</div> -->
<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in messageList" :key="item.key">
<follow v-if="item.key == 'follow'" :ref="item.key"></follow>
@@ -141,32 +141,24 @@ export default defineComponent({
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
&::before{
display: none;
}
.ant-tabs-nav-wrap{
.ant-tabs-tab-btn{
color: #000;
font-size: 2.4rem;
}
.ant-tabs-tab-btn:active{
color: #39215b;
}
.ant-tabs-tab-active{
.ant-tabs-tab-btn{
color: #39215b;
font-weight: 900;
}
}
}
.ant-tabs-tab:hover{
color: #39215b;
}
.ant-tabs-ink-bar{
background: #39215b;
background: #000;
}
}
:deep(.ant-tabs-content){
height: 80rem;
// min-height: 80rem;
overflow-y: auto;
}
}
}
</style>

222
src/component/Account/accountHome.vue
View File

@@ -1,222 +0,0 @@
<template>
<div class="account_home">
<div class="account_home_content">
<div class="content_item content_item_user">
<div class="content_item_user_left">
<div class="content_item_user_left_detail">
<img :src="userInfo?.avatar" alt="">
</div>
<div class="content_item_user_left_detail">
<div class="modal_title_text">
<div>{{ cookieUserInfo.userName }}</div>
<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
</div>
<div class="content_item_user_left_detail_bottom">
<div>
<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
</div>
<div>
<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
</div>
</div>
</div>
</div>
<div class="content_item_user_right">
<div @click="setUserData">{{$t('account.editUser')}}</div>
</div>
</div>
<div class="content_item content_item_task">
<!-- <div class="content_item_title">
<i>icon</i>
<div>每日奖励</div>
</div>
<div class="content_item_task_max">
<div class="content_item_task_item">
<div class="content_item_task_item_state">
<div class="state_credits">20 Credits</div>
<i class="fi fi-br-check"></i>
</div>
<div class="content_item_task_item_title">
每日点赞
</div>
<div class="content_item_task_item_award">
已完成 0 / 10
</div>
</div>
<div class="content_item_task_item active">
<div class="content_item_task_item_state">
<div class="state_credits">20 Credits</div>
<i class="fi fi-br-check"></i>
</div>
<div class="content_item_task_item_title">
每日发布作品
</div>
<div class="content_item_task_item_award">
20 Credits 到手
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let userInfo:any= computed(()=>{
return store.state.UserHabit.userInfo
})
let cookieUserInfo = ref(null)
if(getCookie('userInfo')){
let userInfo:any = getCookie('userInfo')
cookieUserInfo.value = JSON.parse(userInfo)
}
let accountHomeData = reactive({
})
// provide('exhibitionList',exhibitionList)
let setUserData = ()=>{
router.push({path:'/home/account/accountEdit'})
}
return{
userInfo,
cookieUserInfo,
...toRefs(accountHomeData),
setUserData,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_home{
width: 100%;
.account_home_content{
.content_item{
padding: 8rem 5rem;
border-bottom: 1px solid #e9eaec;
.content_item_title{
display: flex;
align-items: center;
i{
margin-right: 1rem;
}
}
}
.content_item:last-child{
border-bottom: none;
}
.content_item_user{
display: flex;
justify-content: space-between;
align-items: center;
.content_item_user_left{
display: flex;
.content_item_user_left_detail{
img{
border-radius: 50%;
width: 10rem;
height: 10rem
}
.content_item_user_left_detail_bottom{
display: flex;
font-size: 1.8rem;
>div{
font-weight: 900;
width: 10rem;
span{
font-weight: 600;
color: rgba(0,0,0,.45);
}
}
}
}
.content_item_user_left_detail:last-child{
margin-left: 4rem;
}
}
.content_item_user_right{
border: 1px solid #e9eaec;
color: #6f767f;
font-size: 1.8rem;
cursor: pointer;
display: flex;
padding: 0 1rem;
border-radius: 4px;
}
}
.content_item_task{
.content_item_task_max{
display: flex;
margin-top: 4rem;
}
.content_item_task_item{
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
.content_item_task_item_state{
width: 10rem;
height: 10rem;
background: linear-gradient(135deg, #cdacfc 50%, #a46ef0 50%) 00px 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.state_credits{
font-size: 1.6rem;
font-weight: 900;
color: #fff;
}
i{
font-size: 3rem;
font-weight: 900;
display: none;
color: #fff;
}
}
.content_item_task_item_title{
margin: 2rem 0 ;
}
.content_item_task_item_award{
font-size: 1.8rem;
background: #fff;
border-radius: 4px;
padding: 0 1rem;
color: #99a2aa;
}
&.active{
.content_item_task_item_state{
background: linear-gradient(135deg, #4ddda8 50%, #3bcd98 50%) 00px 0;
.state_credits{
display: none;
}
i{
display: flex;
}
}
.content_item_task_item_award{
background: #8a95a8;
color: #fff;
}
}
}
}
}
}
</style>

34
src/component/Account/accountMessage.vue
View File

@@ -1,11 +1,5 @@
<template>
<div class="account_message">
<div class="account_message_title modal_title_text">
<div class="">
{{$t('account.Messages')}}
</div>
<!-- <div class="account_message_title_setting">设置</div> -->
</div>
<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in messageList" :key="item.key">
<system v-if="item.key == 'system'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></system>
@@ -181,16 +175,6 @@ export default defineComponent({
<style lang="less" scoped>
.account_message{
width: 100%;
.account_message_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
.account_message_title_setting{
cursor: pointer;
}
}
.account_message_body{
padding-bottom: 3rem;
:deep(.ant-badge){
@@ -198,32 +182,24 @@ export default defineComponent({
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
&::before{
display: none;
}
.ant-tabs-nav-wrap{
.ant-tabs-tab-btn{
font-size: 2.4rem;
}
.ant-tabs-tab-btn:active{
color: #39215b;
}
.ant-tabs-tab-active{
.ant-tabs-tab-btn{
color: #39215b;
font-weight: 900;
}
}
}
.ant-tabs-tab:hover{
color: #39215b;
}
.ant-tabs-ink-bar{
background: #39215b;
background: #000;
}
}
:deep(.ant-tabs-content){
height: 80rem;
// min-height: 80rem;
overflow-y: auto;
}
}
}
</style>

6
src/component/Account/followFans/fans.vue
View File

@@ -2,10 +2,8 @@
<div class="account_fans">
<div class="account_generalMessage_title modal_title_text">
<span class="account_generalMessage_title_seach">
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
<div class="search_icon_block" @click="searchFollowFansList">
<i class="icon iconfont icon-sousuo"></i>
</div>
<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
</span>
</div>
<div class="account_generalMessage_center modal_title_text">

6
src/component/Account/followFans/follow.vue
View File

@@ -1,11 +1,15 @@
<template>
<div class="account_follow">
<div class="account_generalMessage_title modal_title_text">
<span class="account_generalMessage_title_seach">
<!-- <span class="account_generalMessage_title_seach">
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
<div class="search_icon_block" @click="searchFollowFansList">
<i class="icon iconfont icon-sousuo"></i>
</div>
</span> -->
<span class="account_generalMessage_title_seach">
<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
</span>
</div>
<div class="account_generalMessage_center modal_title_text">

166
src/component/Account/frontPage.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="account_frontPage">
<a-tabs class="account_frontPage_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in frontPageList" :key="item.key">
<myInformation v-if="item.key == 'myInformation'" :ref="item.key"></myInformation>
<bind v-if="item.key == 'bind'" :ref="item.key"></bind>
<cancelRenewal v-if="item.key == 'cancelRenewal'" :ref="item.key"></cancelRenewal>
<template #tab>
<a-badge :count="0" >
<span>{{item.title}}</span>
</a-badge>
</template>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import myInformation from '@/component/Account/frontPage/mylnformation.vue';
import bind from '@/component/Account/frontPage/bindPage.vue';
import cancelRenewal from '@/component/Account/frontPage/cancelRenewal.vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
myInformation,
bind,
cancelRenewal,
},
setup() {
const {t} = useI18n()
const router = useRouter()
const store = useStore();
let accountfrontPage = reactive({
frontPageList:[
{
title:t('account.myInfor'),
key:'myInformation',
},{
title:t('account.bindWeChat'),
key:'bind',
},{
title:t('account.cancel'),
key:'cancelRenewal',
}
],
activeKey: '',
})
let domRefs:any = reactive({
myInformation:ref(null),
bind:ref(null),
cancelRenewal:ref(null),
})
let changeTabs = (key:any)=>{
console.log(key);
// if(accountfrontPage.activeKey == 'service')return
}
let setReadStatus = (value:any)=>{
return new Promise((resolve,reject)=>{
if(value.isRead == 1)return reject('')
let data = {
type:accountfrontPage.activeKey,
notificationIdList:value.id
}
Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
if(rv){
resolve(rv)
// store.commit('setfrontPageSystem',rv)
}
}).catch((err)=>{
reject(err)
})
})
}
let setAllfrontPage = ()=>{
return new Promise((resolve,reject)=>{
let data = {
type:accountfrontPage.activeKey
}
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
resolve(rv)
}).catch((err)=>{
reject(err
)
})
})
}
let getHistory = (data:any)=>{
return new Promise((resolve,reject)=>{
data.type = accountfrontPage.activeKey
let url = Https.httpUrls.getHistoryNotification
// if(data.type == 'follow'){
// url = Https.httpUrls.porfolioGetFollowerList
// }
Https.axiosPost(url,data).then((rv)=>{
if(rv){
// domRefs[data.type][0].setfrontPageList(rv,data)
resolve(rv)
}
}).catch((err)=>{
reject(err)
})
})
}
onMounted(()=>{
let key = accountfrontPage.frontPageList[0].key
accountfrontPage.activeKey = key
})
return{
...toRefs(accountfrontPage),
...toRefs(domRefs),
setReadStatus,
changeTabs,
setAllfrontPage,
getHistory,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_frontPage{
width: 100%;
.account_frontPage_body{
padding-bottom: 3rem;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-tabpane){
padding: 0 5rem;
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
&::before{
display: none;
}
.ant-tabs-nav-wrap{
.ant-tabs-tab-btn{
font-size: 2.4rem;
}
.ant-tabs-tab-active{
.ant-tabs-tab-btn{
font-weight: 900;
}
}
}
.ant-tabs-ink-bar{
background: #000;
}
}
}
}
</style>

92
src/component/Account/frontPage/bindPage.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div class="bindPage_page">
<div class="bindPage_page_body">
<div class="bind_item">
<div class="title">Bind Wechat</div>
<div class="box">
<div class="type">
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
<div class="text">Unbound</div>
</div>
<div class="gallery_btn">Bind Now</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const store = useStore();
let userInfo:any= computed(()=>{
return store.state.UserHabit.userInfo
})
let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
let accountHomeData:any = reactive({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
uploadUrl:userInfo.value?.avatar,
uploadFile:undefined,
token:'',
fileList:[]
})
return{
...toRefs(accountHomeData),
userInfo,
cookieUserInfo,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.bindPage_page{
.bindPage_page_body{
.bind_item{
margin-bottom: 4rem;
>.title{
font-size: 2rem;
margin-bottom: 2rem;
font-weight: 600;
}
>.box{
width: 100%;
border: 2px solid #000;
border-radius: 2rem;
padding: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
>.type{
display: flex;
>img{
margin-right: 3rem;
width: 5rem;
height: 5rem;
}
>.text{
display: flex;
align-items: center;
}
}
}
}
.bind_item:last-child{
margin-bottom: 0;
}
}
}
</style>

181
src/component/Account/frontPage/cancelRenewal.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div class="cancelRenewal_page">
<div class="cancel_box_item">
<div class="modal_title_text">
<div>Sorry to see you go</div>
<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
</div>
<a-select class="gallerySelect" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Select a reason" allowClear show-search></a-select>
<textarea v-model="searchPictureName" placeholder="Share your feedback here..."></textarea>
<div class="button_box">
<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
<div class="gallery_btn gallery_btn_radius">Yes, cancel it</div>
</div>
</div>
<div class="cancel_box_item cancel_box_item2">
<div class="modal_title_text">
<div>You’re about to cancel your subscription</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">What is your reason for cancelling AiDA?</div>
</div>
</div>
<div class="tips">
<i class="fi fi-sr-triangle-warning"></i>
<div>Don’t worry!The data you have in Notion will be
safe.</div>
</div>
<div class="button_box">
<div class="gallery_btn white gallery_btn_radius" @click="subscribe">Styt subscribed</div>
<div class="gallery_btn gallery_btn_radius">Yes, cancel it</div>
</div>
</div>
<renew ref="renew"></renew>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import renew from "@/component/HomePage/renew.vue";
export default defineComponent({
components:{
renew,
},
setup() {
const store = useStore();
let userInfo:any= computed(()=>{
return store.state.UserHabit.userInfo
})
let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
let accountHomeData:any = reactive({
currentState:{value:'income'}, //裁剪的原始文件数据
})
let state:any = ref([
{
label:useI18n().t('allOrder.Income'),
value:'income',
},
{
label:useI18n().t('allOrder.Expend'),
value:'expend',
},
])
let renew = ref()
const subscribe = ()=>{
renew.value.init()
}
return{
...toRefs(accountHomeData),
userInfo,
cookieUserInfo,
state,
renew,
subscribe,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.cancelRenewal_page{
display: flex;
justify-content: center;
align-items: flex-start;
.cancel_box_item{
border: 2px solid #000;
border-radius: 2rem;
padding: 3rem;
margin-right: 3rem;
width: 48rem;
height: 45rem;
>.modal_title_text{
>div{
font-weight: 600;
}
.modal_title_text_assistant{
margin-top: 1rem;
}
}
>.gallerySelect{
width: 100%;
:deep(.ant-select-selector){
border-radius: 1.4rem;
}
}
>textarea{
margin-top: 1.5rem;
width: 100%;
border-radius: 1.4rem;
border: 1px solid #D0D0D0;
height: 11rem !important;
font-size: 1.6rem;
transition: border .3s;
padding: 1.5rem;
}
>textarea:hover{
border: 1px solid #000;
}
>.button_box{
display: flex;
justify-content: space-between;
margin-top: 2.5rem;
>div{
width: calc((100% - 1rem) / 2);
}
}
}
.cancel_box_item:last-child{
margin: 0;
}
.cancel_box_item2{
.modal_title_text{
>div:nth-child(1){
margin-bottom: 3.4rem;
}
>div:nth-child(2){
margin-bottom: 1.5rem;
}
>div:nth-child(2),>div:nth-child(3){
display: flex;
align-items: center;
>.modal_title_text_assistant{
margin: 0;
}
>i{
margin-right: 1.5rem;
display: flex;
}
}
}
.tips{
padding: 1.5rem 1rem;
display: flex;
align-items: center;
margin-bottom: 3rem;
background: #f3f3f6;
border-radius: 1.4rem;
border: 1px solid #D0D0D0;
>i{
margin-right: 1.3rem;
}
>div{
font-size: 1.6rem;
font-weight: 400;
}
}
}
}
</style>

33
src/component/Account/accountEdit.vue → src/component/Account/frontPage/mylnformation.vue
View File

@@ -37,7 +37,7 @@
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="started_btn" @click="setSubmit">
<div class="gallery_btn" @click="setSubmit">
{{$t('account.Submit')}}
</div>
</div>
@@ -164,18 +164,14 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.accountEdit_page{
padding: 8rem 5rem;
.accountEdit_page_head{
display: flex;
align-items: center;
justify-content: center;
width: 20rem;
margin: 0 auto;
position: relative;
img{
width: 15rem;
width: 10rem;
object-fit: contain;
height: 15rem;
height: 10rem;
border-radius: 50%;
background: #fff;
}
@@ -191,26 +187,31 @@ export default defineComponent({
margin-bottom: 5rem;
}
.accountEdit_page_body{
width: 85rem;
.accountEdit_page_body_item{
display: flex;
margin-bottom: 5rem;
flex-direction: column;
width: 100%;
.started_btn{
text-align: center;
.gallery_btn{
margin-left: auto;
}
input,textarea{
padding-left: 2rem;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding-left: 2.7rem;
border-radius: 1.6rem;
border: 2px solid #D0D0D0;
width: 100%;
}
input{
height: 7rem;
}
.accountEdit_page_body_item_name{
color: #606266;
width: 14rem;
text-align: right;
color: #000;
text-align: left;
font-size: 2rem;
}
.accountEdit_page_body_item_inut{
margin-left: 2rem;
margin-top: 1.5rem;
flex: 1;
}
}

2
src/component/Account/otherUsers.vue
View File

@@ -114,7 +114,7 @@ export default defineComponent({
.otherUsers{
width: 100%;
height: 100%;
padding: 0 9rem;
padding: 0 6rem;
display: flex;
flex-direction: column;
overflow-y: auto;

19
src/component/Administrator/allUserPoerations.vue
View File

@@ -1,19 +1,25 @@
<template>
<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
<a-modal
class="allUserPoeration_modal generalModel"
v-model:visible="operationsModal"
:footer="null"
:get-container="() => $refs.allUserPoerationModal"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
:mask="true"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="modal_title_text">
@@ -114,18 +120,11 @@
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime } from "@/tool/util";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
allOrder,
},
emits: ['searchHistoryList'],
setup(props,{emit}) {
@@ -277,7 +276,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.allUserPoeration_modal{
.ant-modal-body{
height: auto;

19
src/component/Administrator/questionnaire.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="admin_page">
<div class="admin_page" ref="adminPage">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
@@ -34,18 +34,25 @@
</a-table>
</div>
<a-modal
class="generalModelOperate"
class="generalModel"
v-model:visible="isFeedbackShow"
:footer="null"
:get-container="() => $refs.adminPage"
width="55%"
:maskClosable="false"
:centered="true"
:keyboard="false"
:closable="false"
:mask="false"
:mask="true"
>
<div class="generalModelOperate_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="closeModal()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<feedbackSurveyVue ref="feedbackSurveyVue"></feedbackSurveyVue>
</a-modal>
@@ -184,7 +191,7 @@ export default defineComponent({
methods: {},
});
</script>
<style lang="less">
<style lang="less" scoped>
.generalModelOperate{
// .ant-modal-body{
// height: calc(65rem*1.2);

2
src/component/Canvas/index.vue
View File

@@ -25,7 +25,7 @@ import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import tool from "./tool.vue"
import argument from "./argument.vue"
import detail from "./detail.vue"

19
src/component/Canvas/test.vue
View File

@@ -1,7 +1,9 @@
<template>
<a-modal class="modal_component collection_modal Guide_1_2"
<div ref="modalTest"></div>
<a-modal class="modal_test generalModel"
v-model:visible="testModal"
:footer="null"
:get-container="() => $refs.modalTest"
width="78%"
:maskClosable="false"
:centered="true"
@@ -9,12 +11,15 @@
wrapClassName="#app"
:keyboard="false"
>
<div class="collection_closeIcon closeIcon" >
<!-- <div class="header_right_block" @click.stop="">
<div class="header_cancel_button" >Cancel</div>
</div> -->
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<canvasIndex></canvasIndex>
</a-modal>
</template>

38
src/component/Detail/DesignDetail.vue
View File

@@ -1,10 +1,11 @@
<template>
<div>
<div ref="designDetailModal">
<!-- designDetailShow -->
<a-modal class="design_detail_modal_component Guide_1_18"
:class="[driver__.driver?'hideEvents':'']"
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<a-modal class="design_detail_modal_component Guide_1_18 generalModel"
v-model:visible="designDetailShow"
:footer="null"
:get-container="() => $refs.designDetailModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -15,8 +16,15 @@
<div>{{ $t('DesignDetail.Details') }}</div>
<div class="modal_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal('')">
<i class="fi fi-rr-cross-small"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="closeModal('')">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
@@ -153,7 +161,6 @@
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
</div>
</div>
@@ -171,7 +178,6 @@ import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
import Draggable from 'vuedraggable'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
@@ -188,7 +194,6 @@ export default defineComponent({
DesignDetailAlter,
setDesignItem,
magnifyingGlass,
setDesignItemMobile,
addDetails,
},
setup() {
@@ -463,7 +468,6 @@ export default defineComponent({
// this.designItemDetail = {}
this.frontBack = {}
let setDesignItem:any = this.$refs.setDesignItem
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
setDesignItem.clear()
}
@@ -1165,26 +1169,25 @@ export default defineComponent({
}
})
</script>
<style lang="less">
.design_detail_modal_component{
<style lang="less" scoped>
:deep(.design_detail_modal_component){
color: #000;
// max-width: 1440px ;
.mark_loading{
position: absolute;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
>.ant-modal-content{
// overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
>.ant-modal-body{
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
// overflow-y: hidden;
flex-direction: column;
}
}
@@ -1725,10 +1728,5 @@ export default defineComponent({
}
</style>
<style lang="less">
.design_detail_modal_component{
}
</style>

4
src/component/Detail/DesignDetailEnd.vue
View File

@@ -110,7 +110,6 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Sketch} from '@ans1998/vue3-color'
import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import DesignElementsOperation from './DesignElements.vue';
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
@@ -121,7 +120,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
Draggable,Sketch,DesignPrintOperation,
DesignElementsOperation,sketchCategory
},
setup(prop) {
@@ -262,7 +261,6 @@ export default defineComponent({
setPrint(){
// if(this.current?.printObject?.prints?.[0]?.path){
let DesignPrintOperation = this.$refs.DesignPrintOperation
// let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
DesignPrintOperation.init()
if(this.driver__.driver){
nextTick().then(()=>{

18
src/component/Detail/DesignElements.vue
View File

@@ -1,9 +1,10 @@
<template>
<div>
<div ref="designElementsModal">
<a-modal
class="designElements_modal"
class="designElements_modal generalModel"
v-model:visible="designElements"
:footer="null"
:get-container="() => $refs.designElementsModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -15,8 +16,15 @@
<div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="closeModal()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="designElements_open">
<!-- -->
@@ -678,7 +686,7 @@ export default defineComponent({
});
</script>
<style lang="less">
<style lang="less" scoped>
.designElements_modal {
// max-width: 1440px;
user-select: none; /* 对现代浏览器有效 */

925
src/component/Detail/DesignElementsMobile.vue
View File

@@ -1,925 +0,0 @@
<template>
<div>
<a-modal
class="designElementsMobile_modal"
v-model:visible="designElements"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:mask="true"
>
<div class="designElementsMobile_content">
<div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designElementsMobile_open">
<!-- -->
<div class="print_right">
<div class="print_right show_print_right ">
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
<div class="designElementsMobile_nav">
<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
<img :src="item.path" @click="setpitch(item,index)">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
</div>
</div>
</div>
<div class="designElementsMobile_centent" id="designElementsCentent">
<div class="designElementsMobile_imgMask">
<div class="designElementsMobile_print">
<div
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[index]?.style]"
@touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
</div>
</div>
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
<div class="designElementsMobile_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElementsMobile_delete" @click="deletePrint">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div></div>
</div>
</div>
</div>
<div class="designElementsMobile_right">
<div class="designElementsMobile_entirety_img">
<img :src="currentFullBodyView" alt="">
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
export default defineComponent({
setup(prop) {
let designElements = ref(false);
let designSelectElementsList = ref([])//新增的元素
let designElementsList = ref([])//已经存在的元素
let exhibitionElementsList = ref([])//展示的元素
let setOkData = ref([])
let current = inject('current')//父组件传过来的数据
let driver__ = inject('driver__')
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([]);
let currentPrintStyleList = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designElementsBtn:false
}
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
let currentFullBodyView = ref('')
let designItemDetailTS = ref({})
let body = ref(false)
let {t} = useI18n()
return {
designElements,
designSelectElementsList,
designElementsList,
exhibitionElementsList,
setOkData,
current,
driver__,
printZIndex,
printStyleList,
currentPrintStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
setRevocation,
t,
currentFullBodyView,
designItemDetailTS,
body,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
el.addEventListener('touchstart', (e) => {
let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
// 添加鼠标按下事件监听器
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
let touchmove = (e) => {
if (mouse) {
let X = eX
let Y = eY
let x = e.targetTouches[0].clientX - X
let y = Y - e.targetTouches[0].clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('touchmove', touchmove,{passive:true});
// 添加鼠标松开事件监听器
let touchend = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('touchend',touchend)
document.removeEventListener('touchmove',touchmove)
}
document.addEventListener('touchend', touchend);
});
}
},
},
methods: {
init(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
if(designItemDetail.others.length == 0){
this.body = true
}
this.designElements = true
this.clearModal()
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
skecth.remove()
}
if(this.exhibitionElementsList.length > 0){
this.exhibitionElementsList.forEach((item,index)=>{
this.setTemplate(item,index)
})
}else{
}
},
random(){
if(this.printStyleList.length == 0)return
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
setPrintWH(url){
let print = new Image
return new Promise((resolve, reject) => {
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
resolve()
print.remove()
}
print.src = url
})
},
async setpitch(item,index){
await this.setPrintWH(item.path)
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.currentPrintStyleList.url = item.url
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList.length-1
this.exhibitionElementsList.push({
angle:0,
designType:item.designType,
minIOPath:item.minIOPath,
path:item.path,
priority:1,
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designElementsBtn = false
})
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designElementsBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
document.addEventListener("touchend", this.touchend);
document.addEventListener("touchmove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designElementsBtn = true
this.printStyleList[this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ?rotateZ:0,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
}
document.addEventListener("touchend", this.sizeMouseup);
document.addEventListener("touchmove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let num1 = height/width
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = ( e.changedTouches[0].pageX -imgDomWH.left)
h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = ( e.changedTouches[0].pageY - imgDomWH.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
width = w+'px'
height = w*num1+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("touchend", this.sizeMouseup);
document.removeEventListener("touchmove", this.sizeMousemove);
},
touchend(e) {
document.removeEventListener("touchend", this.touchend);
document.removeEventListener("touchmove", this.moveMousemove);
},
deletePrint(){
this.exhibitionElementsList.splice(this.imgDomIndex,1)
this.printStyleList.splice(this.imgDomIndex,1)
},
//随机重置图片顺序
refetchTemplate(index) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let width
let scale
if(sketch.width<sketch.height){
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
scale = width / this.print.width.replace(/px/g,'')
}else{
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
scale = width / this.print.height.replace(/px/g,'')
}
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
this.printStyleList[index].style = {
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
height:this.print.height.replace(/px/g,'')*scale+'px',
zIndex:this.printZIndex++
}
this.printStyleList[index].transform = {
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
}
},
//设置图片
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designElementsList
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let sketchImg = new Image()
sketchImg.onload = ()=>{
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let scale
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
let zIndex = 1
let left = item.location[0]/sketchNum+'px'
let top = item.location[1]/sketchNum+'px'
if(sketch.offsetWidth < item.location[0]/sketchNum){
left = sketch.offsetWidth +'px'
}
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:left,
top:top,
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
zIndex:zIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:item.angle,
},
designElementsBtn:false
}
sketchImg.remove()
}
sketchImg.src = sketch.src
},
computeZindex(resolve,prints){
prints.sort((a, b) => {
var a_num = a.priority;
var b_num = b.priority;
return a_num - b_num;
});
let num = 1
prints.forEach((v)=>{
v.priority = num++
})
resolve(prints)
// return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
},
async computeSize(arr){
// let num = this.sketch/
return new Promise(async (resolve, reject) => {
let arr = JSON.parse(JSON.stringify(this.printStyleList))
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
let location
for (let index = 0; index < arr.length; index++) {
await this.setPrintWH(this.exhibitionElementsList[index].path)
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
let obj = {
angle : arr[index].transform.rotateZ,
location : location,
priority:arr[index].style.zIndex,
scale: scale,
designType:this.exhibitionElementsList[index].designType,
path:this.exhibitionElementsList[index].path,
minIOPath:this.exhibitionElementsList[index].minIOPath,
}
prints.push(obj)
}
this.computeZindex(resolve,prints)
})
},
async setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
// let data = {
// ...designItemDetail,
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
await this.computeSize().then((rv)=>{
this.setOkData = rv
})
data.designSingleItemDTOList[index].trims.prints = this.setOkData
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
this.currentFullBodyView = rv.currentFullBodyView
this.designItemDetailTS.rv = rv
this.designItemDetailTS.data = data
this.loadingShow = false
// this.designElements = false
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}
).catch(res=>{
this.loadingShow = false
});
},
setOK(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
designItemDetail.clothes[index].trims.prints = this.setOkData
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
this.designItemDetailTS = {}
}
this.designElements = false
if(this.driver__.driver){
driverObj__.moveNext();
}
},
clearModal(){
this.designElements = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designSelectElementsList = []
this.printStyleList = []
this.designElementsList = []
this.exhibitionElementsList = []
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: this.t('DesignPrintOperation.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.designElements=false
}
});
},
},
});
</script>
<style lang="less">
.designElementsMobile_modal {
// max-width: 1440px;
.mark_loading{
position: absolute;
}
.ant-modal-body{
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
}
.designElementsMobile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
.designElementsMobile_header {
position: relative;
height: calc(6.6rem*1.2);
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: calc(6.6rem*1.2);
left: calc(3.7rem*1.2);
top: 0;
font-size: calc(1.8rem*1.2);
color: #030303;
}
}
.designElementsMobile_right{
height: calc(50rem*1.2);
position: absolute;
right: calc(2rem*1.2);
left: auto;
top: 50%;
transform: translateY(-50%);
max-height: calc(50rem*1.2);
max-width: calc(30rem*1.2);
.designElementsMobile_entirety_img{
height: 100%;
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.designElementsMobile_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: calc(2rem*1.2) 0;
width: calc(16rem*1.2);
border-radius: calc(1rem*1.2);
height: calc(40rem*1.2);
.button_second{
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
}
.designElementsMobile_nav{
display: flex;
margin-top: calc(2rem*1.2);
flex-wrap: wrap;
width: 100%;
height: calc(22rem*1.2);
overflow-x: hidden;
justify-content: space-evenly;
align-content: flex-start;
&.designElementsMobile_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designElementsMobile_single{
width: 40%;
margin-bottom: calc(2rem*1.2);
}
img{
width: 100%;
cursor: pointer;
}
}
&.show_print_right{
border: none;
padding: 0;
height: 100%;
}
}
}
.designElementsMobile_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
&.active{
flex-direction: row;
}
.designElementsMobile_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
// max-width: 100%;
// max-height: 100%;
// width: 100%;
// height: 50rem*1.2);
max-height: calc(50rem*1.2);
min-height: calc(30rem*1.2);
width: auto;
max-width: calc(60rem*1.2);
}
.designElementsMobile_sketch_mask{
z-index: 3;
position: absolute;
inset: 0;
width: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designElementsMobile_print{
z-index: 3;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designElementsMobile_btn{
z-index: 3;
>div{
width: 100%;
height: 100%;
border: 2px solid rgb(20, 188, 255);
position: absolute;
}
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
&.designElementsMobile_Mouoverall{
opacity: 1;
border: none;
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
i{
display: flex;
color: #14bcff;
}
}
li{
cursor: pointer;
// border-radius: 50%;
width: calc(2.5rem*1.2);
height: calc(2.5rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designElementsMobile_btn_top{
top: 0;
}
.designElementsMobile_btn_bottom{
top: 100%;
}
.designElementsMobile_btn_left,.designElementsMobile_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designElementsMobile_btn_left{
left: 0;
}
.designElementsMobile_btn_right{
left: 100%;
}
.designElementsMobile_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designElementsMobile_delete{
position: absolute;
top: 0;
right: 0;
width: 2.5rem;
background: none;
transform: translate(100%, -100%);
height: 2.5rem;
img{
width: 100%;
height: 100%;
}
}
.designElementsMobile_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: calc(.2rem*1.2);
height: calc(3rem*1.2);
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designElementsMobile_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 3rem*1.2);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: calc(1rem*1.2) 0;
width: calc(10rem*1.2);
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

19
src/component/Detail/DesignPrintOperation.vue
View File

@@ -1,10 +1,11 @@
<template>
<div>
<div ref="designOpenrtionModal">
<a-modal
class="designOpenrtion_modal Guide_1_24"
class="designOpenrtion_modal Guide_1_24 generalModel"
:class="[driver__.driver?'hideEvents':'']"
v-model:visible="designOpenrtion"
:footer="null"
:get-container="() => $refs.designOpenrtionModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -17,8 +18,15 @@
<div class="design_title_text">
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="closeModal()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="designOpenrtion_open">
<!-- -->
@@ -62,6 +70,7 @@
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
class="system_silder"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
@@ -941,7 +950,7 @@ export default defineComponent({
});
</script>
<style lang="less">
<style lang="less" scoped>
.designOpenrtion_modal {
// max-width: 1440px;
user-select: none; /* 对现代浏览器有效 */

1298
src/component/Detail/DesignPrintOperationMobile.vue
View File

File diff suppressed because it is too large Load Diff

10
src/component/Detail/addDetails.vue
View File

@@ -1,8 +1,10 @@
<template>
<div class="addDetailsModal" ref="addDetailsModal"></div>
<a-modal
class="addDetails_modal generalModel"
v-model:visible="addDetails"
:footer="null"
:get-container="() => $refs.addDetailsModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -13,7 +15,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
@@ -69,7 +75,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.addDetails_modal {
.closeIcon {
z-index: 2;

8
src/component/Detail/editFrontBack.vue
View File

@@ -27,21 +27,13 @@
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime,segmentImage } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
export default defineComponent({
components: {
creditsDetail,
allOrder,
},
// emits: ['setSloganData'],
props:['patchData','imgDomIndex'],

12
src/component/Detail/habit.vue
View File

@@ -95,7 +95,7 @@
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
<a-slider class="system_silder"
v-model:value="workspaceItem.systemDesignerPercentage"
@afterChange="setSystemDesigner"
:tip-formatter="formatter"
@@ -848,15 +848,13 @@ export default defineComponent({
.habit_button {
background-color: #fff;
border: solid 2px #000;
padding: 0px calc(2rem*1.2);
box-sizing: initial;
border-radius: 4rem;
font-weight: 600;
height: calc(3.2rem*1.2);
line-height: calc(3.2rem*1.2);
padding: calc(.4rem*1.2) calc(1.5rem*1.2);
font-size: calc(1.2rem*1.2);
font-size: 1.8rem;
padding: 0 1.8rem;
cursor: pointer;
position: relative;
line-height: 6rem;
.fi-bs-angle-down {
margin-left: calc(1rem*1.2);
display: inline-block;

11
src/component/Detail/habitSetStyle.vue
View File

@@ -7,14 +7,18 @@
:maskClosable="false"
:centered="true"
:closable="false"
:mask="habitSetStyleMask"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1050"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="habitSetStyle_content" v-hoverAnmi>
@@ -213,7 +217,6 @@ methods: {
.habitSetStyle_modal {
&.generalModel{
.ant-modal-body {
height: calc(55rem*1.2);
}
}

626
src/component/Detail/setDesignItem2.vue
View File

@@ -1,626 +0,0 @@
<template>
<div class="design_compile_content" id="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="detail_modal_body_title">
<div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:designShowIndex.value == index}" @click="clothesOpen(item,index)">
<img :src="item?.path" alt="">
</div>
</div>
</div>
<div class="designOpenrtion_imgMask">
<!-- <canvas ref="canvasDom" ></canvas> -->
</div>
<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
</div>
</template>
<script >
import { defineComponent, h,reactive, ref ,computed, inject,nextTick, onMounted} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
// import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
export default defineComponent({
emits: ['setDesignCoverage', 'setSubmit'],
// props: ["frontBack"],
setup(prop) {
const store = useStore();
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(4)//印花优先级
let designShowIndex = reactive({value:-1})
let frontBack = reactive({})
let frontBackOld = reactive({})
let canvasFontBackMove = {
back:[],
front:[],
}
let setPostition = async (url) =>{
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
}
let computeZindex = (designItemDetail)=>{
let arr = designItemDetail.clothes
arr.sort((a, b) => {
var a_num = a.priority;
var b_num = b.priority;
return a_num - b_num;
});
designItemDetail.clothes = arr
return designItemDetail
}
let setImgSize = async ()=>{
let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await setPostition(body.layersObject[0]?.imageUrl)
designItemDetail = computeZindex(designItemDetail)
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.scale = ratio
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = v.priority
front[index].id = v.id
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = v.priority
back[index].id = v.id
}
if(printZIndex < v.priority){
printZIndex = v.priority
}
}
printZIndex++
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
frontBack = {
front:front,
back:back,
body:body,
}
frontBackOld = JSON.parse(JSON.stringify({
front:front,
back:back,
body:body,
}))
setCanvas(frontBack)
}
let canvas = reactive({})
let setCanvas = (frontBack)=>{
let canvasBox = document.querySelector('.design_compile_content .designOpenrtion_imgMask')
var canvasDom = document.createElement('canvas')
// console.log(canvasBox);
canvasBox.innerHTML = ''; // 清空原有内容
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255,255,255,1)",
// fill: '#ffde7d',
selection: false, //设置多选
width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]),
height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]),
isDrawingMode: false, // 开启绘图模式
});
canvas.clear();
canvasFontBackMove = {
back:[],
front:[],
}
let fontBackMove = []
canvas.on('selection:created', (e)=> {
// console.log(canvas.getActiveObject());
// // if()
// console.log(frontBack.front.find(person => person.id === canvas.getActiveObject().id));
// designShowIndex.value =
});
// selection:updated
canvas.on('selection:cleared', ()=>{
designShowIndex.value = -1
})
frontBack.back.forEach((item) => {
if(!item.imageUrl){
return
}
fabric.Image.fromURL(item.imageUrl, (img) => {
img.set({
left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
evented : false,
// selectable: false
});
canvas.add(img);
canvasFontBackMove.back.push({id:item.id,img:img})
});
});
fabric.Image.fromURL(frontBack?.body?.layersObject?.[0].imageUrl || '', (img) => {
img.set({
left: 0,
top: 0,
// width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]) * scale,
// height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]) * scale,
scaleX: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
scaleY: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
evented : false,
// selectable: false
});
canvas.add(img);
});
frontBack.front.forEach((item) => {
if(!item.imageUrl){
return
}
fabric.Image.fromURL(item.imageUrl, (img) => {
img.set({
left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
// selectable: false
});
img.id = item.id
canvas.add(img);
canvasFontBackMove.back.forEach((backItem) => {
if(backItem && backItem.id == item.id){
img.on('moving', function() {
// 计算第二个矩形应该移动的距离
// 更新第二个矩形的位置
backItem.img.set({
left: img.left,
top: img.top,
width: img.width,
height: img.height,
scaleX: img.scaleX,
scaleY: img.scaleY,
});
});
img.on('scaling', function(e) {
backItem.img.set({
left: img.left,
top: img.top,
width: img.width,
height: img.height,
scaleX: img.scaleX,
scaleY: img.scaleY,
});
});
canvas.renderAll();
}
})
canvasFontBackMove.front.push({id:item.id,img:img})
});
});
var objects = canvas.getObjects();
}
let clothesOpen = (item,index)=>{
setpitch(item,index)
designShowIndex.value = index
}
let setpitch = (item,index)=>{
canvas.discardActiveObject();
// this.designItemDetail.clothes.forEach((item)=>{
// item.clothesOpen = false
// })
// this.designItemDetail.clothes[index].clothesOpen = true
for (const iterator in canvasFontBackMove) {
canvasFontBackMove[iterator].forEach((canvasItem,canvasIndex) => {
if(canvasItem.id == item.id){
// var rect1Index = canvas.getObjects().indexOf(canvasItem.img);
if(iterator == 'front'){
canvas.moveTo(canvasItem.img,canvas.getObjects().length)
canvas.setActiveObject(canvasItem.img);
}else{
canvas.moveTo(0)
// canvas.moveTo(canvasItem.img,canvasFontBackMove[iterator].length-1)
}
}
});
}
// canvas.setDepth(object1, canvas.getObjects().indexOf(object2) + 1);
}
let imgClear = ()=>{
frontBack = JSON.parse(JSON.stringify(frontBackOld))
setCanvas(frontBack)
}
return {
designItemDetail,
current,
printZIndex,
designShowIndex,
frontBack,
setRevocation,
frontBackOld,
canvasFontBackMove,
setImgSize,
clothesOpen,
imgClear,
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
mounted () {
},
methods: {
init(){
this.setImgSize()
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
},
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
deleteBorder(){
this.frontBack?.front?.forEach((item)=>{
item.designOpenrtionBtn = false
})
},
clothesOpenActive(index){
},
sort(arr){
arr.sort((a, b) => {
var a_num = a.style.zIndex;
var b_num = b.style.zIndex;
return a_num - b_num;
});
return arr
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
let num = 10
arr.forEach((item)=>{
item.priority = num++
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
})
data.designSingleItemDTOList.forEach((item)=>{
let front = arr
let imageCategory1
if(arr.length > 1){
imageCategory1 = arr[1].imageCategory
}
for (let index = 0; index < arr.length; index++) {
if(item.id == arr[index].id && !arr[index].similarity){
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[0])
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[1])
let scale = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
item.priority = arr[index].priority
arr[index].similarity = true
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
break
}
}
if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
// return
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.$parent.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
rv.clothes.forEach((i)=>{
i.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
})
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.ifSubmit = true
designItemDetail.currentFullBodyView = rv.currentFullBodyView
designItemDetail.clothes.forEach((item)=>{
for (let index = 0; index < rv.clothes.length; index++) {
if(rv.clothes[index].id === item.id && !rv.clothes[index].similarity){
item.layersObject = rv.clothes[index].layersObject
item.priority = rv.clothes[index].layersObject[0].priority
rv.clothes[index].similarity = true
break
}
}
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
this.setRevocation(designItemDetail,data)
}
).catch(res=>{
});
},
},
});
</script>
<style lang="less" scoped>
.designOpenrtion_modal {
// max-width: 1440px;
.ant-modal-body{
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
}
}
.design_compile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.designOpenrtion_centent{
flex: 1;
display: flex;
flex-direction: column;
align-content: space-around;
flex-wrap: nowrap;
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
z-index: 2;
position: relative;
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
height: 100%;
overflow: hidden;
margin: 0 auto;
>img{
z-index: 2;
position: relative;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.detail_modal_body_nav{
display: flex;
position: relative;
top: 0;
left: 50%;
z-index: 999;
transform: translate(-50%,-0%);
transition: all .3s;
justify-content: center;
margin-bottom: calc(1rem*1.2);
>div{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
cursor: pointer;
text-align: center;
margin-left: calc(.3rem*1.2);
img{
// width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
}
&.active{
border: 2px solid rgba(0,0,0,0.4);
img{
transform: scale(.8);
opacity: .8;
}
}
}
>div:nth-child(1){
margin-left: calc(0rem*1.2);
}
}
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 9999;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: calc(1rem*1.2);
height: calc(1rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: calc(1rem*1.2);
width: calc(10rem*1.2);
text-align: center;
bottom: 0;
position: relative;
}
}
.designOpenrtion_imgMask_open{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>

685
src/component/Detail/setDesignItemMobile.vue
View File

@@ -1,685 +0,0 @@
<template>
<div class="design_compile_content" id="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<img :src="item?.path" alt="">
</div>
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @touchstart.passive="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @touchstart.passive="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
</div>
<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
export default defineComponent({
// props: ["frontBack"],
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
setup(prop) {
const store = useStore();
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
// zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}
]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let frontBack = ref({})
let frontBackOld = ref({})
return {
designItemDetail,
current,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack,
setRevocation,
frontBackOld
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
setImgSizeTimeout:null
};
},
mounted () {
window.addEventListener('resize', this.setImgSizeTime);
},
methods: {
init(){
let DesignParent = this.$parent
// this.clearModal()
// console.log(this.current,DesignParent.frontBack);
this.printStyleList.push({
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
// zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
})
this.setImgSize()
},
setImgSizeTime(){
clearTimeout(this.setImgSizeTimeout)
this.setImgSizeTimeout = setTimeout(()=>{
this.setImgSize()
},300)
},
async setImgSize(){
this.frontBack.body = null
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = v.priority
front[index].id = v.id
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = v.priority
back[index].id = v.id
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
if(this.printZIndex < v.priority){
this.printZIndex = v.priority
}
}
this.printZIndex++
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
this.frontBackOld = JSON.parse(JSON.stringify({
front:front,
back:back,
body:body,
}))
},
imgClear(){
this.frontBack = JSON.parse(JSON.stringify(this.frontBackOld))
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
img.remove()
};
img.onerror = reject;
img.src = url;
});
}
return num
},
clear(){
window.removeEventListener('resize', this.setImgSizeTime);
},
setpitch(item,index){
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
this.clothesOpenActive(index)
},
// 设置移动
itemMoveMousedown(index,e){
this.imgDomIndex = index
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.clothesOpenActive(index)
let event = e||window.event
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
document.addEventListener("touchend", this.touchend);
document.addEventListener("touchmove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
}else{
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
this.frontBack.front[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
this.frontBack.front[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
}
document.addEventListener("touchend", this.sizeMouseup);
document.addEventListener("touchmove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.changedTouches[0].pageX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.changedTouches[0].pageY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let w,h
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.changedTouches[0].pageX -imgDomWH.left)
h = (e.changedTouches[0].pageX -imgDomWH.left)*num
width = w+'px'
// height = w*num+'px'
}else if(this.direction == 'top'){
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -this.imgDom.offsetHeight - this.imgDom.offsetTop+'px'
this.frontBack.front[this.imgDomIndex].style.bottom = this.frontBack.front[this.imgDomIndex].centers.bottom+'px'
w = (e.changedTouches[0].pageX -imgDomWH.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
height = h+'px'
// width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
h = (e.changedTouches[0].pageY -imgDomWH.top)
height = h+'px'
// width = h*num+'px'
}else if(this.direction == 'left'){
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = this.frontBack.front[this.imgDomIndex].centers.right+'px'
width = w+'px'
// height = w*num+'px'
}
//判断尺寸是否到边
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.frontBack.front[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("touchend", this.sizeMouseup);
document.removeEventListener("touchmove", this.sizeMousemove);
},
touchend(e) {
document.removeEventListener("touchend", this.touchend);
document.removeEventListener("touchmove", this.moveMousemove);
},
clearModal(){
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
deleteBorder(){
this.frontBack?.front?.forEach((item)=>{
item.designOpenrtionBtn = false
})
},
clothesOpen(index){
this.imgDomIndex = index
this.clothesOpenActive(index)
this.setpitch('',index)
},
clothesOpenActive(index){
this.designItemDetail.clothes.forEach((item)=>{
item.clothesOpen = false
})
this.designItemDetail.clothes[index].clothesOpen = true
},
sort(arr){
arr.sort((a, b) => {
var a_num = a.style.zIndex;
var b_num = b.style.zIndex;
return a_num - b_num;
});
return arr
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
let num = 10
arr.forEach((item)=>{
item.priority = num++
})
data.designSingleItemDTOList.forEach((item)=>{
let front = arr
let imageCategory1
if(arr.length > 1){
imageCategory1 = arr[1].imageCategory
}
arr.forEach((i)=>{
if(item.id == i.id){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
// let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
let scaleWidth = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale[0])).toFixed(2)):1
let scaleHeight = i?.imageSize?Number(((i?.style?.height.replace(/px/g,'')*ratio)/(i?.imageSize[1]/i.scale[1])).toFixed(2)):1
item.scale = [scaleWidth,scaleHeight]
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
item.priority = i.priority
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
designItemDetail.ifSubmit = true
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.id === i.id){
i.layersObject = item.layersObject
i.priority = item.layersObject[0].priority
}
})
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
this.setRevocation(designItemDetail,data)
this.clear()
}
).catch(res=>{
this.$emit('setParentLoadingShow');
});
},
},
});
</script>
<style lang="less" scoped>
.designOpenrtion_modal {
// max-width: 1440px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
.ant-modal-body{
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
// height: calc(65vh - 6.calc(4rem*1.2));
height: calc(65rem*1.2);
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
}
}
.design_compile_content {
// background: #f2f3fb;
// padding-bottom: 2.calc(9rem*1.2);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.designOpenrtion_centent{
// flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-content: space-around;
flex-wrap: nowrap;
margin: 0 auto;
// overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
z-index: 2;
position: relative;
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
// height: 100%;
// overflow: hidden;
height: calc(100% - 1.2rem - 4.8rem - 20%);
margin: 0 auto;
>img{
z-index: 2;
position: relative;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.detail_modal_body_nav{
display: flex;
position: relative;
top: 0;
left: 50%;
z-index: 999;
transform: translate(-50%,-0%);
transition: all .3s;
justify-content: center;
margin-bottom: calc(1rem*1.2);
>div{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
cursor: pointer;
text-align: center;
margin-left: calc(.3rem*1.2);
img{
// width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
}
&.active{
border: 2px solid rgba(0,0,0,0.4);
img{
transform: scale(.8);
opacity: .8;
}
}
}
>div:nth-child(1){
margin-left: calc(0rem*1.2);
}
}
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
.designOpenrtion_btn{
z-index: 9999;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
padding: calc(1rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
z-index: 2;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: calc(1rem*1.2);
width: calc(10rem*1.2);
text-align: center;
bottom: 0;
position: relative;
}
}
.designOpenrtion_imgMask_open{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>

2
src/component/Events/eventsDetail.vue
View File

@@ -134,7 +134,7 @@ export default defineComponent({
.eventsDetail_page {
min-height: 100%;
width: 100%;
padding: 0 9rem;
padding: 0 6rem;
padding-top: 5rem;
&.active{

64
src/component/HomePage/ColorboardUpload.vue
View File

@@ -181,6 +181,11 @@ export default defineComponent({
Sketch,
selectImgList,
},
props: {
collectionStep: {
type: Number,
}
},
setup(){
// console.log(isMoible());
let fileList = ref([])
@@ -236,6 +241,33 @@ export default defineComponent({
// this.setColorboardList(colorList)
// // this.clearSelectColor()
// },
collectionStep:{
handler(newVal,oldVal){
if(newVal != 3)return
const backIcon = document.createElement('div');
if(backIcon.classList.contains('vc-sketch-color-wrap'))return
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
})
}
},
selectColor:{
handler(newVal,oldVal){
if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
@@ -328,31 +360,12 @@ export default defineComponent({
}
},
mounted(){
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
nextTick(()=>{
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
})
// this.clearSelectColor()
// if ("EyeDropper" in window) {
// console.log(true);
@@ -932,6 +945,9 @@ export default defineComponent({
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
background: #fff;
>div,>span{
width: 50%;
}
}
.upload_file_item_show:hover{
border-bottom: none;

22
src/component/HomePage/Cropper.vue
View File

@@ -1,7 +1,9 @@
<template>
<a-modal class="modal_component cut_pricture_modal"
<div ref="cutPrictureModal">
<a-modal class="generalModel cut_pricture_modal"
v-model:visible="cutPicuterModal"
:footer="null"
:get-container="() => $refs.cutPrictureModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -30,6 +32,7 @@
:outputType="option.outputType"
:auto-crop="option.autoCrop"
:fixedBox="!isRound"
:movable="true"
:fixed="isRound"
:auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropWidth"
@@ -70,6 +73,7 @@
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,inject } from 'vue'
@@ -168,20 +172,6 @@ export default defineComponent({
}
})
</script>
<style lang="less">
.component_modal{
}
.cut_pricture_modal{
.ant-modal-content{
// transform: scale(1.2);
// transform-origin: center !important;
}
*{
pointer-events: auto;
}
}
</style>
<style lang="less" scoped>
.cut_pricture_modal{
@@ -190,7 +180,7 @@ export default defineComponent({
.collection_title{
position: absolute;
width: calc(100% - 10rem*1.2);
top: calc(4rem*1.2);
top: calc(3rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;

42
src/component/HomePage/ExportModel.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="ExportModal">
<a-modal
class="modal_component Export generalModelOperate"
class="modal_component Export generalModel"
v-model:visible="showUpgradePlan"
:footer="null"
:get-container="() => $refs.ExportModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -10,10 +12,16 @@
:keyboard="false"
:destroyOnClose="true"
>
<div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="UpgradePlan_content generalModelOperate">
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="UpgradePlan_content">
<div>{{ $t('exportModel.EditExport') }}</div>
</div>
<!-- <div>
@@ -239,7 +247,7 @@
</div>
<a-modal
v-model:visible="showSRExport"
class="modal_component SRExport generalModelOperate"
class="modal_component SRExport generalModel"
width="48%"
:maskClosable="false"
:centered="true"
@@ -248,9 +256,11 @@
:footer="null"
:mask="false"
>
<div class="generalModelOperate_closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="modal_title_text">
<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
@@ -286,9 +296,10 @@
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
<publish ref="publish" @setPublish="setSubmit"></publish>
<publish ref="publish" ></publish>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</a-modal>
</div>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
@@ -318,7 +329,7 @@ export default defineComponent({
publish,
liquefaction,
},
props: ["msg", "sketchCatecoryList"],
props: ["msg", "sketchCatecoryList",'setTask'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
@@ -2227,10 +2238,18 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.Export {
:deep(.Export) {
flex: 1;
// height: 30rem;
// overflow-x: hidden;
>.ant-modal-content {
.ant-modal-body{
display: flex;
flex-direction: column;
background: #f9fafb;
border-radius: 3rem;
}
}
.icon{
transition: all .3s;
}
@@ -2256,7 +2275,6 @@ export default defineComponent({
justify-content: space-between;
cursor: pointer;
position: sticky;
background: #f9fafb;
z-index: 2;
align-items: flex-start;
margin: 0 2rem;

35
src/component/HomePage/Generate.vue
View File

@@ -47,6 +47,7 @@
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@click="inputFocus()"
@paste="onPaste"
/>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
@@ -737,10 +738,10 @@ export default defineComponent({
file.id_ = GO.id++;
file.categoryValue = category?.value;
file.category = category?.name;
let fileList = this.sketchboardList.filter(
(v: any) => v.status === "done"
);
this.sketchboardList = fileList
//判断是否粘贴来的图片
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
if(paste.length == 0)this.sketchboardList.push(file);
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
@@ -851,6 +852,32 @@ export default defineComponent({
// this.myMaterialModalShow = false
this.searchPictureName = "";
},
onPaste(e:any){
if(e.clipboardData.items[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
let param = new FormData();
param.append('inPin','0')
param.append('gender',this.upload.gender)
param.append('level1Type',this.upload.level1Type)
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',e.clipboardData.files[0]);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
let value = {data:v,errCode : 0}
v.status = 'done'
let data = {
file:{
status: 'done',
xhr:{
response:JSON.stringify(value)
}
}
}
this.fileUploadChange(data)
})
}
}
},
});
</script>

5
src/component/HomePage/MoodboardUpload.vue
View File

@@ -149,7 +149,6 @@
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
<layoutMobile ref="layoutMobile" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layoutMobile>
</div>
</template>
@@ -165,14 +164,13 @@ import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import layoutMobile from "@/component/HomePage/layoutMobile.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import { useI18n } from "vue-i18n";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout,layoutMobile },
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
@@ -437,7 +435,6 @@ export default defineComponent({
async changeTemplateModal() {
if(this.modalImg[0]?.id){
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
let styleObj = this.store.state.UploadFilesModule.moodboardPosition

3
src/component/HomePage/NewCollectionReview.vue
View File

@@ -210,8 +210,7 @@ export default defineComponent({
left: 0;
width: 100%;
height: 100%;
z-index: 2;
z-index: 1;
}
.img_block_item{

289
src/component/HomePage/UpgradePlan.vue
View File

@@ -1,60 +1,32 @@
<template>
<div class="upgradePlan" ref="upgradePlan">
<!-- 如果需要套餐就78 -->
<a-modal class="modal_component UpgradePlan_modal"
<a-modal class="generalModel UpgradePlan_modal"
v-model:visible="showUpgradePlan"
:footer="null"
:get-container="() => $refs.upgradePlan"
width="35%"
height="auto"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
:destroyOnClose ='true'
>
<div class="UpgradePlan_closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="UpgradePlan_content">
<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
</div>
<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
<div class="UpgradePlan_nav_content">
<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
</div>
</div> -->
<div v-show="stepNum == 0" class="UpgradePlan_payList">
<!-- <div v-show="planNum == 0" class="UpgradePlan_payList0">
<div class="UpgradePlan_payList-item" v-for="item in productList">
<div class="UpgradePlan_payList-item-price">$99/month</div>
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
<ul class="UpgradePlan_payList-item-content">
<li>
<i class="fi fi-rr-cross-small"></i>
<span>22500 Images per month</span>
</li>
</ul>
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
</div>
</div>
<div v-show="planNum == 1" class="UpgradePlan_payList1">
<div class="UpgradePlan_payList-item" v-for="item in productList">
<div class="UpgradePlan_payList-item-price">$99/month</div>
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
<ul class="UpgradePlan_payList-item-content">
<li>
<i class="fi fi-rr-cross-small"></i>
<span>22500 Images per month</span>
</li>
</ul>
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
</div>
</div> -->
<div v-show="planNum == 2" class="UpgradePlan_payList2">
<div class="UpgradePlan_payList-item" v-for="item in productList">
<div class="UpgradePlan_payList2_img">
@@ -72,7 +44,9 @@
</div>
</div>
</div>
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
<!-- <div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
<div class="UpgradePlan_payAffirm_content">
<label>
@@ -130,21 +104,21 @@
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
</div>
</div>
</div> -->
</a-modal>
</div>
</template>
<script lang="ts">
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import { useI18n } from "vue-i18n";
import payMethod from "@/component/Pay/payMethod.vue";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components: {
scaleImage,
payMethod,
},
props: ["msg",'sketchCatecoryList'],
setup() {
@@ -159,11 +133,11 @@ export default defineComponent({
price:2,
credits:45,
})
let payMethod:any = ref(null)
let modeOfPayment = ref('paypal')
let modeOfPaymentDetail = ref('ALIPAYHK')
let clause = ref(false)//同意条款
let productList:any = ref([])
let payIndex = ref(0)
let isShowMark = ref(false)
let newWindow:any = ref()
return {
@@ -172,12 +146,12 @@ export default defineComponent({
showUpgradePlan,
planNum,
stepNum,
payMethod,
price,
modeOfPayment,
modeOfPaymentDetail,
clause,
productList,
payIndex,
isShowMark,
newWindow,
};
@@ -209,8 +183,12 @@ export default defineComponent({
this.planNum = num
},
upgrade(index:any){
this.stepNum = 1
this.payIndex = index
let data = {
autoRenewal:true,//one_time为不自动续费
productName:'CreditsPurchase',
quantity:this.price.num,
}
this.payMethod.init(data)
},
getProductList(){
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
@@ -315,7 +293,7 @@ export default defineComponent({
<style lang="less" scoped>
.UpgradePlan_modal {
flex: 1;
height: 30rem;
// height: 30rem;
// overflow-x: hidden;
display: flex;
flex-direction: column;
@@ -357,51 +335,7 @@ export default defineComponent({
}
.UpgradePlan_payList{
flex: 1;
.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
overflow-y: hidden;
height: 100%;
display: flex;
.UpgradePlan_payList-item{
height: 100%;
display: flex;
flex-direction: column;
}
}
.UpgradePlan_payList0,.UpgradePlan_payList1{
.UpgradePlan_payList-item{
width: 35rem;
padding: 3rem;
border: .5rem solid #edeff2;
border-radius: 2rem;
margin-right: 2rem;
&.UpgradePlan_payList-item:last-child{
margin-right: 0;
}
.UpgradePlan_payList-item-price{
font-weight: 600;
font-size: var(--aida-fsize2);
margin-bottom: 1rem;
line-height: 1;
}
.UpgradePlan_payList-item-plan{
font-size: 1.8rem;
font-weight: 600;
}
.UpgradePlan_payList-item-content{
margin-top: 1.2rem;
flex: 1;
overflow-x: hidden;
}
.UpgradePlan_payList-item-upgrade{
position: relative;
text-align: center;
padding: 1rem 2rem;
}
}
}
.UpgradePlan_payList2{
text-align: center;
flex-direction: column;
@@ -465,168 +399,5 @@ export default defineComponent({
}
}
.UpgradePlan_payAffirm{
width: 50rem;
margin: 0 auto;
margin-top: 5rem;
.UpgradePlan_payAffirm_title{
font-size: 2rem;
font-weight: 600;
}
}
.UpgradePlan_payAffirm_content{
display: flex;
flex-direction: column;
margin: 3rem 0;
// height: 20rem;
// overflow-y: auto;
>label{
display: flex;
align-items: center;
padding: 1rem;
margin: 1rem 0;
cursor: pointer;
border: .5rem solid #efefef;
border-radius: 2rem;
img{
margin: 0rem 2rem;
// max-width: 4rem;
width: 4rem;
}
.UpgradePlan_payAffirm_content_detail{
margin-left: auto;
display: flex;
>label{
cursor: pointer;
display: flex;
align-items: center;
margin-right: 1rem;
span{
margin-left: .5rem;
}
}
>label:last-child{
margin: 0;
}
}
}
}
.UpgradePlan_payAffirm_clause{
margin-bottom: 1.5rem;
label{
cursor: pointer;
input{
margin-right: 1rem;
cursor: pointer;
vertical-align: middle;
}
span{
vertical-align: top;
a{
color: #000;
text-decoration: underline;
}
}
}
&.animation{
animation: shake .3s linear;
@keyframes shake {
0%{
transform: translateX(0px);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(10px);
}
75%{
transform: translateX(-10px);
}
100%{
transform: translateX(0px);
}
}
}
}
.UpgradePlan_payList_item_upgrade_btn{
display: flex;
display: flex;
justify-content: space-around;
>div{
position: relative;
left: 0;
transform: none;
line-height: 1;
display: flex;
align-items: center;
}
.UpgradePlan_payList_item_upgrade1{
background: rgba(0, 0, 0, 0);
border: 2px solid;
color: #000;
}
}
.UpgradePlan_closeIcon{
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before{
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
}
</style>
<style lang="less">
.UpgradePlan_modal,.layout_modal{
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
display: flex;
flex-direction: column;
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
height: calc(55rem*1.2);
// height: calc(65rem*1.2);
}
//进度完成字体颜色
.ant-progress-circle.ant-progress-status-success .ant-progress-text{
color: #000;
}
.ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem*1.2);
}
}
}
.UpgradePlan_modal{
.ant-modal-content{
.ant-modal-body{
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
height: calc(55rem*1.2);
// height: calc(65rem*1.2);
}
}
}
</style>

84
src/component/HomePage/collectionModal.vue
View File

@@ -1,12 +1,14 @@
<template>
<div v-if="showCollectionModal">
<a-modal class="modal_component collection_modal Guide_1_2"
<div ref="collection_modal"></div>
<a-modal class="modal_component collection_modal generalModel Guide_1_2"
v-model:visible="showCollectionModal"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:get-container="() => $refs.collection_modal"
wrapClassName="#app"
:keyboard="false"
>
@@ -27,11 +29,15 @@
</div>
</div>
<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
<!-- <div class="header_right_block" @click.stop="">
<div class="header_cancel_button" >Cancel</div>
</div> -->
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
<div class="generalModel_btn" :class="[driver__.driver?'hideEvents':'']">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="collection_page" :class="[driver__.driver?'hideEvents':'']">
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
@@ -46,7 +52,7 @@
<div class="collection_modal_body">
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
<ColorboardUpload ref="ColorboardUpload" :collectionStep="collectionStep" v-show="collectionStep === 3"></ColorboardUpload>
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
</div>
@@ -373,8 +379,44 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
:deep(.ant-modal-body){
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
// height: calc(65vh - 6.4rem);
height: calc(65rem*1.2);
.ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem*1.2);
}
}
.collection_modal{
// max-width: 120rem;
.ant-upload-select-picture-card{
background: #FFFFFF;
width: calc(6rem*1.2);
height: calc(6rem*1.2);
border: calc(0.3rem*1.2) solid #ededed;
border-radius: calc(1rem*1.2);
margin: 0;
.upload_tip_block{
.icon-jiahao{
font-size: calc(3.2rem*1.2);
color: #B7B7B7;
}
}
.ant-upload-text{
font-size: calc(1.6rem*1.2);
color: #B7B7B7;
}
}
.ant-upload-list-picture-card-container{
display: none !important;
}
.ant-upload-picture-card-wrapper{
width: auto;
vertical-align: top;
}
.collection_title,.collection_closeIcon,.collection_page{
position: absolute;
}
@@ -480,31 +522,3 @@ export default defineComponent({
}
}
</style>
<style lang="less">
.collection_modal,.layout_modal,.layoutMobile_modal{
// max-width: 1200px ;
// max-width: 1150px ;
.ant-modal-content{
border-radius: calc(1rem*1.2);
overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
// height: calc(65vh - 6.4rem);
height: calc(65rem*1.2);
}
//进度完成字体颜色
.ant-progress-circle.ant-progress-status-success .ant-progress-text{
color: #000;
}
.ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem*1.2);
}
}
}
</style>

13
src/component/HomePage/createSlogan.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="clearSloganModal"></div>
<a-modal
class="clearSlogan_modal generalModel"
v-model:visible="showPayOrder"
:footer="null"
:get-container="() => $refs.clearSloganModal"
width="50%"
:maskClosable="false"
:centered="true"
@@ -13,7 +15,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
@@ -400,11 +406,8 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.clearSlogan_modal {
.closeIcon {
z-index: 2;
}
.clearSlogan_center{
position: relative;
// width: calc(512px / 2);

8
src/component/HomePage/generalModel.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-modal
class="modal_component generalModel_modal"
class="modal_component generalModel"
v-model:visible="showPayOrder"
:footer="null"
width="78%"
@@ -11,8 +11,10 @@
:keyboard="false"
>
<div class="generalModel_page ">
<div class="closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="creditsDetail_table_search generalModel_table_search">
<div class="creditsDetail_state generalModel_state">

11
src/component/HomePage/layout.vue
View File

@@ -1,9 +1,10 @@
<template>
<div>
<div ref="layoutModal">
<a-modal
class="layout_modal generalModel"
v-model:visible="layout"
:footer="null"
:get-container="() => $refs.layoutModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -20,7 +21,11 @@
</div>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="layout_nav">
@@ -858,7 +863,7 @@ export default defineComponent({
});
</script>
<style lang="less">
<style lang="less" scoped>
.layout_modal {
user-select: none; /* 对现代浏览器有效 */
-webkit-user-select: none; /* Safari */

1086
src/component/HomePage/layoutMobile.vue
View File

File diff suppressed because it is too large Load Diff

14
src/component/HomePage/productImg.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="productImgModal">
<a-modal
class="productImg_modal generalModel"
v-model:visible="productImg"
:footer="null"
:get-container="() => $refs.productImgModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -13,7 +15,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="productImg_content">
@@ -232,6 +238,7 @@
}"
:isProductimg="true"></scaleImage>
</a-modal>
</div>
</template>
<script lang="ts">
@@ -258,6 +265,7 @@ export default defineComponent({
scaleImage,
generalMenu,
},
props: ['setTask'],
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
@@ -883,12 +891,12 @@ methods: {
.Guide_1_32{
height: 100%;
overflow-y: auto;
padding: 0 1rem;
&.Guide_1_32::-webkit-scrollbar{display: none;}
}
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto !important;
height: 14rem !important;
border: none !important;
&.upload_file_item:last-child{
@@ -925,7 +933,7 @@ methods: {
}
.productImg_content_item_Direction{
padding-bottom: calc(2rem* 1.2);
.ant-select{
:deep(.ant-select){
font-size: 1.6rem;
.ant-select-selector::after{
line-height: 1;

240
src/component/HomePage/renew.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div class="renew" ref="renew"></div>
<a-modal
class="generalModel"
:get-container="() => $refs.renew"
v-model:visible="renewModel"
:footer="null"
:width="pageWidth"
height="auto"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="renewModelMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="renewContent">
<div class="generalModelTitle">
Select The Best Plan For Your Needs
</div>
<div class="renew_detail">
<div class="name generalModelTitle">{{ current.title }}</div>
<div class="price_box">
<div class="price">
<sub>$</sub>
{{ current.price[current.type] }} <span>{{ current.unit[current.type] }}</span>
</div>
<div class="type" v-if="current.typeList.length > 1">
<label>
<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
Monthly
</label>
<label>
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
Yearly
</label>
</div>
<div class="info">{{ current.info }}</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</div>
</div>
<div
class="login_footer_item_text"
@click="turnToWindow(
'https://code-create.com.hk/aida-terms-and-conditions/'
)"
>
Terms&Conditions
</div>
<div
class="login_footer_item_text"
@click="turnToWindow(
'https://code-create.com.hk/aida-subscription-agreement/'
)"
>
Privacy Policy
</div>
</div>
</a-modal>
<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
import { message } from "ant-design-vue";
import payMethod from "@/component/Pay/payMethod.vue";
import { useStore } from "vuex";
const md5 = require("md5");
export default defineComponent({
components: {
payMethod,
},
setup(){
const store = useStore();
let renew = reactive({
renewModel:false,
renewModelMask:true,
pageWidth:'50%'
})
let renewData = reactive({
personage:{
title:'Personal version',
price:{
monthly:'500',
year:'5,000',
},
unit:{
monthly:'HKD / Month',
year:'HKD / Year',
},
type:'monthly',
typeList:['monthly','year'],
info:'Tax, VAT not included.',
},
firm:{
title:'Education Edition',
price:{
year:'500',
},
unit:{
year:'HKD / Year',
},
type:'year',
typeList:['year'],
info:'Customised plan',
},
education:{
title:'Enterprise Edition',
price:{
year:'500',
},
unit:{
year:'HKD / Year',
},
type:'year',
typeList:['year'],
info:'Customised plan',
},
current:{
} as any,
payMethod:null as any,
})
const init = ()=>{
renew.renewModel = true
renewData.current = renewData.personage
}
const cancelDsign = () => {
renew.renewModel = false
}
const setPricType=(str:any)=>{
renewData.current.type = str
}
const payment = ()=>{
let subscribeType = 'Year'
if(renewData.current.type == 'monthly')subscribeType= 'Month'
let data = {
autoRenewal:true,//one_time为不自动续费
productName:'Subscription',
subscribeType,//yearly为年费，monthly为月费
}
renewData.payMethod.init(data)
}
return{
store,
...toRefs(renew),
...toRefs(renewData),
init,
cancelDsign,
setPricType,
payment,
}
},
data() {
return {
};
},
methods: {
turnToWindow(url:any) {
window.open(url);
},
},
});
</script>
<style lang="less" scoped>
.renew {
.renewContent{
display: flex;
flex-direction: column;
align-items: center;
.generalModelTitle{
text-align: center;
}
.renew_detail{
width: 58rem;
height: 53rem;
border-radius: 3rem;
margin-bottom: 5rem;
border: 2px solid #000;
padding: 6rem 3rem 5rem;
display: flex;
flex-direction: column;
.price_box{
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
justify-content: space-between;
margin-bottom: 3rem;
}
.price{
font-size: 6rem;
sub{
font-size: 2rem;
top: -3rem;
}
span{
font-size: 2rem;
}
}
.type{
display: flex;
label{
display: flex;
align-items: center;
margin-right: 3rem;
input{
margin-right: 1rem;
}
}
label:last-child{
margin-right: 0rem;
}
}
}
.login_footer_item_text{
text-align: center;
margin-bottom: 1.5rem;
text-decoration: underline;
}
.login_footer_item_text:last-child{
margin-bottom: 0rem;
}
}
}
</style>

41
src/component/HomePage/scaleImage.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="scaleImageModal">
<a-modal
class="scaleImage_modal generalModel"
v-model:visible="scaleImage"
:footer="null"
:get-container="() => $refs.scaleImageModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -12,10 +14,14 @@
:destroyOnClose="true"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
<div class="generalModel_closeIcon" @click.stop="download()">
<div class="generalModel_closeIcon download" @click.stop="download()">
<i class="fi fi-rr-down-to-line"></i>
</div>
</div>
@@ -128,6 +134,7 @@
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script lang="ts">
@@ -476,7 +483,7 @@ export default defineComponent({
},
});
</script>
<style>
<style scoped>
.scaleImage_modal{
overflow: visible !important;
}
@@ -487,6 +494,10 @@ export default defineComponent({
display: flex;
flex-direction: column;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
}
.scaleImage_content{
display: flex;
justify-content: center;
@@ -495,16 +506,34 @@ export default defineComponent({
height: 100%;
position: relative;
.productImg_modal{
position: absolute;
position: relative;
left: 0;
z-index: 9;
.productImg_left{
width: 100%;
.input_box_btnBox{
width: 100%;
}
.input_box{
justify-content: flex-end;
}
.productImg_content_item_generate_btn{
transform: translateY(100%);
position: absolute;
bottom: 0;
top: auto;
width: 100%;
justify-content: space-around;
}
.productImg_content_item_similarity{
padding-bottom: 2.4rem;
display: flex;
input{
width: 5rem;
height: 5rem;
text-align: center;
font-size: 1.8rem;
}
}
}
}
@@ -525,7 +554,7 @@ export default defineComponent({
img{
// width: 50%;
height: 100%;
object-fit: contain;
object-fit: cover;
}
}
.img_operate_block{

16
src/component/HomePage/selectImgList.vue
View File

@@ -1,20 +1,27 @@
<template>
<div class="selectImgListModal" ref="selectImgListModal">
<a-modal
class="selectImgList_modal generalModel"
v-model:visible="selectImgList"
:footer="null"
width="50%"
height="78rem"
:get-container="() => $refs.selectImgListModal"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="selectImgListMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1050"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="selectImgList_content">
@@ -41,6 +48,7 @@
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script lang="ts">
@@ -115,11 +123,11 @@ methods: {
});
</script>
<style lang="less">
<style lang="less" scoped>
.selectImgList_modal {
&.generalModel{
.ant-modal-body {
height: calc(55rem*1.2);
// height: calc(55rem*1.2);
}
}

51
src/component/LoginPage/googleLogin.vue
View File

@@ -9,53 +9,58 @@
export default defineComponent({
name: "login",
setup() {
emits: ['googelLogin'],
setup(props, { emit }) {
const handleCredentialResponse = async (response) => {
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
console.log(response);
let code = response.credential
console.log(code);
// await api.googleLogin(code);
emit('googelLogin',code)
}
onMounted(()=>{
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
// 使用谷歌登录的api
let data = reactive({
scriptSrc:'https://accounts.google.com/gsi/client',
})
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
// 使用谷歌登录的api
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(!existingScript){
const script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client"
document.body.appendChild(script);
window.addEventListener('load', () => {
script.src = data.scriptSrc
script.onload=()=>{
document.body.appendChild(script);
window.google.accounts.id.initialize({
// 主要就是填写client_id
client_id: GOOGLE_CLIENT_ID,
auto_select: false,
callback: handleCredentialResponse,
context:"signin",
// context:"signin",
ux_mode:"popup",
itp_support:true,
});
window.google.accounts.id.renderButton(
document.getElementById("g_id_signin"),
{
type:"standard",
shape:"pill",
type:"icon",//icon为只有一个icon
shape:"circle",
theme:"outline",
text:"signin_with",
size:"medium",
logo_alignment:"left",
size:"large",
logo_alignment:"center",
}
);
})
})
}
}
return {
}
},
})
</script>
<style scoped>
<style scoped lang="less">
.Container{
width: 45%;
:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
justify-content: center;
.nsm7Bb-HzV7m-LgbsSe-Bz112c{
padding: 0;
}
}
}
</style>

57
src/component/LoginPage/phoneLogin.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="Container">
<div class="icon" @click="openphoneModel">
<img src="@/assets/images/loginPage/phone.svg" alt="">
</div>
<phoneModel ref="phoneModel"></phoneModel>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
import phoneModel from "./phoneModel.vue";
export default defineComponent({
name: "login",
components: {
phoneModel
},
setup() {
let phoneDom = reactive({
phoneModel:null
})
const openphoneModel = ()=>{
phoneDom.phoneModel.init()
}
onMounted(()=>{
})
return {
...toRefs(phoneDom),
openphoneModel,
}
},
})
</script>
<style scoped lang="less">
.Container{
position: relative;
.icon{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dadce0;
border-radius: 50%;
cursor: pointer;
&:hover{
background: #f8faff;
}
img{
width: 18px;
height: 18px;
}
}
&.Container:hover{
}
}
</style>

80
src/component/LoginPage/phoneModel.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div ref="phoneModelDom"></div>
<a-modal
class="phoneModel generalModel"
:get-container="() => $refs.phoneModelDom"
v-model:visible="phoneModel"
:footer="null"
:width="pageWidth"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="phoneModelMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="phoneLogin">
<!-- <div id="wx_id_signin"></div> -->
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</template>
<script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
const md5 = require("md5");
export default defineComponent({
components: {
VerificationCodeInput,
},
setup(){
let phoneModel = reactive({
phoneModel:false,
phoneModelMask:true,
pageWidth:'50%',
})
let data = reactive({
loadingShow:false,
})
const init = async ()=>{
phoneModel.phoneModel = true
}
const cancelDsign = ()=>{
phoneModel.phoneModel = false
}
return{
...toRefs(phoneModel),
...toRefs(data),
init,
cancelDsign,
}
},
data() {
return {
};
},
methods: {
},
});
</script>
<style lang="less" scoped>
.phoneLogin {
width: 100%;
height: 100%;
}
</style>

57
src/component/LoginPage/weiXinLogin.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="Container">
<div class="icon" @click="openWeiXinModel">
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
</div>
<weiXinModel ref="weiXinModel"></weiXinModel>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
import weiXinModel from "./weiXinModel.vue";
export default defineComponent({
name: "login",
components: {
weiXinModel
},
setup() {
let weiXinDom = reactive({
weiXinModel:null
})
const openWeiXinModel = ()=>{
weiXinDom.weiXinModel.init()
}
onMounted(()=>{
})
return {
...toRefs(weiXinDom),
openWeiXinModel,
}
},
})
</script>
<style scoped lang="less">
.Container{
position: relative;
.icon{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dadce0;
border-radius: 50%;
cursor: pointer;
&:hover{
background: #f8faff;
}
img{
width: 18px;
height: 18px;
}
}
&.Container:hover{
}
}
</style>

120
src/component/LoginPage/weiXinModel.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<a-modal
class="weiXinModel generalModel"
v-model:visible="weiXinModel"
:footer="null"
:width="pageWidth"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="weiXinModelMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="weiXinLogin">
<div id="wx_id_signin"></div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</template>
<script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
export default defineComponent({
components: {
},
setup(){
let weiXinModel = reactive({
weiXinModel:false,
weiXinModelMask:true,
pageWidth:'50%',
})
let data = reactive({
loadingShow:false,
scriptSrc:'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
})
const init = async ()=>{
weiXinModel.weiXinModel = true
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
await new Promise((resolve, reject) => {
if(!existingScript){
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = data.scriptSrc
document.body.appendChild(script)
script.onload = ()=>{
resolve()
}
}else{resolve()}
})
setWeiXin()
}
const setWeiXin = ()=>{
let http = window.location.href.replace(/^https?:\/\//, '')
http = 'http://localhost:10086'
new WxLogin({
self_redirect: false, //默认为false(保留当前二维码) true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
id: "wx_id_signin", //容器的id
appid: "wxcfb92eb28d6385f5", //应用唯一标识，在微信开放平台提交应用审核通过后获得
scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri: `${http}/login`, //扫完码授权成功跳转到的路径
state: 'weiXin', //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
style: "black", //提供"black"、"white"可选，默认为黑色文字描述
href: "data:text/css;base64,DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZXsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9DQoud2ViX3FyY29kZV9wYW5lbF9hcmVhew0KCWhlaWdodDogMTAwJTsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9" //自定义样式链接，第三方可根据实际需求覆盖默认样式
});
}
const cancelDsign = ()=>{
weiXinModel.weiXinModel = false
}
return{
...toRefs(weiXinModel),
...toRefs(data),
init,
cancelDsign,
}
},
data() {
return {
};
},
methods: {
},
});
</script>
<style lang="less" scoped>
.weiXinLogin {
width: 100%;
height: 100%;
#wx_id_signin{
display: flex;
justify-content: center;
height: 100%;
align-items: center;
}
.web_qrcode_type_iframe{
display: flex;
align-items: center;
justify-content: center;
}
.tpl_for_iframe{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>

70
src/component/Pay/allOrder.vue
View File

@@ -3,7 +3,7 @@
<div class="generalModel_table_search">
<div class="generalModel_state">
<div class="generalModel_state_item">
<span>{{$t('allOrder.Time')}}:</span>
<!-- <span>{{$t('allOrder.Time')}}:</span> -->
<a-range-picker
class="range_picker"
v-model:value="rangePickerValue"
@@ -24,29 +24,34 @@
</div>
</div>
<div class="generalModel_search">
<div
<div class="gallery_btn" @click="searchAllOrderList()">Search</div>
<div class="gallery_btn" style="margin-left: 2rem;" @click="searchAllOrderList()">Export</div>
<!-- <div
class="generalModel_search_item"
@click="searchAllOrderList()"
>
<span
class="icon iconfont icon-sousuo"
></span>
</div>
</div> -->
</div>
</div>
<div class="generalModel_table_content" ref="historyTable">
<a-table
:columns="columns"
:row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
:data-source="collectionList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:pagination="{
showSizeChanger: true,
showSizeChanger: false,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
size:'small',
position:['bottomCenter']
}"
>
<template
@@ -56,17 +61,14 @@
class="operate_list"
v-if="column?.Operations"
>
<!-- <div
v-if="record.orderStatus == '支付成功'"
class="operate_item"
@click="refund(record)"
>
refund
</div> -->
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
</div>
</template>
<template #itemRender="{ type, originalElement }">
{{ type }}
</template>
</a-table>
<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" :columns="columns" :data-source="collectionList" /> -->
</div>
</div>
</template>
@@ -82,19 +84,20 @@ export default defineComponent({
const {t} = useI18n()
const columns: any = computed(() => {
return [
{
{
title: useI18n().t('allOrder.Serial'),
align: "center",
ellipsis: true,
dataIndex: "orderNo",
key: "orderNo",
},
{
title: useI18n().t('allOrder.Title'),
{
title: useI18n().t('allOrder.Time'),
align: "center",
ellipsis: true,
dataIndex: "title",
key: "title",
dataIndex: "createTime",
key: "createTime",
},
{
title: useI18n().t('allOrder.Money'),
@@ -104,7 +107,7 @@ export default defineComponent({
key: "totalFee",
},
{
title: useI18n().t('allOrder.Payment'),
title: useI18n().t('allOrder.PaymentMethods'),
align: "center",
ellipsis: true,
dataIndex: "paymentType",
@@ -117,6 +120,13 @@ export default defineComponent({
dataIndex: "orderStatus",
key: "orderStatus",
},
{
title: useI18n().t('allOrder.OrderType'),
align: "center",
ellipsis: true,
dataIndex: "title",
key: "title",
},
// {
// title: useI18n().t("HistoryPage.Operations"),
@@ -130,6 +140,7 @@ export default defineComponent({
let dataList: any = ref([]);
let rangePickerValue: any = ref([]);
let collectionList: any = ref([]);
let userInfo: any = {};
let currentState = ref({
value:'income',
@@ -144,6 +155,10 @@ export default defineComponent({
value:'expend',
},
])
let selectedRowKey = ref([])
const onSelectChange= (selectedRowKeys:any,)=>{
selectedRowKey.value = selectedRowKeys
}
return {
columns,
dataList,
@@ -154,6 +169,8 @@ export default defineComponent({
currentState,
state,
t,
selectedRowKey,
onSelectChange,
};
},
data() {
@@ -166,19 +183,17 @@ export default defineComponent({
};
},
mounted() {
// let historyTable: any = this.$refs.historyTable;
// this.historyTableHeight = historyTable.clientHeight - 130;
this.getAllOrderList()
nextTick(()=>{
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 130;
})
},
methods: {
init(){
this.currentPage = 1
this.pageSize = 10
nextTick(()=>{
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 100;
})
this.getAllOrderList()
},
//改变页码
changePage(e: any) {
@@ -193,8 +208,8 @@ export default defineComponent({
},
//获取列表
getAllOrderList() {
let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
let startDate: any = this.rangePickerValue?.[0]?this.rangePickerValue[0] : "";
let endDate: any = this.rangePickerValue?.[1]?this.rangePickerValue[1] : "";
let data = {
endTime: endDate,
isIncome: this.currentState.value == 'income'?true:false,
@@ -209,6 +224,7 @@ export default defineComponent({
this.currentPage = 1
this.getAllOrderList()
}else{
rv.content.forEach((item:any) => item.key = item.id);
this.collectionList = rv.content
this.total = rv.total
}
@@ -218,7 +234,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.allOrder_page{
padding: 0 !important;
flex: 1;

9
src/component/Pay/creditsDetail.vue
View File

@@ -3,7 +3,7 @@
<div class="generalModel_table_search">
<div class="generalModel_state">
<div class="generalModel_state_item">
<span>Time:</span>
<!-- <span>Time:</span> -->
<a-range-picker
class="range_picker"
v-model:value="rangePickerValue"
@@ -21,21 +21,22 @@
</a-range-picker>
</div>
<div class="generalModel_state_item">
<span>State:</span>
<!-- <span>State:</span> -->
<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
</div>
<div class="generalModel_search">
<div
<div class="gallery_btn" @click="searchcreditsDetailList()">Search</div>
<!-- <div
class="generalModel_search_item"
@click="searchcreditsDetailList()"
>
<span
class="icon iconfont icon-sousuo"
></span>
</div>
</div> -->
</div>
</div>
<div class="generalModel_table_content" ref="historyTable">

364
src/component/Pay/payMethod.vue Normal file
View File

@@ -0,0 +1,364 @@
<template>
<div class="payMethod" ref="payMethod"></div>
<a-modal
class="generalModel"
:get-container="() => $refs.payMethod"
v-model:visible="payMethodModel"
:footer="null"
:width="pageWidth"
height="auto"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="payMethodModelMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="payMethodContent">
<div class="generalModelTitle">
Purchase points
</div>
<div class="generalModelInfo">
select a payment method
</div>
<div class="payMethod_list">
<label class="payMethod_item">
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
<img src="../../assets/images/homePage/paypal.svg" alt="">
<span>PayPal</span>
</label>
<label class="payMethod_item">
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
<img src="../../assets/images/homePage/bankCard.svg" alt="">
<span>{{ $t('upgradePlan.CreditCard') }}</span>
</label>
<label class="payMethod_item">
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
<img src="../../assets/images/homePage/alipay.svg" alt="">
<span>{{ $t('upgradePlan.Alipay') }}</span>
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
<label>
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
<span>{{ $t('upgradePlan.HongKong') }}</span>
</label>
<label>
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
<span>{{ $t('upgradePlan.MainlandChina') }}</span>
</label>
</div>
</label>
</div>
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label>
<input type="checkbox" v-model="clause">
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
</label>
</div>
<div class="payMethod_payAffirm_btn">
<div class="gallery_btn white" @click="cancelDsign">Cancel</div>
<div class="gallery_btn" @click="payAffirm">Payment</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark" state="true">
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
<div class="mark_loading_title_box">
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
<div class="mark_loading_btn" @click="completePayment">OK</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie ,WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
const md5 = require("md5");
export default defineComponent({
components: {
VerificationCodeInput,
},
emits: ['completePayment'],
setup(prop,{emit}){
const store = useStore();
let payMethod = reactive({
payMethodModel:false,
payMethodModelMask:true,
pageWidth:'50%'
})
let payMethodData = reactive({
modeOfPayment:'paypal',
modeOfPaymentDetail:'ALIPAYHK',
labelDisclaimer:null,//dom
payAffirmData:{} as any,
clause:false,
newWindow:null as any,
isShowMark:false,
})
const init = (data:any)=>{
payMethod.payMethodModel = true
payMethodData.payAffirmData = data
}
const cancelDsign = () => {
payMethod.payMethodModel = false
}
const payAffirm = () => {
if(!payMethodData.clause){
let labelDisclaimer:any = payMethodData.labelDisclaimer
if(!labelDisclaimer.classList.contains('animation')){
labelDisclaimer.classList.add('animation')
setTimeout(() => {
labelDisclaimer.classList.remove('animation')
}, 1000);
}
return
}
let httpsUrl
let url = window.location.href
let payAffirmData = payMethodData.payAffirmData
let data = {
autoRenewal:true,//false为不自动续费
productName:payAffirmData.productName,
quantity:payAffirmData.quantity?payAffirmData.quantity:1,
returnUrl:url,
subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
}
if(payMethodData.modeOfPayment == 'paypal'){
httpsUrl = Https.httpUrls.payPaypal
}else if (payMethodData.modeOfPayment == 'stripe') {
httpsUrl = Https.httpUrls.payStripe
}else{
httpsUrl = Https.httpUrls.payAlipayHK
}
Https.axiosPost(httpsUrl,data).then(
(rv: any) => {
var width = 800;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
let herf
if(payMethodData.modeOfPayment == 'paypal'){
// 在新窗口中写入内容
herf = rv.approve;
// payMethodData.newWindow.location.href = rv.approve;
}else if(payMethodData.modeOfPayment == 'stripe'){
herf = rv
// payMethodData.newWindow.location.href = rv
}else{
let data = JSON.parse(rv)
herf = `${data.url}?${data.alipay_order_string}`
// payMethodData.newWindow.location.href = herf;
}
if(payMethodData.newWindow){
payMethodData.newWindow.location.href = herf
}else{
// window.open(herf, '_blank');
window.location.href=herf;
}
payMethodData.isShowMark = true
}
).catch(res=>{
});
}
const setPaidBack = ()=>{
payMethod.payMethodModel = false
payMethodData.isShowMark = false
payMethodData.clause = false
payMethodData.modeOfPayment = 'paypal'
payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
}
const completePayment = ()=>{
setPaidBack()
emit('completePayment')
}
return{
store,
...toRefs(payMethod),
...toRefs(payMethodData),
init,
cancelDsign,
payAffirm,
setPaidBack,
completePayment,
}
},
data() {
return {
};
},
methods: {
turnToWindow(url:any) {
window.open(url);
},
},
});
</script>
<style lang="less" scoped>
.payMethod {
.payMethodContent{
display: flex;
flex-direction: column;
align-items: center;
width: 60rem;
margin: 0 auto;
position: relative;
.generalModelTitle,.generalModelInfo{
width: 100%;
}
.payMethod_list{
margin-bottom: 4rem;
display: flex;
flex-direction: column;
width: 100%;
>label{
display: flex;
align-items: center;
padding: 0 2rem;
margin-bottom: 3rem;
cursor: pointer;
border: 2px solid #EFEFEF;
border-radius: 2rem;
height: 8rem;
width: 100%;
img{
margin: 0rem 2rem;
// max-width: 4rem;
width: 4rem;
}
.payAffirm_detail{
margin-left: auto;
display: flex;
>label{
cursor: pointer;
display: flex;
align-items: center;
margin-right: 1rem;
span{
margin-left: .5rem;
}
}
}
}
>label:last-child{
margin: 0;
}
}
.payMethod_payAffirm_clause{
margin-bottom: 4rem;
label{
cursor: pointer;
input{
margin-right: 1rem;
cursor: pointer;
vertical-align: middle;
}
span{
vertical-align: top;
a{
color: #000;
text-decoration: underline;
}
}
}
&.animation{
animation: shake .3s linear;
@keyframes shake {
0%{
transform: translateX(0px);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(10px);
}
75%{
transform: translateX(-10px);
}
100%{
transform: translateX(0px);
}
}
}
}
.payMethod_payAffirm_btn{
display: flex;
justify-content: space-between;
width: 100%;
>div{
width: 29rem;
}
}
}
.mark_loading{
position: absolute;
z-index: 2;
background: #fff;
.mark_loading_title{
font-size: 3rem;
// text-decoration: underline;
font-weight: 600;
margin-bottom: 2rem;
// color: #fff;
}
.mark_loading_intro{
color: rgba(0, 0, 0, 0.6);
font-size: 1.4rem;
margin-bottom: 2rem;
text-align: center;
width: 80%;
}
.mark_loading_title_box{
display: flex;
}
.mark_loading_btn,.mark_loading_btn2{
// border: #000;
// color: #fff;
display: flex;
margin-top: 10px;
text-align: center;
border: 2px solid;
padding: 0 20px;
border-radius: 10px;
cursor: pointer;
padding: .3rem 4rem;
background: #39215b;
color: #fff;
border: none;
margin: 0 2rem;
align-items: center;
}
.mark_loading_btn2{
border: 2px solid #000;
color: #000;
background: rgba(0,0,0,0);
}
}
}
</style>

55
src/component/Pay/payOrder.vue
View File

@@ -1,6 +1,7 @@
<template>
<div ref="payOrder_modal"></div>
<a-modal
class="modal_component payOrder_modal generalModel_modal"
class="modal_component payOrder_modal generalModel"
v-model:visible="showPayOrder"
:footer="null"
width="78%"
@@ -8,12 +9,19 @@
:centered="true"
:closable="false"
wrapClassName="#app"
:get-container="() => $refs.payOrder_modal"
:keyboard="false"
>
<div class="closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="payOrder_page">
<div class="payOrder_page_title">
<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">{{ $t('payOrder.OrderInformation') }}</div>
@@ -65,16 +73,19 @@ export default defineComponent({
methods: {
init() {
this.showPayOrder = true;
this.setState('paypal')
},
setState(str:any){
this.presentState = str
let setInit:any
if(str == 'paypal'){
setInit = this.$refs.allOrder
}else{
setInit = this.$refs.creditsDetail
}
setInit.init()
nextTick(()=>{
this.presentState = str
let setInit:any
if(str == 'paypal'){
setInit = this.$refs.allOrder
}else{
setInit = this.$refs.creditsDetail
}
setInit.init()
})
},
cancelDsign(){
this.showPayOrder = false
@@ -82,16 +93,19 @@ export default defineComponent({
},
});
</script>
<style lang="less">
.payOrder_modal {
.closeIcon {
z-index: 2;
}
<style lang="less" scoped>
:deep(.payOrder_modal) {
>.ant-modal-content{
>.ant-modal-body{
padding: 6rem;
}
}
.payOrder_page {
width: 100%;
height: 100%;
padding: 9rem;
overflow: hidden;
display: flex;
flex-direction: column;
// min-width: 1440px;
position: relative;
.payOrder_page_title{
@@ -126,9 +140,10 @@ export default defineComponent({
}
}
.payOrder_table_content{
height: 100%;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
flex-direction: column;
}
}
}

216
src/component/Pay/refund.vue
View File

@@ -1,216 +0,0 @@
<template>
<a-modal
class="modal_component refund_reason"
v-model:visible="showRefundReason"
:footer="null"
width="50%"
:maskClosable="false"
:mask="false"
:centered="true"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
</div>
<div class="modal_title_text">
Refund Reason
</div>
<div class="reason">
<label>
<div>
<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
<span>Dislike</span>
</div>
</label>
<label>
<div>
<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
<span>Rests</span>
</div>
<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
</label>
</div>
<div class="subitOkPreviewBtn" @click="setReason">OK</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
},
setup() {
let showRefundReason: any = ref(false);
let record: any = ref();//订单编号
let reason: any = ref('noLike');//原因
let reasonTextarea: any = ref();//原因
let loadingShow: any = ref(false);
let { t } = useI18n();
return {
showRefundReason,
record,
reason,
reasonTextarea,
loadingShow,
t,
};
},
data() {
return {
};
},
mounted() {},
methods: {
cancelRefundreason(){//关闭退款页面
this.record = ''
this.showRefundReason = false;
},
//删除分组
// deleteGroup(record:any,index:number){
// let deleteGroupFun = (id:any,index:number) =>{
// let data = {
// userGroupId:id
// }
// Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
// (rv: any) => {
// message.success(this.t('HistoryPage.jsContent1'))
// this.collectionList.splice(index,1)
// }
// );
// }
// Modal.confirm({
// title: this.t('HistoryPage.jsContent2'),
// icon: createVNode(ExclamationCircleOutlined),
// okText: 'Yes',
// cancelText: 'No',
// centered:true,
// mask:false,
// onOk() {
// deleteGroupFun(record.id,index)
// }
// });
// },
refund(record: any) {
// this.$router.push({name:'home',params: {id:record.id}})
this.record = record
this.showRefundReason = true
},
getReasonCategory(){
if(this.reason == 'Rests'){
}else{
this.reasonTextarea = ''
}
},
setReason(){
let reason = this.reason
this.loadingShow = true
if(this.reason == 'Rests'){
reason = this.reasonTextarea?this.reasonTextarea:this.reason
}
// return
let httpsUrl = Https.httpUrls.tradeRefundAlipay
if(this.record.paymentType == "PayPal"){
httpsUrl = Https.httpUrls.tradeRefundPaypal
}
Https.axiosPost(
httpsUrl + `/${this.record.orderNo}/${reason}`,
{}
).then((rv: any) => {
this.loadingShow = false
this.showRefundReason = false
})
.catch((res) => {});
},
},
});
</script>
<style lang="less">
.refund_reason{
// max-width: 1200px ;
// max-width: 1150px ;
.ant-modal-content {
border-radius: calc(1rem * 1.2);
overflow: hidden;
.ant-modal-header {
background-color: #fff;
border-bottom: none;
}
.ant-modal-body {
// height: calc(65vh - 6.4rem);
height: calc(65rem * 1.2);
}
//进度完成字体颜色
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
color: #000;
}
.ant-progress-circle .ant-progress-text {
color: rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem * 1.2);
}
}
}
.modal_component.refund_reason{
.ant-modal-content {
.ant-modal-body {
// height: calc(65vh - 6.4rem);
padding: 3rem;
height: calc(40rem * 1.2);
}
}
}
</style>
<style lang="less">
.refund_reason{
.reason{
height: calc(27rem * 1.2);
display: flex;
flex-direction: column;
padding: 0 3rem;
font-size: 1.6rem;
label{
display: flex;
align-items: flex-start;
flex-direction: column;
overflow: hidden;
div{
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
input,span{
cursor: pointer;
}
span{
margin: 0 1rem;
}
textarea{
flex: 1;
width: 100%;
outline-color:#767676;
resize: none;
}
textarea:focus-visible {
border-color: #767676;
}
}
}
.subitOkPreviewBtn{
margin-top: 1rem;
}
}
</style>

37
src/component/WorksPage/newScaleImage.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="newScaleImageModal"></div>
<a-modal
class="newScaleImage_modal generalModel"
v-model:visible="scaleImage"
:footer="null"
:get-container="() => $refs.newScaleImageModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -13,7 +15,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
<!-- <div class="collection_closeIcon" @click.stop="download()">
<i class="fi fi-rr-down-to-line"></i>
@@ -692,8 +698,20 @@ export default defineComponent({
},
});
</script>
<style lang="less">
.newScaleImage_modal {
--margin: 3rem;
--padding: 2rem;
--border-color: #c4c4c4;
--background-color:#f5f5f5;
--count: 50;
--snap-size: 10rem;
--offset: 2;
--auther_wh: 8rem;
--content-height: 60rem;
}
</style>
<style lang="less" scoped>
.newScaleImage_modal {
.ant-modal-body{
padding: 9rem;
@@ -704,11 +722,6 @@ export default defineComponent({
display: flex;
&.newScaleImage_page::-webkit-scrollbar{display: none;}
}
--margin: 3rem;
--padding: 2rem;
--border-color: #c4c4c4;
--background-color:#f5f5f5;
.scaleImage_chunk_item{
background: var(--background-color);
padding: var(--padding);
@@ -833,7 +846,6 @@ export default defineComponent({
position: sticky;
top: 0;
.newScaleImage_content_right{
--content-height: 60rem;
display: flex;
width: 100%;
flex-wrap: wrap;
@@ -876,9 +888,7 @@ export default defineComponent({
}
}
--count: 50;
--snap-size: 10rem;
--offset: 2;
.nav_centent{
// width: auto;
display: flex;
@@ -934,7 +944,7 @@ export default defineComponent({
.newScaleImage_right_content{
display: flex;
flex-direction: column;
height: var(--content-height);
// height: var(--content-height);
.detail_left_right_item_click{
cursor: pointer;
i{
@@ -1247,7 +1257,8 @@ export default defineComponent({
width: 100%;
display: flex;
margin-top: var(--padding);
--auther_wh: 8rem;
.detail_right_auther_img_item{
text-align: center;
width: var(--auther_wh);

36
src/component/WorksPage/newScaleImageMobile.vue
View File

@@ -1,9 +1,11 @@
<template>
<!-- width="78%" -->
<div ref="newScaleImageMobileModal"></div>
<a-modal
class="newScaleImageMobile_modal generalModel"
v-model:visible="scaleImage"
:footer="null"
:get-container="() => $refs.newScaleImageMobileModal"
width="100%"
:maskClosable="false"
:centered="true"
@@ -14,7 +16,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
<!-- <div class="collection_closeIcon" @click.stop="download()">
<i class="fi fi-rr-down-to-line"></i>
@@ -608,8 +614,20 @@ export default defineComponent({
},
});
</script>
<style lang="less">
.newScaleImageMobile_modal {
--margin: 3rem;
--padding: 2rem;
--border-color: #c4c4c4;
--background-color:#f5f5f5;
--content-height: 60rem;
--auther_wh: 8rem;
--count: 50;
--snap-size: 10rem;
--offset: 2;
}
</style>
<style lang="less" scoped>
.swiper{
padding-bottom: 2rem;
}
@@ -640,10 +658,7 @@ export default defineComponent({
&.newScaleImageMobile_page::-webkit-scrollbar{display: none;}
}
--margin: 3rem;
--padding: 2rem;
--border-color: #c4c4c4;
--background-color:#f5f5f5;
.scaleImage_chunk_item{
// background: var(--background-color);
padding: var(--padding) 0;
@@ -763,7 +778,6 @@ export default defineComponent({
top: 0;
height: 55vh;
.newScaleImageMobile_content_right{
--content-height: 60rem;
display: flex;
width: 100%;
flex-wrap: wrap;
@@ -791,9 +805,7 @@ export default defineComponent({
}
}
--count: 50;
--snap-size: 10rem;
--offset: 2;
.nav_centent{
// width: auto;
display: flex;
@@ -849,7 +861,7 @@ export default defineComponent({
.newScaleImageMobile_right_content{
display: flex;
flex-direction: column;
height: var(--content-height);
// height: var(--content-height);
.detail_left_right_item_click{
cursor: pointer;
i{
@@ -1163,7 +1175,7 @@ export default defineComponent({
width: 100%;
display: flex;
margin-top: var(--padding);
--auther_wh: 8rem;
.detail_right_auther_img_item{
text-align: center;
width: var(--auther_wh);

8
src/component/WorksPage/publish.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="publishModal"></div>
<a-modal
class="publish_modal generalModel"
v-model:visible="publish"
:footer="null"
:get-container="() => $refs.publishModal"
width="50%"
:maskClosable="false"
:centered="true"
@@ -12,7 +14,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="publish_content">

275
src/component/mainPage/signUp/index.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<div class="signUp" v-if="signUp">
<div class="selectSignUp" v-show="!isSelectSignUp">
<div class="back" @click="close">
&lt; BACK
</div>
<div class="title">Choose your subscription plan</div>
<div class="introduce" @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</div>
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList" :key="item">
<div class="product_signUp_box">
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.info }}</div>
<div class="detail">{{ item.detail }}</div>
<div class="highlight">{{ item.highlight }}</div>
<div class="gallery_btn gallery_btn_radius" @click="createAccount">Create account</div>
</div>
<ul class="product_detail">
<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
</ul>
</div>
</div>
</div>
<div class="introductDetail" v-show="isSelectSignUp">
<div class="title">Choose your subscription plan</div>
<div class="gallery_list introductList">
<div class="gallery_item" v-for="item in introductList" :key="item">
<div class="itemIcon">
<img :src="item.img" alt="">
</div>
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.info }}</div>
</div>
</div>
<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
</div>
<registerModel ref="registerModel"></registerModel>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import registerModel from './registerModel.vue'
export default defineComponent({
components: {
registerModel,
},
name: "login",
emits: ['close'],
setup(props, { emit }) {
let dom = reactive({
registerModel:null
})
let data = reactive({
signUp:false,
isSelectSignUp:false,
productList:[
{
title:"Personal version",
info:"Try for 5 days",
detail:"AI Fashion Design Assistant",
highlight:"Free 5-day trial",
detailList:[
'AI Fashion Design Assistant',
'Basic 3D service functions',
'Individual Credit Limit for Independent Use',
'Works can be shared in public galleries',
'Support monthly/annual payment options',
'Suitable for individual creators and freelance designers to use'
]
},{
title:"Education Edition",
info:"XXX / Year",
detail:"Multi user management system for universities",
highlight:"Free 5-day trial",
detailList:[
'Multi user management system for universities',
'Credit limits are shared across the entire school',
'AI assisted design teaching function',
'Support sketch creativity and design inspiration teaching',
'Basic 3D design functions',
]
},{
title:"Enterprise Edition",
info:"XXX / Year",
detail:"Enterprise level multi person collaboration system",
highlight:"Free 5-day trial",
detailList:[
'Enterprise level multi person collaboration system',
'Internal Credit Sharing within Enterprises',
'Brand DNA management system, customizable brand Exclusive design preferences',
'Cloud based design generation and management',
'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
'Enterprise level data security assurance',
'Suitable for fashion design teams and brands to use',
]
},
],
introductList:[
{
img:'/image/homeIntroduct/introduct1.png',
title:'Quickly generate images',
info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
},{
img:'/image/homeIntroduct/introduct2.png',
title:'Generate plan',
info:'Upload inspiration boards, colors, fabric printing patterns, and sketches to generate unlimited design suggestions',
},{
img:'/image/homeIntroduct/introduct3.png',
title:'Simple operation',
info:'Just a few clicks to save and retrieve your design',
},{
img:'/image/homeIntroduct/introduct4.png',
title:'Cloud',
info:'After subscribing, you can access it anytime and anywhere through the cloud system',
},{
img:'/image/homeIntroduct/introduct5.png',
title:'Usage',
info:'Simplified operation, it only takes about ten minutes to learn how to use it',
},{
img:'/image/homeIntroduct/introduct6.png',
title:'Email',
info:'By info@code-create.com.hk Contact us to learn more',
},
]
})
const init = ()=>{
data.signUp = true
}
const close = ()=>{
data.signUp = false
emit('close')
}
const createAccount = ()=>{
if(window.innerWidth < 768){
dom.registerModel.pageWidth = '100%'
}
dom.registerModel.init()
}
onMounted(()=>{
})
return {
...toRefs(dom),
...toRefs(data),
init,
close,
createAccount,
}
},
})
</script>
<style scoped lang="less">
.signUp{
flex: 1;
padding: 0rem 4rem;
.back{
font-size: 1.6rem;
margin-bottom: 3rem;
}
.back,.introduce{
cursor: pointer;
}
.title,.introduce{
font-weight: 600;
margin-bottom: 4rem;
}
.title{
font-size: 3rem;
}
.introduce{
font-size: 2.4rem;
text-decoration: underline;
}
.gallery_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.gallery_item{
width: calc(33.333% - 3rem);
.title,.info,.highlight{
font-weight: 600;
}
.title{
font-size: 2rem;
margin-bottom: 10px;
}
.info,.detail,.gallery_btn{
font-size: 1.6rem;
}
.detail{
margin-top: 6rem;
margin-bottom: 7.6rem;
}
.highlight{
font-size: 2.4rem;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
border-radius: 0px 2.8rem 0px 1rem;
padding: 1rem 2rem;
}
.gallery_btn{
line-height: 6rem;
width: 100%;
padding: 0;
}
}
}
.product_list{
.gallery_item{
.product_signUp_box{
border-radius: 3rem;
border: 2px solid #000;
padding: 3rem;
position: relative;
}
.product_detail{
margin-top: 4rem;
padding-left: 20px;
li{
list-style: disc;
margin-bottom: 10px;
}
li:last-child{
margin-bottom: 0;
}
}
}
}
.introductDetail{
>.title{
margin-top: 6rem;
text-align: center;
}
.introductList{
width: 130rem;
margin: 8rem auto 0rem auto;
}
.gallery_item{
margin-bottom: 6rem;
.itemIcon{
width: 8rem;
height: 8rem;
border-radius: 2rem;
background: #000;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.title{
text-align: center;
}
.info{
font-weight: 500;
height: 9rem;
}
>div{
margin-bottom: 2rem;
}
>div:last-child{
margin-bottom: 0;
}
}
.gallery_btn{
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
}
</style>

151
src/component/Login/registerModel.vue → src/component/mainPage/signUp/registerModel.vue
View File

@@ -1,6 +1,8 @@
<template>
<div ref="register"></div>
<a-modal
class="registerModel_modal generalModel"
class="register generalModel"
:get-container="() => $refs.register"
v-model:visible="registerModel"
:footer="null"
:width="pageWidth"
@@ -10,11 +12,16 @@
:mask="registerModelMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1050"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<!-- <i class="fi fi-rr-cross-small"></i> -->
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="login_page">
@@ -29,7 +36,7 @@
'login_active',
]"
>
Visitor Register AiDA 3.0
Register for AiDA 3.0
</div>
</div>
<!-- 账号密码登录 start -->
@@ -135,9 +142,15 @@
<span>I agree to all Term, Privacy Policy and Fees</span>
</label>
</div>
<div class="thirdPartyLogin marign_top30">
<googleLogin @googelLogin="googelLogin"></googleLogin>
<weiXinLogin></weiXinLogin>
<phoneLogin></phoneLogin>
</div>
<div
class="login_submit_button marign_top40" :state="emailStap"
class="login_submit_button marign_top40"
style="width: 100%;"
:state="emailStap"
@click="submitPerLogin()"
>
Register
@@ -233,13 +246,16 @@ import { isEmail } from "@/tool/util";
import { setCookie ,WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import googleLogin from "@/component/LoginPage/googleLogin.vue";
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
const md5 = require("md5");
export default defineComponent({
components: {
VerificationCodeInput,
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
},
setup(){
let timer:any = 0;
@@ -247,7 +263,7 @@ export default defineComponent({
const store = useStore();
let register = reactive({
registerModel:false,
registerModelMask:false,
registerModelMask:true,
pageWidth:'50%'
})
return{
@@ -283,6 +299,8 @@ export default defineComponent({
methods: {
init(){
this.registerModel = true
this.emailLastStepFun()
},
changeLoginType(type: string) {
this.loginType = type;
@@ -451,7 +469,72 @@ export default defineComponent({
changePasswordType(){
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
},
//微信登录
wechatLogin(value:any) {
let data = {
code : value.code
}
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
.then((rv: any) => {
this.setSuccessLogin(rv)
})
.catch((res) => {});
},
//谷歌登录
googelLogin(value:any) {
let data = {credential : value}
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
.then((rv: any) => {
this.setSuccessLogin(rv)
})
.catch((res) => {});
},
setSuccessLogin(rv:any){
if (rv) {
if (rv.systemUser == 4) {
rv.systemUser = 1;
}
this.createTimer();
let isTest = rv.systemUser == 3 ? true : false;
let isBeginner = rv.isBeginner == 1 ? true : false;
let token = rv.token;
setCookie("isMurmur", false);
setCookie("token", token);
setCookie("isTest", isTest);
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.store.commit("setSystemUser", rv.systemUser);
let obj: any = {
avatar: rv.avatar,
followeeCount: rv.followeeCount,
followerCount: rv.followerCount,
};
this.store.commit("setUserInfo", obj);
if (rv.systemUser == 0) {
this.turnToHomePage("/Square");
} else {
if (window.innerWidth < 768) {
message.info(
"If you need to design, please log in using an iPad or computer."
);
this.turnToHomePage("/Square");
} else {
this.turnToHomePage("/home");
}
}
sessionStorage.setItem(
"isTimeOne",
JSON.stringify(false)
); //是否需要公告 提示 弹窗
let randomNum: any =
Math.floor(Math.random() * 9000000000000000) +
1000000000000000;
sessionStorage.setItem("sessionId", randomNum);
sessionStorage.setItem("record", JSON.stringify([]));
}
},
//邮箱登录提交
submitEmailLogin(emailVerifyCode: any) {
let data = {
@@ -465,27 +548,7 @@ export default defineComponent({
};
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
(rv: any) => {
if (rv) {
if(rv.systemUser == 4){
rv.systemUser = 1
}
this.createTimer();
let isTest = rv.systemUser == 3?true:false
let isBeginner = rv.isBeginner == 1?true:false
let token = rv.token;
setCookie("isMurmur", false);
setCookie("token", token);
setCookie("isTest", isTest);
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.store.commit("setSystemUser",rv.systemUser)
sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
sessionStorage.setItem('sessionId', randomNum);
sessionStorage.setItem('record', JSON.stringify([]))
this.$router.go(0);
}
this.setSuccessLogin(rv)
}
).catch(res=>{
});
@@ -559,8 +622,8 @@ export default defineComponent({
},
});
</script>
<style lang="less">
.registerModel_modal{
<style lang="less" scoped>
:deep(.register){
@media (max-width: 768px) {
// box-shadow: none;
// height: 100%;
@@ -576,9 +639,7 @@ export default defineComponent({
}
}
}
}
</style>
<style lang="less" scoped>
.login_page {
@@ -699,15 +760,17 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #DFDFDF;
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
font-size: 1.4rem;
box-sizing: border-box;
outline: none;
transition: all .3s;
&:hover{
border: 0.1rem solid #000;
}
&::placeholder {
color: #a5b0c2;
}
@@ -760,9 +823,13 @@ export default defineComponent({
font-weight: 500;
color: #ffffff;
cursor: pointer;
&[state="2"]{
cursor: not-allowed;
transition: all .3s;
&:hover{
background: #3C3C3C;
}
&[state="2"] {
cursor: not-allowed;
}
}
.login_text {
font-size: 1.6rem;
@@ -873,7 +940,13 @@ export default defineComponent({
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
display: flex;
justify-content: flex-start;
>div{
margin-right: 1rem;
}
}
.tip_content {
font-size: 1.3rem;
font-weight: bold;

8
src/component/modules/generalMiniCanvas.vue
View File

@@ -70,12 +70,6 @@
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
@@ -85,7 +79,7 @@ import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
components: {
creditsDetail,
allOrder,liquefaction
liquefaction
},
emits: ['submitBase64Data'],
props: {

8
src/component/modules/liquefaction.vue
View File

@@ -1,8 +1,10 @@
<template>
<div ref="liquefactionModal"></div>
<a-modal
class="liquefaction generalModel"
v-model:visible="liqufeaction"
:footer="null"
:get-container="() => $refs.liquefactionModal"
width="78%"
:maskClosable="false"
:centered="true"
@@ -12,7 +14,11 @@
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>