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

2.6发版合并

Browse Source
This commit is contained in:
X1627315083
2025-02-05 10:09:53 +08:00
parent 1f6dd7bdb9 fe47f4882a
commit f5e2b689a1
177 changed files with 15452 additions and 9320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@@ -7,5 +7,6 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
</style>

3
src/assets/images/homePage/bankCard.svg
View File

@@ -1,3 +0,0 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4H0v-.75C0 2.56.448 2 1 2h14c.552 0 1 .56 1 1.25V4zm0 2.5V13a1 1 0 01-1 1H1a1 1 0 01-1-1V6.5h16zM4 10a1 1 0 100 2h1a1 1 0 100-2H4z" fill="#000"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 281 B

BIN
src/assets/images/homePage/home-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

1
src/assets/images/homePage/stripe.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735265169559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1495" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M802.158921 871.935232h-580.317842c-63.174813 0-114.374813-51.2-114.374812-114.374812V177.31934c0-63.174813 51.2-114.374813 114.374812-114.374812h580.317842c63.174813 0 114.374813 51.2 114.374812 114.374812v580.317841c0 63.098051-51.2 114.298051-114.374812 114.298051z" fill="#009BF1" p-id="1496"></path><path d="M469.627586 350.647076c0-25.638381 21.416492-35.54063 55.728936-35.540629 49.971814 0 113.376912 15.275562 163.271964 42.21889V202.804198c-54.423988-21.723538-108.771214-30.013793-163.195203-30.013793-133.181409 0-221.917841 69.546027-221.917841 185.763118 0 181.694753 249.552024 152.295052 249.552024 230.668666 0 30.397601-26.329235 40.146327-62.944527 40.146327-54.347226 0-124.507346-22.414393-179.622189-52.351425v147.919641c61.025487 26.252474 122.895352 37.306147 179.545427 37.306147 136.482159 0 230.515142-58.722639 230.515142-176.782009-0.076762-195.972414-250.933733-160.892354-250.933733-234.813794" fill="#FFFFFF" p-id="1497"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/icon/details_color.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 639 B

BIN
src/assets/images/icon/details_elements.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/icon/details_print.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 748 B

BIN
src/assets/images/icon/details_sketch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 498 B

BIN
src/assets/images/loginPage/aida_logo_centent.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 89 KiB

BIN
src/assets/images/loginPage/aida_logo_centent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

18
src/assets/images/loginPage/gmailIcon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_537_3867)">
<mask id="mask0_537_3867" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<path d="M50 0H0V50H50V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_537_3867)">
<path d="M10.4143 25.186C10.4143 23.552 10.689 21.9857 11.1769 20.5169L2.61091 14.0449C0.887829 17.5063 -0.00607483 21.3202 3.10708e-05 25.186C3.10708e-05 29.1896 0.937897 32.9657 2.60603 36.3185L11.1696 29.8355C10.6695 28.3363 10.4155 26.7663 10.4143 25.186Z" fill="#FBBC05"/>
</g>
<path d="M25.4614 10.3262C28.874 10.3195 32.1846 11.4894 34.834 13.6388L42.2405 6.32383C37.7276 2.43915 31.9416 0.0366211 25.4614 0.0366211C15.4001 0.0366211 6.75174 5.72914 2.61133 14.045L11.1834 20.517C13.1568 14.5884 18.784 10.3256 25.4639 10.3256" fill="#EA4335"/>
<path d="M25.5704 39.7145C18.8551 39.7145 13.2004 35.4785 11.2148 29.5859L2.60547 36.0189C6.76603 44.2835 15.4566 49.9382 25.5704 49.9382C31.8094 49.9382 37.7663 47.7724 42.2395 43.7102L34.0649 37.5291C31.7605 38.949 28.8553 39.7151 25.5679 39.7151" fill="#34A853"/>
<path d="M49.9922 24.9489C49.9922 23.4723 49.7584 21.8809 49.4109 20.4043H25.5674V30.0602H39.2904C38.6065 33.3526 36.7393 35.8838 34.0662 37.53L42.2389 43.7111C46.9374 39.4477 49.9922 33.0958 49.9922 24.9489Z" fill="#4285F4"/>
</g>
<defs>
<clipPath id="clip0_537_3867">
<rect width="50" height="50" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
src/assets/images/loginPage/phone.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_262_1244)">
<circle cx="19" cy="19" r="19" fill="black"/>
<g clip-path="url(#clip1_262_1244)">
<path d="M22.3777 20.5705C21.6009 20.5705 21.0096 21.2797 20.3004 21.2797C18.7142 20.3709 17.4199 19.0292 16.568 17.412C16.568 16.6352 17.311 16.3482 17.311 15.47C17.311 14.5917 15.1999 11.3999 14.3386 11.3999C13.4772 11.3999 11.3999 12.9705 11.3999 14.4062C11.3999 18.5946 18.9323 26.5999 23.6613 26.5999C25.2425 26.4478 26.4836 25.1782 26.5999 23.5936C25.5015 22.2123 24.0389 21.1654 22.3777 20.5705Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="clip0_262_1244">
<rect width="38" height="38" fill="white"/>
</clipPath>
<clipPath id="clip1_262_1244">
<rect width="15.2" height="15.2" fill="white" transform="translate(11.3999 11.3999)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 884 B

11
src/assets/images/loginPage/weiXinIcon.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_262_1241)">
<path d="M12.5565 12.6113C11.8955 12.6113 11.2349 13.0519 11.2349 13.713C11.2349 14.374 11.8955 14.8146 12.5565 14.8146C13.2176 14.8146 13.6582 14.374 13.6582 13.713C13.6582 13.0519 13.2176 12.6113 12.5565 12.6113ZM21.5058 19.0001C21.0653 19.0001 20.6522 19.4681 20.6522 19.8812C20.6522 20.3492 21.0927 20.7623 21.5058 20.7623C22.1664 20.7623 22.6075 20.3218 22.6075 19.8812C22.6075 19.4407 22.1669 19.0001 21.5058 19.0001ZM18.6694 14.8146C19.3305 14.8146 19.7711 14.3466 19.7711 13.713C19.7711 13.0793 19.3305 12.6113 18.6694 12.6113C18.0084 12.6113 17.3478 13.0519 17.3478 13.713C17.3478 14.374 18.0088 14.8146 18.6694 14.8146ZM26.2971 19.0001C25.8565 19.0001 25.4434 19.4681 25.4434 19.8812C25.4434 20.3492 25.884 20.7623 26.2971 20.7623C26.9577 20.7623 27.3987 20.3218 27.3987 19.8812C27.3987 19.4407 26.9581 19.0001 26.2971 19.0001Z" fill="#28C445"/>
<path d="M19.0002 0C8.50875 0 0 8.50875 0 19.0002C0 29.4917 8.50875 38 19.0002 38C29.4917 38 38 29.4913 38 19.0002C38 8.50921 29.4913 0 19.0002 0ZM15.393 23.8738C14.2913 23.8738 13.4102 23.6538 12.364 23.4058L9.33497 24.948L10.1886 22.2767C8.0133 20.735 6.69162 18.7244 6.69162 16.329C6.69162 12.116 10.6297 8.8116 15.393 8.8116C19.6613 8.8116 23.4337 11.4549 24.1771 15.0073C23.9017 14.9799 23.6263 14.9524 23.3509 14.9524C19.2203 15.0073 15.9712 18.1191 15.9712 21.9743C15.9712 22.6075 16.0815 23.2132 16.2466 23.8194C15.9712 23.8468 15.6684 23.8743 15.393 23.8743V23.8738ZM28.2803 26.9577L28.9409 29.1605L26.573 27.8388C25.7193 28.0589 24.8382 28.2794 23.9571 28.2794C19.799 28.2794 16.522 25.4155 16.522 21.8632C16.4946 18.3387 19.7711 15.4748 23.9017 15.4748C28.0323 15.4748 31.3088 18.3661 31.3088 21.8906C31.3088 23.8733 30.0146 25.6356 28.2798 26.9572L28.2803 26.9577Z" fill="#28C445"/>
</g>
<defs>
<clipPath id="clip0_262_1241">
<rect width="38" height="38" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1322
src/assets/style/style.css
View File

File diff suppressed because it is too large Load Diff

1442
src/assets/style/style.less
View File

File diff suppressed because it is too large Load Diff

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

@@ -4,11 +4,71 @@
<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="uploadUrl?uploadUrl:userDetail.avatar" alt="">
<div class="upload_box">
<i class="fi fi-rr-camera"></i>
<a-upload
class="upload"
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:customRequest="function(){}"
:maxCount="1"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
>
<!-- <i class="fi fi-br-upload"></i> -->
<!-- <img :src="uploadUrl?uploadUrl:userDetail.avatar" alt=""> -->
</div>
</a-upload>
</div>
</div>
<div class="content_item_user_left_detail">
<div class="modal_title_text">
<div class="label">
<div class="content">
<div v-if="!isEditUserName">{{ userDetail.userName }}</div>
<input v-else type="text" v-model="editUserName">
</div>
<div class="icon">
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
</div>
<span class="Modifiable" v-if="userDetail.usernameModify > 0 && isEditUserName">{{ $t('account.remainingModifications') }}{{ userDetail.usernameModify }}/5</span>
<span class="Modifiable notModifiable" v-else-if="isEditUserName">{{ $t('account.notModifiable') }} {{ userDetail.usernameModify }}/5</span>
</div>
<div class="label">
<span>{{$t('account.email')}}: </span>
<div class="content">
<div v-if="!isEditEmail">{{ userDetail.email }}</div>
<input v-else type="text" :value="editEmail">
</div>
<div class="icon">
<i v-if="!isEditEmail" class="fi fi-rr-edit" @click="openEdit('email')"></i>
<i v-else class="fi fi-br-check" @click="editChek('email')"></i>
</div>
</div>
</div>
<div class="content_item_user_left_detail_bottom">
<div>
<span>{{$t('account.Follow')}}：</span>{{ userDetail.followeeCount }}
</div>
<div>
<span>{{$t('account.Fans')}}：</span>{{ userDetail.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>
@@ -28,6 +88,8 @@
</div>
</div>
</div>
<bindEmail ref="bindEmail"></bindEmail>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
</div>
</template>
<script lang="ts">
@@ -36,24 +98,36 @@ import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useRouter,useRoute } from 'vue-router'
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import bindEmail from "@/component/HomePage/bindEmail.vue";
import Cropper from '@/component/HomePage/Cropper.vue'
export default defineComponent({
components:{
bindEmail,Cropper
},
setup() {
const {t} = useI18n()
const store = useStore();
let userDetail= computed(()=>{
return store.state.UserHabit.userDetail
})
let accountHomeData = reactive({
isEditUserName:false,
editUserName:'',
isEditEmail:false,
editEmail:'',
bindEmail:null as any,
Cropper:null as any,
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
uploadUrl:'',
uploadFile:undefined,
token:'',
fileList:[] as any,
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'),
@@ -72,11 +146,113 @@ export default defineComponent({
// state.selectedKeys = [Number(event.key)]
// state.nowPageName = event.item.name
router.push({path:event.item.route})
}
const editUserName = async ()=>{
if(!accountHomeData.editUserName)return message.warning(t('LibraryPage.jsContent7'))
if(accountHomeData.editUserName == userDetail.value.userName)return
await new Promise<void>((resolve, reject) => {
Https.axiosGet(Https.httpUrls.editUserName,{params:{newUserName:accountHomeData.editUserName}}).
then((rv:any)=>{
let value = {
userName:accountHomeData.editUserName,
usernameModify:userDetail.value.usernameModify-=1
}
store.commit('upUserDetail',value)
resolve()
}).catch((err:any)=>{
resolve()
})
})
}
const editEmail = ()=>{
if(!accountHomeData.editEmail)return message.warning(t('LibraryPage.jsContent7'))
}
const editChek = async (str:string)=>{
if(str == 'userName'){
await editUserName()
}else{
// await editEmail()
}
accountHomeData.isEditUserName = false
accountHomeData.isEditEmail = false
accountHomeData.editUserName = ''
accountHomeData.editEmail = ''
}
const openEdit = (str:string)=>{
if(str == 'userName'){
// if(userDetail.value.usernameModify.remainingTimes == 0)return
accountHomeData.isEditUserName = true
accountHomeData.isEditEmail = false
accountHomeData.editUserName = userDetail.value.userName
}else{
accountHomeData.bindEmail.init('Modify')
// accountHomeData.isEditEmail = true
accountHomeData.isEditUserName = false
// accountHomeData.editEmail = userDetail.value.email
}
}
let beforeUpload=(file:any,fileList:any)=>{
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(useI18n().t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(useI18n().t('PrintboardUpload.jsContent2'));
}
}
let fileUploadChange = (data:any)=>{
let file = data.file
// file.id = res.data.id?res.data.id:""
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
accountHomeData.Cropper.getOptionImg(data_new)
};
reader.readAsArrayBuffer(file.originFileObj);
accountHomeData.Cropper.changeShowModal(true)
}
let handleCropperSuccess = (event:any)=>{
let {file, fileData,base64} =event
accountHomeData.fileList[0].status = 'done'
accountHomeData.uploadUrl = base64
accountHomeData.uploadFile = file
accountHomeData.Cropper.closeCropper()
if(!accountHomeData.uploadFile)return
let param = new FormData();
param.append('file',accountHomeData.uploadFile);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
.then((rv)=>{
let data = {
avatar : rv
}
store.commit("upUserDetail", data)
message.success('提交成功')
})
}
let deletUploadFile = () => {
accountHomeData.fileList = []
}
return{
userDetail,
...toRefs(accountHomeData),
router,
handleClick,
editChek,
openEdit,
beforeUpload,
fileUploadChange,
handleCropperSuccess,
deletUploadFile,
}
},
data(){
@@ -89,8 +265,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 +278,166 @@ 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{
position: relative;
> .upload_box{
position: absolute;
bottom: 0;
right: 0;
> i{
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,.5);
color: #fff;
font-size: 2rem;
}
> .upload{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
opacity: 0;
}
}
> .modal_title_text{
margin: 0;
> .label{
display: flex;
margin: 0;
> .content{
> input{
min-width: 20rem;
height: 3.6rem;
border-radius: 4rem;
border: 1px solid;
padding-left: 1.5rem;
}
}
> .Modifiable{
font-size: 1.6rem;
font-weight: 500;
color: #666666;
display: flex;
align-items: center;
&.notModifiable{
color: #FF0000;
}
}
> .icon{
margin: 0 1.5rem;
display: flex;
align-items: center;
> i{
font-weight: 600;
font-size: 2.2rem;
cursor: pointer;
&.fi-br-check{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
border-radius: 50%;
}
}
}
}
> 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 +457,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 +486,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 +503,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;

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

@@ -1,222 +0,0 @@
<template>
<div class="accountEdit_page">
<div class="accountEdit_page_head">
<div class="upload_item">
<div class="upload_file_item">
<a-upload
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:customRequest="function(){}"
:maxCount="1"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
>
<!-- <i class="fi fi-br-upload"></i> -->
<img :src="uploadUrl" alt="">
</div>
</a-upload>
</div>
</div>
</div>
<div class="accountEdit_page_body">
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">{{$t('account.userName')}}:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text" disabled :value="cookieUserInfo.userName">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">{{$t('account.email')}}:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text" disabled :value="cookieUserInfo.email">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="started_btn" @click="setSubmit">
{{$t('account.Submit')}}
</div>
</div>
</div>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
</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 Cropper from '@/component/HomePage/Cropper.vue'
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
Cropper,
},
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:[]
})
let Cropper = ref()
// provide('exhibitionList',exhibitionList)
let handleCropperSuccess = (event:any)=>{
let {file, fileData,base64} =event
accountHomeData.fileList[0].status = 'done'
accountHomeData.uploadUrl = base64
accountHomeData.uploadFile = file
Cropper.value.closeCropper()
}
let beforeUpload=(file:any,fileList:any)=>{
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(useI18n().t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(useI18n().t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
// }else{
// return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
}
let fileUploadChange = (data:any)=>{
let file = data.file
// file.id = res.data.id?res.data.id:""
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
Cropper.value.getOptionImg(data_new)
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file.originFileObj);
Cropper.value.changeShowModal(true)
}
let deletUploadFile = () => {
accountHomeData.fileList = []
// let index = -1
// this.fileList.forEach((ele:any,index1:any) => {
// if(this.cropperFileData.uid === ele.uid){
// index = index1
// }
// });
// if(index > -1){
// this.fileList.splice(index, 1)
// }
}
let setSubmit = ()=>{
if(!accountHomeData.uploadFile)return
let param = new FormData();
param.append('file',accountHomeData.uploadFile);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.uploadAvatar,param,config)
.then((rv)=>{
let data = {
avatar : rv
}
store.commit("setUserInfo", data)
message.success('提交成功')
})
}
return{
...toRefs(accountHomeData),
userInfo,
cookieUserInfo,
Cropper,
handleCropperSuccess,
beforeUpload,
fileUploadChange,
deletUploadFile,
setSubmit,
}
},
data(){
return{
}
},
})
</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;
object-fit: contain;
height: 15rem;
border-radius: 50%;
background: #fff;
}
.accountEdit_page_head_upload{
width: auto;
}
.upload_item{
:deep(.ant-upload-list-picture-card-container){
display: none !important;
}
}
margin-bottom: 5rem;
}
.accountEdit_page_body{
.accountEdit_page_body_item{
display: flex;
margin-bottom: 5rem;
width: 100%;
.started_btn{
text-align: center;
}
input,textarea{
padding-left: 2rem;
border-radius: 4px;
border: 1px solid #dcdfe6;
width: 100%;
}
.accountEdit_page_body_item_name{
color: #606266;
width: 14rem;
text-align: right;
}
.accountEdit_page_body_item_inut{
margin-left: 2rem;
flex: 1;
}
}
.accountEdit_page_body_item:last-child{
justify-content: center;
}
}
}
</style>

29
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>
@@ -43,7 +43,6 @@ 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 follow from '@/component/Account/followFans/follow.vue'
import fans from '@/component/Account/followFans/fans.vue'
import { useI18n } from 'vue-i18n'
@@ -70,9 +69,6 @@ export default defineComponent({
],
activeKey: '',
})
let userInfo= computed(()=>{
return store.state.UserHabit.userInfo
})
let domRefs:any = reactive({
follow:ref(null),
fans:ref(null),
@@ -108,7 +104,6 @@ export default defineComponent({
return{
...toRefs(accountMessage),
...toRefs(domRefs),
userInfo,
messageSystem,
setReadStatus,
changeTabs,
@@ -141,32 +136,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>

35
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>
@@ -45,7 +39,6 @@ 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 system from '@/component/Account/message/system.vue'
import privateChat from '@/component/Account/message/privateChat.vue'
import newFollow from '@/component/Account/message/newFollow.vue'
@@ -181,16 +174,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 +181,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>

9
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">
@@ -41,10 +39,7 @@
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 { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},

9
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">
@@ -42,10 +46,7 @@
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 { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},

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

@@ -0,0 +1,165 @@
<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' && activeKey == 'myInformation'" :ref="item.key"></myInformation>
<bind v-if="item.key == 'bind' && activeKey == 'bind'" :ref="item.key"></bind>
<cancelRenewal v-if="item.key == 'cancelRenewal' && activeKey == '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 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 route = useRoute();
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',
}
],
loadingShow:false,
activeKey: '',
userDetail:computed(()=>{
return store.state.UserHabit.userDetail
})
})
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)
})
})
}
const wechatLogin = (value:any)=> {
let data = {
code : value.code
}
accountfrontPage.loadingShow = true
Https.axiosGet(Https.httpUrls.bindWeChat, {params:data})
.then((rv) => {
accountfrontPage.loadingShow = false
let value = {
accountExtendList:{
WeChat:rv,
Google:accountfrontPage.userDetail.accountExtendList?.Google
}
}
store.commit("upUserDetail", value)
router.push({ query: {} });
})
.catch((res) => {accountfrontPage.loadingShow = false});
}
onMounted(()=>{
let key = accountfrontPage.frontPageList[0].key
accountfrontPage.activeKey = key
const data = route.query
if(data?.state == 'weiXin'){
accountfrontPage.activeKey = 'bind'
wechatLogin(data)
}
})
return{
...toRefs(accountfrontPage),
...toRefs(domRefs),
setReadStatus,
changeTabs,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_frontPage{
width: 100%;
height: 100%;
.account_frontPage_body{
padding-bottom: 3rem;
height: 100%;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-content){
height: 100%;
}
: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>

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

@@ -0,0 +1,289 @@
<template>
<div class="bindPage_page">
<div class="bindPage_page_body">
<div class="bind_item">
<div class="title">{{ $t('frontPage.BindWechat') }}</div>
<div class="box">
<div class="type">
<img v-if="!userDetail.accountExtendList?.WeChat" src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
<img v-else :src="userDetail.accountExtendList?.WeChat.headImgUrl" alt="">
<div class="text">{{ userDetail.accountExtendList?.WeChat?userDetail.accountExtendList?.WeChat.name:$t('frontPage.Unbound') }}</div>
</div>
<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">{{ $t('frontPage.BindNow') }}</div>
<div v-if="userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="ungroupWeiXinModel">{{ $t('frontPage.Unbind') }}</div>
</div>
</div>
<div class="bind_item">
<div class="title">{{ $t('frontPage.BindGmail') }}</div>
<div class="box">
<div class="type">
<img v-if="!userDetail.accountExtendList?.Google" src="@/assets/images/loginPage/gmailIcon.svg" alt="">
<img v-else :src="userDetail.accountExtendList?.Google?.headImgUrl" alt="">
<div class="text">{{ userDetail.accountExtendList?.Google?userDetail.accountExtendList?.Google.name:$t('frontPage.Unbound') }}</div>
</div>
<!-- <div class="gmail_btn">
<div v-if="!userDetail.accountExtendList?.Google && googleLoad" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
<div v-else-if="!userDetail.accountExtendList?.Google" class="gallery_btn loading"><i class="fi fi-br-loading"></i></div>
<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
</div> -->
<div class="gmail_btn">
<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
<!-- <div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div> -->
</div>
</div>
</div>
<!-- <div class="bind_item">
<div class="title">{{ $t('frontPage.ModifyEmail') }}</div>
<div class="box">
<div class="type">
<img :src="userDetail.avatar" alt="">
<div class="text">{{ userDetail.email }}</div>
</div>
<div class="gmail_btn">
<div class="gallery_btn" @click="modifyEmail">{{ $t('frontPage.Modify') }}</div>
</div>
</div>
</div> -->
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<weiXinModel ref="weiXinModel"></weiXinModel>
<bindEmail ref="bindEmail"></bindEmail>
</div>
</template>
<script>
import { defineComponent,computed,createVNode,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import weiXinModel from "@/component/LoginPage/weiXinModel.vue";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import bindEmail from "@/component/HomePage/bindEmail.vue";
export default defineComponent({
components:{
weiXinModel,bindEmail
},
setup() {
const route = useRoute();
const router = useRouter();
const t = useI18n().t;
const store = useStore();
let accountHomeData = reactive({
router:null,
loadingShow:false,
googleLoad:false,
userDetail:computed(()=>{
return store.state.UserHabit.userDetail
})
})
let bindPageDom = reactive({
weiXinModel:null,
bindEmail:null,
})
let data = reactive({
scriptSrc:'https://accounts.google.com/gsi/client',
})
const openWeiXinModel = ()=>{
bindPageDom.weiXinModel.init()
}
const handleCredentialResponse = (response)=>{
let code = response.credential
accountHomeData.loadingShow = true
let data = {credential : code}
Https.axiosGet(Https.httpUrls.bindGoogle, {params:data})
.then((rv) => {
accountHomeData.loadingShow = false
let value = {
accountExtendList:{
WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
Google:rv,
}
}
store.commit("upUserDetail", value)
})
.catch((res) => {accountHomeData.loadingShow = false});
}
const ungroupWeiXinModel = ()=>{
Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
message.success(t('frontPage.jsContent1'));
let value = {
accountExtendList:{
WeChat:undefined,
Google:accountHomeData.userDetail.accountExtendList?.Google
}
}
store.commit("upUserDetail", value)
})
}
const ungroupGoogleModel = ()=>{
Https.axiosGet(Https.httpUrls.unbindGoogle,).then((rv)=>{
let value = {
accountExtendList:{
WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
Google:undefined,
}
}
store.commit("upUserDetail", value)
message.success(t('frontPage.jsContent1'));
})
}
const modifyEmail = ()=>{
bindPageDom.bindEmail.init('Modify')
}
onMounted(async ()=>{
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(!window.isAddGmail){
if(!existingScript){
window.isAddGmail = true
await new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = data.scriptSrc
script.onload=()=>{
accountHomeData.googleLoad = true
resolve()
}
script.onerror = ()=>{
Modal.confirm({
title: t('frontPage.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
}
});
accountHomeData.googleLoad = true
}
document.body.appendChild(script);
})
}
window.google.accounts.id.initialize({
// 主要就是填写client_id
client_id: GOOGLE_CLIENT_ID,
auto_select: false,
callback: handleCredentialResponse,
// context:"signin",
ux_mode:"popup",
itp_support:true,
});
window.google.accounts.id.renderButton(
document.getElementById("g_id_bind"),
{
type:"icon",//icon为只有一个icon
shape:"circle",
theme:"outline",
size:"large",
logo_alignment:"center",
}
);
}
})
onBeforeUnmount(()=>{
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(existingScript){
existingScript.remove()
window.isAddGmail = false
}
})
return{
...toRefs(accountHomeData),
...toRefs(bindPageDom),
openWeiXinModel,
ungroupGoogleModel,
ungroupWeiXinModel,
modifyEmail,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.bindPage_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
.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;
font-size: 1.8rem;
}
}
.gallery_btn{
&.loading{
width: 10rem;
i{
&::before{
display: inline-block;
animation: loading 1s linear infinite;
@keyframes loading {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
}
}
}
}
>.gmail_btn{
position: relative;
#g_id_bind{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
:deep(.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe){
width: 100%;
}
}
}
}
}
.bind_item:last-child{
margin-bottom: 0;
}
}
}
</style>

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

@@ -0,0 +1,248 @@
<template>
<div class="cancelRenewal_page">
<div v-if="userDetail.status != 'canceled'">
<div class="cancel_box_item">
<div class="modal_title_text">
<div>{{ $t('cancelRenewal.cancelling') }}</div>
</div>
<div class="cause_list">
<label class="cause_item" v-for="item in causeList" :key="item.vlaue">
<input type="checkbox" name="cause" v-model="selectedOptions" :value="item.value">
<div>{{ item.str }}</div>
</label>
<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
</div>
</div>
<div class="cancel_box_item cancel_box_item2">
<!-- <div class="modal_title_text">
<div>{{ $t('cancelRenewal.subscription') }}</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseDate') }}</div>
</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseCustomizations') }}</div>
</div>
</div>
<div class="tips">
<i class="fi fi-sr-triangle-warning"></i>
<div>{{ $t('cancelRenewal.DonWorry') }}</div>
</div> -->
<div class="button_box">
<div class="gallery_btn white" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
<div class="gallery_btn" @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
</div>
</div>
</div>
<div v-else class="no_renewal">
{{ $t('cancelRenewal.subscriptionRenewal') }}
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</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 { useI18n } from 'vue-i18n'
import renew from "@/component/HomePage/renew.vue";
export default defineComponent({
components:{
renew,
},
setup() {
const store = useStore();
const {t} = useI18n()
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let accountHomeData:any = reactive({
textareaValue:'',
isShowMark:false,
causeList:[
{
vlaue:'Too expensive',
str:t('account.jsContent1'),
},{
value:'Sytem not user friendly',
str:t('account.jsContent2'),
},{
value:'Too Slowy',
str:t('account.jsContent3'),
},{
value:'Difficult to edit',
str:t('account.jsContent4'),
},{
value:'Insufficlent Tutorial/Support',
str:t('account.jsContent5'),
},{
value:'Unable to generate what you need',
str:t('account.jsContent6'),
}
],
selectedOptions:[]
})
let renew = ref()
const subscribe = ()=>{
renew.value.init()
}
const cancelSubscription = ()=>{
let str = ''
accountHomeData.selectedOptions.forEach((item:any)=>{
str += ' #' + item
})
let data = {
subscriptionId:userDetail.value.subscriptionId,
reason:accountHomeData.textareaValue + str,
}
accountHomeData.isShowMark = true
Https.axiosGet(Https.httpUrls.cancelSubscription, {params:data})
.then((rv: any) => {
message.success(rv)
let value = {
status:'canceled',
}
accountHomeData.isShowMark = false
store.commit("upUserDetail", value)
})
.catch((res) => {
accountHomeData.isShowMark = false
});
}
return{
...toRefs(accountHomeData),
userDetail,
renew,
subscribe,
cancelSubscription,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.cancelRenewal_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
>div{
display: flex;
flex-direction: column;
align-items: center;
&.no_renewal{
font-size: 2rem;
font-weight: 400;
}
}
.cancel_box_item{
margin-bottom: 3rem;
width: 100%;
>.modal_title_text{
margin: 0;
>div{
font-weight: 600;
}
.modal_title_text_assistant{
margin-top: 1rem;
font-weight: 600;
}
}
>.gallerySelect{
width: 100%;
:deep(.ant-select-selector){
border-radius: 1.4rem;
}
}
>.cause_list{
> .cause_item{
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: 600;
input{
margin-right: 1rem;
width: 2.2rem;
height: 2.2rem;
}
}
>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;
margin-top: 2.5rem;
justify-content: flex-end;
>div:nth-child(1){
margin-right: 1rem;
// width: calc((100% - 1rem) / 2);
}
}
}
.cancel_box_item:last-child{
margin: 0;
}
.cancel_box_item2{
.modal_title_text{
>div:nth-child(1){
margin-bottom: 2rem;
}
>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;
}
}
>div:nth-child(3){
margin-bottom: 2rem;
}
}
.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>

151
src/component/Account/frontPage/mylnformation.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<div class="accountEdit_page">
<div class="accountEdit_page_body">
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">{{$t('account.Country')}}:</div>
<div class="accountEdit_page_body_item_inut">
<a-select
v-model:value="Country"
size="large"
optionFilterProp="label"
:options="countryList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">{{$t('account.CompanyName')}}:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text" v-model="CompanyName">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="gallery_btn" @click="setSubmit">
{{$t('account.Submit')}}
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</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 { country } from "@/tool/country";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const store = useStore();
const {t} = useI18n();
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let accountHomeData:any = reactive({
Country:'',
CompanyName:'',
loadingShow:false,
countryList:country
})
let setSubmit = ()=>{
let data = {
country:accountHomeData.Country,
occupation:accountHomeData.CompanyName
}
accountHomeData.loadingShow = true
Https.axiosGet(Https.httpUrls.updateUserInfo,{params:data}).
then((rv:any)=>{
let value = {
userName:accountHomeData.editUserName
}
store.commit('upUserDetail',value)
accountHomeData.loadingShow = false
message.success(t('exportModel.jsContent7'))
}).catch((err:any)=>{
accountHomeData.loadingShow = false
})
}
onMounted(()=>{
let country = userDetail.value.country
let CompanyName = userDetail.value.occupation
accountHomeData.Country = country
accountHomeData.CompanyName = CompanyName
})
return{
...toRefs(accountHomeData),
userDetail,
setSubmit,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.accountEdit_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
.accountEdit_page_body{
width: 100%;
// width: 85rem;
.accountEdit_page_body_item{
display: flex;
margin-bottom: 20px;
flex-direction: column;
width: 100%;
.gallery_btn{
margin-left: auto;
}
input,textarea{
padding-left: 11px;
border-radius: 1.6rem;
border: 2px solid #D0D0D0;
width: 100%;
font-size: 2rem;
}
input{
height: 40px;
}
.accountEdit_page_body_item_name{
color: #000;
text-align: left;
font-size: 2rem;
}
.accountEdit_page_body_item_inut{
margin-top: 1.5rem;
flex: 1;
.ant-select-lg{
font-size: 2rem;
}
.ant-select{
width: 100%;
border-radius: 1.6rem;
border: 2px solid #D0D0D0;
overflow: hidden;
.ant-select-selector{
border-radius: 1.6rem;
}
:deep(.ant-select-selector ){
border: none !important;
}
}
}
}
.accountEdit_page_body_item:last-child{
justify-content: center;
}
}
}
</style>

2
src/component/Account/message/comment.vue
View File

@@ -43,8 +43,6 @@ 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:{
},

2
src/component/Account/message/likeMessage.vue
View File

@@ -41,8 +41,6 @@ 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:{
},

2
src/component/Account/message/newFollow.vue
View File

@@ -37,9 +37,7 @@
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 { useI18n } from 'vue-i18n'
export default defineComponent({
components:{

1
src/component/Account/message/privateChat.vue
View File

@@ -73,7 +73,6 @@ 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:{

2
src/component/Account/message/system.vue
View File

@@ -30,9 +30,7 @@
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 { useI18n } from 'vue-i18n'
export default defineComponent({
components:{

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

@@ -53,7 +53,6 @@ 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'
import Works from '@/views/HomeView/Works.vue';
export default defineComponent({
@@ -114,7 +113,7 @@ export default defineComponent({
.otherUsers{
width: 100%;
height: 100%;
padding: 0 9rem;
padding: 0 6rem;
display: flex;
flex-direction: column;
overflow-y: auto;

572
src/component/Administrator/Transaction/TransactionTable.vue Normal file
View File

@@ -0,0 +1,572 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>Create Time:</span>
<a-range-picker
style="width: 250px"
class="range_picker"
v-model:value="rangePickerValue"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>Country:</span>
<a-select
v-model:value="country"
:allowClear="true"
show-search
style="width: 250px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="countryList"
></a-select>
</div>
<div class="admin_state_item">
<span>City:</span>
<a-select
v-model:value="city"
:allowClear="true"
show-search
style="width: 250px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="cityList"
></a-select>
</div>
<div class="admin_state_item">
<span>Payment Amount:</span>
<input
v-model="payerTotal"
placeholder="Please enter payment amount"
@keydown.enter="gettrialList"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span>platform:</span>
<a-select
v-model:value="platform"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="platformList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="admin_state_item">
<span>Status:</span>
<a-select
v-model:value="status"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="statusList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="admin_state_item">
<span>Type:</span>
<a-select
v-model:value="type"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="articleCategoryList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">
Search
</div>
<div class="admin_search_item" @click="downloadTransaction">
Export
</div>
</div>
<div class="admin_state_list">
<div
class="admin_state_list_item"
@click="lastGeTrialList('year')"
>
Nearly a year
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('month')"
>
Last month
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('week')"
>
Last week
</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:showSorterTooltip='false'
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<template #bodyCell="{ column, text, record, index }">
<div class="operate_list" v-if="column?.Operations">
<div v-if="record.status == 'Success'" :class="{success:record.status == 'Success'}">
<i class="fi fi-ss-check-circle"></i>{{ record.status }}
</div>
<div v-if="record.status == 'Pending'" :class="{pending:record.status == 'Pending'}">
<i class="fi fi-br-hourglass-end"></i>{{ record.status }}
</div>
<div v-if="record.status == 'Fail'" :class="{fail:record.status == 'Fail'}">
<i class="fi fi-ss-cross-circle"></i>{{ record.status }}
</div>
</div>
</template>
</a-table>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
createVNode,
computed,
reactive,
toRefs,
onMounted,
} from "vue";
import { formatTime } from "@/tool/util";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import {getCookie,clonAllCookie} from '@/tool/cookie'
export default defineComponent({
components: {},
setup() {
const store:any = useStore()
let filter: any = reactive({
dataList: [],
tableLoading: false,
allCountry:[],
cityList: computed(()=>{
return store.state.adminPage.city
}),
countryList: computed(()=>{
return store.state.adminPage.country
}),
});
let filterData: any = reactive({
rangePickerValue: [],
currentPage: 1,
pageSize: 10,
total: 0,
country: "",
city:"",
payerTotal: "",
platform: "",
order: "", //'Ascending 升序 Descending 降序'
orderBy:'',
status: "",
type: "",
});
let selectList=reactive({
platformList:[
{
label: "all",
value: "",
},
{
label:'PayPal',
value:'PayPal',
},
{
label:'Stripe',
value:'Stripe',
},
{
label:'Alipay-HK',
value:'Alipay-HK',
},
],
statusList:[
{
label: "all",
value: "",
},
{
label:'Success',
value:'Success',
},
{
label:'Fail',
value:'Fail',
},
{
label:'Pending',
value:'Pending',
},
],
articleCategoryList:[
{
label: "all",
value: "",
},
{
label:'new',
value:'new',
},
{
label:'renewal',
value:'renewal',
},
{
label:'credits',
value:'credits',
},
],
})
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: "Id",
align: "center",
dataIndex: "id",
key: "id",
width:100,
fixed: "left",
sorter: true,
},
{
title: "Payer",
align: "center",
dataIndex: "payer",
key: "payer",
width:150,
ellipsis:true,
},
{
title: "Platform",
align: "center",
dataIndex: "platform",
key: "platform",
width:150,
ellipsis:true,
},{
title: "Payment Amount",
align: "center",
dataIndex: "payerTotal",
key: "payerTotal",
width:150,
ellipsis:true,
},
{
title: "Type",
align: "center",
dataIndex: "type",
key: "type",
width:150,
ellipsis:true,
},
{
title: "Payment Method",
align: "center",
dataIndex: "paymentMethod",
key: "paymentMethod",
width:150,
ellipsis:true,
},
{
title: "last4",
key: "last4",
width:120,
align: "center",
dataIndex: "last4",
// slots:{customRender:'action'}
},
// {
// title: 'User Type',
// align: "center",
// dataIndex: "systemUser",
// key: "systemUser",
// width:100,
// customRender: (record: any) => {
// let str;
// if (record.value == 0) {
// str = "visitor";
// } else if (record.value == 1) {
// str = "yearly";
// } else if (record.value == 2) {
// str = "monthly";
// } else if (record.value == 3) {
// str = "trial";
// } else if (record.value == 4) {
// str = "userInEvent";
// }
// return str;
// },
// },
{
title: "City",
align: "center",
dataIndex: "city",
key: "city",
width:150,
ellipsis:true
},
{
title: "Country",
align: "center",
dataIndex: "country",
key: "country",
width:150,
ellipsis:true
},
{
title: "Create Time",
align: "center",
dataIndex: "createTime",
key: "createTime",
width:150,
ellipsis:true,
},
{
title: "Status",
align: "center",
dataIndex: "status",
key: "status",
fixed: "right",
width:150,
Operations: true,
ellipsis:true,
}
];
});
//改变页码
let changePage = (e: any, filters:any, sorter:any) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
if(sorter.order){
if(sorter.columnKey == 'id'){
filterData.orderBy = 'id'
}else if(sorter.columnKey == "createDate"){
filterData.orderBy = 'time'
}else if(sorter.columnKey == "credits"){
filterData.orderBy = 'credits'
}
}
filterData.order = sorter.order == "descend" ? "DESC" : "ASC";
gettrialList();
};
//查询列表
let searchHistoryList = () => {
filterData.currentPage = 1;
gettrialList();
};
let clearHistoryList = () => {
filterData.rangePickerValue = [],
filterData.currentPage = 1,
filterData.pageSize = 10,
filterData.total = 0,
filterData.city = "",
filterData.country = "",
filterData.payerTotal = ""
filterData.order = "" //'Ascending 升序 Descending 降序'
filterData.orderBy = "" //'Ascending 升序 Descending 降序'
filterData.platform = ""
filterData.status = ""
filterData.type = ""
};
let setHistoryListData = () => {
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0] + " " + "00:00:00"
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1] + " " + "23:59:59"
: "";
console.log(startDate);
let data = {
order: filterData.order,
orderBy: filterData.orderBy,
"city": filterData.city,
"country": filterData.country,
startTime: startDate,
endTime: endDate,
"id": 0,
page: filterData.currentPage,
"payerTotal": filterData.payerTotal,
"platform": filterData.platform,
size: filterData.pageSize,
"status": filterData.status,
"type": filterData.type
};
return data;
};
//获取列表
let gettrialList = () => {
filter.tableLoading = true;
let data = setHistoryListData();
Https.axiosPost(Https.httpUrls.queryTransaction, data).then(
(rv: any) => {
if (rv) {
console.log(rv);
// this.dataList = rv
filter.dataList = rv.content;
filterData.total = rv.total;
filter.tableLoading = false;
// this.workspaceItem.position = this.singleTypeList[0].label
}
}
);
};
//导出报表
let downloadTransaction = () => {
filter.tableLoading = true;
let data = setHistoryListData();
Https.axiosPost(Https.httpUrls.queryTransactionDownload, data).then(
(rv: any) => {
if (rv) {
fetch(rv)
.then(response => response.blob()) // 将响应转换为 Blob 对象
.then(blob => {
// 创建一个指向 Blob 对象的 URL
const link = document.createElement('a');
link.href = URL.createObjectURL(blob); // 将 Blob 对象转换为可下载的 URL
link.download = 'transaction'; // 设置文件名
filter.tableLoading = false;
link.click(); // 触发下载
URL.revokeObjectURL(link.href); // 释放 URL 对象
})
}
}
);
};
let lastGeTrialList = (str: string) => {
clearHistoryList();
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp;
if (str == "year") {
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
} else if (str == "month") {
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
} else if (str == "week") {
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
}
// filterData.rangePickerValue[0] = formatTime(
// thirtyDaysAgoTimestamp,
// "YYYY-MM-DD"
// );
filterData.rangePickerValue = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),formatTime(currentTimestamp,'YYYY-MM-DD')]
gettrialList();
};
let filterOption = (input: any, option: any) => {
// 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
onMounted(() => {
let allCountry: any = sessionStorage.getItem("allCountry");
if (allCountry) {
filter.allCountry = JSON.parse(allCountry);
}
gettrialList();
});
return {
...toRefs(filter),
...toRefs(filterData),
...toRefs(selectList),
columns,
renameData,
changePage,
searchHistoryList,
lastGeTrialList,
gettrialList,
downloadTransaction,
filterOption,
};
},
data() {
return {
historyTableHeight: 0,
handleResizeColumn: (w: any, col: any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
},
methods: {},
});
</script>
<style lang="less" scoped>
.admin_page .admin_table_search .admin_state {
display: flex;
flex-wrap: wrap;
}
:deep(.operate_list){
.fi{
font-size: 2rem;
margin-right: 1rem;
}
.success{
.fi-ss-check-circle{
color: #3ab45c;
}
}
.pending{
.fi-ss-check-circle{
color: #ffc628;
}
}
.fail{
.fi-ss-check-circle{
color: #ff0000;
}
}
}
</style>

313
src/component/Administrator/affiliate/affiliateAudit.vue Normal file
View File

@@ -0,0 +1,313 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>Start Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>State:</span>
<a-select v-model:value="currentState.value" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
<div class="admin_state_item">
<span>Affiliate Id:</span>
<input
style="width:280px"
v-model="affiliateId"
placeholder="Please enter Affiliate Id"
@keydown.enter="gettrialList"
type="text"
/>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
>
<template
#bodyCell="{ column, text, record, index }"
>
<div
class="operate_list"
v-if="column?.Operations && record.status == 'Pending'"
>
<div v-show="status == 0" class="operate_item" @click="setAgree(record, true)">
agree
</div>
<div v-show="status == 0" class="operate_item" @click="setAgree(record, false)" >
refuse
</div>
</div>
<div v-else-if="column?.Operations">
{{ record.status }}
</div>
<div v-else-if="column?.openType" @click="openDetail(record,column?.openType)">
{{ text }} HDK
</div>
</template>
</a-table>
</div>
<itemAffiliateDetail ref="itemAffiliateDetail"></itemAffiliateDetail>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import itemAffiliateDetail from "./itemAffiliateDetail.vue";
export default defineComponent({
components: {
itemAffiliateDetail,
},
setup() {
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: 'Id',
align: "center",
width: 50,
dataIndex: "id",
key: "id",
fixed: "left",
},
{
title: 'User Name',
align: "center",
width: 100,
dataIndex: "username",
key: "username",
},
{
title: 'Create Time',
align: "center",
width: 200,
dataIndex: "createTime",
key: "createTime",
sorter: true,
},{
title: 'State',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "status",
key: "status",
},{
title: 'Total income',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "totalEarnings",
key: "totalEarnings",
openType:'month',
},{
title: 'Monthly income',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "monthlyEarnings",
key: "monthlyEarnings",
openType:'all',
},{
title: 'Unpaid amount',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "unpaidEarnings",
key: "unpaidEarnings",
},{
title: 'Invitation Link',
align: "center",
ellipsis: true,
width: 250,
dataIndex: "link",
key: "link",
},{
title: 'Updata Time',
align: "center",
width: 200,
dataIndex: "updateTime",
key: "updateTime",
},
{
title: 'Operations',
key: "operation",
align: "center",
fixed: "right",
width: 130,
// slots:{customRender:'action'}
Operations: true,
},
];
});
let currentState = ref({
label:'All',
value:'',
state:false,
},)
let state:any = ref([
{
label:'All',
value:'',
},
{
label:'Pending',
value:'Pending',
},
{
label:'Active',
value:'Active',
},
{
label:'Inactive',
value:'Inactive',
},
{
label:'Refused',
value:'Refused',
},
])
const itemAffiliateDetail = ref()
let collectionList: any = ref([]);
let status: any = ref(0);
const openDetail = (value:any,openType:string)=>{
console.log(value,openType);
let data = {
id:value.id,
type:openType
}
itemAffiliateDetail.value.init(data)
}
return {
columns,
collectionList,
renameData,
status,
currentState,
itemAffiliateDetail,
state,
openDetail,
};
},
data() {
return {
rangePickerValue:[],
currentPage: 1,
pageSize: 10,
total: 0,
order:'',
affiliateId:'',
historyTableHeight: 0,
newCollectionName: "",
renameVisivle: false, //修改名字弹窗
collectionName: "", //选中的名字
searchCollectionName: "",
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
this.gettrialList();
},
methods: {
//改变页码
changePage(e: any, filters:any, sorter:any) {
this.currentPage = e.current;
this.pageSize = e.pageSize;
this.order = sorter.order == "descend" ? "DESC" : "ASC";
this.gettrialList();
},
//查询列表
searchHistoryList() {
this.currentPage = 1;
this.gettrialList();
},
//获取列表
gettrialList() {
let startDate: any = this.rangePickerValue?.[0]
? this.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = this.rangePickerValue?.[1]
? this.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
page: this.currentPage,
size: this.pageSize,
order: this.order,
status: this.currentState.value,
startTime:startDate,
endTime:endDate,
affiliateId:this.affiliateId
};
Https.axiosPost(Https.httpUrls.affiliateList, data).then(
(rv: any) => {
this.collectionList = rv.content;
this.total=rv.total
}
);
},
setAgree(record: any, boolean: boolean){
// const formData = new FormData()
// formData.append('id',record.id)
// formData.append('isApproved ',boolean+'')
let data = {
id:record.id,
isApproved: boolean,
}
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosGet(Https.httpUrls.affiliateApproval, {params:data}).then(
(rv: any) => {
if(boolean){
message.success('同意成功~')
}else{
message.success('拒绝成功~')
}
this.gettrialList();
}
);
},
setState(){
this.currentState.state = true
},
setStateItem(item:any){
this.currentState = item
this.currentState.state = false
},
},
});
</script>
<style lang="less" scoped>
.admin_page .admin_table_content .operate_list{
justify-content: space-between;
}
</style>

229
src/component/Administrator/affiliate/itemAffiliateDetail.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<div class="itemAffiliateDetail" ref="itemAffiliateDetail"></div>
<a-modal class="generalModel"
v-model:visible="itemAffiliateDetailShow"
:footer="null"
:get-container="() => $refs.itemAffiliateDetail"
width="75%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
wrapClassName="#app"
>
<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="admin_page">
<div class="admin_state_item">
<span>Start Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
<div class="gallery_btn" @click="getDetailList" style="margin-left: 2rem;">Search</div>
</div>
<div class="itemAffiliateDetail_content generalModel_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
:scroll="{ y: 200 }"
@change="changePage"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
</a-table>
</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, nextTick } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
components: {
},
setup() {
let renameData: any = ref({}); //修改名字选中的数据
const itemAffiliateDom = reactive({
historyTable:null as any,
})
const itemAffiliateDetail = reactive({
itemAffiliateDetailShow:false,
loadingShow:false,
rangePickerValue:[] as any,
itemId:-1,
collectionList:[],
currentPage: 1,
pageSize: 10,
order:'',
total: 0,
historyTableHeight:0,
columns:computed(() => {
return [
{
title: 'Id',
align: "center",
width: 50,
dataIndex: "accountId",
key: "accountId",
fixed: "left",
},{
title: 'User Name',
key: "username",
dataIndex: "username",
align: "center",
width: 150,
},
{
title: 'Time',
align: "center",
width: 200,
dataIndex: "time",
key: "time",
sorter: true,
},{
title: 'First Subscription Payment Amount',
align: "center",
width: 200,
dataIndex: "firstSubscriptionPaymentAmount",
key: "firstSubscriptionPaymentAmount",
},{
title: 'Commission',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "commission",
key: "commission",
fixed: "right",
}
];
})
})
const init = (value:any)=>{
itemAffiliateDetail.itemAffiliateDetailShow = true
getCurrentMonthStart(value.type)
nextTick(()=>{
itemAffiliateDetail.historyTableHeight = itemAffiliateDom.historyTable.clientHeight - 40;
itemAffiliateDetail.itemId = value.id
getDetailList()
})
}
const cancelDsign = () =>{
itemAffiliateDetail.itemAffiliateDetailShow = false
itemAffiliateDetail.loadingShow = false
}
const getCurrentMonthStart = (type:any) => {
const now = new Date(); // 获取当前日期
const year = now.getFullYear(); // 获取当前年份
const month = now.getMonth(); // 获取当前月份（0 - 11）
let startOfPeriod:any, endOfPeriod:any;
if (type === 'month') {
startOfPeriod = new Date(year, month, 1);
endOfPeriod = new Date(year, month + 1, 0); // 下个月的第0天即为当前月的最后一天
startOfPeriod.setHours(0, 0, 0, 0);
endOfPeriod.setHours(23, 59, 59, 999); // 设置为最后一天的23:59:59.999
} else if (type === 'year') {
startOfPeriod = new Date(year, 0, 1);
endOfPeriod = new Date(year, 11, 31);
}
const formatDate = (date:any) => {
return date.getFullYear() + '-' +
String(date.getMonth() + 1).padStart(2, '0') + '-' +
String(date.getDate()).padStart(2, '0') + ' ' +
String(date.getHours()).padStart(2, '0') + ':' +
String(date.getMinutes()).padStart(2, '0') + ':' +
String(date.getSeconds()).padStart(2, '0');
};
if (type === 'month')itemAffiliateDetail.rangePickerValue = [formatDate(startOfPeriod),formatDate(endOfPeriod)]
}
const changePage = (e: any, filters:any, sorter:any)=>{
itemAffiliateDetail.currentPage = e.current;
itemAffiliateDetail.pageSize = e.pageSize;
itemAffiliateDetail.order = sorter.order == "descend" ? "DESC" : "ASC";
getDetailList();
}
const getDetailList = ()=>{
itemAffiliateDetail.loadingShow = true
let startDate: any = itemAffiliateDetail.rangePickerValue?.[0]
? itemAffiliateDetail.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = itemAffiliateDetail.rangePickerValue?.[1]
? itemAffiliateDetail.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
affiliateId:itemAffiliateDetail.itemId,
endTime:endDate,
startTime:startDate,
order:itemAffiliateDetail.order,
page: itemAffiliateDetail.currentPage,
size: itemAffiliateDetail.pageSize,
}
Https.axiosPost(Https.httpUrls.getEachAffiliateGeneratedRevenue,data).then((rv:any)=>{
console.log(rv);
itemAffiliateDetail.collectionList = rv.records
itemAffiliateDetail.loadingShow = false
itemAffiliateDetail.total=rv.total
}).catch((err:any)=>{
itemAffiliateDetail.loadingShow = false
})
}
return {
...toRefs(itemAffiliateDom),
...toRefs(itemAffiliateDetail),
init,
cancelDsign,
changePage,
getDetailList,
};
},
});
</script>
<style lang="less" scoped>
.itemAffiliateDetail{
.itemAffiliateDetail_content{
margin-top: 2rem;
}
.admin_page .admin_table_content .operate_list{
justify-content: space-between;
}
}
</style>

2
src/component/Administrator/allUser.vue
View File

@@ -415,7 +415,7 @@ export default defineComponent({
? filterData.rangePickerValue[0] + " " + "00:00:00"
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1] + " " + "00:00:00"
? filterData.rangePickerValue[1] + " " + "23:59:59"
: "";
let data = {
endTime: endDate,

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

@@ -1,19 +1,26 @@
<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 +121,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 +277,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.allUserPoeration_modal{
.ant-modal-body{
height: auto;

20
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,26 @@
</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 +192,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/Administrator/recentActiveChart.vue
View File

@@ -88,7 +88,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/recentActiveUser.vue
View File

@@ -259,7 +259,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/recentActiveUserChart.vue
View File

@@ -71,7 +71,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/recentNewUser.vue
View File

@@ -285,7 +285,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/recentNewUserChart.vue
View File

@@ -97,7 +97,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/trialAllUser.vue
View File

@@ -218,7 +218,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

7
src/component/Administrator/trialApproval.vue
View File

@@ -41,7 +41,7 @@
<div
v-show="status == 0"
class="operate_item"
@click="setAagree(record, index)"
@click="setAgree(record, index)"
>
agree
</div>
@@ -67,7 +67,6 @@
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
@@ -184,14 +183,12 @@ export default defineComponent({
},
])
let collectionList: any = ref([]);
let userInfo: any = {};
let status: any = ref(0);
let voluntarily: any = ref(false);
return {
columns,
collectionList,
renameData,
userInfo,
status,
currentState,
state,
@@ -214,8 +211,6 @@ export default defineComponent({
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
this.gettrialList();
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.getIsAutoApproval()
},
methods: {

2
src/component/Administrator/trialUserConversionRateChart.vue
View File

@@ -88,7 +88,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

2
src/component/Administrator/trialUserCountry.vue
View File

@@ -106,7 +106,7 @@ export default defineComponent({
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
? filterData.rangePickerValue[1]+' '+'23:59:59'
: "";
let data = {
endTime:endDate,

197
src/component/Canvas/argument.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="canvasArgument">
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Width') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
</div>
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Height') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.operation != 'eraser' &&
canvasGeneral.operation != 'texture' &&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.Color') }}</div>
<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.brushwork.value != 'RibbonBrush' &&
canvasGeneral.brushwork.value != 'LongfurBrush'&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
</div>
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
<img style="width: 100%;" :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move'&&
canvasGeneral.operation != 'text'&&
canvasGeneral.operation != 'texture'&&
canvasGeneral.operation != ''&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
</div>
</div>
<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
</div>
</div> -->
<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
style="flex: 1;width: 15rem;"
@change="canvasGeneral.setFontFamily"
:style="{'font-family':canvasGeneral.fontFamily}"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
export default defineComponent({
components:{},
setup(){
let testModal = ref(true)
let canvasGeneral:any = inject('canvasObj')
const data = reactive({
colorHistoryList:[],
operation:'',
})
const setOperation = (str:any)=>{
data.operation = str
}
const setOper = ()=>{
setOperation('')
}
document.addEventListener('click',setOper)
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
return {
canvasGeneral,
...toRefs(data),
testModal,
setOperation,
closeModal,
}
}
});
</script>
<style lang='less' scoped>
.canvasArgument{
display: flex;
flex-wrap: wrap;
height: 100%;
.label_item{
margin-right: 2rem;
position: relative;
display: flex;
align-items: center;
.leftAlign{
display: flex;
}
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
display: block;
border-radius: 4px;
border: 1px solid;
padding: .5rem 1rem;
background: #fff;
div{
width: 2rem;
height: 2rem;
margin-right: .5rem;
margin-bottom: .5rem;
display: inline-block;
cursor: pointer;
}
}
input{
height: 100%;
}
&.wH input{
width: 5rem;
}
.title{
margin-right: 1rem;
}
.icon-xiala{
cursor: pointer;
transform: rotate(0deg);
height: 4rem;
width: 4rem;
transition: all .3s;
line-height: 4rem;
text-align: center;
&.active{
transform: rotate(180deg);
}
}
}
.label_item:hover{
// .labelHover_show{
// display: flex;
// }
}
}
</style>

184
src/component/Canvas/canvasContent.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="canvasContent_box">
<div class="canvasContent" ref="canvasScaleDom">
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
</div>
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
component:{},
setup(){
let {t} = useI18n()
let canvasType = inject('canvasType')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
canvasDom:null,
isPresuppose:false,
isShowMark:false,
pencilbtnStyle:{},
})
const createCanvas = (canvasSize:any)=>{
data.isPresuppose = false
nextTick(()=>{
canvasGeneral.canvasInit(data.canvasDom,canvasSize)
console.log(canvasGeneral);
})
}
const openMode = (data:any)=>{
let {yes,no} = data
console.log(yes,no);
Modal.confirm({
title: '是否栅格化',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
yes()
},
onCancel(){
no()
}
});
yes()
}
// canvasGeneral.openMode.fun = openMode
const setPresuppose = (presuppose:any)=>{
let canvasDomSize = {
width:data.canvasScaleDom.offsetWidth,
height:data.canvasScaleDom.offsetHeight,
}
let width,height
let scale = [0,0]
if(presuppose == '16/9'){
// scale[0] = 16
// scale[1] = 9
width = 1600
height = 900
}else if(presuppose == '1/1'){
// scale[0] = 1
// scale[1] = 1
width = 1000
height = 1000
}else if(presuppose == '9/16'){
// scale[0] = 9
// scale[1] = 16
width = 900
height = 1600
}
// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
// if(mbHeight < canvasDomSize.height){
// width = canvasDomSize.width
// height = mbHeight
// }else{
// width = canvasDomSize.height / scale[1] * scale[0]
// height = canvasDomSize.height
// }
let canvasSize = {width,height}
createCanvas(canvasSize)
}
onMounted(()=>{
if(canvasType == 'export'){
data.isPresuppose = true
}else{
createCanvas({})
}
})
return {
canvasGeneral,
...toRefs(data),
setPresuppose,
}
}
});
</script>
<style lang='less' scoped>
.canvasContent_box{
height: 100%;
width: 100%;
// padding: 2rem;
background: #e6e6e6;
.canvasContent{
height: 100%;
width: 100%;
position: relative;
}
}
.generalCanvas_center{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
&.canvas{
}
&.presuppose{
display: flex;
align-items: center;
justify-content: center;
> div{
border: 1rem solid #6b6b6b;
color: #6b6b6b;
display: flex;
margin-right: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 900;
cursor: pointer;
border-radius: 4px;
&:last-child{
margin-right: 0;
}
&.presuppose16-9{
height: calc(30rem / 16 * 9);
width: 30rem;
}
&.presuppose1-1{
height: 30rem;
width: 30rem;
}
&.presuppose9-16{
height: 30rem;
width: calc(30rem / 16 * 9);
}
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
:deep(.canvas-container){
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
}
</style>

305
src/component/Canvas/detail.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<div class="detail" ref="detailDom"
@mousemove="mousemove($event)"
@touchmove="touchmove($event)"
>
<div class="layer">
<div class="layer-item button" @click="canvasGeneral.createLayer">
新建图层
</div>
<div class="layer-item-box-scroll">
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
<div class="layer-item"
v-for="item,index in layerList"
:key="item"
:style="item?.style"
@click="canvasGeneral.selectLayer(item.id)"
@mousedown="mousedown($event,item,index)"
@touchstart="touchstart($event,item,index)"
@contextmenu="openMenu($event,item,index)"
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
<img :src="item.img" alt="">
<div>
{{ item.name }}
</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
</div>
</div>
</div>
</div>
<div class="layer-menu" :style="styleMenu">
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
component:{},
setup(){
let canvasGeneral:any = inject('canvasObj')
const data = reactive({
detailDom:null as any,
layerList:computed(()=>canvasGeneral.layer.list) as any,
styleMenu:{
left:0+'px',
top:0+'px',
display:'none',
},
itemMenu:{} as any,
})
watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
sortedArr.forEach((item:any,index:any)=>{
item.index = sortedArr.length - index
})
data.layerList.forEach((item:any) => {
//图层高度50px 下边距10px
sortedArr.forEach((sortedArrItem:any)=>{
if(item.id == sortedArrItem.id){
item.index = sortedArrItem.index
}
let style = {
top:(data.layerList.length - item.index) * 60 + 'px',
transition:'all .3s',
}
item.style = style
})
});
},{immediate:true});
const incident:any = reactive({
isDown:false,
selectStyleTop:null,
selectStyle:null,
downPoint:null,
select:null,
radius:25,
})
const openMenu = (event:any,item:any,index:number)=>{
if(event.preventDefault)event.preventDefault();
data.itemMenu = item;
data.itemMenu.index = index
let position = data.detailDom.getBoundingClientRect();
data.styleMenu = {
left:event.clientX - position.left+'px',
top:event.clientY - position.top+'px',
display:'block',
}
}
document.onclick = ()=>{
data.styleMenu.display = 'none'
data.itemMenu = {};
}
let mousedown = (event:any,item:any,index:number)=>{
if(event.button != 0)return
let e:any = getMousePosition(event,false)
mouseDownOperation(e,item,index)
}
let ipadDownTime:any = null
let touchstart = (event:any,item:any,index:number)=>{
let e:any = getMousePosition(event,true)
mouseDownOperation(e,item,index)
clearTimeout(ipadDownTime)
ipadDownTime = setTimeout(()=>{
openMenu(e,item,index)
},1000)
}
let mouseDownOperation = (e:any,item:any,index:number)=>{
incident.isDown = true
incident.selectStyleTop = item.style.top
incident.selectStyle = item.style
incident.selectStyle.transition = 'none'
incident.select = item
incident.downPoint = e.clientY
}
let mousemove = (event:any)=>{
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = (event:any)=>{
let e:any = getMousePosition(event,true)
clearTimeout(ipadDownTime)
if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:any)=>{
if(incident.isDown){
let domTop = Number(incident.selectStyleTop.split('px')[0])
let gTop = domTop + (e.clientY - incident.downPoint)
if(gTop < 0){
gTop = 0
}
incident.select.style.top = gTop + 'px'
data.layerList.forEach((item:any,index:number) => {
let itemTop = Number(item.style.top.split('px')[0])
if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
let itemIndex = item.index
// if(gTop - itemTop > 0){
// console.log('从下往上');
// }
// if(gTop - itemTop < 0){
// console.log('从上往下');
// }
item.index = incident.select.index
incident.select.index = itemIndex
}
})
sort(data.layerList,'move')
}
}
const mouseUp = ()=>{
if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
if(incident.isDown){
if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
incident.selectStyleTop = null
incident.isDown = false
incident.selectStyle = null
incident.select = null
sort(data.layerList,'up')
}
}
document.onmouseup = mouseUp
document.ontouchend = mouseUp
//排序
let time:any = null
let sort = (list:any,str:string)=>{
clearTimeout(time)
// list = list.sort((a:any, b:any) =>{
// return b.index - a.index;
// });
list.forEach((item:any) => {
if(str == 'move'){
if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
}else{
item.style.top = (list.length - item.index) * 60 + 'px'
}
});
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
}
return {
canvasGeneral,
...toRefs(data),
openMenu,
mousedown,
touchstart,
mousemove,
touchmove,
}
}
});
</script>
<style lang='less' scoped>
.detail{
width: 100%;
height: 100%;
padding: 1rem;
border: 1px solid #dcdfe6;
position: relative;
* {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.layer{
display: flex;
flex-direction: column;
height: 100%;
.layer-button{
}
.layer-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem 2rem;
border: 1px solid #e6e6e6;
margin-bottom: 10px;
height: 50px;
border-radius: 4px;
i{
font-size: 18px;
}
&.active{
background: #e6e6e6;
}
.noDelete{
background: #e6e6e6;
opacity: .4;
pointer-events: none;
}
&.button{
justify-content: center;
cursor: pointer;
}
img{
height: 100%;
width: 35px;
object-fit: contain;
}
div{
cursor: pointer;
}
&:last-child{
margin-bottom: 0;
}
}
.layer-item-box-scroll{
flex: 1;
overflow-y: auto;
.layer-item-box{
position: relative;
.layer-item{
position: absolute;
width: 100%;
}
}
}
}
.layer-menu{
position: absolute;
width: 60%;
line-height: 4rem;
background: #fff;
border-radius: 4px;
border: 1px solid;
overflow: hidden;
>div{
border-bottom: 1px solid;
padding: 0 2rem;
cursor: pointer;
}
>div:hover{
background: #e6e6e6;
}
>div:last-child{
border-bottom: none;
}
}
}
</style>

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

@@ -0,0 +1,187 @@
<template>
<div class="generalCanvas">
<div class="argument-box">
<argument ref="argument" v-if="canvasObj.canvas"></argument>
</div>
<div class="canvasBox">
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
<div class="canvas">
<canvasContent ref="canvasContent"></canvasContent>
</div>
<div class="detail-box">
<detail ref="detail" v-if="canvasObj.canvas"></detail>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</template>
<script>
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import tool from "./tool.vue"
import argument from "./argument.vue"
import detail from "./detail.vue"
import canvasContent from "./canvasContent.vue"
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
components: {
tool,
argument,
detail,
canvasContent,
liquefaction,
},
setup(props,{emit}) {
const { t } = useI18n();
const store = useStore();
const isShowMark = ref(false)
const component = reactive({
argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
})
let liquefaction = ref(null)
let liquefactionData = ref()
let groupDashed = ref(null)//用来判断是否需要对group添加img
let canvasType = 'export'
let canvasObj = reactive(canvasGeneral)
provide('canvasType',canvasType)
provide('canvasObj',canvasObj)
provide('isShowMark',isShowMark)
const close = ()=>{
component.forEach((item)=>{
if(item.value.closeModal)item.value.closeModal()
})
}
let expoet = ()=>{
console.log( canvasObj.selectExport());
console.log( canvasObj.allExport());
}
const setLiquefaction = async ()=>{//进入液化页面
canvasObj.getLiquefactionImgObj().then((data)=>{
if(data?.img){
liquefactionData.value = data
liquefaction.value.init(data.img)
}else {
message.info(t('exportModel.jsContent6'))
return null;
}
})
}
const toolLiquefaction = ()=>{//工具点击按钮
setLiquefaction()
}
const submitLiquefaction = (rv)=>{//液化回参
canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
// liquefactionData.value.setSrc(rv, (value)=>{
// // liquefactionData.value.scaleToWidth(originalWidth);
// // liquefactionData.value.scaleToHeight(originalHeight);
// delete liquefactionData.value.minioUrl
// if(groupDashed.value && groupDashed.value._objects.length == 1){
// value.set({
// left:-groupDashed.value.width/2,
// top:-groupDashed.value.height/2,
// })
// groupDashed.value.insertAt(value)
// // canvasObj.addDashedImg(value)
// }
// canvasObj.canvas.renderAll();
// canvasObj.updateCanvasState()
// });
}
onMounted(() => {
});
onBeforeUnmount(()=>{
// canvasGeneral.canvasClear()
})
return {
isShowMark,
liquefaction,
canvasObj,
close,
expoet,
toolLiquefaction,
submitLiquefaction,
};
},
data(prop) {
return {
};
},
computed: {
},
watch: {
},
mounted() {},
methods: {
},
});
</script>
<style lang="less" scoped>
.generalCanvas{
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
.argument-box,
.canvasBox,
.detail-box{
:deep(i){
font-size: 2.5rem;
cursor: pointer;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .3s;
margin-bottom: .5rem;
&.active{
border: 1px solid;
border-radius: .4rem;
}
&.icon-xiala{
transform: rotate(-90deg);
}
&.icon-xialaActive{
transform: rotate(90deg);
}
}
}
.argument-box{
margin-left: 4rem;
height: 4rem;
margin-bottom: 1rem;
}
.canvasBox{
flex: 1;
overflow: hidden;
display: flex;
.canvas{
flex: 1;
overflow: hidden;
}
}
.detail-box{
width: 20%;
margin-left: 1rem;
}
}
</style>

54
src/component/Canvas/test.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<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"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<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>
<script lang="ts">
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import canvasIndex from './index.vue'
export default defineComponent({
components:{canvasIndex},
setup(){
let testModal = ref(true)
const init = ()=>{
testModal.value = true
}
const cancelDsign = ()=>{
testModal.value = false
}
return {
testModal,
init,
cancelDsign,
}
}
});
</script>
<style lang='less' scoped>
.box {
border: 1px solid #f00;
}
</style>

168
src/component/Canvas/tool.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div class="canvasTool">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<div class="label_item uploadImage">
<i class="icon fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
<div class="btnModal" v-show="isMove" :style="moveStyle">
<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
import {base64ToFile} from '@/tool/util'
import { Https } from "@/tool/https";
export default defineComponent({
component:{},
emits:['toolLiquefaction'],
setup(props,{emit}){
let canvasGeneral:any = inject('canvasObj')
let isShowMark:any = inject('isShowMark')
const data:any = reactive({
isMove:false,
moveStyle:{},
})
const uploadImage = (event:any)=>{
isShowMark.value = true
const file = event.target.files[0];
let input = event.target
setOperation('movePosition')
if (file) {
const reader = new FileReader();
reader.onload = (e:any) => {
let file = base64ToFile(e.target.result,'upload')
let formData = new FormData();
formData.append("file", file);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
rv.imgUrl = rv.minioUrl
isShowMark.value = false
canvasGeneral.addImage(rv)
})
input.value = ''
};
reader.readAsDataURL(file);
}
}
const historyState = (str:any)=>{
canvasGeneral.historyState(str)
}
const setOperation = (str:any)=>{
canvasGeneral.setOperation(str)
}
const openMore = (e:any)=>{
data.isMove=!data.isMove
if(data.isMove){
let domPoint = e.target.getBoundingClientRect()
let domParentPoint = e.target.parentElement.getBoundingClientRect()
const left = domPoint.left - domParentPoint.left;
const top = domPoint.top - domParentPoint.top;
data.moveStyle.top = top + 'px'
data.moveStyle.left = left + domPoint.width + 2 + 'px'
}
}
const setMore = ()=>{
data.isMove = false
}
let setLiquefaction = ()=>{
emit('toolLiquefaction')
}
document.addEventListener('click',setMore)
const closeModal = ()=>{
document.removeEventListener('click',setMore)
}
return {
canvasGeneral,
...toRefs(data),
uploadImage,
historyState,
setOperation,
openMore,
closeModal,
setLiquefaction,
}
}
});
</script>
<style lang='less' scoped>
.canvasTool::-webkit-scrollbar{
display: none;
}
.canvasTool{
display: flex;
flex-direction: column;
position: relative;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
&.leftAlign{
justify-content: flex-start;
}
.uploadImage{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
i{
zoom:.8;
}
input{
height: 0;
width: 0;
border: none;
}
}
.uploadImage{
position: relative;
input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
}
.btnModal{
position: absolute;
z-index: 2;
background: #fff;
top: 0;
border: 1px solid;
display: flex;
padding: .5rem 1rem;
border-radius: 4px;
}
}
</style>

51
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>
@@ -59,7 +67,7 @@
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
<i class="fi fi-rr-edit" v-show="!body" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>
@@ -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";
@@ -179,7 +185,6 @@ import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
@@ -188,7 +193,6 @@ export default defineComponent({
DesignDetailAlter,
setDesignItem,
magnifyingGlass,
setDesignItemMobile,
addDetails,
},
setup() {
@@ -199,6 +203,9 @@ export default defineComponent({
let designItemDetail :any = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
})
let parentData:any = ref({
design:{},
index:0,
@@ -219,7 +226,6 @@ export default defineComponent({
let body = ref(false)
let designItemId = ref()
let designOutfitId = ref()
let userInfo:any = {}
let ifSubmit = ref(false)
let designItemDetailUrl = ref({})
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
@@ -247,6 +253,7 @@ export default defineComponent({
return{
designItemDetail,
userDetail,
store,
parentData,
others,
@@ -256,7 +263,6 @@ export default defineComponent({
body,
designItemId,
designOutfitId,
userInfo,
ifSubmit,
designItemDetailUrl,
setRevocationShow,
@@ -381,8 +387,6 @@ export default defineComponent({
window.removeEventListener('beforeunload',beforeunload)
}
window.addEventListener('beforeunload',beforeunload)
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
// this.loadingShow = true
// Https.axiosGet(url).then(
@@ -463,7 +467,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()
}
@@ -779,7 +782,7 @@ export default defineComponent({
isPreview:false,
sketchString:'',
ifSubmit:designItemDetail.isPreview,
processId:String(this.userInfo?.userId),
processId:this.userDetail.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(str == 'preview'){
@@ -1165,26 +1168,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 +1727,5 @@ export default defineComponent({
}
</style>
<style lang="less">
.design_detail_modal_component{
}
</style>

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

@@ -1364,8 +1364,8 @@ export default defineComponent({
margin: 0;
margin-bottom: calc(2rem*1.2);
width: calc(9rem*1.2);
height: calc(9rem*1.2);
width: 10rem;
height: 10rem;
display: flex;
align-items: center;
justify-content: center;

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>

20
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; /* 对现代浏览器有效 */
@@ -950,6 +959,7 @@ export default defineComponent({
-ms-user-select: none; /* Internet Explorer/Edge */
.mark_loading{
position: absolute;
border-radius: 3rem;
}
.ant-modal-body{
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;

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

File diff suppressed because it is too large Load Diff

11
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,12 @@
>
<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 +76,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.addDetails_modal {
.closeIcon {
z-index: 2;

9
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'],
@@ -211,7 +203,6 @@ export default defineComponent({
}
let setClone = ()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')

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;

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

@@ -7,14 +7,19 @@
: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>
@@ -47,12 +52,10 @@
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
@@ -213,7 +216,6 @@ methods: {
.habitSetStyle_modal {
&.generalModel{
.ant-modal-body {
height: calc(55rem*1.2);
}
}

6
src/component/Detail/setDesignItem.vue
View File

@@ -35,7 +35,7 @@
</ul>
</div>
</div>
<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
<div class="subitOkPreviewBtn" @click="imgClear" style="margin-bottom: 0rem;">{{ $t('LibraryPage.Reset') }}</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
@@ -382,7 +382,6 @@ export default defineComponent({
//判断尺寸是否到边
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
@@ -747,7 +746,8 @@ export default defineComponent({
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: calc(1rem*1.2);
// margin-bottom: calc(1rem*1.2);
margin-bottom: 4rem;
width: calc(10rem*1.2);
text-align: center;
bottom: 0;

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>

268
src/component/DetailCopy/designDetail.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div ref="designDetailModal" class="designDetailModal">
<!-- designDetailShow -->
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<a-modal class="Guide_1_18 generalModel fullScreen"
v-model:visible="designDetailShow"
:footer="null"
:get-container="() => $refs.designDetailModal"
width="100%"
height="100%"
:maskClosable="false"
:mask="false"
:centered="true"
:keyboard="false"
:closable="false"
>
<div class="content">
<div class="nav">
<div class="back_home">
<div class="gallery_btn" @click="closeModal()">
<i class="fi fi-rs-house-chimney"></i>
</div>
</div>
<div class="nav_list">
<div class="nav_item active">
<img src="@/assets/images/icon/details_sketch.png" alt="">
<div class="detailText">Apparel</div>
</div>
<div class="nav_item">
<img src="@/assets/images/icon/details_print.png" alt="">
<div class="detailText">Print</div>
</div>
<div class="nav_item">
<img src="@/assets/images/icon/details_color.png" alt="">
<div class="detailText">Color</div>
</div>
<div class="nav_item">
<img src="@/assets/images/icon/details_elements.png" alt="">
<div class="detailText">Elements</div>
</div>
</div>
</div>
<div class="item">
<sketchLeft></sketchLeft>
</div>
<div class="item">
<model></model>
</div>
<div></div>
<div class="gallery_btn submit">Submit</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import sketchLeft from './sketchLeft.vue'
import model from './model/index.vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
components:{
sketchLeft,model
},
setup() {
const store = useStore();
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
})
const detailData = reactive({
designDetail:store.state.DesignDetailCopy.designDetail,
designDetailShow:false,
loadingShow:false,
})
const closeModal = ()=>{
detailData.designDetailShow = false
}
const showDesignDetailModal = (data:any,str:any)=>{
// this.moible = isMoible()
// this.designItemId = data.design.designItemId
// this.designOutfitId = data.design.designOutfitId
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
// let url = Https.httpUrls.getDesignDetail + `?designItemId=61204&designPythonOutfitId=60908`
// this.parentData = data
detailData.loadingShow = true
Https.axiosGet(url).then(
async (rv: any) => {
rv.clothes.forEach((item:any)=>{
let a
item.designType='Library'
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
if(item.printObject.prints == null)item.printObject.prints = []
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
element.designType = 'Library'
}
});
})
detailData.designDetailShow = true
store.commit('designDeatailCopy/setDesignDetail',rv)
// this.deleteShow = false
setRevocation(rv,'')
// if(rv.singleOverall == 'overall'){
// this.body = false
// }else{
// this.body = true
// }
// await this.setImgSize()
// this.generateHighDesignImg = rv.highDesignUrl
// this.designDetailShow = true
detailData.loadingShow = false
// await this.setImgSize()
}
).catch(rv=>{
detailData.loadingShow = false
})
}
const initialize = ()=>{//design后初始化
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
}
const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
}
onBeforeUnmount(()=>{
detailData.designDetail = null
})
return{
...toRefs(detailData),
closeModal,
showDesignDetailModal,
}
},
provide() {
return {
}
},
mounted(){
let beforeunload = () => {
window.removeEventListener('beforeunload',beforeunload)
}
window.addEventListener('beforeunload',beforeunload)
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
// this.loadingShow = true
// Https.axiosGet(url).then(
// async (rv: any) => {
// rv.clothes.forEach((item:any)=>{
// let a
// if(item.layersObject[0].imageCategory.indexOf("back") == -1){
// a = item.layersObject[0]
// item.layersObject[0] = item.layersObject[1]
// item.layersObject[1] = a
// }
// if(item.printObject.prints == null){
// item.printObject.prints = [{}]
// }
// })
// this.store.commit('setDesignItemDetail',rv)
// if(rv.others[0].printObject.path == null){
// this.body = false
// }else{
// this.body = true
// }
// this.setImgSize()
// this.generateHighDesignImg = rv.highDesignUrl
// this.designShowPrview = 1
// this.designDetailShow = true
// this.loadingShow = false
// }
// ).catch(rv=>{
// this.loadingShow = false
// })
},
})
</script>
<style lang="less" scoped>
:deep(.detailText){
font-size: 1.8rem;
font-weight: 600;
}
.designDetailModal{
position: relative;
top: -100%;
height: 100%;
:deep(.ant-modal-wrap){
position: absolute;
top: 0;
left: 0;
}
.content{
display: flex;
align-items: flex-start;
height: 100%;
width: 100%;
> .item{
height: 100%;
}
> .nav{
margin-right: 5rem;
> .back_home{
width: 9rem;
text-align: center;
> .gallery_btn{
width: 6rem;
height: 6rem;
border-radius: 50%;
}
}
> .nav_list{
margin-top: 2.7rem;
height: 38rem;
width: 9rem;
background: #f4f4f4;
border-radius: 1.4rem;
padding: 1.4rem 0;
> .nav_item{
text-align: center;
width: 100%;
height: calc((38rem - 1.4rem * 2) / 4);
cursor: pointer;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
> img{
width: 4rem;
height: 3.6rem;
object-fit: contain;
}
&.active{
background: #bdbdbd;
}
}
}
}
> .submit{
margin-left: auto;
}
}
}
</style>

0
src/component/DetailCopy/editSketchPosition.vue Normal file
View File

221
src/component/DetailCopy/libraryList.vue Normal file
View File

@@ -0,0 +1,221 @@
<template>
<div class="libraryList">
<div class="generalModel_state">
<div class="generalModel_state_item">
<a-select
v-model:value="designType"
:options="designTypeList"
@change="handleChange"
style="width:100%"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="generalModel_state_item">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
</div>
<div class="libraryList_box">
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
</div>
</div>
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
<img src="@/assets/images/homePage/loading.gif" alt="">
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components:{
sketchCategory
},
props:{
catecoryList:{
type:Object,
default:()=>[] as any,
required:true
}
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
isShowLoading:false,//懒加载，加载中
libraryList:[],
designTypeList:[] as any,
designType:'',
searchPictureName:'',
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const init = ()=>{
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
}
const selectImgItem = ()=>{
}
const getLibraryList = ()=>{
detailData.isShowLoading = true
let level2Type = ''
let workspace = store.state.Workspace.workspace
let data = {
level1Type:'Sketchboard',
// level2Type:'Pattern',
level2Type:detailData.designType,
modelSex:workspace?.sex,
page:getDetailListData.currentPage,
pictureName:detailData.searchPictureName,
size:getDetailListData.pageSize+detailData.libraryList.length,
}
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
rv.content.forEach((vItem:any)=>{
if(props.catecoryList){
props.catecoryList.forEach((item:any) => {
if(item.value == vItem.level2Type){
vItem.categoryValue = item.value
vItem.category = item.name
}
});
}
})
detailData.libraryList = rv.content
detailData.isShowLoading = false
getDetailListData.total = rv.total
}
).catch((res)=>{
detailData.isShowLoading = false
});
}
const handleChange = ()=>{
getDetailListData.currentPage = 1
detailData.libraryList = []
getLibraryList()
}
onMounted(()=>{
// getLibraryList()
})
return{
...toRefs(detailData),
...toRefs(getDetailListData),
init,
selectImgItem,
getLibraryList,
handleChange,
}
},
directives:{
observe:{
mounted (el,binding) {
// console.log(binding.instance);
let callback = (entries:any, observer:any)=> {
entries.forEach((entry:any) => {
if (entry.isIntersecting && !this_.isShowLoading) {
this_.getLibraryList()
} else {
}
});
}
const ob = new IntersectionObserver(callback,{
root:null,
threshold:[.5]
})
ob.observe(el)
// this.currentPage = +=1
// this.pageSize = 12
// currentPage
let this_:any = binding.instance
},
},
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.libraryList{
height: 100%;
display: flex;
flex-direction: column;
> .generalModel_state{
width: 100%;
> .generalModel_state_item{
width: 100%;
margin: 0;
position: relative;
> .search_icon_block{
position: absolute;
right: 5px;
width: calc(6rem - 4px);
height: calc(6rem - 4px);
color: #fff;
background: #000;
border-radius: 50%;
display: flex;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
> .generalModel_state_item:last-child{
margin-top: 2rem;
}
}
> .libraryList_box{
width: 100%;
flex: 1;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
justify-content: space-between;
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
position: relative;
margin-bottom: 2rem;
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
}
}
}
</style>

79
src/component/DetailCopy/model/index.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div class="modelindex">
<div class="detail_btn">
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
<!-- 层 -->
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
</div>
<div>
<position></position>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
export default defineComponent({
components:{
position,
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
designDetail:store.state.DesignDetailCopy.designDetail,
})
const getDetailListDom = reactive({
libraryList:null as any,
})
const showDesignImgDetail = ()=>{
}
const deleteNav = ()=>{
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
showDesignImgDetail,
deleteNav,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.modelindex{
width: 80rem;
height: 100%;
display: flex;
flex-direction: column;
padding-top: 3rem;
overflow: hidden;
}
</style>

228
src/component/DetailCopy/model/modelPosition.vue Normal file
View File

@@ -0,0 +1,228 @@
<template>
<div class="molepositon">
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @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 || ''">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @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" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
components:{
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
frontBack:{
front:{},
back:{},
body:{},
},
frontBackc:store.state.DesignDetailModule.designItemDetail,
designDetail:store.state.DesignDetailCopy.designDetail,
})
const getDetailListDom = reactive({
libraryList:null as any,
})
//设置尺寸
const itemSizeMousedown = (direction:any,event:any)=>{
// 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.offsetX-li
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
// }else{
// this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
// }
document.addEventListener('mousemove', sizeMouseMove);
document.addEventListener('touchmove', sizeTouchmove);
document.addEventListener('mouseup', sizeMouseup);
document.addEventListener('touchend', sizeMouseup);
}
const sizeMouseMove = (event:any)=>{
let e = getMousePosition(event,false)
sizeMouseMoveOperation(e)
}
const sizeTouchmove = (event:any)=>{
let e = getMousePosition(event,true)
sizeMouseMoveOperation(e)
}
const sizeMouseup = (e:any)=>{
// 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('mousemove',sizeMouseMove)
document.removeEventListener('touchmove',sizeTouchmove)
document.removeEventListener('mouseup',sizeMouseup)
document.removeEventListener('touchend',sizeMouseup)
}
const sizeMouseMoveOperation = (e:any)=> {
// 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.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
// h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.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 -imgDomWH.height - this.imgDom.offsetTop+'px'
// w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
// h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
// height = h+'px'
// // width = h*num+'px'
// }else if(this.direction == 'bottom'){
// num = width/height
// h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
// height = h+'px'
// // width = h*num+'px'
// }else if(this.direction == 'left'){
// this.frontBack.front[this.imgDomIndex].style.left = 'auto'
// this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
// w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
// width = w+'px'
// // height = w*num+'px'
// }
// //判断尺寸是否到边
// this.frontBack.front[this.imgDomIndex].style.width = width
// this.frontBack.front[this.imgDomIndex].style.height = height
}
// 设置移动
const mouseMove = (event:any)=>{
let e = getMousePosition(event,false)
mouseMoveOperation(e)
}
const touchmove=(event:any)=>{
let e = getMousePosition(event,true)
mouseMoveOperation(e)
}
const mouseup = (e:any)=> {
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
}
const mouseMoveOperation = (e:any)=>{
// let imgDomWH = this.imgDom.getBoundingClientRect()
// let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
// let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
// let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
// this.frontBack.front[this.imgDomIndex].style.left = x
// this.frontBack.front[this.imgDomIndex].style.top = y
}
const itemMoveMousedown = (index:any,e:any)=>{
// 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.offsetX-left
// this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
const showDesignImgDetail = ()=>{
}
const deleteNav = ()=>{
}
return{
...toRefs(detailData),
...toRefs(getDetailListDom),
itemSizeMousedown,
itemMoveMousedown,
showDesignImgDetail,
deleteNav,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.molepositon{
width: 80rem;
height: 100%;
display: flex;
flex-direction: column;
padding-top: 3rem;
> .designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
height: calc(100% - 1.2rem - 4.8rem - 20%);
// overflow: hidden;
>img{
z-index: 2;
position: relative;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
}
</style>

165
src/component/DetailCopy/sketchLeft.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="sketchLeft">
<div class="detailText">Current Print</div>
<div class="select_sketch">
<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
</div>
<div class="switch_type_list">
<div
@click.stop="openUpload()"
class="switch_type_item"
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
>
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
</div>
<div
@click.stop="openLibrary()"
class="switch_type_item"
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
>
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
</div>
</div>
<div class="sketch_content_list">
<div class="content_item" v-show="selectTitle == 'upload'">
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import libraryList from './libraryList.vue'
import uploadList from './uploadList.vue'
export default defineComponent({
components:{
libraryList,
uploadList,
sketchCategory,
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle:'upload',
loadingShow:false,
isShowLoading:false,//懒加载，加载中
sketchCatecoryList:computed(()=>{
return store.state.Workspace.workspacePosition
})
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const getDetailListDom = reactive({
libraryList:null as any,
})
const openUpload = ()=>{
detailData.selectTitle = 'upload'
}
const openLibrary = ()=>{
detailData.selectTitle = 'library'
getDetailListDom.libraryList.init()
}
const selectImgItem = ()=>{
}
return{
...toRefs(detailData),
...toRefs(getDetailListData),
...toRefs(getDetailListDom),
openUpload,
openLibrary,
selectImgItem,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.sketchLeft{
width: 34rem;
height: 100%;
display: flex;
flex-direction: column;
> .detailText{
margin-bottom: 1rem;
}
> .select_sketch{
width: 100%;
height: 23.5rem;
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
> .switch_type_list{
display: flex;
margin-bottom: 2.5rem;
> .switch_type_item:nth-child(1){
margin-right: 6.5rem;
}
> .switch_type_item{
position: relative;
cursor: pointer;
}
> .switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .select_swtich {
color: #000;
font-weight: 600;
transform: scale(1.15);
}
> .select_swtich::before {
width: 100%;
}
}
> .sketch_content_list{
flex: 1;
overflow: hidden;
> .content_item{
height: 100%;
margin-top: 1rem;
}
}
}
</style>

212
src/component/DetailCopy/uploadList.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div class="uploadList">
<div class="uploadList_box">
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
</div>
</div>
<div class="upload_item">
<div class="upload_file_item upload_component">
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
:maxCount="8"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => upFileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="uploadList.length != 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { getCookie } from "@/tool/cookie";
import { message,Upload} from 'ant-design-vue';
import {getUploadUrl} from '@/tool/util'
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
sketchCategory
},
props:{
catecoryList:{
type:Object,
default:()=>[] as any,
required:true
}
},
setup(props,{emit}) {
const {t} = useI18n();
const store = useStore();
const detailData = reactive({
isShowLoading:false,//懒加载，加载中
uploadList:[],
upload:{
isPin: 0,
level1Type: 'Sketchboard',
gender:store.state.Workspace.workspace.sex,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:getCookie("token"),
uploadUrl:getUploadUrl(),
})
const getDetailListData = reactive({
total:0,
pageSize:10,
currentPage:1,
})
const selectImgItem = ()=>{
}
const upFileUploadChange = (data:any)=>{
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
let type
if(props?.catecoryList){
if(res.data.level2Type){
props?.catecoryList.forEach((item:any) => {
if(item.value == res.data.level2Type){
file.categoryValue = item?.value;
type = item.value
file.category = item?.name;
}
});
}else{
file.categoryValue = props?.catecoryList?.[0].value;
type = props.catecoryList[0].value
file.category = props.catecoryList[0].name;
}
}
file.designType = res.data.designType
file.level2Type = type;
file.minIOPath = file.resData.minIOPath
let fileList = detailData.uploadList.filter(
(v:any) => v.status === "done"
);
detailData.uploadList = fileList
// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res = JSON.parse(file.xhr.response);
let index = -1;
detailData.uploadList.forEach((ele:any, index1) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
detailData.uploadList.splice(index, 1);
}
message.warning(res.errMsg);
}
}
const beforeUpload = (file:any)=>{
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(t('DesignDetailAlter.jsContent4'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(t('DesignDetailAlter.jsContent5'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
onMounted(()=>{
})
return{
...toRefs(detailData),
...toRefs(getDetailListData),
selectImgItem,
beforeUpload,
upFileUploadChange,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.uploadList{
height: 100%;
display: flex;
flex-direction: column;
> .uploadList_box{
width: 100%;
flex: 1;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
justify-content: space-between;
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
position: relative;
margin-bottom: 2rem;
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
align-items: center;
justify-content: center;
}
}
}
</style>

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

@@ -70,13 +70,11 @@ export default defineComponent({
isNoData:false,//如果数据为空就不加载
loadingShow:{},
})
let systemUser = computed(()=>{
return store.state.UserHabit.systemUser
})
let likeFile = (item:any,type:string) => {
}
let setBack = ()=>{
router.go(-1);
// router.push('/home/events')
}
let openButton = (data:any,index:number)=>{
if(filter.loadingShow[index]){
@@ -111,7 +109,6 @@ export default defineComponent({
})
return {
...toRefs(filter),
systemUser,
likeFile,
setBack,
openButton,
@@ -133,7 +130,7 @@ export default defineComponent({
.eventsDetail_page {
min-height: 100%;
width: 100%;
padding: 0 9rem;
padding: 0 6rem;
padding-top: 5rem;
&.active{

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

@@ -103,7 +103,8 @@
</div>
</div>
<div class="upload_file_item_scale" :style="[(driver__.driver && (driver__.index == 19 || driver__.index == 18))?'display :flex;':'']">
<a-upload
<div style="position: relative;">
<a-upload
:title="$t('ColorboardUpload.uploadTitle')"
:capture="null"
:max-count="1"
@@ -118,6 +119,7 @@
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
</div>
<div :title="$t('ColorboardUpload.selectTitle')" class="upload_file_item" @click="setPrintImg()">
<i class="fi fi-rr-picture"></i>
</div>
@@ -166,7 +168,6 @@ import { Https } from "@/tool/https";
import GO from "@/tool/GO";
import { defineComponent, h,ref,inject, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
@@ -181,6 +182,11 @@ export default defineComponent({
Sketch,
selectImgList,
},
props: {
collectionStep: {
type: Number,
}
},
setup(){
// console.log(isMoible());
let fileList = ref([])
@@ -236,6 +242,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'){
@@ -319,7 +352,6 @@ export default defineComponent({
level1Type:'Moodboard',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:'',
uploadUrl:'',
store:useStore(),
colorPickerVisible: true,
@@ -328,31 +360,11 @@ 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.uploadUrl = getUploadUrl()
})
// this.clearSelectColor()
// if ("EyeDropper" in window) {
// console.log(true);
@@ -932,6 +944,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;

263
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,17 @@
: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>
@@ -152,6 +161,22 @@
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</div> -->
</div>
<div class="shortcutKeys_box">
<div class="gallery_btn white" @click.stop="setCloseNav('shortcut')">
{{ $t('exportModel.ShortcutKeys') }}
<i class="icon iconfont icon-xiala" :class="closeNav.shortcut?'icon-rotate-tool':''" ></i>
</div>
<div class="shortcutKeys_list">
<div class="shortcutKeys_list_item" v-for="item in keysList" :key="item.name">
<div class="name">{{ item.name }}</div>
<div class="key">
<div v-if="!isWindow">{{ item.macKey }}</div>
<div v-else>{{ item.winDowKey }}</div>
</div>
</div>
</div>
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
</div>
@@ -161,16 +186,16 @@
<div class="exportCanvasBox_center_box exportCanvasBox_left">
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
<i class="icon iconfont icon-chehui" @click="historyState('')" :title="isWindow?'Ctrl+Z':'Command+Z'"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')" :title="isWindow?'Ctrl+Shift+Z':'Command+Ctrl+Z'"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}" :title="isWindow?'M':'M'"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}" :title="isWindow?'B':'B'"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}" :title="isWindow?'E':'E'"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<label class="uploadImage">
<label class="uploadImage" :title="isWindow?'Ctrl+O':'Command+O'">
<i class="fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
<input type="file" @change="uploadImage" accept="image/*">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
@@ -239,7 +264,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 +273,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,12 +313,13 @@
<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>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
<publish ref="publish" @clearPublish="clearPublish"></publish>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction" @clearLiquefaction="clearLiquefaction"></liquefaction>
</a-modal>
</div>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,onBeforeUnmount
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -318,14 +346,14 @@ export default defineComponent({
publish,
liquefaction,
},
props: ["msg", "sketchCatecoryList"],
props: ["msg", "sketchCatecoryList",'setTask'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
let driver__ = computed(()=>{
return store.state.Guide.guide
})
let isWindow = true
let showUpgradePlan = ref(false);
let canvas = ref({});
// let canvasDom = ref()
@@ -386,6 +414,12 @@ export default defineComponent({
"likeDesignCollectionList",
productData.key,
];
const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('windows') !== -1) {
isWindow = true
}else if(userAgent.indexOf('macintosh') !== -1 || userAgent.indexOf('mac os') !== -1) {
isWindow = false
}
createCanvas()
}
let setCanvasData = async (oldExportCanvas)=>{
@@ -521,6 +555,9 @@ export default defineComponent({
let createCanvas = (oldExportCanvas) => {
showUpgradePlan.value = true;
clearTimeout(submitCanvasContent)
setCanvasKeyDown()
// document.addEventListener("keydown", setCanvasKeyDown);
// document.addEventListener("keyup", clearCanvasKeyDown);
normalCanvasState.value = []
reverseCanvasState.value = []
allBoardData.value.likeDesignCollectionList =
@@ -531,8 +568,6 @@ export default defineComponent({
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", setCanvasKeyDown);
document.addEventListener("keyup", clearCanvasKeyDown);
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
@@ -559,12 +594,6 @@ export default defineComponent({
});
canvas.preserveObjectStacking = true;
//鼠标移动
// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
// canvas.wrapperEl.onmouseout = clearCanvasKeyDown;//document上添加按下和抬起事件
// canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
// canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:down", event=>setCanvasDown(event));
canvas.on("mouse:up", event=>setCanvasUp(event));
@@ -711,11 +740,6 @@ export default defineComponent({
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
// imgWidth =
// (canvasWH.value.width -
// (likeDesign - 1) * 20) /
// likeDesign;
}
return imgWidth
}
@@ -922,7 +946,6 @@ export default defineComponent({
centered:true,
onOk() {
showUpgradePlan.value = false;
canvas.off("mouse:out", clearCanvasKeyDown);
canvas.dispose();
position = {
//设置每个图形位置的初始值
@@ -965,7 +988,7 @@ export default defineComponent({
let closeNav = ref({
nav:false,
tool:false,
move:false,
shortcut:false,
})
let setCloseNav = (key)=>{
closeNav.value[key] = !closeNav.value[key]
@@ -1192,26 +1215,122 @@ export default defineComponent({
// let brushwork = ref('')
// 监听键盘的 keydown 和 keyup 事件
let keyDown = []
const keysList = [
{
name:useI18.t('exportModel.Painting'),
winDowKey:'B',
macKey:'B',
},{
name:useI18.t('exportModel.Eraser'),
winDowKey:'E',
macKey:'E',
},{
name:useI18.t('exportModel.Uncheck'),
winDowKey:'Ctrl + D',
macKey:'Command + D',
},{
name:useI18.t('exportModel.Revoke'),
winDowKey:'Ctrl + Z',
macKey:'Command + Z',
},{
name:useI18.t('exportModel.Retreat'),
winDowKey:'Ctrl + Shift + Z',
macKey:'Command + Ctrl + Z',
},{
name:useI18.t('exportModel.ReduceBrushSize'),
winDowKey:'[',
macKey:'[',
},{
name:useI18.t('exportModel.IncreaseBrushSize'),
winDowKey:']',
macKey:']',
},{
name:useI18.t('exportModel.DrinkingStraw'),
winDowKey:'I',
macKey:'I',
},{
name:useI18.t('exportModel.Copy'),
winDowKey:'Ctrl + C',
macKey:'Command + C',
},{
name:useI18.t('exportModel.Paste'),
winDowKey:'Ctrl + V',
macKey:'Command + V',
},{
name:useI18.t('exportModel.UploadOpenimage'),
winDowKey:'Ctrl + O',
macKey:'Command + O',
},
]
let canvasKeyDown = (event) => {
if(keyDown.indexOf(event.key)>-1){
let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','KeyE','KeyB','MetaLeft']
if(keys.indexOf(event.code) > -1){
event.preventDefault();
}
if(keyDown.indexOf(event.code)>-1){
}else{
keyDown.push(event.code)
if(event.key === 'Enter' && operation.value == 'fold'){
// console.log(keyDown.indexOf('ControlLeft') > -1 , keyDown.indexOf('MetaLeft') > -1, event.code == 'KeyC')
if(event.code === 'Enter' && operation.value == 'fold'){
foldEnd('Enter')
}else if(event.key === 'Delete'){
deleteObject()
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ' && keyDown.indexOf('ShiftLeft') > -1){
historyState('reverse')
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ'){
historyState('')
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyC') > -1){
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyC'){
copy()
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyV') > -1){
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyV'){
paste()
}else if(keyDown.indexOf('BracketLeft') > -1){
let width = canvasPencilWidth.value[operation.value]
canvasPencilWidth.value[operation.value] = (width - 5) < 3?3:(width - 5)
setPencilWidth()
}else if(keyDown.indexOf('BracketRight') > -1){
let width = canvasPencilWidth.value[operation.value]
canvasPencilWidth.value[operation.value] = (width + 5) > 50?50:(width + 5)
setPencilWidth()
}else if(keyDown.indexOf('KeyI') > -1){
getColor()//吸色
}else if(keyDown.indexOf('KeyM') > -1){
setOperation('move')
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
canvas.discardActiveObject().renderAll();
}else if((keyDown.indexOf('ControlLeft') > -1 || keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
let input = document.querySelector('.uploadImage input')
input.click()
}else if(keyDown.indexOf('KeyB') > -1){
// if(operation.value == 'pencil' || operation.value == 'texture'){
setOperation('pencil')
// }
}else if(keyDown.indexOf('KeyE') > -1){
// if(operation.value == 'pencil' || operation.value == 'texture'){
setOperation('eraser')
// }
}
}
}
let getColor = 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);
canvasPencilColor.value = result.sRGBHex;
setPencilColor()
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
}
let canvasKeyUp = (event) =>{
let keys = ['Enter','Delete','ControlLeft','KeyZ','ShiftLeft','KeyC','KeyV','BracketLeft','BracketRight','KeyI','KeyD','KeyO','KeyE','KeyB','MetaLeft']
if(keys.indexOf(event.code) > -1){
event.preventDefault();
}
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
@@ -1566,6 +1685,7 @@ export default defineComponent({
setFontFamily()
return
}
console.log(canvasPencilColor.value);
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
@@ -1968,6 +2088,12 @@ export default defineComponent({
userlikeGroupId:userlikeGroupId,
}
publishModal.init(data)
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
}
const clearPublish = ()=>{
document.addEventListener('keydown',canvasKeyDown);
document.addEventListener('keyup', canvasKeyUp);
}
let setSubmit = ()=>{
let data = setCanvasContent(false)
@@ -2025,11 +2151,15 @@ export default defineComponent({
updateCanvasState()
});
}
const clearLiquefaction = ()=>{
setCanvasKeyDown()
}
let setLiquefaction = ()=>{
const activeObjects = canvas.getActiveObjects(); // 获取选中的对象
if (activeObjects.length === 1 && activeObjects[0].type === 'image') {
liquefactionData = activeObjects[0]
liquefaction.value.init(activeObjects[0])
clearCanvasKeyDown()
} else {
message.info(useI18.t('exportModel.jsContent6'))
return null;
@@ -2057,10 +2187,14 @@ export default defineComponent({
fontFamily.value = arr[0].value
});
onBeforeUnmount(()=>{
clearCanvasKeyDown()
})
return {
toSvg,
t,
toSvg,
isWindow,//判断是window还是mac
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
pencilbtnStyle,//笔触按钮
@@ -2085,6 +2219,7 @@ export default defineComponent({
uploadImage,//上传图帕
setLayerIndex,//设置选中元素的层级
brushList,//笔触列表
clearPublish,
textureList,//材质列表
canvasPencilColor,//input选择颜色
canvasPencilWidth,//input选择宽度
@@ -2096,6 +2231,7 @@ export default defineComponent({
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
brushworkChange,//切换笔触的回调
keysList,
textureValueChange,//切换材质信息
brushworkValue,//当前笔触
textureValue,//当前材质
@@ -2118,6 +2254,7 @@ export default defineComponent({
//液化
liquefaction,
submitLiquefaction,
clearLiquefaction,
setLiquefaction,
};
},
@@ -2234,10 +2371,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;
}
@@ -2263,7 +2408,6 @@ export default defineComponent({
justify-content: space-between;
cursor: pointer;
position: sticky;
background: #f9fafb;
z-index: 2;
align-items: flex-start;
margin: 0 2rem;
@@ -2282,6 +2426,39 @@ export default defineComponent({
.exportCanvasBox_left_tool{
margin: 0;
}
.shortcutKeys_box{
position: relative;
.shortcutKeys_list{
display: none;
position: absolute;
z-index: 2;
width: 30rem;
max-height: 45rem;
background: #f7f8fa;
border-radius: 2rem;
right: 0;
overflow-y: auto;
padding: 2rem;
.shortcutKeys_list_item{
display: flex;
font-size: 1.8rem;
justify-content: space-between;
margin-bottom: 2rem;
>.key{
display: flex;
}
}
.shortcutKeys_list_item:last-child{
margin-bottom: 0;
}
}
&:hover{
.shortcutKeys_list{
display: block;
}
}
}
.label_item,label {
display: flex;
align-items: center;

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

@@ -15,7 +15,7 @@
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item">
<div class="upload_item" v-show="sketchboardList?.length != 0">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
@@ -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
@@ -195,6 +196,7 @@
</div>
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
</div>
</template>
<script lang="ts">
@@ -214,17 +216,22 @@ import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import createSlogan from "@/component/HomePage/createSlogan.vue";
import { useI18n } from "vue-i18n";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
export default defineComponent({
components: {
scaleImage,
generalMenu,
createSlogan,
sketchCategory,
UpgradePlan,
},
props: ["msg",'sketchCatecoryList','scene'],
setup(props) {
// console.log(prop.msg);
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let printModelList:any = ref([])
let sketchStyleList:any = ref([])
let printModel:any = ref({
@@ -252,7 +259,6 @@ export default defineComponent({
let driver__:any = inject('driver__')
let {t} = useI18n()
let isTest = ref()
let userInfo:any = {}
let generateTime:any = ref()
let generateProceedList:any = ref([])
let remGenerate:any = ref(false)
@@ -293,6 +299,7 @@ export default defineComponent({
speed.speedData = item
}
return {
userDetail,
searchPictureName,
searchPictureSeed,
store,
@@ -313,7 +320,6 @@ export default defineComponent({
driver__,
t,
isTest,
userInfo,
generateTime,
generateProceedList,
remGenerate,
@@ -361,8 +367,6 @@ export default defineComponent({
// item.id_ = GO.id++
// })
// this.store.commit("addGenerateFils", this.fileList);
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
@@ -588,7 +592,7 @@ export default defineComponent({
level2Type:level2Type,
text:sloganText,
seed:this.searchPictureSeed,
userId:this?.userInfo?.userId,
userId:this?.userDetail?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:this.speedData.value,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
@@ -602,21 +606,15 @@ export default defineComponent({
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
if(data.isTestUser){
if(rv.leftUsageCount >= 1){
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
}else if(rv.leftUsageCount == 0){
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
this.isGenerate = false
return
}
}
// rv.uniqueId.forEach((item:any) => {
// let arr:any = {}
// arr.taskId = item
// arr.status = 'execution'
// this.fileList.unshift(arr)
// });
// if(data.isTestUser){
// if(rv.leftUsageCount >= 1){
// message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
// }else if(rv.leftUsageCount == 0){
// message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
// this.isGenerate = false
// return
// }
// }
this.setGenerate(rv.uniqueId)
}
@@ -625,6 +623,26 @@ export default defineComponent({
this.isGenerate = false
clearInterval(this.remGenerateTime)
this.remGenerate = false
if(res.errCode === 2){
let this_ = this
Modal.confirm({
title: res.errMsg,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
zIndex:99999,
centered:true,
onOk() {
let UpgradePlan:any = this_.$refs.UpgradePlan
UpgradePlan.init()
},
onCancel(){
}
});
}
});
},
setGenerate(dataList:any){
@@ -701,7 +719,7 @@ export default defineComponent({
}
let data = {
uniqueId:str,
userId:this?.userInfo?.userId,
userId:this?.userDetail?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
type: type
}
@@ -790,12 +808,12 @@ 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){
if(this.driver__.driver && this.type_.type2 == 'Printboard'){
driverObj__.moveNext()
}
})
@@ -904,6 +922,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>
@@ -919,7 +963,7 @@ export default defineComponent({
position: relative;
// padding-top: calc(2.5rem*1.2);
.input_border{
padding-top: calc(2.5rem*1.2);
padding-top: 1rem;
}
.mark_loading{

1
src/component/HomePage/Header.vue
View File

@@ -420,7 +420,6 @@ export default defineComponent({
(rv) => {
if (rv) {
this.userInfo.email = this.email;
setCookie("userInfo", JSON.stringify(this.userInfo));
(this.bindEmailVisible = false),
(this.bindEmailStep = 1);
this.clearTimer();

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{

4
src/component/HomePage/PrintboardUpload.vue
View File

@@ -737,8 +737,8 @@ export default defineComponent({
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;

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

@@ -85,7 +85,6 @@ export default defineComponent({
let record:any = ref([
])
const userInfo:any = {}
let bloodBars:any = ref(0)
let {t} = useI18n()
let isTest = ref()
@@ -95,6 +94,9 @@ export default defineComponent({
return store.state.Guide.guide
})
let driver__Time:any = ref()
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
return {
robotTop,
robotInput,
@@ -104,14 +106,14 @@ export default defineComponent({
robotChildDom,
timeTop,
timeInput,
userInfo,
bloodBars,
t,
isTest,
store,
workspace,
driver__,
driver__Time
driver__Time,
userDetail
};
},
data() {
@@ -171,10 +173,8 @@ export default defineComponent({
},
mounted() {
this.textScroll()
let userInfo:any = getCookie("userInfo")
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.userInfo = JSON.parse(userInfo);
if (sessionStorage.getItem("record") == null) {
this.record = []
}else{
@@ -220,7 +220,7 @@ export default defineComponent({
this.createTimer()
},
getBloodBars(){
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this?.userInfo?.userId}}).then((rv: any) => {
Https.axiosGet(Https.httpUrls.getBloodBars,{params:{userId:this?.userDetail?.userId}}).then((rv: any) => {
if (rv) {
if(rv <= 0){
rv = 0
@@ -277,7 +277,7 @@ export default defineComponent({
// sessionStorage.removeItem
let a = true
let data = {
"user_id" : this.userInfo?.userId,
"user_id" : this.userDetail?.userId,
"session_id":sessionId,
"message" : this.chatCentent,
gender:this.workspace.sexEnum.value,
@@ -386,7 +386,7 @@ export default defineComponent({
likeFile(item:any,imgIndex:number,index:number){
let data = {
...item,
"userId" : this.userInfo?.userId,
"userId" : this.userDetail?.userId,
}
Https.axiosPost(Https.httpUrls.pictureLikeOrUnLike, data).then(
(rv) => {

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

@@ -221,7 +221,6 @@ export default defineComponent({
let {t} = useI18n()
let driver__:any = inject('driver__')
let isTest = ref()
let userInfo:any = {}
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
@@ -249,7 +248,6 @@ export default defineComponent({
t,
driver__,
isTest,
userInfo,
useGenerate,
scene,
openMenu,
@@ -347,8 +345,6 @@ export default defineComponent({
}
},
mounted() {
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
@@ -705,8 +701,8 @@ export default defineComponent({
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;

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

@@ -1,60 +1,33 @@
<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 +45,9 @@
</div>
</div>
</div>
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<payMethod ref="payMethod" @completePayment="cancelDsign" type="credits"></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 +105,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 +134,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 +147,12 @@ export default defineComponent({
showUpgradePlan,
planNum,
stepNum,
payMethod,
price,
modeOfPayment,
modeOfPaymentDetail,
clause,
productList,
payIndex,
isShowMark,
newWindow,
};
@@ -209,8 +184,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) => {
@@ -229,7 +208,8 @@ export default defineComponent({
}
},
payment(){//付款
let url = window.location.href
// let url = window.location.href
let url = window.location.origin+'/paySucceed'
// url = url.replace(/\/[^/]+$/, '') + '/home';
// console.log(url);
let parsedUrl = new URL(url);
@@ -315,7 +295,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 +337,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 +401,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>

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

@@ -28,9 +28,6 @@
<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
// import { Https } from "@/tool/https";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
// import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
// import domTurnImg from '@/tool/domTurnImg'

682
src/component/HomePage/bindEmail.vue Normal file
View File

@@ -0,0 +1,682 @@
<template>
<div ref="register"></div>
<a-modal
class="register generalModel"
:get-container="() => $refs.register"
v-model:visible="registerModel"
:footer="null"
:width="pageWidth"
:height="bindType == 'Modify'?'60rem':'70rem'"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="registerModelMask"
:keyboard="false"
:destroyOnClose="true"
>
<div class="generalModel_btn" v-if="bindType == 'Modify'">
<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="generalModel_btn back" v-if="bindType != 'Modify'">
<div class="generalModel_closeIcon" @click.stop="setBack()">
<span>←</span>
<span class="back_text">Back</span>
</div>
</div>
<div class="login_page">
<div class="page_content">
<!-- 账号密码和邮箱登录 start-->
<div class="login_content" >
<div class="login_content_left">
<div class="login_type_list">
<div
:class="[
'login_type_item','username_login_item',
'login_active',
]"
>
<span v-if="bindType == 'Modify'">Modify Email</span>
<span v-else>Bind personal information</span>
</div>
</div>
<!-- 账号密码登录 start -->
<!-- v-show="login$props.Type == 'username'" -->
<div >
<div class="login_form_content" :state="emailStap">
<div class="login_form_title marign_top30">Email</div>
<input
class="login_form_input"
:class="{active:(userDetail.email !== '-------------') && bindType != 'Modify'}"
placeholder="Enter your email address"
v-model="email"
:disabled="(userDetail.email !== '-------------') && bindType != 'Modify'"
@keydown.enter="submitPerLogin()"
/>
<div v-if="bindType != 'Modify'">
<div class="login_form_title marign_top30">{{$t('account.Country')}}:</div>
<div class="login_form_select">
<a-select
class="gallerySelect"
v-model:value="Country"
:disabled="!!userDetail.country"
size="large"
optionFilterProp="label"
style="width: 100%;"
:options="countryList"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="login_form_title marign_top30">{{$t('account.CompanyName')}}:</div>
<input class="login_form_input" :class="{active:!!userDetail.occupation}" :disabled="!!userDetail.occupation" type="text" placeholder="Please enter occupation" v-model="CompanyName">
</div>
<!-- 邮箱登录 start -->
<div class="login_form_email" :class="{active:emailStap===2}">
<div v-show="emailStap === 2" class="email_last_step">
<div class="email_last_step_block" >
<span class="email_last_step_content"
>Verify with one-time verification code</span
>
<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
</div>
<div class="email_last_step_bottom">
<div class="email_last_step_des">
<div class="sent_email_content">
Sent to {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>Resend</span
>
</div>
</div>
<VerificationCodeInput
:ct="emailCode"
@sendCaptcha="submitEmailLogin($event)"
></VerificationCodeInput>
<div class="email_last_step_des">
<div class="sent_email_content email_tip_content">
Please check the junk box if you haven't received verification code
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="login_submit_button marign_top40"
style="width: 100%;"
:state="emailStap"
@click="submitPerLogin()"
>
<span v-if="bindType == 'Modify'">Modify Email</span>
<span v-else>Submit</span>
</div>
</div>
<!-- 账号密码登录 end -->
</div>
<!-- 邮箱登录 end -->
</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,computed, 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";
import { country } from "@/tool/country";
import { useRouter } from "vue-router";
export default defineComponent({
components: {
VerificationCodeInput,
},
setup(prop, { emit }){
const bindType = ''
const router = useRouter()
let timer:any = 0;
const {locale} = useI18n()
const store = useStore();
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let register = reactive({
registerModel:computed(()=>{
return store.state.UserHabit.bindEmail.isBindEmail
}),
bindType:computed(()=>{
return store.state.UserHabit.bindEmail.type
}),
registerModelMask:true,
pageWidth:'45%',
Country:'',
CompanyName:'',
countryList:country,
email:'',
})
onMounted(()=>{
let country = userDetail.value.country
let CompanyName = userDetail.value.occupation
let email = userDetail.value.email
register.Country = country
register.CompanyName = CompanyName
register.email = email == '-------------'?'':email
})
return{
router,
store,
timer,
userDetail,
...toRefs(register),
locale
}
},
data() {
return {
checked:false,
emailStap: 1, // 邮箱登录步骤
emailCode: ["", "", "", "", "", ""], //邮箱验证码
emailNextStep: true,
frogetPasswordStep: 1, //忘记密码的步骤
forgetPasswordEmail: "",
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
forgetEmailValue: "", //忘记密码的邮箱验证码保存值
newPassword: "", //新密码
isCheckRobot: false,
time: 60, //60秒倒计时
passwordType:'password',
userId:'',
loginTime:true
};
},
methods: {
init(type:any){
let data = {
type,
isBindEmail:true
}
this.store.commit('setIsBindEmail', data)
this.emailLastStepFun()
},
//邮箱登录的下一步
emailNextStepFun() {
if (!isEmail(this.email)) {
message.info("The email format is incorrect");
return;
}
let data = {
email: this.email,
operationType: "LOGIN",
};
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
(rv: any) => {
if (rv) {
this.emailStap = 2;
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.createTimer();
}
}
);
},
//邮箱登录的上一步
emailLastStepFun() {
this.emailStap = 1;
this.email = "";
this.checked=false,
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
},
//改变勾选是否是机器人
checkRobot() {
this.isCheckRobot = !this.isCheckRobot;
},
//提交账号密码预先登录
submitPerLogin() {
//输入账号密码
if(this.emailStap>=2){
return;
}else{
//输入邮箱
if (!this.email) {
message.info("Please enter your email address");
return;
}
//判断邮箱格式是否正确
if (!isEmail(this.email)) {
message.info("The email format is incorrect");
return;
}
if (!this.CompanyName && this.bindType != 'Modify') {
message.info("Please enter occupation");
return;
}
if (!this.Country && this.bindType != 'Modify') {
message.info("Please select a country");
return;
}
let type = 'BIND_MAILBOX'
if(this.email == this.userDetail.email && this.bindType != 'Modify')type = 'UPDATE_USERINFO'
let data = {
"email": this.email,
"ip": "",
"operationType": type,
occupation:this.CompanyName,
country:this.Country
};
if(this.loginTime){
this.loginTime = false
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
(rv: any) => {
if(type == 'UPDATE_USERINFO')this.setSuccessLogin(rv)
this.emailStap = 2;
if (rv) {
this.userId = rv.userId
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.createTimer();
}
}
).catch(res=>{
this.emailStap = 1;
});
setTimeout(() => {
this.loginTime = true
}, 2000);
}
}
},
changePasswordType(){
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
},
setSuccessLogin(rv:any){
if (rv) {
let value = {
email:this.email,
occupation:this.CompanyName,
country:this.Country,
}
this.store.commit("upUserDetail", value)
window.location.reload();
this.cancelDsign()
}
},
//邮箱登录提交
submitEmailLogin(emailVerifyCode: any) {
let data = {
userEmail: this.email,
emailVerifyCode: emailVerifyCode,
};
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
(rv: any) => {
if(rv.token)setCookie("token", rv.token);
this.setSuccessLogin(rv)
}
).catch(res=>{
});
},
//创建定时器
createTimer() {
this.timer = setInterval(() => {
this.time--;
if (!this.time) {
clearInterval(this.timer);
}
}, 1000);
},
//清除定时器
clearTimer() {
this.time = 60;
if (this.timer) {
clearInterval(this.timer);
}
},
cancelDsign(){
this.store.commit('setIsBindEmail', false)
},
setBack(){
this.router.push({path:'/login'})
}
},
});
</script>
<style lang="less" scoped>
:deep(.register){
@media (max-width: 768px) {
// box-shadow: none;
// height: 100%;
margin: 0;
max-width: 95%;
&.generalModel{
.ant-modal-content{
// height: 100%;
}
.ant-modal-body{
padding: 6rem 4rem;
// height: 100%;
}
}
}
}
</style>
<style lang="less" scoped>
.generalModel_btn{
&.back{
.generalModel_closeIcon{
border-radius: 0;
right: auto;
left: 0;
border: none;
font-size: 2rem;
font-weight: 600;
transform: translate(100%, 100%);
.back_text{
text-decoration: underline;
}
span{
margin-right: .5rem;
}
}
}
}
.login_page {
width: 100%;
height: 100%;
.page_content {
// position: relative;
.login_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
// width: 60rem;
width: 80%;
background: #FFFFFF;
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 768px) {
padding: 0;
}
.login_content_left{
width: 100%;
.login_form_email{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background: #fff;
transform: scale(0);
transition: .3s all;
border: 2px solid;
border-radius: 20px;
.email_last_step{
width: 100%;
height: 100%;
#app{
height: auto;
}
}
}
.active{
transform: scale(1);
}
}
.login_type_list {
width: 100%;
display: flex;
.login_type_item {
text-align: center;
font-size: 3.6rem;
font-weight: bold;
color: #D7D7D7;
cursor: pointer;
height: 4rem;
line-height: 4rem;
&.login_active {
color: #030303;
}
}
}
.login_form_title {
font-size: 1.6rem;
// color: #666666;
font-weight: 900;
color: #000;
display: flex;
justify-content: space-between;
box-sizing: border-box;
label{
display: flex;
span{
font-size: 1.6rem;
margin-left: 10px;
font-weight: normal;
}
&.active{
pointer-events:none;
input{
pointer-events:none;
}
}
}
}
.login_form_content {
margin-top: 4rem;
position: relative;
&[state="2"]{
height: 30rem;
>*{
opacity: 0;
}
.login_form_email{
opacity: 1;
}
}
.password_input_block{
position: relative;
.password_show_icon{
position: absolute;
font-size: 2.4rem;
right: 2rem;
top:1.7rem;
cursor: pointer;
}
}
.gallerySelect{
margin-top: 1rem;
:deep(.ant-select-selector){
height: 5rem;
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
}
:deep(.ant-select-selector):hover{
border: 0.1rem solid #000;
}
}
.login_form_input {
width: 100%;
height: 5rem;
margin-top: 1rem;
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;
&.active{
color: #b8b8b8;
background: #f5f5f5;
}
&:hover{
border: 0.1rem solid #000;
}
&::placeholder {
color: #a5b0c2;
}
}
}
.email_last_step {
// margin-top: 4rem;
.email_last_step_bottom{
padding: 0 40px;
}
.email_last_step_block{
padding: 10px;
border-bottom: 2px solid;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.email_last_step_content {
margin-left: 1rem;
font-size: 2.2rem;
font-weight: bold;
color: #030303;
}
.email_last_step_block_icon{
cursor: pointer;
margin-right: 1rem;
height: 20px;
}
}
.fi-br-arrow-left {
font-size: 2.5rem;
font-weight: bold;
color: #030303;
transform: translateY(1rem);
display: inline-block;
}
}
.login_submit_button {
height: 5rem;
background: #000;
border-radius: 2.5rem;
line-height: 5rem;
text-align: center;
font-size: 1.8rem;
font-weight: 500;
color: #ffffff;
cursor: pointer;
transition: all .3s;
&:hover{
background: #3C3C3C;
}
&[state="2"] {
cursor: not-allowed;
}
}
.login_text {
font-size: 1.6rem;
margin-top: 4rem;
color: #151515;
display: flex;
justify-content: flex-end;
.forget_password_text{
cursor: pointer;
}
}
}
}
.marign_top20 {
margin-top: 2rem;
}
.marign_top22 {
margin-top: 2.2rem;
}
.marign_top30 {
margin-top: 3rem;
}
.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;
color: #343579;
cursor: pointer;
}
.email_last_step_des {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4rem;
margin-bottom: 2rem;
.sent_email_content {
font-size: 1.8rem;
font-weight: bold;
color: #a5b0c2;
}
.email_tip_content{
font-size: 1.4rem;
color: #030303;
}
}
}
</style>

86
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;
}
@@ -384,7 +426,7 @@ export default defineComponent({
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
z-index: 999;
align-items: center;
width: calc(35rem*1.2);
justify-content: space-between;
@@ -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>

16
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,12 @@
>
<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="22.5" stroke="#666666"/>
<rect x="32.5059" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5059 12)" fill="#666666"/>
<rect x="34.627" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.627 32.5059)" fill="#666666"/>
</svg>
</div>
</div>
@@ -81,8 +88,6 @@
<script>
import { defineComponent, ref, reactive, watch, onMounted, 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";
@@ -400,11 +405,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);

25
src/component/HomePage/generalMenu.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1">
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="$props.style_">
<a-popover v-if="isCanvas">
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
@@ -60,7 +60,6 @@ import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { getUploadUrl } from "@/tool/util";
import { getCookie } from "@/tool/cookie";
import { message, Upload, Modal } from "ant-design-vue";
export default defineComponent({
name:'filterComponent',
@@ -86,6 +85,10 @@ import { message, Upload, Modal } from "ant-design-vue";
driverClass:{
type:Object,
default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
},
style_:{
type:Object,
default:{}
}
},
emits:['setprintModel'],
@@ -170,7 +173,6 @@ import { message, Upload, Modal } from "ant-design-vue";
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
type_: {
type1: "generate",
@@ -183,7 +185,6 @@ import { message, Upload, Modal } from "ant-design-vue";
},
mounted() {
this.uploadUrl = getUploadUrl();
this.token = getCookie("token") || "";
this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
}
});
@@ -203,14 +204,15 @@ import { message, Upload, Modal } from "ant-design-vue";
>div{
// display: flex;
display: block;
width: calc(13rem*1.2);
border-radius: calc(1rem*1.2);
width: 20rem;
border-radius: 4rem;
margin: 0;
border: 2px solid;
border: 1px solid;
cursor: pointer;
padding: 0 calc(1rem*1.2);
padding: 1.5rem 2rem;
text-align: center;
display: flex;
font-size: 1.8rem;
justify-content: space-around;
> span{
white-space: nowrap;
@@ -224,7 +226,8 @@ import { message, Upload, Modal } from "ant-design-vue";
}
ul{
position: absolute;
width: calc(13rem*1.2);
border: 1px solid;
width: 20rem;
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
@@ -232,7 +235,7 @@ import { message, Upload, Modal } from "ant-design-vue";
z-index: 3;
li{
// background: rgba(0,0,0,.2);
background: #cccccc;
background: #fff;
line-height: 2;
cursor: pointer;
white-space: nowrap;
@@ -260,7 +263,7 @@ import { message, Upload, Modal } from "ant-design-vue";
}
.printModel_item:hover{
// background: rgba(0,0,0,.4);
background: #999999;
background: #f3f3f6;
color: #000;
}
}

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

1
src/component/HomePage/newPosted.vue
View File

@@ -40,7 +40,6 @@ 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:{

68
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,12 @@
>
<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">
@@ -22,8 +29,8 @@
<div class="modal_title_text_intro"></div>
</div>
<div class="productImg_content_bottom">
<div class="productImg_left">
<div class="Guide_1_32">
<div class="productImg_left Guide_1_32">
<div class="">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<!-- <span>{{$t('ProductImg.MagicTools')}}</span> -->
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
@@ -180,8 +187,8 @@
</div>
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu Guide_1_34" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setMenuShow(item)">
<i class="fi fi-rr-circle-ellipsis"></i>
<ul v-show="item.menuShow" class="Guide_1_35">
<li v-for="menuItem,index in productimgMenuList" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
<ul class="Guide_1_35" v-show="item.menuShow || (driver__.index == 48 && index == 0)">
<li v-for="menuItem,index in productimgMenuList" :class="[driver__.driver?'showEvents':'']" v-show="index != 0" @click.stop="setMenu(menuItem,item)" :key="menuItem.value">{{ menuItem.label }}</li>
</ul>
</div>
</div>
@@ -231,13 +238,15 @@
RelightDirectionList:RelightDirectionList,
}"
:isProductimg="true"></scaleImage>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
</a-modal>
</div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
@@ -251,15 +260,21 @@ import { useStore } from "vuex";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { openGuide,driverObj__ } from "@/tool/guide";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
export default defineComponent({
components:{
ExportModel,
scaleImage,
generalMenu,
generalMenu,UpgradePlan
},
props: ['setTask'],
setup(props,{emit}) {
const store = useStore();
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
const {t} = useI18n()
const upload:any = ref({})
let driver__:any = computed(()=>{
@@ -282,6 +297,7 @@ export default defineComponent({
likeList:[],
similarity:30,
brightenValue:1,
UpgradePlan
})
let productimgMenuList = ref([
{
@@ -416,6 +432,8 @@ export default defineComponent({
item.isChecked = !item.isChecked
if(item.isChecked){
if(driver__.value.driver){
let dom:any = document.querySelectorAll('.Guide_1_32')[0]
dom.scrollTop = dom.scrollHeight;
nextTick(()=>{
driverObj__.moveNext();
})
@@ -537,6 +555,25 @@ export default defineComponent({
productImgData.isProductimg = false
clearInterval(remPrductimgTime)
productImgData.remProductimg= false
if(res.errCode === 2){
Modal.confirm({
title: res.errMsg,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
zIndex:99999,
centered:true,
onOk() {
let UpgradePlan:any = productImgData.UpgradePlan
UpgradePlan.init()
},
onCancel(){
}
});
}
});
}
let generateProceedList:any = []
@@ -602,12 +639,11 @@ export default defineComponent({
productImgData.isProductimg = false
productImgData.remProductimg= false
clearInterval(prductimgTime)
let userInfo:any = getCookie("userInfo")
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
let data = {
uniqueId:str,userId:JSON.parse(userInfo).userId,
uniqueId:str,userId:userDetail.value.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
type:productimgMenu.value.value,
}
@@ -662,6 +698,8 @@ export default defineComponent({
generalIsMenuShow.menuShow = false
if(driver__.value.driver){
nextTick(()=>{
let dom:any = document.querySelectorAll('.Guide_1_32')[0]
dom.scrollTop = dom.scrollHeight;
driverObj__.moveNext();
})
}
@@ -878,17 +916,21 @@ methods: {
margin-bottom: 0;
}
.productImg_left{
overflow-y: auto !important;
width: 25%;
position: relative;
display: flex;
height: 100%;
flex-direction: column;
.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 +967,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;
@@ -942,9 +984,7 @@ methods: {
}
}
.productImg_content_item_generate_btn{
position: absolute;
bottom: 0;
top: auto;
margin-top: auto;
width: 100%;
justify-content: space-around;
.input_box{

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

@@ -0,0 +1,243 @@
<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">
{{ $t('Renew.title') }}
</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')">
{{ $t('Renew.Monthly') }}
</label>
<label>
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
{{ $t('Renew.Yearly') }}
</label>
</div>
<div class="info">{{ current.info }}</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</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" type="renew"></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";
import { useI18n } from "vue-i18n";
const md5 = require("md5");
export default defineComponent({
components: {
payMethod,
},
setup(){
const store = useStore();
const {t} = useI18n()
let renew = reactive({
renewModel:false,
renewModelMask:true,
pageWidth:'50%'
})
let renewData = reactive({
personage:{
title:t('Renew.PersonalVersion'),
price:{
monthly:'500',
year:'5,000',
},
unit:{
monthly:t('Renew.HKDMonth'),
year:t('Renew.HKDYear'),
},
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>

89
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,15 @@
: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>
@@ -23,7 +30,8 @@
<div v-if="isProductimg" class="productImg_modal">
<div class="productImg_left">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span>{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
@@ -103,7 +111,7 @@
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl">
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
@@ -117,7 +125,7 @@
</div>
<div class="nav_list" v-mousewheel>
<div class="nav_centent">
<img v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl" :key="item.id">
<img v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
</div>
</div>
<div class="nav_right">
@@ -127,21 +135,25 @@
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,toRefs,createVNode,reactive, nextTick} from "vue";
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
import { Https } from "@/tool/https";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { downloadIamge } from "@/tool/util";
import { getCookie,setCookie } from "@/tool/cookie";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
export default defineComponent({
components:{generalMiniCanvas},
components:{generalMiniCanvas,UpgradePlan},
props:{
productData:{
type:Object,
@@ -163,8 +175,12 @@ export default defineComponent({
},
setup(props:any,{emit}) {
const store = useStore();
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let {t} = useI18n()
let productimg = reactive({
UpgradePlan:null,
isProductimg:false,
productimgSearchName:'',
productimgIsTextarea:false,
@@ -236,6 +252,25 @@ export default defineComponent({
productimg.productimgIsProductimg = false
clearInterval(remPrductimgTime)
productimg.productimgRemProductimg = false
if(res.errCode === 2){
Modal.confirm({
title: res.errMsg,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
zIndex:99999,
centered:true,
onOk() {
let UpgradePlan:any = productimg.UpgradePlan
UpgradePlan.init()
},
onCancel(){
}
});
}
});
}
let generateProceedList:any = []
@@ -285,13 +320,12 @@ export default defineComponent({
productimg.productimgIsProductimg = false
productimg.productimgRemProductimg= false
clearInterval(prductimgTime)
let userInfo:any = getCookie("userInfo")
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
let data = {
uniqueId:str,
userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
userId:userDetail.value.userId,
type:scaleImageList.value[scaleImageIndex.value]?.resultType
}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
@@ -476,7 +510,7 @@ export default defineComponent({
},
});
</script>
<style>
<style scoped>
.scaleImage_modal{
overflow: visible !important;
}
@@ -487,6 +521,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 +533,37 @@ export default defineComponent({
height: 100%;
position: relative;
.productImg_modal{
position: absolute;
position: relative;
left: 0;
z-index: 9;
.productImg_left{
width: 100%;
display: flex;
height: 100%;
flex-direction: column;
.input_box_btnBox{
width: 100%;
}
.input_box{
justify-content: flex-end;
}
.productImg_content_item_generate_btn{
transform: translateY(100%);
// 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 +584,7 @@ export default defineComponent({
img{
// width: 50%;
height: 100%;
object-fit: contain;
object-fit: cover;
}
}
.img_operate_block{

18
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,16 +48,15 @@
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
@@ -115,11 +121,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);
}
}

19
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div class="plcaement_point_content" v-if="userDetail.userId == 88 || userDetail.userId == 83">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
@@ -137,10 +137,9 @@
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import { defineComponent,ref,createVNode,nextTick,computed} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
@@ -154,6 +153,9 @@ export default defineComponent({
},
setup() {
const store = useStore()
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
@@ -164,7 +166,6 @@ export default defineComponent({
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
let manager:any = ref(false)
let userInfo:any = ref()
let sex:any = ref({})
let sexList:any = ref([
@@ -174,6 +175,7 @@ export default defineComponent({
let {t} = useI18n()
return {
store,
userDetail,
oldLocationList,
locationList,
printObject,
@@ -184,7 +186,6 @@ export default defineComponent({
pointList,
isSubmit,
manager,
userInfo,
sex,
sexList,
cropperTime,
@@ -239,8 +240,6 @@ export default defineComponent({
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
// this.getSex()
},
methods:{
@@ -589,7 +588,7 @@ export default defineComponent({
// })
let cropper:any = this.$refs.cropper,
that = this
if((this.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){
if((this.modelType == 'System' && this.userDetail.userId == 88) || (this.modelType == 'System' &&this.userDetail.userId == 83)){
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
@@ -631,7 +630,7 @@ export default defineComponent({
},
async confrimSubmit(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
modelType = this.modelType
}
let param = {
@@ -659,7 +658,7 @@ export default defineComponent({
customRequest(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
modelType = this.modelType
}
let new_data = {

Some files were not shown because too many files have changed in this diff Show More