This commit is contained in:
X1627315083
2025-01-24 13:41:13 +08:00
parent d99705c137
commit 8d89737d98
15 changed files with 386 additions and 30 deletions

View File

@@ -41,8 +41,8 @@
<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 }}</span>
<span class="Modifiable notModifiable" v-else-if="isEditUserName">{{ $t('account.notModifiable') }}</span>
<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>

View File

@@ -212,6 +212,7 @@ export default defineComponent({
.bindPage_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
.bindPage_page_body{
.bind_item{
margin-bottom: 4rem;

View File

@@ -5,7 +5,13 @@
<div class="modal_title_text">
<div>{{ $t('cancelRenewal.cancelling') }}</div>
</div>
<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
<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">
@@ -51,21 +57,49 @@ export default defineComponent({
},
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:'',
reason:accountHomeData.textareaValue + str,
}
accountHomeData.isShowMark = true
Https.axiosGet(Https.httpUrls.cancelSubscription, {params:data})
@@ -100,6 +134,7 @@ export default defineComponent({
.cancelRenewal_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
>div{
display: flex;
flex-direction: column;
@@ -128,19 +163,28 @@ export default defineComponent({
border-radius: 1.4rem;
}
}
>textarea{
margin-top: 1.5rem;
width: 100%;
border-radius: 1.4rem;
border: 1px solid #D0D0D0;
height: 11rem !important;
font-size: 1.6rem;
transition: border .3s;
padding: 1.5rem;
}
>textarea:hover{
border: 1px solid #000;
>.cause_list{
> .cause_item{
display: flex;
input{
margin-right: 1rem;
}
}
>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;

View File

@@ -95,6 +95,7 @@ export default defineComponent({
.accountEdit_page{
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
.accountEdit_page_body{
width: 100%;
// width: 85rem;

View File

@@ -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){

View File

@@ -85,15 +85,76 @@ export default defineComponent({
return store.state.UserHabit.userDetail
})
const detailData = reactive({
designDetail:null,
designDetailShow:true,
loadingShow:false,
})
provide('designDetail',detailData.designDetail)
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'
}
});
})
setTimeout(() => {
detailData.designDetail = rv
}, 2000);
detailData.designDetailShow = true
// this.store.commit('setDesignItemDetail',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)=>{//设置撤销
}
return{
...toRefs(detailData),
closeModal,
showDesignDetailModal,
}
},
provide() {

View File

@@ -5,27 +5,30 @@
<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 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>
<!-- <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>21313</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
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();

View File

@@ -0,0 +1,233 @@
<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>
{{ designDetail }}
<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:{},
},
designDetail:inject('designDetail') as any//父组件传过来的数据
})
console.log(detailData.designDetail);
const getDetailListDom = reactive({
libraryList:null as any,
})
watch(detailData.designDetail,(newValue,oldValue)=>{
console.log(123123);
})
//设置尺寸
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>

View File

@@ -1273,6 +1273,7 @@ export default defineComponent({
if(keyDown.indexOf(event.code)>-1){
}else{
keyDown.push(event.code)
// 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'){
@@ -1311,7 +1312,6 @@ export default defineComponent({
// }
}
}
console.log(keyDown);
}
let getColor = async ()=>{
try {
@@ -1336,8 +1336,6 @@ export default defineComponent({
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
console.log(keyDown,'UP',event.code);
if(event.code == 'Backquote' && oldOperation){
// setOperation(oldOperation)
oldOperation = ''

View File

@@ -628,6 +628,13 @@ export default {
Interact:'互动',
hisWorks:'他的作品',
works:'作品',
//取消
jsContent1:'太贵了',
jsContent2:'系统不友好',
jsContent3:'太慢了',
jsContent4:'操作困难',
jsContent5:'教程不充足',
jsContent6:'无法生成需要的内容',
},
frontPage:{
BindWechat:'绑定微信',

View File

@@ -627,6 +627,13 @@ export default {
Interact:'interact',
hisWorks:'His works',
works:'Works',
//取消
jsContent1:'Too expensive',
jsContent2:'Sytem not user friendly',
jsContent3:'Too Slowy',
jsContent4:'Difficult to edit',
jsContent5:'Insufficlent Tutorial/Support',
jsContent6:'Unable to generate what you need',
},
frontPage:{
BindWechat:'Bind Wechat',

View File

@@ -211,7 +211,7 @@
<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
</KeepAlive>
<productImg ref="productImg" @setTask="setTask"></productImg>
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
<!-- 导出缩略图的蒙层 start-->
@@ -233,7 +233,7 @@
<!-- design collection的进度蒙层 end-->
<affiche ref="affiche"></affiche>
</div>
<!-- <DesignDetailcopy></DesignDetailcopy> -->
<!-- <DesignDetailcopy ref="designDetail" @finishRedesign="finishRedesign"></DesignDetailcopy> -->
</template>

View File

@@ -789,6 +789,7 @@ export default defineComponent({
margin: 1rem;
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
&.active{
#title {
font-size: 3rem;

View File

@@ -712,6 +712,7 @@ export default defineComponent({
margin: 1rem;
height: 100%;
overflow-y: auto;
padding-bottom: 2rem;
#main{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);