Merge remote-tracking branch 'origin/develop' into StableVersion
This commit is contained in:
X1627315083
3
.env.dev
3
.env.dev
@@ -4,8 +4,9 @@ NODE_ENV = 'development'
|
|||||||
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
||||||
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
||||||
VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
# VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
||||||
# 佩佩
|
# 佩佩
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
|
# VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
|
||||||
# 海波
|
# 海波
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
|
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
NODE_ENV = 'production'
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
# VUE_APP_BASE_URL = 'https://polyu.api.aida.com.hk'
|
|
||||||
VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
NODE_ENV = 'development'
|
|
||||||
# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
|
||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
|
||||||
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
|
||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
|
||||||
# 佩佩
|
|
||||||
VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
|
|
||||||
# 海波
|
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
# NODE_ENV = 'production'
|
|
||||||
NODE_ENV = 'development'
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
# NODE_ENV = 'production'
|
|
||||||
NODE_ENV = 'development'
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
NODE_ENV = 'production'
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
# VUE_APP_BASE_URL = 'https://polyu.api.aida.com.hk'
|
|
||||||
VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
NODE_ENV = 'development'
|
|
||||||
# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
|
||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
|
||||||
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
|
||||||
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
|
||||||
VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
|
|
||||||
# 佩佩
|
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
|
|
||||||
# 海波
|
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
|
|
||||||
@@ -1,607 +0,0 @@
|
|||||||
export default {
|
|
||||||
Header:{
|
|
||||||
hello:'你好',
|
|
||||||
HOME:'首页',
|
|
||||||
LIBRARY:'收藏',
|
|
||||||
HISTORY:'历史',
|
|
||||||
WORKS:'作品广场',
|
|
||||||
bindEmail:'绑定邮箱',
|
|
||||||
logOff:'退出登录',
|
|
||||||
Tutorial:'教程',
|
|
||||||
language:'中文',
|
|
||||||
skip:'跳过',
|
|
||||||
emailContent:'你绑定了的邮箱',
|
|
||||||
Email:'邮箱',
|
|
||||||
NextStep:'下一步',
|
|
||||||
verification:'输入验证码',
|
|
||||||
SentTo:'发送',
|
|
||||||
Resend:'重发',
|
|
||||||
Credits:'积分',
|
|
||||||
TaskList:'任务列表',
|
|
||||||
ViewOrders:'查询订单',
|
|
||||||
jsContent1:'邮箱格式不正确',
|
|
||||||
jsContent2:'绑定邮箱成功',
|
|
||||||
jsContent3:`已经长时间未操作，您必须活跃起来，否则将会在{numTime} S 后退出登录`,
|
|
||||||
},
|
|
||||||
allOrder:{
|
|
||||||
Time:'时间',
|
|
||||||
Serial:'序号',
|
|
||||||
Title:'名字',
|
|
||||||
Money:'金额',
|
|
||||||
Payment:'支付方式',
|
|
||||||
State:'状态',
|
|
||||||
Income:'支出',
|
|
||||||
Expend:'收入',
|
|
||||||
credits:'积分',
|
|
||||||
changedCredits:'积分变更',
|
|
||||||
changeEvent:'增加/减少积分',
|
|
||||||
createTime:'创建时间',
|
|
||||||
},
|
|
||||||
payOrder:{
|
|
||||||
OrderInformation:'订单详情',
|
|
||||||
CreditsInformation:'积分详情',
|
|
||||||
},
|
|
||||||
exportModel:{
|
|
||||||
EditExport:'编辑 & 导出',
|
|
||||||
CanvasSize:'画布大小',
|
|
||||||
Height:'高',
|
|
||||||
Width:'宽',
|
|
||||||
CanvasNav:'缩略图',
|
|
||||||
CanvasTool:'画布工具',
|
|
||||||
Color:'颜色',
|
|
||||||
Size:'大小',
|
|
||||||
Brushwork:'绘画',
|
|
||||||
Texture:'材质',
|
|
||||||
FillBack:'填充 & 边',
|
|
||||||
Layer:'层级',
|
|
||||||
More:'参数',
|
|
||||||
insufficient:'您的积分余额不足，如需使用此功能，请点击左上角充值',
|
|
||||||
HDExport:'转高清',
|
|
||||||
Save:'保存',
|
|
||||||
Share:'发布',
|
|
||||||
Export:'导出',
|
|
||||||
SR:'请选择需要超分的图片',
|
|
||||||
requiresCredits:'执行超分的图片需要消耗{data}积分',
|
|
||||||
Scale:'倍率',
|
|
||||||
Cancel:'取消',
|
|
||||||
jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
|
|
||||||
jsContent2:'我们只支持对印花进行超分',
|
|
||||||
jsContent3:'您的积分小于一次超分',
|
|
||||||
jsContent4:'您的积分余额不足',
|
|
||||||
jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
|
|
||||||
jsContent6:'请选择需要超分的图片',
|
|
||||||
jsContent7:'保存成功~',
|
|
||||||
},
|
|
||||||
upgradePlan:{
|
|
||||||
BuyCredlts:'购买积分',
|
|
||||||
credits:'积分',
|
|
||||||
organization:'积分再任意场景都可以使用',
|
|
||||||
CreditCard:'信用卡',
|
|
||||||
Alipay:'支付宝',
|
|
||||||
HongKong:'香港',
|
|
||||||
MainlandChina:'中国大陆',
|
|
||||||
Continue:'继续',
|
|
||||||
payment:'选择付款方式',
|
|
||||||
Cancel:'取消',
|
|
||||||
Payment:'付款',
|
|
||||||
policy1:'我承认我已阅读并同意',
|
|
||||||
policy2:'条款和条件',
|
|
||||||
policy3:'(包括服务范围)及',
|
|
||||||
policy4:'订购协议',
|
|
||||||
completed:'是否已完成支付？',
|
|
||||||
hint:'请保持窗口打开，直到付款完成。如果您无法打开付款窗口，请检查您的浏览器设置，看看弹出窗口是否被阻止。成功付款后，积分可能会延迟发放。请等待1-3分钟，点击积分刷新按钮',
|
|
||||||
Back:'返回',
|
|
||||||
},
|
|
||||||
taskPage:{
|
|
||||||
TaskList:'任务列表',
|
|
||||||
download:'下载',
|
|
||||||
|
|
||||||
},
|
|
||||||
Habit:{
|
|
||||||
Workspace:'工作空间',
|
|
||||||
WorkspaceSetting:'设置工作空间',
|
|
||||||
settingWorkspace:'调整您的工作空间',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单件',
|
|
||||||
System:'系统',
|
|
||||||
Designer:'设计师',
|
|
||||||
Mannequin:'模特',
|
|
||||||
Current:'当前',
|
|
||||||
User:'用户',
|
|
||||||
Style:'风格',
|
|
||||||
Select:'选择',
|
|
||||||
Clear:'清除',
|
|
||||||
jsContent1:'是否删除指定工作空间',
|
|
||||||
jsContent2:'请输入当前工作空间的名字',
|
|
||||||
jsContent3:'看到您换了风格。您是否愿意将目前使用的模特替换为系统推荐的模特?',
|
|
||||||
},
|
|
||||||
RobotAssist:{
|
|
||||||
inputContent1:"问我什么都行~",
|
|
||||||
jsContent1:"请输入生成内容~",
|
|
||||||
jsContent2:"欢迎来到AiDA。我是您友好的时尚设计助手。如果您有任何问题或需要帮助，请随时问我。",
|
|
||||||
jsContent3:"看来您可能是新用户，我很乐意为您介绍我们全新升级的AiDA系统。您现在要开始教程吗？",
|
|
||||||
jsContent4:"您可以随时告诉我要开始教程。",
|
|
||||||
jsContent5:"在开始教程之前，我们需要刷新页面。您现在要开始教程吗？",
|
|
||||||
},
|
|
||||||
HomeView:{
|
|
||||||
GetStarted:'开始设计',
|
|
||||||
Start:'开始',
|
|
||||||
Edit:'编辑',
|
|
||||||
Reset:'重置',
|
|
||||||
Design:'设计',
|
|
||||||
Redesign:'重新设计',
|
|
||||||
GeneratedDesign:'生成的设计',
|
|
||||||
SelectedDesign:'喜欢的设计',
|
|
||||||
Export:'导出',
|
|
||||||
moodboard:"情绪板",
|
|
||||||
printboard:"印刷板",
|
|
||||||
colorboard:"调色板",
|
|
||||||
sketchboard:"线稿板",
|
|
||||||
mannequins:"人体模型",
|
|
||||||
masnnequinHint:"您使用的模特与当前的衣服不匹配，这将导致生成的模型不使用所选的衣服",
|
|
||||||
FinalizeCollection:"完成系列",
|
|
||||||
jsContent1:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent2:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent3:'导出文件失败。',
|
|
||||||
jsContent4: "您的订阅将在 {days} 天 {hours} 小时后到期。为确保服务不中断，请点击此处续订->",
|
|
||||||
jsContent8: "续订订阅。",
|
|
||||||
jsContent7:"友情提示",
|
|
||||||
jsContent5:"我们很高兴让您体验AiDA 3.0。请注意，部分服务在试用期间可能会受到限制。如果您已经准备好全身心投入并享受完整的体验，我们诚挚地邀请您订阅。只需访问",
|
|
||||||
jsContent6:" 就可以开始订阅。感谢您试用我们的服务！",
|
|
||||||
jsContent9:"您确定要清除当前系列并重新开始吗?",
|
|
||||||
jsContent10:"二次创作的作品不允许使用'设计'，但是您可以使用'重新设计'",
|
|
||||||
},
|
|
||||||
ProductImg:{
|
|
||||||
Finalize:'完成',
|
|
||||||
SelectCollection:'选择的系列',
|
|
||||||
Upload:'上传',
|
|
||||||
MagicTools:'转换产品图工具',
|
|
||||||
Similarity:'相似度',
|
|
||||||
RelightDirection:'打光方向',
|
|
||||||
GenerateProduct:'生成的产品',
|
|
||||||
SelectedProduct:'选择的产品',
|
|
||||||
Export:'导出',
|
|
||||||
moreTitle:'更多工具',
|
|
||||||
ProductImage:'产品图',
|
|
||||||
Relight:'打光',
|
|
||||||
RightLight:'右侧光',
|
|
||||||
LeftLight:'左侧光',
|
|
||||||
TopLight:'顶部光',
|
|
||||||
BottomLight:'底部光',
|
|
||||||
Clear:'清空',
|
|
||||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
|
||||||
jsContent2:'请至少选择一张图片',
|
|
||||||
},
|
|
||||||
LibraryPage:{
|
|
||||||
Organize:'整理',
|
|
||||||
Upload:'上传',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
Reset:'重置',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
Delete:'删除',
|
|
||||||
Rename:'编辑',
|
|
||||||
Point:'点',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
intersection:'交集',
|
|
||||||
Tag:'标签:',
|
|
||||||
Select:'选择',
|
|
||||||
NoLabel:'空标签',
|
|
||||||
unionSet:'并集',
|
|
||||||
all:'全选',
|
|
||||||
generated:'所有默认材质都是AiDA自己生成',
|
|
||||||
ImageOnly:'图片',
|
|
||||||
TextOnly:'文字',
|
|
||||||
TextImage:'图片-文字',
|
|
||||||
inputContent2:'输入生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
Model1:'笔墨画风',
|
|
||||||
Model2:'插画画风',
|
|
||||||
Model3:'真实画风',
|
|
||||||
Name:'名字:',
|
|
||||||
Category:'类别:',
|
|
||||||
inputContent3:'输入生成图片的标题',
|
|
||||||
Cancel:'取消',
|
|
||||||
Sure:'保存',
|
|
||||||
Moodboard:'情绪板',
|
|
||||||
Prints:'印花',
|
|
||||||
Sketches:'服装',
|
|
||||||
DesignElements:'设计元素',
|
|
||||||
Mannequins:'模特',
|
|
||||||
model:'模型',
|
|
||||||
jsContent1:'你确定要删除选中图片吗？',
|
|
||||||
jsContent2:'你确定要删除选中图片吗？',
|
|
||||||
jsContent3:'您只能上传图片文件！',
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'图片已经上传是否继续上传',
|
|
||||||
jsContent6:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent7:'请输入内容~',
|
|
||||||
jsContent8:'上传失败',
|
|
||||||
jsContent9:'选择一张图片~',
|
|
||||||
},
|
|
||||||
HistoryPage:{
|
|
||||||
History:'历史',
|
|
||||||
StartDate:'开始日期',
|
|
||||||
EndDate:'结束日期',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
Detail:'细节',
|
|
||||||
Rename:'重命名',
|
|
||||||
Retrieve:'选择',
|
|
||||||
Delete:'删除',
|
|
||||||
inputContent2:'请输入新名称',
|
|
||||||
Submit:'保存',
|
|
||||||
CollectionsName:'名字',
|
|
||||||
source:'来源',
|
|
||||||
UptateTime:'修改时间',
|
|
||||||
SketchCounts:'草图数量',
|
|
||||||
Operations:'Operations',
|
|
||||||
jsContent1:'删除成功',
|
|
||||||
jsContent2:'您确定要删除这个收藏吗？',
|
|
||||||
jsContent3:'修改成功',
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'图片已经上传是否继续上传',
|
|
||||||
jsContent6:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent7:'请输入内容~',
|
|
||||||
},
|
|
||||||
ModelPlacement:{
|
|
||||||
Registration:'新增模特',
|
|
||||||
Submit:'保存',
|
|
||||||
Preview:'预览',
|
|
||||||
Back:'Back',
|
|
||||||
Restore:'重置',
|
|
||||||
System:'系统',
|
|
||||||
Library:'收藏',
|
|
||||||
Point:'点位',
|
|
||||||
RemovePoint:'删除点位',
|
|
||||||
mannequinHint:'模特背景图片请使用白色或者其他颜色来增强效果',
|
|
||||||
SHOULDER:'肩膀',
|
|
||||||
WAISTBAND:'腰部',
|
|
||||||
HAND:'手',
|
|
||||||
jsContent1:"您还没有保存，模特不会上传，确定要继续吗?",
|
|
||||||
jsContent2:'图片已经上传是否继续上传',
|
|
||||||
},
|
|
||||||
ModelPlacementMobile:{
|
|
||||||
Registration:'新增模特',
|
|
||||||
Submit:'保存',
|
|
||||||
Preview:'预览',
|
|
||||||
Back:'Back',
|
|
||||||
Restore:'重置',
|
|
||||||
System:'系统',
|
|
||||||
Library:'收藏',
|
|
||||||
Point:'点位',
|
|
||||||
RemovePoint:'删除点位',
|
|
||||||
mannequinHint:'模特背景图片请使用白色或者其他颜色来增强效果',
|
|
||||||
SHOULDER:'肩膀',
|
|
||||||
WAISTBAND:'腰部',
|
|
||||||
HAND:'手',
|
|
||||||
jsContent1:"您还没有保存，模特不会上传，确定要继续吗?",
|
|
||||||
jsContent2:'图片已经上传是否继续上传',
|
|
||||||
},
|
|
||||||
Upload:{
|
|
||||||
Delete:'删除',
|
|
||||||
Maximum2M:'您最多可以上传10张照片，每张照片不能超过5MB',
|
|
||||||
jsContent1:'您只能上传图片文件！',
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:'上传失败',
|
|
||||||
},
|
|
||||||
SketchboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
PIN:'PIN',
|
|
||||||
Maximum:'最多可上传{maxImg}张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的线稿',
|
|
||||||
inputContent1:'生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent1:"上传失败",
|
|
||||||
jsContent2:"您只能上传图片文件！",
|
|
||||||
jsContent3:'图片必须小于5MB',
|
|
||||||
jsContent4:"超过允许上传的最大图片数量",
|
|
||||||
jsContent5:"请选择一张图片",
|
|
||||||
jsContent6:"输入的内容超过允许输入的最大长度",
|
|
||||||
jsContent7:"请输入内容~",
|
|
||||||
},
|
|
||||||
PrintboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
PIN:'PIN',
|
|
||||||
Maximum:'最多可上传16张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的印花',
|
|
||||||
inputContent1:'生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
PatternTitle:'生成可在服装上完全平铺的重复设计图案。',
|
|
||||||
LogoTitle:'为文字内容创建艺术字体设计，适用于各种标语或短语。',
|
|
||||||
SloganTitle:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent1:"您只能上传图片文件！",
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:"超过允许上传的最大图片数量",
|
|
||||||
jsContent4:"请选择一张图片",
|
|
||||||
jsContent5:"输入的内容超过允许输入的最大长度",
|
|
||||||
jsContent6:"请输入内容~",
|
|
||||||
},
|
|
||||||
ColorboardUpload:{
|
|
||||||
Thumbnail:'选择的颜色缩略图',
|
|
||||||
Clear:'清除',
|
|
||||||
Palette:'调色板',
|
|
||||||
HEX:'HEX',
|
|
||||||
RGBA:'RGBA',
|
|
||||||
UploadImage:'上传图片',
|
|
||||||
ColorCode:'颜色代码',
|
|
||||||
SelectSuccessively:'连选',
|
|
||||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
|
||||||
SelectSuccessivelyOffTitle:'连续选色模式关闭.',
|
|
||||||
SelectSeparately:'单选',
|
|
||||||
ExtractColor:'提取颜色',
|
|
||||||
Single:'单色',
|
|
||||||
Gradual:'渐变',
|
|
||||||
Alignment:'线性',
|
|
||||||
uploadTitle:'从本地上传图片',
|
|
||||||
selectTitle:'从情绪版或印花版选择图片',
|
|
||||||
jsContent1:"您的浏览器不支持",
|
|
||||||
jsContent2:"找不到这个TCX的颜色",
|
|
||||||
jsContent3:"您只能上传图片文件！",
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:"请输入正确的TCX值",
|
|
||||||
jsContent6:"请至少选择一个情绪版或者印花",
|
|
||||||
},
|
|
||||||
selectImgList:{
|
|
||||||
SelectImg:'选择图片',
|
|
||||||
Clear:'关闭',
|
|
||||||
},
|
|
||||||
MoodboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Delete:'删除',
|
|
||||||
Maximum:'最多可上传8张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的情绪板',
|
|
||||||
layout:'布局',
|
|
||||||
selected:'当前的情绪版布局',
|
|
||||||
Edit:'编辑',
|
|
||||||
jsContent1:'您最多可以选择8张图片',
|
|
||||||
jsContent2:"上传失败",
|
|
||||||
jsContent3:"您只能上传图片文件！",
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'请点击布局进行随机排序',
|
|
||||||
},
|
|
||||||
Cropper:{
|
|
||||||
Cutpicture:'切图',
|
|
||||||
Finish:'完成',
|
|
||||||
Cancel:'取消',
|
|
||||||
CropPreview:'缩略图',
|
|
||||||
},
|
|
||||||
Material:{
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
PIN:'PIN',
|
|
||||||
},
|
|
||||||
MarketingSketchUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
MyLibrary:'我的收藏',
|
|
||||||
maximumLength:'最多可以上传15张照片，每张照片不能超过5MB',
|
|
||||||
jsContent1:'上传失败',
|
|
||||||
jsContent2:"您只能上传图片文件！",
|
|
||||||
jsContent3:'图片必须小于5MB',
|
|
||||||
jsContent5:'超过允许上传的最大图片数量',
|
|
||||||
},
|
|
||||||
layout:{
|
|
||||||
MoodBoardDesign:'设计情绪板',
|
|
||||||
LayerOptions:'图层选项',
|
|
||||||
Submit:'保存',
|
|
||||||
},
|
|
||||||
Generate:{
|
|
||||||
ImageOnly:'图片',
|
|
||||||
TextOnly:'文字',
|
|
||||||
TextImage:'图片-文字',
|
|
||||||
Model1:'笔墨画风',
|
|
||||||
Model2:'插画画风',
|
|
||||||
Model3:'真实画风',
|
|
||||||
inputContent1:'输入生成图片的标题',
|
|
||||||
Generate:'生成',
|
|
||||||
Sequence:'队列',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
Merge:'合成',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
|
||||||
Model:'模型',
|
|
||||||
uploadTitle:'上传参考图',
|
|
||||||
sloganTitle:'输入文字内容',
|
|
||||||
jsContent1:"您只能上传图片文件！",
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:"请输入内容~",
|
|
||||||
jsContent4:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent5:"请输入内容~",
|
|
||||||
jsContent6:"您最多可以选择8张图片",
|
|
||||||
jsContent7:"上传失败",
|
|
||||||
jsContent8:"您{str}还有{num}次生成额度。",
|
|
||||||
jsContent9:"您的{str}生成额度已用完。",
|
|
||||||
jsContent10:"请完成标语图片",
|
|
||||||
jsContent11:"看到输入的内容可能存在重叠,重叠会影响最终效果哦~",
|
|
||||||
jsContent12:"最少需要创建一个文字",
|
|
||||||
},
|
|
||||||
collectionModal:{
|
|
||||||
Moodboard:'情绪板',
|
|
||||||
Printboard:'印花板',
|
|
||||||
Colorboard:'颜色板',
|
|
||||||
Sketchboard:'线稿板块',
|
|
||||||
MoodCollection:'为您的系列选择情绪版',
|
|
||||||
PrinCollection:'为您的系列选择印花版',
|
|
||||||
ColorCollection:'为您的系列选择颜色版',
|
|
||||||
SketchCollection:'为您的系列选择线稿版',
|
|
||||||
jsContent1:'因为您选择了多张图片，请点击布局后继续.',
|
|
||||||
jsContent2:'上传的文件不会保存，是否继续? ',
|
|
||||||
jsContent3:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent5:"我们检测到您的({str})上的PIN数量超过了八个，这可能会导致一些已钉住的项目未被使用。您是否仍要继续？",
|
|
||||||
},
|
|
||||||
DesignDetail:{
|
|
||||||
Details:'详情',
|
|
||||||
EditDetails:'编辑设计的细节',
|
|
||||||
editTitle:'修改单品',
|
|
||||||
DetailTitle:'删除单品',
|
|
||||||
compareTitle:'对比',
|
|
||||||
Submit:'保存',
|
|
||||||
CurrentApparel:'当前服装',
|
|
||||||
editSketchTitle:'修改草图',
|
|
||||||
CurrentPrint:'当前印花',
|
|
||||||
CurrentColor:'当前颜色',
|
|
||||||
},
|
|
||||||
DesignDetailAlter:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
Palette:'调色板',
|
|
||||||
HEX:'HEX',
|
|
||||||
RGBA:'RGBA',
|
|
||||||
UploadImage:'上传图片',
|
|
||||||
Delete:'删除',
|
|
||||||
ColorCode:'颜色代码',
|
|
||||||
jsContent1:"您的浏览器不支持",
|
|
||||||
jsContent2:"您最多可以选择8张图片",
|
|
||||||
jsContent3:"上传失败",
|
|
||||||
jsContent4:'您只能上传图片文件！',
|
|
||||||
jsContent5:'Image must smaller than 5MB!',
|
|
||||||
jsContent6:"找不到这个TCX的颜色",
|
|
||||||
},
|
|
||||||
addDetails:{
|
|
||||||
AddDetails:'添加细节',
|
|
||||||
submit:'保存',
|
|
||||||
jsContent1:'请至少绘制一条线段',
|
|
||||||
},
|
|
||||||
DesignDetailEnd:{
|
|
||||||
NewApparel:'选择的服装',
|
|
||||||
NewPrint:'选择的印花',
|
|
||||||
Placement:'模式',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单个',
|
|
||||||
NewColor:'选择的颜色',
|
|
||||||
preview:'预览',
|
|
||||||
Layout:'布局',
|
|
||||||
jsContent1:'请选择印个印花',
|
|
||||||
jsContent2:'请选择颜色',
|
|
||||||
},
|
|
||||||
DesignPrintOperation:{
|
|
||||||
Placement:'调整位置',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单件',
|
|
||||||
Scale:'Scale',
|
|
||||||
Random:'随机',
|
|
||||||
inputContent:'输入名字进行搜索',
|
|
||||||
preview:'预览',
|
|
||||||
isOverall:'图案图像不能在单件模式下使用',
|
|
||||||
jsContent1:'以上更改尚未保存，您确定要继续吗？',
|
|
||||||
},
|
|
||||||
uploadFile:{
|
|
||||||
jsContent1:'您最多可以选择{maxImg}张图片哦',
|
|
||||||
},
|
|
||||||
isTest:{
|
|
||||||
available:"此功能对试用用户不可用。",
|
|
||||||
src:"此功能对试用用户不开放，请访问进行订阅。",
|
|
||||||
userName:'试用用户',
|
|
||||||
loginIsTest:"您是试用用户，试用期到 {date}。为了用户数据的安全，我们不会保存试用用户上传的任何个人数据，并会在每次注销后擦除个人数据。如果您需要订阅，请点击 ->",
|
|
||||||
image:'由于您是试用用户，您只能上传10张图片。'
|
|
||||||
},
|
|
||||||
setLabel:{
|
|
||||||
EditTag:'编辑标签',
|
|
||||||
jsContent1:'请输入标签名称',
|
|
||||||
},
|
|
||||||
works:{
|
|
||||||
all:'全部',
|
|
||||||
FavoriteWorks:'点赞的作品',
|
|
||||||
MyWorks:'我的作品',
|
|
||||||
},
|
|
||||||
Publish:{
|
|
||||||
Publish:'发布',
|
|
||||||
CoverPicture:'封面图',
|
|
||||||
CollectionTitle:'系列名字',
|
|
||||||
Description:'描述',
|
|
||||||
Permissions:'权限',
|
|
||||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
|
||||||
Close:'关闭',
|
|
||||||
UpdatePublish:'更新发布',
|
|
||||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
|
||||||
jsContent2:'请输入您的作品名称',
|
|
||||||
jsContent3:'这将把您的作品发布到广场上，供所有用户查看。请确认是否发布?',
|
|
||||||
jsContent4:'发布成功!你可以在我的作品中找到',
|
|
||||||
},
|
|
||||||
newScaleImage:{
|
|
||||||
Collection:'系列',
|
|
||||||
SecondaryCreation:'二次创作',
|
|
||||||
CreationTime:'创建时间',
|
|
||||||
UpdateTime:'更新时间',
|
|
||||||
Comment:'评论',
|
|
||||||
NoComments:'没有评论',
|
|
||||||
first:'你可以成为第一个评论',
|
|
||||||
reply:'回复',
|
|
||||||
unfold:'展开',
|
|
||||||
Collapse:'折叠',
|
|
||||||
Title:'标题',
|
|
||||||
Original:'原创',
|
|
||||||
from:'源自',
|
|
||||||
Delete:'删除',
|
|
||||||
Describe:'描述',
|
|
||||||
replyAll:'所有回复',
|
|
||||||
jsContent1:'请先登录或者升级为正式用户',
|
|
||||||
jsContent2:'作者不允许二次创作',
|
|
||||||
jsContent3:'请输入评论内容',
|
|
||||||
jsContent4:'是否删除当前评论',
|
|
||||||
jsContent5:'是否删除当前作品',
|
|
||||||
jsContent6:'作品被作者删除',
|
|
||||||
},
|
|
||||||
guide:{
|
|
||||||
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
|
|
||||||
guide2:"选择您要设计的服装性别。",
|
|
||||||
guide3:'在此更改人体模型。',
|
|
||||||
guide4:'您目前可以从我们的系统库中选择人体模型。稍后，您还可以在注册自己的人体模型后从用户库中进行选择。',
|
|
||||||
guide5:'在这里开始您的创意之旅。 ',
|
|
||||||
guide6:'对于情绪板、印花或服装，我们提供三种不同的图片添加方法。第一种选择是<strong>上传</strong>，允许您直接从本地设备上传。',
|
|
||||||
guide7:"第二种方法是从您的<strong>收藏</strong>中选择。<br> 您可能会注意到您的库页面目前是空的；不必担心。您上传的所有图像都将自动添加到您的库中。将来，您无需每次上传，只需从您的库中选择即可。",
|
|
||||||
guide8:'第三种方法是使用最新的图像生成技术<strong>生成</strong>图像。',
|
|
||||||
guide9:"输入捕捉您希望表达的情绪的关键词，然后单击<strong>生成</strong>按钮。",
|
|
||||||
guide10:'为您的心情板选择两个图像。',
|
|
||||||
guide11:"点击此处布局您的情绪版。",
|
|
||||||
guide12:"点击此处生成印花图片。",
|
|
||||||
guide13:"点击此处生成印花图片。",
|
|
||||||
guide14:"我们为生成图片提供三个输入选项：仅图片、仅文本和图片文本。",
|
|
||||||
guide15:"选择此选项，我们将使用您上传的图片和输入的文本生成四张印花图片。",
|
|
||||||
guide16:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
|
|
||||||
guide17:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
|
|
||||||
guide18:"在此处上传输入图片。",
|
|
||||||
guide19:"点击此图片进行选择。",
|
|
||||||
guide20:"输入关于您希望创建的印花的关键词，然后点击<strong>生成</strong>按钮。",
|
|
||||||
guide21:"选择您最喜欢的生成印花。",
|
|
||||||
guide22:"点击此处进行下一步。",
|
|
||||||
guide23:"点击此处从图像中提取主要颜色。",
|
|
||||||
guide24:"从这些颜色块中选择您想要的第一种颜色。",
|
|
||||||
guide25:"点击此块选择第二种颜色。",
|
|
||||||
guide26:"从这些颜色块中选择您想要的颜色。",
|
|
||||||
guide27:"点击此处进行下一步。",
|
|
||||||
guide28:"点击此处生成服装草图。",
|
|
||||||
guide29:"使用仅文本选项进行生成。",
|
|
||||||
guide30:"输入关于您希望创建的草图的关键词，然后点击<strong>生成</strong>按钮。",
|
|
||||||
guide31:"点击此处为生成的草图选择一个类别。",
|
|
||||||
guide32:"为草图选择正确的类别。",
|
|
||||||
guide33:"选择您最喜欢的生成草图。",
|
|
||||||
guide34:"点击此处完成上传过程。",
|
|
||||||
guide35:"点击此处让AI生成设计插图。",
|
|
||||||
guide36:"请稍候几秒钟。",
|
|
||||||
guide37:"点击小红心保存您喜欢的设计。",
|
|
||||||
guide38:"点击“<strong>重新设计</strong>”以生成八个新的服装供您选择。",
|
|
||||||
guide39:"点击此处让AI生成设计插图。",
|
|
||||||
guide40:"点击您感兴趣的任何设计图片以修改细节。",
|
|
||||||
guide41:"点击衣服以修改其细节。",
|
|
||||||
guide42:"点击此处添加或更改印花。",
|
|
||||||
guide43:"您可以在收藏中找到您之前上传的印花。",
|
|
||||||
guide44:"为此草图选择一个印花。",
|
|
||||||
guide45:"点击此处布局所选印花。",
|
|
||||||
guide46:"在此处预览印刷设计。",
|
|
||||||
guide47:"在此处保存印刷设计。",
|
|
||||||
guide48:"点击此处完成修改。",
|
|
||||||
guide49:"点击此处导出您刚刚设计的系列。",
|
|
||||||
guide50:"您的指南已经完成，现在您可以自由创作。要了解更多见解和细节，请查看我们主页上的演示视频：<a href='https://code-create.com.hk/aida/' style='pointer-events: auto;' target='_blank'>https://code-create.com.hk/aida/</a>。您可以随时告诉机器人您想重新开始教程。",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,607 +0,0 @@
|
|||||||
export default {
|
|
||||||
Header:{
|
|
||||||
hello:'你好',
|
|
||||||
HOME:'首页',
|
|
||||||
LIBRARY:'收藏',
|
|
||||||
HISTORY:'历史',
|
|
||||||
WORKS:'作品广场',
|
|
||||||
bindEmail:'绑定邮箱',
|
|
||||||
logOff:'退出登录',
|
|
||||||
Tutorial:'教程',
|
|
||||||
language:'中文',
|
|
||||||
skip:'跳过',
|
|
||||||
emailContent:'你绑定了的邮箱',
|
|
||||||
Email:'邮箱',
|
|
||||||
NextStep:'下一步',
|
|
||||||
verification:'输入验证码',
|
|
||||||
SentTo:'发送',
|
|
||||||
Resend:'重发',
|
|
||||||
Credits:'积分',
|
|
||||||
TaskList:'任务列表',
|
|
||||||
ViewOrders:'查询订单',
|
|
||||||
jsContent1:'邮箱格式不正确',
|
|
||||||
jsContent2:'绑定邮箱成功',
|
|
||||||
jsContent3:`已经长时间未操作，您必须活跃起来，否则将会在{numTime} S 后退出登录`,
|
|
||||||
},
|
|
||||||
allOrder:{
|
|
||||||
Time:'时间',
|
|
||||||
Serial:'序号',
|
|
||||||
Title:'名字',
|
|
||||||
Money:'金额',
|
|
||||||
Payment:'支付方式',
|
|
||||||
State:'状态',
|
|
||||||
Income:'支出',
|
|
||||||
Expend:'收入',
|
|
||||||
credits:'积分',
|
|
||||||
changedCredits:'积分变更',
|
|
||||||
changeEvent:'增加/减少积分',
|
|
||||||
createTime:'创建时间',
|
|
||||||
},
|
|
||||||
payOrder:{
|
|
||||||
OrderInformation:'订单详情',
|
|
||||||
CreditsInformation:'积分详情',
|
|
||||||
},
|
|
||||||
exportModel:{
|
|
||||||
EditExport:'编辑 & 导出',
|
|
||||||
CanvasSize:'画布大小',
|
|
||||||
Height:'高',
|
|
||||||
Width:'宽',
|
|
||||||
CanvasNav:'缩略图',
|
|
||||||
CanvasTool:'画布工具',
|
|
||||||
Color:'颜色',
|
|
||||||
Size:'大小',
|
|
||||||
Brushwork:'绘画',
|
|
||||||
Texture:'材质',
|
|
||||||
FillBack:'填充 & 边',
|
|
||||||
Layer:'层级',
|
|
||||||
More:'参数',
|
|
||||||
insufficient:'您的积分余额不足，如需使用此功能，请点击左上角充值',
|
|
||||||
HDExport:'转高清',
|
|
||||||
Save:'保存',
|
|
||||||
Share:'发布',
|
|
||||||
Export:'导出',
|
|
||||||
SR:'请选择需要超分的图片',
|
|
||||||
requiresCredits:'执行超分的图片需要消耗{data}积分',
|
|
||||||
Scale:'倍率',
|
|
||||||
Cancel:'取消',
|
|
||||||
jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
|
|
||||||
jsContent2:'我们只支持对印花进行超分',
|
|
||||||
jsContent3:'您的积分小于一次超分',
|
|
||||||
jsContent4:'您的积分余额不足',
|
|
||||||
jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
|
|
||||||
jsContent6:'请选择需要超分的图片',
|
|
||||||
jsContent7:'保存成功~',
|
|
||||||
},
|
|
||||||
upgradePlan:{
|
|
||||||
BuyCredlts:'购买积分',
|
|
||||||
credits:'积分',
|
|
||||||
organization:'积分再任意场景都可以使用',
|
|
||||||
CreditCard:'信用卡',
|
|
||||||
Alipay:'支付宝',
|
|
||||||
HongKong:'香港',
|
|
||||||
MainlandChina:'中国大陆',
|
|
||||||
Continue:'继续',
|
|
||||||
payment:'选择付款方式',
|
|
||||||
Cancel:'取消',
|
|
||||||
Payment:'付款',
|
|
||||||
policy1:'我承认我已阅读并同意',
|
|
||||||
policy2:'条款和条件',
|
|
||||||
policy3:'(包括服务范围)及',
|
|
||||||
policy4:'订购协议',
|
|
||||||
completed:'是否已完成支付？',
|
|
||||||
hint:'请保持窗口打开，直到付款完成。如果您无法打开付款窗口，请检查您的浏览器设置，看看弹出窗口是否被阻止。成功付款后，积分可能会延迟发放。请等待1-3分钟，点击积分刷新按钮',
|
|
||||||
Back:'返回',
|
|
||||||
},
|
|
||||||
taskPage:{
|
|
||||||
TaskList:'任务列表',
|
|
||||||
download:'下载',
|
|
||||||
|
|
||||||
},
|
|
||||||
Habit:{
|
|
||||||
Workspace:'工作空间',
|
|
||||||
WorkspaceSetting:'设置工作空间',
|
|
||||||
settingWorkspace:'调整您的工作空间',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单件',
|
|
||||||
System:'系统',
|
|
||||||
Designer:'设计师',
|
|
||||||
Mannequin:'模特',
|
|
||||||
Current:'当前',
|
|
||||||
User:'用户',
|
|
||||||
Style:'风格',
|
|
||||||
Select:'选择',
|
|
||||||
Clear:'清除',
|
|
||||||
jsContent1:'是否删除指定工作空间',
|
|
||||||
jsContent2:'请输入当前工作空间的名字',
|
|
||||||
jsContent3:'看到您换了风格。您是否愿意将目前使用的模特替换为系统推荐的模特?',
|
|
||||||
},
|
|
||||||
RobotAssist:{
|
|
||||||
inputContent1:"问我什么都行~",
|
|
||||||
jsContent1:"请输入生成内容~",
|
|
||||||
jsContent2:"欢迎来到AiDA。我是您友好的时尚设计助手。如果您有任何问题或需要帮助，请随时问我。",
|
|
||||||
jsContent3:"看来您可能是新用户，我很乐意为您介绍我们全新升级的AiDA系统。您现在要开始教程吗？",
|
|
||||||
jsContent4:"您可以随时告诉我要开始教程。",
|
|
||||||
jsContent5:"在开始教程之前，我们需要刷新页面。您现在要开始教程吗？",
|
|
||||||
},
|
|
||||||
HomeView:{
|
|
||||||
GetStarted:'开始设计',
|
|
||||||
Start:'开始',
|
|
||||||
Edit:'编辑',
|
|
||||||
Reset:'重置',
|
|
||||||
Design:'设计',
|
|
||||||
Redesign:'重新设计',
|
|
||||||
GeneratedDesign:'生成的设计',
|
|
||||||
SelectedDesign:'喜欢的设计',
|
|
||||||
Export:'导出',
|
|
||||||
moodboard:"情绪板",
|
|
||||||
printboard:"印刷板",
|
|
||||||
colorboard:"调色板",
|
|
||||||
sketchboard:"线稿板",
|
|
||||||
mannequins:"人体模型",
|
|
||||||
masnnequinHint:"您使用的模特与当前的衣服不匹配，这将导致生成的模型不使用所选的衣服",
|
|
||||||
FinalizeCollection:"完成系列",
|
|
||||||
jsContent1:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent2:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent3:'导出文件失败。',
|
|
||||||
jsContent4: "您的订阅将在 {days} 天 {hours} 小时后到期。为确保服务不中断，请点击此处续订->",
|
|
||||||
jsContent8: "续订订阅。",
|
|
||||||
jsContent7:"友情提示",
|
|
||||||
jsContent5:"我们很高兴让您体验AiDA 3.0。请注意，部分服务在试用期间可能会受到限制。如果您已经准备好全身心投入并享受完整的体验，我们诚挚地邀请您订阅。只需访问",
|
|
||||||
jsContent6:" 就可以开始订阅。感谢您试用我们的服务！",
|
|
||||||
jsContent9:"您确定要清除当前系列并重新开始吗?",
|
|
||||||
jsContent10:"二次创作的作品不允许使用'设计'，但是您可以使用'重新设计'",
|
|
||||||
},
|
|
||||||
ProductImg:{
|
|
||||||
Finalize:'完成',
|
|
||||||
SelectCollection:'选择的系列',
|
|
||||||
Upload:'上传',
|
|
||||||
MagicTools:'转换产品图工具',
|
|
||||||
Similarity:'相似度',
|
|
||||||
RelightDirection:'打光方向',
|
|
||||||
GenerateProduct:'生成的产品',
|
|
||||||
SelectedProduct:'选择的产品',
|
|
||||||
Export:'导出',
|
|
||||||
moreTitle:'更多工具',
|
|
||||||
ProductImage:'产品图',
|
|
||||||
Relight:'打光',
|
|
||||||
RightLight:'右侧光',
|
|
||||||
LeftLight:'左侧光',
|
|
||||||
TopLight:'顶部光',
|
|
||||||
BottomLight:'底部光',
|
|
||||||
Clear:'清空',
|
|
||||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
|
||||||
jsContent2:'请至少选择一张图片',
|
|
||||||
},
|
|
||||||
LibraryPage:{
|
|
||||||
Organize:'整理',
|
|
||||||
Upload:'上传',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
Reset:'重置',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
Delete:'删除',
|
|
||||||
Rename:'编辑',
|
|
||||||
Point:'点',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
intersection:'交集',
|
|
||||||
Tag:'标签:',
|
|
||||||
Select:'选择',
|
|
||||||
NoLabel:'空标签',
|
|
||||||
unionSet:'并集',
|
|
||||||
all:'全选',
|
|
||||||
generated:'所有默认材质都是AiDA自己生成',
|
|
||||||
ImageOnly:'图片',
|
|
||||||
TextOnly:'文字',
|
|
||||||
TextImage:'图片-文字',
|
|
||||||
inputContent2:'输入生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
Model1:'笔墨画风',
|
|
||||||
Model2:'插画画风',
|
|
||||||
Model3:'真实画风',
|
|
||||||
Name:'名字:',
|
|
||||||
Category:'类别:',
|
|
||||||
inputContent3:'输入生成图片的标题',
|
|
||||||
Cancel:'取消',
|
|
||||||
Sure:'保存',
|
|
||||||
Moodboard:'情绪板',
|
|
||||||
Prints:'印花',
|
|
||||||
Sketches:'服装',
|
|
||||||
DesignElements:'设计元素',
|
|
||||||
Mannequins:'模特',
|
|
||||||
model:'模型',
|
|
||||||
jsContent1:'你确定要删除选中图片吗？',
|
|
||||||
jsContent2:'你确定要删除选中图片吗？',
|
|
||||||
jsContent3:'您只能上传图片文件！',
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'图片已经上传是否继续上传',
|
|
||||||
jsContent6:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent7:'请输入内容~',
|
|
||||||
jsContent8:'上传失败',
|
|
||||||
jsContent9:'选择一张图片~',
|
|
||||||
},
|
|
||||||
HistoryPage:{
|
|
||||||
History:'历史',
|
|
||||||
StartDate:'开始日期',
|
|
||||||
EndDate:'结束日期',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
Detail:'细节',
|
|
||||||
Rename:'重命名',
|
|
||||||
Retrieve:'选择',
|
|
||||||
Delete:'删除',
|
|
||||||
inputContent2:'请输入新名称',
|
|
||||||
Submit:'保存',
|
|
||||||
CollectionsName:'名字',
|
|
||||||
source:'来源',
|
|
||||||
UptateTime:'修改时间',
|
|
||||||
SketchCounts:'草图数量',
|
|
||||||
Operations:'Operations',
|
|
||||||
jsContent1:'删除成功',
|
|
||||||
jsContent2:'您确定要删除这个收藏吗？',
|
|
||||||
jsContent3:'修改成功',
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'图片已经上传是否继续上传',
|
|
||||||
jsContent6:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent7:'请输入内容~',
|
|
||||||
},
|
|
||||||
ModelPlacement:{
|
|
||||||
Registration:'新增模特',
|
|
||||||
Submit:'保存',
|
|
||||||
Preview:'预览',
|
|
||||||
Back:'Back',
|
|
||||||
Restore:'重置',
|
|
||||||
System:'系统',
|
|
||||||
Library:'收藏',
|
|
||||||
Point:'点位',
|
|
||||||
RemovePoint:'删除点位',
|
|
||||||
mannequinHint:'模特背景图片请使用白色或者其他颜色来增强效果',
|
|
||||||
SHOULDER:'肩膀',
|
|
||||||
WAISTBAND:'腰部',
|
|
||||||
HAND:'手',
|
|
||||||
jsContent1:"您还没有保存，模特不会上传，确定要继续吗?",
|
|
||||||
jsContent2:'图片已经上传是否继续上传',
|
|
||||||
},
|
|
||||||
ModelPlacementMobile:{
|
|
||||||
Registration:'新增模特',
|
|
||||||
Submit:'保存',
|
|
||||||
Preview:'预览',
|
|
||||||
Back:'Back',
|
|
||||||
Restore:'重置',
|
|
||||||
System:'系统',
|
|
||||||
Library:'收藏',
|
|
||||||
Point:'点位',
|
|
||||||
RemovePoint:'删除点位',
|
|
||||||
mannequinHint:'模特背景图片请使用白色或者其他颜色来增强效果',
|
|
||||||
SHOULDER:'肩膀',
|
|
||||||
WAISTBAND:'腰部',
|
|
||||||
HAND:'手',
|
|
||||||
jsContent1:"您还没有保存，模特不会上传，确定要继续吗?",
|
|
||||||
jsContent2:'图片已经上传是否继续上传',
|
|
||||||
},
|
|
||||||
Upload:{
|
|
||||||
Delete:'删除',
|
|
||||||
Maximum2M:'您最多可以上传10张照片，每张照片不能超过5MB',
|
|
||||||
jsContent1:'您只能上传图片文件！',
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:'上传失败',
|
|
||||||
},
|
|
||||||
SketchboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
PIN:'PIN',
|
|
||||||
Maximum:'最多可上传{maxImg}张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的线稿',
|
|
||||||
inputContent1:'生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent1:"上传失败",
|
|
||||||
jsContent2:"您只能上传图片文件！",
|
|
||||||
jsContent3:'图片必须小于5MB',
|
|
||||||
jsContent4:"超过允许上传的最大图片数量",
|
|
||||||
jsContent5:"请选择一张图片",
|
|
||||||
jsContent6:"输入的内容超过允许输入的最大长度",
|
|
||||||
jsContent7:"请输入内容~",
|
|
||||||
},
|
|
||||||
PrintboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
PIN:'PIN',
|
|
||||||
Maximum:'最多可上传16张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的印花',
|
|
||||||
inputContent1:'生成图片的标题',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
PatternTitle:'生成可在服装上完全平铺的重复设计图案。',
|
|
||||||
LogoTitle:'为文字内容创建艺术字体设计，适用于各种标语或短语。',
|
|
||||||
SloganTitle:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent1:"您只能上传图片文件！",
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:"超过允许上传的最大图片数量",
|
|
||||||
jsContent4:"请选择一张图片",
|
|
||||||
jsContent5:"输入的内容超过允许输入的最大长度",
|
|
||||||
jsContent6:"请输入内容~",
|
|
||||||
},
|
|
||||||
ColorboardUpload:{
|
|
||||||
Thumbnail:'选择的颜色缩略图',
|
|
||||||
Clear:'清除',
|
|
||||||
Palette:'调色板',
|
|
||||||
HEX:'HEX',
|
|
||||||
RGBA:'RGBA',
|
|
||||||
UploadImage:'上传图片',
|
|
||||||
ColorCode:'颜色代码',
|
|
||||||
SelectSuccessively:'连选',
|
|
||||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
|
||||||
SelectSuccessivelyOffTitle:'连续选色模式关闭.',
|
|
||||||
SelectSeparately:'单选',
|
|
||||||
ExtractColor:'提取颜色',
|
|
||||||
Single:'单色',
|
|
||||||
Gradual:'渐变',
|
|
||||||
Alignment:'线性',
|
|
||||||
uploadTitle:'从本地上传图片',
|
|
||||||
selectTitle:'从情绪版或印花版选择图片',
|
|
||||||
jsContent1:"您的浏览器不支持",
|
|
||||||
jsContent2:"找不到这个TCX的颜色",
|
|
||||||
jsContent3:"您只能上传图片文件！",
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:"请输入正确的TCX值",
|
|
||||||
jsContent6:"请至少选择一个情绪版或者印花",
|
|
||||||
},
|
|
||||||
selectImgList:{
|
|
||||||
SelectImg:'选择图片',
|
|
||||||
Clear:'关闭',
|
|
||||||
},
|
|
||||||
MoodboardUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
Generate:'生成',
|
|
||||||
Delete:'删除',
|
|
||||||
Maximum:'最多可上传8张图片，每张图片最大5MB',
|
|
||||||
Thumbnail:'选择的情绪板',
|
|
||||||
layout:'布局',
|
|
||||||
selected:'当前的情绪版布局',
|
|
||||||
Edit:'编辑',
|
|
||||||
jsContent1:'您最多可以选择8张图片',
|
|
||||||
jsContent2:"上传失败",
|
|
||||||
jsContent3:"您只能上传图片文件！",
|
|
||||||
jsContent4:'图片必须小于5MB',
|
|
||||||
jsContent5:'请点击布局进行随机排序',
|
|
||||||
},
|
|
||||||
Cropper:{
|
|
||||||
Cutpicture:'切图',
|
|
||||||
Finish:'完成',
|
|
||||||
Cancel:'取消',
|
|
||||||
CropPreview:'缩略图',
|
|
||||||
},
|
|
||||||
Material:{
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
PIN:'PIN',
|
|
||||||
},
|
|
||||||
MarketingSketchUpload:{
|
|
||||||
Upload:'上传',
|
|
||||||
MyLibrary:'我的收藏',
|
|
||||||
maximumLength:'最多可以上传15张照片，每张照片不能超过5MB',
|
|
||||||
jsContent1:'上传失败',
|
|
||||||
jsContent2:"您只能上传图片文件！",
|
|
||||||
jsContent3:'图片必须小于5MB',
|
|
||||||
jsContent5:'超过允许上传的最大图片数量',
|
|
||||||
},
|
|
||||||
layout:{
|
|
||||||
MoodBoardDesign:'设计情绪板',
|
|
||||||
LayerOptions:'图层选项',
|
|
||||||
Submit:'保存',
|
|
||||||
},
|
|
||||||
Generate:{
|
|
||||||
ImageOnly:'图片',
|
|
||||||
TextOnly:'文字',
|
|
||||||
TextImage:'图片-文字',
|
|
||||||
Model1:'笔墨画风',
|
|
||||||
Model2:'插画画风',
|
|
||||||
Model3:'真实画风',
|
|
||||||
inputContent1:'输入生成图片的标题',
|
|
||||||
Generate:'生成',
|
|
||||||
Sequence:'队列',
|
|
||||||
Close:'取消',
|
|
||||||
currently:'您排在队列中的第{generateLineUp}位',
|
|
||||||
Merge:'合成',
|
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
|
||||||
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
|
||||||
Model:'模型',
|
|
||||||
uploadTitle:'上传参考图',
|
|
||||||
sloganTitle:'输入文字内容',
|
|
||||||
jsContent1:"您只能上传图片文件！",
|
|
||||||
jsContent2:'图片必须小于5MB',
|
|
||||||
jsContent3:"请输入内容~",
|
|
||||||
jsContent4:'输入的内容超过允许输入的最大长度',
|
|
||||||
jsContent5:"请输入内容~",
|
|
||||||
jsContent6:"您最多可以选择8张图片",
|
|
||||||
jsContent7:"上传失败",
|
|
||||||
jsContent8:"您{str}还有{num}次生成额度。",
|
|
||||||
jsContent9:"您的{str}生成额度已用完。",
|
|
||||||
jsContent10:"请完成标语图片",
|
|
||||||
jsContent11:"看到输入的内容可能存在重叠,重叠会影响最终效果哦~",
|
|
||||||
jsContent12:"最少需要创建一个文字",
|
|
||||||
},
|
|
||||||
collectionModal:{
|
|
||||||
Moodboard:'情绪板',
|
|
||||||
Printboard:'印花板',
|
|
||||||
Colorboard:'颜色板',
|
|
||||||
Sketchboard:'线稿板块',
|
|
||||||
MoodCollection:'为您的系列选择情绪版',
|
|
||||||
PrinCollection:'为您的系列选择印花版',
|
|
||||||
ColorCollection:'为您的系列选择颜色版',
|
|
||||||
SketchCollection:'为您的系列选择线稿版',
|
|
||||||
jsContent1:'因为您选择了多张图片，请点击布局后继续.',
|
|
||||||
jsContent2:'上传的文件不会保存，是否继续? ',
|
|
||||||
jsContent3:'您必须选择一种或多种颜色进行下一步。',
|
|
||||||
jsContent5:"我们检测到您的({str})上的PIN数量超过了八个，这可能会导致一些已钉住的项目未被使用。您是否仍要继续？",
|
|
||||||
},
|
|
||||||
DesignDetail:{
|
|
||||||
Details:'详情',
|
|
||||||
EditDetails:'编辑设计的细节',
|
|
||||||
editTitle:'修改单品',
|
|
||||||
DetailTitle:'删除单品',
|
|
||||||
compareTitle:'对比',
|
|
||||||
Submit:'保存',
|
|
||||||
CurrentApparel:'当前服装',
|
|
||||||
editSketchTitle:'修改草图',
|
|
||||||
CurrentPrint:'当前印花',
|
|
||||||
CurrentColor:'当前颜色',
|
|
||||||
},
|
|
||||||
DesignDetailAlter:{
|
|
||||||
Upload:'上传',
|
|
||||||
Library:'收藏',
|
|
||||||
inputContent1:'输入名字进行搜索',
|
|
||||||
Palette:'调色板',
|
|
||||||
HEX:'HEX',
|
|
||||||
RGBA:'RGBA',
|
|
||||||
UploadImage:'上传图片',
|
|
||||||
Delete:'删除',
|
|
||||||
ColorCode:'颜色代码',
|
|
||||||
jsContent1:"您的浏览器不支持",
|
|
||||||
jsContent2:"您最多可以选择8张图片",
|
|
||||||
jsContent3:"上传失败",
|
|
||||||
jsContent4:'您只能上传图片文件！',
|
|
||||||
jsContent5:'Image must smaller than 5MB!',
|
|
||||||
jsContent6:"找不到这个TCX的颜色",
|
|
||||||
},
|
|
||||||
addDetails:{
|
|
||||||
AddDetails:'添加细节',
|
|
||||||
submit:'保存',
|
|
||||||
jsContent1:'请至少绘制一条线段',
|
|
||||||
},
|
|
||||||
DesignDetailEnd:{
|
|
||||||
NewApparel:'选择的服装',
|
|
||||||
NewPrint:'选择的印花',
|
|
||||||
Placement:'模式',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单个',
|
|
||||||
NewColor:'选择的颜色',
|
|
||||||
preview:'预览',
|
|
||||||
Layout:'布局',
|
|
||||||
jsContent1:'请选择印个印花',
|
|
||||||
jsContent2:'请选择颜色',
|
|
||||||
},
|
|
||||||
DesignPrintOperation:{
|
|
||||||
Placement:'调整位置',
|
|
||||||
Overall:'整体',
|
|
||||||
Single:'单件',
|
|
||||||
Scale:'Scale',
|
|
||||||
Random:'随机',
|
|
||||||
inputContent:'输入名字进行搜索',
|
|
||||||
preview:'预览',
|
|
||||||
isOverall:'图案图像不能在单件模式下使用',
|
|
||||||
jsContent1:'以上更改尚未保存，您确定要继续吗？',
|
|
||||||
},
|
|
||||||
uploadFile:{
|
|
||||||
jsContent1:'您最多可以选择{maxImg}张图片哦',
|
|
||||||
},
|
|
||||||
isTest:{
|
|
||||||
available:"此功能对试用用户不可用。",
|
|
||||||
src:"此功能对试用用户不开放，请访问进行订阅。",
|
|
||||||
userName:'试用用户',
|
|
||||||
loginIsTest:"您是试用用户，试用期到 {date}。为了用户数据的安全，我们不会保存试用用户上传的任何个人数据，并会在每次注销后擦除个人数据。如果您需要订阅，请点击 ->",
|
|
||||||
image:'由于您是试用用户，您只能上传10张图片。'
|
|
||||||
},
|
|
||||||
setLabel:{
|
|
||||||
EditTag:'编辑标签',
|
|
||||||
jsContent1:'请输入标签名称',
|
|
||||||
},
|
|
||||||
works:{
|
|
||||||
all:'全部',
|
|
||||||
FavoriteWorks:'点赞的作品',
|
|
||||||
MyWorks:'我的作品',
|
|
||||||
},
|
|
||||||
Publish:{
|
|
||||||
Publish:'发布',
|
|
||||||
CoverPicture:'封面图',
|
|
||||||
CollectionTitle:'系列名字',
|
|
||||||
Description:'描述',
|
|
||||||
Permissions:'权限',
|
|
||||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
|
||||||
Close:'关闭',
|
|
||||||
UpdatePublish:'更新发布',
|
|
||||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
|
||||||
jsContent2:'请输入您的作品名称',
|
|
||||||
jsContent3:'这将把您的作品发布到广场上，供所有用户查看。请确认是否发布?',
|
|
||||||
jsContent4:'发布成功!你可以在我的作品中找到',
|
|
||||||
},
|
|
||||||
newScaleImage:{
|
|
||||||
Collection:'系列',
|
|
||||||
SecondaryCreation:'二次创作',
|
|
||||||
CreationTime:'创建时间',
|
|
||||||
UpdateTime:'更新时间',
|
|
||||||
Comment:'评论',
|
|
||||||
NoComments:'没有评论',
|
|
||||||
first:'你可以成为第一个评论',
|
|
||||||
reply:'回复',
|
|
||||||
unfold:'展开',
|
|
||||||
Collapse:'折叠',
|
|
||||||
Title:'标题',
|
|
||||||
Original:'原创',
|
|
||||||
from:'源自',
|
|
||||||
Delete:'删除',
|
|
||||||
Describe:'描述',
|
|
||||||
replyAll:'所有回复',
|
|
||||||
jsContent1:'请先登录或者升级为正式用户',
|
|
||||||
jsContent2:'作者不允许二次创作',
|
|
||||||
jsContent3:'请输入评论内容',
|
|
||||||
jsContent4:'是否删除当前评论',
|
|
||||||
jsContent5:'是否删除当前作品',
|
|
||||||
jsContent6:'作品被作者删除',
|
|
||||||
},
|
|
||||||
guide:{
|
|
||||||
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
|
|
||||||
guide2:"选择您要设计的服装性别。",
|
|
||||||
guide3:'在此更改人体模型。',
|
|
||||||
guide4:'您目前可以从我们的系统库中选择人体模型。稍后，您还可以在注册自己的人体模型后从用户库中进行选择。',
|
|
||||||
guide5:'在这里开始您的创意之旅。 ',
|
|
||||||
guide6:'对于情绪板、印花或服装，我们提供三种不同的图片添加方法。第一种选择是<strong>上传</strong>，允许您直接从本地设备上传。',
|
|
||||||
guide7:"第二种方法是从您的<strong>收藏</strong>中选择。<br> 您可能会注意到您的库页面目前是空的；不必担心。您上传的所有图像都将自动添加到您的库中。将来，您无需每次上传，只需从您的库中选择即可。",
|
|
||||||
guide8:'第三种方法是使用最新的图像生成技术<strong>生成</strong>图像。',
|
|
||||||
guide9:"输入捕捉您希望表达的情绪的关键词，然后单击<strong>生成</strong>按钮。",
|
|
||||||
guide10:'为您的心情板选择两个图像。',
|
|
||||||
guide11:"点击此处布局您的情绪版。",
|
|
||||||
guide12:"点击此处生成印花图片。",
|
|
||||||
guide13:"点击此处生成印花图片。",
|
|
||||||
// guide14:"我们为生成图片提供三个输入选项：仅图片、仅文本和图片文本。",
|
|
||||||
// guide15:"选择此选项，我们将使用您上传的图片和输入的文本生成四张印花图片。",
|
|
||||||
// guide16:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
|
|
||||||
guide17:"在此处选择生成模型；不同的模型将以不同的风格生成图片。",
|
|
||||||
guide18:"在此处上传输入图片。",
|
|
||||||
// guide19:"点击此图片进行选择。",
|
|
||||||
guide20:"输入关于您希望创建的印花的关键词，然后点击<strong>生成</strong>按钮。",
|
|
||||||
guide21:"选择您最喜欢的生成印花。",
|
|
||||||
guide22:"点击此处进行下一步。",
|
|
||||||
guide23:"点击此处从图像中提取主要颜色。",
|
|
||||||
guide24:"从这些颜色块中选择您想要的第一种颜色。",
|
|
||||||
guide25:"点击此块选择第二种颜色。",
|
|
||||||
guide26:"从这些颜色块中选择您想要的颜色。",
|
|
||||||
guide27:"点击此处进行下一步。",
|
|
||||||
guide28:"点击此处生成服装草图。",
|
|
||||||
// guide29:"使用仅文本选项进行生成。",
|
|
||||||
guide30:"输入关于您希望创建的草图的关键词，然后点击<strong>生成</strong>按钮。",
|
|
||||||
guide31:"点击此处为生成的草图选择一个类别。",
|
|
||||||
guide32:"为草图选择正确的类别。",
|
|
||||||
guide33:"选择您最喜欢的生成草图。",
|
|
||||||
guide34:"点击此处完成上传过程。",
|
|
||||||
guide35:"点击此处让AI生成设计插图。",
|
|
||||||
guide36:"请稍候几秒钟。",
|
|
||||||
guide37:"点击小红心保存您喜欢的设计。",
|
|
||||||
guide38:"点击“<strong>重新设计</strong>”以生成八个新的服装供您选择。",
|
|
||||||
guide39:"点击此处让AI生成设计插图。",
|
|
||||||
guide40:"点击您感兴趣的任何设计图片以修改细节。",
|
|
||||||
guide41:"点击衣服以修改其细节。",
|
|
||||||
guide42:"点击此处添加或更改印花。",
|
|
||||||
guide43:"您可以在收藏中找到您之前上传的印花。",
|
|
||||||
guide44:"为此草图选择一个印花。",
|
|
||||||
guide45:"点击此处布局所选印花。",
|
|
||||||
guide46:"在此处预览印刷设计。",
|
|
||||||
guide47:"在此处保存印刷设计。",
|
|
||||||
guide48:"点击此处完成修改。",
|
|
||||||
guide49:"点击此处导出您刚刚设计的系列。",
|
|
||||||
guide50:"您的指南已经完成，现在您可以自由创作。要了解更多见解和细节，请查看我们主页上的演示视频：<a href='https://code-create.com.hk/aida/' style='pointer-events: auto;' target='_blank'>https://code-create.com.hk/aida/</a>。您可以随时告诉机器人您想重新开始教程。",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
44364
package-lock.json
generated
44364
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
165
package.json
165
package.json
@@ -1,83 +1,84 @@
|
|||||||
{
|
{
|
||||||
"name": "aida",
|
"name": "aida",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"serve:test": "vue-cli-service serve --mode test",
|
"serve:test": "vue-cli-service serve --mode test",
|
||||||
"build:test": "vue-cli-service build --mode test_build",
|
"build:test": "vue-cli-service build --mode test_build",
|
||||||
"serve:dev": "vue-cli-service serve --mode dev",
|
"serve:dev": "vue-cli-service serve --mode dev",
|
||||||
"build:dev": "vue-cli-service build --mode dev_build",
|
"build:dev": "vue-cli-service build --mode dev_build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ans1998/vue3-color": "^3.0.7",
|
"@ans1998/vue3-color": "^3.0.7",
|
||||||
"@flaticon/flaticon-uicons": "^2.3.0",
|
"@flaticon/flaticon-uicons": "^2.3.0",
|
||||||
"@types/fingerprintjs2": "^2.0.0",
|
"@types/fingerprintjs2": "^2.0.0",
|
||||||
"ant-design-vue": "^3.2.12",
|
"ant-design-vue": "^3.2.12",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"driver.js": "^1.3.1",
|
"driver.js": "^1.3.1",
|
||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"element-plus": "^2.4.2",
|
"element-plus": "^2.4.2",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"fingerprintjs2": "^2.1.4",
|
"fingerprintjs2": "^2.1.4",
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"jszip": "^3.10.1",
|
"jszip": "^3.10.1",
|
||||||
"md5": "^2.3.0",
|
"md5": "^2.3.0",
|
||||||
"quantize": "^1.0.2",
|
"quantize": "^1.0.2",
|
||||||
"sortablejs": "^1.15.0",
|
"sortablejs": "^1.15.0",
|
||||||
"swiper": "^11.1.4",
|
"swiper": "^11.1.4",
|
||||||
"vue": "^3.2.13",
|
"vue": "^3.2.13",
|
||||||
"vue-class-component": "^8.0.0-0",
|
"vue-class-component": "^8.0.0-0",
|
||||||
"vue-cropper": "^1.0.5",
|
"vue-cropper": "^1.0.5",
|
||||||
"vue-i18n": "^9.6.1",
|
"vue-i18n": "^9.6.1",
|
||||||
"vue-router": "^4.0.3",
|
"vue-router": "^4.0.3",
|
||||||
"vuedraggable": "^4.1.0",
|
"vuedraggable": "^4.1.0",
|
||||||
"vuex": "^4.0.0"
|
"vuex": "^4.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||||
"@typescript-eslint/parser": "^5.4.0",
|
"@typescript-eslint/parser": "^5.4.0",
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
"@vue/cli-plugin-router": "~5.0.0",
|
"@vue/cli-plugin-router": "~5.0.0",
|
||||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
"@vue/cli-service": "~5.0.0",
|
"@vue/cli-service": "~5.0.0",
|
||||||
"@vue/eslint-config-typescript": "^9.1.0",
|
"@vue/eslint-config-typescript": "^9.1.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-plugin-vue": "^8.0.3",
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
"less": "^4.1.3",
|
"less": "^4.1.3",
|
||||||
"less-loader": "^11.0.0",
|
"less-loader": "^11.0.0",
|
||||||
"style-resources-loader": "^1.5.0",
|
"style-resources-loader": "^1.5.0",
|
||||||
"typescript": "~4.5.5",
|
"typescript": "~4.5.5",
|
||||||
"unplugin-element-plus": "^0.8.0",
|
"unplugin-element-plus": "^0.8.0",
|
||||||
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
||||||
"vue-lazyload": "^3.0.0-rc.2"
|
"vue-lazyload": "^3.0.0-rc.2"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
"env": {
|
"env": {
|
||||||
"node": true
|
"node": true
|
||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"plugin:vue/vue3-essential",
|
"plugin:vue/vue3-essential",
|
||||||
"eslint:recommended",
|
"eslint:recommended",
|
||||||
"@vue/typescript/recommended"
|
"@vue/typescript/recommended"
|
||||||
],
|
],
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 2020
|
"ecmaVersion": 2020
|
||||||
},
|
},
|
||||||
"rules": {}
|
"rules": {}
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"> 1%",
|
"> 1%",
|
||||||
"last 2 versions",
|
"last 2 versions",
|
||||||
"not dead",
|
"not dead",
|
||||||
"not ie 11"
|
"not ie 11"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -222,3 +222,9 @@
|
|||||||
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
src: url(./woff/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pixel';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url('woff/pixel.ttf') format('truetype');
|
||||||
|
}
|
||||||
BIN
public/css/woff/pixel.ttf
Normal file
BIN
public/css/woff/pixel.ttf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 794 KiB After Width: | Height: | Size: 797 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 798 KiB After Width: | Height: | Size: 783 KiB |
BIN
public/image/loading.gif
Normal file
BIN
public/image/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/image/sketch/sketch-fine.jpg
Normal file
BIN
public/image/sketch/sketch-fine.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/image/sketch/sketch-medium.jpg
Normal file
BIN
public/image/sketch/sketch-medium.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/image/sketch/sketch-thick.jpg
Normal file
BIN
public/image/sketch/sketch-thick.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
@@ -3,6 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title>AiDA</title>
|
<title>AiDA</title>
|
||||||
|
|||||||
@@ -134,7 +134,9 @@ fabric.BaseBrush.prototype.convertToImg = function() {
|
|||||||
if(!xy){
|
if(!xy){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
img.set({left:xy.x/pixelRatio,top:xy.y/pixelRatio,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
|
let pointerX = this.canvas.viewportTransform[4];
|
||||||
|
let pointerY = this.canvas.viewportTransform[5];
|
||||||
|
img.set({left:(xy.x)/pixelRatio-pointerX,top:(xy.y)/pixelRatio-pointerY,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
|
||||||
this.canvas.add(img).clearContext(this.canvas.contextTop);
|
this.canvas.add(img).clearContext(this.canvas.contextTop);
|
||||||
this.canvas.clearContext(this.canvas.contextTop);
|
this.canvas.clearContext(this.canvas.contextTop);
|
||||||
}
|
}
|
||||||
@@ -232,6 +234,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this.canvas.contextTop.globalAlpha = this.opacity;
|
this.canvas.contextTop.globalAlpha = this.opacity;
|
||||||
this._size = this.width / 2 + this._baseWidth;
|
this._size = this.width / 2 + this._baseWidth;
|
||||||
this._drawn = false;
|
this._drawn = false;
|
||||||
@@ -239,6 +243,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this.update(pointer);
|
this.update(pointer);
|
||||||
this.draw(this.canvas.contextTop);
|
this.draw(this.canvas.contextTop);
|
||||||
},
|
},
|
||||||
@@ -403,6 +409,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
_render: function(pointer) {
|
_render: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
var len, i, point = this.setPointer(pointer),
|
var len, i, point = this.setPointer(pointer),
|
||||||
subtractPoint = point.subtract(this._lastPoint),
|
subtractPoint = point.subtract(this._lastPoint),
|
||||||
distance = point.distanceFrom(this._lastPoint),
|
distance = point.distanceFrom(this._lastPoint),
|
||||||
@@ -467,6 +475,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
_resetTip: function(pointer) {
|
_resetTip: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
var len, i, point = this.setPointer(pointer);
|
var len, i, point = this.setPointer(pointer);
|
||||||
|
|
||||||
this._strokes = [];
|
this._strokes = [];
|
||||||
@@ -500,6 +510,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points = [pointer];
|
this._points = [pointer];
|
||||||
this._count = 0;
|
this._count = 0;
|
||||||
|
|
||||||
@@ -512,6 +524,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points.push(pointer);
|
this._points.push(pointer);
|
||||||
|
|
||||||
var i, dx, dy, d, size,
|
var i, dx, dy, d, size,
|
||||||
@@ -595,6 +609,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
this.canvas.contextTop.strokeStyle = this.color;
|
this.canvas.contextTop.strokeStyle = this.color;
|
||||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||||
@@ -603,6 +619,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
if (this.canvas._isCurrentlyDrawing) {
|
if (this.canvas._isCurrentlyDrawing) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._render(pointer);
|
this._render(pointer);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -662,6 +680,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
this.canvas.contextTop.strokeStyle = this.color;
|
this.canvas.contextTop.strokeStyle = this.color;
|
||||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||||
@@ -670,6 +690,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
if (this.canvas._isCurrentlyDrawing) {
|
if (this.canvas._isCurrentlyDrawing) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._render(pointer);
|
this._render(pointer);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -734,6 +756,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
this.canvas.contextTop.strokeStyle = this.color;
|
this.canvas.contextTop.strokeStyle = this.color;
|
||||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||||
@@ -742,6 +766,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
if (this.canvas._isCurrentlyDrawing) {
|
if (this.canvas._isCurrentlyDrawing) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._render(pointer);
|
this._render(pointer);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -807,6 +833,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||||
this._size = this.width + this._baseWidth;
|
this._size = this.width + this._baseWidth;
|
||||||
@@ -814,6 +842,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
if (this.canvas._isCurrentlyDrawing) {
|
if (this.canvas._isCurrentlyDrawing) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._render(pointer);
|
this._render(pointer);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -870,7 +900,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
for (var i = 0; i < this._nrPainters; i++) {
|
for (var i = 0; i < this._nrPainters; i++) {
|
||||||
this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
|
this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
|
||||||
}
|
}
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
|
|
||||||
//ctx.globalCompositeOperation = 'source-over';
|
//ctx.globalCompositeOperation = 'source-over';
|
||||||
@@ -887,6 +918,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -921,6 +954,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points = [pointer];
|
this._points = [pointer];
|
||||||
|
|
||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
@@ -932,6 +967,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points.push(pointer);
|
this._points.push(pointer);
|
||||||
|
|
||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
@@ -988,6 +1025,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
this._count = 0;
|
this._count = 0;
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points = [pointer];
|
this._points = [pointer];
|
||||||
|
|
||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
@@ -998,6 +1037,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points.push(pointer);
|
this._points.push(pointer);
|
||||||
|
|
||||||
var i, dx, dy, d, factor = .3 * this.width,
|
var i, dx, dy, d, factor = .3 * this.width,
|
||||||
@@ -1083,6 +1124,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
this.canvas.contextTop.globalAlpha = this.opacity;
|
this.canvas.contextTop.globalAlpha = this.opacity;
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._point = new fabric.Point(pointer.x, pointer.y);
|
this._point = new fabric.Point(pointer.x, pointer.y);
|
||||||
this._lastPoint = this._point;
|
this._lastPoint = this._point;
|
||||||
|
|
||||||
@@ -1095,6 +1138,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = this._point;
|
this._lastPoint = this._point;
|
||||||
this._point = new fabric.Point(pointer.x, pointer.y);
|
this._point = new fabric.Point(pointer.x, pointer.y);
|
||||||
},
|
},
|
||||||
@@ -1169,7 +1214,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
color = fabric.util.colorValues(this.color),
|
color = fabric.util.colorValues(this.color),
|
||||||
bgColor = fabric.util.colorValues(this.bgColor);
|
bgColor = fabric.util.colorValues(this.bgColor);
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._lastPoint = pointer;
|
this._lastPoint = pointer;
|
||||||
this._drawn = false;
|
this._drawn = false;
|
||||||
|
|
||||||
@@ -1181,6 +1227,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
dx = pointer.x - this._lastPoint.x,
|
dx = pointer.x - this._lastPoint.x,
|
||||||
dy = pointer.y - this._lastPoint.y,
|
dy = pointer.y - this._lastPoint.y,
|
||||||
@@ -1233,12 +1281,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMouseDown: function(pointer) {
|
onMouseDown: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points = [pointer];
|
this._points = [pointer];
|
||||||
this._count = 0;
|
this._count = 0;
|
||||||
this._colorValues = fabric.util.colorValues(this.color);
|
this._colorValues = fabric.util.colorValues(this.color);
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseMove: function(pointer) {
|
onMouseMove: function(pointer) {
|
||||||
|
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||||
|
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||||
this._points.push(pointer);
|
this._points.push(pointer);
|
||||||
|
|
||||||
var ctx = this.canvas.contextTop,
|
var ctx = this.canvas.contextTop,
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id */
|
font-family: "iconfont"; /* Project id 4292253 */
|
||||||
src: url('iconfont.ttf?t=1711431581952') format('truetype');
|
src: url('iconfont.woff2?t=1727415711578') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1727415711578') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1727415711578') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@@ -11,36 +13,44 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-a-waitao_changkuanwaitao11x:before {
|
.icon-caizhi:before {
|
||||||
content: "\e66c";
|
content: "\e647";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-fanchehui:before {
|
.icon-IC-yehua:before {
|
||||||
content: "\e626";
|
content: "\e61b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-chehui:before {
|
.icon-shangyiceng:before {
|
||||||
content: "\e609";
|
content: "\e751";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-yuyan:before {
|
.icon-shangyiceng1:before {
|
||||||
content: "\e85f";
|
content: "\e604";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-biaoqian:before {
|
.icon-xiayiceng:before {
|
||||||
content: "\e603";
|
content: "\e68a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-bingji:before {
|
.icon-shangyiceng2:before {
|
||||||
content: "\e620";
|
content: "\e68b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-bingji1:before {
|
.icon-shenpi:before {
|
||||||
content: "\e668";
|
content: "\e6a1";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-dianwei:before {
|
.icon-yonghu:before {
|
||||||
content: "\e685";
|
content: "\e617";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-usetime:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiala:before {
|
||||||
|
content: "\e634";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-bianji:before {
|
.icon-bianji:before {
|
||||||
@@ -87,47 +97,35 @@
|
|||||||
content: "\e62d";
|
content: "\e62d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shenpi:before {
|
.icon-dianwei:before {
|
||||||
content: "\e6a1";
|
content: "\e685";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-yonghu:before {
|
.icon-bingji:before {
|
||||||
content: "\e617";
|
content: "\e620";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-usetime:before {
|
.icon-bingji1:before {
|
||||||
content: "\e601";
|
content: "\e668";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-xiala:before {
|
.icon-biaoqian:before {
|
||||||
content: "\e634";
|
content: "\e603";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shangyiceng:before {
|
.icon-yuyan:before {
|
||||||
content: "\e751";
|
content: "\e85f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shangyiceng1:before {
|
.icon-fanchehui:before {
|
||||||
content: "\e604";
|
content: "\e626";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-xiayiceng:before {
|
.icon-chehui:before {
|
||||||
content: "\e68a";
|
content: "\e609";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shangyiceng2:before {
|
.icon-a-waitao_changkuanwaitao11x:before {
|
||||||
content: "\e68b";
|
content: "\e66c";
|
||||||
}
|
|
||||||
|
|
||||||
.icon-renwu:before {
|
|
||||||
content: "\e63f";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-caizhi:before {
|
|
||||||
content: "\e647";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-shangchuantupian:before {
|
|
||||||
content: "\e61e";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -10,6 +10,10 @@ body,
|
|||||||
--aida-fsize1-8: calc(1.8rem*1.2);
|
--aida-fsize1-8: calc(1.8rem*1.2);
|
||||||
--aida-fsize1-6: calc(1.6rem*1.2);
|
--aida-fsize1-6: calc(1.6rem*1.2);
|
||||||
--aida-fsize1-4: calc(1.4rem*1.2);
|
--aida-fsize1-4: calc(1.4rem*1.2);
|
||||||
|
--antd-wave-shadow-color: #39215b;
|
||||||
|
}
|
||||||
|
::selection {
|
||||||
|
background-color: #1890ff;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -145,7 +149,7 @@ li {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-tooltip {
|
.ant-tooltip {
|
||||||
z-index: 2;
|
z-index: 1049 !important;
|
||||||
}
|
}
|
||||||
.ant-tooltip .ant-tooltip-inner {
|
.ant-tooltip .ant-tooltip-inner {
|
||||||
background: #343579;
|
background: #343579;
|
||||||
@@ -337,6 +341,9 @@ li {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
}
|
}
|
||||||
|
.ant-popover-placement-top {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
.ant-drawer {
|
.ant-drawer {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
@@ -488,9 +495,6 @@ li {
|
|||||||
width: 0.8rem;
|
width: 0.8rem;
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
}
|
}
|
||||||
.trial_page .ant-tooltip {
|
|
||||||
z-index: 1049 !important;
|
|
||||||
}
|
|
||||||
.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
|
.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
|
||||||
.trial_page :deep(.ant-tooltip-arrow-content) {
|
.trial_page :deep(.ant-tooltip-arrow-content) {
|
||||||
background: #000 !important;
|
background: #000 !important;
|
||||||
@@ -683,7 +687,7 @@ li {
|
|||||||
.generalModel .ant-modal-body {
|
.generalModel .ant-modal-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2);
|
padding: calc(5rem*1.2) calc(6rem*1.2);
|
||||||
}
|
}
|
||||||
.generalModel .fi-rr-down-to-line,
|
.generalModel .fi-rr-down-to-line,
|
||||||
.generalModel .fi-rr-arrow-small-right,
|
.generalModel .fi-rr-arrow-small-right,
|
||||||
@@ -955,6 +959,10 @@ li {
|
|||||||
.sketchboard_upload_modal .switch_type_list.showEvents * {
|
.sketchboard_upload_modal .switch_type_list.showEvents * {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
.ant-modal-wrap {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.ant-btn:hover,
|
.ant-btn:hover,
|
||||||
.ant-btn:focus,
|
.ant-btn:focus,
|
||||||
.ant-btn:active,
|
.ant-btn:active,
|
||||||
@@ -1097,6 +1105,9 @@ li {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.admin_page .admin_state_item > span > span {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
.admin_page .admin_state_item > span:nth-child(1) {
|
.admin_page .admin_state_item > span:nth-child(1) {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -1104,7 +1115,7 @@ li {
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: block;
|
display: block;
|
||||||
width: 10rem;
|
width: 10.5rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.admin_page .admin_state_item > input {
|
.admin_page .admin_state_item > input {
|
||||||
@@ -1293,27 +1304,42 @@ li {
|
|||||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.homeMain_heade .ant-badge {
|
.homeMain_heade .ant-badge,
|
||||||
|
.account_message .ant-badge {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.homeMain_heade sup.ant-scroll-number {
|
.homeMain_heade sup.ant-scroll-number,
|
||||||
height: 2rem;
|
.account_message sup.ant-scroll-number {
|
||||||
min-height: 2rem;
|
height: 1.2rem;
|
||||||
width: 2rem;
|
min-height: 5px;
|
||||||
min-width: 2rem;
|
width: 1.2rem;
|
||||||
|
min-width: 5px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
font-size: 1.1rem;
|
||||||
.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
|
padding: 0.2rem;
|
||||||
width: 100%;
|
box-sizing: content-box;
|
||||||
height: 100%;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.homeMain_heade p.ant-scroll-number-only-unit {
|
.homeMain_heade sup.ant-scroll-number.ant-badge-dot,
|
||||||
line-height: 2rem;
|
.account_message sup.ant-scroll-number.ant-badge-dot {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only,
|
||||||
|
.account_message sup.ant-scroll-number .ant-scroll-number-only {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
transform: scale(0.7);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.homeMain_heade p.ant-scroll-number-only-unit,
|
||||||
|
.account_message p.ant-scroll-number-only-unit {
|
||||||
|
line-height: 1.2rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.modal_title_text {
|
.modal_title_text {
|
||||||
@@ -1509,7 +1535,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border,
|
.design_detail_modal_component .input_border,
|
||||||
.library_page .input_border,
|
.library_page .input_border,
|
||||||
.productImg_modal .input_border,
|
.productImg_modal .input_border,
|
||||||
.accountEdit_page .input_border {
|
.accountEdit_page .input_border,
|
||||||
|
.generalMenu_printModel_upload .input_border {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1524,7 +1551,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box,
|
.design_detail_modal_component .input_border .input_box,
|
||||||
.library_page .input_border .input_box,
|
.library_page .input_border .input_box,
|
||||||
.productImg_modal .input_border .input_box,
|
.productImg_modal .input_border .input_box,
|
||||||
.accountEdit_page .input_border .input_box {
|
.accountEdit_page .input_border .input_box,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -1536,7 +1564,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box .inputShowText,
|
.design_detail_modal_component .input_border .input_box .inputShowText,
|
||||||
.library_page .input_border .input_box .inputShowText,
|
.library_page .input_border .input_box .inputShowText,
|
||||||
.productImg_modal .input_border .input_box .inputShowText,
|
.productImg_modal .input_border .input_box .inputShowText,
|
||||||
.accountEdit_page .input_border .input_box .inputShowText {
|
.accountEdit_page .input_border .input_box .inputShowText,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box .inputShowText {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -1545,11 +1574,13 @@ textarea:focus {
|
|||||||
.library_page .input_border .input_box.active .input_box_btnBox,
|
.library_page .input_border .input_box.active .input_box_btnBox,
|
||||||
.productImg_modal .input_border .input_box.active .input_box_btnBox,
|
.productImg_modal .input_border .input_box.active .input_box_btnBox,
|
||||||
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
|
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
|
||||||
.collection_modal_body .input_border .input_box.active textarea,
|
.collection_modal_body .input_border .input_box.active textarea,
|
||||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
.design_detail_modal_component .input_border .input_box.active textarea,
|
||||||
.library_page .input_border .input_box.active textarea,
|
.library_page .input_border .input_box.active textarea,
|
||||||
.productImg_modal .input_border .input_box.active textarea,
|
.productImg_modal .input_border .input_box.active textarea,
|
||||||
.accountEdit_page .input_border .input_box.active textarea {
|
.accountEdit_page .input_border .input_box.active textarea,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box.active textarea {
|
||||||
border: 1px solid #ff0001;
|
border: 1px solid #ff0001;
|
||||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
@@ -1557,7 +1588,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box.active span,
|
.design_detail_modal_component .input_border .input_box.active span,
|
||||||
.library_page .input_border .input_box.active span,
|
.library_page .input_border .input_box.active span,
|
||||||
.productImg_modal .input_border .input_box.active span,
|
.productImg_modal .input_border .input_box.active span,
|
||||||
.accountEdit_page .input_border .input_box.active span {
|
.accountEdit_page .input_border .input_box.active span,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box.active span {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255, 0, 0.7);
|
color: rgba(255, 0, 0.7);
|
||||||
@@ -1566,7 +1598,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword,
|
.design_detail_modal_component .input_border .search_keyword,
|
||||||
.library_page .input_border .search_keyword,
|
.library_page .input_border .search_keyword,
|
||||||
.productImg_modal .input_border .search_keyword,
|
.productImg_modal .input_border .search_keyword,
|
||||||
.accountEdit_page .input_border .search_keyword {
|
.accountEdit_page .input_border .search_keyword,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_keyword {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
@@ -1574,7 +1607,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center,
|
.library_page .input_border .search_keyword .search_keyword_center,
|
||||||
.productImg_modal .input_border .search_keyword .search_keyword_center,
|
.productImg_modal .input_border .search_keyword .search_keyword_center,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center {
|
.accountEdit_page .input_border .search_keyword .search_keyword_center,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
@@ -1592,7 +1626,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -1602,7 +1637,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
border: solid 1px #39215b;
|
border: solid 1px #39215b;
|
||||||
background-color: #8156bd;
|
background-color: #8156bd;
|
||||||
@@ -1618,31 +1654,36 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox,
|
.collection_modal_body .input_border .input_box_btnBox,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox,
|
.design_detail_modal_component .input_border .input_box_btnBox,
|
||||||
.library_page .input_border .input_box_btnBox,
|
.library_page .input_border .input_box_btnBox,
|
||||||
.productImg_modal .input_border .input_box_btnBox,
|
.productImg_modal .input_border .input_box_btnBox,
|
||||||
.accountEdit_page .input_border .input_box_btnBox {
|
.accountEdit_page .input_border .input_box_btnBox,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box_btnBox {
|
||||||
border: calc(0.1rem*1.2) solid #F1F1F1;
|
border: calc(0.1rem*1.2) solid #F1F1F1;
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
display: flex;
|
display: flex;
|
||||||
float: left;
|
float: left;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
|
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.library_page .input_border .input_box_btnBox .ant-spin-text,
|
.library_page .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
|
.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text {
|
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox .search_seed,
|
.collection_modal_body .input_border .input_box_btnBox .search_seed,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
|
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
|
||||||
.library_page .input_border .input_box_btnBox .search_seed,
|
.library_page .input_border .input_box_btnBox .search_seed,
|
||||||
.productImg_modal .input_border .input_box_btnBox .search_seed,
|
.productImg_modal .input_border .input_box_btnBox .search_seed,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .search_seed {
|
.accountEdit_page .input_border .input_box_btnBox .search_seed,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -1653,7 +1694,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .upload_item .upload_file_item,
|
.design_detail_modal_component .input_border .upload_item .upload_file_item,
|
||||||
.library_page .input_border .upload_item .upload_file_item,
|
.library_page .input_border .upload_item .upload_file_item,
|
||||||
.productImg_modal .input_border .upload_item .upload_file_item,
|
.productImg_modal .input_border .upload_item .upload_file_item,
|
||||||
.accountEdit_page .input_border .upload_item .upload_file_item {
|
.accountEdit_page .input_border .upload_item .upload_file_item,
|
||||||
|
.generalMenu_printModel_upload .input_border .upload_item .upload_file_item {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
}
|
}
|
||||||
@@ -1661,7 +1703,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border input,
|
.design_detail_modal_component .input_border input,
|
||||||
.library_page .input_border input,
|
.library_page .input_border input,
|
||||||
.productImg_modal .input_border input,
|
.productImg_modal .input_border input,
|
||||||
.accountEdit_page .input_border input {
|
.accountEdit_page .input_border input,
|
||||||
|
.generalMenu_printModel_upload .input_border input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: calc(0.5rem*1.2);
|
border-radius: calc(0.5rem*1.2);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
@@ -1674,42 +1717,48 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
||||||
.library_page .input_border inputinput:-moz-placeholder,
|
.library_page .input_border inputinput:-moz-placeholder,
|
||||||
.productImg_modal .input_border inputinput:-moz-placeholder,
|
.productImg_modal .input_border inputinput:-moz-placeholder,
|
||||||
.accountEdit_page .input_border inputinput:-moz-placeholder {
|
.accountEdit_page .input_border inputinput:-moz-placeholder,
|
||||||
|
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder {
|
||||||
color: rgba(0, 0, 0, 0.15);
|
color: rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
|
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
|
||||||
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
|
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
|
||||||
.library_page .input_border inputinput:-ms-input-placeholder,
|
.library_page .input_border inputinput:-ms-input-placeholder,
|
||||||
.productImg_modal .input_border inputinput:-ms-input-placeholder,
|
.productImg_modal .input_border inputinput:-ms-input-placeholder,
|
||||||
.accountEdit_page .input_border inputinput:-ms-input-placeholder {
|
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
|
||||||
|
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder {
|
||||||
color: rgba(0, 0, 0, 0.15);
|
color: rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
|
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
|
||||||
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
|
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
|
||||||
.library_page .input_border inputinput::-webkit-input-placeholder,
|
.library_page .input_border inputinput::-webkit-input-placeholder,
|
||||||
.productImg_modal .input_border inputinput::-webkit-input-placeholder,
|
.productImg_modal .input_border inputinput::-webkit-input-placeholder,
|
||||||
.accountEdit_page .input_border inputinput::-webkit-input-placeholder {
|
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
|
||||||
|
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder {
|
||||||
color: rgba(0, 0, 0, 0.15);
|
color: rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border input.forbidden,
|
.collection_modal_body .input_border input.forbidden,
|
||||||
.design_detail_modal_component .input_border input.forbidden,
|
.design_detail_modal_component .input_border input.forbidden,
|
||||||
.library_page .input_border input.forbidden,
|
.library_page .input_border input.forbidden,
|
||||||
.productImg_modal .input_border input.forbidden,
|
.productImg_modal .input_border input.forbidden,
|
||||||
.accountEdit_page .input_border input.forbidden {
|
.accountEdit_page .input_border input.forbidden,
|
||||||
|
.generalMenu_printModel_upload .input_border input.forbidden {
|
||||||
cursor: no-drop;
|
cursor: no-drop;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox_upImg,
|
.collection_modal_body .input_border .input_box_btnBox_upImg,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
|
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
|
||||||
.library_page .input_border .input_box_btnBox_upImg,
|
.library_page .input_border .input_box_btnBox_upImg,
|
||||||
.productImg_modal .input_border .input_box_btnBox_upImg,
|
.productImg_modal .input_border .input_box_btnBox_upImg,
|
||||||
.accountEdit_page .input_border .input_box_btnBox_upImg {
|
.accountEdit_page .input_border .input_box_btnBox_upImg,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .fi,
|
.collection_modal_body .input_border .fi,
|
||||||
.design_detail_modal_component .input_border .fi,
|
.design_detail_modal_component .input_border .fi,
|
||||||
.library_page .input_border .fi,
|
.library_page .input_border .fi,
|
||||||
.productImg_modal .input_border .fi,
|
.productImg_modal .input_border .fi,
|
||||||
.accountEdit_page .input_border .fi {
|
.accountEdit_page .input_border .fi,
|
||||||
|
.generalMenu_printModel_upload .input_border .fi {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -1725,7 +1774,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
||||||
.library_page .input_border .fi.fi-br-loading,
|
.library_page .input_border .fi.fi-br-loading,
|
||||||
.productImg_modal .input_border .fi.fi-br-loading,
|
.productImg_modal .input_border .fi.fi-br-loading,
|
||||||
.accountEdit_page .input_border .fi.fi-br-loading {
|
.accountEdit_page .input_border .fi.fi-br-loading,
|
||||||
|
.generalMenu_printModel_upload .input_border .fi.fi-br-loading {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
@@ -1733,21 +1783,24 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi.active,
|
.design_detail_modal_component .input_border .fi.active,
|
||||||
.library_page .input_border .fi.active,
|
.library_page .input_border .fi.active,
|
||||||
.productImg_modal .input_border .fi.active,
|
.productImg_modal .input_border .fi.active,
|
||||||
.accountEdit_page .input_border .fi.active {
|
.accountEdit_page .input_border .fi.active,
|
||||||
|
.generalMenu_printModel_upload .input_border .fi.active {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .fi.forbidden,
|
.collection_modal_body .input_border .fi.forbidden,
|
||||||
.design_detail_modal_component .input_border .fi.forbidden,
|
.design_detail_modal_component .input_border .fi.forbidden,
|
||||||
.library_page .input_border .fi.forbidden,
|
.library_page .input_border .fi.forbidden,
|
||||||
.productImg_modal .input_border .fi.forbidden,
|
.productImg_modal .input_border .fi.forbidden,
|
||||||
.accountEdit_page .input_border .fi.forbidden {
|
.accountEdit_page .input_border .fi.forbidden,
|
||||||
|
.generalMenu_printModel_upload .input_border .fi.forbidden {
|
||||||
cursor: no-drop;
|
cursor: no-drop;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .search_upImg,
|
.collection_modal_body .input_border .search_upImg,
|
||||||
.design_detail_modal_component .input_border .search_upImg,
|
.design_detail_modal_component .input_border .search_upImg,
|
||||||
.library_page .input_border .search_upImg,
|
.library_page .input_border .search_upImg,
|
||||||
.productImg_modal .input_border .search_upImg,
|
.productImg_modal .input_border .search_upImg,
|
||||||
.accountEdit_page .input_border .search_upImg {
|
.accountEdit_page .input_border .search_upImg,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_upImg {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -1758,7 +1811,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_upImg span,
|
.design_detail_modal_component .input_border .search_upImg span,
|
||||||
.library_page .input_border .search_upImg span,
|
.library_page .input_border .search_upImg span,
|
||||||
.productImg_modal .input_border .search_upImg span,
|
.productImg_modal .input_border .search_upImg span,
|
||||||
.accountEdit_page .input_border .search_upImg span {
|
.accountEdit_page .input_border .search_upImg span,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_upImg span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -1766,7 +1820,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
|
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
|
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card,
|
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card {
|
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
@@ -1775,7 +1830,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_textarea,
|
.design_detail_modal_component .input_border .search_textarea,
|
||||||
.library_page .input_border .search_textarea,
|
.library_page .input_border .search_textarea,
|
||||||
.productImg_modal .input_border .search_textarea,
|
.productImg_modal .input_border .search_textarea,
|
||||||
.accountEdit_page .input_border .search_textarea {
|
.accountEdit_page .input_border .search_textarea,
|
||||||
|
.generalMenu_printModel_upload .input_border .search_textarea {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -1791,14 +1847,16 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .generage_btn,
|
.design_detail_modal_component .input_border .generage_btn,
|
||||||
.library_page .input_border .generage_btn,
|
.library_page .input_border .generage_btn,
|
||||||
.productImg_modal .input_border .generage_btn,
|
.productImg_modal .input_border .generage_btn,
|
||||||
.accountEdit_page .input_border .generage_btn {
|
.accountEdit_page .input_border .generage_btn,
|
||||||
|
.generalMenu_printModel_upload .input_border .generage_btn {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item,
|
.collection_modal_body .upload_item,
|
||||||
.design_detail_modal_component .upload_item,
|
.design_detail_modal_component .upload_item,
|
||||||
.library_page .upload_item,
|
.library_page .upload_item,
|
||||||
.productImg_modal .upload_item,
|
.productImg_modal .upload_item,
|
||||||
.accountEdit_page .upload_item {
|
.accountEdit_page .upload_item,
|
||||||
|
.generalMenu_printModel_upload .upload_item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
@@ -1806,7 +1864,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item,
|
.design_detail_modal_component .upload_item .upload_file_item,
|
||||||
.library_page .upload_item .upload_file_item,
|
.library_page .upload_item .upload_file_item,
|
||||||
.productImg_modal .upload_item .upload_file_item,
|
.productImg_modal .upload_item .upload_file_item,
|
||||||
.accountEdit_page .upload_item .upload_file_item {
|
.accountEdit_page .upload_item .upload_file_item,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item {
|
||||||
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: calc(10rem*1.2);
|
width: calc(10rem*1.2);
|
||||||
@@ -1820,7 +1879,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item.active,
|
.design_detail_modal_component .upload_item .upload_file_item.active,
|
||||||
.library_page .upload_item .upload_file_item.active,
|
.library_page .upload_item .upload_file_item.active,
|
||||||
.productImg_modal .upload_item .upload_file_item.active,
|
.productImg_modal .upload_item .upload_file_item.active,
|
||||||
.accountEdit_page .upload_item .upload_file_item.active {
|
.accountEdit_page .upload_item .upload_file_item.active,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item.active {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
@@ -1829,21 +1889,24 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
|
.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
|
||||||
.library_page .upload_item .upload_file_item.active .delete_file_block,
|
.library_page .upload_item .upload_file_item.active .delete_file_block,
|
||||||
.productImg_modal .upload_item .upload_file_item.active .delete_file_block,
|
.productImg_modal .upload_item .upload_file_item.active .delete_file_block,
|
||||||
.accountEdit_page .upload_item .upload_file_item.active .delete_file_block {
|
.accountEdit_page .upload_item .upload_file_item.active .delete_file_block,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item.active .delete_file_block {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
|
.collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
|
||||||
.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
|
.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
|
||||||
.library_page .upload_item .upload_file_item.active .operate_file_block,
|
.library_page .upload_item .upload_file_item.active .operate_file_block,
|
||||||
.productImg_modal .upload_item .upload_file_item.active .operate_file_block,
|
.productImg_modal .upload_item .upload_file_item.active .operate_file_block,
|
||||||
.accountEdit_page .upload_item .upload_file_item.active .operate_file_block {
|
.accountEdit_page .upload_item .upload_file_item.active .operate_file_block,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item.active .operate_file_block {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item .upload_file_item.upload_component,
|
.collection_modal_body .upload_item .upload_file_item.upload_component,
|
||||||
.design_detail_modal_component .upload_item .upload_file_item.upload_component,
|
.design_detail_modal_component .upload_item .upload_file_item.upload_component,
|
||||||
.library_page .upload_item .upload_file_item.upload_component,
|
.library_page .upload_item .upload_file_item.upload_component,
|
||||||
.productImg_modal .upload_item .upload_file_item.upload_component,
|
.productImg_modal .upload_item .upload_file_item.upload_component,
|
||||||
.accountEdit_page .upload_item .upload_file_item.upload_component {
|
.accountEdit_page .upload_item .upload_file_item.upload_component,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item.upload_component {
|
||||||
border: none;
|
border: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1853,7 +1916,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
||||||
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
||||||
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
||||||
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
|
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: auto;
|
width: auto;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -1864,7 +1928,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
||||||
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
||||||
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
||||||
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
|
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
|
||||||
width: calc(6rem*1.2);
|
width: calc(6rem*1.2);
|
||||||
height: calc(6rem*1.2);
|
height: calc(6rem*1.2);
|
||||||
border: calc(0.3rem*1.2) solid #ededed;
|
border: calc(0.3rem*1.2) solid #ededed;
|
||||||
@@ -1875,7 +1940,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content,
|
.library_page .upload_item .upload_file_item .upload_file_item_content,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -1887,21 +1953,24 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div,
|
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover div {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover div,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content:hover div {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .upload_img {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .upload_img {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -1912,7 +1981,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -1930,7 +2000,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
|
||||||
width: calc(3.2rem*1.2);
|
width: calc(3.2rem*1.2);
|
||||||
height: calc(3.2rem*1.2);
|
height: calc(3.2rem*1.2);
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
@@ -1946,7 +2017,8 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
||||||
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
|
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
|
||||||
font-size: calc(1.6rem*1.2);
|
font-size: calc(1.6rem*1.2);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@@ -1954,14 +2026,16 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
|
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
|
||||||
.library_page .upload_item .upload_file_item .upload_img_icon,
|
.library_page .upload_item .upload_file_item .upload_img_icon,
|
||||||
.productImg_modal .upload_item .upload_file_item .upload_img_icon,
|
.productImg_modal .upload_item .upload_file_item .upload_img_icon,
|
||||||
.accountEdit_page .upload_item .upload_file_item .upload_img_icon {
|
.accountEdit_page .upload_item .upload_file_item .upload_img_icon,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item .upload_img_icon {
|
||||||
width: calc(4.6rem*1.2);
|
width: calc(4.6rem*1.2);
|
||||||
}
|
}
|
||||||
.collection_modal_body .upload_item .upload_file_item:last-child,
|
.collection_modal_body .upload_item .upload_file_item:last-child,
|
||||||
.design_detail_modal_component .upload_item .upload_file_item:last-child,
|
.design_detail_modal_component .upload_item .upload_file_item:last-child,
|
||||||
.library_page .upload_item .upload_file_item:last-child,
|
.library_page .upload_item .upload_file_item:last-child,
|
||||||
.productImg_modal .upload_item .upload_file_item:last-child,
|
.productImg_modal .upload_item .upload_file_item:last-child,
|
||||||
.accountEdit_page .upload_item .upload_file_item:last-child {
|
.accountEdit_page .upload_item .upload_file_item:last-child,
|
||||||
|
.generalMenu_printModel_upload .upload_item .upload_file_item:last-child {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.generalModel_modal .ant-modal-content {
|
.generalModel_modal .ant-modal-content {
|
||||||
|
|||||||
@@ -10,6 +10,10 @@ html,body,#app{
|
|||||||
--aida-fsize1-8: calc(1.8rem*1.2);
|
--aida-fsize1-8: calc(1.8rem*1.2);
|
||||||
--aida-fsize1-6: calc(1.6rem*1.2);
|
--aida-fsize1-6: calc(1.6rem*1.2);
|
||||||
--aida-fsize1-4: calc(1.4rem*1.2);
|
--aida-fsize1-4: calc(1.4rem*1.2);
|
||||||
|
--antd-wave-shadow-color:#39215b;
|
||||||
|
}
|
||||||
|
::selection{
|
||||||
|
background-color: #1890ff;
|
||||||
}
|
}
|
||||||
input{
|
input{
|
||||||
outline:none;
|
outline:none;
|
||||||
@@ -155,8 +159,7 @@ input:focus{
|
|||||||
}
|
}
|
||||||
.ant-tooltip{
|
.ant-tooltip{
|
||||||
// top: 74px !important;
|
// top: 74px !important;
|
||||||
z-index: 2;
|
z-index: 1049 !important;
|
||||||
|
|
||||||
.ant-tooltip-inner{
|
.ant-tooltip-inner{
|
||||||
background: #343579;
|
background: #343579;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -360,6 +363,9 @@ input:focus{
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto !important;
|
||||||
}
|
}
|
||||||
|
.ant-popover-placement-top{
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
.ant-drawer{
|
.ant-drawer{
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
@@ -542,9 +548,6 @@ input:focus{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-tooltip{
|
|
||||||
z-index: 1049 !important;
|
|
||||||
}
|
|
||||||
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
||||||
background: #000 !important;
|
background: #000 !important;
|
||||||
}
|
}
|
||||||
@@ -763,7 +766,7 @@ input:focus{
|
|||||||
// height: calc(65vh - 6.4rem);
|
// height: calc(65vh - 6.4rem);
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
// background-color: #181818;
|
// background-color: #181818;
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2);
|
padding: calc(5rem*1.2) calc(6rem*1.2);
|
||||||
}
|
}
|
||||||
.ant-modal-btn{
|
.ant-modal-btn{
|
||||||
|
|
||||||
@@ -1063,9 +1066,10 @@ input:focus{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .ant-modal-wrap{
|
.ant-modal-wrap{
|
||||||
// z-index: 10001 ;
|
height: 100vh;
|
||||||
// }
|
overflow: hidden;
|
||||||
|
}
|
||||||
// .driver-overlay-animated{
|
// .driver-overlay-animated{
|
||||||
// z-index: 10002 !important;
|
// z-index: 10002 !important;
|
||||||
// }
|
// }
|
||||||
@@ -1219,6 +1223,11 @@ input:focus{
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
>span{
|
||||||
|
>span{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
>span:nth-child(1){
|
>span:nth-child(1){
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -1228,7 +1237,7 @@ input:focus{
|
|||||||
display: block;
|
display: block;
|
||||||
// min-width: 20%;
|
// min-width: 20%;
|
||||||
// width: 100px;
|
// width: 100px;
|
||||||
width: 10rem;
|
width: 10.5rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
>input{
|
>input{
|
||||||
@@ -1431,28 +1440,39 @@ input:focus{
|
|||||||
color: rgba(0, 0, 0, 1);
|
color: rgba(0, 0, 0, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.homeMain_heade{
|
.homeMain_heade,.account_message{
|
||||||
.ant-badge{
|
.ant-badge{
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
sup.ant-scroll-number{
|
sup.ant-scroll-number{
|
||||||
height: 2rem;
|
height: 1.2rem;
|
||||||
min-height: 2rem;
|
min-height: 5px;
|
||||||
width: 2rem;
|
width: 1.2rem;
|
||||||
min-width: 2rem;
|
min-width: 5px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: .2rem;
|
||||||
|
box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&.ant-badge-dot{
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
.ant-scroll-number-only{
|
.ant-scroll-number-only{
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
transform: scale(.7);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
p.ant-scroll-number-only-unit{
|
p.ant-scroll-number-only-unit{
|
||||||
line-height: 2rem;
|
line-height: 1.2rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1588,7 +1608,7 @@ textarea:focus{
|
|||||||
outline: none; /* 清除默认焦点样式 */
|
outline: none; /* 清除默认焦点样式 */
|
||||||
}
|
}
|
||||||
//设计input和上传按钮样式
|
//设计input和上传按钮样式
|
||||||
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page{
|
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page,.generalMenu_printModel_upload{
|
||||||
.input_border{
|
.input_border{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1668,6 +1688,7 @@ textarea:focus{
|
|||||||
width: var(--width);
|
width: var(--width);
|
||||||
display: flex;
|
display: flex;
|
||||||
float: left;
|
float: left;
|
||||||
|
align-items: center;
|
||||||
.ant-spin-text{
|
.ant-spin-text{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|||||||
247
src/component/Account/account.vue
Normal file
247
src/component/Account/account.vue
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_page">
|
||||||
|
<!-- <div class="account_page_titleImg">
|
||||||
|
<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="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>
|
||||||
|
<div>
|
||||||
|
{{item.name}}
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<!-- <div class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}">
|
||||||
|
<i class="fi" :class="item.icon"></i>
|
||||||
|
<router-link :to="item.route">
|
||||||
|
{{item.name}}
|
||||||
|
</router-link>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="account_page_content_right">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
|
||||||
|
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'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const {t} = useI18n()
|
||||||
|
const store = useStore();
|
||||||
|
let accountHomeData = reactive({
|
||||||
|
rootSubmenuKeys:[
|
||||||
|
{
|
||||||
|
name:t('account.Home'),
|
||||||
|
route:'/home/account/accountHome',
|
||||||
|
icon:'fi-rr-house-chimney'
|
||||||
|
},{
|
||||||
|
name:t('account.myInformation'),
|
||||||
|
route:'/home/account/accountEdit',
|
||||||
|
icon:'fi-rr-user'
|
||||||
|
},{
|
||||||
|
name:t('account.Messages'),
|
||||||
|
route:'/home/account/accountMessage',
|
||||||
|
icon:'fi-rr-envelope'
|
||||||
|
},{
|
||||||
|
name:`${t('account.Follow')} ${t('account.Fans')}`,
|
||||||
|
route:'/home/account/accountFollowFans',
|
||||||
|
icon:'fi-rr-users-alt'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const router = useRouter()
|
||||||
|
// provide('exhibitionList',exhibitionList)
|
||||||
|
let handleClick = (event:any) => {
|
||||||
|
// state.selectedKeys = [Number(event.key)]
|
||||||
|
// state.nowPageName = event.item.name
|
||||||
|
router.push({path:event.item.route})
|
||||||
|
}
|
||||||
|
return{
|
||||||
|
...toRefs(accountHomeData),
|
||||||
|
router,
|
||||||
|
handleClick,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_page{
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 9rem;
|
||||||
|
.account_page_titleImg{
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 30rem;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
display: flex;
|
||||||
|
.account_page_content_left{
|
||||||
|
width: 20%;
|
||||||
|
text-align: center;
|
||||||
|
background: #fafafa;
|
||||||
|
border-right: 1px solid #e9eaec;
|
||||||
|
}
|
||||||
|
.account_page_content_right{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.content_left_item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 10rem;
|
||||||
|
color: #232323;
|
||||||
|
div{
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 15rem;
|
||||||
|
color: #232323;
|
||||||
|
text-align-last: justify;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
color: #cfcfcf;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
color: #fff;
|
||||||
|
background: #39215b;
|
||||||
|
div{
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.account_generalMessage_title{
|
||||||
|
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;
|
||||||
|
background: #fff;
|
||||||
|
margin-right: 5rem;
|
||||||
|
margin-left: 5rem;
|
||||||
|
&.modal_title_text{
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.account_generalMessage_title_setting{
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto
|
||||||
|
}
|
||||||
|
.account_generalMessage_title_seach{
|
||||||
|
display: flex;
|
||||||
|
input{
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
.search_icon_block{
|
||||||
|
background: #39215b;
|
||||||
|
color: #fff;
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_center{
|
||||||
|
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;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 0px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem 5rem;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #e9eaec;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
margin-left: 5rem;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
.ant-badge{
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-100%, 100%);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_link{
|
||||||
|
color: #39215b;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_link:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:hover{
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
.page_loading_box{
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
.page_loading{
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
222
src/component/Account/accountEdit.vue
Normal file
222
src/component/Account/accountEdit.vue
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
<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>
|
||||||
172
src/component/Account/accountFollowFans.vue
Normal file
172
src/component/Account/accountFollowFans.vue
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_followFans">
|
||||||
|
<div class="account_followFans_title modal_title_text">
|
||||||
|
<div class="">
|
||||||
|
{{$t('account.Interact')}}
|
||||||
|
</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>
|
||||||
|
<fans v-if="item.key == 'fans'" :ref="item.key"></fans>
|
||||||
|
<template #tab>
|
||||||
|
<span>{{item.title}}</span>
|
||||||
|
<!--
|
||||||
|
<a-badge :count="messageSystem.messageType[item.key]" >
|
||||||
|
<span>{{item.title}}</span>
|
||||||
|
</a-badge> -->
|
||||||
|
</template>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<a-tab-pane key="1" tab="系统消息">
|
||||||
|
<system ref="system"></system>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane key="3" tab="评论">
|
||||||
|
<comment></comment>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="点赞">
|
||||||
|
<likeMessage></likeMessage>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="6" tab="新增粉丝">
|
||||||
|
<newFollow ref="newFollow"></newFollow>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane> -->
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import follow from '@/component/Account/followFans/follow.vue'
|
||||||
|
import fans from '@/component/Account/followFans/fans.vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
follow,
|
||||||
|
fans,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
const {t} = useI18n()
|
||||||
|
let accountMessage = reactive({
|
||||||
|
messageList:[
|
||||||
|
{
|
||||||
|
title:t('account.Follow'),
|
||||||
|
key:'follow',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:t('account.Fans'),
|
||||||
|
key:'fans',
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
activeKey: '',
|
||||||
|
})
|
||||||
|
let userInfo= computed(()=>{
|
||||||
|
return store.state.UserHabit.userInfo
|
||||||
|
})
|
||||||
|
let domRefs:any = reactive({
|
||||||
|
follow:ref(null),
|
||||||
|
fans:ref(null),
|
||||||
|
})
|
||||||
|
let messageSystem = computed(()=>{
|
||||||
|
return store.state.UserHabit.messageSystem
|
||||||
|
})
|
||||||
|
let changeTabs = (key:any)=>{
|
||||||
|
}
|
||||||
|
let setReadStatus = (value:any)=>{
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
if(value.isRead == 1)return reject('')
|
||||||
|
let data = {
|
||||||
|
type:accountMessage.activeKey,
|
||||||
|
notificationIdList:value.id
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
resolve(rv)
|
||||||
|
// store.commit('setMessageSystem',rv)
|
||||||
|
}
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
let key = accountMessage.messageList[0].key
|
||||||
|
accountMessage.activeKey = key
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
...toRefs(domRefs),
|
||||||
|
userInfo,
|
||||||
|
messageSystem,
|
||||||
|
setReadStatus,
|
||||||
|
changeTabs,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_followFans{
|
||||||
|
width: 100%;
|
||||||
|
.account_followFans_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 2rem 5rem;
|
||||||
|
border-bottom: 1px solid #e9eaec;
|
||||||
|
.account_followFans_title_setting{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_followFans_body{
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
:deep(.ant-badge){
|
||||||
|
font-size: var(--aida-fsize2);
|
||||||
|
}
|
||||||
|
:deep(.ant-tabs-nav){
|
||||||
|
padding: 0rem 5rem;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-tabs-content){
|
||||||
|
height: 80rem;
|
||||||
|
// min-height: 80rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
222
src/component/Account/accountHome.vue
Normal file
222
src/component/Account/accountHome.vue
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
<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>
|
||||||
230
src/component/Account/accountMessage.vue
Normal file
230
src/component/Account/accountMessage.vue
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
<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>
|
||||||
|
<privateChat v-if="item.key == 'privateChat'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></privateChat>
|
||||||
|
<comment v-if="item.key == 'comment'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></comment>
|
||||||
|
<likeMessage v-if="item.key == 'like'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></likeMessage>
|
||||||
|
<newFollow v-if="item.key == 'follow'" :ref="item.key" :setReadStatus="setReadStatus" :setAllmessage="setAllmessage" :getHistory="getHistory"></newFollow>
|
||||||
|
<!-- <newFollow v-if="item.key == 'service'" :ref="item.key"></newFollow> -->
|
||||||
|
<template #tab>
|
||||||
|
<a-badge :count="messageSystem.messageType[item.key]" >
|
||||||
|
<span>{{item.title}}</span>
|
||||||
|
</a-badge>
|
||||||
|
</template>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<a-tab-pane key="1" tab="系统消息">
|
||||||
|
<system ref="system"></system>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane key="3" tab="评论">
|
||||||
|
<comment></comment>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="点赞">
|
||||||
|
<likeMessage></likeMessage>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="6" tab="新增粉丝">
|
||||||
|
<newFollow ref="newFollow"></newFollow>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane> -->
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import system from '@/component/Account/message/system.vue'
|
||||||
|
import privateChat from '@/component/Account/message/privateChat.vue'
|
||||||
|
import newFollow from '@/component/Account/message/newFollow.vue'
|
||||||
|
import likeMessage from '@/component/Account/message/likeMessage.vue'
|
||||||
|
import comment from '@/component/Account/message/comment.vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
system,
|
||||||
|
privateChat,
|
||||||
|
newFollow,
|
||||||
|
likeMessage,
|
||||||
|
comment,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const {t} = useI18n()
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountMessage = reactive({
|
||||||
|
messageList:[
|
||||||
|
{
|
||||||
|
title:t('account.systemMessages'),
|
||||||
|
key:'system',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title:'私信',
|
||||||
|
// key:'privateChat',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title:t('account.comment'),
|
||||||
|
key:'comment',
|
||||||
|
},{
|
||||||
|
title:t('account.like'),
|
||||||
|
key:'like',
|
||||||
|
},{
|
||||||
|
title:t('account.NewFans'),
|
||||||
|
key:'follow',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title:'客服',
|
||||||
|
// key:'service',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
activeKey: '',
|
||||||
|
})
|
||||||
|
let domRefs:any = reactive({
|
||||||
|
system:ref(null),
|
||||||
|
comment:ref(null),
|
||||||
|
like:ref(null),
|
||||||
|
follow:ref(null),
|
||||||
|
service:ref(null)
|
||||||
|
})
|
||||||
|
let messageSystem = computed(()=>{
|
||||||
|
return store.state.UserHabit.messageSystem
|
||||||
|
})
|
||||||
|
// provide('exhibitionList',exhibitionList)
|
||||||
|
let setUserData = ()=>{
|
||||||
|
router.push({path:'/home/account/accountEdit'})
|
||||||
|
}
|
||||||
|
let changeTabs = (key:any)=>{
|
||||||
|
// if(accountMessage.activeKey == 'service')return
|
||||||
|
}
|
||||||
|
let setReadStatus = (value:any)=>{
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
if(value.isRead == 1)return reject('')
|
||||||
|
let data = {
|
||||||
|
type:accountMessage.activeKey,
|
||||||
|
notificationIdList:value.id
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
resolve(rv)
|
||||||
|
// store.commit('setMessageSystem',rv)
|
||||||
|
}
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let setAllmessage = ()=>{
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
let data = {
|
||||||
|
type:accountMessage.activeKey
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
|
||||||
|
resolve(rv)
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let getHistory = (data:any)=>{
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
data.type = accountMessage.activeKey
|
||||||
|
let url = Https.httpUrls.getHistoryNotification
|
||||||
|
// if(data.type == 'follow'){
|
||||||
|
// url = Https.httpUrls.porfolioGetFollowerList
|
||||||
|
// }
|
||||||
|
Https.axiosPost(url,data).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
// domRefs[data.type][0].setmessageList(rv,data)
|
||||||
|
resolve(rv)
|
||||||
|
}
|
||||||
|
}).catch((err)=>{
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
let key = accountMessage.messageList[0].key
|
||||||
|
accountMessage.activeKey = key
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
...toRefs(domRefs),
|
||||||
|
messageSystem,
|
||||||
|
setUserData,
|
||||||
|
setReadStatus,
|
||||||
|
changeTabs,
|
||||||
|
setAllmessage,
|
||||||
|
getHistory,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<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){
|
||||||
|
font-size: var(--aida-fsize2);
|
||||||
|
}
|
||||||
|
:deep(.ant-tabs-nav){
|
||||||
|
padding: 0rem 5rem;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-tabs-content){
|
||||||
|
height: 80rem;
|
||||||
|
// min-height: 80rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
180
src/component/Account/followFans/fans.vue
Normal file
180
src/component/Account/followFans/fans.vue
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_center modal_title_text">
|
||||||
|
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||||
|
<div class="account_generalMessage_item_right">
|
||||||
|
<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_right_title">
|
||||||
|
<div class="">{{ item.userName }}</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_left">
|
||||||
|
<!-- <div @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div> -->
|
||||||
|
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||||
|
<span v-show="getListData.isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
// emits:['setReadStatus','setAllmessage'],
|
||||||
|
props:[''],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountFollofFans:any = reactive({
|
||||||
|
getListData: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
seachContent:'',
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
},
|
||||||
|
dataList:ref([
|
||||||
|
|
||||||
|
])
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let searchFollowFansList = ()=>{
|
||||||
|
accountFollofFans.getListData.page = 1
|
||||||
|
getFollowFansList()
|
||||||
|
}
|
||||||
|
let getFollowFansList = ()=>{
|
||||||
|
accountFollofFans.getListData.isShowMark = true
|
||||||
|
let data = accountFollofFans.getListData
|
||||||
|
Https.axiosPost(Https.httpUrls.porfolioGetFollowerList,data).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
accountFollofFans.getListData.isShowMark = false
|
||||||
|
if(rv.length == 0) {
|
||||||
|
accountFollofFans.getListData.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
accountFollofFans.dataList = rv
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
accountFollofFans.getListData.isShowMark = false
|
||||||
|
accountFollofFans.getListData.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setFollow = (item:any) =>{
|
||||||
|
let url = Https.httpUrls.porfolioFollow
|
||||||
|
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
Https.axiosGet(url, {params:{followeeId:item.senderId}})
|
||||||
|
.then((rv) => {
|
||||||
|
searchFollowFansList()
|
||||||
|
// if(item.isFollow == 1){
|
||||||
|
// item.isFollow = 0
|
||||||
|
// }else{
|
||||||
|
// item.isFollow = 1
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
accountFollofFans.getListData.isNoData = false
|
||||||
|
accountFollofFans.getListData.page = 0
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountFollofFans.getListData.page+=1
|
||||||
|
getFollowFansList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountFollofFans),
|
||||||
|
searchFollowFansList,
|
||||||
|
getFollowFansList,
|
||||||
|
loadingDom,
|
||||||
|
setFollow,
|
||||||
|
openOtherUsers,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_fans{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_center{
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.account_generalMessage_item_right_img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_left{
|
||||||
|
div{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 2px solid #e9eaec;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:hover{
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
183
src/component/Account/followFans/follow.vue
Normal file
183
src/component/Account/followFans/follow.vue
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_follow">
|
||||||
|
<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>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_center modal_title_text">
|
||||||
|
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||||
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
|
<div class="account_generalMessage_item_right">
|
||||||
|
<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_right_title">
|
||||||
|
<div class="">{{ item.userName }}</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_left">
|
||||||
|
<!-- <div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div> -->
|
||||||
|
<div @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||||
|
<span v-show="getListData.isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
// emits:['setReadStatus','setAllmessage'],
|
||||||
|
props:[''],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountFollofFans = reactive({
|
||||||
|
getListData: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
seachContent:'',
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
},
|
||||||
|
dataList:ref([
|
||||||
|
|
||||||
|
])
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let searchFollowFansList = ()=>{
|
||||||
|
accountFollofFans.getListData.page = 1
|
||||||
|
getFollowFansList()
|
||||||
|
}
|
||||||
|
let getFollowFansList = ()=>{
|
||||||
|
accountFollofFans.getListData.isShowMark = true
|
||||||
|
let data = accountFollofFans.getListData
|
||||||
|
Https.axiosPost(Https.httpUrls.porfolioGetFolloweeList,data).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
accountFollofFans.getListData.isShowMark = false
|
||||||
|
if(rv.length == 0) {
|
||||||
|
accountFollofFans.getListData.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
accountFollofFans.dataList = rv
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
accountFollofFans.getListData.isShowMark = false
|
||||||
|
accountFollofFans.getListData.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setFollow = (item:any) =>{
|
||||||
|
// let url = Https.httpUrls.porfolioFollow
|
||||||
|
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
let url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
Https.axiosGet(url, {params:{followeeId:item.senderId}})
|
||||||
|
.then((rv) => {
|
||||||
|
searchFollowFansList()
|
||||||
|
// if(item.isFollow == 1){
|
||||||
|
// item.isFollow = 0
|
||||||
|
// }else{
|
||||||
|
// item.isFollow = 1
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
accountFollofFans.getListData.isNoData = false
|
||||||
|
accountFollofFans.getListData.page = 0
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountFollofFans.getListData.page+=1
|
||||||
|
getFollowFansList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountFollofFans),
|
||||||
|
searchFollowFansList,
|
||||||
|
getFollowFansList,
|
||||||
|
loadingDom,
|
||||||
|
setFollow,
|
||||||
|
openOtherUsers,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_follow{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_center{
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.account_generalMessage_item_right_img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_left{
|
||||||
|
div{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 2px solid #e9eaec;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:hover{
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
216
src/component/Account/message/comment.vue
Normal file
216
src/component/Account/message/comment.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_comment">
|
||||||
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
|
<!-- <span>收到的评论</span> -->
|
||||||
|
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_center modal_title_text">
|
||||||
|
|
||||||
|
<div class="account_generalMessage_item" v-for="item in dataList" @click="setRead(item)">
|
||||||
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
|
<div class="account_generalMessage_item_right">
|
||||||
|
<div class="account_generalMessage_item_right_img" @click.stop="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_right_title">
|
||||||
|
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.reply')}}</span></div>
|
||||||
|
<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
|
||||||
|
<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_left">
|
||||||
|
<div class="account_generalMessage_item_left_delete modal_title_text_intro">
|
||||||
|
<!-- <span class="icon iconfont icon-shanchu operate_icon"></span> -->
|
||||||
|
</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
|
<span v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
props:['setReadStatus','setAllmessage','getHistory'],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountMessage = reactive({
|
||||||
|
activeKey: ref('1'),
|
||||||
|
dataList:[
|
||||||
|
],
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let setmessageList = ()=>{
|
||||||
|
accountMessage.isShowMark = true
|
||||||
|
let data = {
|
||||||
|
page: accountMessage.page,
|
||||||
|
size: accountMessage.size,
|
||||||
|
}
|
||||||
|
prop.getHistory(data).then((rv:any)=>{
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
if(rv.content.length == 0) {
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
accountMessage.dataList = rv.content
|
||||||
|
}).catch(() => {
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setRead = (item:any)=>{
|
||||||
|
prop.setReadStatus(item).then((rv:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let allRead = ()=>{
|
||||||
|
// emit('setAllmessage')
|
||||||
|
prop.setAllmessage().then(()=>{
|
||||||
|
accountMessage.dataList.forEach((item:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
})
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
let openOtherWork = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/works',
|
||||||
|
query:{
|
||||||
|
workId:item.portfolioId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
accountMessage.isNoData = false
|
||||||
|
accountMessage.page = 0
|
||||||
|
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountMessage.page+=1
|
||||||
|
setmessageList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
setmessageList,
|
||||||
|
setRead,
|
||||||
|
allRead,
|
||||||
|
openOtherUsers,
|
||||||
|
openOtherWork,
|
||||||
|
loadingDom,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_comment{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
.account_generalMessage_item_right_works{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_right_works:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_right_img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_right_title{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
.account_generalMessage_item_right_title_center{
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_right_title_name{
|
||||||
|
font-weight: 600;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000;
|
||||||
|
span{
|
||||||
|
font-weight: 500;
|
||||||
|
color: #9999aa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_left{
|
||||||
|
text-align: right;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.account_generalMessage_item_left_delete{
|
||||||
|
span{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/component/Account/message/likeMessage.vue
Normal file
194
src/component/Account/message/likeMessage.vue
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_like">
|
||||||
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
|
<!-- <span>点赞</span> -->
|
||||||
|
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_center modal_title_text">
|
||||||
|
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||||
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
|
<div class="account_generalMessage_item_right">
|
||||||
|
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_right_title">
|
||||||
|
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.likedYourWork')}}</span></div>
|
||||||
|
<div>{{ item.portfolioName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_left">
|
||||||
|
<div class="account_generalMessage_item_left_delete modal_title_text_intro">
|
||||||
|
<!-- <span class="icon iconfont icon-shanchu operate_icon"></span> -->
|
||||||
|
</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
|
<span v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
// emits:['setReadStatus','setAllmessage'],
|
||||||
|
props:['setReadStatus','setAllmessage','getHistory'],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountMessage = reactive({
|
||||||
|
activeKey: ref('1'),
|
||||||
|
dataList:[
|
||||||
|
],
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let setmessageList = ()=>{
|
||||||
|
accountMessage.isShowMark = true
|
||||||
|
let data = {
|
||||||
|
page: accountMessage.page,
|
||||||
|
size: accountMessage.size,
|
||||||
|
}
|
||||||
|
prop.getHistory(data).then((rv:any)=>{
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
if(rv.content.length == 0) {
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
accountMessage.dataList = rv.content
|
||||||
|
}).catch(() => {
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setRead = (item:any)=>{
|
||||||
|
prop.setReadStatus(item).then((rv:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let allRead = ()=>{
|
||||||
|
// emit('setAllmessage')
|
||||||
|
prop.setAllmessage().then(()=>{
|
||||||
|
accountMessage.dataList.forEach((item:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
})
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted (()=>{
|
||||||
|
accountMessage.isNoData = false
|
||||||
|
accountMessage.page = 0
|
||||||
|
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountMessage.page+=1
|
||||||
|
setmessageList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
setmessageList,
|
||||||
|
setRead,
|
||||||
|
allRead,
|
||||||
|
openOtherUsers,
|
||||||
|
loadingDom,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_like{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_title{
|
||||||
|
}
|
||||||
|
.account_generalMessage_center{
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
.account_generalMessage_item_right_img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_right_title{
|
||||||
|
.account_generalMessage_item_right_title_name{
|
||||||
|
font-weight: 600;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000;
|
||||||
|
span{
|
||||||
|
font-weight: 500;
|
||||||
|
color: #9999aa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_left{
|
||||||
|
text-align: right;
|
||||||
|
flex-shrink: 0;
|
||||||
|
.account_generalMessage_item_left_delete{
|
||||||
|
span{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
185
src/component/Account/message/newFollow.vue
Normal file
185
src/component/Account/message/newFollow.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_newFollow">
|
||||||
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
|
<!-- <span>新增粉丝</span> -->
|
||||||
|
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_center modal_title_text">
|
||||||
|
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||||
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
|
<div class="account_generalMessage_item_right">
|
||||||
|
<div class="account_generalMessage_item_right_img" @click="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_right_title">
|
||||||
|
<div class="">{{ item.userName }}</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }} {{$t('account.followedYou')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item_left">
|
||||||
|
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
|
<span v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
// emits:['setReadStatus','setAllmessage'],
|
||||||
|
props:['setReadStatus','setAllmessage','getHistory'],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountMessage = reactive({
|
||||||
|
activeKey: ref('1'),
|
||||||
|
dataList:[
|
||||||
|
|
||||||
|
],
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let setmessageList = ()=>{
|
||||||
|
accountMessage.isShowMark = true
|
||||||
|
let data = {
|
||||||
|
page: accountMessage.page,
|
||||||
|
size: accountMessage.size,
|
||||||
|
}
|
||||||
|
prop.getHistory(data).then((rv:any)=>{
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
if(rv.content.length == 0) {
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
accountMessage.dataList = rv.content
|
||||||
|
}).catch(() => {
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setRead = (item:any)=>{
|
||||||
|
prop.setReadStatus(item).then((rv:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let allRead = ()=>{
|
||||||
|
// emit('setAllmessage')
|
||||||
|
prop.setAllmessage().then(()=>{
|
||||||
|
accountMessage.dataList.forEach((item:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
})
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setFollow = (item:any) =>{
|
||||||
|
let url = Https.httpUrls.porfolioFollow
|
||||||
|
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
Https.axiosGet(url, {params:{followeeId:item.senderId}})
|
||||||
|
.then((rv) => {
|
||||||
|
if(item.isFollow == 1){
|
||||||
|
item.isFollow = 0
|
||||||
|
}else{
|
||||||
|
item.isFollow = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
accountMessage.isNoData = false
|
||||||
|
accountMessage.page = 0
|
||||||
|
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountMessage.page+=1
|
||||||
|
setmessageList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
setmessageList,
|
||||||
|
setRead,
|
||||||
|
allRead,
|
||||||
|
setFollow,
|
||||||
|
openOtherUsers,
|
||||||
|
loadingDom,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_newFollow{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_center{
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_right{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.account_generalMessage_item_right_img{
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
margin-right: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item_left{
|
||||||
|
div{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 2px solid #e9eaec;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.account_generalMessage_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
427
src/component/Account/message/privateChat.vue
Normal file
427
src/component/Account/message/privateChat.vue
Normal file
@@ -0,0 +1,427 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_privateChatMessage">
|
||||||
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
|
<!-- <span>私信</span> -->
|
||||||
|
<div class="account_generalMessage_title_setting">全部已读</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_privateChatMessage_content">
|
||||||
|
<div class="content_left">
|
||||||
|
<div class="content_left_item" v-for="item,index in privateChatList" :class="{active:item.active}" @click.stop="openPrivateChat(item,index)">
|
||||||
|
<div class="content_left_item_btn" @click.stop="deletePrivateChat(item,index)">
|
||||||
|
<i class="fi fi-rr-cross-small"></i>
|
||||||
|
</div>
|
||||||
|
<!-- <img :src="item.img" alt=""> -->
|
||||||
|
<img src="../../../assets/images/homePage/alipay.svg" alt="">
|
||||||
|
<div class="modal_title_text">
|
||||||
|
<div class="modal_title_text_assistant" :title="item.title">{{item.title}}</div>
|
||||||
|
<div class="modal_title_text_intro" :title="item.intro">{{item.intro}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_right" v-if="currentPrivateChat >= 0">
|
||||||
|
<div class="content_right_top">
|
||||||
|
<div class="modal_title_text">
|
||||||
|
<div class="">{{ privateChat[currentPrivateChat]?.title }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_right_record">
|
||||||
|
<div class="content_right_record_item" v-for="item in privateChat[currentPrivateChat]?.messageList">
|
||||||
|
<div v-if="item.type == 'time'" class="content_right_record_item_time">
|
||||||
|
{{ item.data }}
|
||||||
|
</div>
|
||||||
|
<div v-else class="content_right_record_item_content" :class="{active:item.type == 'user'}">
|
||||||
|
<div class="content_right_record_item_HeadImg">
|
||||||
|
<img src="../../../assets/images/homePage/alipay.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="content_right_record_item_text">
|
||||||
|
{{ item.data }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_right_send">
|
||||||
|
<div class="content_right_operation">
|
||||||
|
<div>icon</div>
|
||||||
|
<div>icon</div>
|
||||||
|
<div>icon</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_right_input">
|
||||||
|
<textarea ref="textarea" v-if="privateChat[currentPrivateChat]?.title" v-model="privateChat[currentPrivateChat].temporary"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="content_right_btn modal_title_text">
|
||||||
|
<div class="content_right_btn_astrict modal_title_text_intro">
|
||||||
|
<span :style="{color:privateChat[currentPrivateChat]?.temporary.length>500?'red':''}">
|
||||||
|
{{privateChat[currentPrivateChat]?.temporary.length}}
|
||||||
|
</span>
|
||||||
|
/500</div>
|
||||||
|
<div class="content_right_btn_send started_btn" @click="sendCli">发送</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_right content_right_null" v-else>
|
||||||
|
您还未选中或者发起聊天，快去跟好友聊一聊吧
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountPrivateChat:any = reactive({
|
||||||
|
activeKey: ref('1'),
|
||||||
|
privateChatList:[
|
||||||
|
{
|
||||||
|
title:'AI Fashion Designer1',
|
||||||
|
intro:'333',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
active:false,
|
||||||
|
id:1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'AI Fashion Designer2',
|
||||||
|
intro:'222',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
active:false,
|
||||||
|
id:2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'AI Fashion Designer3',
|
||||||
|
intro:'111',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
active:false,
|
||||||
|
id:3,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
currentPrivateChat:-1,
|
||||||
|
privateChat:{
|
||||||
|
1:{
|
||||||
|
title:'ABC',
|
||||||
|
temporary:'',
|
||||||
|
messageList:[
|
||||||
|
{
|
||||||
|
type:'time',
|
||||||
|
data:'2022-12-12 12:12:12'
|
||||||
|
},{
|
||||||
|
type:'opposite',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'time',
|
||||||
|
data:'2022-12-22 12:12:12'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},{
|
||||||
|
type:'user',
|
||||||
|
img:'../../../assets/images/homePage/alipay.svg',
|
||||||
|
data:'hello,'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
let loadingShow = ref(false)
|
||||||
|
let textarea = ref()
|
||||||
|
// let ws = new WebSocket('ws://127.0.0.1:3000')
|
||||||
|
// console.log(ws);
|
||||||
|
|
||||||
|
// ws.onopen = ()=>{
|
||||||
|
// console.log(222);
|
||||||
|
// let data = {
|
||||||
|
// cmd:4,
|
||||||
|
// data:{
|
||||||
|
// msg:'222'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ws.send(JSON.stringify(data))
|
||||||
|
// // ws.onmessage = (data)=>{
|
||||||
|
// // console.log(data);
|
||||||
|
// // }
|
||||||
|
// }
|
||||||
|
// provide('exhibitionList',exhibitionList)
|
||||||
|
let openPrivateChat = (data:any,index:number)=>{
|
||||||
|
accountPrivateChat.privateChatList.forEach((item:any)=>{
|
||||||
|
item.active = false
|
||||||
|
})
|
||||||
|
// accountPrivateChat.privateChat
|
||||||
|
accountPrivateChat.currentPrivateChat = data.id
|
||||||
|
data.active = true
|
||||||
|
getPrivateChat(data)
|
||||||
|
}
|
||||||
|
let deletePrivateChat = (data:any,index:number)=>{
|
||||||
|
if(data.active){
|
||||||
|
accountPrivateChat.privateChatList[0].active = true
|
||||||
|
getPrivateChat(data)
|
||||||
|
accountPrivateChat.currentPrivateChat = accountPrivateChat.privateChatList[0].id
|
||||||
|
}
|
||||||
|
accountPrivateChat.privateChatList.splice(index,1)
|
||||||
|
}
|
||||||
|
let getPrivateChat = async (data:any)=>{
|
||||||
|
if(!accountPrivateChat.privateChat[data.id]){
|
||||||
|
loadingShow.value = true
|
||||||
|
await new Promise((resolve:any, reject:any) => {
|
||||||
|
setTimeout(()=>{
|
||||||
|
accountPrivateChat.privateChat[data.id] = JSON.parse(JSON.stringify(accountPrivateChat.privateChat[1]))
|
||||||
|
loadingShow.value = false
|
||||||
|
resolve('')
|
||||||
|
},1000)
|
||||||
|
})
|
||||||
|
// Https.axiosGet(Https.httpUrls.accountBindEmail,{}).then((res:any)=>{
|
||||||
|
// console.log(res);
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
nextTick(()=>{
|
||||||
|
if(textarea.value){
|
||||||
|
textarea.value.focus()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let sendCli = ()=>{
|
||||||
|
if(accountPrivateChat.privateChat[accountPrivateChat.currentPrivateChat]?.temporary.length>500){
|
||||||
|
return message.info('输入的内容超过最大限制')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountPrivateChat),
|
||||||
|
loadingShow,
|
||||||
|
textarea,
|
||||||
|
openPrivateChat,
|
||||||
|
deletePrivateChat,
|
||||||
|
sendCli,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_privateChatMessage{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.account_privateChatMessage_content{
|
||||||
|
flex: 1;
|
||||||
|
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 5rem;
|
||||||
|
margin-left: 5rem;
|
||||||
|
.content_left{
|
||||||
|
width: 20%;
|
||||||
|
border-right: 1px solid #e9eaec;
|
||||||
|
height: 100%;
|
||||||
|
.content_left_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2rem 2rem;
|
||||||
|
padding-left: 0;
|
||||||
|
border-bottom: 1px solid #e9eaec;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
&.active{
|
||||||
|
background: #e4e5e6;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
.modal_title_text{
|
||||||
|
width: calc(100% - 6rem - 2rem - 4rem);
|
||||||
|
margin-bottom: 0;
|
||||||
|
div{
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_left_item_btn{
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: all .3s;
|
||||||
|
i{
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
font-size: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_left_item:hover{
|
||||||
|
background: #e4e5e6;
|
||||||
|
.content_left_item_btn{
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right{
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f4f5f7;
|
||||||
|
position: relative;
|
||||||
|
.mark_loading{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&.content_right_null{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: #bec9d2;
|
||||||
|
font-weight: 900;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.content_right_top{
|
||||||
|
.modal_title_text{
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
padding: 1.5rem 0
|
||||||
|
}
|
||||||
|
border-bottom: 1px solid #e9eaec;
|
||||||
|
}
|
||||||
|
.content_right_record{
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 38.5rem;
|
||||||
|
&.content_right_record::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.content_right_record_item{
|
||||||
|
display: flex;
|
||||||
|
margin: 2rem 0;
|
||||||
|
padding: 0 2rem;
|
||||||
|
.content_right_record_item_time{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content_right_record_item_content{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
.content_right_record_item_HeadImg{
|
||||||
|
img{
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right_record_item_text{
|
||||||
|
background: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
transform: translateY(1rem);
|
||||||
|
border-radius: 0 2rem 2rem 2rem;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
.content_right_record_item_HeadImg{
|
||||||
|
margin-left: 2rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
.content_right_record_item_text{
|
||||||
|
border-radius: 2rem 0rem 2rem 2rem;
|
||||||
|
background: #39215b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right_send{
|
||||||
|
border-top: 1px solid #e9eaec;
|
||||||
|
height: 20rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.content_right_operation{
|
||||||
|
height: 4rem;
|
||||||
|
display: flex;
|
||||||
|
div{
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
div:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right_input{
|
||||||
|
flex: 1;
|
||||||
|
textarea{
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
max-height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right_btn{
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-top: 1rem;
|
||||||
|
.content_right_btn_astrict{
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
.content_right_btn_send{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
140
src/component/Account/message/system.vue
Normal file
140
src/component/Account/message/system.vue
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account_systemMessage">
|
||||||
|
<div class="account_generalMessage_title modal_title_text">
|
||||||
|
<!-- <span>系统消息</span> -->
|
||||||
|
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||||
|
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||||
|
<div class="account_generalMessage_item_title">
|
||||||
|
<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal_title_text_intro">
|
||||||
|
{{ item.content.content }}
|
||||||
|
<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="account_generalMessage_item modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
|
<span v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
// emits:['putListData'],
|
||||||
|
props:['setReadStatus','setAllmessage','getHistory'],
|
||||||
|
setup(prop,{emit}) {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let accountMessage = reactive({
|
||||||
|
dataList: [],
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let setmessageList = ()=>{
|
||||||
|
accountMessage.isShowMark = true
|
||||||
|
let data = {
|
||||||
|
page: accountMessage.page,
|
||||||
|
size: accountMessage.size,
|
||||||
|
}
|
||||||
|
prop.getHistory(data).then((rv:any)=>{
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
if(rv.content.length == 0) {
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
rv.content.forEach((item:any) => {
|
||||||
|
item.content = JSON.parse(item.content)
|
||||||
|
});
|
||||||
|
accountMessage.dataList = rv.content
|
||||||
|
}).catch(() => {
|
||||||
|
accountMessage.isShowMark = false
|
||||||
|
accountMessage.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setRead = (item:any)=>{
|
||||||
|
prop.setReadStatus(item).then((rv:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let allRead = ()=>{
|
||||||
|
// emit('setAllmessage')
|
||||||
|
prop.setAllmessage().then(()=>{
|
||||||
|
accountMessage.dataList.forEach((item:any)=>{
|
||||||
|
item.isRead = 1
|
||||||
|
})
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// provide('exhibitionList',exhibitionList)
|
||||||
|
onMounted (()=>{
|
||||||
|
accountMessage.isNoData = false
|
||||||
|
accountMessage.page = 0
|
||||||
|
let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
accountMessage.page+=1
|
||||||
|
setmessageList()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(accountMessage),
|
||||||
|
setmessageList,
|
||||||
|
setRead,
|
||||||
|
allRead,
|
||||||
|
loadingDom,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.account_systemMessage{
|
||||||
|
width: 100%;
|
||||||
|
.account_generalMessage_item{
|
||||||
|
.account_generalMessage_item_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
.account_generalMessage_item_title_text{
|
||||||
|
max-width: 80%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.modal_title_text_intro{
|
||||||
|
margin-left: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
214
src/component/Account/otherUsers.vue
Normal file
214
src/component/Account/otherUsers.vue
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<div class="otherUsers">
|
||||||
|
<div class="otherUsers_page_titleImg">
|
||||||
|
<!-- <img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt=""> -->
|
||||||
|
</div>
|
||||||
|
<div class="otherUsers_userDetail">
|
||||||
|
<div class="otherUsers_userDetail_img">
|
||||||
|
<img :src="userContent.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="otherUsers_userDetail_center">
|
||||||
|
<div class="otherUsers_userDetail_center_name modal_title_text">
|
||||||
|
<div>{{ userContent.userName }}</div>
|
||||||
|
<div v-if="userContent?.isFollow == 0" @click.stop="setFollow(userContent)" class="userDetail_center_name_left">{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else @click.stop="setFollow(userContent)" class="userDetail_center_name_left">{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="otherUsers_userDetail_center_data">
|
||||||
|
<!-- <div class="userDetail_center_data_item modal_title_text">
|
||||||
|
<div>{{ userContent.homepageViewCount }}</div>
|
||||||
|
<span class="modal_title_text_intro">访问量</span>
|
||||||
|
</div> -->
|
||||||
|
<div class="userDetail_center_data_item modal_title_text">
|
||||||
|
<div>{{ userContent.portfolioCount }}</div>
|
||||||
|
<span class="modal_title_text_intro">{{$t('account.works')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="userDetail_center_data_item modal_title_text">
|
||||||
|
<div>{{ userContent.followerCount }}</div>
|
||||||
|
<span class="modal_title_text_intro">{{$t('account.Fans')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="userDetail_center_data_item modal_title_text">
|
||||||
|
<div>{{ userContent.followeeCount }}</div>
|
||||||
|
<span class="modal_title_text_intro">{{$t('account.Follow')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="otherUsers_userDetail_center_signature">
|
||||||
|
<div class="modal_title_text">
|
||||||
|
<!-- <div class="modal_title_text_intro">个性签名个性签名个性签名</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="otherUser_works">
|
||||||
|
<div class="otherUser_works_title modal_title_text">
|
||||||
|
<div>{{$t('account.hisWorks')}}</div>
|
||||||
|
</div>
|
||||||
|
<Works :isScroll="false" :otherUsers="true" :userId=userId></Works>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import Works from '@/views/HomeView/Works.vue';
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
Works
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router:any = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let otherUsers = reactive({
|
||||||
|
userId:'0',
|
||||||
|
userContent:{}
|
||||||
|
})
|
||||||
|
let getUserDetail = (id:any)=>{
|
||||||
|
let data = {
|
||||||
|
id:id
|
||||||
|
}
|
||||||
|
Https.axiosGet(Https.httpUrls.personalHomepage,{params:data}).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
otherUsers.userContent = rv
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let setFollow = (item:any) =>{
|
||||||
|
let url = Https.httpUrls.porfolioFollow
|
||||||
|
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
Https.axiosGet(url, {params:{followeeId:otherUsers.userId}})
|
||||||
|
.then((rv) => {
|
||||||
|
if(item.isFollow == 1){
|
||||||
|
item.isFollow = 0
|
||||||
|
}else{
|
||||||
|
item.isFollow = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted (()=>{
|
||||||
|
otherUsers.userId = router.currentRoute.value.query?.userId
|
||||||
|
// alert()
|
||||||
|
setTimeout(() => {
|
||||||
|
getUserDetail(otherUsers.userId)
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(otherUsers),
|
||||||
|
setFollow,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.otherUsers{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 9rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
.otherUsers_page_titleImg{
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 10rem;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 30rem;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.otherUsers_userDetail{
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
.modal_title_text{
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.otherUsers_userDetail_img{
|
||||||
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
|
// transform: translateY(-4rem);
|
||||||
|
margin-right: 4rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.otherUsers_userDetail_center{
|
||||||
|
flex: 1;
|
||||||
|
.otherUsers_userDetail_center_name{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.userDetail_center_name_left{
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 2px solid #e9eaec;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.otherUsers_userDetail_center_data{
|
||||||
|
display: flex;
|
||||||
|
.userDetail_center_data_item{
|
||||||
|
display: flex;
|
||||||
|
>div{
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userDetail_center_data_item::after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 1px;
|
||||||
|
height: 2rem;
|
||||||
|
background-color: #ccc;
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
.userDetail_center_data_item:last-child::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.otherUsers_userDetail_center_signature{
|
||||||
|
>div{
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.otherUser_works{
|
||||||
|
height: auto;
|
||||||
|
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||||||
|
position: relative;
|
||||||
|
padding: 0 2rem;
|
||||||
|
.otherUser_works_title{
|
||||||
|
padding: 2rem 0;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: #fff;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.otherUser_works_content{
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>Start Date:</span>
|
<span>Start Date:</span>
|
||||||
<a-range-picker
|
<a-range-picker
|
||||||
style="width:280px"
|
style="width:250px"
|
||||||
class="range_picker"
|
class="range_picker"
|
||||||
v-model:value="rangePickerValue"
|
v-model:value="rangePickerValue"
|
||||||
:placeholder="[
|
:placeholder="[
|
||||||
@@ -24,9 +24,31 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>Start Time:</span>
|
<span>Start Time:</span>
|
||||||
<a-time-range-picker style="width:280px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
|
<a-time-range-picker style="width:250px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Email:</span>
|
||||||
|
<input
|
||||||
|
v-model="email"
|
||||||
|
placeholder="Please enter email"
|
||||||
|
@keydown.enter="gettrialList"
|
||||||
|
type="text"
|
||||||
|
style="width: 250px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>User Name:</span>
|
||||||
|
<a-select
|
||||||
|
v-model:value="ids"
|
||||||
|
mode="multiple"
|
||||||
|
style="width: 250px"
|
||||||
|
:filter-option="filterOption"
|
||||||
|
placeholder="Select Item..."
|
||||||
|
max-tag-count="responsive"
|
||||||
|
:options="allUserList"
|
||||||
|
@keydown.enter="gettrialList"
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_search">
|
<div class="admin_search">
|
||||||
<div class="admin_search_item" @click="searchHistoryList">Search</div>
|
<div class="admin_search_item" @click="searchHistoryList">Search</div>
|
||||||
@@ -178,15 +200,26 @@ export default defineComponent({
|
|||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let allUserList: any = ref([]);
|
||||||
|
let ids = ref([])
|
||||||
|
let email = ref('')
|
||||||
let dataList: any = ref([]);
|
let dataList: any = ref([]);
|
||||||
let status: any = ref(0);
|
let status: any = ref(0);
|
||||||
|
let filterOption = (input: any, option: any) => {
|
||||||
|
// 使用 option.label 进行搜索
|
||||||
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
rangePickerValue,
|
rangePickerValue,
|
||||||
rangeTimeValue,
|
rangeTimeValue,
|
||||||
columns,
|
columns,
|
||||||
dataList,
|
dataList,
|
||||||
|
allUserList,
|
||||||
|
ids,
|
||||||
|
email,
|
||||||
renameData,
|
renameData,
|
||||||
status,
|
status,
|
||||||
|
filterOption,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -204,6 +237,10 @@ export default defineComponent({
|
|||||||
let historyTable: any = this.$refs.historyTable;
|
let historyTable: any = this.$refs.historyTable;
|
||||||
this.historyTableHeight = historyTable.clientHeight - 200;
|
this.historyTableHeight = historyTable.clientHeight - 200;
|
||||||
this.gettrialList();
|
this.gettrialList();
|
||||||
|
let allUserList: any = sessionStorage.getItem("allUserList");
|
||||||
|
if (allUserList) {
|
||||||
|
this.allUserList = JSON.parse(allUserList);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//改变页码
|
//改变页码
|
||||||
@@ -233,9 +270,12 @@ export default defineComponent({
|
|||||||
let endDate: any = this.rangePickerValue[1]
|
let endDate: any = this.rangePickerValue[1]
|
||||||
? this.rangePickerValue[1]+' '+endTime
|
? this.rangePickerValue[1]+' '+endTime
|
||||||
: "";
|
: "";
|
||||||
|
let ids = this.ids.join(',')
|
||||||
let data = {
|
let data = {
|
||||||
endTime:endDate,
|
endTime:endDate,
|
||||||
startTime:startDate,
|
startTime:startDate,
|
||||||
|
ids:ids,
|
||||||
|
email:this.email,
|
||||||
}
|
}
|
||||||
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
@@ -274,3 +314,9 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.admin_page .admin_table_search .admin_state {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="allUserPoeration_center admin_page">
|
<div class="allUserPoeration_center admin_page">
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>User Name:</span>
|
<span>User Name: <span>*</span></span>
|
||||||
<input
|
<input
|
||||||
:readonly="title != 'Add'"
|
:readonly="title != 'Add'"
|
||||||
:class="{active:title != 'Add'}"
|
:class="{active:title != 'Add'}"
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>User Email:</span>
|
<span>User Email: <span>*</span></span>
|
||||||
<input
|
<input
|
||||||
:readonly="title != 'Add'"
|
:readonly="title != 'Add'"
|
||||||
:class="{active:title != 'Add'}"
|
:class="{active:title != 'Add'}"
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>Create Time:</span>
|
<span>Create Time: <span>*</span></span>
|
||||||
<a-date-picker :disabled="title != 'Add'" style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="Create Time" v-model:value="validStartTime">
|
<a-date-picker :disabled="title != 'Add'" style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="Create Time" v-model:value="validStartTime">
|
||||||
<template #suffixIcon>
|
<template #suffixIcon>
|
||||||
<span
|
<span
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
</a-date-picker>
|
</a-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>End Time:</span>
|
<span>End Time: <span>*</span></span>
|
||||||
<a-date-picker style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="End Time" v-model:value="validEndTime">
|
<a-date-picker style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="End Time" v-model:value="validEndTime">
|
||||||
<template #suffixIcon>
|
<template #suffixIcon>
|
||||||
<span
|
<span
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
</a-date-picker>
|
</a-date-picker>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin_state_item">
|
<div class="admin_state_item">
|
||||||
<span>User Type:</span>
|
<span>User Type:<span>*</span></span>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="systemUser"
|
v-model:value="systemUser"
|
||||||
size="large"
|
size="large"
|
||||||
@@ -200,7 +200,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
let setAddData = ()=>{
|
let setAddData = ()=>{
|
||||||
setTime(operationsData.validStartTime)
|
|
||||||
return {
|
return {
|
||||||
"country": operationsData.country,
|
"country": operationsData.country,
|
||||||
"credits": operationsData.credits,
|
"credits": operationsData.credits,
|
||||||
@@ -217,6 +216,8 @@ export default defineComponent({
|
|||||||
"credits": operationsData.credits,
|
"credits": operationsData.credits,
|
||||||
"systemUser": operationsData.systemUser,
|
"systemUser": operationsData.systemUser,
|
||||||
"validEndTime": setTime(operationsData.validEndTime),
|
"validEndTime": setTime(operationsData.validEndTime),
|
||||||
|
"userName": operationsData.userName,
|
||||||
|
"userEmail": operationsData.userEmail,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let cancelDsign = ()=>{
|
let cancelDsign = ()=>{
|
||||||
@@ -234,6 +235,7 @@ export default defineComponent({
|
|||||||
let data
|
let data
|
||||||
if(operations.title == 'Add'){
|
if(operations.title == 'Add'){
|
||||||
data = setAddData()
|
data = setAddData()
|
||||||
|
if(!data.userName || !data.userEmail || !data.validStartTime || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
|
||||||
Https.axiosPost(Https.httpUrls.adminAddUser, data).then(
|
Https.axiosPost(Https.httpUrls.adminAddUser, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
@@ -244,6 +246,7 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
}else{
|
}else{
|
||||||
data = setEditData()
|
data = setEditData()
|
||||||
|
if(!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
|
||||||
Https.axiosPost(Https.httpUrls.modifyUser,{},{params:data}).then(
|
Https.axiosPost(Https.httpUrls.modifyUser,{},{params:data}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
|
|||||||
@@ -134,7 +134,6 @@ export default defineComponent({
|
|||||||
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
|
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
|
||||||
if(res){
|
if(res){
|
||||||
dataList.value = res
|
dataList.value = res
|
||||||
console.log(dataList);
|
|
||||||
// console.log(allEchartsList.value);
|
// console.log(allEchartsList.value);
|
||||||
|
|
||||||
resolve('')
|
resolve('')
|
||||||
|
|||||||
@@ -273,7 +273,6 @@ export default defineComponent({
|
|||||||
if (rv) {
|
if (rv) {
|
||||||
// this.dataList = rv
|
// this.dataList = rv
|
||||||
filter.dataList = rv.records
|
filter.dataList = rv.records
|
||||||
console.log(rv);
|
|
||||||
filterData.total = rv.total
|
filterData.total = rv.total
|
||||||
filter.tableLoading = false
|
filter.tableLoading = false
|
||||||
|
|
||||||
|
|||||||
@@ -51,9 +51,6 @@ export default defineComponent({
|
|||||||
let data: any = [];
|
let data: any = [];
|
||||||
for (let [key, value] of entries) {
|
for (let [key, value] of entries) {
|
||||||
let str
|
let str
|
||||||
console.log(key);
|
|
||||||
|
|
||||||
|
|
||||||
if(key != 'conversionRate'){
|
if(key != 'conversionRate'){
|
||||||
if(key == 'trialToOfficialCount'){
|
if(key == 'trialToOfficialCount'){
|
||||||
str = 'Trial To Official'
|
str = 'Trial To Official'
|
||||||
|
|||||||
0
src/component/Canvas/index.vue
Normal file
0
src/component/Canvas/index.vue
Normal file
@@ -59,7 +59,7 @@
|
|||||||
<!-- 全屏 -->
|
<!-- 全屏 -->
|
||||||
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
|
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
|
||||||
<!-- 编辑 -->
|
<!-- 编辑 -->
|
||||||
<i v-show="!body" class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></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" :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" class="fi fi-br-check" @click="deleteNav(1)"></i>
|
||||||
|
|
||||||
@@ -152,8 +152,8 @@
|
|||||||
|
|
||||||
<div class="design_detail_perview_content" >
|
<div class="design_detail_perview_content" >
|
||||||
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
|
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
|
||||||
<setDesignItem v-if="!moible" ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
||||||
<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
|
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -179,7 +179,6 @@ import { Modal,message } from 'ant-design-vue';
|
|||||||
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||||
import GO from '@/tool/GO';
|
|
||||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import addDetails from '@/component/Detail/addDetails.vue'
|
import addDetails from '@/component/Detail/addDetails.vue'
|
||||||
@@ -463,11 +462,17 @@ export default defineComponent({
|
|||||||
DesignDetailAlter.terminate()
|
DesignDetailAlter.terminate()
|
||||||
// this.designItemDetail = {}
|
// this.designItemDetail = {}
|
||||||
this.frontBack = {}
|
this.frontBack = {}
|
||||||
|
let setDesignItem:any = this.$refs.setDesignItem
|
||||||
|
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
||||||
|
setDesignItem.clear()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
this.designShowPrview = 1;
|
this.designShowPrview = 1;
|
||||||
|
this.frontBack = {}
|
||||||
|
let setDesignItem:any = this.$refs.setDesignItem
|
||||||
|
setDesignItem.clear()
|
||||||
// this.designItemDetailUrl = {}
|
// this.designItemDetailUrl = {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -502,15 +507,12 @@ export default defineComponent({
|
|||||||
item.layersObject[0] = item.layersObject[1]
|
item.layersObject[0] = item.layersObject[1]
|
||||||
item.layersObject[1] = a
|
item.layersObject[1] = a
|
||||||
}
|
}
|
||||||
if(item.printObject.prints == null){
|
if(item.printObject.prints == null)item.printObject.prints = []
|
||||||
item.printObject.prints = []
|
item.printObject.prints.forEach((element:any) => {
|
||||||
}else{
|
if(!element.designType){
|
||||||
item.printObject.prints.forEach((element:any) => {
|
element.designType = 'Library'
|
||||||
if(!element.designType){
|
}
|
||||||
element.designType = 'Library'
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
this.currentIndex = 0
|
this.currentIndex = 0
|
||||||
this.store.commit('setDesignItemDetail',rv)
|
this.store.commit('setDesignItemDetail',rv)
|
||||||
@@ -739,6 +741,8 @@ export default defineComponent({
|
|||||||
changed:item.changed?item.changed:false,
|
changed:item.changed?item.changed:false,
|
||||||
designType:item.designType?item.designType:"Library",
|
designType:item.designType?item.designType:"Library",
|
||||||
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
|
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
|
||||||
|
maskMinioUrl:item.layersObject[1]?.maskMinioUrl?item.layersObject[1].maskMinioUrl:'',
|
||||||
|
maskUrl:item.layersObject?.[1]?.maskUrl?item.layersObject[1].maskUrl:'',
|
||||||
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
|
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
|
||||||
printObject:{
|
printObject:{
|
||||||
// path:item.printObject.path?item.printObject.path :'',
|
// path:item.printObject.path?item.printObject.path :'',
|
||||||
@@ -787,7 +791,7 @@ export default defineComponent({
|
|||||||
return data
|
return data
|
||||||
},
|
},
|
||||||
async setSubmit(str:any){
|
async setSubmit(str:any){
|
||||||
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
let setDesignItem:any = this.$refs.setDesignItem
|
||||||
let data = this.setSubmitItem(str,true)
|
let data = this.setSubmitItem(str,true)
|
||||||
this.loadingShow = true
|
this.loadingShow = true
|
||||||
await setDesignItem.setPreview(data)
|
await setDesignItem.setPreview(data)
|
||||||
@@ -888,7 +892,7 @@ export default defineComponent({
|
|||||||
showDesignImgDetail(num:any){
|
showDesignImgDetail(num:any){
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
this.designShowPrview = num
|
this.designShowPrview = num
|
||||||
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
let setDesignItem:any = this.$refs.setDesignItem
|
||||||
if(this.designShowPrview == 3){
|
if(this.designShowPrview == 3){
|
||||||
setDesignItem.setImgSize()
|
setDesignItem.setImgSize()
|
||||||
}else if(this.designShowPrview == 2){
|
}else if(this.designShowPrview == 2){
|
||||||
@@ -935,6 +939,7 @@ export default defineComponent({
|
|||||||
designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
|
designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
|
||||||
this.current.path = rv.clothes[this.currentIndex].minIOPath
|
this.current.path = rv.clothes[this.currentIndex].minIOPath
|
||||||
designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
|
designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
|
||||||
|
designItemDetail.clothes[this.currentIndex].layersObject = rv.clothes[this.currentIndex].layersObject
|
||||||
designItemDetail.clothes[this.currentIndex].sketchString = ''
|
designItemDetail.clothes[this.currentIndex].sketchString = ''
|
||||||
data.designSingleItemDTOList[this.currentIndex].sketchString =''
|
data.designSingleItemDTOList[this.currentIndex].sketchString =''
|
||||||
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
|
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
|
||||||
@@ -1025,6 +1030,13 @@ export default defineComponent({
|
|||||||
undividedLayer:'',
|
undividedLayer:'',
|
||||||
sketchString:'',
|
sketchString:'',
|
||||||
"layersObject": [
|
"layersObject": [
|
||||||
|
{
|
||||||
|
maskMinioUrl:'',
|
||||||
|
maskUrl:'',
|
||||||
|
},{
|
||||||
|
maskMinioUrl:'',
|
||||||
|
maskUrl:'',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// this.designOrder = true
|
// this.designOrder = true
|
||||||
@@ -1054,7 +1066,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
//元素替换
|
//元素替换
|
||||||
clothesDetail(clothes:any, index:number){
|
clothesDetail(clothes:any, index:number){
|
||||||
|
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
|
|
||||||
this.designOrder = true
|
this.designOrder = true
|
||||||
@@ -1086,6 +1097,8 @@ export default defineComponent({
|
|||||||
designType:this.current.designType?this.current.designType:'Library',
|
designType:this.current.designType?this.current.designType:'Library',
|
||||||
path:this.current.minIOPath?this.current.minIOPath:'',
|
path:this.current.minIOPath?this.current.minIOPath:'',
|
||||||
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
|
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
|
||||||
|
maskMinioUrl:this.current.layersObject[1].maskMinioUrl,
|
||||||
|
maskUrl:this.current.layersObject[1].maskUrl,
|
||||||
priority:this.current.priority,
|
priority:this.current.priority,
|
||||||
trims:this.current.trims,
|
trims:this.current.trims,
|
||||||
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
|
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
|
||||||
@@ -1156,7 +1169,9 @@ export default defineComponent({
|
|||||||
.design_detail_modal_component{
|
.design_detail_modal_component{
|
||||||
color: #000;
|
color: #000;
|
||||||
// max-width: 1440px ;
|
// max-width: 1440px ;
|
||||||
|
.mark_loading{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
.ant-modal-content{
|
.ant-modal-content{
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
@@ -1165,7 +1180,7 @@ export default defineComponent({
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1714,9 +1729,6 @@ export default defineComponent({
|
|||||||
</style>
|
</style>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.design_detail_modal_component{
|
.design_detail_modal_component{
|
||||||
.mark_loading{
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -430,8 +430,9 @@ export default defineComponent({
|
|||||||
threshold:[.5]
|
threshold:[.5]
|
||||||
})
|
})
|
||||||
ob.observe(el)
|
ob.observe(el)
|
||||||
// this.currentPage = 1
|
// this.currentPage = +=1
|
||||||
// this.pageSize = 12
|
// this.pageSize = 12
|
||||||
|
// currentPage
|
||||||
let this_ = binding.instance
|
let this_ = binding.instance
|
||||||
function callback(entries, observer) {
|
function callback(entries, observer) {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
@@ -608,21 +609,33 @@ export default defineComponent({
|
|||||||
this.clothesList = []
|
this.clothesList = []
|
||||||
this.getLibraryList()
|
this.getLibraryList()
|
||||||
}else{
|
}else{
|
||||||
|
let rgba = {
|
||||||
|
r:this.current.color.r+"",
|
||||||
|
g:this.current.color.g+"",
|
||||||
|
b:this.current.color.b+"",
|
||||||
|
a:1
|
||||||
|
}
|
||||||
|
let ind = 0
|
||||||
this.store.state.UploadFilesModule.allBoardData?.colorBoards?.forEach((item,index) => {
|
this.store.state.UploadFilesModule.allBoardData?.colorBoards?.forEach((item,index) => {
|
||||||
this.colorList[index+1] = {
|
console.log(JSON.stringify(rgba) , JSON.stringify(item.rgbValue));
|
||||||
gradient:item.gradient,
|
if(JSON.stringify(rgba) == JSON.stringify(item.rgbValue)){
|
||||||
rgba:item.rgbValue,
|
ind+=1
|
||||||
tcx:item.tcx,
|
|
||||||
name:item.name,
|
|
||||||
}
|
|
||||||
if(item.gradient){
|
|
||||||
this.colorList[index+1].gradient = item.gradient
|
|
||||||
}else{
|
}else{
|
||||||
delete this.colorList[index+1].gradient
|
this.colorList[index+1 - ind] = {
|
||||||
|
gradient:item.gradient,
|
||||||
|
rgba:item.rgbValue,
|
||||||
|
tcx:item.tcx,
|
||||||
|
name:item.name,
|
||||||
|
}
|
||||||
|
if(item.gradient){
|
||||||
|
this.colorList[index+1 - ind].gradient = item.gradient
|
||||||
|
}else{
|
||||||
|
delete this.colorList[index+1 - ind].gradient
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||||
DesignDetailEnd.init(num)
|
DesignDetailEnd.init(num)
|
||||||
this.workspaceCom = computed(()=>{
|
this.workspaceCom = computed(()=>{
|
||||||
@@ -776,6 +789,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
//请求我的印花&&模型
|
//请求我的印花&&模型
|
||||||
getLibraryList(){
|
getLibraryList(){
|
||||||
|
this.isShowLoading = true
|
||||||
let level2Type = ''
|
let level2Type = ''
|
||||||
if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Sketchboard'){
|
if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Sketchboard'){
|
||||||
level2Type = this.designType
|
level2Type = this.designType
|
||||||
@@ -791,7 +805,6 @@ export default defineComponent({
|
|||||||
pictureName:this.searchPictureName,
|
pictureName:this.searchPictureName,
|
||||||
size:this.pageSize+this.clothesList.length,
|
size:this.pageSize+this.clothesList.length,
|
||||||
}
|
}
|
||||||
this.isShowLoading = true
|
|
||||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if(this.selectCode == 'Sketchboard'){
|
if(this.selectCode == 'Sketchboard'){
|
||||||
|
|||||||
@@ -91,13 +91,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
|
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
|
||||||
|
|
||||||
|
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPreview('clearPrint')" class="subitOkPreviewBtn clear">{{ $t('Habit.Clear') }}</div>
|
||||||
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
|
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||||
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
|
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
|
||||||
<div v-if="type_ == 4 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
<div v-if="type_ == 4 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
|
||||||
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
|
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
|
||||||
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
|
<DesignElementsOperation ref="DesignElementsOperation"></DesignElementsOperation>
|
||||||
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
|
|
||||||
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
@@ -112,7 +112,6 @@ import { Sketch} from '@ans1998/vue3-color'
|
|||||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||||
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
||||||
import DesignElementsOperation from './DesignElements.vue';
|
import DesignElementsOperation from './DesignElements.vue';
|
||||||
import DesignPrintMobile from './DesignElementsMobile.vue';
|
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { message,Upload} from 'ant-design-vue';
|
||||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||||
import {isMoible,setGradual} from '@/tool/util'
|
import {isMoible,setGradual} from '@/tool/util'
|
||||||
@@ -123,7 +122,7 @@ export default defineComponent({
|
|||||||
props: ["msg"],
|
props: ["msg"],
|
||||||
components:{
|
components:{
|
||||||
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
||||||
DesignElementsOperation,DesignPrintMobile,sketchCategory
|
DesignElementsOperation,sketchCategory
|
||||||
},
|
},
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
@@ -262,7 +261,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
setPrint(){
|
setPrint(){
|
||||||
// if(this.current?.printObject?.prints?.[0]?.path){
|
// if(this.current?.printObject?.prints?.[0]?.path){
|
||||||
let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
||||||
|
// let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
||||||
DesignPrintOperation.init()
|
DesignPrintOperation.init()
|
||||||
if(this.driver__.driver){
|
if(this.driver__.driver){
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
@@ -350,11 +350,11 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
setElemets(){
|
setElemets(){
|
||||||
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
|
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
|
||||||
let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
|
let DesignElementsOperation = this.$refs.DesignElementsOperation
|
||||||
DesignElementsOperation.init()
|
DesignElementsOperation.init()
|
||||||
},
|
},
|
||||||
//提交
|
//提交
|
||||||
setPreview(){
|
setPreview(str){
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
let index
|
let index
|
||||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||||
@@ -373,7 +373,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
index = index? index:0
|
index = index? index:0
|
||||||
if(!this.current.id){
|
if(!this.current.id){
|
||||||
if(index){
|
if(index && data?.designSingleItemDTOList){
|
||||||
data.designSingleItemDTOList[index].priority = zIndex+=1
|
data.designSingleItemDTOList[index].priority = zIndex+=1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -387,7 +387,9 @@ export default defineComponent({
|
|||||||
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
|
data.designSingleItemDTOList[index].path =this.sketchImg.minIOPath? this.sketchImg.minIOPath: this.current.minIOPath
|
||||||
data.designSingleItemDTOList[index].type =this.sketchImg.type? this.sketchImg.type: this.current.type
|
data.designSingleItemDTOList[index].type =this.sketchImg.type? this.sketchImg.type: this.current.type
|
||||||
}else if(this.type_ == 2){
|
}else if(this.type_ == 2){
|
||||||
data.designSingleItemDTOList[index].printObject.prints = []
|
if(str == 'clearPrint'){
|
||||||
|
data.designSingleItemDTOList[index].printObject.prints = []
|
||||||
|
}
|
||||||
}else if(this.type_ == 3){
|
}else if(this.type_ == 3){
|
||||||
if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
|
if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
|
||||||
message.info(this.t('DesignDetailEnd.jsContent2'))
|
message.info(this.t('DesignDetailEnd.jsContent2'))
|
||||||
@@ -704,8 +706,11 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.subitOkPreviewBtn{
|
.subitOkPreviewBtn{
|
||||||
bottom: calc(4rem*1.2);
|
bottom: calc(3rem*1.2);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
&.clear{
|
||||||
|
bottom: calc(7rem);
|
||||||
|
}
|
||||||
&.active{
|
&.active{
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
|
|||||||
@@ -43,7 +43,7 @@
|
|||||||
v-for="item,index in exhibitionElementsList"
|
v-for="item,index in exhibitionElementsList"
|
||||||
:key="item"
|
:key="item"
|
||||||
:style="[printStyleList?.[index]?.style]"
|
:style="[printStyleList?.[index]?.style]"
|
||||||
@mousedown.stop="itemMoveMousedown(index,$event)"
|
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
||||||
class="modal_imgItem"
|
class="modal_imgItem"
|
||||||
ref="content" >
|
ref="content" >
|
||||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
|
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
|
||||||
@@ -52,11 +52,11 @@
|
|||||||
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
|
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
|
||||||
<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
|
<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
|
||||||
<div class="designElements_btn">
|
<div class="designElements_btn">
|
||||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
||||||
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
|
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||||
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
|
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||||
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
|
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
||||||
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
||||||
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
|
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||||
<li class="designElements_delete" @click="deletePrint">
|
<li class="designElements_delete" @click="deletePrint">
|
||||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||||
@@ -88,6 +88,7 @@ import { Https } from "@/tool/https";
|
|||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
@@ -159,6 +160,7 @@ export default defineComponent({
|
|||||||
currentFullBodyView,
|
currentFullBodyView,
|
||||||
designItemDetailTS,
|
designItemDetailTS,
|
||||||
body,
|
body,
|
||||||
|
getMousePosition,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -171,8 +173,16 @@ export default defineComponent({
|
|||||||
//操作旋转
|
//操作旋转
|
||||||
rotote:{
|
rotote:{
|
||||||
mounted(el,value){
|
mounted(el,value){
|
||||||
|
let mousedown = function(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
el.addEventListener('mousedown', (e) => {
|
let touchstart = function(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e) => {
|
||||||
let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||||
let mouse = true;
|
let mouse = true;
|
||||||
let angle = 0
|
let angle = 0
|
||||||
@@ -185,12 +195,19 @@ export default defineComponent({
|
|||||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
// 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])
|
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||||
e.stopPropagation()
|
|
||||||
mouse = true;
|
mouse = true;
|
||||||
var info = el.getBoundingClientRect();
|
var info = el.getBoundingClientRect();
|
||||||
let eX = info.x + info.width / 2;
|
let eX = info.x + info.width / 2;
|
||||||
let eY = info.y + info.height / 2;
|
let eY = info.y + info.height / 2;
|
||||||
let mousemove = (e) => {
|
let mouseMove = function(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = (e) => {
|
||||||
if (mouse) {
|
if (mouse) {
|
||||||
let X = eX
|
let X = eX
|
||||||
let Y = eY
|
let Y = eY
|
||||||
@@ -201,16 +218,24 @@ export default defineComponent({
|
|||||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener('mousemove', mousemove);
|
// document.addEventListener('mousemove', mousemove);
|
||||||
// 添加鼠标松开事件监听器
|
// 添加鼠标松开事件监听器
|
||||||
let mouseup = () => {
|
let mouseup = () => {
|
||||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||||
mouse = false;
|
mouse = false;
|
||||||
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
document.removeEventListener('mouseup',mouseup)
|
document.removeEventListener('mouseup',mouseup)
|
||||||
document.removeEventListener('mousemove',mousemove)
|
document.removeEventListener('touchend',mouseup)
|
||||||
}
|
}
|
||||||
|
// document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
document.addEventListener('mouseup', mouseup);
|
document.addEventListener('mouseup', mouseup);
|
||||||
});
|
document.addEventListener('touchend', mouseup);
|
||||||
|
};
|
||||||
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -299,8 +324,12 @@ export default defineComponent({
|
|||||||
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
|
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
|
||||||
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
|
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
|
||||||
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
|
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||||
document.addEventListener("mouseup", this.mouseup);
|
// document.addEventListener("mouseup", this.mouseup);
|
||||||
document.addEventListener("mousemove", this.moveMousemove);
|
// document.addEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.addEventListener('mousemove', this.mouseMove);
|
||||||
|
document.addEventListener('touchmove', this.touchmove);
|
||||||
|
document.addEventListener('mouseup', this.mouseup);
|
||||||
|
document.addEventListener('touchend', this.mouseup);
|
||||||
},
|
},
|
||||||
//设置尺寸
|
//设置尺寸
|
||||||
itemSizeMousedown(direction,event){
|
itemSizeMousedown(direction,event){
|
||||||
@@ -323,23 +352,42 @@ export default defineComponent({
|
|||||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("mouseup", this.sizeMouseup);
|
// document.addEventListener("mouseup", this.sizeMouseup);
|
||||||
document.addEventListener("mousemove", this.sizeMousemove);
|
// document.addEventListener("mousemove", this.sizeMousemove);
|
||||||
|
document.addEventListener('mousemove', this.sizeMouseMove);
|
||||||
|
document.addEventListener('touchmove', this.sizeTouchmove);
|
||||||
|
document.addEventListener('mouseup', this.sizeMouseup);
|
||||||
|
document.addEventListener('touchend', this.sizeMouseup);
|
||||||
|
},
|
||||||
|
mouseMove(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
touchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
},
|
},
|
||||||
//鼠标移动
|
//鼠标移动
|
||||||
moveMousemove(e) {
|
mouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
|
let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
|
||||||
parentNode = parentNode.getBoundingClientRect()
|
parentNode = parentNode.getBoundingClientRect()
|
||||||
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
let x = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||||
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
let y = ( e.clientY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||||
this.printStyleList[this.imgDomIndex].style.left = x
|
this.printStyleList[this.imgDomIndex].style.left = x
|
||||||
this.printStyleList[this.imgDomIndex].style.top = y
|
this.printStyleList[this.imgDomIndex].style.top = y
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
sizeMouseMove(event){
|
||||||
sizeMousemove(e) {
|
let e = getMousePosition(event,false)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeTouchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeMouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode =this.imgDom.parentNode
|
let parentNode =this.imgDom.parentNode
|
||||||
let width = imgDomWH.width
|
let width = imgDomWH.width
|
||||||
@@ -349,27 +397,27 @@ export default defineComponent({
|
|||||||
let w,h
|
let w,h
|
||||||
//判断移动四个边
|
//判断移动四个边
|
||||||
if(this.direction == 'right'){
|
if(this.direction == 'right'){
|
||||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
|
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)
|
||||||
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
h = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
height = w*num1+'px'
|
height = w*num1+'px'
|
||||||
}else if(this.direction == 'top'){
|
}else if(this.direction == 'top'){
|
||||||
this.printStyleList[this.imgDomIndex].style.top = 'auto'
|
this.printStyleList[this.imgDomIndex].style.top = 'auto'
|
||||||
// this.printStyleList[this.imgDomIndex].style.left = '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 = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
|
h = (this.printStyleList[this.imgDomIndex].centers.top - e.clientY)
|
||||||
|
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
width = h*num+'px'
|
width = h*num+'px'
|
||||||
}else if(this.direction == 'bottom'){
|
}else if(this.direction == 'bottom'){
|
||||||
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
|
h = (e.clientY - this.printStyleList[this.imgDomIndex].centers.top)
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
width = h*num+'px'
|
width = h*num+'px'
|
||||||
}else if(this.direction == 'left'){
|
}else if(this.direction == 'left'){
|
||||||
this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||||
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||||
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
|
w = (this.printStyleList[this.imgDomIndex].centers.left - e.clientX)
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
height = w*num1+'px'
|
height = w*num1+'px'
|
||||||
}
|
}
|
||||||
@@ -388,13 +436,21 @@ export default defineComponent({
|
|||||||
width:this.imgDom.offsetWidth+'px',
|
width:this.imgDom.offsetWidth+'px',
|
||||||
zIndex:this.printZIndex
|
zIndex:this.printZIndex
|
||||||
}
|
}
|
||||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
// document.removeEventListener("mouseup", this.sizeMouseup);
|
||||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
// document.removeEventListener("mousemove", this.sizeMousemove);
|
||||||
|
document.removeEventListener('mousemove',this.sizeMouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.sizeTouchmove)
|
||||||
|
document.removeEventListener('mouseup',this.sizeMouseup)
|
||||||
|
document.removeEventListener('touchend',this.sizeMouseup)
|
||||||
},
|
},
|
||||||
mouseup(e) {
|
mouseup(e) {
|
||||||
|
|
||||||
document.removeEventListener("mouseup", this.mouseup);
|
// document.removeEventListener("mouseup", this.mouseup);
|
||||||
document.removeEventListener("mousemove", this.moveMousemove);
|
// document.removeEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.removeEventListener('mousemove',this.mouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.touchmove)
|
||||||
|
document.removeEventListener('mouseup',this.mouseup)
|
||||||
|
document.removeEventListener('touchend',this.mouseup)
|
||||||
},
|
},
|
||||||
deletePrint(){
|
deletePrint(){
|
||||||
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
||||||
@@ -601,19 +657,22 @@ export default defineComponent({
|
|||||||
this.exhibitionElementsList = []
|
this.exhibitionElementsList = []
|
||||||
},
|
},
|
||||||
closeModal(){
|
closeModal(){
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
if(this.designItemDetailTS.rv){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: this.t('DesignPrintOperation.jsContent1'),
|
title: this.t('DesignPrintOperation.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
mask:false,
|
mask:false,
|
||||||
centered:true,
|
centered:true,
|
||||||
onOk() {
|
onOk() {
|
||||||
_this.designElements=false
|
_this.designElements=false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}else{
|
||||||
|
this.designElements=false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -622,11 +681,15 @@ export default defineComponent({
|
|||||||
<style lang="less">
|
<style lang="less">
|
||||||
.designElements_modal {
|
.designElements_modal {
|
||||||
// max-width: 1440px;
|
// max-width: 1440px;
|
||||||
|
user-select: none; /* 对现代浏览器有效 */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
.mark_loading{
|
.mark_loading{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -835,8 +898,8 @@ export default defineComponent({
|
|||||||
li{
|
li{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// border-radius: 50%;
|
// border-radius: 50%;
|
||||||
width: calc(1rem*1.2);
|
width: calc(2rem*1.2);
|
||||||
height: calc(1rem*1.2);
|
height: calc(2rem*1.2);
|
||||||
background-color: rgb(20, 188, 255);
|
background-color: rgb(20, 188, 255);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@@ -52,11 +52,11 @@
|
|||||||
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
|
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
|
||||||
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
|
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
|
||||||
<div class="designElementsMobile_btn">
|
<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.stop="itemMoveMousedown(index,$event)">
|
<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.stop="itemSizeMousedown('top',$event)"></li>
|
<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||||
<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||||
<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||||
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$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_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||||
<li class="designElementsMobile_delete" @click="deletePrint">
|
<li class="designElementsMobile_delete" @click="deletePrint">
|
||||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||||
@@ -452,8 +452,6 @@ export default defineComponent({
|
|||||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||||
top = sketch.offsetHeight +'px'
|
top = sketch.offsetHeight +'px'
|
||||||
}
|
}
|
||||||
console.log(sketch.offsetWidth,this.sketch.width.replace(/rem/g,''));
|
|
||||||
|
|
||||||
this.printStyleList[index]={
|
this.printStyleList[index]={
|
||||||
centers:{
|
centers:{
|
||||||
left:0,
|
left:0,
|
||||||
@@ -626,7 +624,7 @@ export default defineComponent({
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
:closable="false"
|
:closable="false"
|
||||||
:keyboard="false"
|
:keyboard="false"
|
||||||
:mask="true"
|
:mask="true"
|
||||||
|
:destroyOnClose="true"
|
||||||
>
|
>
|
||||||
<div class="designOpenrtion_content">
|
<div class="designOpenrtion_content">
|
||||||
<div class="design_title_text">
|
<div class="design_title_text">
|
||||||
@@ -39,9 +40,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
|
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
|
||||||
<div class="designOpenrtion_nav">
|
<div class="designOpenrtion_nav">
|
||||||
|
<!-- :class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''" -->
|
||||||
<div
|
<div
|
||||||
class="designOpenrtion_single"
|
class="designOpenrtion_single"
|
||||||
:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"
|
|
||||||
v-for="item,index in designOpenrtionList" :key="item"
|
v-for="item,index in designOpenrtionList" :key="item"
|
||||||
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
||||||
>
|
>
|
||||||
@@ -49,7 +50,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="designOpenrtion_single"
|
class="designOpenrtion_single"
|
||||||
:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"
|
|
||||||
v-for="item,index in designList" :key="item"
|
v-for="item,index in designList" :key="item"
|
||||||
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
||||||
>
|
>
|
||||||
@@ -63,6 +63,7 @@
|
|||||||
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
||||||
<a-slider id="system_silder"
|
<a-slider id="system_silder"
|
||||||
:min="20"
|
:min="20"
|
||||||
|
:max="1000"
|
||||||
v-model:value="systemDesignerPercentage"
|
v-model:value="systemDesignerPercentage"
|
||||||
@afterChange="systemDesigner"
|
@afterChange="systemDesigner"
|
||||||
:tip-formatter="formatter"
|
:tip-formatter="formatter"
|
||||||
@@ -89,7 +90,7 @@
|
|||||||
:key="item"
|
:key="item"
|
||||||
v-if="overallSingle"
|
v-if="overallSingle"
|
||||||
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
||||||
@mousedown.stop="itemMoveMousedown(index,$event)"
|
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
||||||
class="modal_imgItem"
|
class="modal_imgItem"
|
||||||
ref="content"
|
ref="content"
|
||||||
>
|
>
|
||||||
@@ -98,18 +99,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
|
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
|
||||||
<div class="designOpenrtion_btn">
|
<div class="designOpenrtion_btn">
|
||||||
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :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',$event)"></li>
|
<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',$event)"></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',$event)"></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',$event)"></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>
|
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||||
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
||||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div v-show="!overallSingle"></div>
|
<div v-show="!overallSingle"></div>
|
||||||
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
|
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
|
||||||
<i class="fi fi-rr-arrows animtion1"></i>
|
<i class="fi fi-rr-arrows animtion1"></i>
|
||||||
<i class="fi fi-rr-arrows animtion2"></i>
|
<i class="fi fi-rr-arrows animtion2"></i>
|
||||||
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
||||||
@@ -143,6 +144,8 @@ import { Modal,message } from 'ant-design-vue';
|
|||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { remove } from "jszip";
|
import { remove } from "jszip";
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
@@ -231,6 +234,7 @@ export default defineComponent({
|
|||||||
currentFullBodyView,
|
currentFullBodyView,
|
||||||
designItemDetailTS,
|
designItemDetailTS,
|
||||||
body,
|
body,
|
||||||
|
getMousePosition,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -243,8 +247,16 @@ export default defineComponent({
|
|||||||
//操作旋转
|
//操作旋转
|
||||||
rotote:{
|
rotote:{
|
||||||
mounted(el,value){
|
mounted(el,value){
|
||||||
|
let mousedown = function(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
el.addEventListener('mousedown', (e) => {
|
let touchstart = function(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e) => {
|
||||||
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||||
let mouse = true;
|
let mouse = true;
|
||||||
let angle = 0
|
let angle = 0
|
||||||
@@ -257,12 +269,19 @@ export default defineComponent({
|
|||||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
// 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])
|
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||||
e.stopPropagation()
|
|
||||||
mouse = true;
|
mouse = true;
|
||||||
var info = el.getBoundingClientRect();
|
var info = el.getBoundingClientRect();
|
||||||
let eX = info.x + info.width / 2;
|
let eX = info.x + info.width / 2;
|
||||||
let eY = info.y + info.height / 2;
|
let eY = info.y + info.height / 2;
|
||||||
let mousemove = (e) => {
|
let mouseMove = function(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = (e) => {
|
||||||
if (mouse) {
|
if (mouse) {
|
||||||
let X = eX
|
let X = eX
|
||||||
let Y = eY
|
let Y = eY
|
||||||
@@ -275,16 +294,25 @@ export default defineComponent({
|
|||||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener('mousemove', mousemove);
|
|
||||||
// 添加鼠标松开事件监听器
|
// 添加鼠标松开事件监听器
|
||||||
let mouseup = () => {
|
let mouseup = () => {
|
||||||
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
||||||
mouse = false;
|
mouse = false;
|
||||||
|
// document.removeEventListener('mouseup',mouseup)
|
||||||
|
// document.removeEventListener('mousemove',mousemove)
|
||||||
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
document.removeEventListener('mouseup',mouseup)
|
document.removeEventListener('mouseup',mouseup)
|
||||||
document.removeEventListener('mousemove',mousemove)
|
document.removeEventListener('touchend',mouseup)
|
||||||
}
|
}
|
||||||
|
// document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
document.addEventListener('mouseup', mouseup);
|
document.addEventListener('mouseup', mouseup);
|
||||||
});
|
document.addEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -307,11 +335,6 @@ export default defineComponent({
|
|||||||
this.ifListOver()
|
this.ifListOver()
|
||||||
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
|
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
|
||||||
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
|
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
|
||||||
// if(this.overallSingle == false && this.designOpenrtionList.length > 0){
|
|
||||||
// this.designOpenrtionList[0].checked = true
|
|
||||||
// }else if(this.overallSingle == false && this.designOpenrtionList.length == 0){
|
|
||||||
// this.setpitch(this.designList[0],0)
|
|
||||||
// }
|
|
||||||
let skecth = new Image
|
let skecth = new Image
|
||||||
skecth.onload=()=>{
|
skecth.onload=()=>{
|
||||||
this.sketch.width = skecth.width/10+'rem'
|
this.sketch.width = skecth.width/10+'rem'
|
||||||
@@ -328,17 +351,13 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// else if(!this.overallSingle){
|
|
||||||
// let str = 'overall'
|
|
||||||
// this.setOverallPosition(0,str)
|
|
||||||
// }
|
|
||||||
if(this.exhibitionOpenrtionList.single.length > 0){
|
if(this.exhibitionOpenrtionList.single.length > 0){
|
||||||
let str = 'single'
|
let str = 'single'
|
||||||
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
|
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
|
||||||
this.setTemplate(item,index,str)
|
this.setTemplate(item,index,str)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
if(this.exhibitionOpenrtionList.overall.length == 0 && this.exhibitionOpenrtionList.single.length == 0)this.setpitch(this.designList[0],0)
|
||||||
},
|
},
|
||||||
setprintList(arr){
|
setprintList(arr){
|
||||||
arr.forEach(item=>{
|
arr.forEach(item=>{
|
||||||
@@ -371,10 +390,9 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
systemDesigner(num) {
|
systemDesigner(num) {
|
||||||
|
|
||||||
},
|
},
|
||||||
formatter(value) {
|
formatter(value) {
|
||||||
return `${value*3}%`;
|
return `${value}%`;
|
||||||
},
|
},
|
||||||
|
|
||||||
setOveralSingle(){
|
setOveralSingle(){
|
||||||
@@ -462,8 +480,12 @@ export default defineComponent({
|
|||||||
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
|
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
|
||||||
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
|
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
|
||||||
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
|
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
|
||||||
document.addEventListener("mouseup", this.mouseup);
|
// document.addEventListener("mouseup", this.mouseup);
|
||||||
document.addEventListener("mousemove", this.moveMousemove);
|
// document.addEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.addEventListener('mousemove', this.mouseMove);
|
||||||
|
document.addEventListener('touchmove', this.touchmove);
|
||||||
|
document.addEventListener('mouseup', this.mouseup);
|
||||||
|
document.addEventListener('touchend', this.mouseup);
|
||||||
},
|
},
|
||||||
//设置尺寸
|
//设置尺寸
|
||||||
itemSizeMousedown(direction,event){
|
itemSizeMousedown(direction,event){
|
||||||
@@ -486,16 +508,28 @@ export default defineComponent({
|
|||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("mouseup", this.sizeMouseup);
|
// document.addEventListener("mouseup", this.sizeMouseup);
|
||||||
document.addEventListener("mousemove", this.sizeMousemove);
|
// document.addEventListener("mousemove", this.sizeMousemove);
|
||||||
|
document.addEventListener('mousemove', this.sizeMouseMove);
|
||||||
|
document.addEventListener('touchmove', this.sizeTouchmove);
|
||||||
|
document.addEventListener('mouseup', this.sizeMouseup);
|
||||||
|
document.addEventListener('touchend', this.sizeMouseup);
|
||||||
|
},
|
||||||
|
mouseMove(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
touchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
},
|
},
|
||||||
//鼠标移动
|
//鼠标移动
|
||||||
moveMousemove(e) {
|
mouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
||||||
parentNode = parentNode.getBoundingClientRect()
|
parentNode = parentNode.getBoundingClientRect()
|
||||||
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
||||||
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
|
||||||
if(!this.overallSingle){
|
if(!this.overallSingle){
|
||||||
@@ -514,8 +548,15 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
sizeMouseMove(event){
|
||||||
sizeMousemove(e) {
|
let e = getMousePosition(event,false)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeTouchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeMouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode =this.imgDom.parentNode
|
let parentNode =this.imgDom.parentNode
|
||||||
let width = imgDomWH.width
|
let width = imgDomWH.width
|
||||||
@@ -525,27 +566,27 @@ export default defineComponent({
|
|||||||
let w,h
|
let w,h
|
||||||
//判断移动四个边
|
//判断移动四个边
|
||||||
if(this.direction == 'right'){
|
if(this.direction == 'right'){
|
||||||
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
||||||
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
height = w*num1+'px'
|
height = w*num1+'px'
|
||||||
}else if(this.direction == 'top'){
|
}else if(this.direction == 'top'){
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
|
||||||
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||||
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||||
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
|
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
|
||||||
|
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
width = h*num+'px'
|
width = h*num+'px'
|
||||||
}else if(this.direction == 'bottom'){
|
}else if(this.direction == 'bottom'){
|
||||||
h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
|
h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
width = h*num+'px'
|
width = h*num+'px'
|
||||||
}else if(this.direction == 'left'){
|
}else if(this.direction == 'left'){
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
|
||||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||||
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
|
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
height = w*num1+'px'
|
height = w*num1+'px'
|
||||||
}
|
}
|
||||||
@@ -565,13 +606,21 @@ export default defineComponent({
|
|||||||
width:this.imgDom.offsetWidth+'px',
|
width:this.imgDom.offsetWidth+'px',
|
||||||
zIndex:this.printZIndex
|
zIndex:this.printZIndex
|
||||||
}
|
}
|
||||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
// document.removeEventListener("mouseup", this.sizeMouseup);
|
||||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
// document.removeEventListener("mousemove", this.sizeMousemove);
|
||||||
|
document.removeEventListener('mousemove',this.sizeMouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.sizeTouchmove)
|
||||||
|
document.removeEventListener('mouseup',this.sizeMouseup)
|
||||||
|
document.removeEventListener('touchend',this.sizeMouseup)
|
||||||
},
|
},
|
||||||
mouseup(e) {
|
mouseup(e) {
|
||||||
|
|
||||||
document.removeEventListener("mouseup", this.mouseup);
|
// document.removeEventListener("mouseup", this.mouseup);
|
||||||
document.removeEventListener("mousemove", this.moveMousemove);
|
// document.removeEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.removeEventListener('mousemove',this.mouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.touchmove)
|
||||||
|
document.removeEventListener('mouseup',this.mouseup)
|
||||||
|
document.removeEventListener('touchend',this.mouseup)
|
||||||
},
|
},
|
||||||
deletePrint(){
|
deletePrint(){
|
||||||
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
|
||||||
@@ -587,51 +636,55 @@ export default defineComponent({
|
|||||||
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
|
||||||
let width
|
let width
|
||||||
let scale
|
let scale
|
||||||
if(sketch.width<sketch.height){
|
let img = new Image()
|
||||||
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
img.onload = ()=>{
|
||||||
if(boor){
|
if(sketch.width<sketch.height){
|
||||||
width = Math.trunc((sketch?.width-sketch?.width/2))+sketch?.width/4
|
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
||||||
|
if(boor){
|
||||||
|
width = Math.trunc((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
|
||||||
|
if(boor){
|
||||||
|
width = Math.trunc((sketch?.height-sketch?.height/2))+sketch?.height/4
|
||||||
|
}
|
||||||
|
scale = width / this.print.height.replace(/px/g,'')
|
||||||
}
|
}
|
||||||
scale = width / this.print.width.replace(/px/g,'')
|
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
|
||||||
}else{
|
if(!this.overallSingle){
|
||||||
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
|
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
|
||||||
if(boor){
|
}
|
||||||
width = Math.trunc((sketch?.height-sketch?.height/2))+sketch?.height/4
|
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||||
|
let left = sketch.offsetWidth/2-this.print.width.replace(/px/g,'')*scale/2
|
||||||
|
let top = sketch.offsetHeight/2-this.print.height.replace(/px/g,'')*scale/2
|
||||||
|
if(this.stateOverallSingle == 'overall'){
|
||||||
|
left = sketch.offsetWidth/2-5
|
||||||
|
top = sketch.offsetHeight/2-5
|
||||||
|
}
|
||||||
|
this.printStyleList[this.stateOverallSingle][index]={
|
||||||
|
centers:{
|
||||||
|
left:0,
|
||||||
|
top:0,
|
||||||
|
},
|
||||||
|
style:{
|
||||||
|
left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
|
||||||
|
top:(boor?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++
|
||||||
|
},
|
||||||
|
transform:{
|
||||||
|
// scale:scale<.2?.2:scale,//0.2-3
|
||||||
|
// rotateZ:rotateZ1-rotateZ2,
|
||||||
|
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
|
||||||
|
},
|
||||||
|
designOpenrtionBtn:false
|
||||||
}
|
}
|
||||||
scale = width / this.print.height.replace(/px/g,'')
|
|
||||||
}
|
|
||||||
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
|
|
||||||
if(!this.overallSingle){
|
|
||||||
x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
|
|
||||||
}
|
|
||||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
|
||||||
let left = sketch.offsetWidth/2-this.print.width.replace(/px/g,'')*scale/2
|
|
||||||
let top = sketch.offsetHeight/2-this.print.height.replace(/px/g,'')*scale/2
|
|
||||||
if(this.stateOverallSingle == 'overall'){
|
|
||||||
left = sketch.offsetWidth/2-5
|
|
||||||
top = sketch.offsetHeight/2-5
|
|
||||||
}
|
|
||||||
this.printStyleList[this.stateOverallSingle][index]={
|
|
||||||
centers:{
|
|
||||||
left:0,
|
|
||||||
top:0,
|
|
||||||
},
|
|
||||||
style:{
|
|
||||||
left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
|
|
||||||
top:(boor?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++
|
|
||||||
},
|
|
||||||
transform:{
|
|
||||||
// scale:scale<.2?.2:scale,//0.2-3
|
|
||||||
// rotateZ:rotateZ1-rotateZ2,
|
|
||||||
rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
|
|
||||||
},
|
|
||||||
designOpenrtionBtn:false
|
|
||||||
}
|
}
|
||||||
|
img.src = sketch.src
|
||||||
},
|
},
|
||||||
//设置图片
|
//设置图片
|
||||||
async setTemplate(item,index,str) {
|
async setTemplate(item,index,str) {
|
||||||
@@ -736,8 +789,15 @@ export default defineComponent({
|
|||||||
for (let index = 0; index < arr.length; index++) {
|
for (let index = 0; index < arr.length; index++) {
|
||||||
if(!this.overallSingle){
|
if(!this.overallSingle){
|
||||||
scale = this.systemDesignerPercentage/100
|
scale = this.systemDesignerPercentage/100
|
||||||
|
console.log(this.print);
|
||||||
|
let overallScale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
||||||
|
let x = Number(arr[index].style.left.replace(/px/g,''))
|
||||||
|
let y = Number(arr[index].style.top.replace(/px/g,''))
|
||||||
|
let width = Number(this.print.width.replace(/px/g,''))
|
||||||
|
let height = Number(this.print.height.replace(/px/g,''))
|
||||||
|
|
||||||
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
|
// location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
|
||||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
location = [(x)*sketchNum ,(y )*sketchNum]
|
||||||
}else{
|
}else{
|
||||||
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
||||||
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
||||||
@@ -860,19 +920,22 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeModal(){
|
closeModal(){
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
if(this.designItemDetailTS.rv){
|
||||||
let _this = this
|
let _this = this
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: this.t('DesignPrintOperation.jsContent1'),
|
title: this.t('DesignPrintOperation.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
okText: 'Yes',
|
okText: 'Yes',
|
||||||
cancelText: 'No',
|
cancelText: 'No',
|
||||||
mask:false,
|
mask:false,
|
||||||
centered:true,
|
centered:true,
|
||||||
onOk() {
|
onOk() {
|
||||||
_this.designOpenrtion=false
|
_this.designOpenrtion=false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}else{
|
||||||
|
this.designOpenrtion=false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -881,11 +944,15 @@ export default defineComponent({
|
|||||||
<style lang="less">
|
<style lang="less">
|
||||||
.designOpenrtion_modal {
|
.designOpenrtion_modal {
|
||||||
// max-width: 1440px;
|
// max-width: 1440px;
|
||||||
|
user-select: none; /* 对现代浏览器有效 */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
.mark_loading{
|
.mark_loading{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1174,8 +1241,8 @@ export default defineComponent({
|
|||||||
li{
|
li{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// border-radius: 50%;
|
// border-radius: 50%;
|
||||||
width: calc(1rem*1.2);
|
width: calc(2rem*1.2);
|
||||||
height: calc(1rem*1.2);
|
height: calc(2rem*1.2);
|
||||||
background-color: rgb(20, 188, 255);
|
background-color: rgb(20, 188, 255);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@@ -65,7 +65,8 @@
|
|||||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||||
<div class="habit_System_Designer_text">Scale</div>
|
<div class="habit_System_Designer_text">Scale</div>
|
||||||
<a-slider id="system_silder"
|
<a-slider id="system_silder"
|
||||||
:min="1"
|
:min="20"
|
||||||
|
:max="1000"
|
||||||
v-model:value="systemDesignerPercentage"
|
v-model:value="systemDesignerPercentage"
|
||||||
@afterChange="systemDesigner"
|
@afterChange="systemDesigner"
|
||||||
:tip-formatter="formatter"
|
:tip-formatter="formatter"
|
||||||
@@ -92,7 +93,7 @@
|
|||||||
:key="item"
|
:key="item"
|
||||||
v-if="overallSingle"
|
v-if="overallSingle"
|
||||||
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
||||||
@touchstart.stop="itemMoveMousedown(index,$event)"
|
@touchstart.passive="itemMoveMousedown(index,$event)"
|
||||||
class="modal_imgItem"
|
class="modal_imgItem"
|
||||||
ref="content" >
|
ref="content" >
|
||||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
|
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
|
||||||
@@ -100,18 +101,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtionMobile_sketch">
|
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtionMobile_sketch">
|
||||||
<div class="designOpenrtionMobile_btn">
|
<div class="designOpenrtionMobile_btn">
|
||||||
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
|
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
|
||||||
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
<li class="designOpenrtionMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||||
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
<li class="designOpenrtionMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||||
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
<li class="designOpenrtionMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||||
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
<li class="designOpenrtionMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||||
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||||
<li class="designOpenrtionMobile__delete" @click="deletePrint">
|
<li class="designOpenrtionMobile__delete" @click="deletePrint">
|
||||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div v-show="!overallSingle"></div>
|
<div v-show="!overallSingle"></div>
|
||||||
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
|
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.passive="itemMoveMousedown(0,$event)">
|
||||||
<i class="fi fi-rr-arrows animtion1"></i>
|
<i class="fi fi-rr-arrows animtion1"></i>
|
||||||
<i class="fi fi-rr-arrows animtion2"></i>
|
<i class="fi fi-rr-arrows animtion2"></i>
|
||||||
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
||||||
@@ -373,7 +374,7 @@ export default defineComponent({
|
|||||||
systemDesigner(num) {
|
systemDesigner(num) {
|
||||||
},
|
},
|
||||||
formatter(value) {
|
formatter(value) {
|
||||||
return `${value*3}%`;
|
return `${value}%`;
|
||||||
},
|
},
|
||||||
|
|
||||||
setOveralSingle(){
|
setOveralSingle(){
|
||||||
@@ -813,7 +814,6 @@ export default defineComponent({
|
|||||||
index = ind
|
index = ind
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.designOpenrtion = false
|
|
||||||
if(this.designItemDetailTS.rv){
|
if(this.designItemDetailTS.rv){
|
||||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||||
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
|
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
|
||||||
@@ -821,7 +821,6 @@ export default defineComponent({
|
|||||||
designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
|
designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
|
||||||
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
|
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
|
||||||
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
||||||
// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
|
|
||||||
designItemDetail.ifSubmit = true
|
designItemDetail.ifSubmit = true
|
||||||
designItemDetail.clothes.forEach((item,i)=>{
|
designItemDetail.clothes.forEach((item,i)=>{
|
||||||
let a
|
let a
|
||||||
@@ -838,6 +837,7 @@ export default defineComponent({
|
|||||||
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
||||||
this.designItemDetailTS = {}
|
this.designItemDetailTS = {}
|
||||||
}
|
}
|
||||||
|
this.designOpenrtion = false
|
||||||
if(this.driver__.driver){
|
if(this.driver__.driver){
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
driverObj__.moveNext();
|
driverObj__.moveNext();
|
||||||
@@ -890,7 +890,7 @@ export default defineComponent({
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-modal
|
<a-modal
|
||||||
class="addDetails_modal generalModel"
|
class="addDetails_modal generalModel"
|
||||||
v-model:visible="showPayOrder"
|
v-model:visible="addDetails"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
width="50%"
|
width="78%"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
|
:destroyOnClose="true"
|
||||||
wrapClassName="#app"
|
wrapClassName="#app"
|
||||||
:keyboard="false"
|
:keyboard="false"
|
||||||
>
|
>
|
||||||
@@ -21,357 +22,40 @@
|
|||||||
<div>{{ $t('addDetails.AddDetails') }}</div>
|
<div>{{ $t('addDetails.AddDetails') }}</div>
|
||||||
<div class="modal_title_text_intro"></div>
|
<div class="modal_title_text_intro"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_center">
|
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
||||||
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
|
|
||||||
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
|
|
||||||
<div>新增</div>
|
|
||||||
</div> -->
|
|
||||||
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
|
||||||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
|
||||||
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
|
|
||||||
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
|
|
||||||
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
|
|
||||||
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
|
|
||||||
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="exportCanvasBox_submit" @click="setSubmit">
|
|
||||||
<div class="started_btn">
|
|
||||||
{{ $t('addDetails.submit') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div></div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
|
||||||
<a-spin size="large" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||||
import { Https } from "@/tool/https";
|
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
|
||||||
import { formatTime } from "@/tool/util";
|
|
||||||
import { setCookie, getCookie } from "@/tool/cookie";
|
|
||||||
import { Modal, message } from "ant-design-vue";
|
|
||||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
|
||||||
import allOrder from "@/component/Pay/allOrder.vue";
|
|
||||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
|
||||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
creditsDetail,
|
generalMiniCanvas,
|
||||||
allOrder,
|
|
||||||
},
|
},
|
||||||
emits: ['setSloganData'],
|
emits: ['setSloganData'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
let presentState = ref('paypal');
|
let addDetail = reactive({
|
||||||
let showPayOrder = ref(false);
|
imgUrl:''
|
||||||
let loadingShow = ref(false);
|
|
||||||
let { t } = useI18n();
|
|
||||||
let canvas = reactive({});
|
|
||||||
let scale = 2;
|
|
||||||
let ratio = [1,1]
|
|
||||||
let exportWH = 512
|
|
||||||
let canvasBtn = reactive({
|
|
||||||
canvasState:'move',
|
|
||||||
canvasPencilWidth:{
|
|
||||||
pencil:4,
|
|
||||||
eraser:4,
|
|
||||||
},
|
|
||||||
spreadState:false,
|
|
||||||
})
|
|
||||||
let canvasWH = ref(0);
|
|
||||||
onMounted(()=>{
|
|
||||||
})
|
|
||||||
let exportUrl = ''
|
|
||||||
let reverseCanvasState = ref([])//存放canvas操作
|
|
||||||
let normalCanvasState = ref([])//存放canvas操作
|
|
||||||
let canvasState = ref()//存放canvas操作
|
|
||||||
let keyDown = []//监听键盘的 keydown 和 keyup 事件
|
|
||||||
let init = (data,index)=>{
|
|
||||||
loadingShow.value = true
|
|
||||||
normalCanvasState.value = []
|
|
||||||
reverseCanvasState.value = []
|
|
||||||
showPayOrder.value = true;
|
|
||||||
scale = 2;
|
|
||||||
ratio = [1,1]
|
|
||||||
exportWH = 512
|
|
||||||
nextTick(()=>{
|
|
||||||
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
|
|
||||||
let height = canvasBox.offsetHeight;
|
|
||||||
canvasBox.style.width = height+'px'
|
|
||||||
canvasWH.value = height
|
|
||||||
var canvasDom = document.createElement("canvas");
|
|
||||||
document.addEventListener("keydown", canvasKeyDown);
|
|
||||||
document.addEventListener("keyup", canvasKeyUp);
|
|
||||||
|
|
||||||
|
|
||||||
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
|
|
||||||
let oldCanvasDom1 = canvasBox.querySelector('canvas')
|
|
||||||
if(oldCanvasDom){
|
|
||||||
oldCanvasDom.remove()
|
|
||||||
}
|
|
||||||
if(oldCanvasDom1){
|
|
||||||
oldCanvasDom1.remove()
|
|
||||||
}
|
|
||||||
canvasBox.appendChild(canvasDom);
|
|
||||||
let img = new Image();
|
|
||||||
|
|
||||||
img.onload = function(){
|
|
||||||
let wScale = 1
|
|
||||||
let hScale = 1
|
|
||||||
if(img.width>img.height){
|
|
||||||
hScale = img.height/img.width
|
|
||||||
exportWH = img.width
|
|
||||||
}else{
|
|
||||||
wScale = img.width/img.height
|
|
||||||
exportWH = img.height
|
|
||||||
}
|
|
||||||
ratio = [wScale,hScale]
|
|
||||||
canvas = new fabric.Canvas(canvasDom, {
|
|
||||||
backgroundColor: "#FFF",
|
|
||||||
width: canvasWH.value * wScale,
|
|
||||||
height: canvasWH.value * hScale,
|
|
||||||
isDrawingMode: false, // 开启绘图模式
|
|
||||||
});
|
|
||||||
scale = img.height/canvas.height
|
|
||||||
|
|
||||||
JSchangeType(canvas,'init')
|
|
||||||
|
|
||||||
fabric.Object.prototype.cornerSize = 10
|
|
||||||
fabric.Object.prototype.transparentCorners = false
|
|
||||||
exportUrl = data.path
|
|
||||||
fabric.Image.fromURL(data.path, function(img) {
|
|
||||||
// 设置背景图对象的宽度和高度与 canvas 相同
|
|
||||||
img.scaleToWidth(canvas.width);
|
|
||||||
img.scaleToHeight(canvas.height);
|
|
||||||
|
|
||||||
// 将背景图添加到 canvas 的底层
|
|
||||||
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
|
||||||
if(!fabric.Object.prototype.controls.deleteControl){
|
|
||||||
JSSetRemoveImage(deleteObj)
|
|
||||||
}else{
|
|
||||||
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
|
||||||
}
|
|
||||||
updateCanvasState()
|
|
||||||
loadingShow.value = false
|
|
||||||
},{ crossOrigin: "Anonymous" });
|
|
||||||
// 鼠标抬起事件
|
|
||||||
canvas.on('mouse:up', function(event) {
|
|
||||||
if(canvasBtn.canvasState != 'move'){
|
|
||||||
updateCanvasState('mouseUp')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//画布上移动
|
|
||||||
canvas.on("mouse:move", event =>setCanvasMove(event));
|
|
||||||
canvas.add(brushIndicator)
|
|
||||||
setOperation('pencil')
|
|
||||||
img.remove()
|
|
||||||
}
|
|
||||||
img.src = data.path
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
let canvasKeyDown = (event) => {
|
|
||||||
if(keyDown.indexOf(event.key)>-1){
|
|
||||||
}else{
|
|
||||||
keyDown.push(event.code)
|
|
||||||
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
|
|
||||||
historyState('reverse')
|
|
||||||
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
|
|
||||||
historyState('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let canvasKeyUp = (event) =>{
|
|
||||||
keyDown = keyDown.filter(function(item) {
|
|
||||||
return event.code !== item;
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
let clearCanvas = ()=>{
|
|
||||||
canvasBtn.canvasState = 'move'
|
|
||||||
canvasBtn.spreadState = false
|
|
||||||
document.removeEventListener("keydown", canvasKeyDown);
|
|
||||||
document.removeEventListener("keyup", canvasKeyUp);
|
|
||||||
}
|
|
||||||
let rgba = 'rgba(0, 0, 0, 1)'
|
|
||||||
let brushIndicator = new fabric.Circle({
|
|
||||||
radius:2,
|
|
||||||
fill: 'rgba(0, 0, 0, 0)',
|
|
||||||
stroke: '#000',
|
|
||||||
strokeWidth: 1,
|
|
||||||
originX: 'center',
|
|
||||||
originY: 'center',
|
|
||||||
visible :true,
|
|
||||||
// left: -100,
|
|
||||||
// top: -100,
|
|
||||||
erasable: false,
|
|
||||||
});
|
});
|
||||||
|
let addDetails = ref(false);
|
||||||
let setCanvasMove = (event)=>{
|
let init = (data,index)=>{
|
||||||
var pointer = canvas.getPointer(event.e);
|
addDetails.value = true
|
||||||
if(canvas.isDrawingMode){
|
addDetail.imgUrl = data.path
|
||||||
canvas.setCursor('none');
|
}
|
||||||
if(!canvas.contains(brushIndicator)){
|
let submitBase64Data = (data)=>{
|
||||||
canvas.add(brushIndicator)
|
emit('setSloganData',data)
|
||||||
brushIndicator.set({// left:0,
|
cancelDsign()
|
||||||
// top:0,
|
|
||||||
radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
|
|
||||||
})
|
|
||||||
canvas.bringToFront(brushIndicator);//设置优先级最高
|
|
||||||
}
|
|
||||||
// brushIndicator.fill = canvasPencilColor.value
|
|
||||||
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
|
|
||||||
}
|
|
||||||
canvas.requestRenderAll()
|
|
||||||
}
|
|
||||||
let setOperation = (str)=>{
|
|
||||||
canvasBtn.canvasState = str
|
|
||||||
if(str == 'move'){
|
|
||||||
setMove()
|
|
||||||
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
|
|
||||||
}else if(str == 'pencil'){
|
|
||||||
setPencil()
|
|
||||||
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
|
|
||||||
|
|
||||||
}else if(str == 'eraser'){
|
|
||||||
setEraser()
|
|
||||||
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let setMove = ()=>{
|
|
||||||
canvas.isDrawingMode = false
|
|
||||||
canvas.forEachObject((obj) =>obj.selectable = true);
|
|
||||||
}
|
|
||||||
let setPencil = ()=>{
|
|
||||||
canvas.isDrawingMode = true//开启绘画模式
|
|
||||||
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
|
|
||||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
|
||||||
canvas.freeDrawingBrush.color = rgba
|
|
||||||
brushIndicator.set('fill',rgba)
|
|
||||||
canvas.freeDrawingBrush.isEraser = false
|
|
||||||
}
|
|
||||||
let setEraser = ()=>{
|
|
||||||
canvas.isDrawingMode = true
|
|
||||||
let eraser = new fabric.EraserBrush(canvas)
|
|
||||||
canvas.freeDrawingBrush = eraser
|
|
||||||
brushIndicator.set({fill: '#fff'});
|
|
||||||
canvas.requestRenderAll();
|
|
||||||
canvas.freeDrawingBrush.isEraser = true
|
|
||||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
|
||||||
}
|
|
||||||
let deleteObj = ()=> {
|
|
||||||
// if(!canvas.getActiveObjects()){
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
let target = canvas.getActiveObjects()
|
|
||||||
target.forEach((item)=>{
|
|
||||||
canvas.fxRemove(item, {
|
|
||||||
onComplete(){
|
|
||||||
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
|
||||||
canvas.renderAll(); // 重新渲染 Canvas
|
|
||||||
}
|
|
||||||
})
|
|
||||||
canvas.FX_DURATION = 300
|
|
||||||
})
|
|
||||||
}
|
|
||||||
let setTimeOutWidth
|
|
||||||
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
|
||||||
clearTimeout(setTimeOutWidth)
|
|
||||||
setTimeOutWidth = setTimeout(()=>{
|
|
||||||
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
|
|
||||||
},300)
|
|
||||||
}
|
|
||||||
let updateCanvasState = (str) =>{
|
|
||||||
if(str != 'mouseUp'){
|
|
||||||
canvas.remove(brushIndicator)
|
|
||||||
}
|
|
||||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
|
||||||
normalCanvasState.value.push(canvasAsJson);
|
|
||||||
}
|
|
||||||
//撤回
|
|
||||||
let historyState = (str)=> {
|
|
||||||
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
|
|
||||||
let obj = reverseCanvasState.value.pop()
|
|
||||||
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
|
||||||
canvasState.value = obj
|
|
||||||
normalCanvasState.value.push(obj);
|
|
||||||
}else if(str == '' && normalCanvasState.value.length > 1){
|
|
||||||
let obj = normalCanvasState.value.pop()
|
|
||||||
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
|
||||||
reverseCanvasState.value.push(obj);
|
|
||||||
}else{
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas.loadFromJSON(canvasState.value, () => {});
|
|
||||||
}
|
|
||||||
let setSubmit = ()=>{
|
|
||||||
var allObjects = canvas.getObjects('path');
|
|
||||||
if(allObjects.length == 0){
|
|
||||||
return message.info(t('addDetails.jsContent1'))
|
|
||||||
}
|
|
||||||
var canvasDom = document.createElement("canvas");
|
|
||||||
let exportCanvas = new fabric.Canvas(canvasDom, {
|
|
||||||
backgroundColor: "rgba(255, 255, 255,1)",
|
|
||||||
width: exportWH * ratio[0],
|
|
||||||
height: exportWH * ratio[1],
|
|
||||||
isDrawingMode: false, // 开启绘图模式
|
|
||||||
});
|
|
||||||
canvas.backgroundImage.clone((back)=>{
|
|
||||||
back.set({
|
|
||||||
scaleX:1,
|
|
||||||
scaleY:1,
|
|
||||||
left:back.left*scale,
|
|
||||||
top:back.top*scale ,
|
|
||||||
})
|
|
||||||
exportCanvas.backgroundImage = back
|
|
||||||
allObjects.forEach((item,index)=>{
|
|
||||||
// let obj = fabric.util.object.clone(item);
|
|
||||||
if(item.type == 'circle')return
|
|
||||||
let obj
|
|
||||||
item.clone((cloned)=>{
|
|
||||||
obj = cloned
|
|
||||||
})
|
|
||||||
obj.set(
|
|
||||||
{
|
|
||||||
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
|
||||||
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
|
||||||
left:item.left*scale,
|
|
||||||
top:item.top*scale,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
exportCanvas.add(obj)
|
|
||||||
if(allObjects.length-1 == index){
|
|
||||||
let data = exportCanvas.toDataURL('jpg')
|
|
||||||
cancelDsign()
|
|
||||||
clearCanvas()
|
|
||||||
emit('setSloganData',data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
let cancelDsign = ()=>{
|
let cancelDsign = ()=>{
|
||||||
canvas.dispose();
|
addDetails.value = false
|
||||||
showPayOrder.value = false
|
|
||||||
document.removeEventListener('keydown',canvasKeyDown);
|
|
||||||
document.removeEventListener('keyup', canvasKeyUp);
|
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
presentState,
|
...toRefs(addDetail),
|
||||||
showPayOrder,
|
addDetails,
|
||||||
loadingShow,
|
|
||||||
t,
|
|
||||||
...toRefs(canvasBtn),
|
|
||||||
init,
|
init,
|
||||||
setOperation,
|
submitBase64Data,
|
||||||
setPencilWidth,
|
|
||||||
historyState,
|
|
||||||
setSubmit,
|
|
||||||
cancelDsign,
|
cancelDsign,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -392,101 +76,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.addDetails_center{
|
.addDetails_center{
|
||||||
position: relative;
|
position: relative;
|
||||||
// width: calc(512px / 2);
|
|
||||||
// width: 256px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// height: calc(512px / 2);
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
.addDetails_center_item{
|
|
||||||
// position: relative;
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
border: 0.2rem solid #c4c4c4;
|
|
||||||
width: 25rem;
|
|
||||||
border-radius: 4px; /* 设置圆角半径 */
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.addDetails_center_btn_item{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.exportCanvasBox_center{
|
|
||||||
height: 100%;
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #e6e6e6;
|
|
||||||
// overflow: scroll;
|
|
||||||
.addDetails_center_btn{
|
|
||||||
z-index: 2;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%,-135%);
|
|
||||||
transition: all .3s;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
// position: relative;
|
|
||||||
input{
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
.icon-xiala{
|
|
||||||
position: absolute;
|
|
||||||
width: 2rem;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translate(-50%, 90%);
|
|
||||||
left: 50%;
|
|
||||||
width: 6rem;
|
|
||||||
background: #fff;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
&.icon-xiala::before{
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
&.btnRotate::before{
|
|
||||||
transform: rotate(180deg);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-size: 2.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
&.active{
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: .4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.spread{
|
|
||||||
transform: translate(-50%,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.canvas-container{
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.exportCanvasBox_center:hover{
|
|
||||||
.addDetails_center_btn{
|
|
||||||
transform: translate(-50%,-101%);
|
|
||||||
&.spread{
|
|
||||||
transform: translate(-50%,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.exportCanvasBox_submit{
|
.exportCanvasBox_submit{
|
||||||
margin-top: 2.4rem;
|
// margin-top: 2.4rem;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
600
src/component/Detail/editFrontBack.vue
Normal file
600
src/component/Detail/editFrontBack.vue
Normal file
@@ -0,0 +1,600 @@
|
|||||||
|
<template>
|
||||||
|
<div class="editFrontBack_center">
|
||||||
|
<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
|
||||||
|
<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
|
||||||
|
<div>新增</div>
|
||||||
|
</div> -->
|
||||||
|
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||||||
|
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||||
|
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
|
||||||
|
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
|
||||||
|
<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
|
||||||
|
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
|
||||||
|
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
|
||||||
|
<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
|
||||||
|
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
|
||||||
|
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_center_box">
|
||||||
|
<div class="exportCanvasBox_center">
|
||||||
|
<div class="editFrontBack_bgImg" v-show="loadingShow">
|
||||||
|
<img :src="imgData?.undividedLayer" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
let presentState = ref('paypal');
|
||||||
|
let loadingShow = ref(false);
|
||||||
|
let { t } = useI18n();
|
||||||
|
let canvas = reactive({});
|
||||||
|
let ratio = [1,1]
|
||||||
|
let exportWH = 0
|
||||||
|
let imgDomIndex = 0
|
||||||
|
let imgData = ref()
|
||||||
|
let pencilbtnStyle = ref({
|
||||||
|
background:'',
|
||||||
|
width:0+'px',
|
||||||
|
height:0+'px',
|
||||||
|
display:'none',
|
||||||
|
left:0+'px',
|
||||||
|
top:0+'px',
|
||||||
|
})
|
||||||
|
// let a = computed(()=>{
|
||||||
|
// console.log(123);
|
||||||
|
// return props.patchData
|
||||||
|
// })
|
||||||
|
watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
|
||||||
|
if(newVal == -1) return
|
||||||
|
imgDomIndex = newVal
|
||||||
|
props.patchData.front.imageUrl= ''
|
||||||
|
clearTimeout(setTimeSubmit)
|
||||||
|
|
||||||
|
init(props.patchData.front[newVal],'')
|
||||||
|
})
|
||||||
|
let canvasBtn = reactive({
|
||||||
|
canvasState:'move',
|
||||||
|
canvasPencilWidth:{
|
||||||
|
pencil:20,
|
||||||
|
eraser:20,
|
||||||
|
},
|
||||||
|
spreadState:false,
|
||||||
|
})
|
||||||
|
let canvasWH = ref(0);
|
||||||
|
|
||||||
|
let exportUrl = ''
|
||||||
|
let reverseCanvasState = ref([])//存放canvas操作
|
||||||
|
let normalCanvasState = ref([])//存放canvas操作
|
||||||
|
let canvasState = ref()//存放canvas操作
|
||||||
|
let keyDown = []//监听键盘的 keydown 和 keyup 事件
|
||||||
|
let init = (data,index)=>{
|
||||||
|
normalCanvasState.value = []
|
||||||
|
reverseCanvasState.value = []
|
||||||
|
ratio = [1,1]
|
||||||
|
imgData.value = data
|
||||||
|
nextTick(()=>{
|
||||||
|
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
||||||
|
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
|
||||||
|
document.addEventListener("keydown", canvasKeyDown);
|
||||||
|
document.addEventListener("keyup", canvasKeyUp);
|
||||||
|
document.removeEventListener('mousemove', mouseMove);
|
||||||
|
document.removeEventListener('touchmove', touchmove);
|
||||||
|
let img = new Image();
|
||||||
|
img.onload = async function(){
|
||||||
|
loadingShow.value = true
|
||||||
|
let height = canvasBox.offsetHeight;
|
||||||
|
canvasWH.value = height
|
||||||
|
canvasBox.style.width = height+'px'
|
||||||
|
|
||||||
|
let wScale = 1
|
||||||
|
let hScale = 1
|
||||||
|
let styleWidth = Number(data.style.width.split('px')[0])
|
||||||
|
let styleHeight = Number(data.style.height.split('px')[0])
|
||||||
|
if(styleWidth>styleHeight){
|
||||||
|
hScale = styleHeight/styleWidth
|
||||||
|
exportWH = img.width
|
||||||
|
}else{
|
||||||
|
wScale = styleWidth/styleHeight
|
||||||
|
exportWH = img.height
|
||||||
|
}
|
||||||
|
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
|
||||||
|
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
|
||||||
|
ratio = [wScale,hScale]
|
||||||
|
canvas = canvasGeneral.canvasInit(canvasBox,{
|
||||||
|
width:canvasWH.value * wScale,
|
||||||
|
height:canvasWH.value * hScale,
|
||||||
|
})
|
||||||
|
pencilbtnStyle.value.background = rgba.value
|
||||||
|
fabric.Object.prototype.cornerSize = 10
|
||||||
|
fabric.Object.prototype.transparentCorners = false
|
||||||
|
exportUrl = data.maskUrl
|
||||||
|
// canvas.on('mouse:wheel', opt => {
|
||||||
|
// const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
|
||||||
|
// let zoom = canvas.getZoom() // 获取画布当前缩放值
|
||||||
|
// zoom *= 0.999 ** delta
|
||||||
|
// if (zoom > 20) zoom = 20
|
||||||
|
// if (zoom < 0.01) zoom = 0.01
|
||||||
|
// // console.log(zoom);
|
||||||
|
// canvas.zoomToPoint(
|
||||||
|
// { // 关键点
|
||||||
|
// x: opt.e.offsetX,
|
||||||
|
// y: opt.e.offsetY
|
||||||
|
// },
|
||||||
|
// zoom
|
||||||
|
// )
|
||||||
|
// opt.e.preventDefault()
|
||||||
|
// opt.e.stopPropagation()
|
||||||
|
// })
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
fabric.Image.fromURL(data.maskUrl, function(img) {
|
||||||
|
// 设置背景图对象的宽度和高度与 canvas 相同
|
||||||
|
img.scaleToWidth(canvas.width);
|
||||||
|
img.scaleToHeight(canvas.height);;
|
||||||
|
img.set({
|
||||||
|
// width: canvas.width,
|
||||||
|
// height: canvas.height,
|
||||||
|
// scaleX:2,
|
||||||
|
// scaleY:1,
|
||||||
|
scaleX: canvas.width / img.width,
|
||||||
|
scaleY: canvas.height / img.height
|
||||||
|
});
|
||||||
|
// 将背景图添加到 canvas 的底层
|
||||||
|
// canvas.add(img);
|
||||||
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||||
|
if(!fabric.Object.prototype.controls.deleteControl){
|
||||||
|
JSSetRemoveImage(deleteObj)
|
||||||
|
}else{
|
||||||
|
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||||
|
}
|
||||||
|
setPencilWidth()
|
||||||
|
updateCanvasState()
|
||||||
|
resolve('')
|
||||||
|
},{ crossOrigin: "Anonymous" });
|
||||||
|
})
|
||||||
|
|
||||||
|
// 鼠标抬起事件
|
||||||
|
canvas.on('mouse:up', function(event) {
|
||||||
|
if(canvasBtn.canvasState != 'move'){
|
||||||
|
updateCanvasState('mouseUp')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//画布上移动
|
||||||
|
// canvas.on("mouse:move", event =>setCanvasMove(event));
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
setOperation('pencil')
|
||||||
|
createSetTimeSubmit()
|
||||||
|
img.remove()
|
||||||
|
}
|
||||||
|
img.src = data.maskUrl
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let canvasKeyDown = (event) => {
|
||||||
|
if(keyDown.indexOf(event.key)>-1){
|
||||||
|
}else{
|
||||||
|
keyDown.push(event.code)
|
||||||
|
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
|
||||||
|
historyState('reverse')
|
||||||
|
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
|
||||||
|
historyState('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let canvasKeyUp = (event) =>{
|
||||||
|
keyDown = keyDown.filter(function(item) {
|
||||||
|
return event.code !== item;
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let setClone = ()=>{
|
||||||
|
|
||||||
|
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
||||||
|
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
|
||||||
|
let oldCanvasDom1 = canvasBox.querySelector('canvas')
|
||||||
|
if(oldCanvasDom)oldCanvasDom.remove()
|
||||||
|
if(oldCanvasDom1)oldCanvasDom1.remove()
|
||||||
|
loadingShow.value = false
|
||||||
|
}
|
||||||
|
let clearCanvas = ()=>{
|
||||||
|
document.removeEventListener("keydown", canvasKeyDown);
|
||||||
|
document.removeEventListener("keyup", canvasKeyUp);
|
||||||
|
}
|
||||||
|
let rgba = ref('rgb(255,0,0)')
|
||||||
|
let mouseMove = (event)=>{
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
setCanvasMove(e)
|
||||||
|
}
|
||||||
|
let touchmove = (event)=>{
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
setCanvasMove(e)
|
||||||
|
}
|
||||||
|
let setCanvasMove = (event)=>{
|
||||||
|
if(canvas.isDrawingMode){
|
||||||
|
canvas.setCursor('none');
|
||||||
|
}
|
||||||
|
let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
|
||||||
|
if(!canvasCenterBox)return
|
||||||
|
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
|
||||||
|
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
|
||||||
|
pencilbtnStyle.value.left = parentX + "px"
|
||||||
|
pencilbtnStyle.value.top = parentY+'px'
|
||||||
|
}
|
||||||
|
let setOperation = (str)=>{
|
||||||
|
if(!canvas)return
|
||||||
|
canvasBtn.canvasState = str
|
||||||
|
if(str == 'move'){
|
||||||
|
setMove()
|
||||||
|
pencilbtnStyle.value.display = `none`
|
||||||
|
}else if(str == 'pencil'){
|
||||||
|
setPencil()
|
||||||
|
pencilbtnStyle.value.display = `block`
|
||||||
|
}else if(str == 'eraser'){
|
||||||
|
setEraser()
|
||||||
|
// rgba.value = 'rgb(255,255,255)'
|
||||||
|
pencilbtnStyle.value.display = `block`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let setOperationColor = (color)=>{
|
||||||
|
pencilbtnStyle.value.background = color
|
||||||
|
rgba.value = color
|
||||||
|
canvas.freeDrawingBrush.color = color
|
||||||
|
setOperation('pencil')
|
||||||
|
}
|
||||||
|
let setMove = ()=>{
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||||
|
}
|
||||||
|
let setPencil = ()=>{
|
||||||
|
canvas.isDrawingMode = true//开启绘画模式
|
||||||
|
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||||
|
setPencilWidth()
|
||||||
|
canvas.freeDrawingBrush.color = rgba.value
|
||||||
|
pencilbtnStyle.value.background = rgba.value
|
||||||
|
canvas.freeDrawingBrush.isEraser = false
|
||||||
|
}
|
||||||
|
let setEraser = ()=>{
|
||||||
|
canvas.isDrawingMode = true
|
||||||
|
let eraser = new fabric.EraserBrush(canvas)
|
||||||
|
canvas.freeDrawingBrush = eraser
|
||||||
|
pencilbtnStyle.value.background = `rgb(255,255,255)`
|
||||||
|
canvas.requestRenderAll();
|
||||||
|
canvas.freeDrawingBrush.isEraser = true
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||||
|
setPencilWidth()
|
||||||
|
}
|
||||||
|
let deleteObj = ()=> {
|
||||||
|
// if(!canvas.getActiveObjects()){
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
let target = canvas.getActiveObjects()
|
||||||
|
target.forEach((item)=>{
|
||||||
|
canvas.fxRemove(item, {
|
||||||
|
onComplete(){
|
||||||
|
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||||
|
canvas.renderAll(); // 重新渲染 Canvas
|
||||||
|
}
|
||||||
|
})
|
||||||
|
canvas.FX_DURATION = 300
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setTimeOutWidth
|
||||||
|
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||||
|
clearTimeout(setTimeOutWidth)
|
||||||
|
setTimeOutWidth = setTimeout(()=>{
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
|
||||||
|
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||||
|
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||||
|
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
let setTimeSubmit = null
|
||||||
|
let createSetTimeSubmit = ()=>{
|
||||||
|
setSubmit()
|
||||||
|
}
|
||||||
|
let updateCanvasState = (str) =>{
|
||||||
|
if(str != 'mouseUp'){
|
||||||
|
// editFrontBackPencilbtn.value.style.display = 'none'
|
||||||
|
}else{
|
||||||
|
clearTimeout(setTimeSubmit)
|
||||||
|
setTimeSubmit = setTimeout(()=>{
|
||||||
|
createSetTimeSubmit()
|
||||||
|
},1000)
|
||||||
|
}
|
||||||
|
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||||
|
normalCanvasState.value.push(canvasAsJson);
|
||||||
|
}
|
||||||
|
//撤回
|
||||||
|
let historyState = (str)=> {
|
||||||
|
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
|
||||||
|
let obj = reverseCanvasState.value.pop()
|
||||||
|
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
||||||
|
canvasState.value = obj
|
||||||
|
normalCanvasState.value.push(obj);
|
||||||
|
}else if(str == '' && normalCanvasState.value.length > 1){
|
||||||
|
let obj = normalCanvasState.value.pop()
|
||||||
|
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
||||||
|
reverseCanvasState.value.push(obj);
|
||||||
|
}else{
|
||||||
|
return
|
||||||
|
}
|
||||||
|
canvas.loadFromJSON(canvasState.value, () => {
|
||||||
|
createSetTimeSubmit()
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
let setSubmit = ()=>{
|
||||||
|
var allObjects = canvas.getObjects('path');
|
||||||
|
var canvasDom = document.createElement("canvas");
|
||||||
|
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||||
|
width: exportWH * ratio[0],
|
||||||
|
height: exportWH * ratio[1],
|
||||||
|
isDrawingMode: false, // 开启绘图模式
|
||||||
|
});
|
||||||
|
canvas.backgroundImage.clone((back)=>{
|
||||||
|
back.scaleToWidth(exportCanvas.width);
|
||||||
|
back.scaleToHeight(exportCanvas.height);
|
||||||
|
back.set({
|
||||||
|
scaleX: exportCanvas.width / back.width,
|
||||||
|
scaleY: exportCanvas.height / back.height
|
||||||
|
})
|
||||||
|
let scale = exportCanvas.height/canvas.height
|
||||||
|
exportCanvas.backgroundImage = back
|
||||||
|
allObjects.forEach((item,index)=>{
|
||||||
|
// let obj = fabric.util.object.clone(item);
|
||||||
|
if(item.type == 'circle')return
|
||||||
|
let obj
|
||||||
|
item.clone((cloned)=>{
|
||||||
|
obj = cloned
|
||||||
|
})
|
||||||
|
obj.set(
|
||||||
|
{
|
||||||
|
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||||
|
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||||
|
left:item.left*scale,
|
||||||
|
top:item.top*scale,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
exportCanvas.add(obj)
|
||||||
|
|
||||||
|
})
|
||||||
|
let data = exportCanvas.toDataURL('png')
|
||||||
|
cancelDsign()
|
||||||
|
clearCanvas()
|
||||||
|
// props.props.patchData.front[imgDomIndex].imageUrl = data
|
||||||
|
let mark = data
|
||||||
|
let full = props.patchData.front[imgDomIndex].undividedLayer
|
||||||
|
let size = {
|
||||||
|
width: Math.round(exportWH * ratio[0]),
|
||||||
|
height: Math.round(exportWH * ratio[1]),
|
||||||
|
}
|
||||||
|
segmentImage(mark,full,size).then((rv)=>{
|
||||||
|
// console.log(rv.targetFrontUrl,rv.targetBackUrl)
|
||||||
|
props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
|
||||||
|
props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
|
||||||
|
props.patchData.front[imgDomIndex].maskUrl = data
|
||||||
|
})
|
||||||
|
return
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let cancelDsign = ()=>{
|
||||||
|
|
||||||
|
document.removeEventListener('keydown',canvasKeyDown);
|
||||||
|
document.removeEventListener('keyup', canvasKeyUp);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
presentState,
|
||||||
|
loadingShow,
|
||||||
|
imgData,
|
||||||
|
pencilbtnStyle,
|
||||||
|
t,
|
||||||
|
...toRefs(canvasBtn),
|
||||||
|
rgba,
|
||||||
|
init,
|
||||||
|
setOperation,
|
||||||
|
setOperationColor,
|
||||||
|
setPencilWidth,
|
||||||
|
historyState,
|
||||||
|
setSubmit,
|
||||||
|
setClone,
|
||||||
|
cancelDsign,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.editFrontBack_center{
|
||||||
|
position: relative;
|
||||||
|
// width: calc(512px / 2);
|
||||||
|
// width: 256px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// height: calc(512px / 2);
|
||||||
|
margin: 0 auto;
|
||||||
|
.editFrontBack_center_item{
|
||||||
|
// position: relative;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
border: 0.2rem solid #c4c4c4;
|
||||||
|
width: 35rem;
|
||||||
|
border-radius: 4px; /* 设置圆角半径 */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
.editFrontBack_center_btn_item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editFrontBack_center_btn{
|
||||||
|
z-index: 2;
|
||||||
|
left: 50%;
|
||||||
|
// transform: translate(-50%,-135%);
|
||||||
|
// transition: all .3s;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
input{
|
||||||
|
// width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 30%;
|
||||||
|
}
|
||||||
|
.icon-xiala{
|
||||||
|
position: absolute;
|
||||||
|
width: 2rem;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-50%, 90%);
|
||||||
|
left: 50%;
|
||||||
|
width: 6rem;
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&.icon-xiala::before{
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
&.btnRotate::before{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen,.editFrontBack_center_btn_colorWhite{
|
||||||
|
width: 9rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0 .5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .5rem 1;
|
||||||
|
border: 1px solid rgba(0,0,0,.5);
|
||||||
|
&.active{
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editFrontBack_center_btn_colorRed{
|
||||||
|
background: rgba(255,0,0);
|
||||||
|
}
|
||||||
|
.editFrontBack_center_btn_colorGreen{
|
||||||
|
background: rgba(0,255,0);
|
||||||
|
}
|
||||||
|
.editFrontBack_center_btn_colorWhite{
|
||||||
|
background: rgba(255,255,255);
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&.active{
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spread{
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center_box{
|
||||||
|
padding: 3rem;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
background: #e6e6e6;
|
||||||
|
&:hover{
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
.editFrontBack_pencilbtn{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center{
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
// overflow: scroll;
|
||||||
|
|
||||||
|
:deep(.canvas-container){
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
opacity: .5;
|
||||||
|
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
|
||||||
|
}
|
||||||
|
.editFrontBack_bgImg{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
img{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center:hover{
|
||||||
|
.editFrontBack_center_btn{
|
||||||
|
transform: translate(-50%,-101%);
|
||||||
|
&.spread{
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -913,6 +913,7 @@ export default defineComponent({
|
|||||||
margin-top: calc(1.5rem*1.2);
|
margin-top: calc(1.5rem*1.2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.habit_workspace_show{
|
.habit_workspace_show{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@@ -1165,25 +1166,9 @@ export default defineComponent({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: calc(1.4rem*1.2);
|
font-size: calc(1.4rem*1.2);
|
||||||
> .anticon + span{
|
> .anticon + span{
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
|
||||||
.ant-tooltip{
|
|
||||||
z-index: 1049 !important;
|
|
||||||
}
|
|
||||||
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
|
||||||
background: #000 !important;
|
|
||||||
}
|
|
||||||
.habit_mod{
|
|
||||||
background-color: #000 !important;
|
|
||||||
/* top: 0 !important; */
|
|
||||||
/* left: 0 !important; */
|
|
||||||
}
|
|
||||||
.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
|
|
||||||
background: #000 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-modal class="oldHsitory_detail_modal_component"
|
|
||||||
v-model:visible="hsitoryDetailShow"
|
|
||||||
:footer="null"
|
|
||||||
:title="collectionName"
|
|
||||||
width="80%"
|
|
||||||
:maskClosable="false"
|
|
||||||
:keyboard="false"
|
|
||||||
:centered="true"
|
|
||||||
>
|
|
||||||
<template #closeIcon>
|
|
||||||
<div class="close_icon" @click.stop="changeDetailShow()"><span class="icon iconfont icon-guanbi"></span></div>
|
|
||||||
</template>
|
|
||||||
<!-- <div class="history_detail_content scroll_style">
|
|
||||||
<div class="history_img_block" v-for="img in groupDetails" :key="img">
|
|
||||||
<div class="history_img_item" >
|
|
||||||
<img class="element_img" :src="img.url">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<OldExportNewCoolection ref="OldExportNewCoolection"></OldExportNewCoolection>
|
|
||||||
|
|
||||||
</a-modal>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import OldExportNewCoolection from "@/component/HomePage/OldExportNewCoolection.vue";
|
|
||||||
import { defineComponent, ref, nextTick } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
OldExportNewCoolection
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
groupDetails:{
|
|
||||||
default:{},
|
|
||||||
},
|
|
||||||
collectionName:{
|
|
||||||
default:''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
let hsitoryDetailShow = ref(false)
|
|
||||||
return{
|
|
||||||
hsitoryDetailShow
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
init(data:any){
|
|
||||||
this.hsitoryDetailShow = true
|
|
||||||
nextTick().then(()=>{
|
|
||||||
let OldExportNewCoolection:any = this.$refs.OldExportNewCoolection
|
|
||||||
OldExportNewCoolection.init(data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeDetailShow(){
|
|
||||||
this.hsitoryDetailShow = !this.hsitoryDetailShow
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
.oldHsitory_detail_modal_component{
|
|
||||||
.ant-modal-body{
|
|
||||||
overflow-y: initial !important;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
.export_new_collection_review{
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) scale(2);
|
|
||||||
transform-origin: top center;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.ant-modal-close{
|
|
||||||
width: 3.6rem;
|
|
||||||
height: 3.6rem;
|
|
||||||
position: absolute;
|
|
||||||
top: -1.8rem;
|
|
||||||
right: -1.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-modal-header{
|
|
||||||
background: #F7F7F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-modal-body{
|
|
||||||
background: #F2F3FB;
|
|
||||||
height: 80vh;
|
|
||||||
min-height: 72rem;
|
|
||||||
overflow-y: hidden;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close_icon{
|
|
||||||
width: 3.6rem;
|
|
||||||
height: 3.6rem;
|
|
||||||
background: #000000;
|
|
||||||
border-radius: 50%;
|
|
||||||
line-height: 3.6rem;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.icon-guanbi{
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_detail_content{
|
|
||||||
padding: 2.6rem 2.0rem 2.6rem 3.7rem;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow-y:auto;
|
|
||||||
background: #FFFFFF;
|
|
||||||
|
|
||||||
.history_img_block{
|
|
||||||
width: 16.5rem;
|
|
||||||
height: 16.5rem;
|
|
||||||
border: 0.1rem solid #343579;
|
|
||||||
margin: 0 1.7rem 1.7rem 0;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.history_img_item{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element_img{
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -3,12 +3,11 @@
|
|||||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||||
<div class="detail_modal_body_title">
|
<div class="detail_modal_body_title">
|
||||||
<div class="detail_modal_body_nav">
|
<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)">
|
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpenItem}" @click="clothesOpen(index)">
|
||||||
<img :src="item?.path" alt="">
|
<img :src="item?.path" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
|
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
|
||||||
<!-- <div
|
<!-- <div
|
||||||
v-for="item,index in frontBack.back"
|
v-for="item,index in frontBack.back"
|
||||||
@@ -19,19 +18,19 @@
|
|||||||
@click="setpitch(item,index)" ref="content" >
|
@click="setpitch(item,index)" ref="content" >
|
||||||
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
|
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].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="">
|
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
||||||
</div>
|
</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">
|
<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" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
|
<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="">
|
<img :src="item.imageUrl" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_btn">
|
<div class="designOpenrtion_btn" v-if="!isBody">
|
||||||
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
<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',$event)"></li>
|
<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',$event)"></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',$event)"></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',$event)"></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> -->
|
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -41,6 +40,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
|
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="design_compile_content">
|
||||||
|
<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -50,8 +52,12 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
// import { Modal,message } from 'ant-design-vue';
|
// import { Modal,message } from 'ant-design-vue';
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
|
import editFrontBack from '@/component/Detail/editFrontBack.vue'
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
// props: ["frontBack"],
|
props: ["isBody"],
|
||||||
|
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
|
||||||
|
components:{editFrontBack},
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
@@ -85,9 +91,10 @@ export default defineComponent({
|
|||||||
]);
|
]);
|
||||||
let direction = ref('')
|
let direction = ref('')
|
||||||
let imgDom = ref()
|
let imgDom = ref()
|
||||||
let imgDomIndex = ref(2)
|
let imgDomIndex = ref(-1)
|
||||||
let frontBack = ref({})
|
let frontBack = ref({})
|
||||||
let frontBackOld = ref({})
|
let frontBackOld = ref({})
|
||||||
|
let editFrontBack = ref(null)
|
||||||
return {
|
return {
|
||||||
designItemDetail,
|
designItemDetail,
|
||||||
current,
|
current,
|
||||||
@@ -99,14 +106,20 @@ export default defineComponent({
|
|||||||
frontBack,
|
frontBack,
|
||||||
setRevocation,
|
setRevocation,
|
||||||
frontBackOld,
|
frontBackOld,
|
||||||
|
editFrontBack,
|
||||||
|
getMousePosition,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loadingShow:false,//加载中
|
loadingShow:false,//加载中
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
|
setImgSizeTimeout:null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('resize', this.setImgSizeTime);
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(){
|
init(){
|
||||||
let DesignParent = this.$parent
|
let DesignParent = this.$parent
|
||||||
@@ -134,16 +147,30 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
this.setImgSize()
|
this.setImgSize()
|
||||||
},
|
},
|
||||||
|
setImgSizeTime(){
|
||||||
|
clearTimeout(this.setImgSizeTimeout)
|
||||||
|
this.setImgSizeTimeout = setTimeout(()=>{
|
||||||
|
this.setImgSize()
|
||||||
|
},300)
|
||||||
|
},
|
||||||
async setImgSize(){
|
async setImgSize(){
|
||||||
|
this.frontBack.body = null
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
let front = []
|
let front = []
|
||||||
let back = []
|
let back = []
|
||||||
let body
|
let body = {}
|
||||||
designItemDetail.others.forEach((item) => {
|
if(designItemDetail.others.length > 0){
|
||||||
if(item.type == 'Body'){
|
designItemDetail.others.forEach((item) => {
|
||||||
|
if(item.type == 'Body'){
|
||||||
|
body = item
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
designItemDetail.clothes.forEach((item) => {
|
||||||
body = item
|
body = item
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
|
|
||||||
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
|
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
|
||||||
let frontIndex = 6
|
let frontIndex = 6
|
||||||
let backIndex = 3
|
let backIndex = 3
|
||||||
@@ -167,11 +194,12 @@ export default defineComponent({
|
|||||||
front[index] = v.layersObject[i]
|
front[index] = v.layersObject[i]
|
||||||
front[index].style.zIndex = v.priority
|
front[index].style.zIndex = v.priority
|
||||||
front[index].id = v.id
|
front[index].id = v.id
|
||||||
|
front[index].undividedLayer = v.undividedLayer
|
||||||
}else{
|
}else{
|
||||||
back[index] = v.layersObject[i]
|
back[index] = v.layersObject[i]
|
||||||
back[index].style.zIndex = v.priority
|
back[index].style.zIndex = v.priority
|
||||||
back[index].id = v.id
|
back[index].id = v.id
|
||||||
|
back[index].undividedLayer = v.undividedLayer
|
||||||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||||||
}
|
}
|
||||||
if(this.printZIndex < v.priority){
|
if(this.printZIndex < v.priority){
|
||||||
@@ -180,12 +208,13 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
this.printZIndex++
|
this.printZIndex++
|
||||||
})
|
})
|
||||||
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
|
if(body){
|
||||||
|
body.style = {
|
||||||
body.style = {
|
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
||||||
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
||||||
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.frontBack = {
|
this.frontBack = {
|
||||||
front:front,
|
front:front,
|
||||||
back:back,
|
back:back,
|
||||||
@@ -218,6 +247,12 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return num
|
return num
|
||||||
},
|
},
|
||||||
|
clear(){
|
||||||
|
this.imgDomIndex = -1
|
||||||
|
this.clothesOpenActive(-1)
|
||||||
|
if(this.editFrontBack)this.editFrontBack.setClone()
|
||||||
|
window.removeEventListener('resize', this.setImgSizeTime);
|
||||||
|
},
|
||||||
setpitch(item,index){
|
setpitch(item,index){
|
||||||
this.frontBack.front.forEach((v)=>{
|
this.frontBack.front.forEach((v)=>{
|
||||||
v.designOpenrtionBtn = false
|
v.designOpenrtionBtn = false
|
||||||
@@ -244,8 +279,12 @@ export default defineComponent({
|
|||||||
let top = Number(this.frontBack.front[index].style.top.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.left = imgDomWH.x+event.offsetX-left
|
||||||
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||||
document.addEventListener("mouseup", this.mouseup);
|
// document.addEventListener("mouseup", this.mouseup);
|
||||||
document.addEventListener("mousemove", this.moveMousemove);
|
// document.addEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.addEventListener('mousemove', this.mouseMove);
|
||||||
|
document.addEventListener('touchmove', this.touchmove);
|
||||||
|
document.addEventListener('mouseup', this.mouseup);
|
||||||
|
document.addEventListener('touchend', this.mouseup);
|
||||||
},
|
},
|
||||||
//设置尺寸
|
//设置尺寸
|
||||||
itemSizeMousedown(direction,event){
|
itemSizeMousedown(direction,event){
|
||||||
@@ -262,15 +301,25 @@ export default defineComponent({
|
|||||||
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("mouseup", this.sizeMouseup);
|
document.addEventListener('mousemove', this.sizeMouseMove);
|
||||||
document.addEventListener("mousemove", this.sizeMousemove);
|
document.addEventListener('touchmove', this.sizeTouchmove);
|
||||||
|
document.addEventListener('mouseup', this.sizeMouseup);
|
||||||
|
document.addEventListener('touchend', this.sizeMouseup);
|
||||||
|
},
|
||||||
|
mouseMove(event){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
touchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.mouseMoveOperation(e)
|
||||||
},
|
},
|
||||||
//鼠标移动
|
//鼠标移动
|
||||||
moveMousemove(e) {
|
mouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||||
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
|
let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
|
||||||
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'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.left = x
|
||||||
this.frontBack.front[this.imgDomIndex].style.top = y
|
this.frontBack.front[this.imgDomIndex].style.top = y
|
||||||
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||||
@@ -286,8 +335,15 @@ export default defineComponent({
|
|||||||
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
|
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
|
sizeMouseMove(event){
|
||||||
sizeMousemove(e) {
|
let e = getMousePosition(event,false)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeTouchmove(event){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.sizeMouseMoveOperation(e)
|
||||||
|
},
|
||||||
|
sizeMouseMoveOperation(e) {
|
||||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||||
let parentNode =this.imgDom.parentNode
|
let parentNode =this.imgDom.parentNode
|
||||||
let width = imgDomWH.width
|
let width = imgDomWH.width
|
||||||
@@ -296,8 +352,8 @@ export default defineComponent({
|
|||||||
let num = height/width
|
let num = height/width
|
||||||
//判断移动四个边
|
//判断移动四个边
|
||||||
if(this.direction == 'right'){
|
if(this.direction == 'right'){
|
||||||
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
|
w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
|
||||||
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
// height = w*num+'px'
|
// height = w*num+'px'
|
||||||
}else if(this.direction == 'top'){
|
}else if(this.direction == 'top'){
|
||||||
@@ -305,20 +361,20 @@ export default defineComponent({
|
|||||||
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
|
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
|
||||||
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||||
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||||
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||||
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
|
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
|
||||||
|
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
// width = h*num+'px'
|
// width = h*num+'px'
|
||||||
}else if(this.direction == 'bottom'){
|
}else if(this.direction == 'bottom'){
|
||||||
num = width/height
|
num = width/height
|
||||||
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
|
h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
|
||||||
height = h+'px'
|
height = h+'px'
|
||||||
// width = h*num+'px'
|
// width = h*num+'px'
|
||||||
}else if(this.direction == 'left'){
|
}else if(this.direction == 'left'){
|
||||||
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
|
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
|
||||||
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||||
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
|
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
|
||||||
|
|
||||||
width = w+'px'
|
width = w+'px'
|
||||||
// height = w*num+'px'
|
// height = w*num+'px'
|
||||||
@@ -340,13 +396,19 @@ export default defineComponent({
|
|||||||
zIndex:this.printZIndex
|
zIndex:this.printZIndex
|
||||||
}
|
}
|
||||||
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
|
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
|
||||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
document.removeEventListener('mousemove',this.sizeMouseMove)
|
||||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
document.removeEventListener('touchmove',this.sizeTouchmove)
|
||||||
|
document.removeEventListener('mouseup',this.sizeMouseup)
|
||||||
|
document.removeEventListener('touchend',this.sizeMouseup)
|
||||||
},
|
},
|
||||||
mouseup(e) {
|
mouseup(e) {
|
||||||
|
|
||||||
document.removeEventListener("mouseup", this.mouseup);
|
// document.removeEventListener("mouseup", this.mouseup);
|
||||||
document.removeEventListener("mousemove", this.moveMousemove);
|
// document.removeEventListener("mousemove", this.moveMousemove);
|
||||||
|
document.removeEventListener('mousemove',this.mouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.touchmove)
|
||||||
|
document.removeEventListener('mouseup',this.mouseup)
|
||||||
|
document.removeEventListener('touchend',this.mouseup)
|
||||||
},
|
},
|
||||||
clearModal(){
|
clearModal(){
|
||||||
this.printZIndex = 2//点击图片z-index
|
this.printZIndex = 2//点击图片z-index
|
||||||
@@ -372,9 +434,11 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
clothesOpenActive(index){
|
clothesOpenActive(index){
|
||||||
this.designItemDetail.clothes.forEach((item)=>{
|
this.designItemDetail.clothes.forEach((item)=>{
|
||||||
item.clothesOpen = false
|
item.clothesOpenItem = false
|
||||||
})
|
})
|
||||||
this.designItemDetail.clothes[index].clothesOpen = true
|
if(index != -1){
|
||||||
|
this.designItemDetail.clothes[index].clothesOpenItem = true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
sort(arr){
|
sort(arr){
|
||||||
arr.sort((a, b) => {
|
arr.sort((a, b) => {
|
||||||
@@ -393,15 +457,14 @@ export default defineComponent({
|
|||||||
// return a_num - b_num;
|
// return a_num - b_num;
|
||||||
// });
|
// });
|
||||||
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
|
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
|
||||||
|
|
||||||
let num = 10
|
let num = 10
|
||||||
arr.forEach((item)=>{
|
arr.forEach((item)=>{
|
||||||
item.priority = num++
|
item.priority = num++
|
||||||
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
|
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
|
||||||
})
|
})
|
||||||
|
let front = arr
|
||||||
|
let imageCategory1
|
||||||
data.designSingleItemDTOList.forEach((item)=>{
|
data.designSingleItemDTOList.forEach((item)=>{
|
||||||
let front = arr
|
|
||||||
let imageCategory1
|
|
||||||
if(arr.length > 1){
|
if(arr.length > 1){
|
||||||
imageCategory1 = arr[1].imageCategory
|
imageCategory1 = arr[1].imageCategory
|
||||||
}
|
}
|
||||||
@@ -416,6 +479,7 @@ export default defineComponent({
|
|||||||
let top = y == 0 ? item.offset[1]:y+item.offset[1]
|
let top = y == 0 ? item.offset[1]:y+item.offset[1]
|
||||||
let left = x == 0 ? item.offset[0]:x+item.offset[0]
|
let left = x == 0 ? item.offset[0]:x+item.offset[0]
|
||||||
item.offset = [left,top]
|
item.offset = [left,top]
|
||||||
|
item.maskUrl = arr[index].maskUrl
|
||||||
item.priority = arr[index].priority
|
item.priority = arr[index].priority
|
||||||
arr[index].similarity = true
|
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)]
|
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
||||||
@@ -426,7 +490,6 @@ export default defineComponent({
|
|||||||
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
|
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(
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
// this.$parent.loadingShow = false
|
// this.$parent.loadingShow = false
|
||||||
@@ -472,6 +535,7 @@ export default defineComponent({
|
|||||||
this.$emit('setDesignCoverage');
|
this.$emit('setDesignCoverage');
|
||||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||||
this.setRevocation(designItemDetail,data)
|
this.setRevocation(designItemDetail,data)
|
||||||
|
this.clear()
|
||||||
}
|
}
|
||||||
).catch(res=>{
|
).catch(res=>{
|
||||||
// this.$parent.loadingShow = false
|
// this.$parent.loadingShow = false
|
||||||
@@ -485,8 +549,12 @@ export default defineComponent({
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.designOpenrtion_modal {
|
.designOpenrtion_modal {
|
||||||
// max-width: 1440px;
|
// max-width: 1440px;
|
||||||
|
user-select: none; /* 对现代浏览器有效 */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -505,19 +573,21 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
.designOpenrtion_centent{
|
.designOpenrtion_centent{
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: space-around;
|
align-content: space-around;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
|
||||||
user-select:none;
|
user-select:none;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
|
||||||
&.active{
|
&.active{
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
@@ -525,8 +595,8 @@ export default defineComponent({
|
|||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
>img{
|
>img{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -611,8 +681,8 @@ export default defineComponent({
|
|||||||
li{
|
li{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// border-radius: 50%;
|
// border-radius: 50%;
|
||||||
width: calc(1rem*1.2);
|
width: calc(2rem*1.2);
|
||||||
height: calc(1rem*1.2);
|
height: calc(2rem*1.2);
|
||||||
background-color: rgb(20, 188, 255);
|
background-color: rgb(20, 188, 255);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
@@ -296,73 +296,6 @@ export default defineComponent({
|
|||||||
init(){
|
init(){
|
||||||
this.setImgSize()
|
this.setImgSize()
|
||||||
},
|
},
|
||||||
// async setImgSize(){
|
|
||||||
// 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.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
|
|
||||||
|
|
||||||
// // 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,
|
|
||||||
// }))
|
|
||||||
// this.setCanvas(this.frontBack)
|
|
||||||
// },
|
|
||||||
|
|
||||||
|
|
||||||
//按比设置单件衣服宽高位置
|
//按比设置单件衣服宽高位置
|
||||||
async setPostition(url){
|
async setPostition(url){
|
||||||
@@ -485,7 +418,7 @@ export default defineComponent({
|
|||||||
.designOpenrtion_modal {
|
.designOpenrtion_modal {
|
||||||
// max-width: 1440px;
|
// max-width: 1440px;
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.4rem*1.2));
|
// height: calc(65vh - 6.4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -25,10 +25,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_btn">
|
<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)">
|
<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.stop="itemSizeMousedown('top',$event)"></li>
|
<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||||
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||||
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||||
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||||
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,6 +47,7 @@ import { useStore } from "vuex";
|
|||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
// props: ["frontBack"],
|
// props: ["frontBack"],
|
||||||
|
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
@@ -100,8 +101,12 @@ export default defineComponent({
|
|||||||
return {
|
return {
|
||||||
loadingShow:false,//加载中
|
loadingShow:false,//加载中
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
|
setImgSizeTimeout:null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('resize', this.setImgSizeTime);
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(){
|
init(){
|
||||||
let DesignParent = this.$parent
|
let DesignParent = this.$parent
|
||||||
@@ -129,7 +134,14 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
this.setImgSize()
|
this.setImgSize()
|
||||||
},
|
},
|
||||||
|
setImgSizeTime(){
|
||||||
|
clearTimeout(this.setImgSizeTimeout)
|
||||||
|
this.setImgSizeTimeout = setTimeout(()=>{
|
||||||
|
this.setImgSize()
|
||||||
|
},300)
|
||||||
|
},
|
||||||
async setImgSize(){
|
async setImgSize(){
|
||||||
|
this.frontBack.body = null
|
||||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||||
let front = []
|
let front = []
|
||||||
let back = []
|
let back = []
|
||||||
@@ -214,6 +226,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return num
|
return num
|
||||||
},
|
},
|
||||||
|
clear(){
|
||||||
|
window.removeEventListener('resize', this.setImgSizeTime);
|
||||||
|
},
|
||||||
setpitch(item,index){
|
setpitch(item,index){
|
||||||
this.frontBack.front.forEach((v)=>{
|
this.frontBack.front.forEach((v)=>{
|
||||||
v.designOpenrtionBtn = false
|
v.designOpenrtionBtn = false
|
||||||
@@ -439,6 +454,7 @@ export default defineComponent({
|
|||||||
this.$emit('setDesignCoverage');
|
this.$emit('setDesignCoverage');
|
||||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||||
this.setRevocation(designItemDetail,data)
|
this.setRevocation(designItemDetail,data)
|
||||||
|
this.clear()
|
||||||
}
|
}
|
||||||
).catch(res=>{
|
).catch(res=>{
|
||||||
this.$emit('setParentLoadingShow');
|
this.$emit('setParentLoadingShow');
|
||||||
@@ -457,7 +473,7 @@ export default defineComponent({
|
|||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: calc(4rem*1.2) calc(5rem*1.2) calc(0rem*1.2)!important;
|
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||||
// height: calc(65vh - 6.calc(4rem*1.2));
|
// height: calc(65vh - 6.calc(4rem*1.2));
|
||||||
height: calc(65rem*1.2);
|
height: calc(65rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -477,13 +493,14 @@ export default defineComponent({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.designOpenrtion_centent{
|
.designOpenrtion_centent{
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: space-around;
|
align-content: space-around;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
user-select:none;
|
user-select:none;
|
||||||
@@ -496,8 +513,9 @@ export default defineComponent({
|
|||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
|
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
>img{
|
>img{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|||||||
@@ -29,8 +29,10 @@
|
|||||||
:outputSize="option.size"
|
:outputSize="option.size"
|
||||||
:outputType="option.outputType"
|
:outputType="option.outputType"
|
||||||
:auto-crop="option.autoCrop"
|
:auto-crop="option.autoCrop"
|
||||||
|
:fixedBox="!isRound"
|
||||||
|
:fixed="isRound"
|
||||||
:auto-crop-width="option.autoCropWidth"
|
:auto-crop-width="option.autoCropWidth"
|
||||||
:auto-crop-height="option.autoCropHeight"
|
:auto-crop-height="option.autoCropWidth"
|
||||||
:center-box="option.centerBox"
|
:center-box="option.centerBox"
|
||||||
:can-move="option.canMove" :can-move-box="option.canMoveBox"
|
:can-move="option.canMove" :can-move-box="option.canMoveBox"
|
||||||
@real-time="realTime"
|
@real-time="realTime"
|
||||||
@@ -39,8 +41,8 @@
|
|||||||
<div class="cur_picture_opterate">
|
<div class="cur_picture_opterate">
|
||||||
<div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
|
<div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
|
||||||
<div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
|
<div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
|
||||||
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
|
<div class="cur_picture_opterate_item" @click="changeScale(-.1)"><span class="operate_icon icon_font">-</span></div>
|
||||||
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
|
<div class="cur_picture_opterate_item" @click="changeScale(.1)"><span class="operate_icon icon_font">+</span></div>
|
||||||
<div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
|
<div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -51,8 +53,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="cut_picture_review_block">
|
<div class="cut_picture_review_block">
|
||||||
<div class="cut_picture_review_item">
|
<div class="cut_picture_review_item">
|
||||||
<div class="cut_picture_review_content" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||||
<div :style="previews.div" >
|
<div :style="previews.div">
|
||||||
<img class="previews_image" :style="previews.img" :src="previews.url">
|
<img class="previews_image" :style="previews.img" :src="previews.url">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,17 +78,14 @@ import { VueCropper } from "vue-cropper";
|
|||||||
// import { openGuide,driverObj__ } from "@/tool/guide";
|
// import { openGuide,driverObj__ } from "@/tool/guide";
|
||||||
import {base64toFile} from '@/tool/util'
|
import {base64toFile} from '@/tool/util'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props:['cropperFileData','isUpload'],
|
props:['cropperFileData','isUpload','isRound'],
|
||||||
components:{
|
components:{
|
||||||
VueCropper,
|
VueCropper,
|
||||||
},
|
},
|
||||||
setup(){
|
setup(){
|
||||||
let driver__:any = inject('driver__')
|
|
||||||
return {
|
|
||||||
driver__
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data(){
|
data(prop){
|
||||||
return {
|
return {
|
||||||
cutPicuterModal:false,
|
cutPicuterModal:false,
|
||||||
option: {
|
option: {
|
||||||
@@ -97,16 +96,19 @@ export default defineComponent({
|
|||||||
outputType: 'png',
|
outputType: 'png',
|
||||||
autoCrop: true,
|
autoCrop: true,
|
||||||
// 只有自动截图开启 宽度高度才生效
|
// 只有自动截图开启 宽度高度才生效
|
||||||
autoCropWidth: 360,
|
autoCropWidth: prop.isRound?100:360,
|
||||||
autoCropHeight: 360,
|
autoCropHeight: prop.isRound?100:360,
|
||||||
max: 99999,
|
max: 99999,
|
||||||
centerBox:true,
|
centerBox:true,
|
||||||
canMove:true,
|
canMove:true,
|
||||||
canMoveBox:true,
|
canMoveBox:true,
|
||||||
|
fixedBox:false,
|
||||||
},
|
},
|
||||||
previews:{},
|
previews:{},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted(){
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
rotateLeft() {
|
rotateLeft() {
|
||||||
@@ -147,7 +149,7 @@ export default defineComponent({
|
|||||||
cropper.getCropData((data:any) => {
|
cropper.getCropData((data:any) => {
|
||||||
// 转换为File对象
|
// 转换为File对象
|
||||||
let file = base64toFile(data,this.cropperFileData.name);
|
let file = base64toFile(data,this.cropperFileData.name);
|
||||||
this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData,base64:data})
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -350,6 +352,10 @@ export default defineComponent({
|
|||||||
background: rgba(91,94,105,0.8);
|
background: rgba(91,94,105,0.8);
|
||||||
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
|
&.active{
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cut_picture_review_block_sec{
|
.cut_picture_review_block_sec{
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="generate">
|
<div class="generate">
|
||||||
<div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'" class="generate_checkbox" >
|
<div v-if="(type_.type2 == 'Printboard' && scene.value == 'Pattern')" class="generate_checkbox" >
|
||||||
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4'}"></generalMenu>
|
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4'}"></generalMenu>
|
||||||
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
||||||
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||||
@@ -13,8 +13,8 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="input_border" >
|
<div class="input_border" >
|
||||||
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'']">
|
<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">
|
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
|
||||||
<div class="upload_item">
|
<div class="upload_item">
|
||||||
<div
|
<div
|
||||||
class="upload_file_item Guide_1_2_7"
|
class="upload_file_item Guide_1_2_7"
|
||||||
@@ -39,13 +39,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <a-popover>
|
|
||||||
<template #content>
|
|
||||||
<p>Seed</p>
|
|
||||||
</template>
|
|
||||||
<input class="search_seed" max="9999" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
|
|
||||||
</a-popover> -->
|
|
||||||
|
|
||||||
<input
|
<input
|
||||||
class="search_input"
|
class="search_input"
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
@@ -77,6 +70,53 @@
|
|||||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="input_box_btnBox" v-else>
|
||||||
|
<div class="upload_item">
|
||||||
|
<div
|
||||||
|
class="upload_file_item"
|
||||||
|
v-for="(file, index) in sketchboardList"
|
||||||
|
:key="file"
|
||||||
|
:class="[driver__.driver?'showEvents':'']"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="upload_file_item_content"
|
||||||
|
v-show="file?.status === 'uploading'"
|
||||||
|
>
|
||||||
|
<a-spin size="small" :indicator="indicator" tip="Uploading..." />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="upload_file_item_content"
|
||||||
|
v-show="file?.status === 'done' || file?.base64"
|
||||||
|
>
|
||||||
|
<img :src="file?.imgUrl" class="upload_img" />
|
||||||
|
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
||||||
|
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i class="fi fi-br-upload" style="margin-left: 2rem;" v-show="sketchboardList.length == 0" :title="$t('Generate.uploadproduct')">
|
||||||
|
<a-upload
|
||||||
|
class="search_upImg"
|
||||||
|
:capture="null"
|
||||||
|
:action="uploadUrl + '/api/element/upload'"
|
||||||
|
list-type="picture-card"
|
||||||
|
:data="{
|
||||||
|
...upload,
|
||||||
|
}"
|
||||||
|
:maxCount='1'
|
||||||
|
:headers="{ Authorization: token }"
|
||||||
|
v-model:file-list="sketchboardList"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
|
@change="(file) => fileUploadChange(file)"
|
||||||
|
>
|
||||||
|
</a-upload>
|
||||||
|
</i>
|
||||||
|
<div :title="$t('Generate.style')">
|
||||||
|
<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<textarea
|
<textarea
|
||||||
v-show="isTextarea"
|
v-show="isTextarea"
|
||||||
class="search_textarea "
|
class="search_textarea "
|
||||||
@@ -86,10 +126,8 @@
|
|||||||
@click.stop=""
|
@click.stop=""
|
||||||
v-model="searchPictureName"
|
v-model="searchPictureName"
|
||||||
></textarea>
|
></textarea>
|
||||||
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
|
|
||||||
<div v-show="!isGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
|
<div v-show="!isGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
|
||||||
{{ $t('Generate.Generate') }}
|
{{ $t('Generate.Generate') }}
|
||||||
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
|
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
|
||||||
<i class="fi fi-br-loading"></i>
|
<i class="fi fi-br-loading"></i>
|
||||||
@@ -108,38 +146,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
|
<div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard',showEvents : driver__.driver}" :style="[isGenerate?'overflow:hidden':'']">
|
||||||
<div class="upload_item">
|
|
||||||
<div
|
|
||||||
class="upload_file_item Guide_1_2_7"
|
|
||||||
v-for="(file, index) in sketchboardList"
|
|
||||||
:key="file"
|
|
||||||
@click.stop="setSketchboardItem(file)"
|
|
||||||
:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload_file_item_content"
|
|
||||||
v-show="file?.status === 'uploading'"
|
|
||||||
>
|
|
||||||
<a-spin :indicator="indicator" tip="Uploading..." />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload_file_item_content"
|
|
||||||
v-show="file?.status === 'done'"
|
|
||||||
>
|
|
||||||
<img :src="file?.imgUrl" class="upload_img" />
|
|
||||||
<div
|
|
||||||
class="delete_file_block"
|
|
||||||
:class="[driver__.driver?'hideEvents':'']"
|
|
||||||
@click.stop="deleteFile(index)"
|
|
||||||
>
|
|
||||||
<span class="icon iconfont icon-shanchu"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard'}" :style="[isGenerate?'overflow:hidden':'']">
|
|
||||||
<div
|
<div
|
||||||
class="generage_img_item"
|
class="generage_img_item"
|
||||||
v-for="(item, index) in fileList"
|
v-for="(item, index) in fileList"
|
||||||
@@ -163,8 +170,11 @@
|
|||||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<scaleImage ref="scaleImage"></scaleImage>
|
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
|
||||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -196,26 +206,11 @@ export default defineComponent({
|
|||||||
setup(props) {
|
setup(props) {
|
||||||
// console.log(prop.msg);
|
// console.log(prop.msg);
|
||||||
|
|
||||||
let printModelList = ref([
|
let printModelList:any = ref([])
|
||||||
{
|
let sketchStyleList:any = ref([])
|
||||||
num:'',
|
let printModel:any = ref({
|
||||||
optype:false,
|
|
||||||
value:'Painting Style',
|
|
||||||
label:useI18n().t('Generate.Model1')
|
|
||||||
},{
|
|
||||||
num:'',
|
|
||||||
optype:false,
|
|
||||||
value:'Illustration Style',
|
|
||||||
label:useI18n().t('Generate.Model2')
|
|
||||||
},{
|
|
||||||
num:'',
|
|
||||||
optype:false,
|
|
||||||
value:'Real Style',
|
|
||||||
label:useI18n().t('Generate.Model3')
|
|
||||||
},
|
|
||||||
])
|
|
||||||
let printModel = ref({
|
|
||||||
num:'',
|
num:'',
|
||||||
|
id:'',
|
||||||
optype:false,
|
optype:false,
|
||||||
value:'Painting Style',
|
value:'Painting Style',
|
||||||
label:useI18n().t('Generate.Model1')
|
label:useI18n().t('Generate.Model1')
|
||||||
@@ -240,12 +235,13 @@ export default defineComponent({
|
|||||||
let isTest = ref()
|
let isTest = ref()
|
||||||
let userInfo:any = {}
|
let userInfo:any = {}
|
||||||
let generateTime:any = ref()
|
let generateTime:any = ref()
|
||||||
let generateProceedList = ref([])
|
let generateProceedList:any = ref([])
|
||||||
let remGenerate:any = ref(false)
|
let remGenerate:any = ref(false)
|
||||||
let remGenerateTime:any = ref()
|
let remGenerateTime:any = ref()
|
||||||
let styleRecommend:any = inject('styleRecommend')
|
let styleRecommend:any = inject('styleRecommend')
|
||||||
let generateLevel2Type = ''
|
let generateLevel2Type = ''
|
||||||
let isSloganHint:any = ref(' ')
|
let isSloganHint:any = ref(' ')
|
||||||
|
let loadingShow =ref(false)
|
||||||
return {
|
return {
|
||||||
searchPictureName,
|
searchPictureName,
|
||||||
searchPictureSeed,
|
searchPictureSeed,
|
||||||
@@ -255,6 +251,7 @@ export default defineComponent({
|
|||||||
level2Type,
|
level2Type,
|
||||||
printModel,
|
printModel,
|
||||||
printModelList,
|
printModelList,
|
||||||
|
sketchStyleList,
|
||||||
isGenerate,
|
isGenerate,
|
||||||
|
|
||||||
// printBoards,
|
// printBoards,
|
||||||
@@ -274,6 +271,7 @@ export default defineComponent({
|
|||||||
styleRecommend,
|
styleRecommend,
|
||||||
generateLevel2Type,
|
generateLevel2Type,
|
||||||
isSloganHint,
|
isSloganHint,
|
||||||
|
loadingShow,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data(prop) {
|
data(prop) {
|
||||||
@@ -319,6 +317,38 @@ export default defineComponent({
|
|||||||
this.workspaceCom = computed(()=>{
|
this.workspaceCom = computed(()=>{
|
||||||
return this.store?.state?.Workspace?.workspace
|
return this.store?.state?.Workspace?.workspace
|
||||||
})
|
})
|
||||||
|
// if()
|
||||||
|
if(this.type_.type2 == 'Printboard'){
|
||||||
|
this.printModelList = [
|
||||||
|
{
|
||||||
|
num:'',
|
||||||
|
optype:false,
|
||||||
|
value:'Painting Style',
|
||||||
|
label:useI18n().t('Generate.Model1')
|
||||||
|
},{
|
||||||
|
num:'',
|
||||||
|
optype:false,
|
||||||
|
value:'Illustration Style',
|
||||||
|
label:useI18n().t('Generate.Model2')
|
||||||
|
},{
|
||||||
|
num:'',
|
||||||
|
optype:false,
|
||||||
|
value:'Real Style',
|
||||||
|
label:useI18n().t('Generate.Model3')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}else if(this.type_.type2 == 'Sketchboard'){
|
||||||
|
this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
|
||||||
|
let imgList = ['/image/sketch/sketch-fine.jpg','/image/sketch/sketch-medium.jpg','/image/sketch/sketch-thick.jpg']
|
||||||
|
this.printModelList.forEach((item:any,index:number)=>{
|
||||||
|
item.img = imgList[index]
|
||||||
|
})
|
||||||
|
if(this.printModelList[3])this.printModelList[3].img = -1
|
||||||
|
|
||||||
|
}
|
||||||
|
this.printModel = this.printModelList[0]
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
driver__:{
|
driver__:{
|
||||||
@@ -377,6 +407,7 @@ export default defineComponent({
|
|||||||
methods: {
|
methods: {
|
||||||
generageAdd(data: any) {
|
generageAdd(data: any) {
|
||||||
data.type_ = this.type_;
|
data.type_ = this.type_;
|
||||||
|
data.type_.type1 = data.designType?data.designType:this.type_.type1
|
||||||
data.resData = JSON.parse(JSON.stringify(data))
|
data.resData = JSON.parse(JSON.stringify(data))
|
||||||
let maxImg = 8
|
let maxImg = 8
|
||||||
if(this.type_.type2 == 'Sketchboard'){
|
if(this.type_.type2 == 'Sketchboard'){
|
||||||
@@ -410,7 +441,41 @@ export default defineComponent({
|
|||||||
setprintModel(value:any){
|
setprintModel(value:any){
|
||||||
this.printModel = value
|
this.printModel = value
|
||||||
},
|
},
|
||||||
|
imageToSketch(){
|
||||||
|
if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
|
||||||
|
this.loadingShow = true
|
||||||
|
let data = {
|
||||||
|
"elementId": this.sketchboardList[0].id,
|
||||||
|
gender:this.workspace.sexEnum.value,
|
||||||
|
"style": this.printModel.value,
|
||||||
|
"styleImageId": this.printModel?.id?this.printModel?.id:''
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
|
||||||
|
if(rv){
|
||||||
|
this.sketchCatecoryList.forEach((itemCategory:any) => {
|
||||||
|
if(itemCategory.value == rv.category){
|
||||||
|
rv.categoryValue = itemCategory?.value
|
||||||
|
rv.category = itemCategory?.name
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.fileList.push({
|
||||||
|
imgUrl:rv.url,
|
||||||
|
categoryValue:rv.categoryValue,
|
||||||
|
category:rv.category,
|
||||||
|
id:rv.id,
|
||||||
|
status:'Success',
|
||||||
|
})
|
||||||
|
this.loadingShow = false
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
this.loadingShow = false
|
||||||
|
})
|
||||||
|
},
|
||||||
getgenerate(){
|
getgenerate(){
|
||||||
|
if(this.scene?.value == 'extract'){
|
||||||
|
this.imageToSketch()
|
||||||
|
return
|
||||||
|
}
|
||||||
this.isTextarea = false
|
this.isTextarea = false
|
||||||
this.isInputFocus = false
|
this.isInputFocus = false
|
||||||
if(this.isGenerate)return
|
if(this.isGenerate)return
|
||||||
@@ -789,7 +854,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less" scoped>
|
||||||
.generate {
|
.generate {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
// height: 30rem;
|
// height: 30rem;
|
||||||
@@ -844,7 +909,6 @@ export default defineComponent({
|
|||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
img {
|
img {
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
.delete_like_file_block{
|
.delete_like_file_block{
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
@@ -856,6 +920,7 @@ export default defineComponent({
|
|||||||
img {
|
img {
|
||||||
width: calc(10rem*1.2);
|
width: calc(10rem*1.2);
|
||||||
height: calc(10rem*1.2);
|
height: calc(10rem*1.2);
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
&:hover .delete_like_file_block{
|
&:hover .delete_like_file_block{
|
||||||
// display: block;
|
// display: block;
|
||||||
|
|||||||
@@ -263,7 +263,7 @@ export default defineComponent({
|
|||||||
this.accountIsLogin(this.userInfo);
|
this.accountIsLogin(this.userInfo);
|
||||||
}
|
}
|
||||||
this.isHaveBindEmail = this.userInfo?.email ? true : false;
|
this.isHaveBindEmail = this.userInfo?.email ? true : false;
|
||||||
if(!isMurmur){
|
if(!this.isMurmur){
|
||||||
this.operateClick();
|
this.operateClick();
|
||||||
document.addEventListener("click", this.operateClick);
|
document.addEventListener("click", this.operateClick);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -266,7 +266,7 @@ export default defineComponent({
|
|||||||
modelImg:{
|
modelImg:{
|
||||||
mounted(el) {
|
mounted(el) {
|
||||||
let parentNode = el.parentNode
|
let parentNode = el.parentNode
|
||||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||||
el.style.height = 100+'%'
|
el.style.height = 100+'%'
|
||||||
el.style.width = 'auto'
|
el.style.width = 'auto'
|
||||||
}else{
|
}else{
|
||||||
@@ -276,7 +276,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
updated (el) {
|
updated (el) {
|
||||||
let parentNode = el.parentNode
|
let parentNode = el.parentNode
|
||||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||||
el.style.height = 100+'%'
|
el.style.height = 100+'%'
|
||||||
el.style.width = 'auto'
|
el.style.width = 'auto'
|
||||||
}else{
|
}else{
|
||||||
@@ -406,6 +406,12 @@ export default defineComponent({
|
|||||||
this.store.state.UploadFilesModule.allBoardData
|
this.store.state.UploadFilesModule.allBoardData
|
||||||
.disposeMoodboard
|
.disposeMoodboard
|
||||||
)
|
)
|
||||||
|
);
|
||||||
|
let moodboardPosition = JSON.parse(
|
||||||
|
JSON.stringify(
|
||||||
|
this.store.state.UploadFilesModule.allBoardData
|
||||||
|
.moodboardPosition
|
||||||
|
)
|
||||||
);
|
);
|
||||||
let setboard = {
|
let setboard = {
|
||||||
generate:[] as any,
|
generate:[] as any,
|
||||||
@@ -425,18 +431,27 @@ export default defineComponent({
|
|||||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
||||||
|
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
|
||||||
this.fileList = setboard.moodboard
|
this.fileList = setboard.moodboard
|
||||||
},
|
},
|
||||||
|
|
||||||
async changeTemplateModal() {
|
async changeTemplateModal() {
|
||||||
if(this.modalImg[0]?.id){
|
if(this.modalImg[0]?.id){
|
||||||
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
|
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
|
||||||
// layout.init('moodboard')
|
let layout:any = this.$refs.layout
|
||||||
if(this.layoutList.length <= 0){
|
if(this.layoutList.length <= 0){
|
||||||
await this.layout()
|
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||||
|
if(!styleObj.domStyle)await this.layout()
|
||||||
|
//
|
||||||
|
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||||
|
this.layoutList = arr
|
||||||
}
|
}
|
||||||
// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
if(window.screen.width<1300){
|
||||||
// this.layoutList = arr
|
layout.isMobile = true
|
||||||
|
}else{
|
||||||
|
layout.isMobile = false
|
||||||
|
}
|
||||||
|
|
||||||
layout.init()
|
layout.init()
|
||||||
}else{
|
}else{
|
||||||
message.info(this.t('MoodboardUpload.jsContent5'))
|
message.info(this.t('MoodboardUpload.jsContent5'))
|
||||||
@@ -445,65 +460,81 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
async layout(){
|
async layout(){
|
||||||
if(this.loadingShow)return
|
if(this.loadingShow)return
|
||||||
this.loadingShow = true
|
await new Promise((resolve, reject) => {
|
||||||
this.store.commit("setDisposeMoodboard", []);
|
this.loadingShow = true
|
||||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
this.store.commit("setDisposeMoodboard", []);
|
||||||
this.layoutList = arr
|
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
this.layoutList = arr
|
||||||
let moodb = this.moodb_[arr.length-1][random]
|
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
let moodb = this.moodb_[arr.length-1][random]
|
||||||
this.flex_direction = true
|
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||||
}else{
|
this.flex_direction = true
|
||||||
this.flex_direction = false
|
}else{
|
||||||
}
|
this.flex_direction = false
|
||||||
if(this.moodb_[arr.length-1].length != 1){
|
|
||||||
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
|
||||||
this.loadingShow = false
|
|
||||||
this.layout()
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
}
|
if(this.moodb_[arr.length-1].length != 1){
|
||||||
this.edieShow = true
|
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
||||||
if(this.moodb_[arr.length-1].length == 2){
|
|
||||||
this.moodb_className = this.moodb_[arr.length-1][0]
|
|
||||||
}else{
|
|
||||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
|
||||||
}
|
|
||||||
|
|
||||||
this.layoutOpen = true
|
|
||||||
//提交模板
|
|
||||||
// this.loadingShow = true
|
|
||||||
this.layoutList.forEach((v:any)=>{
|
|
||||||
v.setPitch = false
|
|
||||||
})
|
|
||||||
nextTick().then(()=>{
|
|
||||||
let layoutCentent = document.getElementById('modal_img')
|
|
||||||
domTurnImg(layoutCentent).then((rv)=>{
|
|
||||||
let file = rv
|
|
||||||
let param = new FormData();
|
|
||||||
param.append('inPin','0')
|
|
||||||
param.append('level1Type','Moodboard')
|
|
||||||
param.append('gender','')
|
|
||||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
|
||||||
param.append('file',file);
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
|
||||||
.then((rv: any) => {
|
|
||||||
let img:any = rv
|
|
||||||
img.imgUrl = rv.url
|
|
||||||
img.resData = JSON.parse(JSON.stringify(img))
|
|
||||||
this.store.commit("setDisposeMoodboard", img);
|
|
||||||
this.loadingShow = false
|
|
||||||
}
|
|
||||||
).catch(rv=>{
|
|
||||||
this.loadingShow = false
|
this.loadingShow = false
|
||||||
})
|
this.layout()
|
||||||
if(this.driver__.driver){
|
return resolve('')
|
||||||
driverObj__.moveNext()
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
this.edieShow = true
|
||||||
|
if(this.moodb_[arr.length-1].length == 2){
|
||||||
|
this.moodb_className = this.moodb_[arr.length-1][0]
|
||||||
|
}else{
|
||||||
|
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||||
|
}
|
||||||
|
this.layoutOpen = true
|
||||||
|
//提交模板
|
||||||
|
// this.loadingShow = true
|
||||||
|
this.layoutList.forEach((v:any)=>{
|
||||||
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
|
nextTick().then(()=>{
|
||||||
|
let layoutCentent = document.getElementById('modal_img')
|
||||||
|
let obj = {
|
||||||
|
imgStyle:[],
|
||||||
|
domStyle:[],
|
||||||
|
borStyle:[],
|
||||||
|
rototeStyle:[],
|
||||||
|
translateStyle:[],
|
||||||
|
angleTRStyle:[],
|
||||||
|
angleTLStyle:[],
|
||||||
|
angleBRStyle:[],
|
||||||
|
angleBLStyle:[],
|
||||||
|
class:this.moodb_className,
|
||||||
|
}
|
||||||
|
this.store.commit("setDisposeMoodboardPosition", obj);
|
||||||
|
domTurnImg(layoutCentent).then((rv)=>{
|
||||||
|
let file = rv
|
||||||
|
let param = new FormData();
|
||||||
|
param.append('inPin','0')
|
||||||
|
param.append('level1Type','Moodboard')
|
||||||
|
param.append('gender','')
|
||||||
|
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||||
|
param.append('file',file);
|
||||||
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||||
|
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
||||||
|
.then((rv: any) => {
|
||||||
|
let img:any = rv
|
||||||
|
img.imgUrl = rv.url
|
||||||
|
img.resData = JSON.parse(JSON.stringify(img))
|
||||||
|
this.store.commit("setDisposeMoodboard", img);
|
||||||
|
this.loadingShow = false
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
).catch(rv=>{
|
||||||
|
this.loadingShow = false
|
||||||
|
})
|
||||||
|
if(this.driver__.driver){
|
||||||
|
driverObj__.moveNext()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
setmoodbClass(val:any){
|
setmoodbClass(val:any){
|
||||||
this.moodb_className = val
|
this.moodb_className = val
|
||||||
@@ -521,6 +552,8 @@ export default defineComponent({
|
|||||||
width: 47%;
|
width: 47%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 50%;
|
||||||
// width: 50rem*1.2);
|
// width: 50rem*1.2);
|
||||||
.switch_type_list {
|
.switch_type_list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -611,6 +644,7 @@ export default defineComponent({
|
|||||||
margin-left: calc(3rem*1.2);
|
margin-left: calc(3rem*1.2);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
.modal_layout,.modal_accomplish{
|
.modal_layout,.modal_accomplish{
|
||||||
.modal_text{
|
.modal_text{
|
||||||
font-size:var(--aida-fsize1-4);
|
font-size:var(--aida-fsize1-4);
|
||||||
|
|||||||
@@ -1,190 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 生成collention缩略图用的 -->
|
|
||||||
<div class="export_new_collection_review">
|
|
||||||
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
|
||||||
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
|
||||||
</div>
|
|
||||||
<div class="img_block_item" v-else>
|
|
||||||
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content cover_img" :src="mood.imgUrl" >
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="img_block_item">
|
|
||||||
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content cover_img" :src="print.imgUrl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small_img_item" v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content cover_img" :src="generate.imgUrl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="img_block_item">
|
|
||||||
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
|
||||||
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
|
|
||||||
<div class="color_content_body">
|
|
||||||
<div class="color_des">{{color.tcx}}</div>
|
|
||||||
<div class="color_des">{{color.name}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="img_block_item">
|
|
||||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content" :src="skecth.imgUrl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="img_block_item">
|
|
||||||
<div class="lager_img_item" v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content" :src="marketing.imgUrl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="img_block_item">
|
|
||||||
<div class="lager_img_item" v-for="(design) in allBoardData.likeDesignCollectionList" :key="design.designItemUrl">
|
|
||||||
<div class="all_img_item_block">
|
|
||||||
<img class="all_img_content" :src="design.designItemUrl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, ref } from 'vue'
|
|
||||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
export default defineComponent({
|
|
||||||
// props: {
|
|
||||||
// allBoardData: {
|
|
||||||
// // default: false,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
components:{MoodTemplate},
|
|
||||||
setup() {
|
|
||||||
|
|
||||||
const allBoardData = ref({});
|
|
||||||
// let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
|
|
||||||
// let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
|
|
||||||
return {
|
|
||||||
allBoardData,
|
|
||||||
// likeDesignCollectionList,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
init(data:any){
|
|
||||||
this.allBoardData = data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.export_new_collection_review{
|
|
||||||
width: 40.8rem;
|
|
||||||
background: #fff;
|
|
||||||
position: fixed;
|
|
||||||
left: -100rem;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
|
|
||||||
.img_block_item{
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
// &.color_block_item{
|
|
||||||
// padding: 0 0.5rem 0 0.3rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.lager_img_item{
|
|
||||||
display: inline-block;
|
|
||||||
width: 20.4rem;
|
|
||||||
height: 20.4rem;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketch_img_item{
|
|
||||||
display: inline-block;
|
|
||||||
width: 20.4rem;
|
|
||||||
height: 42.2rem;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small_img_item{
|
|
||||||
width: 6.8rem;
|
|
||||||
height: 6.8rem;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.color_item{
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
// padding: 0 0.5rem;
|
|
||||||
margin-right: 1.6rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
|
|
||||||
&:nth-child(4n){
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color_content{
|
|
||||||
width: 9rem;
|
|
||||||
height:6.2rem
|
|
||||||
}
|
|
||||||
.color_content_body{
|
|
||||||
width: 9rem;
|
|
||||||
padding: 0.7rem 0.2rem;
|
|
||||||
background: #FEFEFE;
|
|
||||||
border: 1px solid #E6E6E6;
|
|
||||||
|
|
||||||
.color_des{
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
line-height: 1.3rem;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&:last-child{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.all_img_item_block{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.all_img_content{
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
&.cover_img{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||||
<div @click.stop="openPrintModel">{{ scene.name }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
<div @click.stop="openPrintModel"><span>{{ scene.name }}</span> <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
||||||
<ul v-show="openMenu">
|
<ul v-show="openMenu">
|
||||||
<li
|
<li
|
||||||
v-for="item,index in printCatecoryList"
|
v-for="item,index in printCatecoryList"
|
||||||
@@ -203,18 +203,6 @@ export default defineComponent({
|
|||||||
designType:''
|
designType:''
|
||||||
})
|
})
|
||||||
let workspace:any = ref({})
|
let workspace:any = ref({})
|
||||||
let sceneList = ref([
|
|
||||||
{
|
|
||||||
name:'Pattern',
|
|
||||||
value:'Pattern'
|
|
||||||
},{
|
|
||||||
name:'Slogan',
|
|
||||||
value:'Slogan'
|
|
||||||
},{
|
|
||||||
name:'Logo',
|
|
||||||
value:'Logo'
|
|
||||||
},
|
|
||||||
])
|
|
||||||
let scene = ref({
|
let scene = ref({
|
||||||
name:'Pattern',
|
name:'Pattern',
|
||||||
value:'Pattern'
|
value:'Pattern'
|
||||||
@@ -234,7 +222,6 @@ export default defineComponent({
|
|||||||
userInfo,
|
userInfo,
|
||||||
useGenerate,
|
useGenerate,
|
||||||
workspace,
|
workspace,
|
||||||
sceneList,
|
|
||||||
scene,
|
scene,
|
||||||
openMenu,
|
openMenu,
|
||||||
printCatecoryList,
|
printCatecoryList,
|
||||||
@@ -700,6 +687,8 @@ export default defineComponent({
|
|||||||
.printMenu{
|
.printMenu{
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 2rem;
|
||||||
>div{
|
>div{
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
font-size: var(--aida-fsize1-6);
|
font-size: var(--aida-fsize1-6);
|
||||||
@@ -707,6 +696,8 @@ export default defineComponent({
|
|||||||
i{
|
i{
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
.forbidden{
|
.forbidden{
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
@@ -929,6 +920,9 @@ export default defineComponent({
|
|||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
&.modal_imgItem:nth-child(even) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
img{
|
img{
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -23,6 +23,20 @@
|
|||||||
>
|
>
|
||||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||||
|
<div @click.stop="openPrintModel"> <span>{{ scene.name }}</span>
|
||||||
|
<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
||||||
|
<ul v-show="openMenu">
|
||||||
|
<li
|
||||||
|
v-for="item,index in sketchStyleList"
|
||||||
|
class="printModel_item"
|
||||||
|
@click.stop="setSceneList(item)"
|
||||||
|
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
|
||||||
|
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
|
||||||
|
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
|
||||||
|
>{{ item.name }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 1" class="sketchboard_body">
|
<div v-show="openClick == 1" class="sketchboard_body">
|
||||||
<div class="upload_img_body scroll_style">
|
<div class="upload_img_body scroll_style">
|
||||||
@@ -113,6 +127,7 @@
|
|||||||
v-show="openClick == 3"
|
v-show="openClick == 3"
|
||||||
ref="Generate"
|
ref="Generate"
|
||||||
msg="Sketchboard"
|
msg="Sketchboard"
|
||||||
|
:scene="scene"
|
||||||
:sketchCatecoryList="sketchCatecoryList"
|
:sketchCatecoryList="sketchCatecoryList"
|
||||||
></Generate>
|
></Generate>
|
||||||
</div>
|
</div>
|
||||||
@@ -214,6 +229,15 @@ export default defineComponent({
|
|||||||
level2Type:'',
|
level2Type:'',
|
||||||
designType:'',
|
designType:'',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let openMenu = ref(false)
|
||||||
|
let sketchStyleList:any = computed(()=>{
|
||||||
|
return store.state.UserHabit.SketchGenerateType
|
||||||
|
})
|
||||||
|
let scene = ref({
|
||||||
|
name: t('SketchboardUpload.GenerateSketch'),
|
||||||
|
value:'generate'
|
||||||
|
})
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
openClick,
|
openClick,
|
||||||
@@ -227,6 +251,9 @@ export default defineComponent({
|
|||||||
isTest,
|
isTest,
|
||||||
userInfo,
|
userInfo,
|
||||||
useGenerate,
|
useGenerate,
|
||||||
|
scene,
|
||||||
|
openMenu,
|
||||||
|
sketchStyleList,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -549,6 +576,23 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
this.store.commit("setSketchboardFile", this.fileList);
|
this.store.commit("setSketchboardFile", this.fileList);
|
||||||
},
|
},
|
||||||
|
setSceneList(data:any){
|
||||||
|
if(this.scene.value === data.value) return
|
||||||
|
this.scene = data
|
||||||
|
let generate:any = this.$refs.Generate
|
||||||
|
generate.sketchboardList = []
|
||||||
|
generate.searchPictureName = ''
|
||||||
|
this.openMenu = false
|
||||||
|
},
|
||||||
|
openPrintModel(){
|
||||||
|
if(this.openMenu)return
|
||||||
|
document.addEventListener('click',this.removePrintModel)
|
||||||
|
this.openMenu = true
|
||||||
|
},
|
||||||
|
removePrintModel(){
|
||||||
|
this.openMenu = false
|
||||||
|
document.removeEventListener('click',this.removePrintModel)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -610,6 +654,30 @@ export default defineComponent({
|
|||||||
margin-right: calc(0.8rem*1.2);
|
margin-right: calc(0.8rem*1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.printMenu{
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 2rem;
|
||||||
|
margin-top: auto;
|
||||||
|
position: relative;
|
||||||
|
>div{
|
||||||
|
width: 14rem;
|
||||||
|
font-size: var(--aida-fsize1-6);
|
||||||
|
border: 0;
|
||||||
|
i{
|
||||||
|
transition: all .3s;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.forbidden{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
width: 14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.switch_type_item:nth-child(3){
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.sketchboard_body {
|
.sketchboard_body {
|
||||||
// height: calc(100% - 5rem*1.2));
|
// height: calc(100% - 5rem*1.2));
|
||||||
@@ -822,6 +890,9 @@ export default defineComponent({
|
|||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
&.modal_imgItem:nth-child(even) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
&:hover .delete_like_file_block{
|
&:hover .delete_like_file_block{
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
|
|||||||
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
|
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
|
||||||
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
|
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
@@ -83,7 +84,13 @@ export default defineComponent({
|
|||||||
SketchboardUpload,
|
SketchboardUpload,
|
||||||
MarketingSketchUpload
|
MarketingSketchUpload
|
||||||
},
|
},
|
||||||
setup(){
|
props:{
|
||||||
|
getDesignData: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props){
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
let driver__:any = computed(()=>{
|
let driver__:any = computed(()=>{
|
||||||
@@ -285,9 +292,46 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
return bor
|
return bor
|
||||||
},
|
},
|
||||||
|
getPantongName() {
|
||||||
|
let colorBoards = this.store.state.UploadFilesModule.colorBoards;
|
||||||
|
let data: any = [];
|
||||||
|
for (let v of colorBoards) {
|
||||||
|
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
||||||
|
let hsv = rgbToHsv(color);
|
||||||
|
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
||||||
|
data.push({
|
||||||
|
h: hsv[0],
|
||||||
|
s: hsv[1],
|
||||||
|
v: hsv[2],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve: any, reject: any) => {
|
||||||
|
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
||||||
|
.then((rv: any) => {
|
||||||
|
if (rv) {
|
||||||
|
rv.forEach((ele: any, index: number) => {
|
||||||
|
colorBoards[index].id = ele.id;
|
||||||
|
colorBoards[index].tcx = ele.tcx;
|
||||||
|
colorBoards[index].name = ele.name;
|
||||||
|
});
|
||||||
|
this.store.commit("setColorboardList", colorBoards);
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((res) => {
|
||||||
|
reject();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
//完成
|
//完成
|
||||||
async finishCollection(){
|
async finishCollection(){
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
|
this.store.commit('clearAllId')
|
||||||
|
this.$emit('finishCollection')
|
||||||
|
await this.getPantongName()
|
||||||
|
this.store.commit("setAllBoardData");
|
||||||
|
|
||||||
let sketchList = this.store.state.UploadFilesModule.sketchboard
|
let sketchList = this.store.state.UploadFilesModule.sketchboard
|
||||||
let arr:any = []
|
let arr:any = []
|
||||||
sketchList.forEach((item:any) => {
|
sketchList.forEach((item:any) => {
|
||||||
@@ -299,12 +343,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
arr.push(obj)
|
arr.push(obj)
|
||||||
});
|
});
|
||||||
let data = {sketchBoards:arr}
|
// let data = {sketchBoards:arr}
|
||||||
|
let data = this.getDesignData(-1)
|
||||||
|
data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
|
||||||
|
data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
|
||||||
if(!await this.isPinOpen(sketchList)){
|
if(!await this.isPinOpen(sketchList)){
|
||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let elList = document.querySelectorAll('.img_block_item_sketch img')
|
let elList = document.querySelectorAll('.img_block_item_sketch img')
|
||||||
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
|
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
@@ -314,7 +360,6 @@ export default defineComponent({
|
|||||||
GO.id = 0
|
GO.id = 0
|
||||||
this.showCollectionModal =false
|
this.showCollectionModal =false
|
||||||
this.collectionStep = 1
|
this.collectionStep = 1
|
||||||
this.$emit('finishCollection')
|
|
||||||
if(this.driver__.driver){
|
if(this.driver__.driver){
|
||||||
driverObj__.moveNext()
|
driverObj__.moveNext()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
:closable="false"
|
:closable="false"
|
||||||
wrapClassName="#app"
|
wrapClassName="#app"
|
||||||
:keyboard="false"
|
:keyboard="false"
|
||||||
|
:destroyOnClose="true"
|
||||||
>
|
>
|
||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
@@ -18,13 +19,13 @@
|
|||||||
|
|
||||||
<div class="clearSlogan_center">
|
<div class="clearSlogan_center">
|
||||||
<div class="modal_title_text">
|
<div class="modal_title_text">
|
||||||
<div>Create Slogan</div>
|
<div>{{ $t('createSlogan.title') }}</div>
|
||||||
<div class="modal_title_text_intro"></div>
|
<div class="modal_title_text_intro"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_center">
|
<div class="exportCanvasBox_center">
|
||||||
<div v-show="textBtnShow" class="clearSlogan_center_item clearSlogan_center_btn_move">
|
<div v-show="textBtnShow" class="clearSlogan_center_item clearSlogan_center_btn_move">
|
||||||
<div class="clearSlogan_center_btn_item">
|
<div class="clearSlogan_center_btn_item">
|
||||||
<div>Color</div>
|
<div>{{ $t('createSlogan.Color') }}</div>
|
||||||
<input type="color" v-model="fill">
|
<input type="color" v-model="fill">
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="clearSlogan_center_btn_item">
|
<!-- <div class="clearSlogan_center_btn_item">
|
||||||
@@ -32,7 +33,7 @@
|
|||||||
<input type="Number" v-model="fontSize">
|
<input type="Number" v-model="fontSize">
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="clearSlogan_center_btn_item">
|
<div class="clearSlogan_center_btn_item">
|
||||||
<div>Font Align</div>
|
<div>{{ $t('createSlogan.FontAlign') }}</div>
|
||||||
<ul>
|
<ul>
|
||||||
<i class="fi fi-br-align-left" @click="setTextData('textAlign','left')" :class="{active:textAlign === 'left'}"></i>
|
<i class="fi fi-br-align-left" @click="setTextData('textAlign','left')" :class="{active:textAlign === 'left'}"></i>
|
||||||
<i class="fi fi-br-align-center" @click="setTextData('textAlign','center')" :class="{active:textAlign === 'center'}"></i>
|
<i class="fi fi-br-align-center" @click="setTextData('textAlign','center')" :class="{active:textAlign === 'center'}"></i>
|
||||||
@@ -40,7 +41,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearSlogan_center_btn_item">
|
<div class="clearSlogan_center_btn_item">
|
||||||
<div>Font Style</div>
|
<div>{{ $t('createSlogan.FontStyle') }}</div>
|
||||||
<ul>
|
<ul>
|
||||||
<i class="fi fi-br-border-top" @click="setTextData('overline','')" :class="{active:overline}"></i>
|
<i class="fi fi-br-border-top" @click="setTextData('overline','')" :class="{active:overline}"></i>
|
||||||
<i class="fi fi-br-border-center-h" @click="setTextData('linethrough','')" :class="{active:linethrough}"></i>
|
<i class="fi fi-br-border-center-h" @click="setTextData('linethrough','')" :class="{active:linethrough}"></i>
|
||||||
@@ -49,7 +50,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clearSlogan_center_btn_item">
|
<div class="clearSlogan_center_btn_item">
|
||||||
<div>Font Family</div>
|
<div>{{ $t('createSlogan.FontFamily') }}</div>
|
||||||
<select v-model="fontFamily" :style="{'font-family':fontFamily}">
|
<select v-model="fontFamily" :style="{'font-family':fontFamily}">
|
||||||
<option v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">{{item.name}}</option>
|
<option v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">{{item.name}}</option>
|
||||||
</select>
|
</select>
|
||||||
@@ -57,16 +58,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="clearSlogan_center_btn clearSlogan_center_item">
|
<div class="clearSlogan_center_btn clearSlogan_center_item">
|
||||||
<div @click="setTextFun('')" class="clearSlogan_center_btn_item">
|
<div @click="setTextFun('')" class="clearSlogan_center_btn_item">
|
||||||
<div>新增</div>
|
<div>{{ $t('createSlogan.add') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div @click="removeTextFun()" class="clearSlogan_center_btn_item">
|
<div @click="removeTextFun()" class="clearSlogan_center_btn_item">
|
||||||
<div>删除</div>
|
<div>{{ $t('createSlogan.delete') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_submit" @click="setSubmit">
|
<div class="exportCanvasBox_submit" @click="setSubmit">
|
||||||
<div class="started_btn">
|
<div class="started_btn">
|
||||||
submit
|
{{ $t('createSlogan.submit') }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,67 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="generalMenu_printModel">
|
<div class="generalMenu_printModel">
|
||||||
<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
|
<div @click.stop="openPrintModel" :class="driverClass.class1">
|
||||||
|
<a-popover v-if="isCanvas">
|
||||||
|
<template #content>
|
||||||
|
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
||||||
|
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
||||||
|
</template>
|
||||||
|
<span v-if="item?.label">{{ item?.label }}</span>
|
||||||
|
<span v-else>{{ item.name }}</span>
|
||||||
|
</a-popover>
|
||||||
|
<div v-else>
|
||||||
|
<span v-if="item?.label">{{ item?.label }}</span>
|
||||||
|
<span v-else>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<ul :class="driverClass.class2" v-show="openClick">
|
<ul :class="driverClass.class2" v-show="openClick">
|
||||||
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
|
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
|
||||||
|
<a-popover placement="right" v-if="isCanvas">
|
||||||
|
<template #content>
|
||||||
|
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
|
||||||
|
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
||||||
|
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
|
||||||
|
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
|
||||||
|
<a-upload
|
||||||
|
style="height: 100%;"
|
||||||
|
class="search_upImg"
|
||||||
|
:capture="null"
|
||||||
|
:action="uploadUrl + '/api/element/upload'"
|
||||||
|
list-type="picture-card"
|
||||||
|
:data="{
|
||||||
|
...upload,
|
||||||
|
}"
|
||||||
|
:maxCount='1'
|
||||||
|
:headers="{ Authorization: token }"
|
||||||
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
|
@change="(file) => fileUploadChange(file)"
|
||||||
|
>
|
||||||
|
</a-upload>
|
||||||
|
</i>
|
||||||
|
</div> -->
|
||||||
|
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<span v-if="item?.label">{{ item?.label }}</span>
|
||||||
|
<span v-else>{{ item.name }}</span>
|
||||||
|
</a-popover>
|
||||||
|
<div v-else>
|
||||||
|
<span v-if="item?.label">{{ item?.label }}</span>
|
||||||
|
<span v-else>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,ref ,nextTick} from "vue";
|
import { defineComponent,ref ,nextTick} from "vue";
|
||||||
import { Https } from "@/tool/https";
|
import { useStore } from "vuex";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
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({
|
export default defineComponent({
|
||||||
name:'filterComponent',
|
name:'filterComponent',
|
||||||
props:{
|
props:{
|
||||||
@@ -24,6 +75,10 @@
|
|||||||
type:Boolean,
|
type:Boolean,
|
||||||
default:false,
|
default:false,
|
||||||
},
|
},
|
||||||
|
isCanvas:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false,
|
||||||
|
},
|
||||||
deleteItem:{
|
deleteItem:{
|
||||||
type:Number,
|
type:Number,
|
||||||
default:-1
|
default:-1
|
||||||
@@ -37,7 +92,7 @@
|
|||||||
setup(props:any,{emit}){
|
setup(props:any,{emit}){
|
||||||
let selectIndex = ref(0)
|
let selectIndex = ref(0)
|
||||||
let openClick = ref(false)
|
let openClick = ref(false)
|
||||||
|
let store = useStore();
|
||||||
let openPrintModel = ()=>{
|
let openPrintModel = ()=>{
|
||||||
document.addEventListener('click',removePrintModel)
|
document.addEventListener('click',removePrintModel)
|
||||||
openClick.value = true
|
openClick.value = true
|
||||||
@@ -49,6 +104,7 @@
|
|||||||
}
|
}
|
||||||
let setprintModel = (item:any,index:any)=>{
|
let setprintModel = (item:any,index:any)=>{
|
||||||
if(props.deleteItem == index) return
|
if(props.deleteItem == index) return
|
||||||
|
if(item.img == -1) return
|
||||||
openClick.value = false
|
openClick.value = false
|
||||||
selectIndex = index
|
selectIndex = index
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
@@ -61,35 +117,110 @@
|
|||||||
let removePrintModel = ()=>{
|
let removePrintModel = ()=>{
|
||||||
openClick.value = false
|
openClick.value = false
|
||||||
document.removeEventListener('click',removePrintModel)
|
document.removeEventListener('click',removePrintModel)
|
||||||
|
}
|
||||||
|
let fileUploadChange = (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.type_ = "upload";
|
||||||
|
props.dataList.forEach((item:any)=>{
|
||||||
|
if(item.img == -1){
|
||||||
|
item.img = res.data.url
|
||||||
|
item.id = res.data.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
bor = false
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if (file.status === "error") {
|
||||||
|
bor = false
|
||||||
|
}
|
||||||
|
if(!bor){
|
||||||
|
// let res:any = JSON.parse(file.xhr.response);
|
||||||
|
// props.dataList.forEach((item:any)=>{
|
||||||
|
// if(item.img == -1){
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// message.warning(res.errMsg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let deleteFile = (item:any)=>{
|
||||||
|
item.img = -1
|
||||||
|
emit('setprintModel',props.dataList[0])
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
selectIndex,
|
selectIndex,
|
||||||
openClick,
|
openClick,
|
||||||
|
store,
|
||||||
setprintModel,
|
setprintModel,
|
||||||
openPrintModel,
|
openPrintModel,
|
||||||
|
fileUploadChange,
|
||||||
|
deleteFile,
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
data(prop) {
|
||||||
|
return {
|
||||||
|
upload: {
|
||||||
|
isPin: 0,
|
||||||
|
gender:'',
|
||||||
|
level1Type: 'Sketchboard',
|
||||||
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
},
|
||||||
|
token: "",
|
||||||
|
uploadUrl: "",
|
||||||
|
type_: {
|
||||||
|
type1: "generate",
|
||||||
|
type2: 'Sketchboard',
|
||||||
|
},
|
||||||
|
workspaceCom:{},
|
||||||
|
isTextarea:false,
|
||||||
|
isInputFocus:false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.uploadUrl = getUploadUrl();
|
||||||
|
this.token = getCookie("token") || "";
|
||||||
|
this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.ant-popover-inner-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
//衣服类型下拉菜单
|
//衣服类型下拉菜单
|
||||||
.generalMenu_printModel{
|
.generalMenu_printModel{
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
|
|
||||||
>div{
|
>div{
|
||||||
width: calc(13rem*1.2);
|
|
||||||
// display: flex;
|
// display: flex;
|
||||||
display: block;
|
display: block;
|
||||||
|
width: calc(13rem*1.2);
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding: 0 calc(1rem*1.2);
|
padding: 0 calc(1rem*1.2);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
> span{
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
>i{
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
ul{
|
ul{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -108,6 +239,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
padding: 0 calc(1rem*1.2);
|
padding: 0 calc(1rem*1.2);
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
&.active{
|
&.active{
|
||||||
// opacity: .4;
|
// opacity: .4;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -116,6 +251,12 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
:deep(.icon-shanchu){
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.printModel_item:hover{
|
.printModel_item:hover{
|
||||||
// background: rgba(0,0,0,.4);
|
// background: rgba(0,0,0,.4);
|
||||||
@@ -124,4 +265,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -24,22 +24,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_nav">
|
<div class="layout_nav">
|
||||||
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.passive="setpitch(item,index)">
|
||||||
<img :src="item.imgUrl">
|
<img :src="item.imgUrl">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
||||||
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" ref="content" >
|
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)" @touchstart="setpitch(item,index)" ref="content" >
|
||||||
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg>
|
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}" draggable="false" :class="moodbClassName[index]" v-modelImg>
|
||||||
<div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<ul v-show="item.setPitch" class="layout_btn" >
|
<ul v-show="item.setPitch" class="layout_btn" >
|
||||||
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
||||||
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
||||||
<li class="layout_btn_left" v-compile.stop="'left'"></li>
|
<li class="layout_btn_left" v-compile.stop="'left'"></li>
|
||||||
<li class="layout_btn_right" v-compile.stop="'right'"></li>
|
<li class="layout_btn_right" v-compile.stop="'right'"></li>
|
||||||
<li class="layout_rotote" v-rotote.stop></li>
|
<li class="layout_rotote" v-rotote.stop='item' :style="{'transform':`translate(-50%, -50%) rotateZ(${item.angle}deg)`}"></li>
|
||||||
<li class="layout_translate" v-translate.stop></li>
|
<li class="layout_translate" v-translate.stop></li>
|
||||||
<!-- <li class="layout_translate" v-translate.stop></li> -->
|
<!-- <li class="layout_translate" v-translate.stop></li> -->
|
||||||
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
|
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
|
||||||
@@ -73,6 +70,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="layout_right" v-show="isMobile">
|
||||||
|
<div class="layout_right_text">
|
||||||
|
{{ $t('DesignPrintOperation.Scale') }}
|
||||||
|
</div>
|
||||||
|
<a-slider
|
||||||
|
v-model:value="moodItemScale"
|
||||||
|
@change="setMoodItemScale"
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
</div>
|
||||||
<!-- <div class="layout_right">
|
<!-- <div class="layout_right">
|
||||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||||
@@ -118,20 +125,28 @@ import { Https } from "@/tool/https";
|
|||||||
import { getCookie } from "@/tool/cookie";
|
import { getCookie } from "@/tool/cookie";
|
||||||
import domTurnImg from '@/tool/domTurnImg'
|
import domTurnImg from '@/tool/domTurnImg'
|
||||||
import { getUploadUrl } from "@/tool/util";
|
import { getUploadUrl } from "@/tool/util";
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props:["moodb_className",'flex_direction'],
|
props:["moodb_className",'flex_direction'],
|
||||||
components: {
|
components: {
|
||||||
draggable
|
draggable
|
||||||
},
|
},
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
|
let store = useStore()
|
||||||
let layout: any = ref(false);
|
let layout: any = ref(false);
|
||||||
let templateFileList: any = ref([]);
|
let templateFileList: any = ref([]);
|
||||||
let openClick: any = ref(1);
|
let openClick: any = ref(1);
|
||||||
let drag = false;
|
let drag = false;
|
||||||
let layoutList:any = ref([])
|
let layoutList:any = ref([])
|
||||||
const content = ref<HTMLElement | null>(null);
|
const content:any = ref<HTMLElement | null>(null);
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
|
let styleObj:any = {}
|
||||||
|
let moodItemScale = ref(0)
|
||||||
|
let domObj = {
|
||||||
|
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
|
||||||
|
domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
|
||||||
|
}
|
||||||
|
let isMobile = ref(false)
|
||||||
return {
|
return {
|
||||||
layout,
|
layout,
|
||||||
templateFileList,
|
templateFileList,
|
||||||
@@ -139,7 +154,11 @@ export default defineComponent({
|
|||||||
drag,
|
drag,
|
||||||
layoutList,
|
layoutList,
|
||||||
content,
|
content,
|
||||||
loadingShow
|
loadingShow,
|
||||||
|
moodItemScale,
|
||||||
|
styleObj,
|
||||||
|
domObj,
|
||||||
|
isMobile,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -147,17 +166,13 @@ export default defineComponent({
|
|||||||
// moodTemplateId: "", //模板id
|
// moodTemplateId: "", //模板id
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
|
|
||||||
// layoutList:computed(()=>{
|
|
||||||
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
|
||||||
// ...(useStore().state.UploadFilesModule.generateFiles),
|
|
||||||
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
|
||||||
// }),
|
|
||||||
moodb : moodb.moodb_,
|
moodb : moodb.moodb_,
|
||||||
moodbList:{},
|
moodbList:{},
|
||||||
moodbClassName:[],
|
moodbClassName:[],
|
||||||
setabsolute:false,
|
setabsolute:false,
|
||||||
token: "",
|
token: "",
|
||||||
uploadUrl: "",
|
uploadUrl: "",
|
||||||
|
moodIndex:0,
|
||||||
upload: {
|
upload: {
|
||||||
isPin: 0,
|
isPin: 0,
|
||||||
gender:'',
|
gender:'',
|
||||||
@@ -175,8 +190,18 @@ export default defineComponent({
|
|||||||
//操作移动
|
//操作移动
|
||||||
layout:{
|
layout:{
|
||||||
mounted (el,layout:any,binding) {
|
mounted (el,layout:any,binding) {
|
||||||
let mousedown = function(e: MouseEvent){
|
|
||||||
e.stopPropagation()
|
let mousedown = function(event: MouseEvent){
|
||||||
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
let touchstart = function(event: any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
let mouseDownOperation = function(e: MouseEvent){
|
||||||
el.parentElement.children.forEach((v:any) => {
|
el.parentElement.children.forEach((v:any) => {
|
||||||
v.style.left = v.offsetLeft+'px'
|
v.style.left = v.offsetLeft+'px'
|
||||||
v.style.top = v.offsetTop+'px'
|
v.style.top = v.offsetTop+'px'
|
||||||
@@ -193,10 +218,18 @@ export default defineComponent({
|
|||||||
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
||||||
let domY = e.clientY - e.offsetY - Number(top)
|
let domY = e.clientY - e.offsetY - Number(top)
|
||||||
let mouse = true
|
let mouse = true
|
||||||
document.onmousemove = function(e:MouseEvent){
|
let mouseMove = function(event:MouseEvent){
|
||||||
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event:any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = (e:any)=>{
|
||||||
if(mouse){
|
if(mouse){
|
||||||
el.style.left = e.x-mouseX - domX+'px'
|
el.style.left = e.clientX-mouseX - domX+'px'
|
||||||
el.style.top = e.y-mouseY - domY+'px'
|
el.style.top = e.clientY-mouseY - domY+'px'
|
||||||
if(el.offsetLeft <=0){
|
if(el.offsetLeft <=0){
|
||||||
el.style.left = 0+'px'
|
el.style.left = 0+'px'
|
||||||
}
|
}
|
||||||
@@ -211,18 +244,23 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.onmouseup = function(){
|
let mouseup = function(){
|
||||||
mouse = false
|
mouse = false
|
||||||
document.onmousemove = ()=>{
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
}
|
document.removeEventListener('mouseup',mouseup)
|
||||||
// el.removeEventListener('mousedown',mousedown)
|
document.removeEventListener('touchend',mouseup)
|
||||||
|
//移动端
|
||||||
// el.removeEventListener('mousedown',mousedown)
|
|
||||||
// document.onmousemove = false;
|
|
||||||
}
|
}
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
|
//移动端
|
||||||
}
|
}
|
||||||
el.addEventListener('mousedown',mousedown)
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
|
|
||||||
},
|
},
|
||||||
updated (el,layout) {
|
updated (el,layout) {
|
||||||
|
|
||||||
@@ -231,8 +269,15 @@ export default defineComponent({
|
|||||||
//操作大小
|
//操作大小
|
||||||
compile:{
|
compile:{
|
||||||
mounted (el,compile) {
|
mounted (el,compile) {
|
||||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
let mousedown = (event:any)=>{
|
||||||
e.stopPropagation()
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let touchstart = (event:any)=>{
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e: MouseEvent)=>{
|
||||||
let elParent = el.parentNode.parentNode
|
let elParent = el.parentNode.parentNode
|
||||||
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
||||||
v.style.left = v.offsetLeft+'px'
|
v.style.left = v.offsetLeft+'px'
|
||||||
@@ -256,27 +301,34 @@ export default defineComponent({
|
|||||||
let gpsXY:any
|
let gpsXY:any
|
||||||
let parent:any
|
let parent:any
|
||||||
if(compile.value == 'left' || compile.value == 'right'){
|
if(compile.value == 'left' || compile.value == 'right'){
|
||||||
gpsXY = e.x
|
gpsXY = e.clientX
|
||||||
parent = elParent.offsetWidth
|
parent = elParent.offsetWidth
|
||||||
}else{
|
}else{
|
||||||
parent = elParent.offsetHeight
|
parent = elParent.offsetHeight
|
||||||
gpsXY = e.y
|
gpsXY = e.clientY
|
||||||
}
|
}
|
||||||
let mouse = true
|
let mouse = true
|
||||||
document.onmousemove = function(e:MouseEvent){
|
let mouseMove = function(event:MouseEvent){
|
||||||
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event:any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = function(e:MouseEvent){
|
||||||
if(mouse){
|
if(mouse){
|
||||||
if(compile.value == 'left'){
|
if(compile.value == 'left'){
|
||||||
elParent.style.width = parent + gpsXY - e.x + 'px'
|
elParent.style.width = parent + gpsXY - e.clientX + 'px'
|
||||||
}else if(compile.value == 'right'){
|
}else if(compile.value == 'right'){
|
||||||
elParent.style.width = parent + e.x - gpsXY + 'px'
|
elParent.style.width = parent + e.clientX - gpsXY + 'px'
|
||||||
}else if(compile.value == 'top'){
|
}else if(compile.value == 'top'){
|
||||||
elParent.style.height = parent + gpsXY - e.y + 'px'
|
elParent.style.height = parent + gpsXY - e.clientY + 'px'
|
||||||
}else if(compile.value == 'bottom'){
|
}else if(compile.value == 'bottom'){
|
||||||
elParent.style.height = parent + e.y - gpsXY + 'px'
|
elParent.style.height = parent + e.clientY - gpsXY + 'px'
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
|
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
|
||||||
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
|
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
|
||||||
}
|
}
|
||||||
@@ -292,61 +344,92 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.onmouseup = function(){
|
|
||||||
|
let mouseup = function(){
|
||||||
mouse = false
|
mouse = false
|
||||||
document.onmousemove = ()=>{}
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
|
document.removeEventListener('mouseup',mouseup)
|
||||||
|
document.removeEventListener('touchend',mouseup)
|
||||||
|
//移动端
|
||||||
}
|
}
|
||||||
})
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//操作旋转
|
//操作旋转
|
||||||
rotote:{
|
rotote:{
|
||||||
mounted(el){
|
mounted(el,item){
|
||||||
let mouse = true;
|
let mouse = true;
|
||||||
let angle :any = 0
|
let angle :any = 0
|
||||||
let num:any
|
let num:any = 1
|
||||||
let x = 0
|
let x = 0
|
||||||
let y = 0
|
let y = 0
|
||||||
let elParent = el.parentNode.parentNode
|
let elParent = el.parentNode.parentNode
|
||||||
if(document.defaultView){
|
|
||||||
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
|
let mousedown = function(event: MouseEvent){
|
||||||
num = Number(transform[3])
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
}
|
}
|
||||||
// 添加鼠标按下事件监听器
|
|
||||||
let mousedown = (e:MouseEvent) => {
|
let touchstart = function(event: any){
|
||||||
e.stopPropagation()
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e:any) => {
|
||||||
mouse = true;
|
mouse = true;
|
||||||
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
|
|
||||||
// let eY = elParent.offsetTop + el.offsetTop
|
|
||||||
var info = el.getBoundingClientRect();
|
var info = el.getBoundingClientRect();
|
||||||
let eX = info.x + info.width / 2;
|
let eX = info.x + info.width / 2;
|
||||||
let eY = info.y + info.height / 2;
|
let eY = info.y + info.height / 2;
|
||||||
|
num = item.value.zoom?item.value.zoom :1
|
||||||
document.addEventListener('mousemove', (e:MouseEvent) => {
|
angle = item.value.angle?item.value.angle:0
|
||||||
if (mouse) {
|
let mouseMove = function(event:MouseEvent){
|
||||||
let X = eX
|
let e:any = getMousePosition(event,false)
|
||||||
let Y = eY
|
mouseMoveOperation(e)
|
||||||
let x:any = e.clientX - X
|
|
||||||
let y:any = Y - e.clientY
|
|
||||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
||||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
|
||||||
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
|
|
||||||
}
|
}
|
||||||
});
|
let touchmove = function(event:any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = (e:MouseEvent) => {
|
||||||
|
if (mouse) {
|
||||||
|
let X = eX
|
||||||
|
let Y = eY
|
||||||
|
let x:any = e.clientX - X
|
||||||
|
let y:any = Y - e.clientY
|
||||||
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||||
|
item.value.angle = angle
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 添加鼠标松开事件监听器
|
// 添加鼠标松开事件监听器
|
||||||
document.addEventListener('mouseup',mouseup );
|
let mouseup = function(){
|
||||||
|
mouse = false
|
||||||
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
|
document.removeEventListener('mouseup',mouseup)
|
||||||
|
document.removeEventListener('touchend',mouseup)
|
||||||
|
//移动端
|
||||||
|
}
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
}
|
}
|
||||||
let mouseup = () => {
|
el.addEventListener('mousedown',mousedown)
|
||||||
mouse = false;
|
el.addEventListener('touchstart',touchstart)
|
||||||
// el.removeEventListener('mousedown',mousedown)
|
|
||||||
document.removeEventListener('mouseup',mouseup)
|
|
||||||
}
|
|
||||||
el.addEventListener('mousedown',mousedown);
|
|
||||||
//缩放
|
//缩放
|
||||||
let timeSwitch = true
|
let timeSwitch = true
|
||||||
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
||||||
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
|
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
|
||||||
|
num = item.value.zoom?item.value.zoom :1
|
||||||
|
angle = item.value.angle?item.value.angle:0
|
||||||
if(timeSwitch){
|
if(timeSwitch){
|
||||||
timeSwitch = false
|
timeSwitch = false
|
||||||
if((e as WheelEvent).deltaY > 0){
|
if((e as WheelEvent).deltaY > 0){
|
||||||
@@ -371,10 +454,10 @@ export default defineComponent({
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
timeSwitch = true
|
timeSwitch = true
|
||||||
}, 100);
|
}, 100);
|
||||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
let instance:any = item.instance
|
||||||
|
instance.moodItemScale = num * 100
|
||||||
|
item.value.zoom = num
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -383,9 +466,16 @@ export default defineComponent({
|
|||||||
angle:{
|
angle:{
|
||||||
mounted(el,angle){
|
mounted(el,angle){
|
||||||
let mouse = false;
|
let mouse = false;
|
||||||
el.addEventListener('mousedown', (e:MouseEvent) => {
|
let mousedown = function(event: MouseEvent){
|
||||||
e.stopPropagation()
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
let touchstart = function(event: any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e:MouseEvent) => {
|
||||||
el.parentNode.children.forEach((v:any) =>{
|
el.parentNode.children.forEach((v:any) =>{
|
||||||
v.classList.add('eventNode')
|
v.classList.add('eventNode')
|
||||||
})
|
})
|
||||||
@@ -394,7 +484,15 @@ export default defineComponent({
|
|||||||
let eX:any
|
let eX:any
|
||||||
let eY:any
|
let eY:any
|
||||||
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
|
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
|
||||||
let mouseMove = (e:MouseEvent)=>{
|
let mouseMove = function(event:MouseEvent){
|
||||||
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event:any){
|
||||||
|
let e:any = getMousePosition(event,true,el.parentNode)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = (e:MouseEvent)=>{
|
||||||
if (mouse) {
|
if (mouse) {
|
||||||
if(angle.value == 'right'){
|
if(angle.value == 'right'){
|
||||||
eX = elParent.offsetWidth - e.offsetX
|
eX = elParent.offsetWidth - e.offsetX
|
||||||
@@ -409,7 +507,7 @@ export default defineComponent({
|
|||||||
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
||||||
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
|
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
|
||||||
}
|
}
|
||||||
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
|
let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
|
||||||
// el.style.left = e.offsetX /2 +'px'
|
// el.style.left = e.offsetX /2 +'px'
|
||||||
// el.style.top = e.offsetY /2+'px'
|
// el.style.top = e.offsetY /2+'px'
|
||||||
if(100 - 100 * mouseSide/elParentSide <= 50){
|
if(100 - 100 * mouseSide/elParentSide <= 50){
|
||||||
@@ -458,28 +556,40 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 添加鼠标松开事件监听器
|
|
||||||
document.addEventListener('mouseup', mouseup);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
let mouseup = () => {
|
let mouseup = function(){
|
||||||
mouse = false;
|
mouse = false
|
||||||
el.parentNode.removeEventListener('mousemove',mouseMove)
|
|
||||||
el.parentNode.children.forEach((v:any) =>{
|
el.parentNode.children.forEach((v:any) =>{
|
||||||
v.classList.remove('eventNode')
|
v.classList.remove('eventNode')
|
||||||
})
|
})
|
||||||
document.removeEventListener('mouseup', mouseup);
|
el.parentNode.removeEventListener('mousemove',mouseMove)
|
||||||
|
el.parentNode.removeEventListener('touchmove',touchmove)
|
||||||
|
document.removeEventListener('mouseup',mouseup)
|
||||||
|
document.removeEventListener('touchend',mouseup)
|
||||||
|
//移动端
|
||||||
}
|
}
|
||||||
el.parentNode.addEventListener('mousemove', mouseMove);
|
el.parentNode.addEventListener('mousemove', mouseMove);
|
||||||
|
el.parentNode.addEventListener('touchmove', touchmove);
|
||||||
})
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//移动图片
|
//移动图片
|
||||||
translate:{
|
translate:{
|
||||||
mounted (el,layout:any,binding) {
|
mounted (el,layout:any,binding) {
|
||||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
let mousedown = function(event: MouseEvent){
|
||||||
e.stopPropagation()
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
let touchstart = function(event: any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseDownOperation(e)
|
||||||
|
}
|
||||||
|
let mouseDownOperation = (e: MouseEvent)=>{
|
||||||
let elParent = el.parentNode.parentNode
|
let elParent = el.parentNode.parentNode
|
||||||
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
|
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
|
||||||
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
|
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
|
||||||
@@ -490,10 +600,18 @@ export default defineComponent({
|
|||||||
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
||||||
let domY = e.clientY - e.offsetY - el.offsetTop
|
let domY = e.clientY - e.offsetY - el.offsetTop
|
||||||
let mouse = true
|
let mouse = true
|
||||||
document.onmousemove = function(e:MouseEvent){
|
let mouseMove = function(event:MouseEvent){
|
||||||
|
let e:any = getMousePosition(event,false)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let touchmove = function(event:any){
|
||||||
|
let e:any = getMousePosition(event,true)
|
||||||
|
mouseMoveOperation(e)
|
||||||
|
}
|
||||||
|
let mouseMoveOperation = function(e:MouseEvent){
|
||||||
if(mouse){
|
if(mouse){
|
||||||
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
||||||
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
||||||
el.style.left = left
|
el.style.left = left
|
||||||
el.style.top = top;
|
el.style.top = top;
|
||||||
el.previousSibling.style.top = top
|
el.previousSibling.style.top = top
|
||||||
@@ -529,17 +647,27 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.onmouseup = function(){
|
let mouseup = function(){
|
||||||
mouse = false
|
mouse = false
|
||||||
document.onmousemove = ()=>{}
|
document.removeEventListener('mousemove',mouseMove)
|
||||||
|
document.removeEventListener('touchmove',touchmove)
|
||||||
|
document.removeEventListener('mouseup',mouseup)
|
||||||
|
document.removeEventListener('touchend',mouseup)
|
||||||
|
//移动端
|
||||||
}
|
}
|
||||||
})
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
el.addEventListener('mousedown',mousedown)
|
||||||
|
el.addEventListener('touchstart',touchstart)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
modelImg:{
|
modelImg:{
|
||||||
mounted(el) {
|
mounted(el) {
|
||||||
let parentNode = el.parentNode
|
let parentNode = el.parentNode
|
||||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||||
el.style.height = 100+'%'
|
el.style.height = 100+'%'
|
||||||
el.style.width = 'auto'
|
el.style.width = 'auto'
|
||||||
}else{
|
}else{
|
||||||
@@ -549,7 +677,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
updated (el) {
|
updated (el) {
|
||||||
let parentNode = el.parentNode
|
let parentNode = el.parentNode
|
||||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||||
el.style.height = 100+'%'
|
el.style.height = 100+'%'
|
||||||
el.style.width = 'auto'
|
el.style.width = 'auto'
|
||||||
}else{
|
}else{
|
||||||
@@ -562,6 +690,7 @@ export default defineComponent({
|
|||||||
methods: {
|
methods: {
|
||||||
init(){
|
init(){
|
||||||
let parentList:any = this.$parent
|
let parentList:any = this.$parent
|
||||||
|
this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||||
parentList = parentList.layoutList
|
parentList = parentList.layoutList
|
||||||
this.layout = true
|
this.layout = true
|
||||||
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||||
@@ -569,14 +698,22 @@ export default defineComponent({
|
|||||||
v.setPitch = false
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
this.layoutList = parentList
|
this.layoutList = parentList
|
||||||
|
|
||||||
this.moodbList = this.moodb[parentList.length-1]
|
this.moodbList = this.moodb[parentList.length-1]
|
||||||
this.moodbClassName = this.moodb_className
|
this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
|
||||||
|
this.moodItemScale = (this.layoutList?.[0]?this.layoutList[0].zoom:1)*100
|
||||||
|
|
||||||
|
this.initDomStyle()
|
||||||
|
|
||||||
},
|
},
|
||||||
cancelDsign(){
|
cancelDsign(){
|
||||||
this.layout = false
|
this.layout = false
|
||||||
},
|
},
|
||||||
setpitch(item:any,index:any){
|
setpitch(item:any,index:any){
|
||||||
|
if(!item.zoom){
|
||||||
|
item.zoom = 1
|
||||||
|
}
|
||||||
|
this.moodIndex = index
|
||||||
|
this.moodItemScale = (item.zoom?item.zoom:1)*100
|
||||||
this.layoutList.forEach((v:any)=>{
|
this.layoutList.forEach((v:any)=>{
|
||||||
v.setPitch = false
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
@@ -586,6 +723,11 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setMoodItemScale(value:any){
|
||||||
|
if(value > 2){
|
||||||
|
this.layoutList[this.moodIndex].zoom = value/100
|
||||||
|
}
|
||||||
|
},
|
||||||
setmoodb(item:any){
|
setmoodb(item:any){
|
||||||
this.moodbClassName = item
|
this.moodbClassName = item
|
||||||
this.$emit('setmoodbClass',this.moodbClassName)
|
this.$emit('setmoodbClass',this.moodbClassName)
|
||||||
@@ -604,9 +746,79 @@ export default defineComponent({
|
|||||||
changeTemplateModal(){
|
changeTemplateModal(){
|
||||||
this.layout = !this.layout
|
this.layout = !this.layout
|
||||||
},
|
},
|
||||||
|
setIndex(styleArr:any){
|
||||||
|
let arr = JSON.parse(JSON.stringify(styleArr))
|
||||||
|
const nums = arr.map((obj:any,index:any) => {
|
||||||
|
obj.num = index
|
||||||
|
return {
|
||||||
|
num: obj.num,
|
||||||
|
zIndex: obj['z-index']?obj['z-index']:1
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
|
||||||
|
|
||||||
|
GO.zIndex = sortedNums.length + 1
|
||||||
|
// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
|
||||||
|
sortedNums.forEach((item:any,index:any) => {
|
||||||
|
arr[item.num]['z-index'] = index + 1
|
||||||
|
});
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
initDomStyle(){
|
||||||
|
nextTick(()=>{
|
||||||
|
this.content.forEach((item:any,index:any) => {
|
||||||
|
if(this.styleObj.domStyle[index]){
|
||||||
|
item.classList.add('active')
|
||||||
|
this.initStyle(item,this.styleObj.domStyle[index])
|
||||||
|
}
|
||||||
|
this.domObj.dom.forEach((domName:any,domStyle:any) => {
|
||||||
|
let dom,style
|
||||||
|
if(this.styleObj[this.domObj.domStyle[index]]){
|
||||||
|
style = this.styleObj[this.domObj.domStyle[domStyle]][index]
|
||||||
|
dom = item.querySelector(domName)
|
||||||
|
this.initStyle(dom,style)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clearStyleObj(){
|
||||||
|
this.styleObj.domStyle = []
|
||||||
|
this.domObj.domStyle.forEach((item:any)=>{
|
||||||
|
if(this.styleObj[item])this.styleObj[item] = []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initStyle(dom:any,style:any){
|
||||||
|
if(!style)return
|
||||||
|
for (const [property, value] of Object.entries(style)) {
|
||||||
|
|
||||||
|
dom.style.setProperty(property, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setDomStyle(){
|
||||||
|
this.clearStyleObj()
|
||||||
|
this.content.forEach((item:any) => {
|
||||||
|
this.styleObj.domStyle.push(this.setStyle(item.style))
|
||||||
|
this.domObj.dom.forEach((domName:any,index:any) => {
|
||||||
|
let style = this.domObj.domStyle[index]
|
||||||
|
let dom = item.querySelector(domName)
|
||||||
|
this.styleObj[style].push(this.setStyle(dom.style))
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setStyle(domStyle:any){
|
||||||
|
let style:any = {}
|
||||||
|
for (let property of domStyle) {
|
||||||
|
style[property] = domStyle.getPropertyValue(property);
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
//提交模板
|
//提交模板
|
||||||
submitTemplate() {
|
submitTemplate() {
|
||||||
this.loadingShow = true
|
this.loadingShow = true
|
||||||
|
this.setDomStyle()
|
||||||
|
this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
|
||||||
|
this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
|
||||||
this.layoutList.forEach((v:any)=>{
|
this.layoutList.forEach((v:any)=>{
|
||||||
v.setPitch = false
|
v.setPitch = false
|
||||||
})
|
})
|
||||||
@@ -628,6 +840,8 @@ export default defineComponent({
|
|||||||
this.layout = false
|
this.layout = false
|
||||||
this.loadingShow = false
|
this.loadingShow = false
|
||||||
this.store.commit("setDisposeMoodboard", rv);
|
this.store.commit("setDisposeMoodboard", rv);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
).catch(rv=>{
|
).catch(rv=>{
|
||||||
this.loadingShow = false
|
this.loadingShow = false
|
||||||
@@ -646,6 +860,10 @@ export default defineComponent({
|
|||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.layout_modal {
|
.layout_modal {
|
||||||
|
user-select: none; /* 对现代浏览器有效 */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
// height: calc(65vh - 6.4rem);
|
// height: calc(65vh - 6.4rem);
|
||||||
@@ -736,8 +954,8 @@ export default defineComponent({
|
|||||||
li{
|
li{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// border-radius: 50%;
|
// border-radius: 50%;
|
||||||
width: calc(1.5rem*1.2);
|
width: calc(2rem*1.2);
|
||||||
height: calc(1.5rem*1.2);
|
height: calc(2rem*1.2);
|
||||||
background-color: rgb(20, 188, 255);
|
background-color: rgb(20, 188, 255);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1049;
|
z-index: 1049;
|
||||||
@@ -801,24 +1019,28 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
||||||
// opacity: 0;
|
// opacity: 0;
|
||||||
width: calc(.8rem*1.2);
|
width: calc(2rem*1.2);
|
||||||
height: calc(.8rem*1.2);
|
height: calc(2rem*1.2);
|
||||||
}
|
}
|
||||||
.layout_angle_tr{
|
.layout_angle_tr{
|
||||||
right: 0%;
|
right: 0%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
transform: translate(50%,-50%);
|
||||||
}
|
}
|
||||||
.layout_angle_tl{
|
.layout_angle_tl{
|
||||||
left: 0%;
|
left: 0%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
}
|
}
|
||||||
.layout_angle_br{
|
.layout_angle_br{
|
||||||
right: 0%;
|
right: 0%;
|
||||||
bottom: 0%;
|
bottom: 0%;
|
||||||
|
transform: translate(50%,50%);
|
||||||
}
|
}
|
||||||
.layout_angle_bl{
|
.layout_angle_bl{
|
||||||
left: 0%;
|
left: 0%;
|
||||||
bottom: 0%;
|
bottom: 0%;
|
||||||
|
transform: translate(-50%,50%);
|
||||||
}
|
}
|
||||||
.eventNode{
|
.eventNode{
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -914,6 +1136,65 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.layout_right{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: calc(5rem*1.2);
|
||||||
|
// background-color: #000;
|
||||||
|
width: 8%;
|
||||||
|
height: 50%;
|
||||||
|
&.layout_left::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout_left_text{
|
||||||
|
font-size: var(--aida-fsize1-6);
|
||||||
|
margin-bottom: calc(1rem*1.2);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.layout_left_items{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(6rem*1.2);
|
||||||
|
display: flex;
|
||||||
|
align-content: space-between;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: calc(2rem*1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
.layout_left_item{
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-slider{
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(2rem*1.2);
|
||||||
|
padding: 0 calc(1rem*1.2);
|
||||||
|
.ant-slider-track,
|
||||||
|
.ant-slider-rail {
|
||||||
|
height: calc(.6rem*1.2);
|
||||||
|
background-color: #e1e1e1;
|
||||||
|
border-radius: calc(0.5rem*1.2);
|
||||||
|
}
|
||||||
|
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
||||||
|
.ant-slider-handle {
|
||||||
|
background-color: #2d2e76 !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.ant-slider-handle:hover {
|
||||||
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.habit_System_Designer_text_max {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.habit_System_Designer_text {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
.submit_button {
|
.submit_button {
|
||||||
margin: calc(2rem*1.2) auto 0;
|
margin: calc(2rem*1.2) auto 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layoutMobile_nav">
|
<div class="layoutMobile_nav">
|
||||||
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.passive="setpitch(item,index)">
|
||||||
<img :src="item.imgUrl">
|
<img :src="item.imgUrl">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,14 +132,22 @@ export default defineComponent({
|
|||||||
draggable
|
draggable
|
||||||
},
|
},
|
||||||
setup(prop) {
|
setup(prop) {
|
||||||
|
let store = useStore()
|
||||||
let layout: any = ref(false);
|
let layout: any = ref(false);
|
||||||
let templateFileList: any = ref([]);
|
let templateFileList: any = ref([]);
|
||||||
let openClick: any = ref(1);
|
let openClick: any = ref(1);
|
||||||
let drag = false;
|
let drag = false;
|
||||||
let layoutList:any = ref([])
|
let layoutList:any = ref([])
|
||||||
const content = ref<HTMLElement | null>(null);
|
const content:any = ref<HTMLElement | null>(null);
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
|
let styleObj = computed(()=>{
|
||||||
|
return store.state.UploadFilesModule.moodboardPosition
|
||||||
|
})
|
||||||
let moodItemScale = ref(0)
|
let moodItemScale = ref(0)
|
||||||
|
let domObj = {
|
||||||
|
dom:['img','ul','.layoutMobile_rotote','.layoutMobile_translate','.layoutMobile_angle_tr','.layoutMobile_angle_tl','.layoutMobile_angle_br','.layoutMobile_angle_bl'],
|
||||||
|
domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
layout,
|
layout,
|
||||||
templateFileList,
|
templateFileList,
|
||||||
@@ -148,7 +156,9 @@ export default defineComponent({
|
|||||||
layoutList,
|
layoutList,
|
||||||
content,
|
content,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
moodItemScale
|
moodItemScale,
|
||||||
|
styleObj,
|
||||||
|
domObj,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -582,7 +592,9 @@ export default defineComponent({
|
|||||||
this.moodIndex = 0
|
this.moodIndex = 0
|
||||||
|
|
||||||
this.moodbList = this.moodb[parentList.length-1]
|
this.moodbList = this.moodb[parentList.length-1]
|
||||||
this.moodbClassName = this.moodb_className
|
this.moodbClassName = this.styleObj.class
|
||||||
|
this.initDomStyle()
|
||||||
|
|
||||||
},
|
},
|
||||||
cancelDsign(){
|
cancelDsign(){
|
||||||
this.layout = false
|
this.layout = false
|
||||||
@@ -635,6 +647,65 @@ export default defineComponent({
|
|||||||
changeTemplateModal(){
|
changeTemplateModal(){
|
||||||
this.layout = !this.layout
|
this.layout = !this.layout
|
||||||
},
|
},
|
||||||
|
setIndex(arr:any){
|
||||||
|
const nums = arr.map((obj:any) => obj.num);
|
||||||
|
const sortedNums = [...nums].sort((a, b) => a - b);
|
||||||
|
GO.zIndex = sortedNums[sortedNums.length - 1] + 1
|
||||||
|
const numToNewValue = new Map();
|
||||||
|
sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
|
||||||
|
arr.forEach((obj:any) => {
|
||||||
|
obj.num = numToNewValue.get(obj.num);
|
||||||
|
});
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
initDomStyle(){
|
||||||
|
nextTick(()=>{
|
||||||
|
this.content.forEach((item:any,index:any) => {
|
||||||
|
if(this.styleObj.domStyle[index]){
|
||||||
|
item.classList.add('active')
|
||||||
|
this.initStyle(item,this.styleObj.domStyle[index])
|
||||||
|
}
|
||||||
|
this.domObj.dom.forEach((domName:any,domStyle:any) => {
|
||||||
|
let dom,style
|
||||||
|
if(this.styleObj[this.domObj.domStyle[index]]){
|
||||||
|
style = this.styleObj[this.domObj.domStyle[domStyle]][index]
|
||||||
|
dom = item.querySelector(domName)
|
||||||
|
this.initStyle(dom,style)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clearStyleObj(){
|
||||||
|
this.styleObj.domStyle = []
|
||||||
|
this.domObj.domStyle.forEach((item:any)=>{
|
||||||
|
if(this.styleObj[item])this.styleObj[item] = []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initStyle(dom:any,style:any){
|
||||||
|
if(!style)return
|
||||||
|
for (const [property, value] of Object.entries(style)) {
|
||||||
|
dom.style.setProperty(property, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setDomStyle(){
|
||||||
|
this.clearStyleObj()
|
||||||
|
this.content.forEach((item:any) => {
|
||||||
|
this.styleObj.domStyle.push(this.setStyle(item.style))
|
||||||
|
this.domObj.dom.forEach((domName:any,index:any) => {
|
||||||
|
let style = this.domObj.domStyle[index]
|
||||||
|
let dom = item.querySelector(domName)
|
||||||
|
this.styleObj[style].push(this.setStyle(dom.style))
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setStyle(domStyle:any){
|
||||||
|
let style:any = {}
|
||||||
|
for (let property of domStyle) {
|
||||||
|
style[property] = domStyle.getPropertyValue(property);
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
//提交模板
|
//提交模板
|
||||||
submitTemplate() {
|
submitTemplate() {
|
||||||
this.loadingShow = true
|
this.loadingShow = true
|
||||||
@@ -659,6 +730,10 @@ export default defineComponent({
|
|||||||
this.layout = false
|
this.layout = false
|
||||||
this.loadingShow = false
|
this.loadingShow = false
|
||||||
this.store.commit("setDisposeMoodboard", rv);
|
this.store.commit("setDisposeMoodboard", rv);
|
||||||
|
|
||||||
|
this.setDomStyle()
|
||||||
|
this.setIndex(this.styleObj.domStyle)//index统一排序设置值
|
||||||
|
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
|
||||||
}
|
}
|
||||||
).catch(rv=>{
|
).catch(rv=>{
|
||||||
this.loadingShow = false
|
this.loadingShow = false
|
||||||
|
|||||||
204
src/component/HomePage/newPosted.vue
Normal file
204
src/component/HomePage/newPosted.vue
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<div class="newPosted_generalMessage_title modal_title_text">
|
||||||
|
<span>动态</span>
|
||||||
|
<!-- <div class="newPosted_generalMessage_title_setting pointer" @click="allRead">全部已读</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="newPosted_generalMessage_center modal_title_text">
|
||||||
|
<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
|
||||||
|
<!-- <a-badge :dot="item.isRead == 0"></a-badge> -->
|
||||||
|
<div class="newPosted_generalMessage_item_right">
|
||||||
|
<div class="newPosted_generalMessage_item_img pointer" @click="openOtherUsers(item)">
|
||||||
|
<img :src="item.avatar" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="newPosted_generalMessage_item_content">
|
||||||
|
<div class="modal_title_text_intro">{{ item.userName }} </div>
|
||||||
|
<div class="newPosted_generalMessage_item_content_title pointer" @click="openOtherWork(item)">{{ item.portfolioName }}</div>
|
||||||
|
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="newPosted_generalMessage_item_left">
|
||||||
|
<div class="newPosted_generalMessage_item_img">
|
||||||
|
<img :src="item.canvas" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="newPosted_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
|
||||||
|
{{$t('account.dataNull')}}
|
||||||
|
</div>
|
||||||
|
<div class="page_loading_box" v-show="!isNoData">
|
||||||
|
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
|
||||||
|
<span v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useRouter,useRoute } from 'vue-router'
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore();
|
||||||
|
let newPostedMessage = reactive({
|
||||||
|
activeKey: ref('1'),
|
||||||
|
dataList:[
|
||||||
|
],
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
isNoData: false,
|
||||||
|
isShowMark: false,
|
||||||
|
})
|
||||||
|
let loadingDom:any = ref(null)
|
||||||
|
let init = ()=>{
|
||||||
|
newPostedMessage.isNoData = false
|
||||||
|
newPostedMessage.page = 0
|
||||||
|
new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交，则直接返回
|
||||||
|
// console.log(entries[0]);
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
newPostedMessage.page+=1
|
||||||
|
getPostedHistory()
|
||||||
|
},
|
||||||
|
// { root:worksPage }
|
||||||
|
).observe(loadingDom.value);
|
||||||
|
let data = {
|
||||||
|
type:'newPosted'
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
|
||||||
|
store.commit('setMessageSystem',{newPosted:0})
|
||||||
|
}).catch((err)=>{
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let getPostedHistory = ()=>{
|
||||||
|
newPostedMessage.isShowMark = true
|
||||||
|
let data = {
|
||||||
|
page: newPostedMessage.page,
|
||||||
|
size: newPostedMessage.size,
|
||||||
|
type:'newPosted'
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
|
||||||
|
newPostedMessage.isShowMark = false
|
||||||
|
if(rv.content.length == 0) {
|
||||||
|
newPostedMessage.isNoData = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
newPostedMessage.dataList = rv.content
|
||||||
|
}).catch(() => {
|
||||||
|
newPostedMessage.isShowMark = false
|
||||||
|
newPostedMessage.isNoData = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:item.senderId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
let openOtherWork = (item:any)=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/works',
|
||||||
|
query:{
|
||||||
|
workId:item.portfolioId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(newPostedMessage),
|
||||||
|
loadingDom,
|
||||||
|
init,
|
||||||
|
getPostedHistory,
|
||||||
|
openOtherUsers,
|
||||||
|
openOtherWork,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.modal_title_text{
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.pointer{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.newPosted_generalMessage_title{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.newPosted_generalMessage_center{
|
||||||
|
width: 100%;
|
||||||
|
max-height: 40rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
.newPosted_generalMessage_item{
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.newPosted_generalMessage_item_right{
|
||||||
|
margin-right: 1rem;
|
||||||
|
.newPosted_generalMessage_item_img{
|
||||||
|
img{
|
||||||
|
width: 5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newPosted_generalMessage_item_left{
|
||||||
|
height: 10rem;
|
||||||
|
margin-left: auto;
|
||||||
|
.newPosted_generalMessage_item_img{
|
||||||
|
height: 100%;
|
||||||
|
img{
|
||||||
|
width: 5rem;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newPosted_generalMessage_item_content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-right: 1rem;
|
||||||
|
.newPosted_generalMessage_item_content_title:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
text-align: left
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page_loading_box{
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
.page_loading{
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
<div class="productImg_left">
|
<div class="productImg_left">
|
||||||
<div class="Guide_1_32">
|
<div class="Guide_1_32">
|
||||||
<div class="productImg_content_item_title productImg_content_item_title_menu">
|
<div class="productImg_content_item_title productImg_content_item_title_menu">
|
||||||
<span>{{$t('ProductImg.MagicTools')}}</span>
|
<!-- <span>{{$t('ProductImg.MagicTools')}}</span> -->
|
||||||
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
|
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
|
||||||
</div>
|
</div>
|
||||||
<div class="input_border productImg_content_item_generate">
|
<div class="input_border productImg_content_item_generate">
|
||||||
@@ -75,11 +75,25 @@
|
|||||||
</a-slider> -->
|
</a-slider> -->
|
||||||
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
|
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||||
|
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||||
|
</div>
|
||||||
|
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
|
||||||
|
<a-slider class="system_silder"
|
||||||
|
v-model:value="brightenValue"
|
||||||
|
:tooltipVisible="false"
|
||||||
|
:max="3"
|
||||||
|
:min="1"
|
||||||
|
:step="0.1"
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
<input type="number" readonly v-model="brightenValue">
|
||||||
|
</div>
|
||||||
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
||||||
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
|
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
|
||||||
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
|
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
|
||||||
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[driver__.driver?index == 0?driver__.index == 45?'Guide_img showEvents':'hideEvents':'hideEvents':'',item?.isChecked?'active':'']">
|
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[driver__.driver?index == 0?driver__.index == 45?'Guide_img showEvents':'hideEvents':'hideEvents':'',item?.isChecked?'active':'']">
|
||||||
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
|
<div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
|
||||||
@@ -97,6 +111,8 @@
|
|||||||
|
|
||||||
>
|
>
|
||||||
<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
|
<img @click="setGenerate(file)" :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
|
||||||
|
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
|
||||||
|
|
||||||
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
||||||
<i class="fi fi-rr-trash"></i>
|
<i class="fi fi-rr-trash"></i>
|
||||||
</div> -->
|
</div> -->
|
||||||
@@ -210,6 +226,7 @@
|
|||||||
:productData="{
|
:productData="{
|
||||||
upload:upload,
|
upload:upload,
|
||||||
similarity:similarity,
|
similarity:similarity,
|
||||||
|
brightenValue:brightenValue,
|
||||||
RelightDirection:RelightDirection,
|
RelightDirection:RelightDirection,
|
||||||
RelightDirectionList:RelightDirectionList,
|
RelightDirectionList:RelightDirectionList,
|
||||||
}"
|
}"
|
||||||
@@ -264,6 +281,7 @@ export default defineComponent({
|
|||||||
generateList:[],
|
generateList:[],
|
||||||
likeList:[],
|
likeList:[],
|
||||||
similarity:30,
|
similarity:30,
|
||||||
|
brightenValue:1,
|
||||||
})
|
})
|
||||||
let productimgMenuList = ref([
|
let productimgMenuList = ref([
|
||||||
{
|
{
|
||||||
@@ -491,6 +509,7 @@ export default defineComponent({
|
|||||||
toProductImageVOList:selectArr,
|
toProductImageVOList:selectArr,
|
||||||
userLikeGroupId:upload.value.userlikeGroupId,
|
userLikeGroupId:upload.value.userlikeGroupId,
|
||||||
direction:RelightDirection.value,
|
direction:RelightDirection.value,
|
||||||
|
brightenValue:productImgData.brightenValue,
|
||||||
imageStrength:(100 - imageStrength)/100,
|
imageStrength:(100 - imageStrength)/100,
|
||||||
}
|
}
|
||||||
productImgData.isProductimg = true
|
productImgData.isProductimg = true
|
||||||
@@ -587,7 +606,11 @@ export default defineComponent({
|
|||||||
if(generateProceedList){
|
if(generateProceedList){
|
||||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||||
let str = generateProceedList.join(',')
|
let str = generateProceedList.join(',')
|
||||||
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
let data = {
|
||||||
|
uniqueId:str,userId:JSON.parse(userInfo).userId,
|
||||||
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
type:productimgMenu.value.value,
|
||||||
|
}
|
||||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
generateProceedList = []
|
generateProceedList = []
|
||||||
@@ -609,6 +632,7 @@ export default defineComponent({
|
|||||||
scaleImage.value.isLike = false
|
scaleImage.value.isLike = false
|
||||||
scaleImage.value.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
|
scaleImage.value.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
|
||||||
scaleImage.value.productimgSimilarity = productImgData.similarity
|
scaleImage.value.productimgSimilarity = productImgData.similarity
|
||||||
|
scaleImage.value.productimgBrightenValue = productImgData.brightenValue
|
||||||
scaleImage.value.productimgRelightDirection = RelightDirection.value
|
scaleImage.value.productimgRelightDirection = RelightDirection.value
|
||||||
scaleImage.value.isComparison = true
|
scaleImage.value.isComparison = true
|
||||||
}
|
}
|
||||||
@@ -665,370 +689,384 @@ export default defineComponent({
|
|||||||
productimgMenuList,
|
productimgMenuList,
|
||||||
productimgMenu,
|
productimgMenu,
|
||||||
|
|
||||||
RelightDirectionList,
|
RelightDirectionList,
|
||||||
RelightDirection,
|
RelightDirection,
|
||||||
|
|
||||||
selectList,
|
selectList,
|
||||||
likeDesignCollectionList,
|
likeDesignCollectionList,
|
||||||
ExportModel,
|
ExportModel,
|
||||||
init,
|
init,
|
||||||
setproduct,
|
setproduct,
|
||||||
cancelDsign,
|
cancelDsign,
|
||||||
fileUploadChange,
|
fileUploadChange,
|
||||||
beforeUpload,
|
beforeUpload,
|
||||||
deleteFile,
|
deleteFile,
|
||||||
setGenerate,
|
setGenerate,
|
||||||
likeFile,
|
likeFile,
|
||||||
setExport,
|
setExport,
|
||||||
getPrductimg,
|
getPrductimg,
|
||||||
removeProductimg,
|
removeProductimg,
|
||||||
scaleImage,
|
scaleImage,
|
||||||
setScaleImage,
|
setScaleImage,
|
||||||
setMenu,
|
setMenu,
|
||||||
setMenuShow,
|
setMenuShow,
|
||||||
setSimilarity,
|
setSimilarity,
|
||||||
setTask,
|
setTask,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
mousewheel:{
|
mousewheel:{
|
||||||
mounted (el) {
|
mounted (el) {
|
||||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||||
let num = 0
|
let num = 0
|
||||||
if(e.deltaY > 0){
|
if(e.deltaY > 0){
|
||||||
num = 25
|
num = 25
|
||||||
}else{
|
}else{
|
||||||
num = -25
|
num = -25
|
||||||
}
|
}
|
||||||
el.scrollBy(num, 0);
|
el.scrollBy(num, 0);
|
||||||
},{ passive: true })
|
},{ passive: true })
|
||||||
}
|
}
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
},
|
||||||
return {
|
data() {
|
||||||
indicator: h(LoadingOutlined, {
|
return {
|
||||||
style: {
|
indicator: h(LoadingOutlined, {
|
||||||
fontSize: "2.4rem",
|
style: {
|
||||||
},
|
fontSize: "2.4rem",
|
||||||
spin: true,
|
},
|
||||||
}),
|
spin: true,
|
||||||
// moodTemplateId: "", //模板id
|
}),
|
||||||
token: "",
|
// moodTemplateId: "", //模板id
|
||||||
uploadUrl: "",
|
token: "",
|
||||||
|
uploadUrl: "",
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.token = getCookie("token") || "";
|
this.token = getCookie("token") || "";
|
||||||
this.uploadUrl = getUploadUrl();
|
this.uploadUrl = getUploadUrl();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// init(list:any,index:any,dialogueIndex:any){
|
// init(list:any,index:any,dialogueIndex:any){
|
||||||
|
|
||||||
// },
|
// },
|
||||||
// cancelDsign(){
|
// cancelDsign(){
|
||||||
// this.productImg = false
|
// this.productImg = false
|
||||||
// // this.productImgList = []
|
// // this.productImgList = []
|
||||||
// // this.productImgIndex = 0
|
// // this.productImgIndex = 0
|
||||||
// },
|
// },
|
||||||
// download(){
|
// download(){
|
||||||
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
||||||
// },
|
// },
|
||||||
// setScaleImageIndex(index:any){
|
// setScaleImageIndex(index:any){
|
||||||
// // this.productImgIndex = index
|
// // this.productImgIndex = index
|
||||||
// // console.log(this.productImgIndex);
|
// // console.log(this.productImgIndex);
|
||||||
|
|
||||||
// },
|
// },
|
||||||
// LikeFile(item:any,str:string){
|
// LikeFile(item:any,str:string){
|
||||||
// let parent:any = this.$parent
|
// let parent:any = this.$parent
|
||||||
// parent.likeFile(item,str)
|
// parent.likeFile(item,str)
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.productImg_modal {
|
.productImg_modal {
|
||||||
.productImg_page{
|
.productImg_page{
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
&.productImg_page::-webkit-scrollbar{display: none;}
|
&.productImg_page::-webkit-scrollbar{display: none;}
|
||||||
|
}
|
||||||
|
.productImg_content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.modal_title_text{
|
||||||
|
height: 4rem;
|
||||||
}
|
}
|
||||||
.productImg_content{
|
}
|
||||||
display: flex;
|
.productImg_content_bottom{
|
||||||
flex-direction: column;
|
height: calc(100% - 4rem - 2.4rem);
|
||||||
height: 100%;
|
--border-color: #c4c4c4;
|
||||||
.modal_title_text{
|
display: flex;
|
||||||
height: 4rem;
|
justify-content: space-between;
|
||||||
}
|
flex: 1;
|
||||||
|
.upload_item{
|
||||||
}
|
}
|
||||||
.productImg_content_bottom{
|
}
|
||||||
height: calc(100% - 4rem - 2.4rem);
|
.productImg_content_item_title{
|
||||||
--border-color: #c4c4c4;
|
font-weight: 600;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
&.productImg_content_item_title_menu{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex: 1;
|
.productImg_content_item_title_menubtn{
|
||||||
.upload_item{
|
font-size: 1.6rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_title{
|
&.productImg_content_item_title_similarity{
|
||||||
font-weight: 600;
|
// margin-bottom: 8rem;
|
||||||
font-size: 1.6rem;
|
}
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
&.productImg_content_item_title_menu{
|
.productImg_content_item_intro{
|
||||||
display: flex;
|
font-size: 1.4rem;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: space-between;
|
.productImg_content_item_imgBox{
|
||||||
.productImg_content_item_title_menubtn{
|
display: flex;
|
||||||
font-size: 1.6rem;
|
overflow-x: auto;
|
||||||
font-weight: 500;
|
width: auto;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
.content_item_imgBox_itemImg{
|
||||||
|
display: flex;
|
||||||
|
margin-right: 1rem;
|
||||||
|
position: relative;
|
||||||
|
height: 14rem;
|
||||||
|
position: relative;
|
||||||
|
img{
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
object-fit: contain;
|
||||||
|
opacity: .5;
|
||||||
|
transform: scale(.9);
|
||||||
|
&.active{
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.productImg_content_item_title_similarity{
|
.ant-checkbox-wrapper{
|
||||||
// margin-bottom: 8rem;
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&.content_item_imgBox_itemImg:hover{
|
||||||
|
.content_item_imgBox_itemImg_delete{
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_item_imgBox_itemImg_delete{
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,.2);
|
||||||
|
position: absolute;
|
||||||
|
i{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.content_item_imgBox_itemImg:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_left,.productImg_right{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.productImg_content_item:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.productImg_left{
|
||||||
|
width: 25%;
|
||||||
|
position: relative;
|
||||||
|
.Guide_1_32{
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
&.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{
|
||||||
|
margin-right: 0rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_intro{
|
// width: 45%;
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
.productImg_content_item_imgBox{
|
.productImg_content_item_imgBox{
|
||||||
|
.content_item_imgBox_itemImg{
|
||||||
|
width: auto;
|
||||||
|
max-width: 9rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
img{
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_content_item_generate{
|
||||||
|
--width:100%;
|
||||||
|
}
|
||||||
|
.productImg_content_item_similarity{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.system_silder{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
width: 30%;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_content_item_Direction{
|
||||||
|
padding-bottom: calc(2rem* 1.2);
|
||||||
|
.ant-select{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
.ant-select-selector::after{
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.ant-select-selector .ant-select-selection-item{
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.ant-select-selector{
|
||||||
|
height: auto;
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_content_item_generate_btn{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
top: auto;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-around;
|
||||||
|
.input_box{
|
||||||
|
flex: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.started_btn{
|
||||||
|
// width: 13rem;
|
||||||
|
// text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_right{
|
||||||
|
width: 75%;
|
||||||
|
padding-left: 2rem;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
.productImg_right_item_box{
|
||||||
|
height: 40%;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
width: auto;
|
background: #f6f6fa;
|
||||||
margin-bottom: 2rem;
|
border-radius: 2rem;
|
||||||
align-items: center;
|
margin-bottom: 2%;
|
||||||
.content_item_imgBox_itemImg{
|
padding: 1rem 1.5rem;
|
||||||
display: flex;
|
position: relative;
|
||||||
|
.mark_loading{
|
||||||
|
position: absolute
|
||||||
|
}
|
||||||
|
.productImg_right_item{
|
||||||
|
height: 100%;
|
||||||
|
padding: 1rem 0;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 14rem;
|
background: #fff;
|
||||||
img{
|
overflow: hidden;
|
||||||
width: 100%;
|
flex-shrink: 0;
|
||||||
cursor: pointer;
|
.productImg_right_item_imgBox{
|
||||||
object-fit: contain;
|
|
||||||
&.active{
|
|
||||||
opacity: .5;
|
|
||||||
transform: scale(.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.content_item_imgBox_itemImg:hover{
|
|
||||||
.content_item_imgBox_itemImg_delete{
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content_item_imgBox_itemImg_delete{
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0,0,0,.2);
|
overflow: hidden;
|
||||||
position: absolute;
|
.loadingImg{
|
||||||
i{
|
width: 14rem;
|
||||||
position: absolute;
|
object-fit: contain;
|
||||||
left: 50%;
|
}
|
||||||
top: 50%;
|
}
|
||||||
transform: translate(-50%,-50%);
|
img{
|
||||||
color: #fff;
|
height: 100%;
|
||||||
|
}
|
||||||
|
.productImg_right_item_iconRight,.productImg_right_item_iconLeft{
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
>div{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
>div:last-child{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_right_item_iconRight{
|
||||||
|
right: 2rem;
|
||||||
|
}
|
||||||
|
.productImg_right_item_iconLeft{
|
||||||
|
left: 2rem;
|
||||||
|
}
|
||||||
|
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
background: #fff;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: .5rem;
|
||||||
|
position: relative;
|
||||||
|
border: .1rem solid #ccc;
|
||||||
|
.fi-sr-heart{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_right_item_menu{
|
||||||
|
ul{
|
||||||
|
top: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 10rem;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: calc(1rem*1.2);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 3;
|
||||||
|
li{
|
||||||
|
background: #cccccc;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
}
|
||||||
|
li:hover{
|
||||||
|
// background: rgba(0,0,0,.4);
|
||||||
|
background: #999999;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.content_item_imgBox_itemImg:last-child{
|
.productImg_right_item:hover{
|
||||||
|
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_right_item:last-child{
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_left,.productImg_right{
|
.productImg_right_item_box:last-child{
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.productImg_content_item:last-child{
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.productImg_left{
|
.productImg_right_titleBtn{
|
||||||
width: 25%;
|
display: flex;
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
.Guide_1_32{
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
&.Guide_1_32::-webkit-scrollbar{display: none;}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload_file_item{
|
|
||||||
display: flex;
|
|
||||||
margin-right: 1rem;
|
|
||||||
width: auto !important;
|
|
||||||
height: 14rem !important;
|
|
||||||
border: none !important;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
&.upload_file_item:last-child{
|
|
||||||
margin-right: 0rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// width: 45%;
|
|
||||||
.productImg_content_item_imgBox{
|
|
||||||
.content_item_imgBox_itemImg{
|
|
||||||
width: 7rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_content_item_generate{
|
|
||||||
--width:100%;
|
|
||||||
}
|
|
||||||
.productImg_content_item_similarity{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.system_silder{
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
width: 30%;
|
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_content_item_Direction{
|
|
||||||
padding-bottom: calc(2rem* 1.2);
|
|
||||||
.ant-select{
|
|
||||||
font-size: 1.6rem;
|
|
||||||
.ant-select-selector::after{
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.ant-select-selector .ant-select-selection-item{
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.ant-select-selector{
|
|
||||||
height: auto;
|
|
||||||
padding: 1rem 1rem;
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_content_item_generate_btn{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
top: auto;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-around;
|
|
||||||
.input_box{
|
|
||||||
flex: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.started_btn{
|
|
||||||
// width: 13rem;
|
|
||||||
// text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right{
|
|
||||||
width: 75%;
|
|
||||||
padding-left: 2rem;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.productImg_right_item_box{
|
|
||||||
height: 40%;
|
|
||||||
display: flex;
|
|
||||||
overflow-x: auto;
|
|
||||||
background: #f6f6fa;
|
|
||||||
border-radius: 2rem;
|
|
||||||
margin-bottom: 2%;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
position: relative;
|
|
||||||
.mark_loading{
|
|
||||||
position: absolute
|
|
||||||
}
|
|
||||||
.productImg_right_item{
|
|
||||||
height: 100%;
|
|
||||||
padding: 1rem 0;
|
|
||||||
margin-right: 1rem;
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
.productImg_right_item_imgBox{
|
|
||||||
height: 100%;
|
|
||||||
.loadingImg{
|
|
||||||
width: 14rem;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.productImg_right_item_iconRight,.productImg_right_item_iconLeft{
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
>div{
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
>div:last-child{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right_item_iconRight{
|
|
||||||
right: 2rem;
|
|
||||||
}
|
|
||||||
.productImg_right_item_iconLeft{
|
|
||||||
left: 2rem;
|
|
||||||
}
|
|
||||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
background: #fff;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: .5rem;
|
|
||||||
border: .1rem solid #ccc;
|
|
||||||
.fi-sr-heart{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right_item_menu{
|
|
||||||
ul{
|
|
||||||
top: 100%;
|
|
||||||
position: absolute;
|
|
||||||
width: 13rem;
|
|
||||||
left: 0;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: calc(1rem*1.2);
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 3;
|
|
||||||
li{
|
|
||||||
background: #cccccc;
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
li:hover{
|
|
||||||
// background: rgba(0,0,0,.4);
|
|
||||||
background: #999999;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right_item:hover{
|
|
||||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right_item:last-child{
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productImg_right_item_box:last-child{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.productImg_right_titleBtn{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -71,7 +71,20 @@
|
|||||||
</a-slider> -->
|
</a-slider> -->
|
||||||
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||||
|
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||||
|
</div>
|
||||||
|
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
|
||||||
|
<a-slider class="system_silder"
|
||||||
|
v-model:value="productimgBrightenValue"
|
||||||
|
:tooltipVisible="false"
|
||||||
|
:max="3"
|
||||||
|
:min="1"
|
||||||
|
:step="0.1"
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
<input type="number" readonly v-model="productimgBrightenValue">
|
||||||
|
</div>
|
||||||
<div class="productImg_content_item_generate_btn input_border">
|
<div class="productImg_content_item_generate_btn input_border">
|
||||||
<div class="input_box">
|
<div class="input_box">
|
||||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||||
@@ -89,16 +102,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
||||||
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
|
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
|
||||||
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
|
<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
||||||
|
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl">
|
||||||
|
|
||||||
<div class="img_operate_block" v-if="isLike">
|
<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>
|
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
|
||||||
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
|
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="scaleImage_nav">
|
||||||
<div class="scaleImage_nav" @keydown="handleKeyDown">
|
|
||||||
<div class="nav_left">
|
<div class="nav_left">
|
||||||
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -111,42 +124,46 @@
|
|||||||
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div>
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
|
<a-spin size="large" />
|
||||||
<a-image
|
</div>
|
||||||
:width="200"
|
|
||||||
:style="{ display: 'none' }"
|
|
||||||
:preview="{
|
|
||||||
visible,
|
|
||||||
onVisibleChange: setVisible,
|
|
||||||
}"
|
|
||||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, h, ref ,toRefs,computed,reactive, nextTick} from "vue";
|
import { defineComponent, h, ref ,toRefs,createVNode,reactive, nextTick} from "vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
// import domTurnImg from '@/tool/domTurnImg'
|
import { Modal } from "ant-design-vue";
|
||||||
import { useStore } from "vuex";
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { downloadIamge } from "@/tool/util";
|
import { downloadIamge } from "@/tool/util";
|
||||||
import { getCookie,setCookie } from "@/tool/cookie";
|
import { getCookie,setCookie } from "@/tool/cookie";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components:{generalMiniCanvas},
|
||||||
props:{
|
props:{
|
||||||
productData:{
|
productData:{
|
||||||
type:Object,
|
type:Object,
|
||||||
default:{
|
default:{
|
||||||
similarity:30,
|
similarity:30,
|
||||||
|
brightenValue:1,
|
||||||
upload:'',
|
upload:'',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
isCanvas:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false,
|
||||||
|
},
|
||||||
|
workspace:{
|
||||||
|
type:Object,
|
||||||
|
default:{
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
setup(props:any,{emit}) {
|
setup(props:any,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
let {t} = useI18n()
|
||||||
let productimg = reactive({
|
let productimg = reactive({
|
||||||
isProductimg:false,
|
isProductimg:false,
|
||||||
productimgSearchName:'',
|
productimgSearchName:'',
|
||||||
@@ -154,6 +171,7 @@ export default defineComponent({
|
|||||||
productimgRemProductimg:false,
|
productimgRemProductimg:false,
|
||||||
productimgIsProductimg:false,
|
productimgIsProductimg:false,
|
||||||
productimgSimilarity:props.productData.similarity,
|
productimgSimilarity:props.productData.similarity,
|
||||||
|
productimgBrightenValue:props.productData.brightenValue,
|
||||||
productimgUpload:props.productData.upload,
|
productimgUpload:props.productData.upload,
|
||||||
productimgRelightDirection:props.productData.RelightDirection,
|
productimgRelightDirection:props.productData.RelightDirection,
|
||||||
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
||||||
@@ -187,6 +205,7 @@ export default defineComponent({
|
|||||||
direction:productimg.productimgRelightDirection,
|
direction:productimg.productimgRelightDirection,
|
||||||
prompt:productimg.productimgSearchName,
|
prompt:productimg.productimgSearchName,
|
||||||
toProductImageVOList:[obj],
|
toProductImageVOList:[obj],
|
||||||
|
brightenValue:productimg.productimgBrightenValue,
|
||||||
userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
|
userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
|
||||||
imageStrength:(100 - imageStrength)/100,
|
imageStrength:(100 - imageStrength)/100,
|
||||||
}
|
}
|
||||||
@@ -203,6 +222,7 @@ export default defineComponent({
|
|||||||
Https.axiosPost(url, data).then(
|
Https.axiosPost(url, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
isShowMark.value = false
|
isShowMark.value = false
|
||||||
|
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||||
let arr:any = []
|
let arr:any = []
|
||||||
rv.forEach((item:any)=>{
|
rv.forEach((item:any)=>{
|
||||||
arr.push(item.taskId)
|
arr.push(item.taskId)
|
||||||
@@ -269,7 +289,11 @@ export default defineComponent({
|
|||||||
if(generateProceedList){
|
if(generateProceedList){
|
||||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||||
let str = generateProceedList.join(',')
|
let str = generateProceedList.join(',')
|
||||||
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
let data = {
|
||||||
|
uniqueId:str,
|
||||||
|
userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
type:scaleImageList.value[scaleImageIndex.value]?.resultType
|
||||||
|
}
|
||||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
generateProceedList = []
|
generateProceedList = []
|
||||||
@@ -278,7 +302,51 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
let submitBase64Data = async (rv:any)=>{
|
||||||
|
loadingShow.value = true
|
||||||
|
let isOverlay = false
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: t('scaleImage.overlayOrNot'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
resolve()
|
||||||
|
isOverlay = true
|
||||||
|
|
||||||
|
},
|
||||||
|
onCancel(){
|
||||||
|
isOverlay = false
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
let data = {
|
||||||
|
"base64": rv,
|
||||||
|
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
|
||||||
|
"gender": props.workspace.sexEnum.value,
|
||||||
|
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
|
||||||
|
"isOverride":isOverlay,
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
|
||||||
|
(rv) => {
|
||||||
|
rv.imgUrl = rv.url
|
||||||
|
rv.status = 'Success'
|
||||||
|
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
|
||||||
|
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
|
||||||
|
isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
|
||||||
|
loadingShow.value = false
|
||||||
|
scaleImage.value = false
|
||||||
|
}
|
||||||
|
).catch(res=>{
|
||||||
|
loadingShow.value = false
|
||||||
|
});
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
|
t,
|
||||||
...toRefs(productimg),
|
...toRefs(productimg),
|
||||||
scaleImage,
|
scaleImage,
|
||||||
isShowMark,
|
isShowMark,
|
||||||
@@ -293,12 +361,13 @@ export default defineComponent({
|
|||||||
robotAssits,
|
robotAssits,
|
||||||
getPrductimg,
|
getPrductimg,
|
||||||
removeProductimg,
|
removeProductimg,
|
||||||
|
submitBase64Data,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// moodTemplateId: "", //模板id
|
// moodTemplateId: "", //模板id
|
||||||
|
isNext:false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
@@ -331,26 +400,63 @@ export default defineComponent({
|
|||||||
this.scaleImage = false
|
this.scaleImage = false
|
||||||
this.scaleImageList = []
|
this.scaleImageList = []
|
||||||
this.scaleImageIndex = 0
|
this.scaleImageIndex = 0
|
||||||
|
this.isNext = false
|
||||||
document.removeEventListener('keydown',this.setKeydown)
|
document.removeEventListener('keydown',this.setKeydown)
|
||||||
},
|
},
|
||||||
lastStep(){
|
lastStep(){
|
||||||
|
if(this.productimgIsProductimg) return
|
||||||
|
if(this.isNext)return
|
||||||
|
let num = this.scaleImageIndex
|
||||||
if(this.scaleImageIndex <= 0){
|
if(this.scaleImageIndex <= 0){
|
||||||
}else{
|
}else{
|
||||||
this.scaleImageIndex -= 1
|
num -=1
|
||||||
|
this.setImageIndex(num)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
nextStep(){
|
nextStep(){
|
||||||
|
if(this.productimgIsProductimg) return
|
||||||
|
if(this.isNext)return
|
||||||
|
let num = this.scaleImageIndex
|
||||||
if(this.scaleImageIndex >= this.scaleImageList.length-1){
|
if(this.scaleImageIndex >= this.scaleImageList.length-1){
|
||||||
}else{
|
}else{
|
||||||
this.scaleImageIndex += 1
|
num += 1
|
||||||
|
this.setImageIndex(num)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
download(){
|
download(){
|
||||||
downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
|
downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
|
||||||
},
|
},
|
||||||
setScaleImageIndex(index:any){
|
setScaleImageIndex(index:any){
|
||||||
this.scaleImageIndex = index
|
// this.scaleImageIndex = index
|
||||||
|
this.setImageIndex(index)
|
||||||
|
},
|
||||||
|
setImageIndex(index:any){
|
||||||
|
if(this.isNext)return
|
||||||
|
let this_ = this
|
||||||
|
if(this.isCanvas){
|
||||||
|
this.isNext = true
|
||||||
|
new Promise((resolve,reject)=>{
|
||||||
|
Modal.confirm({
|
||||||
|
title: this.t('scaleImage.submitCanvas'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
this_.scaleImageIndex = index
|
||||||
|
this_.isNext = false
|
||||||
|
resolve('')
|
||||||
|
},
|
||||||
|
onCancel(){
|
||||||
|
this_.isNext = false
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.scaleImageIndex = index
|
||||||
|
}
|
||||||
},
|
},
|
||||||
LikeFile(item:any,str:string){
|
LikeFile(item:any,str:string){
|
||||||
let parent:any = this.$parent
|
let parent:any = this.$parent
|
||||||
@@ -370,8 +476,12 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
<style lang="less">
|
.scaleImage_modal{
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less" scoped>
|
||||||
.scaleImage_modal {
|
.scaleImage_modal {
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -380,12 +490,14 @@ export default defineComponent({
|
|||||||
.scaleImage_content{
|
.scaleImage_content{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: calc(5rem*1.2);
|
// margin-top: calc(5rem*1.2);
|
||||||
height: 75%;
|
// height: 75%;
|
||||||
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.productImg_modal{
|
.productImg_modal{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
z-index: 9;
|
||||||
.productImg_left{
|
.productImg_left{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.productImg_content_item_generate_btn{
|
.productImg_content_item_generate_btn{
|
||||||
@@ -398,10 +510,15 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.scaleImage_content_imgBox{
|
.scaleImage_content_imgBox{
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 70rem;
|
// max-width: 70rem;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
img{
|
img{
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
max-width: 40rem;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
&.active{
|
&.active{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -427,6 +544,7 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
.operate_icon{
|
.operate_icon{
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -444,7 +562,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.scaleImage_content:hover{
|
.scaleImage_content_imgBox:hover{
|
||||||
.img_operate_block{
|
.img_operate_block{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@@ -456,6 +574,9 @@ export default defineComponent({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
.nav_left,.nav_right{
|
.nav_left,.nav_right{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|||||||
@@ -79,9 +79,11 @@ export default defineComponent({
|
|||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
max-height: 80vh;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
video{
|
video{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-height: 80vh;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -62,12 +62,16 @@
|
|||||||
</a-select> -->
|
</a-select> -->
|
||||||
<div>{{ sex.label }}</div>
|
<div>{{ sex.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
|
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="touchmove($event)">
|
||||||
<div class="ponit_title">{{point.title}}</div>
|
<div class="ponit_title">{{point.title}}</div>
|
||||||
<div class="point_list">
|
<div class="point_list">
|
||||||
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
|
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="placement_point_item placement_point_scale">
|
||||||
|
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
|
||||||
|
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
|
||||||
|
</div>
|
||||||
<div class="placement_point_item placement_point_item_btn">
|
<div class="placement_point_item placement_point_item_btn">
|
||||||
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
|
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,7 +93,7 @@
|
|||||||
<div class="img_content_block" ref="imgbox">
|
<div class="img_content_block" ref="imgbox">
|
||||||
|
|
||||||
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
|
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
|
||||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)" @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
|
||||||
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
||||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -142,6 +146,7 @@ import { VueCropper } from "vue-cropper";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
@@ -184,7 +189,8 @@ export default defineComponent({
|
|||||||
sexList,
|
sexList,
|
||||||
cropperTime,
|
cropperTime,
|
||||||
|
|
||||||
t
|
t,
|
||||||
|
getMousePosition
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -209,17 +215,22 @@ export default defineComponent({
|
|||||||
autoCropWidth: '0', //默认生成截图框宽度
|
autoCropWidth: '0', //默认生成截图框宽度
|
||||||
autoCropHeight: '0', //默认生成截图框高度
|
autoCropHeight: '0', //默认生成截图框高度
|
||||||
fixed: true, //是否开启截图框宽高固定比例
|
fixed: true, //是否开启截图框宽高固定比例
|
||||||
|
// fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用
|
||||||
fixedBox: true, //固定截图框大小，不允许改变
|
fixedBox: true, //固定截图框大小，不允许改变
|
||||||
fixedNumber: [1, 2.125], //截图框的宽高比例
|
fixedNumber: [1, 2.125], //截图框的宽高比例
|
||||||
full: false, //false按原比例裁切图片，不失真
|
// full: true, //false按原比例裁切图片，不失真
|
||||||
|
full: false, //false按原比例裁切图片，不失真//上传模特使用
|
||||||
|
// canMove: false, //上传图片是否可以移动//上传系统模特使用
|
||||||
canMove: true, //上传图片是否可以移动
|
canMove: true, //上传图片是否可以移动
|
||||||
canMoveBox: false, //截图框能否拖动
|
canMoveBox: false, //截图框能否拖动
|
||||||
original: false, //上传图片按照原始比例渲染
|
original: false, //上传图片按照原始比例渲染
|
||||||
centerBox: false, //截图框是否被限制在图片里面
|
centerBox: false, //截图框是否被限制在图片里面
|
||||||
height: true, //是否按照设备的dpr 输出等比例图片
|
height: true, //是否按照设备的dpr 输出等比例图片
|
||||||
|
// infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||||
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||||
maxImgSize:'2000', //限制图片最大宽度和高度
|
maxImgSize:'2000', //限制图片最大宽度和高度
|
||||||
enlarge: 7, //图片根据截图框输出比例倍数
|
enlarge: 1, //图片根据截图框输出比例倍数
|
||||||
|
// enlarge: 7, //图片根据截图框输出比例倍数
|
||||||
mode: 'auto 90%', //图片默认渲染方式
|
mode: 'auto 90%', //图片默认渲染方式
|
||||||
limitMinSize:'100%',
|
limitMinSize:'100%',
|
||||||
imgLoad:()=>{
|
imgLoad:()=>{
|
||||||
@@ -271,7 +282,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
|
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
|
||||||
imgBoxSize.addEventListener('mousemove',this.startMove)
|
imgBoxSize.addEventListener('mousemove',this.mouseMove)
|
||||||
|
imgBoxSize.addEventListener('touchmove',this.touchmove)
|
||||||
this.setImageSize()
|
this.setImageSize()
|
||||||
})
|
})
|
||||||
},800)
|
},800)
|
||||||
@@ -429,7 +441,14 @@ export default defineComponent({
|
|||||||
changeRemoveStatus(){
|
changeRemoveStatus(){
|
||||||
this.isRemoveStatus = true
|
this.isRemoveStatus = true
|
||||||
},
|
},
|
||||||
|
mouseMove(event:any){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
this.startMove(e)
|
||||||
|
},
|
||||||
|
touchmove(event:any){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.startMove(e)
|
||||||
|
},
|
||||||
startMove(event:any){
|
startMove(event:any){
|
||||||
if(this.isRemoveStatus){
|
if(this.isRemoveStatus){
|
||||||
return
|
return
|
||||||
@@ -452,6 +471,7 @@ export default defineComponent({
|
|||||||
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
|
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
|
||||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
|
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
|
||||||
document.addEventListener('mouseup', this.getMouseOver);
|
document.addEventListener('mouseup', this.getMouseOver);
|
||||||
|
document.addEventListener('touchend', this.getMouseOver);
|
||||||
this.$forceUpdate()
|
this.$forceUpdate()
|
||||||
this.setBoundarySign()
|
this.setBoundarySign()
|
||||||
|
|
||||||
@@ -513,6 +533,9 @@ export default defineComponent({
|
|||||||
this.startDian = false
|
this.startDian = false
|
||||||
this.currentSign = {}
|
this.currentSign = {}
|
||||||
document.removeEventListener('mouseup', this.getMouseOver);
|
document.removeEventListener('mouseup', this.getMouseOver);
|
||||||
|
document.removeEventListener('touchend', this.getMouseOver);
|
||||||
|
document.removeEventListener('mousemove',this.mouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.touchmove)
|
||||||
},
|
},
|
||||||
|
|
||||||
closeModal(){
|
closeModal(){
|
||||||
@@ -601,20 +624,25 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
changeScale(num:any) {
|
||||||
|
num = num || 1;
|
||||||
|
let cropper:any = this.$refs.cropper
|
||||||
|
cropper.changeScale(num);
|
||||||
|
},
|
||||||
async confrimSubmit(){
|
async confrimSubmit(){
|
||||||
|
let modelType = 'Library'
|
||||||
|
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||||
|
modelType = this.modelType
|
||||||
|
}
|
||||||
let param = {
|
let param = {
|
||||||
libraryId:this.printObject.id,
|
libraryId:this.printObject.id,
|
||||||
templateId:this.printObject.templateId || null,
|
templateId:this.printObject.templateId || null,
|
||||||
modelType:'Library',
|
modelType:modelType,
|
||||||
modelSex:this.sex,
|
modelSex:this.sex,
|
||||||
checkMd5:1,
|
checkMd5:1,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
...await this.getPrintLocation()
|
...await this.getPrintLocation()
|
||||||
}
|
}
|
||||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
|
||||||
param.modelType = this.modelType
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||||
@@ -630,19 +658,19 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
customRequest(){
|
customRequest(){
|
||||||
|
let modelType = 'Library'
|
||||||
|
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||||
|
modelType = this.modelType
|
||||||
|
}
|
||||||
let new_data = {
|
let new_data = {
|
||||||
file:this.printObject.file,
|
file:this.printObject.file,
|
||||||
level1Type:'Models',
|
level1Type:'Models',
|
||||||
level2Type:'',
|
level2Type:'',
|
||||||
checkMd5:1,
|
checkMd5:1,
|
||||||
sex:this.sex,
|
sex:this.sex,
|
||||||
modelType:'Library',
|
modelType:modelType,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
}
|
}
|
||||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
|
||||||
new_data.modelType = this.modelType
|
|
||||||
// new_data.sex = this.sex
|
|
||||||
}
|
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
return new Promise((resolve,reject)=>{
|
return new Promise((resolve,reject)=>{
|
||||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||||
@@ -688,20 +716,22 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
async getPrintLocation(){
|
async getPrintLocation(){
|
||||||
let {width , height} = this.imgBox
|
let {width , height} = this.imgBox
|
||||||
if(this.modelType == 'System'){
|
// if(this.modelType == 'System'){
|
||||||
await new Promise((resolve, reject) => {
|
// await new Promise((resolve, reject) => {
|
||||||
let img = new Image()
|
// let img = new Image()
|
||||||
img.src = this.option.img
|
// img.src = this.option.img
|
||||||
img.onload = () => {
|
// img.onload = () => {
|
||||||
width = img.width
|
// width = img.width
|
||||||
height = img.height
|
// height = img.height
|
||||||
resolve(true)
|
// resolve(true)
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
|
||||||
let locationData:any = {}
|
let locationData:any = {}
|
||||||
let returnData:any = {}
|
let returnData:any = {}
|
||||||
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||||
|
|
||||||
//进行字段归类
|
//进行字段归类
|
||||||
for(let item of newLocationList){
|
for(let item of newLocationList){
|
||||||
locationData[item.field] = locationData[item.field] || []
|
locationData[item.field] = locationData[item.field] || []
|
||||||
@@ -945,6 +975,25 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.placement_point_scale{
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid #9a9a9a;
|
||||||
|
border-radius: 1rem;
|
||||||
|
width: 40%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
div:nth-child(1){
|
||||||
|
border-right: 1px solid #9a9a9a;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.placement_content_operate_list{
|
.placement_content_operate_list{
|
||||||
@@ -1069,7 +1118,7 @@ export default defineComponent({
|
|||||||
.vue-cropper{
|
.vue-cropper{
|
||||||
.cropper-crop-box{
|
.cropper-crop-box{
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
<div class="models_placement_content">
|
<div class="models_placement_content">
|
||||||
<div class="plcaement_point_content">
|
<div class="plcaement_point_content">
|
||||||
<div class="select_block">
|
<div class="select_block">
|
||||||
<a-select
|
<!-- <a-select
|
||||||
ref="select"
|
ref="select"
|
||||||
v-model:value="sex.value"
|
v-model:value="sex.value"
|
||||||
:options="sexList"
|
:options="sexList"
|
||||||
@@ -59,12 +59,13 @@
|
|||||||
style="color: #343579"
|
style="color: #343579"
|
||||||
></span
|
></span
|
||||||
></template>
|
></template>
|
||||||
</a-select>
|
</a-select> -->
|
||||||
|
<div>{{ sex.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="startMove($event)">
|
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="touchmove($event)">
|
||||||
<div class="ponit_title">{{point.title}}</div>
|
<div class="ponit_title">{{point.title}}</div>
|
||||||
<div class="point_list">
|
<div class="point_list">
|
||||||
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
|
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="placement_point_item placement_point_scale">
|
<div class="placement_point_item placement_point_scale">
|
||||||
@@ -92,7 +93,7 @@
|
|||||||
<div class="img_content_block" ref="imgbox">
|
<div class="img_content_block" ref="imgbox">
|
||||||
|
|
||||||
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
|
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
|
||||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
|
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)" @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
|
||||||
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
||||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -145,6 +146,7 @@ import { VueCropper } from "vue-cropper";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
@@ -168,32 +170,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
])
|
])
|
||||||
let cropperTime:any = ref()
|
let cropperTime:any = ref()
|
||||||
let option:any = ref({
|
|
||||||
img: '', //裁剪图片的地址
|
|
||||||
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
|
|
||||||
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
|
|
||||||
info: false, //图片大小信息
|
|
||||||
canScale: true, //图片是否允许滚轮缩放
|
|
||||||
autoCrop: true, //是否默认生成截图框
|
|
||||||
autoCropWidth: '0', //默认生成截图框宽度
|
|
||||||
autoCropHeight: '0', //默认生成截图框高度
|
|
||||||
fixed: true, //是否开启截图框宽高固定比例
|
|
||||||
fixedBox: true, //固定截图框大小，不允许改变
|
|
||||||
fixedNumber: [1, 2.125], //截图框的宽高比例
|
|
||||||
full: false, //false按原比例裁切图片，不失真
|
|
||||||
canMove: true, //上传图片是否可以移动
|
|
||||||
canMoveBox: false, //截图框能否拖动
|
|
||||||
original: false, //上传图片按照原始比例渲染
|
|
||||||
centerBox: false, //截图框是否被限制在图片里面
|
|
||||||
height: true, //是否按照设备的dpr 输出等比例图片
|
|
||||||
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
|
||||||
maxImgSize:'2000', //限制图片最大宽度和高度
|
|
||||||
enlarge: 7, //图片根据截图框输出比例倍数
|
|
||||||
mode: 'auto 90%', //图片默认渲染方式
|
|
||||||
limitMinSize:'100%',
|
|
||||||
imgLoad:()=>{
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
@@ -211,8 +188,9 @@ export default defineComponent({
|
|||||||
sex,
|
sex,
|
||||||
sexList,
|
sexList,
|
||||||
cropperTime,
|
cropperTime,
|
||||||
option,
|
|
||||||
t
|
t,
|
||||||
|
getMousePosition
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -226,21 +204,48 @@ export default defineComponent({
|
|||||||
perviewUrl:'',//预览的图片地址
|
perviewUrl:'',//预览的图片地址
|
||||||
isShowMark:false,
|
isShowMark:false,
|
||||||
modelType:'Library',
|
modelType:'Library',
|
||||||
|
|
||||||
|
option:{
|
||||||
|
img: '', //裁剪图片的地址
|
||||||
|
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
|
||||||
|
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
|
||||||
|
info: false, //图片大小信息
|
||||||
|
canScale: true, //图片是否允许滚轮缩放
|
||||||
|
autoCrop: true, //是否默认生成截图框
|
||||||
|
autoCropWidth: '0', //默认生成截图框宽度
|
||||||
|
autoCropHeight: '0', //默认生成截图框高度
|
||||||
|
fixed: true, //是否开启截图框宽高固定比例
|
||||||
|
// fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用
|
||||||
|
fixedBox: true, //固定截图框大小，不允许改变
|
||||||
|
fixedNumber: [1, 2.125], //截图框的宽高比例
|
||||||
|
full: false, //false按原比例裁切图片，不失真
|
||||||
|
// canMove: false, //上传图片是否可以移动//上传系统模特使用
|
||||||
|
canMove: true, //上传图片是否可以移动
|
||||||
|
canMoveBox: false, //截图框能否拖动
|
||||||
|
original: false, //上传图片按照原始比例渲染
|
||||||
|
centerBox: false, //截图框是否被限制在图片里面
|
||||||
|
height: true, //是否按照设备的dpr 输出等比例图片
|
||||||
|
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||||
|
maxImgSize:'2000', //限制图片最大宽度和高度
|
||||||
|
enlarge: 7, //图片根据截图框输出比例倍数
|
||||||
|
mode: 'auto 90%', //图片默认渲染方式
|
||||||
|
limitMinSize:'100%',
|
||||||
|
imgLoad:()=>{
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
let userInfo:any = getCookie("userInfo")
|
let userInfo:any = getCookie("userInfo")
|
||||||
this.userInfo = JSON.parse(userInfo);
|
this.userInfo = JSON.parse(userInfo);
|
||||||
// this.getSex()
|
// this.getSex()
|
||||||
this.option.imgLoad = ()=>{
|
|
||||||
this.setImageSize()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
formatter(value:number){
|
formatter(value:number){
|
||||||
return `${value}%`;
|
return `${value}%`;
|
||||||
},
|
},
|
||||||
showPlacementModal(data:any,sex:any){
|
showPlacementModal(data:any,sex:any){
|
||||||
|
// this.sex = arr[0].value
|
||||||
this.sex = sex
|
this.sex = sex
|
||||||
this.placementShow = true
|
this.placementShow = true
|
||||||
this.printObject = {
|
this.printObject = {
|
||||||
@@ -250,6 +255,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
|
let image:any = new Image()
|
||||||
|
image.src = this.option.img
|
||||||
let imgbox:any = this.$refs.imgbox
|
let imgbox:any = this.$refs.imgbox
|
||||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||||
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
|
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
|
||||||
@@ -272,7 +279,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
|
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
|
||||||
imgBoxSize.addEventListener('touchmove',this.startMove)
|
imgBoxSize.addEventListener('mousemove',this.mouseMove)
|
||||||
|
imgBoxSize.addEventListener('touchmove',this.touchmove)
|
||||||
this.setImageSize()
|
this.setImageSize()
|
||||||
})
|
})
|
||||||
},800)
|
},800)
|
||||||
@@ -288,26 +296,32 @@ export default defineComponent({
|
|||||||
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
|
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
|
||||||
cropper.cropOffsertY = cropper.getImgAxis().y1
|
cropper.cropOffsertY = cropper.getImgAxis().y1
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
realTime(data:any) {
|
realTime(data:any) {
|
||||||
this.cropperTime = setTimeout(()=>{
|
let cropper:any = this.$refs.cropper
|
||||||
this.setImageSize()
|
// if(cropper.h == cropper.cropH){
|
||||||
clearTimeout(this.cropperTime)
|
this.cropperTime = setTimeout(()=>{
|
||||||
},100)
|
this.setImageSize()
|
||||||
|
clearTimeout(this.cropperTime)
|
||||||
|
|
||||||
|
},100)
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
setImageSize(){
|
setImageSize(){
|
||||||
this.setCropperWH()
|
this.setCropperWH()
|
||||||
let imgbox:any = this.$refs.imgbox
|
let imgbox:any = this.$refs.imgbox
|
||||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')?.[0]
|
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||||
let position = imgBoxSize.getBoundingClientRect()
|
let position = imgBoxSize.getBoundingClientRect()
|
||||||
let position1 = imgbox.getBoundingClientRect()
|
let position1 = imgbox.getBoundingClientRect()
|
||||||
let cropper:any = this.$refs.cropper
|
let cropper:any = this.$refs.cropper
|
||||||
this.imgBox = {
|
this.imgBox = {
|
||||||
width:cropper.cropW,
|
width:cropper.cropW,
|
||||||
height:cropper.cropH,
|
height:cropper.cropH,
|
||||||
left : position.left,
|
left : position1.left,
|
||||||
top:position.top,
|
top:position1.top,
|
||||||
scrollTop:imgBoxSize.scrollTop || 0,
|
scrollTop:imgBoxSize.scrollTop || 0,
|
||||||
x:cropper.getCropAxis().x1,
|
x:cropper.getCropAxis().x1,
|
||||||
y:cropper.getCropAxis().y1,
|
y:cropper.getCropAxis().y1,
|
||||||
@@ -323,7 +337,6 @@ export default defineComponent({
|
|||||||
label:item.value,
|
label:item.value,
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
// this.sex = arr[0].value
|
|
||||||
this.sexList = arr
|
this.sexList = arr
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -425,31 +438,40 @@ export default defineComponent({
|
|||||||
changeRemoveStatus(){
|
changeRemoveStatus(){
|
||||||
this.isRemoveStatus = true
|
this.isRemoveStatus = true
|
||||||
},
|
},
|
||||||
|
mouseMove(event:any){
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
this.startMove(e)
|
||||||
|
},
|
||||||
|
touchmove(event:any){
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
this.startMove(e)
|
||||||
|
},
|
||||||
startMove(event:any){
|
startMove(event:any){
|
||||||
if(this.isRemoveStatus){
|
if(this.isRemoveStatus){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let imgbox:any = this.$refs.imgbox
|
let imgbox:any = this.$refs.imgbox
|
||||||
let scrollTop = imgbox.scrollTop;
|
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||||
if(event.targetTouches[0].pageX > this.imgBox.left){
|
let scrollTop = imgBoxSize.scrollTop;
|
||||||
if(this.intObj){
|
if(this.intObj){
|
||||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
|
this.currentSign.left = event.clientX - this.imgBox.left
|
||||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
|
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||||
this.currentSign.color = this.intObj.color
|
this.currentSign.color = this.intObj.color
|
||||||
this.currentSign.type= this.intObj.type
|
this.currentSign.type= this.intObj.type
|
||||||
this.currentSign.field = this.intObj.field
|
this.currentSign.field = this.intObj.field
|
||||||
this.locationList.push(this.currentSign)
|
this.locationList.push(this.currentSign)
|
||||||
this.intObj.show = false
|
this.intObj.show = false
|
||||||
this.intObj = null
|
this.intObj = null
|
||||||
}else{
|
}else{
|
||||||
if(this.startDian){
|
//鼠标移动
|
||||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12
|
if(this.startDian){
|
||||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12
|
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
|
||||||
document.addEventListener('touchend', this.getMouseOver);
|
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
|
||||||
this.$forceUpdate()
|
document.addEventListener('mouseup', this.getMouseOver);
|
||||||
this.setBoundarySign()
|
document.addEventListener('touchend', this.getMouseOver);
|
||||||
}
|
this.$forceUpdate()
|
||||||
|
this.setBoundarySign()
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -496,8 +518,9 @@ export default defineComponent({
|
|||||||
// 计算出鼠标在签名域上的偏移
|
// 计算出鼠标在签名域上的偏移
|
||||||
// this.moveOriginal.posX = event.offsetX
|
// this.moveOriginal.posX = event.offsetX
|
||||||
// this.moveOriginal.posY = event.offsetY // 1为边框
|
// this.moveOriginal.posY = event.offsetY // 1为边框
|
||||||
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
|
this.moveOriginal.posX = 0
|
||||||
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
|
this.moveOriginal.posY = 0 // 1为边框
|
||||||
|
|
||||||
this.startDian = true
|
this.startDian = true
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -506,7 +529,10 @@ export default defineComponent({
|
|||||||
getMouseOver(){//鼠标抬起
|
getMouseOver(){//鼠标抬起
|
||||||
this.startDian = false
|
this.startDian = false
|
||||||
this.currentSign = {}
|
this.currentSign = {}
|
||||||
document.removeEventListener('touchend', this.getMouseOver);
|
document.removeEventListener('mouseup', this.getMouseOver);
|
||||||
|
document.removeEventListener('touchend', this.getMouseOver);
|
||||||
|
document.removeEventListener('mousemove',this.mouseMove)
|
||||||
|
document.removeEventListener('touchmove',this.touchmove)
|
||||||
},
|
},
|
||||||
|
|
||||||
closeModal(){
|
closeModal(){
|
||||||
@@ -546,6 +572,7 @@ export default defineComponent({
|
|||||||
this.locationList = []
|
this.locationList = []
|
||||||
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
|
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
|
||||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||||
|
// this.locationList = JSON.parse(JSON.stringify(this.locationList))
|
||||||
},
|
},
|
||||||
|
|
||||||
submitPlacement(){
|
submitPlacement(){
|
||||||
@@ -558,7 +585,7 @@ export default defineComponent({
|
|||||||
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
||||||
// })
|
// })
|
||||||
let cropper:any = this.$refs.cropper,
|
let cropper:any = this.$refs.cropper,
|
||||||
that = this
|
that = this
|
||||||
if((this.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){
|
if((this.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){
|
||||||
if(this.printObject.templateId){
|
if(this.printObject.templateId){
|
||||||
this.printObject.id = this.printObject.relationId
|
this.printObject.id = this.printObject.relationId
|
||||||
@@ -599,20 +626,20 @@ export default defineComponent({
|
|||||||
let cropper:any = this.$refs.cropper
|
let cropper:any = this.$refs.cropper
|
||||||
cropper.changeScale(num);
|
cropper.changeScale(num);
|
||||||
},
|
},
|
||||||
confrimSubmit(){
|
async confrimSubmit(){
|
||||||
|
let modelType = 'Library'
|
||||||
|
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||||
|
modelType = this.modelType
|
||||||
|
}
|
||||||
let param = {
|
let param = {
|
||||||
libraryId:this.printObject.id,
|
libraryId:this.printObject.id,
|
||||||
templateId:this.printObject.templateId || null,
|
templateId:this.printObject.templateId || null,
|
||||||
modelType:'Library',
|
modelType:modelType,
|
||||||
modelSex:this.sex,
|
modelSex:this.sex,
|
||||||
checkMd5:1,
|
checkMd5:1,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
...this.getPrintLocation()
|
...await this.getPrintLocation()
|
||||||
}
|
}
|
||||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
|
||||||
param.modelType = this.modelType
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||||
@@ -628,19 +655,19 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
customRequest(){
|
customRequest(){
|
||||||
|
let modelType = 'Library'
|
||||||
|
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||||
|
modelType = this.modelType
|
||||||
|
}
|
||||||
let new_data = {
|
let new_data = {
|
||||||
file:this.printObject.file,
|
file:this.printObject.file,
|
||||||
level1Type:'Models',
|
level1Type:'Models',
|
||||||
level2Type:'',
|
level2Type:'',
|
||||||
checkMd5:1,
|
checkMd5:1,
|
||||||
sex:this.sex,
|
sex:this.sex,
|
||||||
modelType:'Library',
|
modelType:modelType,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
}
|
}
|
||||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
|
||||||
new_data.modelType = this.modelType
|
|
||||||
new_data.sex = this.sex
|
|
||||||
}
|
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
return new Promise((resolve,reject)=>{
|
return new Promise((resolve,reject)=>{
|
||||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||||
@@ -684,11 +711,26 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getPrintLocation(){
|
async getPrintLocation(){
|
||||||
let {width , height} = this.imgBox
|
let {width , height} = this.imgBox
|
||||||
|
console.log(width,height);
|
||||||
|
|
||||||
|
// if(this.modelType == 'System'){
|
||||||
|
// await new Promise((resolve, reject) => {
|
||||||
|
// let img = new Image()
|
||||||
|
// img.src = this.option.img
|
||||||
|
// img.onload = () => {
|
||||||
|
// width = img.width
|
||||||
|
// height = img.height
|
||||||
|
// resolve(true)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
let locationData:any = {}
|
let locationData:any = {}
|
||||||
let returnData:any = {}
|
let returnData:any = {}
|
||||||
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||||
|
|
||||||
//进行字段归类
|
//进行字段归类
|
||||||
for(let item of newLocationList){
|
for(let item of newLocationList){
|
||||||
locationData[item.field] = locationData[item.field] || []
|
locationData[item.field] = locationData[item.field] || []
|
||||||
@@ -703,6 +745,8 @@ export default defineComponent({
|
|||||||
returnData[v.type] = [v.left, v.top]
|
returnData[v.type] = [v.left, v.top]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
console.log(returnData);
|
||||||
|
|
||||||
return returnData
|
return returnData
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -712,17 +756,17 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
printPreview(){
|
async printPreview(){
|
||||||
let file = this.printObject.templateId ? null :this.printObject.file,
|
let file = this.printObject.templateId ? null :this.printObject.file,
|
||||||
models = {
|
models = {
|
||||||
libraryId:this.printObject.relationId || null,
|
libraryId:this.printObject.relationId || null,
|
||||||
templateId:this.printObject.templateId || null,
|
templateId:this.printObject.templateId || null,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
sex:this.sex,
|
sex:this.sex,
|
||||||
...this.getPrintLocation()
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
...await this.getPrintLocation()
|
||||||
}
|
}
|
||||||
let cropper:any = this.$refs.cropper
|
let cropper:any = this.$refs.cropper
|
||||||
cropper.getCropData((value:any)=>{
|
await cropper.getCropData((value:any)=>{
|
||||||
file = base64toFile(value,this.printObject.name);
|
file = base64toFile(value,this.printObject.name);
|
||||||
file.uid = this.printObject.file?.uid?this.printObject.file.uid:''
|
file.uid = this.printObject.file?.uid?this.printObject.file.uid:''
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
@@ -731,7 +775,7 @@ export default defineComponent({
|
|||||||
if(this.isShowMark){
|
if(this.isShowMark){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// this.isShowMark = true
|
this.isShowMark = true
|
||||||
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
this.perviewUrl = rv
|
this.perviewUrl = rv
|
||||||
@@ -741,6 +785,8 @@ export default defineComponent({
|
|||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
backPreview(){
|
backPreview(){
|
||||||
@@ -788,7 +834,7 @@ export default defineComponent({
|
|||||||
.models_placement_body{
|
.models_placement_body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
|
||||||
.palcement_modal_header{
|
.palcement_modal_header{
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 6.6rem;
|
height: 6.6rem;
|
||||||
@@ -850,7 +896,6 @@ export default defineComponent({
|
|||||||
padding: 3rem 2.7rem 0 1.4rem;
|
padding: 3rem 2.7rem 0 1.4rem;
|
||||||
.select_block{
|
.select_block{
|
||||||
// background: #FFFFFF;
|
// background: #FFFFFF;
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
color: #1A1A1A !important;
|
color: #1A1A1A !important;
|
||||||
.ant-select{
|
.ant-select{
|
||||||
@@ -881,7 +926,6 @@ export default defineComponent({
|
|||||||
color: #1A1A1A !important;
|
color: #1A1A1A !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.placement_point_item{
|
.placement_point_item{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -1021,7 +1065,7 @@ export default defineComponent({
|
|||||||
-moz-user-select:none;
|
-moz-user-select:none;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 57.6rem;
|
height: 57.6rem;
|
||||||
.img_content_block{
|
.img_content_block{
|
||||||
width: 40.8rem;
|
width: 40.8rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-height: 63.2rem;
|
max-height: 63.2rem;
|
||||||
@@ -1075,7 +1119,7 @@ export default defineComponent({
|
|||||||
.vue-cropper{
|
.vue-cropper{
|
||||||
.cropper-crop-box{
|
.cropper-crop-box{
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1095,7 +1139,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.placement_img{
|
.placement_img{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: auto;
|
width: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|||||||
@@ -466,6 +466,9 @@ export default defineComponent({
|
|||||||
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
|
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
|
if(rv.systemUser == 4){
|
||||||
|
rv.systemUser = 1
|
||||||
|
}
|
||||||
this.createTimer();
|
this.createTimer();
|
||||||
let isTest = rv.systemUser == 3?true:false
|
let isTest = rv.systemUser == 3?true:false
|
||||||
let isBeginner = rv.isBeginner == 1?true:false
|
let isBeginner = rv.isBeginner == 1?true:false
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="captcha">
|
<div class="captcha">
|
||||||
<input v-for="(c, index) in getCtData" :key="index"
|
<input v-for="(c, index) in getCtData" :key="index"
|
||||||
|
type="number"
|
||||||
v-model="getCtData[index]" ref="input"
|
v-model="getCtData[index]" ref="input"
|
||||||
@input="e => {onInput(e.target.value, index)}"
|
@input="e => {onInput(e.target.value, index)}"
|
||||||
@keydown.delete="e=>{onKeydown(e.target.value, index)}"
|
@keydown.delete="e=>{onKeydown(e.target.value, index)}"
|
||||||
|
|||||||
@@ -237,7 +237,7 @@ export default defineComponent({
|
|||||||
var remain = t_width - width * num_x;
|
var remain = t_width - width * num_x;
|
||||||
var gap_x = remain / (num_x + 1);
|
var gap_x = remain / (num_x + 1);
|
||||||
this.gap_x = gap_x;
|
this.gap_x = gap_x;
|
||||||
this.gap_y = gap_x > 30 ? 30 : gap_x;
|
this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
|
||||||
this.num_x = num_x;
|
this.num_x = num_x;
|
||||||
var poss = [];
|
var poss = [];
|
||||||
for (var i = 0; i < num_x; i++) poss.push(0);
|
for (var i = 0; i < num_x; i++) poss.push(0);
|
||||||
@@ -343,6 +343,8 @@ export default defineComponent({
|
|||||||
width: 50%;
|
width: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
img{
|
img{
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
@@ -373,11 +375,15 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.falls_item_detail{
|
.falls_item_detail{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 40%;
|
// width: 40%;
|
||||||
width: 20%;
|
// width: 20%;
|
||||||
// width: 7rem;
|
// width: 7rem;
|
||||||
width: 70px;
|
// width: 70px;
|
||||||
|
width: auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
>label:nth-child(1){
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
>label{
|
>label{
|
||||||
// cursor: pointer;
|
// cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,11 +49,16 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
||||||
<div class="detail_right_user detail_left_right_item">
|
<div class="detail_right_user detail_left_right_item">
|
||||||
<!-- <div class="detail_right_user_head">
|
<div class="detail_right_user_head" @click="openOtherUsers">
|
||||||
<img v-lazy="scaleImageData?.imgUrl">
|
<img v-lazy="scaleImageData?.avatar">
|
||||||
</div> -->
|
|
||||||
|
</div>
|
||||||
<div class="detail_right_user_content">
|
<div class="detail_right_user_content">
|
||||||
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
|
<div>
|
||||||
|
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
|
||||||
|
<div v-if="scaleImageData.isFollow == 0 && userInfo?.userId != scaleImageData?.accountId" style="margin-bottom: 0;" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else-if="userInfo?.userId != scaleImageData?.accountId" class="started_btn" style="margin-bottom: 0;" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
</div>
|
||||||
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
|
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
|
||||||
<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
|
<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
|
||||||
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
||||||
@@ -267,7 +272,7 @@ import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{fullScreenImg},
|
components:{fullScreenImg},
|
||||||
emits:['deletePorfolio','bbb'],
|
emits:['deletePorfolio'],
|
||||||
setup(props:any,{emit}) {
|
setup(props:any,{emit}) {
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
//首先在setup中定义
|
//首先在setup中定义
|
||||||
@@ -344,7 +349,6 @@ export default defineComponent({
|
|||||||
// let parent:any = this.$parent
|
// let parent:any = this.$parent
|
||||||
// parent.likeFile(item,str)
|
// parent.likeFile(item,str)
|
||||||
// },
|
// },
|
||||||
let getDeatilData = {}
|
|
||||||
let originalGetDetail = ()=>{
|
let originalGetDetail = ()=>{
|
||||||
if(imgData.scaleImageData.jumpable != 1){
|
if(imgData.scaleImageData.jumpable != 1){
|
||||||
return message.info(t('newScaleImage.jsContent6'))
|
return message.info(t('newScaleImage.jsContent6'))
|
||||||
@@ -353,8 +357,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
let getDetail = (value:any,str:string)=>{
|
let getDetail = (value:any,str:string)=>{
|
||||||
imgData.loadingShow = true
|
imgData.loadingShow = true
|
||||||
let data = value
|
// let data = value
|
||||||
getDeatilData = value
|
let data = {
|
||||||
|
id:value.id
|
||||||
|
}
|
||||||
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
|
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
imgData.loadingShow = false
|
imgData.loadingShow = false
|
||||||
@@ -489,7 +495,6 @@ export default defineComponent({
|
|||||||
imgData.scaleImageData.likeNum += 1
|
imgData.scaleImageData.likeNum += 1
|
||||||
imgData.scaleImageData.isLike = 1
|
imgData.scaleImageData.isLike = 1
|
||||||
}
|
}
|
||||||
// getDetail(getDeatilData,'zan')
|
|
||||||
})
|
})
|
||||||
.catch((rv) => {
|
.catch((rv) => {
|
||||||
});
|
});
|
||||||
@@ -552,6 +557,27 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
let setFollow = () =>{
|
||||||
|
let url = Https.httpUrls.porfolioFollow
|
||||||
|
if(imgData.scaleImageData.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
|
||||||
|
Https.axiosGet(url, {params:{followeeId:imgData.scaleImageData.accountId}})
|
||||||
|
.then((rv) => {
|
||||||
|
if(imgData.scaleImageData.isFollow == 1){
|
||||||
|
imgData.scaleImageData.isFollow = 0
|
||||||
|
}else{
|
||||||
|
imgData.scaleImageData.isFollow = 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let openOtherUsers = ()=>{
|
||||||
|
const routeUrl = router.resolve({
|
||||||
|
path:'/home/otherUsers',
|
||||||
|
query:{
|
||||||
|
userId:imgData.scaleImageData.accountId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(routeUrl.href,'_blank')
|
||||||
|
}
|
||||||
watch(()=>imgData.scaleImageIndex,
|
watch(()=>imgData.scaleImageIndex,
|
||||||
(newVal,oldVal)=>{
|
(newVal,oldVal)=>{
|
||||||
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
|
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
|
||||||
@@ -585,6 +611,8 @@ export default defineComponent({
|
|||||||
setComment,
|
setComment,
|
||||||
setPortfolioLike,
|
setPortfolioLike,
|
||||||
setDeleteComment,
|
setDeleteComment,
|
||||||
|
setFollow,
|
||||||
|
openOtherUsers,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
@@ -725,6 +753,7 @@ export default defineComponent({
|
|||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #535353;
|
color: #535353;
|
||||||
|
text-align: left;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
// text-overflow: ellipsis;
|
// text-overflow: ellipsis;
|
||||||
// white-space: nowrap;
|
// white-space: nowrap;
|
||||||
@@ -758,6 +787,7 @@ export default defineComponent({
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
.scaleImage_chunk_title_Original{
|
.scaleImage_chunk_title_Original{
|
||||||
color: #39215b;
|
color: #39215b;
|
||||||
background: #c9a2ff;
|
background: #c9a2ff;
|
||||||
@@ -774,14 +804,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.started_btn{
|
||||||
|
margin-top: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.detail_right_user_head{
|
.detail_right_user_head{
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: var(--margin);
|
margin-right: var(--margin);
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
img{
|
img{
|
||||||
width: 10rem;
|
width: 8rem;
|
||||||
height: 10rem;
|
height: 8rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1187,7 +1224,7 @@ export default defineComponent({
|
|||||||
.detail_right_work_detail{
|
.detail_right_work_detail{
|
||||||
.scaleImage_chunk_title_intro{
|
.scaleImage_chunk_title_intro{
|
||||||
margin-top: calc(var(--padding) / 2);
|
margin-top: calc(var(--padding) / 2);
|
||||||
height: auto
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -31,11 +31,16 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
||||||
<div class="detail_right_user detail_left_right_item">
|
<div class="detail_right_user detail_left_right_item">
|
||||||
<!-- <div class="detail_right_user_head">
|
<div class="detail_right_user_head">
|
||||||
<img v-lazy="scaleImageData?.imgUrl">
|
<img v-lazy="scaleImageData?.avatar">
|
||||||
</div> -->
|
</div>
|
||||||
<div class="detail_right_user_content">
|
<div class="detail_right_user_content">
|
||||||
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
|
<!-- <div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div> -->
|
||||||
|
<div>
|
||||||
|
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
|
||||||
|
<div v-if="scaleImageData.isFollow == 0" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
|
||||||
|
<div v-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||||
|
</div>
|
||||||
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
|
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
|
||||||
<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
|
<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
|
||||||
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
||||||
@@ -716,6 +721,7 @@ export default defineComponent({
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
.scaleImage_chunk_title_Original{
|
.scaleImage_chunk_title_Original{
|
||||||
color: #39215b;
|
color: #39215b;
|
||||||
background: #c9a2ff;
|
background: #c9a2ff;
|
||||||
@@ -737,11 +743,13 @@ export default defineComponent({
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: var(--margin);
|
margin-right: var(--margin);
|
||||||
|
flex-shrink: 0;
|
||||||
img{
|
img{
|
||||||
width: 10rem;
|
width: 7rem;
|
||||||
height: 10rem;
|
height: 7rem;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.detail_right_user_head:hover{
|
.detail_right_user_head:hover{
|
||||||
|
|
||||||
|
|||||||
@@ -33,6 +33,9 @@
|
|||||||
<div class="publidh_right_name publidh_content_item">
|
<div class="publidh_right_name publidh_content_item">
|
||||||
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
|
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
|
||||||
<input type="text" v-model="subPublishDate.portfolioName">
|
<input type="text" v-model="subPublishDate.portfolioName">
|
||||||
|
<!-- <div class="publidh_content_item_tag">
|
||||||
|
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="publidh_right_name publidh_content_item">
|
<div class="publidh_right_name publidh_content_item">
|
||||||
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
|
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
|
||||||
@@ -260,7 +263,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
let pushTag = (tag:any,index:number)=>{
|
let pushTag = (tag:any,index:number)=>{
|
||||||
// let selectTag = tagList.value.splice(index,1)[0]
|
// let selectTag = tagList.value.splice(index,1)[0]
|
||||||
// selectTagList.value.push(selectTag)
|
|
||||||
// if(tag.tag == 'RCAworkshop_2024'){
|
// if(tag.tag == 'RCAworkshop_2024'){
|
||||||
// publishData.subPublishDate.portfolioDes = '#AiDA x RCA workshop '
|
// publishData.subPublishDate.portfolioDes = '#AiDA x RCA workshop '
|
||||||
// }
|
// }
|
||||||
@@ -311,7 +313,23 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
:deep(.ant-tag){
|
||||||
|
// position: absolute;
|
||||||
|
// left: 10px;
|
||||||
|
// top: 50%;
|
||||||
|
// transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
// .publidh_content_item_tag{
|
||||||
|
// position: relative;
|
||||||
|
// .ant-tag{
|
||||||
|
// position: absolute;
|
||||||
|
// left: 10px;
|
||||||
|
// top: 50%;
|
||||||
|
// transform: translateY(-50%);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
.publish_content_bottom{
|
.publish_content_bottom{
|
||||||
--border-color: #c4c4c4;
|
--border-color: #c4c4c4;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -342,6 +360,32 @@ export default defineComponent({
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
.publidh_content_item_tagList,.publidh_content_item_tag{
|
||||||
|
// height: 4rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.publidh_content_item_tagList{
|
||||||
|
margin-top: 1rem;
|
||||||
|
.ant-tag{
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.publidh_content_item_tag{
|
||||||
|
border: .2rem solid var(--border-color);
|
||||||
|
// height: 4rem;
|
||||||
|
padding: 2rem;
|
||||||
|
padding-right: 0rem;
|
||||||
|
.ant-tag{
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.publidh_content_item_intro{
|
.publidh_content_item_intro{
|
||||||
|
|||||||
1563
src/component/modules/generalCanvas.vue
Normal file
1563
src/component/modules/generalCanvas.vue
Normal file
File diff suppressed because it is too large
Load Diff
891
src/component/modules/generalMiniCanvas.vue
Normal file
891
src/component/modules/generalMiniCanvas.vue
Normal file
@@ -0,0 +1,891 @@
|
|||||||
|
<template>
|
||||||
|
<div class="generalMiniCanvas">
|
||||||
|
<div class="addDetails_canvasCenter">
|
||||||
|
<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
|
||||||
|
<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
|
||||||
|
<span >{{ $t('exportModel.Brushwork') }}:</span>
|
||||||
|
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
|
||||||
|
style="width: 20rem"
|
||||||
|
@change="brushworkChange"
|
||||||
|
>
|
||||||
|
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
|
||||||
|
<img :src="item.url" alt="">
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
|
||||||
|
<span>{{ $t('exportModel.Size') }}</span>
|
||||||
|
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
|
||||||
|
</div>
|
||||||
|
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
|
||||||
|
<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
|
||||||
|
<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
|
||||||
|
</div>
|
||||||
|
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
|
||||||
|
<span>{{ $t('exportModel.density') }}</span>
|
||||||
|
<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
|
||||||
|
</div>
|
||||||
|
<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
|
||||||
|
<span>{{ $t('exportModel.Color') }}</span>
|
||||||
|
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_center_data">
|
||||||
|
<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
|
||||||
|
<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
|
||||||
|
<div>新增</div>
|
||||||
|
</div> -->
|
||||||
|
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||||||
|
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||||
|
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
|
||||||
|
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
|
||||||
|
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
|
||||||
|
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
|
||||||
|
<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
|
||||||
|
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
|
||||||
|
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
|
||||||
|
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
|
||||||
|
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="exportCanvasBox_center_box">
|
||||||
|
<div class="exportCanvasBox_center">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
|
||||||
|
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
|
||||||
|
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_submit" @click="setSubmit(false)">
|
||||||
|
<div class="started_btn">
|
||||||
|
{{ $t('addDetails.submit') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { formatTime } from "@/tool/util";
|
||||||
|
import { setCookie, getCookie } from "@/tool/cookie";
|
||||||
|
import { Modal, message } from "ant-design-vue";
|
||||||
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
|
import allOrder from "@/component/Pay/allOrder.vue";
|
||||||
|
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||||
|
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import canvasGeneral from "@/tool/canvasGeneral";
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
|
import liquefaction from "@/component/modules/liquefaction.vue";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
creditsDetail,
|
||||||
|
allOrder,liquefaction
|
||||||
|
},
|
||||||
|
emits: ['submitBase64Data'],
|
||||||
|
props: {
|
||||||
|
imgUrl: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// watch: {
|
||||||
|
// // imgUrl: function(newVal, oldVal) {
|
||||||
|
// // console.log(newVal);
|
||||||
|
// // // 当propertyName数据发生变化时，执行相应的操作
|
||||||
|
// // }
|
||||||
|
// imgUrl(newVal, oldVal) {
|
||||||
|
// console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
setup(props,{emit}) {
|
||||||
|
let presentState = ref('paypal');
|
||||||
|
let showPayOrder = ref(false);
|
||||||
|
let loadingShow = ref(false);
|
||||||
|
let { t } = useI18n();
|
||||||
|
let canvas = reactive({});
|
||||||
|
let scale = 2;
|
||||||
|
let ratio = [1,1]
|
||||||
|
let exportWH = 512
|
||||||
|
let pencilbtnStyle = ref({
|
||||||
|
background:'',
|
||||||
|
width:0+'px',
|
||||||
|
height:0+'px',
|
||||||
|
display:'none',
|
||||||
|
left:0+'px',
|
||||||
|
top:0+'px',
|
||||||
|
})
|
||||||
|
let canvasBtn = reactive({
|
||||||
|
canvasState:'move',
|
||||||
|
canvasPencilWidth:{
|
||||||
|
pencil:20,
|
||||||
|
eraser:20,
|
||||||
|
routes:30,
|
||||||
|
density:30,
|
||||||
|
},
|
||||||
|
canvasPencilColor:'#000000',
|
||||||
|
spreadState:false,
|
||||||
|
})
|
||||||
|
let canvasWH = ref(0);
|
||||||
|
let arrows = ref({
|
||||||
|
show:false,
|
||||||
|
domStyle:{
|
||||||
|
left:0,
|
||||||
|
top:0,
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
},
|
||||||
|
jiantouStyle:{
|
||||||
|
height:'1px',
|
||||||
|
transform:`translateY(-100%) rotate(${90}deg)`,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
() => props.imgUrl,
|
||||||
|
(newValue, oldValue) => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
onBeforeUnmount(()=>{
|
||||||
|
canvasGeneral.canvasClear()
|
||||||
|
})
|
||||||
|
let reverseCanvasState = ref([])//存放canvas操作
|
||||||
|
let normalCanvasState = ref([])//存放canvas操作
|
||||||
|
let canvasState = ref()//存放canvas操作
|
||||||
|
let keyDown = []//监听键盘的 keydown 和 keyup 事件
|
||||||
|
let isMovePostion = false
|
||||||
|
let init = ()=>{
|
||||||
|
normalCanvasState.value = []
|
||||||
|
reverseCanvasState.value = []
|
||||||
|
showPayOrder.value = true;
|
||||||
|
ratio = [1,1]
|
||||||
|
nextTick(()=>{
|
||||||
|
let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
|
||||||
|
document.removeEventListener('mousemove', mouseMove);
|
||||||
|
document.removeEventListener('touchmove', touchmove);
|
||||||
|
|
||||||
|
let img = new Image();
|
||||||
|
img.onload = function(){
|
||||||
|
loadingShow.value = true
|
||||||
|
let height = canvasBox.offsetHeight;
|
||||||
|
canvasWH.value = height
|
||||||
|
// canvasBox.style.width = height+'px'
|
||||||
|
let wScale = 1
|
||||||
|
let hScale = 1
|
||||||
|
if(img.width>img.height){
|
||||||
|
hScale = img.height/img.width
|
||||||
|
exportWH = img.width
|
||||||
|
}else{
|
||||||
|
wScale = img.width/img.height
|
||||||
|
exportWH = img.height
|
||||||
|
}
|
||||||
|
ratio = [wScale,hScale]
|
||||||
|
canvas = canvasGeneral.canvasInit(canvasBox,{
|
||||||
|
width:canvasWH.value * wScale,
|
||||||
|
height:canvasWH.value * hScale,
|
||||||
|
})
|
||||||
|
canvas.selection = false;
|
||||||
|
// canvas.set({
|
||||||
|
// backgroundColor: 'lightblue'
|
||||||
|
// });
|
||||||
|
scale = img.height/canvas.height
|
||||||
|
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
|
||||||
|
|
||||||
|
fabric.Object.prototype.cornerSize = 10
|
||||||
|
fabric.Object.prototype.transparentCorners = false
|
||||||
|
fabric.Image.fromURL(props.imgUrl, function(img) {
|
||||||
|
// 设置背景图对象的宽度和高度与 canvas 相同
|
||||||
|
img.scaleToWidth(canvas.width);
|
||||||
|
img.scaleToHeight(canvas.height);
|
||||||
|
img.set({
|
||||||
|
scaleX: canvas.width / img.width,
|
||||||
|
scaleY: canvas.height / img.height
|
||||||
|
});
|
||||||
|
// 将背景图添加到 canvas 的底层
|
||||||
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||||
|
if(!fabric.Object.prototype.controls.deleteControl){
|
||||||
|
JSSetRemoveImage(deleteObj)
|
||||||
|
}else{
|
||||||
|
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||||
|
}
|
||||||
|
setPencilWidth()
|
||||||
|
updateCanvasState()
|
||||||
|
},{ crossOrigin: "Anonymous" });
|
||||||
|
// 鼠标抬起事件
|
||||||
|
canvas.on('mouse:up', function(event) {
|
||||||
|
if(isMovePostion)isMovePostion = false
|
||||||
|
if(canvasBtn.canvasState != 'move')updateCanvasState('mouseUp')
|
||||||
|
});
|
||||||
|
canvas.on("mouse:down", event=>setCanvasDown(event));
|
||||||
|
canvas.on('mouse:wheel', opt => {
|
||||||
|
const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
|
||||||
|
let zoom = canvas.getZoom() // 获取画布当前缩放值
|
||||||
|
zoom *= 0.999 ** delta
|
||||||
|
if (zoom > 20) zoom = 20
|
||||||
|
if (zoom < 0.01) zoom = 0.01
|
||||||
|
canvas.zoomToPoint(
|
||||||
|
{ // 关键点
|
||||||
|
x: opt.e.offsetX,
|
||||||
|
y: opt.e.offsetY
|
||||||
|
},
|
||||||
|
zoom
|
||||||
|
)
|
||||||
|
opt.e.preventDefault()
|
||||||
|
opt.e.stopPropagation()
|
||||||
|
upDataPencilWidth(zoom)
|
||||||
|
})
|
||||||
|
canvas.on("mouse:move", event=>setCanvasMove(event));
|
||||||
|
|
||||||
|
//画布上移动
|
||||||
|
document.addEventListener('mousemove', mouseMove);
|
||||||
|
document.addEventListener('touchmove', touchmove);
|
||||||
|
setOperation('pencil')
|
||||||
|
img.remove()
|
||||||
|
}
|
||||||
|
img.src = props.imgUrl
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let canvasKeyDown = (event) => {
|
||||||
|
if(keyDown.indexOf(event.key)>-1){
|
||||||
|
}else{
|
||||||
|
keyDown.push(event.code)
|
||||||
|
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
|
||||||
|
historyState('reverse')
|
||||||
|
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
|
||||||
|
historyState('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let canvasKeyUp = (event) =>{
|
||||||
|
keyDown = keyDown.filter(function(item) {
|
||||||
|
return event.code !== item;
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let clearCanvas = ()=>{
|
||||||
|
canvasBtn.canvasState = 'move'
|
||||||
|
canvasBtn.spreadState = false
|
||||||
|
document.removeEventListener("keydown", canvasKeyDown);
|
||||||
|
document.removeEventListener("keyup", canvasKeyUp);
|
||||||
|
}
|
||||||
|
let mouseMove = (event)=>{
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
setDomMove(e)
|
||||||
|
}
|
||||||
|
let touchmove = (event)=>{
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
setDomMove(e)
|
||||||
|
}
|
||||||
|
let setDomMove = (event)=>{
|
||||||
|
if(canvas.isDrawingMode){
|
||||||
|
canvas.setCursor('none');
|
||||||
|
}
|
||||||
|
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
|
||||||
|
if(!canvasCenterBox)return
|
||||||
|
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
|
||||||
|
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
|
||||||
|
pencilbtnStyle.value.left = parentX + "px"
|
||||||
|
pencilbtnStyle.value.top = parentY+'px'
|
||||||
|
}
|
||||||
|
let setCanvasMove = (event) =>{
|
||||||
|
if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
|
||||||
|
}
|
||||||
|
let lastPosX = 0
|
||||||
|
let lastPosY = 0
|
||||||
|
let setCanvasDown = (event)=>{
|
||||||
|
if(canvasBtn.canvasState == 'movePosition'){
|
||||||
|
isMovePostion = true;
|
||||||
|
lastPosX = event.pointer.x;
|
||||||
|
lastPosY = event.pointer.y;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
|
||||||
|
setCanvasZoom(event)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let setCanvasPosition = (event)=>{
|
||||||
|
const e = event;
|
||||||
|
const vpt = canvas.viewportTransform;
|
||||||
|
|
||||||
|
vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
|
||||||
|
vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移
|
||||||
|
|
||||||
|
canvas.requestRenderAll(); // 请求重绘画布
|
||||||
|
lastPosX = e.pointer.x;
|
||||||
|
lastPosY = e.pointer.y;
|
||||||
|
}
|
||||||
|
let setCanvasZoom = (opt)=>{
|
||||||
|
let zoom = canvas.getZoom() // 获取画布当前缩放值
|
||||||
|
let num = -100
|
||||||
|
if(canvasBtn.canvasState == 'zoomOut') num = 100
|
||||||
|
zoom *= 0.999 ** num
|
||||||
|
if (zoom > 20) zoom = 20
|
||||||
|
if (zoom < 0.01) zoom = 0.01
|
||||||
|
// console.log(zoom);
|
||||||
|
canvas.zoomToPoint(
|
||||||
|
{ // 关键点
|
||||||
|
x: opt.pointer.x,
|
||||||
|
y: opt.pointer.y
|
||||||
|
},
|
||||||
|
zoom
|
||||||
|
)
|
||||||
|
opt.e.preventDefault()
|
||||||
|
opt.e.stopPropagation()
|
||||||
|
upDataPencilWidth(zoom)
|
||||||
|
}
|
||||||
|
let setOperation = (str)=>{
|
||||||
|
canvasBtn.canvasState = str
|
||||||
|
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
|
||||||
|
let classList = canvasCenterBox.className.split(' ');
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box'
|
||||||
|
if(str == 'move'){
|
||||||
|
setMove()
|
||||||
|
pencilbtnStyle.value.display = `none`
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box'
|
||||||
|
}else if(str == 'pencil'){
|
||||||
|
setPencil()
|
||||||
|
pencilbtnStyle.value.display = `block`
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
|
||||||
|
}else if(str == 'eraser'){
|
||||||
|
setEraser()
|
||||||
|
pencilbtnStyle.value.display = `block`
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
|
||||||
|
}else if(str == 'liquidation'){
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
|
||||||
|
}else if(str == 'zoomIn' || str == 'zoomOut'){
|
||||||
|
pencilbtnStyle.value.display = `none`
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = false);
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box'
|
||||||
|
}else if(str == 'movePosition'){
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
pencilbtnStyle.value.display = `none`
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = false);
|
||||||
|
canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let brushworkValue = ref('PencilBrush')
|
||||||
|
let brushworkChange = (value)=>{
|
||||||
|
brushworkValue.value = value
|
||||||
|
setPencil()
|
||||||
|
}
|
||||||
|
let setMove = ()=>{
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||||
|
}
|
||||||
|
let brushList = ref([
|
||||||
|
{
|
||||||
|
value:'PencilBrush',
|
||||||
|
url:'/image/brush/PencilBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'Marking',
|
||||||
|
url:'/image/brush/PencilBrush-2.jpg'
|
||||||
|
},{
|
||||||
|
value:'InkBrush',
|
||||||
|
url:'/image/brush/InkBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'CrayonBrush',
|
||||||
|
url:'/image/brush/CrayonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'RibbonBrush',
|
||||||
|
url:'/image/brush/RibbonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'MarkerBrush',
|
||||||
|
url:'/image/brush/MarkerBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'WritingBrush',
|
||||||
|
url:'/image/brush/WritingBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'LongfurBrush',
|
||||||
|
url:'/image/brush/LongfurBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'SpraypaintBrush',
|
||||||
|
url:'/image/brush/SpraypaintBrush.jpg'
|
||||||
|
},
|
||||||
|
])
|
||||||
|
let setPencil = ()=>{
|
||||||
|
let pencil
|
||||||
|
canvas.isDrawingMode = true//开启绘画模式
|
||||||
|
if(brushworkValue.value == 'PencilBrush'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
|
||||||
|
}else if(brushworkValue.value == 'Marking'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,); //记号笔
|
||||||
|
}else if(brushworkValue.value == 'InkBrush'){
|
||||||
|
pencil = new fabric.InkBrush(canvas,{}); //油画笔
|
||||||
|
}else if(brushworkValue.value=='CrayonBrush'){
|
||||||
|
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
|
||||||
|
}else if(brushworkValue.value == 'RibbonBrush'){
|
||||||
|
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(brushworkValue.value == 'MarkerBrush'){
|
||||||
|
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
|
||||||
|
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
|
||||||
|
}else if(brushworkValue.value == 'WritingBrush'){
|
||||||
|
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
|
||||||
|
}else if(brushworkValue.value == 'LongfurBrush'){
|
||||||
|
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(brushworkValue.value == 'SpraypaintBrush'){
|
||||||
|
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.freeDrawingBrush = pencil
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||||
|
|
||||||
|
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
|
||||||
|
canvas.freeDrawingBrush.isEraser = false
|
||||||
|
setPencilWidth()
|
||||||
|
pencilColor()
|
||||||
|
}
|
||||||
|
let setEraser = ()=>{
|
||||||
|
canvas.isDrawingMode = true
|
||||||
|
let eraser = new fabric.EraserBrush(canvas)
|
||||||
|
canvas.freeDrawingBrush = eraser
|
||||||
|
canvas.requestRenderAll();
|
||||||
|
canvas.freeDrawingBrush.isEraser = true
|
||||||
|
pencilbtnStyle.value.background = `rgb(255,255,255)`
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
|
||||||
|
setPencilWidth()
|
||||||
|
}
|
||||||
|
let upDataPencilWidth = (zoom)=>{
|
||||||
|
if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let deleteObj = ()=> {
|
||||||
|
// if(!canvas.getActiveObjects()){
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
let target = canvas.getActiveObjects()
|
||||||
|
target.forEach((item)=>{
|
||||||
|
canvas.fxRemove(item, {
|
||||||
|
onComplete(){
|
||||||
|
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||||
|
canvas.renderAll(); // 重新渲染 Canvas
|
||||||
|
}
|
||||||
|
})
|
||||||
|
canvas.FX_DURATION = 300
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setTimeOut = {
|
||||||
|
pencilWidth:null,
|
||||||
|
color:null,
|
||||||
|
}
|
||||||
|
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||||
|
clearTimeout(setTimeOut.pencilWidth)
|
||||||
|
setTimeOut.pencilWidth = setTimeout(()=>{
|
||||||
|
let zoom = canvas.getZoom() // 获取画布当前缩放值
|
||||||
|
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
|
||||||
|
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||||
|
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
|
||||||
|
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
|
||||||
|
canvas.freeDrawingBrush.width = 1;
|
||||||
|
pencilbtnStyle.value.height = 1+'px'
|
||||||
|
pencilbtnStyle.value.width = 1+'px'
|
||||||
|
}
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
|
||||||
|
clearTimeout(setTimeOut.color)
|
||||||
|
// clearTimeout(setTimeOut.colorHistory)
|
||||||
|
setTimeOut.color = setTimeout(()=>{
|
||||||
|
pencilColor()
|
||||||
|
},200)
|
||||||
|
// setTimeOut.colorHistory = setTimeout(()=>{
|
||||||
|
// colorHistoryList.value.push(canvasPencilColor.value)
|
||||||
|
// },1000)
|
||||||
|
}
|
||||||
|
let hexToRgba=(hex, alpha)=> {
|
||||||
|
const r = parseInt(hex.slice(1, 3), 16);
|
||||||
|
const g = parseInt(hex.slice(3, 5), 16);
|
||||||
|
const b = parseInt(hex.slice(5, 7), 16);
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||||
|
}
|
||||||
|
let pencilColor = ()=>{
|
||||||
|
if(canvas.freeDrawingBrush.isEraser){
|
||||||
|
canvas.freeDrawingBrush.color = '#FFFFFF';
|
||||||
|
}else{
|
||||||
|
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
|
||||||
|
if(brushworkValue.value == 'Marking'){
|
||||||
|
console.log(canvasBtn.canvasPencilColor);
|
||||||
|
console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
|
||||||
|
canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
|
||||||
|
}else{
|
||||||
|
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let routesChange = (str)=>{
|
||||||
|
canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
|
||||||
|
if (canvasBtn.canvasPencilWidth[str] < 10) {
|
||||||
|
canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
|
||||||
|
} else if (canvasBtn.canvasPencilWidth[str] > 100) {
|
||||||
|
canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let updateCanvasState = (str) =>{
|
||||||
|
if(str != 'mouseUp'){
|
||||||
|
}
|
||||||
|
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||||
|
normalCanvasState.value.push(canvasAsJson);
|
||||||
|
}
|
||||||
|
//撤回
|
||||||
|
let historyState = (str)=> {
|
||||||
|
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
|
||||||
|
let obj = reverseCanvasState.value.pop()
|
||||||
|
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
||||||
|
canvasState.value = obj
|
||||||
|
normalCanvasState.value.push(obj);
|
||||||
|
}else if(str == '' && normalCanvasState.value.length > 1){
|
||||||
|
let obj = normalCanvasState.value.pop()
|
||||||
|
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
||||||
|
reverseCanvasState.value.push(obj);
|
||||||
|
}else{
|
||||||
|
return
|
||||||
|
}
|
||||||
|
canvas.loadFromJSON(canvasState.value, () => {});
|
||||||
|
}
|
||||||
|
let setSubmit = (liquefation)=>{
|
||||||
|
return new Promise((resolve,reject)=>{
|
||||||
|
var allObjects = canvas.getObjects();
|
||||||
|
// return
|
||||||
|
// if(allObjects.length == 0){
|
||||||
|
// return message.info(t('addDetails.jsContent1'))
|
||||||
|
// }
|
||||||
|
var canvasDom = document.createElement("canvas");
|
||||||
|
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||||
|
backgroundColor: "#FFFFFF",
|
||||||
|
width: exportWH * ratio[0],
|
||||||
|
height: exportWH * ratio[1],
|
||||||
|
isDrawingMode: false, // 开启绘图模式
|
||||||
|
});
|
||||||
|
canvas.backgroundImage.clone(async (back)=>{
|
||||||
|
back.set({
|
||||||
|
scaleX:1,
|
||||||
|
scaleY:1,
|
||||||
|
left:back.left*scale,
|
||||||
|
top:back.top*scale ,
|
||||||
|
})
|
||||||
|
exportCanvas.backgroundImage = back
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
if(allObjects.length == 0)resolve('')
|
||||||
|
allObjects.forEach((item,index)=>{
|
||||||
|
// let obj = fabric.util.object.clone(item);
|
||||||
|
if(item.type == 'circle')return
|
||||||
|
let obj
|
||||||
|
item.clone((cloned)=>{
|
||||||
|
console.log(cloned);
|
||||||
|
obj = cloned
|
||||||
|
console.log(obj.set);
|
||||||
|
if(obj.set){
|
||||||
|
obj.set(
|
||||||
|
{
|
||||||
|
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||||
|
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||||
|
left:item.left*scale,
|
||||||
|
top:item.top*scale,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
// else{
|
||||||
|
// console.log(item.width,scale);
|
||||||
|
|
||||||
|
// obj.width = (item.width?item.width:1)*scale
|
||||||
|
// obj.height = (item.height?item.height:1)*scale
|
||||||
|
// obj.left = item.left*scale
|
||||||
|
// obj.top = item.top*scale
|
||||||
|
|
||||||
|
// }
|
||||||
|
exportCanvas.add(obj)
|
||||||
|
if(index == allObjects.length - 1){
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
|
||||||
|
position[4] *= scale
|
||||||
|
position[5] *= scale
|
||||||
|
//设置画布当前那位置和缩放
|
||||||
|
// exportCanvas.viewportTransform = position
|
||||||
|
let data = exportCanvas.toDataURL("image/png");
|
||||||
|
if(liquefation){
|
||||||
|
return resolve(data)
|
||||||
|
}
|
||||||
|
cancelDsign()
|
||||||
|
clearCanvas()
|
||||||
|
emit('submitBase64Data',data)
|
||||||
|
resolve('')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
let cancelDsign = ()=>{
|
||||||
|
document.removeEventListener('keydown',canvasKeyDown);
|
||||||
|
document.removeEventListener('keyup', canvasKeyUp);
|
||||||
|
showPayOrder.value = false
|
||||||
|
}
|
||||||
|
let liquefactionData = ref(null)
|
||||||
|
let liquefaction = ref(null)
|
||||||
|
let submitLiquefaction = (rv)=>{
|
||||||
|
// const originalWidth = liquefactionData.value.width // 保存原始宽度
|
||||||
|
// const originalHeight = liquefactionData.value.height; // 保存原始高度
|
||||||
|
canvas.viewportTransform = [1,0,0,1,0,0]
|
||||||
|
fabric.Image.fromURL(rv, function(img) {
|
||||||
|
// 设置背景图对象的宽度和高度与 canvas 相同
|
||||||
|
img.scaleToWidth(canvas.width);
|
||||||
|
img.scaleToHeight(canvas.height);
|
||||||
|
img.set({
|
||||||
|
scaleX: canvas.width / img.width,
|
||||||
|
scaleY: canvas.height / img.height
|
||||||
|
});
|
||||||
|
// 将背景图添加到 canvas 的底层
|
||||||
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
||||||
|
if(!fabric.Object.prototype.controls.deleteControl){
|
||||||
|
JSSetRemoveImage(deleteObj)
|
||||||
|
}else{
|
||||||
|
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
|
||||||
|
}
|
||||||
|
setPencilWidth()
|
||||||
|
updateCanvasState()
|
||||||
|
},{ crossOrigin: "Anonymous" });
|
||||||
|
}
|
||||||
|
let setLiquefaction =async ()=>{
|
||||||
|
// const activeObjects = canvas.backgroundImage // 获取选中的对象
|
||||||
|
// console.log(setSubmit(true));
|
||||||
|
let activeObjects = await setSubmit(true)
|
||||||
|
if (activeObjects) {
|
||||||
|
liquefactionData.value = activeObjects
|
||||||
|
liquefaction.value.init(activeObjects)
|
||||||
|
} else {
|
||||||
|
// message.info(useI18.t('exportModel.jsContent6'))
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
presentState,
|
||||||
|
showPayOrder,
|
||||||
|
loadingShow,
|
||||||
|
t,
|
||||||
|
pencilbtnStyle,
|
||||||
|
...toRefs(canvasBtn),
|
||||||
|
arrows,
|
||||||
|
|
||||||
|
liquefactionData,
|
||||||
|
liquefaction,
|
||||||
|
init,
|
||||||
|
setOperation,
|
||||||
|
setPencilWidth,
|
||||||
|
setPencilColor,
|
||||||
|
historyState,
|
||||||
|
setSubmit,
|
||||||
|
cancelDsign,
|
||||||
|
submitLiquefaction,
|
||||||
|
setLiquefaction,
|
||||||
|
routesChange,
|
||||||
|
brushList,
|
||||||
|
brushworkValue,
|
||||||
|
brushworkChange,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
.generalMiniCanvas{
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
// flex-direction: column;
|
||||||
|
margin: 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
.generalMiniCanvas_item{
|
||||||
|
// position: relative;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
// border: 0.2rem solid #c4c4c4;
|
||||||
|
width: 25rem;
|
||||||
|
border-radius: 4px; /* 设置圆角半径 */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.generalMiniCanvas_btn_item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.generalMiniCanvas_input,.generalMiniCanvas_btn{
|
||||||
|
z-index: 2;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.generalMiniCanvas_input{
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 7rem;
|
||||||
|
height: 6rem;
|
||||||
|
.generalMiniCanvas_input_item{
|
||||||
|
display: flex;
|
||||||
|
margin-right: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
&.brushwork{
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.generalMiniCanvas_input_item:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.generalMiniCanvas_btn{
|
||||||
|
|
||||||
|
input{
|
||||||
|
// width: 100%;
|
||||||
|
width: 30rem;
|
||||||
|
// margin-top: 1rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.icon-xiala{
|
||||||
|
position: absolute;
|
||||||
|
width: 2rem;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-50%, 90%);
|
||||||
|
left: 50%;
|
||||||
|
width: 6rem;
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&.icon-xiala::before{
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
&.btnRotate::before{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&.active{
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spread{
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addDetails_canvasCenter{
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center_data{
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center_box{
|
||||||
|
padding: 3rem;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
background: #e6e6e6;
|
||||||
|
cursor: inherit;
|
||||||
|
&.cursorNone:hover{
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
&.cursorMove:hover{
|
||||||
|
cursor: move;
|
||||||
|
canvas{
|
||||||
|
cursor: move !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editFrontBack_pencilbtn{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center{
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #e6e6e6;
|
||||||
|
// overflow: scroll;
|
||||||
|
.canvas-container{
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
.editFrontBack_pencilbtn{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportCanvasBox_center:hover{
|
||||||
|
.generalMiniCanvas_btn{
|
||||||
|
// transform: translate(-50%,-101%);
|
||||||
|
// &.spread{
|
||||||
|
// transform: translate(-50%,0);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportCanvasBox_submit{
|
||||||
|
margin-top: auto;
|
||||||
|
margin-left: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
421
src/component/modules/liquefaction.vue
Normal file
421
src/component/modules/liquefaction.vue
Normal file
@@ -0,0 +1,421 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
class="liquefaction generalModel"
|
||||||
|
v-model:visible="liqufeaction"
|
||||||
|
:footer="null"
|
||||||
|
width="78%"
|
||||||
|
:maskClosable="false"
|
||||||
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
wrapClassName="#app"
|
||||||
|
:keyboard="false"
|
||||||
|
>
|
||||||
|
<div class="generalModel_btn">
|
||||||
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
|
<i class="fi fi-rr-cross-small"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="liquefaction_center">
|
||||||
|
<div class="liquefaction_canvas_box">
|
||||||
|
<canvas id="c"></canvas>
|
||||||
|
<div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
|
||||||
|
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="liquefaction_parameter">
|
||||||
|
<div class="liquefaction_parameter_item">
|
||||||
|
<div class="liquefaction_parameter_item_title">
|
||||||
|
<span>{{ $t('exportModel.Size') }}</span>
|
||||||
|
<input type="number" v-model="routes" @change="routesChange('routes')">
|
||||||
|
</div>
|
||||||
|
<div class="liquefaction_parameter_item_input">
|
||||||
|
<input type="range" v-model="routes" @change="routesChange('routes')">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="liquefaction_parameter_item">
|
||||||
|
<div class="liquefaction_parameter_item_title">
|
||||||
|
<span>{{ $t('exportModel.density') }}</span>
|
||||||
|
<input type="number" v-model="density" @change="routesChange('density')">
|
||||||
|
</div>
|
||||||
|
<div class="liquefaction_parameter_item_input">
|
||||||
|
<input type="range" v-model="density" @change="routesChange('density')">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="liquefaction_parameter_item">
|
||||||
|
<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
|
||||||
|
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { getMousePosition } from "@/tool/mdEvent";
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
emits: ['submitLiquefaction'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
// let presentState = ref('paypal');
|
||||||
|
let liqufeaction = ref(false);
|
||||||
|
let liqufeactionData = reactive({
|
||||||
|
routes: 30,//移动框大小
|
||||||
|
density: 30,//移动大小
|
||||||
|
})
|
||||||
|
let arrows = ref({
|
||||||
|
show:false,
|
||||||
|
domStyle:{
|
||||||
|
left:0,
|
||||||
|
top:0,
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
},
|
||||||
|
jiantouStyle:{
|
||||||
|
height:'1px',
|
||||||
|
transform:`translateY(-100%) rotate(${90}deg)`,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let canvas
|
||||||
|
let canvasImgData = {
|
||||||
|
width:0,
|
||||||
|
height:0,
|
||||||
|
}
|
||||||
|
let downX
|
||||||
|
let downY
|
||||||
|
let init = async (data)=>{
|
||||||
|
liqufeaction.value = true
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
nextTick(()=>{
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let img = new Image()
|
||||||
|
img.setAttribute('crossOrigin', 'Anonymous')
|
||||||
|
img.onload = () => {
|
||||||
|
canvasImgData.width = img.width
|
||||||
|
canvasImgData.height = img.height
|
||||||
|
let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
|
||||||
|
let width = canvasBox.offsetHeight / img.height * img.width
|
||||||
|
canvas = document.getElementById('c')
|
||||||
|
canvas.width = width
|
||||||
|
canvas.height = canvasBox.offsetHeight
|
||||||
|
let optfor = false
|
||||||
|
const context = canvas.getContext('2d');
|
||||||
|
context.drawImage(img, 1, 1, canvas.width, canvas.height);
|
||||||
|
let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
|
||||||
|
|
||||||
|
let canvasDownX
|
||||||
|
let canvasDownY
|
||||||
|
let distance = 0
|
||||||
|
let angle
|
||||||
|
let mousedown = (event)=>{
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
down(e)
|
||||||
|
}
|
||||||
|
let touchdown = (event)=>{
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
down(e)
|
||||||
|
}
|
||||||
|
let down = (event)=> {
|
||||||
|
let canvasPosition = canvas.getBoundingClientRect()
|
||||||
|
let maxX = canvasPosition.width + canvasPosition.x
|
||||||
|
let minX = canvasPosition.x
|
||||||
|
let maxY = canvasPosition.height + canvasPosition.y
|
||||||
|
let minY = canvasPosition.y
|
||||||
|
if (event.clientX > minX && event.clientX < maxX && event.clientY > minY && event.clientY < maxY) {
|
||||||
|
downX = event.clientX
|
||||||
|
downY = event.clientY
|
||||||
|
canvasDownX = downX - minX
|
||||||
|
canvasDownY = downY - minY
|
||||||
|
}
|
||||||
|
optfor = true
|
||||||
|
arrows.value.jiantouStyle.height = distance + 'px'
|
||||||
|
arrows.value.jiantouStyle.left = event.clientX - canvasBox.getBoundingClientRect().left + 'px'
|
||||||
|
arrows.value.jiantouStyle.top = event.clientY - canvasBox.getBoundingClientRect().top + 'px'
|
||||||
|
arrows.value.domStyle.width = liqufeactionData.routes * 2 + 'px'
|
||||||
|
arrows.value.domStyle.height = liqufeactionData.routes * 2 + 'px'
|
||||||
|
arrows.value.domStyle.left = event.clientX - canvasBox.getBoundingClientRect().left - liqufeactionData.routes + 'px'
|
||||||
|
arrows.value.domStyle.top = event.clientY - canvasBox.getBoundingClientRect().top - liqufeactionData.routes + 'px'
|
||||||
|
arrows.value.show = true
|
||||||
|
let mouseup = ()=>{
|
||||||
|
if(!optfor)return
|
||||||
|
if(distance != 0){
|
||||||
|
let {upDownX, upDownY} = calculateTargetCoordinates(canvasDownX, canvasDownY,distance,angle)
|
||||||
|
liquify(imgData, canvasDownX, canvasDownY, upDownX, upDownY, liqufeactionData.routes, liqufeactionData.density)
|
||||||
|
}
|
||||||
|
distance = 0
|
||||||
|
arrows.value.show = false
|
||||||
|
context.putImageData(imgData, 0, 0);
|
||||||
|
optfor = false
|
||||||
|
canvasBox.removeEventListener('mousemove', mouseMove);
|
||||||
|
canvasBox.removeEventListener('touchmove', touchmove);
|
||||||
|
document.removeEventListener('mouseup', mouseup);
|
||||||
|
document.removeEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
canvasBox.addEventListener('mousemove', mouseMove);
|
||||||
|
canvasBox.addEventListener('touchmove', touchmove);
|
||||||
|
document.addEventListener('mouseup', mouseup);
|
||||||
|
document.addEventListener('touchend', mouseup);
|
||||||
|
}
|
||||||
|
let mouseMove = (event)=>{
|
||||||
|
let e = getMousePosition(event,false)
|
||||||
|
move(e)
|
||||||
|
}
|
||||||
|
let touchmove = (event)=>{
|
||||||
|
let e = getMousePosition(event,true)
|
||||||
|
move(e)
|
||||||
|
}
|
||||||
|
let move = function (moveEvent) {
|
||||||
|
let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||||
|
if(optfor){
|
||||||
|
let height = distanceFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||||
|
angle = angleFun(downX , downY , moveEvent.clientX , moveEvent.clientY)
|
||||||
|
|
||||||
|
if(height < liqufeactionData.routes){
|
||||||
|
distance = height
|
||||||
|
arrows.value.jiantouStyle.height = height + 'px'
|
||||||
|
}
|
||||||
|
arrows.value.jiantouStyle.transform = `translateY(-100%) rotate(${angle+90}deg)`
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// canvas.addEventListener('mousedown', down);
|
||||||
|
canvasBox.addEventListener('mousedown', mousedown);
|
||||||
|
canvasBox.addEventListener('touchstart', touchdown);
|
||||||
|
}
|
||||||
|
if(data._element){
|
||||||
|
img.src = data._element.src
|
||||||
|
}else{
|
||||||
|
img.src = data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2);
|
||||||
|
let sqr = (x) => x * x;;
|
||||||
|
let eachCircleDot = (imageData, ox, oy, r, callback)=>{
|
||||||
|
var imgWidth = imageData.width,
|
||||||
|
imgHeight = imageData.height,
|
||||||
|
data = imageData.data,
|
||||||
|
left = ox - r,
|
||||||
|
right = ox + r,
|
||||||
|
top = oy - r,
|
||||||
|
bottom = oy + r,
|
||||||
|
dotRedOffset, dotGreenOffset, dotBlueOffset, alphaOffset;
|
||||||
|
for (var x = left; x < right; x++){
|
||||||
|
for (var y = top; y < bottom; y++){
|
||||||
|
if (distanceSqr(x, y, ox, oy) <= sqr(r)) {
|
||||||
|
|
||||||
|
dotRedOffset = y * imgWidth * 4 + x * 4;
|
||||||
|
dotGreenOffset = dotRedOffset + 1;
|
||||||
|
dotBlueOffset = dotGreenOffset + 1;
|
||||||
|
alphaOffset = dotBlueOffset + 1;
|
||||||
|
|
||||||
|
callback(
|
||||||
|
// 当前点的坐标
|
||||||
|
{ x: x, y: y },
|
||||||
|
// 点的RGBA四个分量对应字节的下标
|
||||||
|
{
|
||||||
|
r: dotRedOffset,
|
||||||
|
g: dotGreenOffset,
|
||||||
|
b: dotBlueOffset,
|
||||||
|
a: alphaOffset,
|
||||||
|
},
|
||||||
|
// 传进来的ImageData的data部分
|
||||||
|
data
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let copyImageDataBuff = (imgData)=>{
|
||||||
|
var data = imgData.data,
|
||||||
|
imgDataBuff = [];
|
||||||
|
for (var i in data){
|
||||||
|
imgDataBuff[i] = data[i];
|
||||||
|
}
|
||||||
|
return imgDataBuff;
|
||||||
|
}
|
||||||
|
let moveDot = (imgData, dataBuff, x, y, srcX, srcY)=> {
|
||||||
|
|
||||||
|
var imgWidth = imgData.width,
|
||||||
|
imgHeight = imgData.height,
|
||||||
|
data = imgData.data;
|
||||||
|
|
||||||
|
// // 进行边界检查，确保不超出图像范围
|
||||||
|
x = Math.max(0, Math.min(Math.round(x), imgWidth - 1));
|
||||||
|
y = Math.max(0, Math.min(Math.round(y), imgHeight - 1));
|
||||||
|
srcX = Math.max(0, Math.min(Math.round(srcX), imgWidth - 1));
|
||||||
|
srcY = Math.max(0, Math.min(Math.round(srcY), imgHeight - 1));
|
||||||
|
srcX = Math.round(srcX);
|
||||||
|
srcY = Math.round(srcY);
|
||||||
|
|
||||||
|
var targetStartOffset = y * imgWidth * 4 + x * 4,
|
||||||
|
srcStartOffset = srcY * imgWidth * 4 + srcX * 4;
|
||||||
|
for (var i = 0; i < 4; i++)
|
||||||
|
data[targetStartOffset + i] = dataBuff[srcStartOffset + i];
|
||||||
|
}
|
||||||
|
let liquify = (imgData, cx, cy, mx, my, r, strenth) => {
|
||||||
|
var imgDataBuff = copyImageDataBuff(imgData);
|
||||||
|
eachCircleDot(imgData, cx, cy, r, function (posi) {
|
||||||
|
var tx = posi.x,
|
||||||
|
ty = posi.y;
|
||||||
|
var u = transFormula(cx, cy, mx, my, tx, ty, r, strenth);
|
||||||
|
moveDot(imgData, imgDataBuff, tx, ty, u.x, u.y);
|
||||||
|
function transFormula(cx, cy, mx, my, tx, ty, r, strenth) {
|
||||||
|
strenth = strenth || 100;
|
||||||
|
var relativity = sqr(r) - distanceSqr(tx, ty, cx, cy);
|
||||||
|
var distanceMovedSqr = distanceSqr(mx, my, cx, cy);
|
||||||
|
var rate = sqr(relativity / (relativity + distanceMovedSqr * (100 / strenth)));
|
||||||
|
var ux = tx - rate * (mx - cx),
|
||||||
|
uy = ty - rate * (my - cy);
|
||||||
|
return { x: ux, y: uy };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let distanceFun = (x1, y1, x2, y2) => {
|
||||||
|
return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
|
||||||
|
}
|
||||||
|
let angleFun = (x1, y1, x2, y2) => {
|
||||||
|
return Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
|
||||||
|
}
|
||||||
|
let calculateTargetCoordinates = (x1, y1, distance, angleDegrees) => {
|
||||||
|
let angleRad = angleDegrees * (Math.PI / 180);
|
||||||
|
let x2 = x1 + distance * Math.cos(angleRad);
|
||||||
|
let y2 = y1 + distance * Math.sin(angleRad);
|
||||||
|
return { upDownX: x2, upDownY: y2 };
|
||||||
|
}
|
||||||
|
let cancelDsign = ()=>{
|
||||||
|
liqufeaction.value = false
|
||||||
|
}
|
||||||
|
let routesChange = (str)=>{
|
||||||
|
liqufeactionData[str] = Math.round(liqufeactionData[str]/10)*10;
|
||||||
|
if (liqufeactionData[str] < 10) {
|
||||||
|
liqufeactionData[str] = 10; // 设置为最小值
|
||||||
|
} else if (liqufeactionData[str] > 100) {
|
||||||
|
liqufeactionData[str] = 100; // 设置为最大值
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let submit = ()=>{
|
||||||
|
const newCanvas = document.createElement('canvas');
|
||||||
|
newCanvas.width = canvasImgData.width;
|
||||||
|
newCanvas.height = canvasImgData.height;
|
||||||
|
const newCtx = newCanvas.getContext('2d');
|
||||||
|
newCtx.drawImage(
|
||||||
|
canvas,
|
||||||
|
0, 0,
|
||||||
|
canvas.width,
|
||||||
|
canvas.height,
|
||||||
|
0, 0,
|
||||||
|
newCanvas.width,
|
||||||
|
newCanvas.height
|
||||||
|
);
|
||||||
|
emit('submitLiquefaction',newCanvas.toDataURL('image/png'))
|
||||||
|
cancelDsign()
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
liqufeaction,
|
||||||
|
...toRefs(liqufeactionData),
|
||||||
|
arrows,
|
||||||
|
init,
|
||||||
|
cancelDsign,
|
||||||
|
routesChange,
|
||||||
|
submit,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.liquefaction {
|
||||||
|
background: #f9fafb;
|
||||||
|
.liquefaction_center{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.liquefaction_canvas_box{
|
||||||
|
background: #fff;
|
||||||
|
height: 90%;
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
// overflow-x: auto;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
.liquefaction_parameter{
|
||||||
|
padding-top: 5rem;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
.liquefaction_parameter_item{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.liquefaction_parameter_item_title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
input{
|
||||||
|
width: 30%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.liquefaction_parameter_item_input{
|
||||||
|
width: 100%;
|
||||||
|
input{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.liquefaction_parameter_item:last-child{
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
div{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.moveDom {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jiantouDom {
|
||||||
|
position: absolute;
|
||||||
|
width: 2px;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #000;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jiantouDom::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(45deg);
|
||||||
|
border-top: 2px solid #000;
|
||||||
|
border-left: 2px solid #000;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -6,6 +6,7 @@ export default {
|
|||||||
HISTORY:'历史',
|
HISTORY:'历史',
|
||||||
WORKS:'作品广场',
|
WORKS:'作品广场',
|
||||||
EVENTS:'活动',
|
EVENTS:'活动',
|
||||||
|
personal:'个人中心',
|
||||||
bindEmail:'绑定邮箱',
|
bindEmail:'绑定邮箱',
|
||||||
logOff:'退出登录',
|
logOff:'退出登录',
|
||||||
Tutorial:'教程',
|
Tutorial:'教程',
|
||||||
@@ -47,7 +48,7 @@ export default {
|
|||||||
CanvasSize:'画布大小',
|
CanvasSize:'画布大小',
|
||||||
Height:'高',
|
Height:'高',
|
||||||
Width:'宽',
|
Width:'宽',
|
||||||
CanvasNav:'缩略图',
|
CanvasNav:'系列',
|
||||||
CanvasTool:'画布工具',
|
CanvasTool:'画布工具',
|
||||||
Color:'颜色',
|
Color:'颜色',
|
||||||
Size:'大小',
|
Size:'大小',
|
||||||
@@ -65,6 +66,8 @@ export default {
|
|||||||
requiresCredits:'执行超分的图片需要消耗{data}积分',
|
requiresCredits:'执行超分的图片需要消耗{data}积分',
|
||||||
Scale:'倍率',
|
Scale:'倍率',
|
||||||
Cancel:'取消',
|
Cancel:'取消',
|
||||||
|
size:'区域',
|
||||||
|
density:'强度',
|
||||||
jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
|
jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
|
||||||
jsContent2:'我们只支持对印花进行超分',
|
jsContent2:'我们只支持对印花进行超分',
|
||||||
jsContent3:'您的积分小于一次超分',
|
jsContent3:'您的积分小于一次超分',
|
||||||
@@ -72,7 +75,9 @@ export default {
|
|||||||
jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
|
jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
|
||||||
jsContent6:'请选择需要超分的图片',
|
jsContent6:'请选择需要超分的图片',
|
||||||
jsContent7:'保存成功~',
|
jsContent7:'保存成功~',
|
||||||
jsContent8:'是否需要自动裁剪画布多余空间',
|
jsContent8:'是否继续编辑',
|
||||||
|
jsContent9:'是否需要自动裁剪画布多余空间',
|
||||||
|
jsContent10:'请选择一张图片后再次尝试',
|
||||||
},
|
},
|
||||||
upgradePlan:{
|
upgradePlan:{
|
||||||
BuyCredlts:'购买积分',
|
BuyCredlts:'购买积分',
|
||||||
@@ -159,6 +164,7 @@ export default {
|
|||||||
Upload:'上传',
|
Upload:'上传',
|
||||||
MagicTools:'转换产品图工具',
|
MagicTools:'转换产品图工具',
|
||||||
Similarity:'相似度',
|
Similarity:'相似度',
|
||||||
|
Highlight:'高亮',
|
||||||
RelightDirection:'打光方向',
|
RelightDirection:'打光方向',
|
||||||
GenerateProduct:'生成的产品',
|
GenerateProduct:'生成的产品',
|
||||||
SelectedProduct:'选择的产品',
|
SelectedProduct:'选择的产品',
|
||||||
@@ -297,6 +303,7 @@ export default {
|
|||||||
Thumbnail:'选择的线稿',
|
Thumbnail:'选择的线稿',
|
||||||
inputContent1:'生成图片的标题',
|
inputContent1:'生成图片的标题',
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
maximumLength:'输入的内容超过允许输入的最大长度',
|
||||||
|
GenerateSketch:'生成线稿',
|
||||||
jsContent1:"上传失败",
|
jsContent1:"上传失败",
|
||||||
jsContent2:"您只能上传图片文件！",
|
jsContent2:"您只能上传图片文件！",
|
||||||
jsContent3:'图片必须小于5MB',
|
jsContent3:'图片必须小于5MB',
|
||||||
@@ -338,7 +345,7 @@ export default {
|
|||||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
||||||
SelectSuccessivelyOffTitle:'连续选色模式关闭.',
|
SelectSuccessivelyOffTitle:'连续选色模式关闭.',
|
||||||
SelectSeparately:'单选',
|
SelectSeparately:'单选',
|
||||||
ExtractColor:'提取颜色',
|
ExtractColor:'提取',
|
||||||
Single:'单色',
|
Single:'单色',
|
||||||
Gradual:'渐变',
|
Gradual:'渐变',
|
||||||
Alignment:'线性',
|
Alignment:'线性',
|
||||||
@@ -412,6 +419,9 @@ export default {
|
|||||||
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
||||||
Model:'模型',
|
Model:'模型',
|
||||||
uploadTitle:'上传参考图',
|
uploadTitle:'上传参考图',
|
||||||
|
uploadproduct:'上传产品图',
|
||||||
|
style:'风格',
|
||||||
|
referenceImage:'参考图',
|
||||||
sloganTitle:'输入文字内容',
|
sloganTitle:'输入文字内容',
|
||||||
jsContent1:"您只能上传图片文件！",
|
jsContent1:"您只能上传图片文件！",
|
||||||
jsContent2:'图片必须小于5MB',
|
jsContent2:'图片必须小于5MB',
|
||||||
@@ -522,6 +532,7 @@ export default {
|
|||||||
Publish:'发布',
|
Publish:'发布',
|
||||||
CoverPicture:'封面图',
|
CoverPicture:'封面图',
|
||||||
CollectionTitle:'系列名字',
|
CollectionTitle:'系列名字',
|
||||||
|
topic:'话题',
|
||||||
Description:'描述',
|
Description:'描述',
|
||||||
Permissions:'权限',
|
Permissions:'权限',
|
||||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
PermissionsItem1:'允许其他用户进行二次创作。',
|
||||||
@@ -535,6 +546,8 @@ export default {
|
|||||||
newScaleImage:{
|
newScaleImage:{
|
||||||
Collection:'系列',
|
Collection:'系列',
|
||||||
SecondaryCreation:'二次创作',
|
SecondaryCreation:'二次创作',
|
||||||
|
Follow:'关注',
|
||||||
|
Unfollow:'取关',
|
||||||
CreationTime:'创建时间',
|
CreationTime:'创建时间',
|
||||||
UpdateTime:'更新时间',
|
UpdateTime:'更新时间',
|
||||||
Comment:'评论',
|
Comment:'评论',
|
||||||
@@ -556,6 +569,37 @@ export default {
|
|||||||
jsContent5:'是否删除当前作品',
|
jsContent5:'是否删除当前作品',
|
||||||
jsContent6:'作品被作者删除',
|
jsContent6:'作品被作者删除',
|
||||||
},
|
},
|
||||||
|
scaleImage:{
|
||||||
|
overlayOrNot:'是否覆盖当前图片',
|
||||||
|
submitCanvas:'画布内容没有储存，是否继续',
|
||||||
|
},
|
||||||
|
account:{
|
||||||
|
personCentered:'个人中心',
|
||||||
|
myInformation:'我的信息',
|
||||||
|
Home:'首页',
|
||||||
|
Messages:'消息中心',
|
||||||
|
Follow:'关注',
|
||||||
|
Fans:'粉丝',
|
||||||
|
editUser:'修改个人信息',
|
||||||
|
//编辑个人信息页
|
||||||
|
userName:'用户名',
|
||||||
|
email:'邮箱',
|
||||||
|
Submit:'提交',
|
||||||
|
//消息
|
||||||
|
systemMessages:'系统消息',
|
||||||
|
comment:'评论',
|
||||||
|
like:'点赞',
|
||||||
|
NewFans:'新增粉丝',
|
||||||
|
AllRead:'全部已读',
|
||||||
|
dataNull:'没有任何信息~',
|
||||||
|
reply:'评论你的作品',
|
||||||
|
followedYou:'关注了你',
|
||||||
|
likedYourWork:'赞了你的作品',
|
||||||
|
//互动
|
||||||
|
Interact:'互动',
|
||||||
|
hisWorks:'他的作品',
|
||||||
|
works:'作品',
|
||||||
|
},
|
||||||
guide:{
|
guide:{
|
||||||
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
|
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
|
||||||
guide2:"选择您要设计的服装性别。",
|
guide2:"选择您要设计的服装性别。",
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export default {
|
|||||||
HISTORY:'HISTORY',
|
HISTORY:'HISTORY',
|
||||||
WORKS:'GALLERY',
|
WORKS:'GALLERY',
|
||||||
EVENTS:'EVENTS',
|
EVENTS:'EVENTS',
|
||||||
|
personal:'Personal Center',
|
||||||
bindEmail:'bind email',
|
bindEmail:'bind email',
|
||||||
logOff:'log off',
|
logOff:'log off',
|
||||||
Tutorial:'Tutorial',
|
Tutorial:'Tutorial',
|
||||||
@@ -39,7 +40,6 @@ export default {
|
|||||||
createTime:'Create Time',
|
createTime:'Create Time',
|
||||||
},
|
},
|
||||||
payOrder:{
|
payOrder:{
|
||||||
|
|
||||||
OrderInformation:'Order Information',
|
OrderInformation:'Order Information',
|
||||||
CreditsInformation:'Credits Information',
|
CreditsInformation:'Credits Information',
|
||||||
},
|
},
|
||||||
@@ -48,7 +48,7 @@ export default {
|
|||||||
CanvasSize:'Canvas Size',
|
CanvasSize:'Canvas Size',
|
||||||
Height:'Height',
|
Height:'Height',
|
||||||
Width:'Width',
|
Width:'Width',
|
||||||
CanvasNav:'Canvas Nav',
|
CanvasNav:'Collection',
|
||||||
CanvasTool:'Canvas Tool',
|
CanvasTool:'Canvas Tool',
|
||||||
Color:'Color',
|
Color:'Color',
|
||||||
Size:'Size',
|
Size:'Size',
|
||||||
@@ -66,6 +66,8 @@ export default {
|
|||||||
requiresCredits:'Performing upscale image requires a {data} credits',
|
requiresCredits:'Performing upscale image requires a {data} credits',
|
||||||
Scale:'Scale',
|
Scale:'Scale',
|
||||||
Cancel:'Cancel',
|
Cancel:'Cancel',
|
||||||
|
size:'Size',
|
||||||
|
density:'Density',
|
||||||
jsContent1:"Have you saved your canvas content? If not, please click 'Save' before closing.",
|
jsContent1:"Have you saved your canvas content? If not, please click 'Save' before closing.",
|
||||||
jsContent2:'We only provide super-resolution capabilities for printboard images.',
|
jsContent2:'We only provide super-resolution capabilities for printboard images.',
|
||||||
jsContent3:'Your points are less than one SR',
|
jsContent3:'Your points are less than one SR',
|
||||||
@@ -73,7 +75,9 @@ export default {
|
|||||||
jsContent5:'After super-resolution enhancement, the {str} th image you selected has a resolution exceeding 2048, Please choose a lower magnification level.',
|
jsContent5:'After super-resolution enhancement, the {str} th image you selected has a resolution exceeding 2048, Please choose a lower magnification level.',
|
||||||
jsContent6:'Please select the picture that requires upscale',
|
jsContent6:'Please select the picture that requires upscale',
|
||||||
jsContent7:'save successfully',
|
jsContent7:'save successfully',
|
||||||
jsContent8:'Whether you need to automatically crop your canvas excess space',
|
jsContent8:'Whether to continue editing',
|
||||||
|
jsContent9:'Whether you need to automatically crop your canvas excess space',
|
||||||
|
jsContent10:'Please select a picture and try again',
|
||||||
},
|
},
|
||||||
upgradePlan:{
|
upgradePlan:{
|
||||||
BuyCredlts:'Buy credits',
|
BuyCredlts:'Buy credits',
|
||||||
@@ -159,6 +163,7 @@ export default {
|
|||||||
SelectCollection:'Select Collection',
|
SelectCollection:'Select Collection',
|
||||||
Upload:'Upload',
|
Upload:'Upload',
|
||||||
Similarity:'Similarity',
|
Similarity:'Similarity',
|
||||||
|
Highlight:'Highlight',
|
||||||
RelightDirection:'Relight Direction',
|
RelightDirection:'Relight Direction',
|
||||||
MagicTools:'To Product lmage Tool',
|
MagicTools:'To Product lmage Tool',
|
||||||
GenerateProduct:'Generate Product',
|
GenerateProduct:'Generate Product',
|
||||||
@@ -298,6 +303,7 @@ export default {
|
|||||||
Thumbnail:'Selected sketchboard',
|
Thumbnail:'Selected sketchboard',
|
||||||
inputContent1:'Input prompt',
|
inputContent1:'Input prompt',
|
||||||
maximumLength:'The entered content exceeds the maximum length.',
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
|
GenerateSketch:'Generate Sketch',
|
||||||
jsContent1:"upload failed",
|
jsContent1:"upload failed",
|
||||||
jsContent2:"You can only upload Image file!",
|
jsContent2:"You can only upload Image file!",
|
||||||
jsContent3:'Image must smaller than 5MB!',
|
jsContent3:'Image must smaller than 5MB!',
|
||||||
@@ -413,6 +419,9 @@ export default {
|
|||||||
effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
|
effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
|
||||||
Model:'Model',
|
Model:'Model',
|
||||||
uploadTitle:'Upload reference image',
|
uploadTitle:'Upload reference image',
|
||||||
|
uploadproduct:'Upload product picture',
|
||||||
|
style:'Style',
|
||||||
|
referenceImage:'Reference Image',
|
||||||
sloganTitle:'Input text content',
|
sloganTitle:'Input text content',
|
||||||
jsContent1:"You can only upload Image file!",
|
jsContent1:"You can only upload Image file!",
|
||||||
jsContent2:'Image must smaller than 5MB!',
|
jsContent2:'Image must smaller than 5MB!',
|
||||||
@@ -497,7 +506,7 @@ export default {
|
|||||||
inputContent:'Please input',
|
inputContent:'Please input',
|
||||||
preview:'Preview',
|
preview:'Preview',
|
||||||
isOverall:'Pattern images cannot be used in Single mode',
|
isOverall:'Pattern images cannot be used in Single mode',
|
||||||
jsContent1:'The above changes are not saved.Are you sure you want to continue? ',
|
jsContent1:'The above changes are not saved. Are you sure you want to continue? ',
|
||||||
},
|
},
|
||||||
uploadFile:{
|
uploadFile:{
|
||||||
jsContent1:'You can select up to {maxImg} images',
|
jsContent1:'You can select up to {maxImg} images',
|
||||||
@@ -515,7 +524,7 @@ export default {
|
|||||||
},
|
},
|
||||||
works:{
|
works:{
|
||||||
all:'All',
|
all:'All',
|
||||||
FavoriteWorks:'Favorite Works',
|
FavoriteWorks:'Like Works',
|
||||||
MyWorks:'My Works',
|
MyWorks:'My Works',
|
||||||
RCAworkshop_2024:'AiDA Workshop 2024',
|
RCAworkshop_2024:'AiDA Workshop 2024',
|
||||||
},
|
},
|
||||||
@@ -523,6 +532,7 @@ export default {
|
|||||||
Publish:'Publish',
|
Publish:'Publish',
|
||||||
CoverPicture:'Cover Picture',
|
CoverPicture:'Cover Picture',
|
||||||
CollectionTitle:'Collection Title',
|
CollectionTitle:'Collection Title',
|
||||||
|
topic:'Topic',
|
||||||
Description:'Description',
|
Description:'Description',
|
||||||
Permissions:'Permissions',
|
Permissions:'Permissions',
|
||||||
PermissionsItem1:'Allow other users to perform secondary creation.',
|
PermissionsItem1:'Allow other users to perform secondary creation.',
|
||||||
@@ -536,6 +546,8 @@ export default {
|
|||||||
newScaleImage:{
|
newScaleImage:{
|
||||||
Collection:'Collection',
|
Collection:'Collection',
|
||||||
SecondaryCreation:'Secondary Creation',
|
SecondaryCreation:'Secondary Creation',
|
||||||
|
Follow:'Follow',
|
||||||
|
Unfollow:'Unfollow',
|
||||||
CreationTime:'CreationTime',
|
CreationTime:'CreationTime',
|
||||||
UpdateTime:'UpdateTime',
|
UpdateTime:'UpdateTime',
|
||||||
Comment:'Comment',
|
Comment:'Comment',
|
||||||
@@ -557,6 +569,47 @@ export default {
|
|||||||
jsContent5:'Whether to delete the current gallery',
|
jsContent5:'Whether to delete the current gallery',
|
||||||
jsContent6:'The author deleted the work',
|
jsContent6:'The author deleted the work',
|
||||||
},
|
},
|
||||||
|
scaleImage:{
|
||||||
|
overlayOrNot:'Whether to overwrite the current picture',
|
||||||
|
submitCanvas:'Canvas content is not saved, whether to continue',
|
||||||
|
},
|
||||||
|
account:{
|
||||||
|
personCentered:'Account',
|
||||||
|
myInformation:'My Details',
|
||||||
|
Home:'Home',
|
||||||
|
Messages:'Messages',
|
||||||
|
Follow:'Follow',
|
||||||
|
Fans:'Fans',
|
||||||
|
editUser:'Change Information',
|
||||||
|
//编辑个人信息页
|
||||||
|
userName:'User Name',
|
||||||
|
email:'Email',
|
||||||
|
Submit:'Submit',
|
||||||
|
//消息
|
||||||
|
systemMessages:'System Messages',
|
||||||
|
comment:'Comment',
|
||||||
|
like:'Like',
|
||||||
|
NewFans:'New fans',
|
||||||
|
AllRead:'All read',
|
||||||
|
dataNull:'no message~',
|
||||||
|
reply:'commented on your work',
|
||||||
|
followedYou:'followed you',
|
||||||
|
likedYourWork:'liked your work',
|
||||||
|
//互动
|
||||||
|
Interact:'interact',
|
||||||
|
hisWorks:'His works',
|
||||||
|
works:'Works',
|
||||||
|
},
|
||||||
|
createSlogan:{
|
||||||
|
title:'Create Slogan',
|
||||||
|
Color:'Color',
|
||||||
|
FontAlign:'Font Align',
|
||||||
|
FontStyle:'Font Style',
|
||||||
|
FontFamily:'Font Family',
|
||||||
|
add:'Add',
|
||||||
|
delete:'Delete',
|
||||||
|
submit:'Submit',
|
||||||
|
},
|
||||||
guide:{
|
guide:{
|
||||||
guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",
|
guide1:"You can personalize your design settings right here in the <strong>Workspace</strong>, including choosing to design for men's or women's wear, as well as selecting the mannequin to use for your creations.",
|
||||||
guide2:"Select the apparel type you'd like to work on.",
|
guide2:"Select the apparel type you'd like to work on.",
|
||||||
|
|||||||
@@ -24,6 +24,9 @@ const app = createApp(App);
|
|||||||
flexible()
|
flexible()
|
||||||
|
|
||||||
import { getCookie, setCookie } from "@/tool/cookie";
|
import { getCookie, setCookie } from "@/tool/cookie";
|
||||||
|
document.addEventListener('touchstart', function(event) {
|
||||||
|
event.preventDefault(); // 阻止长按选中
|
||||||
|
});
|
||||||
let loadingParam = {
|
let loadingParam = {
|
||||||
loading: require('./assets/images/homePage/loading.gif'),
|
loading: require('./assets/images/homePage/loading.gif'),
|
||||||
attempt: 1
|
attempt: 1
|
||||||
|
|||||||
@@ -69,6 +69,41 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
path:'eventsDetail',
|
path:'eventsDetail',
|
||||||
name:'eventsDetail',
|
name:'eventsDetail',
|
||||||
component: _import_component('Events/eventsDetail.vue'),
|
component: _import_component('Events/eventsDetail.vue'),
|
||||||
|
},{
|
||||||
|
path:'account',
|
||||||
|
name:'account',
|
||||||
|
component: _import_component('Account/account.vue'),
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name:'accountChil',
|
||||||
|
redirect: "/home/account/accountHome"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'accountHome',
|
||||||
|
name:'accountHome',
|
||||||
|
component: _import_component('Account/accountHome.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'accountEdit',
|
||||||
|
name:'accountEdit',
|
||||||
|
component: _import_component('Account/accountEdit.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'accountMessage',
|
||||||
|
name:'accountMessage',
|
||||||
|
component: _import_component('Account/accountMessage.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'accountFollowFans',
|
||||||
|
name:'accountFollowFans',
|
||||||
|
component: _import_component('Account/accountFollowFans.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
path:'otherUsers',
|
||||||
|
name:'otherUsers',
|
||||||
|
component: _import_component('Account/otherUsers.vue'),
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -206,11 +241,21 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: 'feedbackSurveyCN',
|
name: 'feedbackSurveyCN',
|
||||||
component: _import('feedbackSurveyCN'),
|
component: _import('feedbackSurveyCN'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/emailVerify',
|
||||||
|
name: 'emailVerify',
|
||||||
|
component: _import('emailVerify'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
name: '404',
|
name: '404',
|
||||||
component: _import('404')
|
component: _import('404')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/:catchAll(.*)",
|
||||||
|
redirect: "/404",
|
||||||
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
@@ -221,15 +266,24 @@ const router = createRouter({
|
|||||||
// 刷新保存数据-
|
// 刷新保存数据-
|
||||||
let state:any = store.state
|
let state:any = store.state
|
||||||
window.addEventListener("beforeunload", (e) => {
|
window.addEventListener("beforeunload", (e) => {
|
||||||
sessionStorage.setItem(
|
localStorage.setItem(
|
||||||
"vuex_setSystemUser",
|
"vuex_setSystemUser",
|
||||||
JSON.stringify(state.UserHabit.systemUser.value)
|
JSON.stringify(state.UserHabit.systemUser.value)
|
||||||
);
|
);
|
||||||
|
localStorage.setItem(
|
||||||
|
"vuex_setUserInfo",
|
||||||
|
JSON.stringify(state.UserHabit.userInfo)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
var vuex_setSystemUser:any = sessionStorage.getItem("vuex_setSystemUser");
|
var vuex_setSystemUser:any = localStorage.getItem("vuex_setSystemUser");
|
||||||
|
var vuex_setUserInfo:any = localStorage.getItem("vuex_setUserInfo");
|
||||||
if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
|
if (vuex_setSystemUser == 0 || vuex_setSystemUser == 1) {
|
||||||
store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
|
store.commit("setSystemUser", JSON.parse(vuex_setSystemUser));
|
||||||
sessionStorage.removeItem("vuex_setSystemUser");
|
localStorage.removeItem("vuex_setSystemUser");
|
||||||
|
}
|
||||||
|
if (vuex_setUserInfo) {
|
||||||
|
store.commit("setUserInfo", JSON.parse(vuex_setUserInfo));
|
||||||
|
localStorage.removeItem("vuex_setSystemUser");
|
||||||
}
|
}
|
||||||
|
|
||||||
let setMurmur = (id:any)=> {
|
let setMurmur = (id:any)=> {
|
||||||
@@ -264,7 +318,7 @@ let setMurmur = (id:any)=> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
router.beforeEach((to:any, from, next) => {
|
router.beforeEach((to:any, from, next) => {
|
||||||
let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN']//指定页面系统维护也可以访问
|
let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN','emailVerify']//指定页面系统维护也可以访问
|
||||||
|
|
||||||
// 系统维护
|
// 系统维护
|
||||||
const toName = to.name === 'upgrade';
|
const toName = to.name === 'upgrade';
|
||||||
@@ -323,30 +377,27 @@ router.beforeEach((to:any, from, next) => {
|
|||||||
}
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (routeExists) {//检测档期那页面是否存在
|
if (isMurmur && murmurStr && token) {
|
||||||
if (isMurmur && murmurStr && token) {
|
const toName = to.name === 'login';
|
||||||
const toName = to.name === 'login';
|
if (toName) {
|
||||||
if (toName) {
|
return next({ name: '/home' });//机房用户
|
||||||
next({ name: '/home' });//机房用户
|
|
||||||
} else {
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
|
|
||||||
if(userIdList.indexOf(userInfo.userId) > -1){
|
|
||||||
next();
|
|
||||||
}else{
|
|
||||||
next({ name: '/404' });
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
// 如果页面存在，正常跳转
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 如果页面不存在，可以跳转到404页面或者其他页面
|
if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
|
||||||
next('/404');
|
if(userIdList.indexOf(userInfo.userId) > -1){
|
||||||
|
}else{
|
||||||
|
return next({ name: '/404' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 如果页面存在，正常跳转
|
||||||
}
|
}
|
||||||
|
next();
|
||||||
|
// if (routeExists) {//检测档期那页面是否存在
|
||||||
|
|
||||||
|
// } else {
|
||||||
|
// // 如果页面不存在，可以跳转到404页面或者其他页面
|
||||||
|
// next('/404');
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ interface DesignDetail{
|
|||||||
templateImgUrl:any,
|
templateImgUrl:any,
|
||||||
designId:any,
|
designId:any,
|
||||||
showSketchList:any,
|
showSketchList:any,
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const HomeStoreModule : Module<DesignDetail,RootState> = {
|
const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||||
@@ -86,7 +85,6 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
actions:{
|
actions:{
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import GO from '@/tool/GO';
|
|||||||
interface UploadFiles{
|
interface UploadFiles{
|
||||||
moodboard:any,
|
moodboard:any,
|
||||||
disposeMoodboard:any,
|
disposeMoodboard:any,
|
||||||
|
moodboardPosition:any,
|
||||||
moodboardFiles:any,
|
moodboardFiles:any,
|
||||||
moodboardGenerateFiles:any,
|
moodboardGenerateFiles:any,
|
||||||
moodboardMaterialFiles:any,
|
moodboardMaterialFiles:any,
|
||||||
@@ -29,6 +30,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
state:{
|
state:{
|
||||||
moodboard:[],
|
moodboard:[],
|
||||||
disposeMoodboard:[],
|
disposeMoodboard:[],
|
||||||
|
moodboardPosition:{},
|
||||||
moodboardFiles:[],
|
moodboardFiles:[],
|
||||||
moodboardGenerateFiles:[],
|
moodboardGenerateFiles:[],
|
||||||
moodboardMaterialFiles:[],
|
moodboardMaterialFiles:[],
|
||||||
@@ -56,6 +58,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
},
|
},
|
||||||
setDisposeMoodboard(state,files){
|
setDisposeMoodboard(state,files){
|
||||||
state.disposeMoodboard = [files]
|
state.disposeMoodboard = [files]
|
||||||
|
},
|
||||||
|
setDisposeMoodboardPosition(state,files){
|
||||||
|
state.moodboardPosition = files
|
||||||
|
console.log(state.moodboardPosition);
|
||||||
|
|
||||||
},
|
},
|
||||||
setMoodboardGenerateFiles(state,files){
|
setMoodboardGenerateFiles(state,files){
|
||||||
state.moodboardGenerateFiles = files
|
state.moodboardGenerateFiles = files
|
||||||
@@ -198,6 +205,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
setAllBoardData(state){
|
setAllBoardData(state){
|
||||||
state.allBoardData = {
|
state.allBoardData = {
|
||||||
disposeMoodboard:state.disposeMoodboard,
|
disposeMoodboard:state.disposeMoodboard,
|
||||||
|
moodboardPosition:state.moodboardPosition,
|
||||||
moodboardFiles:state.moodboard,
|
moodboardFiles:state.moodboard,
|
||||||
printboardFiles:state.printboard,
|
printboardFiles:state.printboard,
|
||||||
colorBoards:state.colorBoards,
|
colorBoards:state.colorBoards,
|
||||||
@@ -233,6 +241,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
state.moodTemplateId = ''
|
state.moodTemplateId = ''
|
||||||
state.disposeMoodboard = []
|
state.disposeMoodboard = []
|
||||||
// state.showSketchboard = []
|
// state.showSketchboard = []
|
||||||
|
state.chooseIsDesign.value = true
|
||||||
},
|
},
|
||||||
clearAllId(state){
|
clearAllId(state){
|
||||||
state.moodboard.forEach((v:any) => {
|
state.moodboard.forEach((v:any) => {
|
||||||
@@ -250,6 +259,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
},
|
},
|
||||||
clearMoodTemplateId(state){
|
clearMoodTemplateId(state){
|
||||||
state.disposeMoodboard = []
|
state.disposeMoodboard = []
|
||||||
|
state.moodboardPosition = {}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
actions:{
|
actions:{
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import {Module} from 'vuex'
|
import {Module} from 'vuex'
|
||||||
import {RootState} from '../index'
|
import {RootState} from '../index'
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
|
import store from '../index'
|
||||||
interface UserHabit{
|
interface UserHabit{
|
||||||
clothingType:any,
|
clothingType:any,
|
||||||
credits:any,
|
credits:any,
|
||||||
@@ -13,7 +14,12 @@ interface UserHabit{
|
|||||||
FemalePosition:any,
|
FemalePosition:any,
|
||||||
MalePosition:any,
|
MalePosition:any,
|
||||||
Position:any,
|
Position:any,
|
||||||
|
SketchGenerateType:any,
|
||||||
|
SketchStyle:any,
|
||||||
systemUser:any,
|
systemUser:any,
|
||||||
|
userInfo:any,
|
||||||
|
messageSystem:any,
|
||||||
|
sex:any,
|
||||||
}
|
}
|
||||||
|
|
||||||
const userHabit : Module<UserHabit,RootState> = {
|
const userHabit : Module<UserHabit,RootState> = {
|
||||||
@@ -35,11 +41,21 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
designElementsType:[],
|
designElementsType:[],
|
||||||
FemalePosition:[],
|
FemalePosition:[],
|
||||||
MalePosition:[],
|
MalePosition:[],
|
||||||
|
SketchGenerateType:[],
|
||||||
Position:[],
|
Position:[],
|
||||||
|
SketchStyle:[],
|
||||||
systemUser:{
|
systemUser:{
|
||||||
value : -1
|
value : -1
|
||||||
},
|
},
|
||||||
|
userInfo:{
|
||||||
|
|
||||||
|
},
|
||||||
|
messageSystem:{
|
||||||
|
messageNum:0,
|
||||||
|
messageType:{},
|
||||||
|
},
|
||||||
|
sex:{
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mutations:{
|
mutations:{
|
||||||
res_clothingType(state,data){
|
res_clothingType(state,data){
|
||||||
@@ -57,6 +73,12 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
setFemalePosition(state,data){
|
setFemalePosition(state,data){
|
||||||
state.FemalePosition = data
|
state.FemalePosition = data
|
||||||
},
|
},
|
||||||
|
setSketchGenerateType(state,data){
|
||||||
|
state.SketchGenerateType = data
|
||||||
|
},
|
||||||
|
setSketchStyle(state,data){
|
||||||
|
state.SketchStyle = data
|
||||||
|
},
|
||||||
setMalePosition(state,data){
|
setMalePosition(state,data){
|
||||||
state.MalePosition = data
|
state.MalePosition = data
|
||||||
},
|
},
|
||||||
@@ -70,9 +92,54 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
setSystemUser(state,data){
|
setSystemUser(state,data){
|
||||||
state.systemUser.value = data
|
state.systemUser.value = data
|
||||||
},
|
},
|
||||||
|
setUserInfo(state,data){
|
||||||
|
if(!data)return
|
||||||
|
for (const key in data) {
|
||||||
|
state.userInfo[key] = data[key]
|
||||||
|
}
|
||||||
|
},
|
||||||
clearSystemUser(state){
|
clearSystemUser(state){
|
||||||
state.systemUser.value = -1
|
state.systemUser.value = -1
|
||||||
|
state.userInfo = {}
|
||||||
},
|
},
|
||||||
|
setMessageSystem(state,data){
|
||||||
|
let num = 0
|
||||||
|
// let userInfo = ['-1']
|
||||||
|
let userInfo = ['followeeCount','followerCount']
|
||||||
|
let obj:any = {}
|
||||||
|
console.log(data);
|
||||||
|
data.forEach((item:any) => {
|
||||||
|
for (const iterator in item) {
|
||||||
|
if(userInfo.indexOf(iterator) > -1){
|
||||||
|
obj[iterator] = item[iterator]
|
||||||
|
store.commit('setUserInfo', obj)
|
||||||
|
}else{
|
||||||
|
// if(iterator != 'newPosted')num+=item[iterator]
|
||||||
|
state.messageSystem.messageType[iterator] = item[iterator]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let allObj = state.messageSystem.messageType
|
||||||
|
for (const iterator in allObj) {
|
||||||
|
if(userInfo.indexOf(iterator) > -1){
|
||||||
|
}else{
|
||||||
|
if(iterator != 'newPosted')num+=allObj[iterator]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.messageSystem.messageNum = num
|
||||||
|
},
|
||||||
|
closeMessageSystem(state,data){
|
||||||
|
if(!data){
|
||||||
|
state.messageSystem.messageNum = 0
|
||||||
|
state.messageSystem.messageType = null
|
||||||
|
}else{
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSex(state,data){
|
||||||
|
state.sex.value = data
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
actions:{
|
actions:{
|
||||||
@@ -105,7 +172,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
},
|
},
|
||||||
async getLangType(context){
|
async getLangType(context){
|
||||||
let allPromise = [];
|
let allPromise = [];
|
||||||
let getList = ['DesignElementsEnum','PrintboardLevel2TypeEnum','FemalePosition','MalePosition']
|
let getList = ['DesignElementsEnum','PrintboardLevel2TypeEnum','FemalePosition','MalePosition','SketchStyle','SketchGenerateType','Sex']
|
||||||
let axiosGet = (item:any)=>{
|
let axiosGet = (item:any)=>{
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:item}}).then((rv: any) => {
|
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:item}}).then((rv: any) => {
|
||||||
@@ -114,6 +181,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
let name = item.name
|
let name = item.name
|
||||||
item.name = item.value
|
item.name = item.value
|
||||||
item.value = name
|
item.value = name
|
||||||
|
item.optype = false
|
||||||
});
|
});
|
||||||
if(item == 'DesignElementsEnum'){
|
if(item == 'DesignElementsEnum'){
|
||||||
context.commit('setDesignElementsType',rv)
|
context.commit('setDesignElementsType',rv)
|
||||||
@@ -124,6 +192,12 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
}else if(item == 'MalePosition'){
|
}else if(item == 'MalePosition'){
|
||||||
context.commit('setMalePosition',rv)
|
context.commit('setMalePosition',rv)
|
||||||
context.commit('setPosition','MalePosition')
|
context.commit('setPosition','MalePosition')
|
||||||
|
}else if(item == 'SketchStyle'){
|
||||||
|
context.commit('setSketchStyle',rv)
|
||||||
|
}else if(item == 'SketchGenerateType'){
|
||||||
|
context.commit('setSketchGenerateType',rv)
|
||||||
|
}else if(item == 'Sex'){
|
||||||
|
context.commit('setSex',rv)
|
||||||
}
|
}
|
||||||
resolve('')
|
resolve('')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -295,6 +295,102 @@ function JSSetRemoveImage(fun){
|
|||||||
cornerSize: 24
|
cornerSize: 24
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
function JSSetGroup(data){
|
||||||
|
let rect
|
||||||
|
if(data.gradient){
|
||||||
|
let colorStops = []
|
||||||
|
data.gradient.gradientList.forEach(item=>{
|
||||||
|
let obj = {
|
||||||
|
offset:item.left.split('%')[0]/100,
|
||||||
|
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
|
||||||
|
}
|
||||||
|
colorStops.push(obj)
|
||||||
|
})
|
||||||
|
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
|
||||||
|
let linear = new fabric.Gradient({
|
||||||
|
type: 'linear', // 线性渐变
|
||||||
|
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
|
||||||
|
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
|
||||||
|
colorStops: colorStops,
|
||||||
|
})
|
||||||
|
var color = new fabric.Rect({
|
||||||
|
top:0,
|
||||||
|
left:0,
|
||||||
|
width: 110,
|
||||||
|
height: 130,
|
||||||
|
textAlign: "left",
|
||||||
|
fill: linear // 设置渐变填充
|
||||||
|
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||||||
|
});
|
||||||
|
var text = new fabric.Text('',{
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
fontSize: 0,
|
||||||
|
fontFamily: "Arial",
|
||||||
|
textAlign: "left",
|
||||||
|
fill: "black",
|
||||||
|
});
|
||||||
|
let text1 = new fabric.Text('',{
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: 20,
|
||||||
|
fontSize: 0,
|
||||||
|
fontFamily: "Arial",
|
||||||
|
textAlign: "left",
|
||||||
|
});
|
||||||
|
rect = {text,text1,color,width:110}
|
||||||
|
}else{
|
||||||
|
var text = new fabric.Text(data.tcx,{
|
||||||
|
left: 0,
|
||||||
|
top: 60,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "Arial",
|
||||||
|
textAlign: "left",
|
||||||
|
fill: "black",
|
||||||
|
});
|
||||||
|
let text1 = new fabric.Text(data.name,{
|
||||||
|
left: 0,
|
||||||
|
top: 80,
|
||||||
|
width: 20,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "Arial",
|
||||||
|
textAlign: "left",
|
||||||
|
});
|
||||||
|
let width = 110 > text1.width ? 110 : text1.width;
|
||||||
|
var color = new fabric.Rect({
|
||||||
|
width: width,
|
||||||
|
height: 60,
|
||||||
|
textAlign: "left",
|
||||||
|
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
|
||||||
|
});
|
||||||
|
rect = {text,text1,color,width}
|
||||||
|
}
|
||||||
|
return rect
|
||||||
|
}
|
||||||
|
function JSSetPencil(str,canvas){
|
||||||
|
let pencil
|
||||||
|
if(str == 'PencilBrush'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
|
||||||
|
}else if(str == 'Marking'){
|
||||||
|
pencil = new fabric.PencilBrush(canvas,); //记号笔
|
||||||
|
}else if(str == 'InkBrush'){
|
||||||
|
pencil = new fabric.InkBrush(canvas,{}); //油画笔
|
||||||
|
}else if(str=='CrayonBrush'){
|
||||||
|
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
|
||||||
|
}else if(str == 'RibbonBrush'){
|
||||||
|
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(str == 'MarkerBrush'){
|
||||||
|
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
|
||||||
|
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
|
||||||
|
}else if(str == 'WritingBrush'){
|
||||||
|
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
|
||||||
|
}else if(str == 'LongfurBrush'){
|
||||||
|
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
|
||||||
|
}else if(str == 'SpraypaintBrush'){
|
||||||
|
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
|
||||||
|
}
|
||||||
|
return pencil
|
||||||
|
}
|
||||||
export {
|
export {
|
||||||
multiselectJS,
|
multiselectJS,
|
||||||
JSRectUpdata,
|
JSRectUpdata,
|
||||||
@@ -304,5 +400,7 @@ export {
|
|||||||
JScreateCheck,
|
JScreateCheck,
|
||||||
exportSele,
|
exportSele,
|
||||||
JSSetTexture,
|
JSSetTexture,
|
||||||
JSSetRemoveImage
|
JSSetRemoveImage,
|
||||||
|
JSSetGroup,
|
||||||
|
JSSetPencil,
|
||||||
}
|
}
|
||||||
241
src/tool/canvasGeneral.js
Normal file
241
src/tool/canvasGeneral.js
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
import {
|
||||||
|
exportSele,
|
||||||
|
JSRectUpdata,
|
||||||
|
JSchangeType,
|
||||||
|
JScanvasMouseDown,
|
||||||
|
JScanvasMouseMove,
|
||||||
|
JScreateCheck,
|
||||||
|
JSSetTexture,
|
||||||
|
JSSetRemoveImage,
|
||||||
|
} from "@/tool/canvasDrawing";
|
||||||
|
class myCanvas {
|
||||||
|
constructor() {
|
||||||
|
this.canvasDomParent = null;
|
||||||
|
this.canvas = null;
|
||||||
|
this.canvasDom = null;
|
||||||
|
this.pencilBtn = null;
|
||||||
|
this.pencilType = null;
|
||||||
|
this.keyDown = [];//键盘按下
|
||||||
|
this._clipboard = null; //剪切板
|
||||||
|
this.isLoadCanvas = false//撤回或者反撤回false为撤回
|
||||||
|
this.reverseCanvasState=[];//撤回
|
||||||
|
this.normalCanvasState=[];//反撤回
|
||||||
|
this.canvasState = {}//当前内容
|
||||||
|
this.pencilList = {
|
||||||
|
textFontFamilyList:[
|
||||||
|
{ value: 'Arial', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art1', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art2', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art3', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art4', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art5', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art6', name: 'select font' },
|
||||||
|
{ value: 'EN_slogan_art7', name: 'select font' },
|
||||||
|
{ value: '微软雅黑', name: '请选择字体' },
|
||||||
|
{ value: 'CN_slogan_art1', name: '请选择字体' },
|
||||||
|
{ value: 'CN_slogan_art2', name: '请选择字体' },
|
||||||
|
{ value: 'CN_slogan_art3', name: '请选择字体' },
|
||||||
|
{ value: 'CN_slogan_art4', name: '请选择字体' },
|
||||||
|
{ value: '华文行楷', name: '请选择字体' },
|
||||||
|
{ value: '隶书', name: '请选择字体' },
|
||||||
|
],
|
||||||
|
brushList:[
|
||||||
|
{
|
||||||
|
value:'PencilBrush',
|
||||||
|
url:'/image/brush/PencilBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'Marking',
|
||||||
|
url:'/image/brush/PencilBrush-2.jpg'
|
||||||
|
},{
|
||||||
|
value:'InkBrush',
|
||||||
|
url:'/image/brush/InkBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'CrayonBrush',
|
||||||
|
url:'/image/brush/CrayonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'RibbonBrush',
|
||||||
|
url:'/image/brush/RibbonBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'MarkerBrush',
|
||||||
|
url:'/image/brush/MarkerBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'WritingBrush',
|
||||||
|
url:'/image/brush/WritingBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'LongfurBrush',
|
||||||
|
url:'/image/brush/LongfurBrush.jpg'
|
||||||
|
},{
|
||||||
|
value:'SpraypaintBrush',
|
||||||
|
url:'/image/brush/SpraypaintBrush.jpg'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvasInit(dom, val) {
|
||||||
|
this.canvasDomParent = dom;
|
||||||
|
this.canvasClear()
|
||||||
|
var canvasDom = document.createElement("canvas");
|
||||||
|
this.canvasDomParent.appendChild(canvasDom);
|
||||||
|
this.canvas = new fabric.Canvas(canvasDom, {
|
||||||
|
backgroundColor: "rgba(255, 255, 255)",
|
||||||
|
width: val.width?val.width:this.canvasDomParent.getBoundingClientRect().width,
|
||||||
|
height: val.height?val.height:this.canvasDomParent.getBoundingClientRect().height,
|
||||||
|
isDrawingMode: val.isDrawingMode, // 开启绘图模式
|
||||||
|
selectionFullyContained: true,
|
||||||
|
selectionKey:'ctrlKey',
|
||||||
|
includeDefaultValues: false,//尚未测试 精简导出JSON
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
|
||||||
|
JSSetRemoveImage(this.deleteObject)
|
||||||
|
}else{
|
||||||
|
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject
|
||||||
|
}
|
||||||
|
|
||||||
|
this.canvas.on("object:modified", ()=>{
|
||||||
|
this.updateCanvasState('')
|
||||||
|
});
|
||||||
|
|
||||||
|
this.canvasKeyDown = this.canvasKeyDown.bind(this);
|
||||||
|
this.canvasKeyUp = this.canvasKeyUp.bind(this);
|
||||||
|
document.addEventListener("keydown", this.canvasKeyDown);
|
||||||
|
document.addEventListener("keyup", this.canvasKeyUp);
|
||||||
|
initAligningGuidelines(this.canvas,true)
|
||||||
|
JSchangeType(this.canvas,'init')
|
||||||
|
this.updateCanvasState('')
|
||||||
|
this.canvas.on("object:added", (event)=>{
|
||||||
|
if(!this.isLoadCanvas)this.updateCanvasState('')
|
||||||
|
});
|
||||||
|
return this.canvas
|
||||||
|
}
|
||||||
|
|
||||||
|
canvasKeyUp(event){
|
||||||
|
this.keyDown = this.keyDown.filter(function(item) {
|
||||||
|
return event.code !== item;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
canvasKeyDown(event){
|
||||||
|
if(this.keyDown.indexOf(event.key)>-1){
|
||||||
|
}else{
|
||||||
|
this.keyDown.push(event.code)
|
||||||
|
if(event.key === 'Enter' && operation.value == 'fold'){
|
||||||
|
foldEnd('Enter')
|
||||||
|
}else if(event.key === 'Delete'){
|
||||||
|
deleteObject()
|
||||||
|
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1 && this.keyDown.indexOf('ShiftLeft') > -1){
|
||||||
|
this.historyState('reverse')
|
||||||
|
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1){
|
||||||
|
this.historyState('')
|
||||||
|
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyC') > -1){
|
||||||
|
this.copy()
|
||||||
|
}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyV') > -1){
|
||||||
|
this.paste()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvasClear(){
|
||||||
|
let oldCanvasDom = this.canvasDomParent.querySelector('.canvas-container')
|
||||||
|
let oldCanvasDom1 = this.canvasDomParent.querySelector('canvas')
|
||||||
|
if(oldCanvasDom)oldCanvasDom.remove()
|
||||||
|
if(oldCanvasDom1)oldCanvasDom1.remove()
|
||||||
|
this.reverseCanvasState=[];//撤回
|
||||||
|
this.normalCanvasState=[];//反撤回
|
||||||
|
document.removeEventListener("keydown", this.canvasKeyDown);
|
||||||
|
document.removeEventListener("keyup", this.canvasKeyUp);
|
||||||
|
|
||||||
|
}
|
||||||
|
//删除选中元素
|
||||||
|
deleteObject = ()=> {
|
||||||
|
if(!this.canvas.getActiveObjects()){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let target = this.canvas.getActiveObjects()
|
||||||
|
target.forEach((item)=>{
|
||||||
|
this.canvas.fxRemove(item, {
|
||||||
|
onComplete:()=>{
|
||||||
|
this.canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||||
|
this.canvas.renderAll(); // 重新渲染 Canvas
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.canvas.FX_DURATION = 300
|
||||||
|
})
|
||||||
|
this.updateCanvasState('remove')
|
||||||
|
}
|
||||||
|
//复制粘贴
|
||||||
|
copy(canvas){
|
||||||
|
var activeObject = this.canvas.getActiveObject();
|
||||||
|
if(!activeObject){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
activeObject.clone((cloned)=>{
|
||||||
|
this._clipboard = cloned;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
paste = () => {//粘贴
|
||||||
|
if(!this._clipboard){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this._clipboard.clone(clonedObj => {
|
||||||
|
this.canvas.discardActiveObject() // 取消选择
|
||||||
|
|
||||||
|
// 设置新内容的坐标位置
|
||||||
|
clonedObj.set({
|
||||||
|
left: clonedObj.left + 10,
|
||||||
|
top: clonedObj.top + 10,
|
||||||
|
evented: true
|
||||||
|
})
|
||||||
|
|
||||||
|
if (clonedObj.type === 'activeSelection') {
|
||||||
|
// 活动选择需要一个对画布的引用
|
||||||
|
clonedObj.canvas = canvas;
|
||||||
|
clonedObj.forEachObject((obj)=>{
|
||||||
|
this.canvas.add(obj)
|
||||||
|
})
|
||||||
|
|
||||||
|
clonedObj.setCoords()
|
||||||
|
} else {
|
||||||
|
this.canvas.add(clonedObj)
|
||||||
|
}
|
||||||
|
this._clipboard.top += 10
|
||||||
|
this._clipboard.left += 10
|
||||||
|
this.canvas.setActiveObject(clonedObj)
|
||||||
|
this.canvas.requestRenderAll()
|
||||||
|
})
|
||||||
|
this.updateCanvasState()
|
||||||
|
}
|
||||||
|
|
||||||
|
//撤回反撤回
|
||||||
|
//设置画布监听修改添加事件，用来做撤回功能
|
||||||
|
updateCanvasState(str){
|
||||||
|
const canvasAsJson = JSON.stringify(this.canvas.toJSON());
|
||||||
|
if(str == 'loadingCompleted'){
|
||||||
|
// this.reverseCanvasState.push(canvasAsJson);
|
||||||
|
}
|
||||||
|
this.normalCanvasState.push(canvasAsJson);
|
||||||
|
if (this.isLoadCanvas) {
|
||||||
|
this.reverseCanvasState = []
|
||||||
|
this.isLoadCanvas = false;
|
||||||
|
this.canvasState = canvasAsJson
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//撤回
|
||||||
|
historyState(str){
|
||||||
|
if(str == 'reverse' && this.reverseCanvasState.length > 0){//反撤回
|
||||||
|
let obj = this.reverseCanvasState.pop()
|
||||||
|
// this.canvasState = this.reverseCanvasState[this.reverseCanvasState.length-1]
|
||||||
|
this.canvasState = obj
|
||||||
|
this.normalCanvasState.push(obj);
|
||||||
|
}else if(str == '' && this.normalCanvasState.length > 1){
|
||||||
|
let obj = this.normalCanvasState.pop()
|
||||||
|
this.canvasState = this.normalCanvasState[this.normalCanvasState.length-1]
|
||||||
|
this.reverseCanvasState.push(obj);
|
||||||
|
this.isLoadCanvas = true;
|
||||||
|
}else{
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.canvas.loadFromJSON(this.canvasState, () => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new myCanvas()
|
||||||
@@ -1,50 +1,36 @@
|
|||||||
import html2canvas from "html2canvas";
|
import html2canvas from "html2canvas";
|
||||||
const getJpeg = dom =>{
|
const getJpeg = dom =>{
|
||||||
return new Promise(resolve =>{
|
return new Promise(resolve =>{
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
html2canvas(dom,{useCORS: true,}).then(canvas =>{
|
html2canvas(dom,{useCORS: true,}).then(canvas =>{
|
||||||
let base64 = canvas.toDataURL('image/jpeg',.9);
|
let base64 = canvas.toDataURL('image/jpeg',.9);
|
||||||
// let quality = 0.9 // 压缩系数0-1之间
|
// let quality = 0.9 // 压缩系数0-1之间
|
||||||
let newImage = new Image()
|
let newImage = new Image()
|
||||||
newImage.src = base64
|
newImage.src = base64
|
||||||
newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
|
newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
|
||||||
// let imgWidth,
|
const filename = new Date().toISOString() + '.jpg';
|
||||||
// imgHeight
|
resolve(base64ToFile(base64,filename))
|
||||||
// let w = undefined
|
newImage.remove()
|
||||||
newImage.onload = function () {
|
// }
|
||||||
// w = this.width * 1
|
})
|
||||||
// imgWidth = this.width
|
}, 100);
|
||||||
// imgHeight = this.height
|
})
|
||||||
// let canvas = document.createElement('canvas')
|
|
||||||
// let ctx = canvas.getContext('2d')
|
|
||||||
// if (Math.max(imgWidth, imgHeight) > w) {
|
|
||||||
// if (imgWidth > imgHeight) {
|
|
||||||
// canvas.width = w
|
|
||||||
// canvas.height = w * (imgHeight / imgWidth)
|
|
||||||
// } else {
|
|
||||||
// canvas.height = w
|
|
||||||
// canvas.width = w * (imgWidth / imgHeight)
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// canvas.width = imgWidth
|
|
||||||
// canvas.height = imgHeight
|
|
||||||
// quality = 0.6
|
|
||||||
// }
|
|
||||||
// ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
||||||
// ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage
|
|
||||||
// let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
|
|
||||||
let fileData = dataURLtoFile(base64);
|
|
||||||
let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名
|
|
||||||
// console.log(smallBase64);
|
|
||||||
// resolve(base64ToFile(fileOfBlob))
|
|
||||||
resolve(fileOfBlob)
|
|
||||||
newImage.remove()
|
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
function base64ToFile(base64,filename) {
|
||||||
}, 100);
|
// 从 Base64 编码中去掉数据类型描述部分
|
||||||
})
|
const base64Str = base64.replace(/^data:image\/[a-z]+;base64,/, '');
|
||||||
|
// 解码 Base64 字符串
|
||||||
|
const byteCharacters = atob(base64Str);
|
||||||
|
const byteNumbers = new Array(byteCharacters.length);
|
||||||
|
for (let i = 0; i < byteCharacters.length; i++) {
|
||||||
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||||
|
}
|
||||||
|
const byteArray = new Uint8Array(byteNumbers);
|
||||||
|
|
||||||
|
// 创建 File 对象
|
||||||
|
const file = new File([byteArray], filename, { type: 'image/jpeg' }); // 根据需要的类型进行修改
|
||||||
|
return file;
|
||||||
}
|
}
|
||||||
//base64转成blob
|
//base64转成blob
|
||||||
function dataURLtoFile(dataURI, type) {
|
function dataURLtoFile(dataURI, type) {
|
||||||
@@ -58,16 +44,15 @@ function dataURLtoFile(dataURI, type) {
|
|||||||
|
|
||||||
//转换
|
//转换
|
||||||
|
|
||||||
const base64ToFile = urlData =>{
|
// const base64ToFile = urlData =>{
|
||||||
const arr = urlData.split(',');
|
// const arr = urlData.split(',');
|
||||||
const mime = arr[0].match(/:(.*?);/)[1]
|
// const mime = arr[0].match(/:(.*?);/)[1]
|
||||||
const bytes = atob(arr[1])
|
// const bytes = atob(arr[1])
|
||||||
let n = bytes.length;
|
// let n = bytes.length;
|
||||||
const ia = new Uint8Array(n)
|
// const ia = new Uint8Array(n)
|
||||||
while (n--){
|
// while (n--){
|
||||||
ia[n] = bytes.charCodeAt(n);
|
// ia[n] = bytes.charCodeAt(n);
|
||||||
}
|
// }
|
||||||
return new File([ia],'jpeg',{type:mime})
|
// return new File([ia],'jpeg',{type:mime})
|
||||||
|
// }
|
||||||
}
|
|
||||||
export default getJpeg
|
export default getJpeg
|
||||||
@@ -10,7 +10,7 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
|
|||||||
if(width/height>1.98) width = height * 1.98;
|
if(width/height>1.98) width = height * 1.98;
|
||||||
width > maxWidth && (width = maxWidth);
|
width > maxWidth && (width = maxWidth);
|
||||||
width < minWidth && (width = minWidth);
|
width < minWidth && (width = minWidth);
|
||||||
var rem = width * 10 / designWidth;
|
var rem = Math.round(width * 10 / designWidth);
|
||||||
docEl.style.fontSize = rem+'px'
|
docEl.style.fontSize = rem+'px'
|
||||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user