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 = '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.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",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"serve:test": "vue-cli-service serve --mode test",
|
||||
"build:test": "vue-cli-service build --mode test_build",
|
||||
"serve:dev": "vue-cli-service serve --mode dev",
|
||||
"build:dev": "vue-cli-service build --mode dev_build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ans1998/vue3-color": "^3.0.7",
|
||||
"@flaticon/flaticon-uicons": "^2.3.0",
|
||||
"@types/fingerprintjs2": "^2.0.0",
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"driver.js": "^1.3.1",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"fingerprintjs2": "^2.1.4",
|
||||
"gsap": "^3.12.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jszip": "^3.10.1",
|
||||
"md5": "^2.3.0",
|
||||
"quantize": "^1.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"swiper": "^11.1.4",
|
||||
"vue": "^3.2.13",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-cropper": "^1.0.5",
|
||||
"vue-i18n": "^9.6.1",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/eslint-config-typescript": "^9.1.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.0.0",
|
||||
"style-resources-loader": "^1.5.0",
|
||||
"typescript": "~4.5.5",
|
||||
"unplugin-element-plus": "^0.8.0",
|
||||
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
||||
"vue-lazyload": "^3.0.0-rc.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
"name": "aida",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"serve:test": "vue-cli-service serve --mode test",
|
||||
"build:test": "vue-cli-service build --mode test_build",
|
||||
"serve:dev": "vue-cli-service serve --mode dev",
|
||||
"build:dev": "vue-cli-service build --mode dev_build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ans1998/vue3-color": "^3.0.7",
|
||||
"@flaticon/flaticon-uicons": "^2.3.0",
|
||||
"@types/fingerprintjs2": "^2.0.0",
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"driver.js": "^1.3.1",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"fingerprintjs2": "^2.1.4",
|
||||
"gsap": "^3.12.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jszip": "^3.10.1",
|
||||
"md5": "^2.3.0",
|
||||
"quantize": "^1.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"swiper": "^11.1.4",
|
||||
"vue": "^3.2.13",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-cropper": "^1.0.5",
|
||||
"vue-i18n": "^9.6.1",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/eslint-config-typescript": "^9.1.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.0.0",
|
||||
"style-resources-loader": "^1.5.0",
|
||||
"typescript": "~4.5.5",
|
||||
"unplugin-element-plus": "^0.8.0",
|
||||
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
||||
"vue-lazyload": "^3.0.0-rc.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -222,3 +222,9 @@
|
||||
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;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'pixel';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('woff/pixel.ttf') format('truetype');
|
||||
}
|
||||
@@ -53,4 +53,4 @@
|
||||
font-family: 'CN_slogan_art4';
|
||||
font-weight: normal;
|
||||
src: url('slogan/CN_ZhiMangXing-Regular.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>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>AiDA</title>
|
||||
|
||||
@@ -134,7 +134,9 @@ fabric.BaseBrush.prototype.convertToImg = function() {
|
||||
if(!xy){
|
||||
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.clearContext(this.canvas.contextTop);
|
||||
}
|
||||
@@ -232,6 +234,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
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._size = this.width / 2 + this._baseWidth;
|
||||
this._drawn = false;
|
||||
@@ -239,6 +243,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this.update(pointer);
|
||||
this.draw(this.canvas.contextTop);
|
||||
},
|
||||
@@ -403,6 +409,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
_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),
|
||||
subtractPoint = point.subtract(this._lastPoint),
|
||||
distance = point.distanceFrom(this._lastPoint),
|
||||
@@ -467,6 +475,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
_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);
|
||||
|
||||
this._strokes = [];
|
||||
@@ -500,6 +510,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points = [pointer];
|
||||
this._count = 0;
|
||||
|
||||
@@ -512,6 +524,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points.push(pointer);
|
||||
|
||||
var i, dx, dy, d, size,
|
||||
@@ -595,6 +609,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
this.canvas.contextTop.strokeStyle = this.color;
|
||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||
@@ -603,6 +619,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
if (this.canvas._isCurrentlyDrawing) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._render(pointer);
|
||||
}
|
||||
},
|
||||
@@ -662,6 +680,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
this.canvas.contextTop.strokeStyle = this.color;
|
||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||
@@ -670,6 +690,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
if (this.canvas._isCurrentlyDrawing) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._render(pointer);
|
||||
}
|
||||
},
|
||||
@@ -734,6 +756,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
this.canvas.contextTop.strokeStyle = this.color;
|
||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||
@@ -742,6 +766,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
if (this.canvas._isCurrentlyDrawing) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._render(pointer);
|
||||
}
|
||||
},
|
||||
@@ -807,6 +833,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
this.canvas.contextTop.lineWidth = this._lineWidth;
|
||||
this._size = this.width + this._baseWidth;
|
||||
@@ -814,6 +842,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
if (this.canvas._isCurrentlyDrawing) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._render(pointer);
|
||||
}
|
||||
},
|
||||
@@ -870,7 +900,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
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 });
|
||||
}
|
||||
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
|
||||
//ctx.globalCompositeOperation = 'source-over';
|
||||
@@ -887,6 +918,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = pointer;
|
||||
},
|
||||
|
||||
@@ -921,6 +954,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points = [pointer];
|
||||
|
||||
var ctx = this.canvas.contextTop,
|
||||
@@ -932,6 +967,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points.push(pointer);
|
||||
|
||||
var ctx = this.canvas.contextTop,
|
||||
@@ -988,6 +1025,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
this._count = 0;
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points = [pointer];
|
||||
|
||||
var ctx = this.canvas.contextTop,
|
||||
@@ -998,6 +1037,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points.push(pointer);
|
||||
|
||||
var i, dx, dy, d, factor = .3 * this.width,
|
||||
@@ -1083,6 +1124,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
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._lastPoint = this._point;
|
||||
|
||||
@@ -1095,6 +1138,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._lastPoint = this._point;
|
||||
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,
|
||||
color = fabric.util.colorValues(this.color),
|
||||
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._drawn = false;
|
||||
|
||||
@@ -1181,6 +1227,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
var ctx = this.canvas.contextTop,
|
||||
dx = pointer.x - this._lastPoint.x,
|
||||
dy = pointer.y - this._lastPoint.y,
|
||||
@@ -1233,12 +1281,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
|
||||
},
|
||||
|
||||
onMouseDown: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points = [pointer];
|
||||
this._count = 0;
|
||||
this._colorValues = fabric.util.colorValues(this.color);
|
||||
},
|
||||
|
||||
onMouseMove: function(pointer) {
|
||||
pointer.x = pointer.x + this.canvas.viewportTransform[4];
|
||||
pointer.y = pointer.y + this.canvas.viewportTransform[5];
|
||||
this._points.push(pointer);
|
||||
|
||||
var ctx = this.canvas.contextTop,
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1711431581952') format('truetype');
|
||||
font-family: "iconfont"; /* Project id 4292253 */
|
||||
src: url('iconfont.woff2?t=1727415711578') format('woff2'),
|
||||
url('iconfont.woff?t=1727415711578') format('woff'),
|
||||
url('iconfont.ttf?t=1727415711578') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -11,36 +13,44 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-a-waitao_changkuanwaitao11x:before {
|
||||
content: "\e66c";
|
||||
.icon-caizhi:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-fanchehui:before {
|
||||
content: "\e626";
|
||||
.icon-IC-yehua:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-chehui:before {
|
||||
content: "\e609";
|
||||
.icon-shangyiceng:before {
|
||||
content: "\e751";
|
||||
}
|
||||
|
||||
.icon-yuyan:before {
|
||||
content: "\e85f";
|
||||
.icon-shangyiceng1:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-biaoqian:before {
|
||||
content: "\e603";
|
||||
.icon-xiayiceng:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.icon-bingji:before {
|
||||
content: "\e620";
|
||||
.icon-shangyiceng2:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.icon-bingji1:before {
|
||||
content: "\e668";
|
||||
.icon-shenpi:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.icon-dianwei:before {
|
||||
content: "\e685";
|
||||
.icon-yonghu:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-usetime:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-xiala:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-bianji:before {
|
||||
@@ -87,47 +97,35 @@
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-shenpi:before {
|
||||
content: "\e6a1";
|
||||
.icon-dianwei:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.icon-yonghu:before {
|
||||
content: "\e617";
|
||||
.icon-bingji:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-usetime:before {
|
||||
content: "\e601";
|
||||
.icon-bingji1:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-xiala:before {
|
||||
content: "\e634";
|
||||
.icon-biaoqian:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
.icon-shangyiceng:before {
|
||||
content: "\e751";
|
||||
.icon-yuyan:before {
|
||||
content: "\e85f";
|
||||
}
|
||||
|
||||
.icon-shangyiceng1:before {
|
||||
content: "\e604";
|
||||
.icon-fanchehui:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.icon-xiayiceng:before {
|
||||
content: "\e68a";
|
||||
.icon-chehui:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-shangyiceng2:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.icon-renwu:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-caizhi:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-shangchuantupian:before {
|
||||
content: "\e61e";
|
||||
.icon-a-waitao_changkuanwaitao11x:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
|
||||
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-6: calc(1.6rem*1.2);
|
||||
--aida-fsize1-4: calc(1.4rem*1.2);
|
||||
--antd-wave-shadow-color: #39215b;
|
||||
}
|
||||
::selection {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
input {
|
||||
outline: none;
|
||||
@@ -145,7 +149,7 @@ li {
|
||||
}
|
||||
}
|
||||
.ant-tooltip {
|
||||
z-index: 2;
|
||||
z-index: 1049 !important;
|
||||
}
|
||||
.ant-tooltip .ant-tooltip-inner {
|
||||
background: #343579;
|
||||
@@ -337,6 +341,9 @@ li {
|
||||
cursor: pointer;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.ant-popover-placement-top {
|
||||
z-index: 9999;
|
||||
}
|
||||
.ant-drawer {
|
||||
z-index: 9999;
|
||||
}
|
||||
@@ -488,9 +495,6 @@ li {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
}
|
||||
.trial_page .ant-tooltip {
|
||||
z-index: 1049 !important;
|
||||
}
|
||||
.trial_page .habit :deep(.ant-tooltip .ant-tooltip-inner),
|
||||
.trial_page :deep(.ant-tooltip-arrow-content) {
|
||||
background: #000 !important;
|
||||
@@ -683,7 +687,7 @@ li {
|
||||
.generalModel .ant-modal-body {
|
||||
padding: 0;
|
||||
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-arrow-small-right,
|
||||
@@ -955,6 +959,10 @@ li {
|
||||
.sketchboard_upload_modal .switch_type_list.showEvents * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ant-modal-wrap {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ant-btn:hover,
|
||||
.ant-btn:focus,
|
||||
.ant-btn:active,
|
||||
@@ -1097,6 +1105,9 @@ li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.admin_page .admin_state_item > span > span {
|
||||
color: red;
|
||||
}
|
||||
.admin_page .admin_state_item > span:nth-child(1) {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
@@ -1104,7 +1115,7 @@ li {
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 10rem;
|
||||
width: 10.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.admin_page .admin_state_item > input {
|
||||
@@ -1293,27 +1304,42 @@ li {
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: #000000;
|
||||
}
|
||||
.homeMain_heade .ant-badge {
|
||||
.homeMain_heade .ant-badge,
|
||||
.account_message .ant-badge {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.homeMain_heade sup.ant-scroll-number {
|
||||
height: 2rem;
|
||||
min-height: 2rem;
|
||||
width: 2rem;
|
||||
min-width: 2rem;
|
||||
.homeMain_heade sup.ant-scroll-number,
|
||||
.account_message sup.ant-scroll-number {
|
||||
height: 1.2rem;
|
||||
min-height: 5px;
|
||||
width: 1.2rem;
|
||||
min-width: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
.homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.2rem;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.homeMain_heade p.ant-scroll-number-only-unit {
|
||||
line-height: 2rem;
|
||||
.homeMain_heade sup.ant-scroll-number.ant-badge-dot,
|
||||
.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%;
|
||||
}
|
||||
.modal_title_text {
|
||||
@@ -1509,7 +1535,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border,
|
||||
.library_page .input_border,
|
||||
.productImg_modal .input_border,
|
||||
.accountEdit_page .input_border {
|
||||
.accountEdit_page .input_border,
|
||||
.generalMenu_printModel_upload .input_border {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1524,7 +1551,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .input_box,
|
||||
.library_page .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;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
@@ -1536,7 +1564,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .input_box .inputShowText,
|
||||
.library_page .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%;
|
||||
display: none;
|
||||
}
|
||||
@@ -1545,11 +1574,13 @@ textarea:focus {
|
||||
.library_page .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,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
|
||||
.collection_modal_body .input_border .input_box.active textarea,
|
||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
||||
.library_page .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;
|
||||
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,
|
||||
.library_page .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;
|
||||
display: block;
|
||||
color: rgba(255, 0, 0.7);
|
||||
@@ -1566,7 +1598,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .search_keyword,
|
||||
.library_page .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;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
@@ -1574,7 +1607,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .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,
|
||||
.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;
|
||||
display: flex;
|
||||
width: var(--width);
|
||||
@@ -1592,7 +1626,8 @@ textarea:focus {
|
||||
.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,
|
||||
.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;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
@@ -1602,7 +1637,8 @@ textarea:focus {
|
||||
.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,
|
||||
.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: solid 1px #39215b;
|
||||
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,
|
||||
.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,
|
||||
.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;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox,
|
||||
.design_detail_modal_component .input_border .input_box_btnBox,
|
||||
.library_page .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;
|
||||
width: var(--width);
|
||||
display: flex;
|
||||
float: left;
|
||||
align-items: center;
|
||||
}
|
||||
.collection_modal_body .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,
|
||||
.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;
|
||||
}
|
||||
.collection_modal_body .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,
|
||||
.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;
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
@@ -1653,7 +1694,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .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,
|
||||
.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;
|
||||
height: 8rem;
|
||||
}
|
||||
@@ -1661,7 +1703,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border input,
|
||||
.library_page .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%;
|
||||
border-radius: calc(0.5rem*1.2);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
@@ -1674,42 +1717,48 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
||||
.library_page .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);
|
||||
}
|
||||
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
|
||||
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
|
||||
.library_page .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);
|
||||
}
|
||||
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
|
||||
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
|
||||
.library_page .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);
|
||||
}
|
||||
.collection_modal_body .input_border input.forbidden,
|
||||
.design_detail_modal_component .input_border input.forbidden,
|
||||
.library_page .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;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox_upImg,
|
||||
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
|
||||
.library_page .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%;
|
||||
}
|
||||
.collection_modal_body .input_border .fi,
|
||||
.design_detail_modal_component .input_border .fi,
|
||||
.library_page .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;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
@@ -1725,7 +1774,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
||||
.library_page .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%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -1733,21 +1783,24 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .fi.active,
|
||||
.library_page .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);
|
||||
}
|
||||
.collection_modal_body .input_border .fi.forbidden,
|
||||
.design_detail_modal_component .input_border .fi.forbidden,
|
||||
.library_page .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;
|
||||
}
|
||||
.collection_modal_body .input_border .search_upImg,
|
||||
.design_detail_modal_component .input_border .search_upImg,
|
||||
.library_page .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;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@@ -1758,7 +1811,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .search_upImg span,
|
||||
.library_page .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;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1766,7 +1820,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .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,
|
||||
.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%;
|
||||
height: 100%;
|
||||
display: block !important;
|
||||
@@ -1775,7 +1830,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .search_textarea,
|
||||
.library_page .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;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
@@ -1791,14 +1847,16 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .generage_btn,
|
||||
.library_page .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;
|
||||
}
|
||||
.collection_modal_body .upload_item,
|
||||
.design_detail_modal_component .upload_item,
|
||||
.library_page .upload_item,
|
||||
.productImg_modal .upload_item,
|
||||
.accountEdit_page .upload_item {
|
||||
.accountEdit_page .upload_item,
|
||||
.generalMenu_printModel_upload .upload_item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1806,7 +1864,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .upload_item .upload_file_item,
|
||||
.library_page .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;
|
||||
display: inline-block;
|
||||
width: calc(10rem*1.2);
|
||||
@@ -1820,7 +1879,8 @@ textarea:focus {
|
||||
.design_detail_modal_component .upload_item .upload_file_item.active,
|
||||
.library_page .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;
|
||||
border-radius: calc(1rem*1.2);
|
||||
transform: scale(0.9);
|
||||
@@ -1829,21 +1889,24 @@ textarea:focus {
|
||||
.design_detail_modal_component .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,
|
||||
.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;
|
||||
}
|
||||
.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,
|
||||
.library_page .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;
|
||||
}
|
||||
.collection_modal_body .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,
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1853,7 +1916,8 @@ textarea:focus {
|
||||
.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),
|
||||
.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;
|
||||
width: auto;
|
||||
top: 50%;
|
||||
@@ -1864,7 +1928,8 @@ textarea:focus {
|
||||
.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),
|
||||
.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);
|
||||
height: calc(6rem*1.2);
|
||||
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,
|
||||
.library_page .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;
|
||||
align-items: 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,
|
||||
.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,
|
||||
.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;
|
||||
}
|
||||
.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,
|
||||
.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,
|
||||
.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;
|
||||
}
|
||||
.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,
|
||||
.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,
|
||||
.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;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
@@ -1912,7 +1981,8 @@ textarea:focus {
|
||||
.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,
|
||||
.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;
|
||||
width: 100%;
|
||||
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,
|
||||
.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,
|
||||
.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);
|
||||
height: calc(3.2rem*1.2);
|
||||
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,
|
||||
.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,
|
||||
.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);
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1954,14 +2026,16 @@ textarea:focus {
|
||||
.design_detail_modal_component .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,
|
||||
.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);
|
||||
}
|
||||
.collection_modal_body .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,
|
||||
.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;
|
||||
}
|
||||
.generalModel_modal .ant-modal-content {
|
||||
|
||||
@@ -10,6 +10,10 @@ html,body,#app{
|
||||
--aida-fsize1-8: calc(1.8rem*1.2);
|
||||
--aida-fsize1-6: calc(1.6rem*1.2);
|
||||
--aida-fsize1-4: calc(1.4rem*1.2);
|
||||
--antd-wave-shadow-color:#39215b;
|
||||
}
|
||||
::selection{
|
||||
background-color: #1890ff;
|
||||
}
|
||||
input{
|
||||
outline:none;
|
||||
@@ -155,8 +159,7 @@ input:focus{
|
||||
}
|
||||
.ant-tooltip{
|
||||
// top: 74px !important;
|
||||
z-index: 2;
|
||||
|
||||
z-index: 1049 !important;
|
||||
.ant-tooltip-inner{
|
||||
background: #343579;
|
||||
border-radius: 5px;
|
||||
@@ -360,6 +363,9 @@ input:focus{
|
||||
cursor: pointer;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
.ant-popover-placement-top{
|
||||
z-index: 9999;
|
||||
}
|
||||
.ant-drawer{
|
||||
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){
|
||||
background: #000 !important;
|
||||
}
|
||||
@@ -763,7 +766,7 @@ input:focus{
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem*1.2);
|
||||
// background-color: #181818;
|
||||
padding: calc(4rem*1.2) calc(5rem*1.2);
|
||||
padding: calc(5rem*1.2) calc(6rem*1.2);
|
||||
}
|
||||
.ant-modal-btn{
|
||||
|
||||
@@ -1063,9 +1066,10 @@ input:focus{
|
||||
}
|
||||
}
|
||||
|
||||
// .ant-modal-wrap{
|
||||
// z-index: 10001 ;
|
||||
// }
|
||||
.ant-modal-wrap{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
// .driver-overlay-animated{
|
||||
// z-index: 10002 !important;
|
||||
// }
|
||||
@@ -1219,6 +1223,11 @@ input:focus{
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>span{
|
||||
>span{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
>span:nth-child(1){
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
@@ -1228,7 +1237,7 @@ input:focus{
|
||||
display: block;
|
||||
// min-width: 20%;
|
||||
// width: 100px;
|
||||
width: 10rem;
|
||||
width: 10.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
>input{
|
||||
@@ -1431,28 +1440,39 @@ input:focus{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.homeMain_heade{
|
||||
.homeMain_heade,.account_message{
|
||||
.ant-badge{
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
sup.ant-scroll-number{
|
||||
height: 2rem;
|
||||
min-height: 2rem;
|
||||
width: 2rem;
|
||||
min-width: 2rem;
|
||||
height: 1.2rem;
|
||||
min-height: 5px;
|
||||
width: 1.2rem;
|
||||
min-width: 5px;
|
||||
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{
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
transform: scale(.7);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
p.ant-scroll-number-only-unit{
|
||||
line-height: 2rem;
|
||||
line-height: 1.2rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1588,7 +1608,7 @@ textarea:focus{
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
//设计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{
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
@@ -1668,6 +1688,7 @@ textarea:focus{
|
||||
width: var(--width);
|
||||
display: flex;
|
||||
float: left;
|
||||
align-items: center;
|
||||
.ant-spin-text{
|
||||
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">
|
||||
<span>Start Date:</span>
|
||||
<a-range-picker
|
||||
style="width:280px"
|
||||
style="width:250px"
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
:placeholder="[
|
||||
@@ -24,9 +24,31 @@
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<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 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 class="admin_search">
|
||||
<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 status: any = ref(0);
|
||||
let filterOption = (input: any, option: any) => {
|
||||
// 使用 option.label 进行搜索
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
return {
|
||||
rangePickerValue,
|
||||
rangeTimeValue,
|
||||
columns,
|
||||
dataList,
|
||||
allUserList,
|
||||
ids,
|
||||
email,
|
||||
renameData,
|
||||
status,
|
||||
filterOption,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -204,6 +237,10 @@ export default defineComponent({
|
||||
let historyTable: any = this.$refs.historyTable;
|
||||
this.historyTableHeight = historyTable.clientHeight - 200;
|
||||
this.gettrialList();
|
||||
let allUserList: any = sessionStorage.getItem("allUserList");
|
||||
if (allUserList) {
|
||||
this.allUserList = JSON.parse(allUserList);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//改变页码
|
||||
@@ -233,9 +270,12 @@ export default defineComponent({
|
||||
let endDate: any = this.rangePickerValue[1]
|
||||
? this.rangePickerValue[1]+' '+endTime
|
||||
: "";
|
||||
let ids = this.ids.join(',')
|
||||
let data = {
|
||||
endTime:endDate,
|
||||
startTime:startDate,
|
||||
ids:ids,
|
||||
email:this.email,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
||||
if (rv) {
|
||||
@@ -274,3 +314,9 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.admin_page .admin_table_search .admin_state {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>User Name:</span>
|
||||
<span>User Name: <span>*</span></span>
|
||||
<input
|
||||
:readonly="title != 'Add'"
|
||||
:class="{active:title != 'Add'}"
|
||||
@@ -32,7 +32,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>User Email:</span>
|
||||
<span>User Email: <span>*</span></span>
|
||||
<input
|
||||
:readonly="title != 'Add'"
|
||||
:class="{active:title != 'Add'}"
|
||||
@@ -43,7 +43,7 @@
|
||||
/>
|
||||
</div>
|
||||
<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">
|
||||
<template #suffixIcon>
|
||||
<span
|
||||
@@ -53,7 +53,7 @@
|
||||
</a-date-picker>
|
||||
</div>
|
||||
<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">
|
||||
<template #suffixIcon>
|
||||
<span
|
||||
@@ -63,7 +63,7 @@
|
||||
</a-date-picker>
|
||||
</div>
|
||||
<div class="admin_state_item">
|
||||
<span>User Type:</span>
|
||||
<span>User Type:<span>*</span></span>
|
||||
<a-select
|
||||
v-model:value="systemUser"
|
||||
size="large"
|
||||
@@ -200,7 +200,6 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
let setAddData = ()=>{
|
||||
setTime(operationsData.validStartTime)
|
||||
return {
|
||||
"country": operationsData.country,
|
||||
"credits": operationsData.credits,
|
||||
@@ -217,6 +216,8 @@ export default defineComponent({
|
||||
"credits": operationsData.credits,
|
||||
"systemUser": operationsData.systemUser,
|
||||
"validEndTime": setTime(operationsData.validEndTime),
|
||||
"userName": operationsData.userName,
|
||||
"userEmail": operationsData.userEmail,
|
||||
}
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
@@ -234,6 +235,7 @@ export default defineComponent({
|
||||
let data
|
||||
if(operations.title == 'Add'){
|
||||
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(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
@@ -244,6 +246,7 @@ export default defineComponent({
|
||||
);
|
||||
}else{
|
||||
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(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
|
||||
@@ -134,7 +134,6 @@ export default defineComponent({
|
||||
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
|
||||
if(res){
|
||||
dataList.value = res
|
||||
console.log(dataList);
|
||||
// console.log(allEchartsList.value);
|
||||
|
||||
resolve('')
|
||||
|
||||
@@ -273,7 +273,6 @@ export default defineComponent({
|
||||
if (rv) {
|
||||
// this.dataList = rv
|
||||
filter.dataList = rv.records
|
||||
console.log(rv);
|
||||
filterData.total = rv.total
|
||||
filter.tableLoading = false
|
||||
|
||||
|
||||
@@ -307,4 +307,4 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -51,9 +51,6 @@ export default defineComponent({
|
||||
let data: any = [];
|
||||
for (let [key, value] of entries) {
|
||||
let str
|
||||
console.log(key);
|
||||
|
||||
|
||||
if(key != 'conversionRate'){
|
||||
if(key == 'trialToOfficialCount'){
|
||||
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 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" class="fi fi-br-check" @click="deleteNav(1)"></i>
|
||||
|
||||
@@ -152,8 +152,8 @@
|
||||
|
||||
<div class="design_detail_perview_content" >
|
||||
<!-- <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>
|
||||
<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
|
||||
<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
||||
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -179,7 +179,6 @@ import { Modal,message } from 'ant-design-vue';
|
||||
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
||||
import { useStore } from "vuex";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import GO from '@/tool/GO';
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import addDetails from '@/component/Detail/addDetails.vue'
|
||||
@@ -463,11 +462,17 @@ export default defineComponent({
|
||||
DesignDetailAlter.terminate()
|
||||
// this.designItemDetail = {}
|
||||
this.frontBack = {}
|
||||
let setDesignItem:any = this.$refs.setDesignItem
|
||||
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
||||
setDesignItem.clear()
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
this.designShowPrview = 1;
|
||||
this.frontBack = {}
|
||||
let setDesignItem:any = this.$refs.setDesignItem
|
||||
setDesignItem.clear()
|
||||
// this.designItemDetailUrl = {}
|
||||
}
|
||||
},
|
||||
@@ -502,15 +507,12 @@ export default defineComponent({
|
||||
item.layersObject[0] = item.layersObject[1]
|
||||
item.layersObject[1] = a
|
||||
}
|
||||
if(item.printObject.prints == null){
|
||||
item.printObject.prints = []
|
||||
}else{
|
||||
item.printObject.prints.forEach((element:any) => {
|
||||
if(!element.designType){
|
||||
element.designType = 'Library'
|
||||
}
|
||||
});
|
||||
}
|
||||
if(item.printObject.prints == null)item.printObject.prints = []
|
||||
item.printObject.prints.forEach((element:any) => {
|
||||
if(!element.designType){
|
||||
element.designType = 'Library'
|
||||
}
|
||||
});
|
||||
})
|
||||
this.currentIndex = 0
|
||||
this.store.commit('setDesignItemDetail',rv)
|
||||
@@ -739,6 +741,8 @@ export default defineComponent({
|
||||
changed:item.changed?item.changed:false,
|
||||
designType:item.designType?item.designType:"Library",
|
||||
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],
|
||||
printObject:{
|
||||
// path:item.printObject.path?item.printObject.path :'',
|
||||
@@ -787,7 +791,7 @@ export default defineComponent({
|
||||
return data
|
||||
},
|
||||
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)
|
||||
this.loadingShow = true
|
||||
await setDesignItem.setPreview(data)
|
||||
@@ -888,7 +892,7 @@ export default defineComponent({
|
||||
showDesignImgDetail(num:any){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.designShowPrview = num
|
||||
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
||||
let setDesignItem:any = this.$refs.setDesignItem
|
||||
if(this.designShowPrview == 3){
|
||||
setDesignItem.setImgSize()
|
||||
}else if(this.designShowPrview == 2){
|
||||
@@ -935,6 +939,7 @@ export default defineComponent({
|
||||
designItemDetail.clothes[this.currentIndex].minIOPath = 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].layersObject = rv.clothes[this.currentIndex].layersObject
|
||||
designItemDetail.clothes[this.currentIndex].sketchString = ''
|
||||
data.designSingleItemDTOList[this.currentIndex].sketchString =''
|
||||
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
|
||||
@@ -1025,6 +1030,13 @@ export default defineComponent({
|
||||
undividedLayer:'',
|
||||
sketchString:'',
|
||||
"layersObject": [
|
||||
{
|
||||
maskMinioUrl:'',
|
||||
maskUrl:'',
|
||||
},{
|
||||
maskMinioUrl:'',
|
||||
maskUrl:'',
|
||||
},
|
||||
]
|
||||
}
|
||||
// this.designOrder = true
|
||||
@@ -1054,7 +1066,6 @@ export default defineComponent({
|
||||
},
|
||||
//元素替换
|
||||
clothesDetail(clothes:any, index:number){
|
||||
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
|
||||
this.designOrder = true
|
||||
@@ -1086,6 +1097,8 @@ export default defineComponent({
|
||||
designType:this.current.designType?this.current.designType:'Library',
|
||||
path:this.current.minIOPath?this.current.minIOPath:'',
|
||||
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,
|
||||
trims:this.current.trims,
|
||||
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
|
||||
@@ -1156,7 +1169,9 @@ export default defineComponent({
|
||||
.design_detail_modal_component{
|
||||
color: #000;
|
||||
// max-width: 1440px ;
|
||||
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
// overflow: hidden;
|
||||
@@ -1165,7 +1180,7 @@ export default defineComponent({
|
||||
border-bottom: none;
|
||||
}
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
@@ -1714,9 +1729,6 @@ export default defineComponent({
|
||||
</style>
|
||||
<style lang="less">
|
||||
.design_detail_modal_component{
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -430,8 +430,9 @@ export default defineComponent({
|
||||
threshold:[.5]
|
||||
})
|
||||
ob.observe(el)
|
||||
// this.currentPage = 1
|
||||
// this.currentPage = +=1
|
||||
// this.pageSize = 12
|
||||
// currentPage
|
||||
let this_ = binding.instance
|
||||
function callback(entries, observer) {
|
||||
entries.forEach((entry) => {
|
||||
@@ -608,21 +609,33 @@ export default defineComponent({
|
||||
this.clothesList = []
|
||||
this.getLibraryList()
|
||||
}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.colorList[index+1] = {
|
||||
gradient:item.gradient,
|
||||
rgba:item.rgbValue,
|
||||
tcx:item.tcx,
|
||||
name:item.name,
|
||||
}
|
||||
if(item.gradient){
|
||||
this.colorList[index+1].gradient = item.gradient
|
||||
console.log(JSON.stringify(rgba) , JSON.stringify(item.rgbValue));
|
||||
if(JSON.stringify(rgba) == JSON.stringify(item.rgbValue)){
|
||||
ind+=1
|
||||
}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
|
||||
DesignDetailEnd.init(num)
|
||||
this.workspaceCom = computed(()=>{
|
||||
@@ -776,6 +789,7 @@ export default defineComponent({
|
||||
},
|
||||
//请求我的印花&&模型
|
||||
getLibraryList(){
|
||||
this.isShowLoading = true
|
||||
let level2Type = ''
|
||||
if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Sketchboard'){
|
||||
level2Type = this.designType
|
||||
@@ -791,7 +805,6 @@ export default defineComponent({
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize+this.clothesList.length,
|
||||
}
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv) => {
|
||||
if(this.selectCode == 'Sketchboard'){
|
||||
|
||||
@@ -91,13 +91,13 @@
|
||||
</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-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-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>
|
||||
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
|
||||
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
|
||||
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>
|
||||
<DesignPrintMobile v-else ref="DesignPrintMobile"></DesignPrintMobile>
|
||||
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
|
||||
<DesignElementsOperation ref="DesignElementsOperation"></DesignElementsOperation>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
@@ -112,7 +112,6 @@ import { Sketch} from '@ans1998/vue3-color'
|
||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
||||
import DesignElementsOperation from './DesignElements.vue';
|
||||
import DesignPrintMobile from './DesignElementsMobile.vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import {isMoible,setGradual} from '@/tool/util'
|
||||
@@ -123,7 +122,7 @@ export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
||||
DesignElementsOperation,DesignPrintMobile,sketchCategory
|
||||
DesignElementsOperation,sketchCategory
|
||||
},
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
@@ -262,7 +261,8 @@ export default defineComponent({
|
||||
|
||||
setPrint(){
|
||||
// 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()
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
@@ -350,11 +350,11 @@ export default defineComponent({
|
||||
},
|
||||
setElemets(){
|
||||
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()
|
||||
},
|
||||
//提交
|
||||
setPreview(){
|
||||
setPreview(str){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||
@@ -373,7 +373,7 @@ export default defineComponent({
|
||||
})
|
||||
index = index? index:0
|
||||
if(!this.current.id){
|
||||
if(index){
|
||||
if(index && data?.designSingleItemDTOList){
|
||||
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].type =this.sketchImg.type? this.sketchImg.type: this.current.type
|
||||
}else if(this.type_ == 2){
|
||||
data.designSingleItemDTOList[index].printObject.prints = []
|
||||
if(str == 'clearPrint'){
|
||||
data.designSingleItemDTOList[index].printObject.prints = []
|
||||
}
|
||||
}else if(this.type_ == 3){
|
||||
if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
|
||||
message.info(this.t('DesignDetailEnd.jsContent2'))
|
||||
@@ -704,8 +706,11 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
bottom: calc(4rem*1.2);
|
||||
bottom: calc(3rem*1.2);
|
||||
position: absolute;
|
||||
&.clear{
|
||||
bottom: calc(7rem);
|
||||
}
|
||||
&.active{
|
||||
opacity: .5;
|
||||
pointer-events:none;
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
v-for="item,index in exhibitionElementsList"
|
||||
:key="item"
|
||||
: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"
|
||||
ref="content" >
|
||||
<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?.path" alt="" class="designElements_sketch"> -->
|
||||
<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)">
|
||||
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<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',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></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',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></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_delete" @click="deletePrint">
|
||||
<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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
@@ -159,6 +160,7 @@ export default defineComponent({
|
||||
currentFullBodyView,
|
||||
designItemDetailTS,
|
||||
body,
|
||||
getMousePosition,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -171,8 +173,16 @@ export default defineComponent({
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
let mousedown = function(event){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(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 mouse = true;
|
||||
let angle = 0
|
||||
@@ -185,12 +195,19 @@ export default defineComponent({
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let 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) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
@@ -201,16 +218,24 @@ export default defineComponent({
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
// document.addEventListener('mousemove', mousemove);
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('mousemove',mousemove)
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
// document.addEventListener('mouseup', 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)
|
||||
}
|
||||
|
||||
},
|
||||
@@ -299,8 +324,12 @@ export default defineComponent({
|
||||
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.top = imgDomWH.y+event.offsetY-top
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
// document.addEventListener("mouseup", this.mouseup);
|
||||
// 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){
|
||||
@@ -323,23 +352,42 @@ export default defineComponent({
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", this.sizeMouseup);
|
||||
document.addEventListener("mousemove", this.sizeMousemove);
|
||||
// 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 parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
let x = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.clientY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
|
||||
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
sizeMouseMove(event){
|
||||
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 parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
@@ -349,27 +397,27 @@ export default defineComponent({
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)
|
||||
h = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
|
||||
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.clientY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}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'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'left'){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||
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'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
@@ -388,13 +436,21 @@ export default defineComponent({
|
||||
width:this.imgDom.offsetWidth+'px',
|
||||
zIndex:this.printZIndex
|
||||
}
|
||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
||||
// 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) {
|
||||
|
||||
document.removeEventListener("mouseup", this.mouseup);
|
||||
document.removeEventListener("mousemove", this.moveMousemove);
|
||||
// document.removeEventListener("mouseup", this.mouseup);
|
||||
// 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(){
|
||||
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
||||
@@ -601,19 +657,22 @@ export default defineComponent({
|
||||
this.exhibitionElementsList = []
|
||||
},
|
||||
closeModal(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designElements=false
|
||||
}
|
||||
});
|
||||
if(this.designItemDetailTS.rv){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designElements=false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.designElements=false
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -622,11 +681,15 @@ export default defineComponent({
|
||||
<style lang="less">
|
||||
.designElements_modal {
|
||||
// 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{
|
||||
position: absolute;
|
||||
}
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
@@ -835,8 +898,8 @@ export default defineComponent({
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -52,11 +52,11 @@
|
||||
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
|
||||
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
|
||||
<div class="designElementsMobile_btn">
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item?.style" @touchstart.stop="itemMoveMousedown(index,$event)">
|
||||
<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
|
||||
<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designElementsMobile_delete" @click="deletePrint">
|
||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||
@@ -452,8 +452,6 @@ export default defineComponent({
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
console.log(sketch.offsetWidth,this.sketch.width.replace(/rem/g,''));
|
||||
|
||||
this.printStyleList[index]={
|
||||
centers:{
|
||||
left:0,
|
||||
@@ -626,7 +624,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
}
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:mask="true"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="designOpenrtion_content">
|
||||
<div class="design_title_text">
|
||||
@@ -39,9 +40,9 @@
|
||||
</div>
|
||||
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
|
||||
<div class="designOpenrtion_nav">
|
||||
<!-- :class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''" -->
|
||||
<div
|
||||
class="designOpenrtion_single"
|
||||
:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"
|
||||
v-for="item,index in designOpenrtionList" :key="item"
|
||||
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
||||
>
|
||||
@@ -49,7 +50,6 @@
|
||||
</div>
|
||||
<div
|
||||
class="designOpenrtion_single"
|
||||
:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"
|
||||
v-for="item,index in designList" :key="item"
|
||||
:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
|
||||
>
|
||||
@@ -63,6 +63,7 @@
|
||||
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
||||
<a-slider id="system_silder"
|
||||
:min="20"
|
||||
:max="1000"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
@@ -89,7 +90,7 @@
|
||||
:key="item"
|
||||
v-if="overallSingle"
|
||||
: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"
|
||||
ref="content"
|
||||
>
|
||||
@@ -98,18 +99,18 @@
|
||||
</div>
|
||||
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
|
||||
<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)">
|
||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<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',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<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 animtion2"></i>
|
||||
<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 { useI18n } from "vue-i18n";
|
||||
import { remove } from "jszip";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
@@ -231,6 +234,7 @@ export default defineComponent({
|
||||
currentFullBodyView,
|
||||
designItemDetailTS,
|
||||
body,
|
||||
getMousePosition,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -243,8 +247,16 @@ export default defineComponent({
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
let mousedown = function(event){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(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 mouse = true;
|
||||
let angle = 0
|
||||
@@ -257,12 +269,19 @@ export default defineComponent({
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let 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) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
@@ -275,16 +294,25 @@ export default defineComponent({
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousemove', mousemove);
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('mousemove',mousemove)
|
||||
// document.removeEventListener('mouseup',mouseup)
|
||||
// document.removeEventListener('mousemove',mousemove)
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
// document.addEventListener('mouseup', 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)
|
||||
}
|
||||
|
||||
},
|
||||
@@ -307,11 +335,6 @@ export default defineComponent({
|
||||
this.ifListOver()
|
||||
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.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
|
||||
skecth.onload=()=>{
|
||||
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){
|
||||
let str = 'single'
|
||||
this.exhibitionOpenrtionList[str].forEach((item,index)=>{
|
||||
this.setTemplate(item,index,str)
|
||||
})
|
||||
}
|
||||
|
||||
if(this.exhibitionOpenrtionList.overall.length == 0 && this.exhibitionOpenrtionList.single.length == 0)this.setpitch(this.designList[0],0)
|
||||
},
|
||||
setprintList(arr){
|
||||
arr.forEach(item=>{
|
||||
@@ -371,10 +390,9 @@ export default defineComponent({
|
||||
})
|
||||
},
|
||||
systemDesigner(num) {
|
||||
|
||||
},
|
||||
formatter(value) {
|
||||
return `${value*3}%`;
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
setOveralSingle(){
|
||||
@@ -462,8 +480,12 @@ export default defineComponent({
|
||||
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.top = imgDomWH.y+event.offsetY-top
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
// document.addEventListener("mouseup", this.mouseup);
|
||||
// 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){
|
||||
@@ -486,16 +508,28 @@ export default defineComponent({
|
||||
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", this.sizeMouseup);
|
||||
document.addEventListener("mousemove", this.sizeMousemove);
|
||||
// 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 parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
|
||||
let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'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.top = y
|
||||
if(!this.overallSingle){
|
||||
@@ -514,8 +548,15 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
sizeMouseMove(event){
|
||||
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 parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
@@ -525,27 +566,27 @@ export default defineComponent({
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
|
||||
h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
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.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
|
||||
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}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'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'left'){
|
||||
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'
|
||||
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'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
@@ -565,13 +606,21 @@ export default defineComponent({
|
||||
width:this.imgDom.offsetWidth+'px',
|
||||
zIndex:this.printZIndex
|
||||
}
|
||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
||||
// 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) {
|
||||
|
||||
document.removeEventListener("mouseup", this.mouseup);
|
||||
document.removeEventListener("mousemove", this.moveMousemove);
|
||||
// document.removeEventListener("mouseup", this.mouseup);
|
||||
// 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(){
|
||||
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 width
|
||||
let scale
|
||||
if(sketch.width<sketch.height){
|
||||
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
|
||||
let img = new Image()
|
||||
img.onload = ()=>{
|
||||
if(sketch.width<sketch.height){
|
||||
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,'')
|
||||
}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
|
||||
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
|
||||
}
|
||||
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) {
|
||||
@@ -736,8 +789,15 @@ export default defineComponent({
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
if(!this.overallSingle){
|
||||
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,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
location = [(x)*sketchNum ,(y )*sketchNum]
|
||||
}else{
|
||||
await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
|
||||
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
||||
@@ -860,19 +920,22 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
closeModal(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designOpenrtion=false
|
||||
}
|
||||
});
|
||||
if(this.designItemDetailTS.rv){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designOpenrtion=false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.designOpenrtion=false
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -881,11 +944,15 @@ export default defineComponent({
|
||||
<style lang="less">
|
||||
.designOpenrtion_modal {
|
||||
// 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{
|
||||
position: absolute;
|
||||
}
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
@@ -1174,8 +1241,8 @@ export default defineComponent({
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -65,7 +65,8 @@
|
||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||
<div class="habit_System_Designer_text">Scale</div>
|
||||
<a-slider id="system_silder"
|
||||
:min="1"
|
||||
:min="20"
|
||||
:max="1000"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
@@ -92,7 +93,7 @@
|
||||
:key="item"
|
||||
v-if="overallSingle"
|
||||
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
|
||||
@touchstart.stop="itemMoveMousedown(index,$event)"
|
||||
@touchstart.passive="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
|
||||
@@ -100,18 +101,18 @@
|
||||
</div>
|
||||
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtionMobile_sketch">
|
||||
<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)">
|
||||
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<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.passive="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtionMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$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__delete" @click="deletePrint">
|
||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<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 animtion2"></i>
|
||||
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>
|
||||
@@ -373,7 +374,7 @@ export default defineComponent({
|
||||
systemDesigner(num) {
|
||||
},
|
||||
formatter(value) {
|
||||
return `${value*3}%`;
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
setOveralSingle(){
|
||||
@@ -813,7 +814,6 @@ export default defineComponent({
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
this.designOpenrtion = false
|
||||
if(this.designItemDetailTS.rv){
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
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].trims = this.designItemDetailTS.rv.clothes[index].trims
|
||||
designItemDetail.clothes[index].printObject.prints = this.setOkData
|
||||
// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.clothes.forEach((item,i)=>{
|
||||
let a
|
||||
@@ -838,6 +837,7 @@ export default defineComponent({
|
||||
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
||||
this.designItemDetailTS = {}
|
||||
}
|
||||
this.designOpenrtion = false
|
||||
if(this.driver__.driver){
|
||||
nextTick(()=>{
|
||||
driverObj__.moveNext();
|
||||
@@ -890,7 +890,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
}
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="addDetails_modal generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
v-model:visible="addDetails"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:destroyOnClose="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
@@ -21,357 +22,40 @@
|
||||
<div>{{ $t('addDetails.AddDetails') }}</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<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>
|
||||
|
||||
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
||||
</div>
|
||||
<div></div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { setCookie, getCookie } from "@/tool/cookie";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import allOrder from "@/component/Pay/allOrder.vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
allOrder,
|
||||
generalMiniCanvas,
|
||||
},
|
||||
emits: ['setSloganData'],
|
||||
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 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 addDetail = reactive({
|
||||
imgUrl:''
|
||||
});
|
||||
|
||||
let setCanvasMove = (event)=>{
|
||||
var pointer = canvas.getPointer(event.e);
|
||||
if(canvas.isDrawingMode){
|
||||
canvas.setCursor('none');
|
||||
if(!canvas.contains(brushIndicator)){
|
||||
canvas.add(brushIndicator)
|
||||
brushIndicator.set({// left:0,
|
||||
// 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 addDetails = ref(false);
|
||||
let init = (data,index)=>{
|
||||
addDetails.value = true
|
||||
addDetail.imgUrl = data.path
|
||||
}
|
||||
let submitBase64Data = (data)=>{
|
||||
emit('setSloganData',data)
|
||||
cancelDsign()
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
canvas.dispose();
|
||||
showPayOrder.value = false
|
||||
document.removeEventListener('keydown',canvasKeyDown);
|
||||
document.removeEventListener('keyup', canvasKeyUp);
|
||||
addDetails.value = false
|
||||
}
|
||||
return {
|
||||
presentState,
|
||||
showPayOrder,
|
||||
loadingShow,
|
||||
t,
|
||||
...toRefs(canvasBtn),
|
||||
...toRefs(addDetail),
|
||||
addDetails,
|
||||
init,
|
||||
setOperation,
|
||||
setPencilWidth,
|
||||
historyState,
|
||||
setSubmit,
|
||||
submitBase64Data,
|
||||
cancelDsign,
|
||||
};
|
||||
},
|
||||
@@ -392,101 +76,14 @@ export default defineComponent({
|
||||
}
|
||||
.addDetails_center{
|
||||
position: relative;
|
||||
// width: calc(512px / 2);
|
||||
// width: 256px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: calc(512px / 2);
|
||||
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{
|
||||
margin-top: 2.4rem;
|
||||
text-align: center;
|
||||
// margin-top: 2.4rem;
|
||||
// text-align: center;
|
||||
}
|
||||
}
|
||||
</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);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.habit_workspace_show{
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
@@ -1165,25 +1166,9 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: calc(1.4rem*1.2);
|
||||
> .anticon + span{
|
||||
> .anticon + span{
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</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="detail_modal_body_title">
|
||||
<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="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
|
||||
<!-- <div
|
||||
v-for="item,index in frontBack.back"
|
||||
@@ -19,19 +18,19 @@
|
||||
@click="setpitch(item,index)" ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
|
||||
</div> -->
|
||||
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @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="">
|
||||
</div>
|
||||
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
|
||||
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @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="">
|
||||
</div>
|
||||
<div class="designOpenrtion_btn">
|
||||
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<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,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
||||
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
@@ -41,6 +40,9 @@
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
|
||||
</div>
|
||||
<!-- <div class="design_compile_content">
|
||||
<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
|
||||
</div> -->
|
||||
|
||||
</template>
|
||||
|
||||
@@ -50,8 +52,12 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
|
||||
import { useStore } from "vuex";
|
||||
// import { Modal,message } from 'ant-design-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import editFrontBack from '@/component/Detail/editFrontBack.vue'
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
export default defineComponent({
|
||||
// props: ["frontBack"],
|
||||
props: ["isBody"],
|
||||
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
|
||||
components:{editFrontBack},
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
|
||||
@@ -85,9 +91,10 @@ export default defineComponent({
|
||||
]);
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(2)
|
||||
let imgDomIndex = ref(-1)
|
||||
let frontBack = ref({})
|
||||
let frontBackOld = ref({})
|
||||
let editFrontBack = ref(null)
|
||||
return {
|
||||
designItemDetail,
|
||||
current,
|
||||
@@ -99,14 +106,20 @@ export default defineComponent({
|
||||
frontBack,
|
||||
setRevocation,
|
||||
frontBackOld,
|
||||
editFrontBack,
|
||||
getMousePosition,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingShow:false,//加载中
|
||||
store: useStore(),
|
||||
setImgSizeTimeout:null
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let DesignParent = this.$parent
|
||||
@@ -134,16 +147,30 @@ export default defineComponent({
|
||||
})
|
||||
this.setImgSize()
|
||||
},
|
||||
setImgSizeTime(){
|
||||
clearTimeout(this.setImgSizeTimeout)
|
||||
this.setImgSizeTimeout = setTimeout(()=>{
|
||||
this.setImgSize()
|
||||
},300)
|
||||
},
|
||||
async setImgSize(){
|
||||
this.frontBack.body = null
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let front = []
|
||||
let back = []
|
||||
let body
|
||||
designItemDetail.others.forEach((item) => {
|
||||
if(item.type == 'Body'){
|
||||
let body = {}
|
||||
if(designItemDetail.others.length > 0){
|
||||
designItemDetail.others.forEach((item) => {
|
||||
if(item.type == 'Body'){
|
||||
body = item
|
||||
}
|
||||
});
|
||||
}else{
|
||||
designItemDetail.clothes.forEach((item) => {
|
||||
body = item
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
|
||||
let frontIndex = 6
|
||||
let backIndex = 3
|
||||
@@ -167,11 +194,12 @@ export default defineComponent({
|
||||
front[index] = v.layersObject[i]
|
||||
front[index].style.zIndex = v.priority
|
||||
front[index].id = v.id
|
||||
front[index].undividedLayer = v.undividedLayer
|
||||
}else{
|
||||
back[index] = v.layersObject[i]
|
||||
back[index].style.zIndex = v.priority
|
||||
back[index].id = v.id
|
||||
|
||||
back[index].undividedLayer = v.undividedLayer
|
||||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||||
}
|
||||
if(this.printZIndex < v.priority){
|
||||
@@ -180,12 +208,13 @@ export default defineComponent({
|
||||
}
|
||||
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',
|
||||
if(body){
|
||||
body.style = {
|
||||
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
||||
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
||||
}
|
||||
}
|
||||
|
||||
this.frontBack = {
|
||||
front:front,
|
||||
back:back,
|
||||
@@ -218,6 +247,12 @@ export default defineComponent({
|
||||
}
|
||||
return num
|
||||
},
|
||||
clear(){
|
||||
this.imgDomIndex = -1
|
||||
this.clothesOpenActive(-1)
|
||||
if(this.editFrontBack)this.editFrontBack.setClone()
|
||||
window.removeEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.frontBack.front.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
@@ -244,8 +279,12 @@ export default defineComponent({
|
||||
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
|
||||
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
|
||||
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
// document.addEventListener("mouseup", this.mouseup);
|
||||
// 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){
|
||||
@@ -262,15 +301,25 @@ export default defineComponent({
|
||||
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 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 y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
|
||||
let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
|
||||
this.frontBack.front[this.imgDomIndex].style.left = x
|
||||
this.frontBack.front[this.imgDomIndex].style.top = y
|
||||
// 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'
|
||||
// }
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
sizeMouseMove(event){
|
||||
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 parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
@@ -296,8 +352,8 @@ export default defineComponent({
|
||||
let num = height/width
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||
w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
|
||||
h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
// height = w*num+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
@@ -305,20 +361,20 @@ export default defineComponent({
|
||||
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
|
||||
w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
|
||||
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
num = width/height
|
||||
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
|
||||
h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(this.direction == 'left'){
|
||||
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
|
||||
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
|
||||
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
|
||||
|
||||
width = w+'px'
|
||||
// height = w*num+'px'
|
||||
@@ -340,13 +396,19 @@ export default defineComponent({
|
||||
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) {
|
||||
|
||||
document.removeEventListener("mouseup", this.mouseup);
|
||||
document.removeEventListener("mousemove", this.moveMousemove);
|
||||
// document.removeEventListener("mouseup", this.mouseup);
|
||||
// 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(){
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
@@ -372,9 +434,11 @@ export default defineComponent({
|
||||
},
|
||||
clothesOpenActive(index){
|
||||
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){
|
||||
arr.sort((a, b) => {
|
||||
@@ -393,15 +457,14 @@ export default defineComponent({
|
||||
// return a_num - b_num;
|
||||
// });
|
||||
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
|
||||
|
||||
let num = 10
|
||||
arr.forEach((item)=>{
|
||||
item.priority = num++
|
||||
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
|
||||
})
|
||||
let front = arr
|
||||
let imageCategory1
|
||||
data.designSingleItemDTOList.forEach((item)=>{
|
||||
let front = arr
|
||||
let imageCategory1
|
||||
if(arr.length > 1){
|
||||
imageCategory1 = arr[1].imageCategory
|
||||
}
|
||||
@@ -416,6 +479,7 @@ export default defineComponent({
|
||||
let top = y == 0 ? item.offset[1]:y+item.offset[1]
|
||||
let left = x == 0 ? item.offset[0]:x+item.offset[0]
|
||||
item.offset = [left,top]
|
||||
item.maskUrl = arr[index].maskUrl
|
||||
item.priority = arr[index].priority
|
||||
arr[index].similarity = true
|
||||
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
// return
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
// this.$parent.loadingShow = false
|
||||
@@ -472,6 +535,7 @@ export default defineComponent({
|
||||
this.$emit('setDesignCoverage');
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
this.clear()
|
||||
}
|
||||
).catch(res=>{
|
||||
// this.$parent.loadingShow = false
|
||||
@@ -485,8 +549,12 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.designOpenrtion_modal {
|
||||
// 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{
|
||||
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(65rem*1.2);
|
||||
display: flex;
|
||||
@@ -505,19 +573,21 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.designOpenrtion_centent{
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
@@ -525,8 +595,8 @@ export default defineComponent({
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
||||
// overflow: hidden;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
@@ -611,8 +681,8 @@ export default defineComponent({
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -296,73 +296,6 @@ export default defineComponent({
|
||||
init(){
|
||||
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){
|
||||
@@ -485,7 +418,7 @@ export default defineComponent({
|
||||
.designOpenrtion_modal {
|
||||
// max-width: 1440px;
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
|
||||
@@ -25,10 +25,10 @@
|
||||
</div>
|
||||
<div class="designOpenrtion_btn">
|
||||
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
|
||||
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
@@ -47,6 +47,7 @@ import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
// props: ["frontBack"],
|
||||
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
|
||||
@@ -100,8 +101,12 @@ export default defineComponent({
|
||||
return {
|
||||
loadingShow:false,//加载中
|
||||
store: useStore(),
|
||||
setImgSizeTimeout:null
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let DesignParent = this.$parent
|
||||
@@ -129,7 +134,14 @@ export default defineComponent({
|
||||
})
|
||||
this.setImgSize()
|
||||
},
|
||||
setImgSizeTime(){
|
||||
clearTimeout(this.setImgSizeTimeout)
|
||||
this.setImgSizeTimeout = setTimeout(()=>{
|
||||
this.setImgSize()
|
||||
},300)
|
||||
},
|
||||
async setImgSize(){
|
||||
this.frontBack.body = null
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let front = []
|
||||
let back = []
|
||||
@@ -214,6 +226,9 @@ export default defineComponent({
|
||||
}
|
||||
return num
|
||||
},
|
||||
clear(){
|
||||
window.removeEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.frontBack.front.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
@@ -439,6 +454,7 @@ export default defineComponent({
|
||||
this.$emit('setDesignCoverage');
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
this.clear()
|
||||
}
|
||||
).catch(res=>{
|
||||
this.$emit('setParentLoadingShow');
|
||||
@@ -457,7 +473,7 @@ export default defineComponent({
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
.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(65rem*1.2);
|
||||
display: flex;
|
||||
@@ -477,13 +493,14 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.designOpenrtion_centent{
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
@@ -496,8 +513,9 @@ export default defineComponent({
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
||||
margin: 0 auto;
|
||||
>img{
|
||||
z-index: 2;
|
||||
|
||||
@@ -29,8 +29,10 @@
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:auto-crop="option.autoCrop"
|
||||
:fixedBox="!isRound"
|
||||
:fixed="isRound"
|
||||
:auto-crop-width="option.autoCropWidth"
|
||||
:auto-crop-height="option.autoCropHeight"
|
||||
:auto-crop-height="option.autoCropWidth"
|
||||
:center-box="option.centerBox"
|
||||
:can-move="option.canMove" :can-move-box="option.canMoveBox"
|
||||
@real-time="realTime"
|
||||
@@ -39,8 +41,8 @@
|
||||
<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="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>
|
||||
</div>
|
||||
@@ -51,8 +53,8 @@
|
||||
</div>
|
||||
<div class="cut_picture_review_block">
|
||||
<div class="cut_picture_review_item">
|
||||
<div class="cut_picture_review_content" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div" >
|
||||
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div">
|
||||
<img class="previews_image" :style="previews.img" :src="previews.url">
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,17 +78,14 @@ import { VueCropper } from "vue-cropper";
|
||||
// import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import {base64toFile} from '@/tool/util'
|
||||
export default defineComponent({
|
||||
props:['cropperFileData','isUpload'],
|
||||
props:['cropperFileData','isUpload','isRound'],
|
||||
components:{
|
||||
VueCropper,
|
||||
},
|
||||
setup(){
|
||||
let driver__:any = inject('driver__')
|
||||
return {
|
||||
driver__
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
data(prop){
|
||||
return {
|
||||
cutPicuterModal:false,
|
||||
option: {
|
||||
@@ -97,16 +96,19 @@ export default defineComponent({
|
||||
outputType: 'png',
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 360,
|
||||
autoCropHeight: 360,
|
||||
autoCropWidth: prop.isRound?100:360,
|
||||
autoCropHeight: prop.isRound?100:360,
|
||||
max: 99999,
|
||||
centerBox:true,
|
||||
canMove:true,
|
||||
canMoveBox:true,
|
||||
fixedBox:false,
|
||||
},
|
||||
previews:{},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
|
||||
rotateLeft() {
|
||||
@@ -147,7 +149,7 @@ export default defineComponent({
|
||||
cropper.getCropData((data:any) => {
|
||||
// 转换为File对象
|
||||
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);
|
||||
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);
|
||||
&.active{
|
||||
border-radius: 50%;
|
||||
overflow: hidden
|
||||
}
|
||||
}
|
||||
|
||||
.cut_picture_review_block_sec{
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
||||
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||
@@ -13,8 +13,8 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<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_btnBox">
|
||||
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
|
||||
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item Guide_1_2_7"
|
||||
@@ -39,13 +39,6 @@
|
||||
</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
|
||||
class="search_input"
|
||||
@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-bs-compress" @click.stop="setTextareaShow"></i>
|
||||
</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
|
||||
v-show="isTextarea"
|
||||
class="search_textarea "
|
||||
@@ -86,10 +126,8 @@
|
||||
@click.stop=""
|
||||
v-model="searchPictureName"
|
||||
></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">
|
||||
{{ $t('Generate.Generate') }}
|
||||
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
|
||||
</div>
|
||||
<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>
|
||||
@@ -108,38 +146,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
|
||||
<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 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="generage_img_item"
|
||||
v-for="(item, index) in fileList"
|
||||
@@ -163,8 +170,11 @@
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
|
||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||
</div>
|
||||
</template>
|
||||
@@ -196,26 +206,11 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
// console.log(prop.msg);
|
||||
|
||||
let printModelList = ref([
|
||||
{
|
||||
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')
|
||||
},
|
||||
])
|
||||
let printModel = ref({
|
||||
let printModelList:any = ref([])
|
||||
let sketchStyleList:any = ref([])
|
||||
let printModel:any = ref({
|
||||
num:'',
|
||||
id:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
label:useI18n().t('Generate.Model1')
|
||||
@@ -240,12 +235,13 @@ export default defineComponent({
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let generateTime:any = ref()
|
||||
let generateProceedList = ref([])
|
||||
let generateProceedList:any = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let styleRecommend:any = inject('styleRecommend')
|
||||
let generateLevel2Type = ''
|
||||
let isSloganHint:any = ref(' ')
|
||||
let loadingShow =ref(false)
|
||||
return {
|
||||
searchPictureName,
|
||||
searchPictureSeed,
|
||||
@@ -255,6 +251,7 @@ export default defineComponent({
|
||||
level2Type,
|
||||
printModel,
|
||||
printModelList,
|
||||
sketchStyleList,
|
||||
isGenerate,
|
||||
|
||||
// printBoards,
|
||||
@@ -274,6 +271,7 @@ export default defineComponent({
|
||||
styleRecommend,
|
||||
generateLevel2Type,
|
||||
isSloganHint,
|
||||
loadingShow,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -319,6 +317,38 @@ export default defineComponent({
|
||||
this.workspaceCom = computed(()=>{
|
||||
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:{
|
||||
driver__:{
|
||||
@@ -377,6 +407,7 @@ export default defineComponent({
|
||||
methods: {
|
||||
generageAdd(data: any) {
|
||||
data.type_ = this.type_;
|
||||
data.type_.type1 = data.designType?data.designType:this.type_.type1
|
||||
data.resData = JSON.parse(JSON.stringify(data))
|
||||
let maxImg = 8
|
||||
if(this.type_.type2 == 'Sketchboard'){
|
||||
@@ -410,7 +441,41 @@ export default defineComponent({
|
||||
setprintModel(value:any){
|
||||
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(){
|
||||
if(this.scene?.value == 'extract'){
|
||||
this.imageToSketch()
|
||||
return
|
||||
}
|
||||
this.isTextarea = false
|
||||
this.isInputFocus = false
|
||||
if(this.isGenerate)return
|
||||
@@ -789,7 +854,7 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.generate {
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
@@ -844,7 +909,6 @@ export default defineComponent({
|
||||
border-radius: calc(1rem*1.2);
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
object-fit: contain;
|
||||
}
|
||||
.delete_like_file_block{
|
||||
pointer-events:none;
|
||||
@@ -856,6 +920,7 @@ export default defineComponent({
|
||||
img {
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
object-fit: contain;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
// display: block;
|
||||
|
||||
@@ -263,7 +263,7 @@ export default defineComponent({
|
||||
this.accountIsLogin(this.userInfo);
|
||||
}
|
||||
this.isHaveBindEmail = this.userInfo?.email ? true : false;
|
||||
if(!isMurmur){
|
||||
if(!this.isMurmur){
|
||||
this.operateClick();
|
||||
document.addEventListener("click", this.operateClick);
|
||||
}
|
||||
|
||||
@@ -266,7 +266,7 @@ export default defineComponent({
|
||||
modelImg:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
@@ -276,7 +276,7 @@ export default defineComponent({
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
@@ -406,6 +406,12 @@ export default defineComponent({
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.disposeMoodboard
|
||||
)
|
||||
);
|
||||
let moodboardPosition = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardPosition
|
||||
)
|
||||
);
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
@@ -425,18 +431,27 @@ export default defineComponent({
|
||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
||||
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
|
||||
this.fileList = setboard.moodboard
|
||||
},
|
||||
|
||||
async changeTemplateModal() {
|
||||
if(this.modalImg[0]?.id){
|
||||
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
|
||||
// layout.init('moodboard')
|
||||
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
|
||||
let layout:any = this.$refs.layout
|
||||
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))
|
||||
// this.layoutList = arr
|
||||
if(window.screen.width<1300){
|
||||
layout.isMobile = true
|
||||
}else{
|
||||
layout.isMobile = false
|
||||
}
|
||||
|
||||
layout.init()
|
||||
}else{
|
||||
message.info(this.t('MoodboardUpload.jsContent5'))
|
||||
@@ -445,65 +460,81 @@ export default defineComponent({
|
||||
},
|
||||
async layout(){
|
||||
if(this.loadingShow)return
|
||||
this.loadingShow = true
|
||||
this.store.commit("setDisposeMoodboard", []);
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}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
|
||||
await new Promise((resolve, reject) => {
|
||||
this.loadingShow = true
|
||||
this.store.commit("setDisposeMoodboard", []);
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}else{
|
||||
this.flex_direction = false
|
||||
}
|
||||
}
|
||||
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')
|
||||
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=>{
|
||||
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
|
||||
})
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
this.layout()
|
||||
return resolve('')
|
||||
}
|
||||
}
|
||||
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){
|
||||
this.moodb_className = val
|
||||
@@ -521,6 +552,8 @@ export default defineComponent({
|
||||
width: 47%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
width: 50%;
|
||||
// width: 50rem*1.2);
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
@@ -611,6 +644,7 @@ export default defineComponent({
|
||||
margin-left: calc(3rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
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 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">
|
||||
<li
|
||||
v-for="item,index in printCatecoryList"
|
||||
@@ -203,18 +203,6 @@ export default defineComponent({
|
||||
designType:''
|
||||
})
|
||||
let workspace:any = ref({})
|
||||
let sceneList = ref([
|
||||
{
|
||||
name:'Pattern',
|
||||
value:'Pattern'
|
||||
},{
|
||||
name:'Slogan',
|
||||
value:'Slogan'
|
||||
},{
|
||||
name:'Logo',
|
||||
value:'Logo'
|
||||
},
|
||||
])
|
||||
let scene = ref({
|
||||
name:'Pattern',
|
||||
value:'Pattern'
|
||||
@@ -234,7 +222,6 @@ export default defineComponent({
|
||||
userInfo,
|
||||
useGenerate,
|
||||
workspace,
|
||||
sceneList,
|
||||
scene,
|
||||
openMenu,
|
||||
printCatecoryList,
|
||||
@@ -700,6 +687,8 @@ export default defineComponent({
|
||||
.printMenu{
|
||||
margin-right: 0;
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
margin-left: 2rem;
|
||||
>div{
|
||||
width: 14rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
@@ -707,6 +696,8 @@ export default defineComponent({
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
@@ -929,6 +920,9 @@ export default defineComponent({
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
&.modal_imgItem:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
|
||||
@@ -23,6 +23,20 @@
|
||||
>
|
||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
||||
</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 v-show="openClick == 1" class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
@@ -113,6 +127,7 @@
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
:scene="scene"
|
||||
:sketchCatecoryList="sketchCatecoryList"
|
||||
></Generate>
|
||||
</div>
|
||||
@@ -214,6 +229,15 @@ export default defineComponent({
|
||||
level2Type:'',
|
||||
designType:'',
|
||||
})
|
||||
|
||||
let openMenu = ref(false)
|
||||
let sketchStyleList:any = computed(()=>{
|
||||
return store.state.UserHabit.SketchGenerateType
|
||||
})
|
||||
let scene = ref({
|
||||
name: t('SketchboardUpload.GenerateSketch'),
|
||||
value:'generate'
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
openClick,
|
||||
@@ -227,6 +251,9 @@ export default defineComponent({
|
||||
isTest,
|
||||
userInfo,
|
||||
useGenerate,
|
||||
scene,
|
||||
openMenu,
|
||||
sketchStyleList,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -549,6 +576,23 @@ export default defineComponent({
|
||||
}
|
||||
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>
|
||||
@@ -610,6 +654,30 @@ export default defineComponent({
|
||||
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 {
|
||||
// height: calc(100% - 5rem*1.2));
|
||||
@@ -822,6 +890,9 @@ export default defineComponent({
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
&.modal_imgItem:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
|
||||
@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
|
||||
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
|
||||
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import {useStore} from 'vuex'
|
||||
@@ -83,7 +84,13 @@ export default defineComponent({
|
||||
SketchboardUpload,
|
||||
MarketingSketchUpload
|
||||
},
|
||||
setup(){
|
||||
props:{
|
||||
getDesignData: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props){
|
||||
const store = useStore()
|
||||
let {t} = useI18n()
|
||||
let driver__:any = computed(()=>{
|
||||
@@ -285,9 +292,46 @@ export default defineComponent({
|
||||
})
|
||||
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(){
|
||||
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 arr:any = []
|
||||
sketchList.forEach((item:any) => {
|
||||
@@ -299,12 +343,14 @@ export default defineComponent({
|
||||
}
|
||||
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)){
|
||||
this.isShowMark = false
|
||||
return
|
||||
}
|
||||
|
||||
let elList = document.querySelectorAll('.img_block_item_sketch img')
|
||||
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
|
||||
.then((rv: any) => {
|
||||
@@ -314,7 +360,6 @@ export default defineComponent({
|
||||
GO.id = 0
|
||||
this.showCollectionModal =false
|
||||
this.collectionStep = 1
|
||||
this.$emit('finishCollection')
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
@@ -18,13 +19,13 @@
|
||||
|
||||
<div class="clearSlogan_center">
|
||||
<div class="modal_title_text">
|
||||
<div>Create Slogan</div>
|
||||
<div>{{ $t('createSlogan.title') }}</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<div v-show="textBtnShow" class="clearSlogan_center_item clearSlogan_center_btn_move">
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Color</div>
|
||||
<div>{{ $t('createSlogan.Color') }}</div>
|
||||
<input type="color" v-model="fill">
|
||||
</div>
|
||||
<!-- <div class="clearSlogan_center_btn_item">
|
||||
@@ -32,7 +33,7 @@
|
||||
<input type="Number" v-model="fontSize">
|
||||
</div> -->
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Align</div>
|
||||
<div>{{ $t('createSlogan.FontAlign') }}</div>
|
||||
<ul>
|
||||
<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>
|
||||
@@ -40,7 +41,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Style</div>
|
||||
<div>{{ $t('createSlogan.FontStyle') }}</div>
|
||||
<ul>
|
||||
<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>
|
||||
@@ -49,7 +50,7 @@
|
||||
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Family</div>
|
||||
<div>{{ $t('createSlogan.FontFamily') }}</div>
|
||||
<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>
|
||||
</select>
|
||||
@@ -57,16 +58,16 @@
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn clearSlogan_center_item">
|
||||
<div @click="setTextFun('')" class="clearSlogan_center_btn_item">
|
||||
<div>新增</div>
|
||||
<div>{{ $t('createSlogan.add') }}</div>
|
||||
</div>
|
||||
<div @click="removeTextFun()" class="clearSlogan_center_btn_item">
|
||||
<div>删除</div>
|
||||
<div>{{ $t('createSlogan.delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_submit" @click="setSubmit">
|
||||
<div class="started_btn">
|
||||
submit
|
||||
{{ $t('createSlogan.submit') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,16 +1,67 @@
|
||||
<template>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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 { getUploadUrl } from "@/tool/util";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { message, Upload, Modal } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name:'filterComponent',
|
||||
props:{
|
||||
@@ -24,6 +75,10 @@
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
isCanvas:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
deleteItem:{
|
||||
type:Number,
|
||||
default:-1
|
||||
@@ -37,7 +92,7 @@
|
||||
setup(props:any,{emit}){
|
||||
let selectIndex = ref(0)
|
||||
let openClick = ref(false)
|
||||
|
||||
let store = useStore();
|
||||
let openPrintModel = ()=>{
|
||||
document.addEventListener('click',removePrintModel)
|
||||
openClick.value = true
|
||||
@@ -49,6 +104,7 @@
|
||||
}
|
||||
let setprintModel = (item:any,index:any)=>{
|
||||
if(props.deleteItem == index) return
|
||||
if(item.img == -1) return
|
||||
openClick.value = false
|
||||
selectIndex = index
|
||||
nextTick().then(()=>{
|
||||
@@ -61,35 +117,110 @@
|
||||
let removePrintModel = ()=>{
|
||||
openClick.value = false
|
||||
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 {
|
||||
selectIndex,
|
||||
openClick,
|
||||
store,
|
||||
setprintModel,
|
||||
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>
|
||||
<style lang="less">
|
||||
.ant-popover-inner-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
//衣服类型下拉菜单
|
||||
.generalMenu_printModel{
|
||||
margin-right: 2rem;
|
||||
|
||||
>div{
|
||||
width: calc(13rem*1.2);
|
||||
// display: flex;
|
||||
display: block;
|
||||
width: calc(13rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
margin: 0;
|
||||
border: 2px solid;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
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{
|
||||
position: absolute;
|
||||
@@ -108,6 +239,10 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
span{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&.active{
|
||||
// opacity: .4;
|
||||
pointer-events: none;
|
||||
@@ -116,6 +251,12 @@
|
||||
cursor: not-allowed;
|
||||
|
||||
}
|
||||
:deep(.icon-shanchu){
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.printModel_item:hover{
|
||||
// background: rgba(0,0,0,.4);
|
||||
@@ -124,4 +265,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -24,22 +24,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<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" >
|
||||
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<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" :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>
|
||||
<ul v-show="item.setPitch" class="layout_btn" >
|
||||
<li class="layout_btn_top" v-compile.stop="'top'"></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_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_angle_tr" v-angle.stop = "'top'"></li>
|
||||
@@ -73,6 +70,16 @@
|
||||
</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 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">
|
||||
@@ -118,20 +125,28 @@ import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
export default defineComponent({
|
||||
props:["moodb_className",'flex_direction'],
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
setup(prop) {
|
||||
let store = useStore()
|
||||
let layout: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let drag = false;
|
||||
let layoutList:any = ref([])
|
||||
const content = ref<HTMLElement | null>(null);
|
||||
const content:any = ref<HTMLElement | null>(null);
|
||||
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 {
|
||||
layout,
|
||||
templateFileList,
|
||||
@@ -139,7 +154,11 @@ export default defineComponent({
|
||||
drag,
|
||||
layoutList,
|
||||
content,
|
||||
loadingShow
|
||||
loadingShow,
|
||||
moodItemScale,
|
||||
styleObj,
|
||||
domObj,
|
||||
isMobile,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -147,17 +166,13 @@ export default defineComponent({
|
||||
// moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
|
||||
// layoutList:computed(()=>{
|
||||
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
// ...(useStore().state.UploadFilesModule.generateFiles),
|
||||
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
// }),
|
||||
moodb : moodb.moodb_,
|
||||
moodbList:{},
|
||||
moodbClassName:[],
|
||||
setabsolute:false,
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
moodIndex:0,
|
||||
upload: {
|
||||
isPin: 0,
|
||||
gender:'',
|
||||
@@ -175,8 +190,18 @@ export default defineComponent({
|
||||
//操作移动
|
||||
layout:{
|
||||
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) => {
|
||||
v.style.left = v.offsetLeft+'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 domY = e.clientY - e.offsetY - Number(top)
|
||||
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){
|
||||
el.style.left = e.x-mouseX - domX+'px'
|
||||
el.style.top = e.y-mouseY - domY+'px'
|
||||
el.style.left = e.clientX-mouseX - domX+'px'
|
||||
el.style.top = e.clientY-mouseY - domY+'px'
|
||||
if(el.offsetLeft <=0){
|
||||
el.style.left = 0+'px'
|
||||
}
|
||||
@@ -211,18 +244,23 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
let mouseup = function(){
|
||||
mouse = false
|
||||
document.onmousemove = ()=>{
|
||||
|
||||
}
|
||||
// el.removeEventListener('mousedown',mousedown)
|
||||
|
||||
// el.removeEventListener('mousedown',mousedown)
|
||||
// document.onmousemove = 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);
|
||||
//移动端
|
||||
}
|
||||
el.addEventListener('mousedown',mousedown)
|
||||
el.addEventListener('touchstart',touchstart)
|
||||
|
||||
},
|
||||
updated (el,layout) {
|
||||
|
||||
@@ -231,8 +269,15 @@ export default defineComponent({
|
||||
//操作大小
|
||||
compile:{
|
||||
mounted (el,compile) {
|
||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
||||
e.stopPropagation()
|
||||
let mousedown = (event:any)=>{
|
||||
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
|
||||
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
||||
v.style.left = v.offsetLeft+'px'
|
||||
@@ -256,27 +301,34 @@ export default defineComponent({
|
||||
let gpsXY:any
|
||||
let parent:any
|
||||
if(compile.value == 'left' || compile.value == 'right'){
|
||||
gpsXY = e.x
|
||||
gpsXY = e.clientX
|
||||
parent = elParent.offsetWidth
|
||||
}else{
|
||||
parent = elParent.offsetHeight
|
||||
gpsXY = e.y
|
||||
gpsXY = e.clientY
|
||||
}
|
||||
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(compile.value == 'left'){
|
||||
elParent.style.width = parent + gpsXY - e.x + 'px'
|
||||
elParent.style.width = parent + gpsXY - e.clientX + 'px'
|
||||
}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'){
|
||||
elParent.style.height = parent + gpsXY - e.y + 'px'
|
||||
elParent.style.height = parent + gpsXY - e.clientY + 'px'
|
||||
}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,''))){
|
||||
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
|
||||
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:{
|
||||
mounted(el){
|
||||
mounted(el,item){
|
||||
let mouse = true;
|
||||
let angle :any = 0
|
||||
let num:any
|
||||
let num:any = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
let elParent = el.parentNode.parentNode
|
||||
if(document.defaultView){
|
||||
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
|
||||
num = Number(transform[3])
|
||||
|
||||
let mousedown = function(event: MouseEvent){
|
||||
let e:any = getMousePosition(event,false)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
// 添加鼠标按下事件监听器
|
||||
let mousedown = (e:MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
|
||||
let touchstart = function(event: any){
|
||||
let e:any = getMousePosition(event,true)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
let mouseDownOperation = (e:any) => {
|
||||
mouse = true;
|
||||
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
|
||||
// let eY = elParent.offsetTop + el.offsetTop
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
|
||||
document.addEventListener('mousemove', (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)
|
||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
|
||||
num = item.value.zoom?item.value.zoom :1
|
||||
angle = item.value.angle?item.value.angle:0
|
||||
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: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 = () => {
|
||||
mouse = false;
|
||||
// el.removeEventListener('mousedown',mousedown)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
}
|
||||
el.addEventListener('mousedown',mousedown);
|
||||
el.addEventListener('mousedown',mousedown)
|
||||
el.addEventListener('touchstart',touchstart)
|
||||
|
||||
//缩放
|
||||
let timeSwitch = true
|
||||
el.parentNode.addEventListener('mousemove', (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){
|
||||
timeSwitch = false
|
||||
if((e as WheelEvent).deltaY > 0){
|
||||
@@ -371,10 +454,10 @@ export default defineComponent({
|
||||
setTimeout(() => {
|
||||
timeSwitch = true
|
||||
}, 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:{
|
||||
mounted(el,angle){
|
||||
let mouse = false;
|
||||
el.addEventListener('mousedown', (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 = (e:MouseEvent) => {
|
||||
el.parentNode.children.forEach((v:any) =>{
|
||||
v.classList.add('eventNode')
|
||||
})
|
||||
@@ -394,7 +484,15 @@ export default defineComponent({
|
||||
let eX:any
|
||||
let eY:any
|
||||
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(angle.value == 'right'){
|
||||
eX = elParent.offsetWidth - e.offsetX
|
||||
@@ -409,7 +507,7 @@ export default defineComponent({
|
||||
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
||||
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.top = e.offsetY /2+'px'
|
||||
if(100 - 100 * mouseSide/elParentSide <= 50){
|
||||
@@ -458,28 +556,40 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
// 添加鼠标松开事件监听器
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
|
||||
}
|
||||
let mouseup = () => {
|
||||
mouse = false;
|
||||
el.parentNode.removeEventListener('mousemove',mouseMove)
|
||||
let mouseup = function(){
|
||||
mouse = false
|
||||
el.parentNode.children.forEach((v:any) =>{
|
||||
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('touchmove', touchmove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('touchend', mouseup);
|
||||
}
|
||||
el.addEventListener('mousedown',mousedown)
|
||||
el.addEventListener('touchstart',touchstart)
|
||||
}
|
||||
},
|
||||
//移动图片
|
||||
translate:{
|
||||
mounted (el,layout:any,binding) {
|
||||
el.addEventListener('mousedown',(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 = (e: MouseEvent)=>{
|
||||
let elParent = el.parentNode.parentNode
|
||||
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*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 domY = e.clientY - e.offsetY - el.offsetTop
|
||||
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){
|
||||
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
||||
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
||||
let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
||||
let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
||||
el.style.left = left
|
||||
el.style.top = top;
|
||||
el.previousSibling.style.top = top
|
||||
@@ -529,17 +647,27 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
let mouseup = function(){
|
||||
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:{
|
||||
mounted(el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
@@ -549,7 +677,7 @@ export default defineComponent({
|
||||
},
|
||||
updated (el) {
|
||||
let parentNode = el.parentNode
|
||||
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
||||
el.style.height = 100+'%'
|
||||
el.style.width = 'auto'
|
||||
}else{
|
||||
@@ -562,6 +690,7 @@ export default defineComponent({
|
||||
methods: {
|
||||
init(){
|
||||
let parentList:any = this.$parent
|
||||
this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||
parentList = parentList.layoutList
|
||||
this.layout = true
|
||||
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||
@@ -569,14 +698,22 @@ export default defineComponent({
|
||||
v.setPitch = false
|
||||
})
|
||||
this.layoutList = parentList
|
||||
|
||||
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(){
|
||||
this.layout = false
|
||||
},
|
||||
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)=>{
|
||||
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){
|
||||
this.moodbClassName = item
|
||||
this.$emit('setmoodbClass',this.moodbClassName)
|
||||
@@ -604,9 +746,79 @@ export default defineComponent({
|
||||
changeTemplateModal(){
|
||||
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() {
|
||||
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)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
@@ -628,6 +840,8 @@ export default defineComponent({
|
||||
this.layout = false
|
||||
this.loadingShow = false
|
||||
this.store.commit("setDisposeMoodboard", rv);
|
||||
|
||||
|
||||
}
|
||||
).catch(rv=>{
|
||||
this.loadingShow = false
|
||||
@@ -646,6 +860,10 @@ export default defineComponent({
|
||||
|
||||
<style lang="less">
|
||||
.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 {
|
||||
padding: 0;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
@@ -736,8 +954,8 @@ export default defineComponent({
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
z-index: 1049;
|
||||
@@ -801,24 +1019,28 @@ export default defineComponent({
|
||||
}
|
||||
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
||||
// opacity: 0;
|
||||
width: calc(.8rem*1.2);
|
||||
height: calc(.8rem*1.2);
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
}
|
||||
.layout_angle_tr{
|
||||
right: 0%;
|
||||
top: 0;
|
||||
transform: translate(50%,-50%);
|
||||
}
|
||||
.layout_angle_tl{
|
||||
left: 0%;
|
||||
top: 0;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.layout_angle_br{
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
transform: translate(50%,50%);
|
||||
}
|
||||
.layout_angle_bl{
|
||||
left: 0%;
|
||||
bottom: 0%;
|
||||
transform: translate(-50%,50%);
|
||||
}
|
||||
.eventNode{
|
||||
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 {
|
||||
margin: calc(2rem*1.2) auto 0;
|
||||
position: relative;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,14 +132,22 @@ export default defineComponent({
|
||||
draggable
|
||||
},
|
||||
setup(prop) {
|
||||
let store = useStore()
|
||||
let layout: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let drag = false;
|
||||
let layoutList:any = ref([])
|
||||
const content = ref<HTMLElement | null>(null);
|
||||
const content:any = ref<HTMLElement | null>(null);
|
||||
let loadingShow = ref(false)
|
||||
let styleObj = computed(()=>{
|
||||
return store.state.UploadFilesModule.moodboardPosition
|
||||
})
|
||||
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 {
|
||||
layout,
|
||||
templateFileList,
|
||||
@@ -148,7 +156,9 @@ export default defineComponent({
|
||||
layoutList,
|
||||
content,
|
||||
loadingShow,
|
||||
moodItemScale
|
||||
moodItemScale,
|
||||
styleObj,
|
||||
domObj,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -582,7 +592,9 @@ export default defineComponent({
|
||||
this.moodIndex = 0
|
||||
|
||||
this.moodbList = this.moodb[parentList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
this.moodbClassName = this.styleObj.class
|
||||
this.initDomStyle()
|
||||
|
||||
},
|
||||
cancelDsign(){
|
||||
this.layout = false
|
||||
@@ -635,6 +647,65 @@ export default defineComponent({
|
||||
changeTemplateModal(){
|
||||
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() {
|
||||
this.loadingShow = true
|
||||
@@ -659,6 +730,10 @@ export default defineComponent({
|
||||
this.layout = false
|
||||
this.loadingShow = false
|
||||
this.store.commit("setDisposeMoodboard", rv);
|
||||
|
||||
this.setDomStyle()
|
||||
this.setIndex(this.styleObj.domStyle)//index统一排序设置值
|
||||
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
|
||||
}
|
||||
).catch(rv=>{
|
||||
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="Guide_1_32">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input_border productImg_content_item_generate">
|
||||
@@ -75,11 +75,25 @@
|
||||
</a-slider> -->
|
||||
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
|
||||
</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_imgBox generalScroll" v-mousewheel>
|
||||
<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':'']">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
</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"/>
|
||||
<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
|
||||
|
||||
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div> -->
|
||||
@@ -210,6 +226,7 @@
|
||||
:productData="{
|
||||
upload:upload,
|
||||
similarity:similarity,
|
||||
brightenValue:brightenValue,
|
||||
RelightDirection:RelightDirection,
|
||||
RelightDirectionList:RelightDirectionList,
|
||||
}"
|
||||
@@ -264,6 +281,7 @@ export default defineComponent({
|
||||
generateList:[],
|
||||
likeList:[],
|
||||
similarity:30,
|
||||
brightenValue:1,
|
||||
})
|
||||
let productimgMenuList = ref([
|
||||
{
|
||||
@@ -491,6 +509,7 @@ export default defineComponent({
|
||||
toProductImageVOList:selectArr,
|
||||
userLikeGroupId:upload.value.userlikeGroupId,
|
||||
direction:RelightDirection.value,
|
||||
brightenValue:productImgData.brightenValue,
|
||||
imageStrength:(100 - imageStrength)/100,
|
||||
}
|
||||
productImgData.isProductimg = true
|
||||
@@ -587,7 +606,11 @@ export default defineComponent({
|
||||
if(generateProceedList){
|
||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||
let str = generateProceedList.join(',')
|
||||
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
||||
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(
|
||||
(rv) => {
|
||||
generateProceedList = []
|
||||
@@ -609,6 +632,7 @@ export default defineComponent({
|
||||
scaleImage.value.isLike = false
|
||||
scaleImage.value.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
|
||||
scaleImage.value.productimgSimilarity = productImgData.similarity
|
||||
scaleImage.value.productimgBrightenValue = productImgData.brightenValue
|
||||
scaleImage.value.productimgRelightDirection = RelightDirection.value
|
||||
scaleImage.value.isComparison = true
|
||||
}
|
||||
@@ -665,370 +689,384 @@ export default defineComponent({
|
||||
productimgMenuList,
|
||||
productimgMenu,
|
||||
|
||||
RelightDirectionList,
|
||||
RelightDirection,
|
||||
RelightDirectionList,
|
||||
RelightDirection,
|
||||
|
||||
selectList,
|
||||
likeDesignCollectionList,
|
||||
ExportModel,
|
||||
init,
|
||||
setproduct,
|
||||
cancelDsign,
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
deleteFile,
|
||||
setGenerate,
|
||||
likeFile,
|
||||
setExport,
|
||||
getPrductimg,
|
||||
removeProductimg,
|
||||
scaleImage,
|
||||
setScaleImage,
|
||||
setMenu,
|
||||
setMenuShow,
|
||||
setSimilarity,
|
||||
setTask,
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
selectList,
|
||||
likeDesignCollectionList,
|
||||
ExportModel,
|
||||
init,
|
||||
setproduct,
|
||||
cancelDsign,
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
deleteFile,
|
||||
setGenerate,
|
||||
likeFile,
|
||||
setExport,
|
||||
getPrductimg,
|
||||
removeProductimg,
|
||||
scaleImage,
|
||||
setScaleImage,
|
||||
setMenu,
|
||||
setMenuShow,
|
||||
setSimilarity,
|
||||
setTask,
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
mousewheel:{
|
||||
mounted (el) {
|
||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
||||
let num = 0
|
||||
if(e.deltaY > 0){
|
||||
num = 25
|
||||
}else{
|
||||
num = -25
|
||||
}
|
||||
el.scrollBy(num, 0);
|
||||
},{ passive: true })
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
// moodTemplateId: "", //模板id
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
// init(list:any,index:any,dialogueIndex:any){
|
||||
|
||||
// },
|
||||
// cancelDsign(){
|
||||
// this.productImg = false
|
||||
// // this.productImgList = []
|
||||
// // this.productImgIndex = 0
|
||||
// },
|
||||
// download(){
|
||||
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
||||
// },
|
||||
// setScaleImageIndex(index:any){
|
||||
// // this.productImgIndex = index
|
||||
// // console.log(this.productImgIndex);
|
||||
|
||||
// },
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
// moodTemplateId: "", //模板id
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
// init(list:any,index:any,dialogueIndex:any){
|
||||
|
||||
// },
|
||||
// cancelDsign(){
|
||||
// this.productImg = false
|
||||
// // this.productImgList = []
|
||||
// // this.productImgIndex = 0
|
||||
// },
|
||||
// download(){
|
||||
// // downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
|
||||
// },
|
||||
// setScaleImageIndex(index:any){
|
||||
// // this.productImgIndex = index
|
||||
// // console.log(this.productImgIndex);
|
||||
|
||||
// },
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.productImg_modal {
|
||||
.productImg_page{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
&.productImg_page::-webkit-scrollbar{display: none;}
|
||||
.productImg_page{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
&.productImg_page::-webkit-scrollbar{display: none;}
|
||||
}
|
||||
.productImg_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.modal_title_text{
|
||||
height: 4rem;
|
||||
}
|
||||
.productImg_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.modal_title_text{
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_bottom{
|
||||
height: calc(100% - 4rem - 2.4rem);
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.upload_item{
|
||||
}
|
||||
.productImg_content_bottom{
|
||||
height: calc(100% - 4rem - 2.4rem);
|
||||
--border-color: #c4c4c4;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.upload_item{
|
||||
.productImg_content_item_title_menubtn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.productImg_content_item_title_menubtn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
&.productImg_content_item_title_similarity{
|
||||
// margin-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.productImg_content_item_imgBox{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
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{
|
||||
// margin-bottom: 8rem;
|
||||
.ant-checkbox-wrapper{
|
||||
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{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
// width: 45%;
|
||||
.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;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
.content_item_imgBox_itemImg{
|
||||
display: flex;
|
||||
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;
|
||||
height: 14rem;
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
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%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
.productImg_right_item_imgBox{
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.productImg_left,.productImg_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item:last-child{
|
||||
.productImg_right_item_box:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_left{
|
||||
width: 25%;
|
||||
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%;
|
||||
.productImg_right_titleBtn{
|
||||
display: flex;
|
||||
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>
|
||||
@@ -71,7 +71,20 @@
|
||||
</a-slider> -->
|
||||
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
||||
</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="input_box">
|
||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||
@@ -89,16 +102,16 @@
|
||||
</div>
|
||||
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="scaleImage_nav" @keydown="handleKeyDown">
|
||||
<div class="scaleImage_nav">
|
||||
<div class="nav_left">
|
||||
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
</div>
|
||||
@@ -111,42 +124,46 @@
|
||||
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
|
||||
<a-image
|
||||
:width="200"
|
||||
:style="{ display: 'none' }"
|
||||
:preview="{
|
||||
visible,
|
||||
onVisibleChange: setVisible,
|
||||
}"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<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 domTurnImg from '@/tool/domTurnImg'
|
||||
import { useStore } from "vuex";
|
||||
import { Modal } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
|
||||
export default defineComponent({
|
||||
components:{generalMiniCanvas},
|
||||
props:{
|
||||
productData:{
|
||||
type:Object,
|
||||
default:{
|
||||
similarity:30,
|
||||
brightenValue:1,
|
||||
upload:'',
|
||||
},
|
||||
}
|
||||
},
|
||||
isCanvas:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
workspace:{
|
||||
type:Object,
|
||||
default:{
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props:any,{emit}) {
|
||||
const store = useStore();
|
||||
|
||||
let {t} = useI18n()
|
||||
let productimg = reactive({
|
||||
isProductimg:false,
|
||||
productimgSearchName:'',
|
||||
@@ -154,6 +171,7 @@ export default defineComponent({
|
||||
productimgRemProductimg:false,
|
||||
productimgIsProductimg:false,
|
||||
productimgSimilarity:props.productData.similarity,
|
||||
productimgBrightenValue:props.productData.brightenValue,
|
||||
productimgUpload:props.productData.upload,
|
||||
productimgRelightDirection:props.productData.RelightDirection,
|
||||
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
||||
@@ -187,6 +205,7 @@ export default defineComponent({
|
||||
direction:productimg.productimgRelightDirection,
|
||||
prompt:productimg.productimgSearchName,
|
||||
toProductImageVOList:[obj],
|
||||
brightenValue:productimg.productimgBrightenValue,
|
||||
userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
|
||||
imageStrength:(100 - imageStrength)/100,
|
||||
}
|
||||
@@ -203,6 +222,7 @@ export default defineComponent({
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
isShowMark.value = false
|
||||
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||
let arr:any = []
|
||||
rv.forEach((item:any)=>{
|
||||
arr.push(item.taskId)
|
||||
@@ -269,7 +289,11 @@ export default defineComponent({
|
||||
if(generateProceedList){
|
||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
||||
let str = generateProceedList.join(',')
|
||||
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
||||
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(
|
||||
(rv) => {
|
||||
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 {
|
||||
t,
|
||||
...toRefs(productimg),
|
||||
scaleImage,
|
||||
isShowMark,
|
||||
@@ -293,12 +361,13 @@ export default defineComponent({
|
||||
robotAssits,
|
||||
getPrductimg,
|
||||
removeProductimg,
|
||||
submitBase64Data,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
|
||||
isNext:false
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
@@ -331,26 +400,63 @@ export default defineComponent({
|
||||
this.scaleImage = false
|
||||
this.scaleImageList = []
|
||||
this.scaleImageIndex = 0
|
||||
this.isNext = false
|
||||
document.removeEventListener('keydown',this.setKeydown)
|
||||
},
|
||||
lastStep(){
|
||||
|
||||
if(this.productimgIsProductimg) return
|
||||
if(this.isNext)return
|
||||
let num = this.scaleImageIndex
|
||||
if(this.scaleImageIndex <= 0){
|
||||
}else{
|
||||
this.scaleImageIndex -= 1
|
||||
num -=1
|
||||
this.setImageIndex(num)
|
||||
}
|
||||
},
|
||||
nextStep(){
|
||||
if(this.productimgIsProductimg) return
|
||||
if(this.isNext)return
|
||||
let num = this.scaleImageIndex
|
||||
if(this.scaleImageIndex >= this.scaleImageList.length-1){
|
||||
}else{
|
||||
this.scaleImageIndex += 1
|
||||
num += 1
|
||||
this.setImageIndex(num)
|
||||
}
|
||||
},
|
||||
download(){
|
||||
downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
|
||||
},
|
||||
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){
|
||||
let parent:any = this.$parent
|
||||
@@ -370,8 +476,12 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style>
|
||||
.scaleImage_modal{
|
||||
overflow: visible !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.scaleImage_modal {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
@@ -380,12 +490,14 @@ export default defineComponent({
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: calc(5rem*1.2);
|
||||
height: 75%;
|
||||
// margin-top: calc(5rem*1.2);
|
||||
// height: 75%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.productImg_modal{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
.productImg_left{
|
||||
width: 100%;
|
||||
.productImg_content_item_generate_btn{
|
||||
@@ -398,10 +510,15 @@ export default defineComponent({
|
||||
}
|
||||
.scaleImage_content_imgBox{
|
||||
position: relative;
|
||||
max-width: 70rem;
|
||||
// max-width: 70rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 40rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
display: flex;
|
||||
@@ -427,6 +544,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
.operate_icon{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
@@ -444,7 +562,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
}
|
||||
.scaleImage_content:hover{
|
||||
.scaleImage_content_imgBox:hover{
|
||||
.img_operate_block{
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -456,6 +574,9 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
.nav_left,.nav_right{
|
||||
cursor: pointer;
|
||||
top: 50%;
|
||||
|
||||
@@ -79,9 +79,11 @@ export default defineComponent({
|
||||
transform: translate(-50%,-50%);
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
position: absolute;
|
||||
video{
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -62,12 +62,16 @@
|
||||
</a-select> -->
|
||||
<div>{{ sex.label }}</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="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 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">
|
||||
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
|
||||
</div>
|
||||
@@ -89,7 +93,7 @@
|
||||
<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 :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="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
@@ -142,6 +146,7 @@ import { VueCropper } from "vue-cropper";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
@@ -184,7 +189,8 @@ export default defineComponent({
|
||||
sexList,
|
||||
cropperTime,
|
||||
|
||||
t
|
||||
t,
|
||||
getMousePosition
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -209,17 +215,22 @@ export default defineComponent({
|
||||
autoCropWidth: '0', //默认生成截图框宽度
|
||||
autoCropHeight: '0', //默认生成截图框高度
|
||||
fixed: true, //是否开启截图框宽高固定比例
|
||||
// fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用
|
||||
fixedBox: true, //固定截图框大小，不允许改变
|
||||
fixedNumber: [1, 2.125], //截图框的宽高比例
|
||||
full: false, //false按原比例裁切图片，不失真
|
||||
// full: true, //false按原比例裁切图片，不失真
|
||||
full: false, //false按原比例裁切图片，不失真//上传模特使用
|
||||
// canMove: false, //上传图片是否可以移动//上传系统模特使用
|
||||
canMove: true, //上传图片是否可以移动
|
||||
canMoveBox: false, //截图框能否拖动
|
||||
original: false, //上传图片按照原始比例渲染
|
||||
centerBox: false, //截图框是否被限制在图片里面
|
||||
height: true, //是否按照设备的dpr 输出等比例图片
|
||||
// infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||
maxImgSize:'2000', //限制图片最大宽度和高度
|
||||
enlarge: 7, //图片根据截图框输出比例倍数
|
||||
enlarge: 1, //图片根据截图框输出比例倍数
|
||||
// enlarge: 7, //图片根据截图框输出比例倍数
|
||||
mode: 'auto 90%', //图片默认渲染方式
|
||||
limitMinSize:'100%',
|
||||
imgLoad:()=>{
|
||||
@@ -271,7 +282,8 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
// 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()
|
||||
})
|
||||
},800)
|
||||
@@ -429,7 +441,14 @@ export default defineComponent({
|
||||
changeRemoveStatus(){
|
||||
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){
|
||||
if(this.isRemoveStatus){
|
||||
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.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
document.addEventListener('touchend', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
|
||||
@@ -513,6 +533,9 @@ export default defineComponent({
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
document.removeEventListener('touchend', this.getMouseOver);
|
||||
document.removeEventListener('mousemove',this.mouseMove)
|
||||
document.removeEventListener('touchmove',this.touchmove)
|
||||
},
|
||||
|
||||
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(){
|
||||
let modelType = 'Library'
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
modelType = this.modelType
|
||||
}
|
||||
let param = {
|
||||
libraryId:this.printObject.id,
|
||||
templateId:this.printObject.templateId || null,
|
||||
modelType:'Library',
|
||||
modelType:modelType,
|
||||
modelSex:this.sex,
|
||||
checkMd5:1,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...await this.getPrintLocation()
|
||||
}
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
param.modelType = this.modelType
|
||||
}
|
||||
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||
@@ -630,19 +658,19 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
customRequest(){
|
||||
let modelType = 'Library'
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
modelType = this.modelType
|
||||
}
|
||||
let new_data = {
|
||||
file:this.printObject.file,
|
||||
level1Type:'Models',
|
||||
level2Type:'',
|
||||
checkMd5:1,
|
||||
sex:this.sex,
|
||||
modelType:'Library',
|
||||
modelType:modelType,
|
||||
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
|
||||
return new Promise((resolve,reject)=>{
|
||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
@@ -688,20 +716,22 @@ export default defineComponent({
|
||||
},
|
||||
async getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 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 returnData:any = {}
|
||||
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
|
||||
//进行字段归类
|
||||
for(let item of newLocationList){
|
||||
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{
|
||||
@@ -1069,7 +1118,7 @@ export default defineComponent({
|
||||
.vue-cropper{
|
||||
.cropper-crop-box{
|
||||
background: #fff;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<div class="models_placement_content">
|
||||
<div class="plcaement_point_content">
|
||||
<div class="select_block">
|
||||
<a-select
|
||||
<!-- <a-select
|
||||
ref="select"
|
||||
v-model:value="sex.value"
|
||||
:options="sexList"
|
||||
@@ -59,12 +59,13 @@
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</a-select> -->
|
||||
<div>{{ sex.label }}</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="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 class="placement_point_item placement_point_scale">
|
||||
@@ -92,7 +93,7 @@
|
||||
<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 :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="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
@@ -145,6 +146,7 @@ import { VueCropper } from "vue-cropper";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
@@ -168,32 +170,7 @@ export default defineComponent({
|
||||
|
||||
])
|
||||
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()
|
||||
return {
|
||||
store,
|
||||
@@ -211,8 +188,9 @@ export default defineComponent({
|
||||
sex,
|
||||
sexList,
|
||||
cropperTime,
|
||||
option,
|
||||
t
|
||||
|
||||
t,
|
||||
getMousePosition
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -226,21 +204,48 @@ export default defineComponent({
|
||||
perviewUrl:'',//预览的图片地址
|
||||
isShowMark:false,
|
||||
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(){
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
// this.getSex()
|
||||
this.option.imgLoad = ()=>{
|
||||
this.setImageSize()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
showPlacementModal(data:any,sex:any){
|
||||
// this.sex = arr[0].value
|
||||
this.sex = sex
|
||||
this.placementShow = true
|
||||
this.printObject = {
|
||||
@@ -250,6 +255,8 @@ export default defineComponent({
|
||||
|
||||
setTimeout(()=>{
|
||||
nextTick().then(()=>{
|
||||
let image:any = new Image()
|
||||
image.src = this.option.img
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-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.addEventListener('touchmove',this.startMove)
|
||||
imgBoxSize.addEventListener('mousemove',this.mouseMove)
|
||||
imgBoxSize.addEventListener('touchmove',this.touchmove)
|
||||
this.setImageSize()
|
||||
})
|
||||
},800)
|
||||
@@ -288,26 +296,32 @@ export default defineComponent({
|
||||
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
|
||||
cropper.cropOffsertY = cropper.getImgAxis().y1
|
||||
}
|
||||
|
||||
},
|
||||
realTime(data:any) {
|
||||
this.cropperTime = setTimeout(()=>{
|
||||
this.setImageSize()
|
||||
clearTimeout(this.cropperTime)
|
||||
},100)
|
||||
let cropper:any = this.$refs.cropper
|
||||
// if(cropper.h == cropper.cropH){
|
||||
this.cropperTime = setTimeout(()=>{
|
||||
this.setImageSize()
|
||||
clearTimeout(this.cropperTime)
|
||||
|
||||
},100)
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
setImageSize(){
|
||||
this.setCropperWH()
|
||||
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 position1 = imgbox.getBoundingClientRect()
|
||||
let cropper:any = this.$refs.cropper
|
||||
this.imgBox = {
|
||||
width:cropper.cropW,
|
||||
height:cropper.cropH,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
left : position1.left,
|
||||
top:position1.top,
|
||||
scrollTop:imgBoxSize.scrollTop || 0,
|
||||
x:cropper.getCropAxis().x1,
|
||||
y:cropper.getCropAxis().y1,
|
||||
@@ -323,7 +337,6 @@ export default defineComponent({
|
||||
label:item.value,
|
||||
})
|
||||
});
|
||||
// this.sex = arr[0].value
|
||||
this.sexList = arr
|
||||
}
|
||||
})
|
||||
@@ -425,31 +438,40 @@ export default defineComponent({
|
||||
changeRemoveStatus(){
|
||||
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){
|
||||
if(this.isRemoveStatus){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(event.targetTouches[0].pageX > this.imgBox.left){
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
|
||||
this.currentSign.color = this.intObj.color
|
||||
this.currentSign.type= this.intObj.type
|
||||
this.currentSign.field = this.intObj.field
|
||||
this.locationList.push(this.currentSign)
|
||||
this.intObj.show = false
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12
|
||||
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12
|
||||
document.addEventListener('touchend', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||
let scrollTop = imgBoxSize.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.currentSign.color = this.intObj.color
|
||||
this.currentSign.type= this.intObj.type
|
||||
this.currentSign.field = this.intObj.field
|
||||
this.locationList.push(this.currentSign)
|
||||
this.intObj.show = false
|
||||
this.intObj = null
|
||||
}else{
|
||||
//鼠标移动
|
||||
if(this.startDian){
|
||||
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
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
document.addEventListener('touchend', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -496,8 +518,9 @@ export default defineComponent({
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
// this.moveOriginal.posX = event.offsetX
|
||||
// this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
|
||||
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
|
||||
this.moveOriginal.posX = 0
|
||||
this.moveOriginal.posY = 0 // 1为边框
|
||||
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
@@ -506,7 +529,10 @@ export default defineComponent({
|
||||
getMouseOver(){//鼠标抬起
|
||||
this.startDian = false
|
||||
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(){
|
||||
@@ -546,6 +572,7 @@ export default defineComponent({
|
||||
this.locationList = []
|
||||
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
// this.locationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
@@ -558,7 +585,7 @@ export default defineComponent({
|
||||
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
||||
// })
|
||||
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.printObject.templateId){
|
||||
this.printObject.id = this.printObject.relationId
|
||||
@@ -599,20 +626,20 @@ export default defineComponent({
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.changeScale(num);
|
||||
},
|
||||
confrimSubmit(){
|
||||
|
||||
async confrimSubmit(){
|
||||
let modelType = 'Library'
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
modelType = this.modelType
|
||||
}
|
||||
let param = {
|
||||
libraryId:this.printObject.id,
|
||||
templateId:this.printObject.templateId || null,
|
||||
modelType:'Library',
|
||||
modelType:modelType,
|
||||
modelSex:this.sex,
|
||||
checkMd5:1,
|
||||
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
|
||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||
@@ -628,19 +655,19 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
customRequest(){
|
||||
let modelType = 'Library'
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
modelType = this.modelType
|
||||
}
|
||||
let new_data = {
|
||||
file:this.printObject.file,
|
||||
level1Type:'Models',
|
||||
level2Type:'',
|
||||
checkMd5:1,
|
||||
sex:this.sex,
|
||||
modelType:'Library',
|
||||
modelType:modelType,
|
||||
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
|
||||
return new Promise((resolve,reject)=>{
|
||||
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
|
||||
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 returnData:any = {}
|
||||
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
|
||||
//进行字段归类
|
||||
for(let item of newLocationList){
|
||||
locationData[item.field] = locationData[item.field] || []
|
||||
@@ -703,6 +745,8 @@ export default defineComponent({
|
||||
returnData[v.type] = [v.left, v.top]
|
||||
});
|
||||
}
|
||||
console.log(returnData);
|
||||
|
||||
return returnData
|
||||
},
|
||||
|
||||
@@ -712,17 +756,17 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
|
||||
printPreview(){
|
||||
async printPreview(){
|
||||
let file = this.printObject.templateId ? null :this.printObject.file,
|
||||
models = {
|
||||
libraryId:this.printObject.relationId || null,
|
||||
templateId:this.printObject.templateId || null,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
sex:this.sex,
|
||||
...this.getPrintLocation()
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...await this.getPrintLocation()
|
||||
}
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.getCropData((value:any)=>{
|
||||
let cropper:any = this.$refs.cropper
|
||||
await cropper.getCropData((value:any)=>{
|
||||
file = base64toFile(value,this.printObject.name);
|
||||
file.uid = this.printObject.file?.uid?this.printObject.file.uid:''
|
||||
let formData = new FormData();
|
||||
@@ -731,7 +775,7 @@ export default defineComponent({
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
// this.isShowMark = true
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
@@ -741,6 +785,8 @@ export default defineComponent({
|
||||
this.isShowMark = false
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
@@ -788,7 +834,7 @@ export default defineComponent({
|
||||
.models_placement_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
@@ -850,7 +896,6 @@ export default defineComponent({
|
||||
padding: 3rem 2.7rem 0 1.4rem;
|
||||
.select_block{
|
||||
// background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
margin-bottom: 3rem;
|
||||
color: #1A1A1A !important;
|
||||
.ant-select{
|
||||
@@ -881,7 +926,6 @@ export default defineComponent({
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
|
||||
.placement_point_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -959,7 +1003,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:18.4rem;
|
||||
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
@@ -1021,7 +1065,7 @@ export default defineComponent({
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
height: 57.6rem;
|
||||
.img_content_block{
|
||||
.img_content_block{
|
||||
width: 40.8rem;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
@@ -1075,7 +1119,7 @@ export default defineComponent({
|
||||
.vue-cropper{
|
||||
.cropper-crop-box{
|
||||
background: #fff;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1095,7 +1139,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
@@ -466,6 +466,9 @@ export default defineComponent({
|
||||
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
if(rv.systemUser == 4){
|
||||
rv.systemUser = 1
|
||||
}
|
||||
this.createTimer();
|
||||
let isTest = rv.systemUser == 3?true:false
|
||||
let isBeginner = rv.isBeginner == 1?true:false
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<div id="app">
|
||||
<div class="captcha">
|
||||
<input v-for="(c, index) in getCtData" :key="index"
|
||||
type="number"
|
||||
v-model="getCtData[index]" ref="input"
|
||||
@input="e => {onInput(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 gap_x = remain / (num_x + 1);
|
||||
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;
|
||||
var poss = [];
|
||||
for (var i = 0; i < num_x; i++) poss.push(0);
|
||||
@@ -343,6 +343,8 @@ export default defineComponent({
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@@ -373,11 +375,15 @@ export default defineComponent({
|
||||
}
|
||||
.falls_item_detail{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
width: 20%;
|
||||
// width: 40%;
|
||||
// width: 20%;
|
||||
// width: 7rem;
|
||||
width: 70px;
|
||||
// width: 70px;
|
||||
width: auto;
|
||||
justify-content: space-between;
|
||||
>label:nth-child(1){
|
||||
margin-right: 2rem;
|
||||
}
|
||||
>label{
|
||||
// cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -49,11 +49,16 @@
|
||||
</div> -->
|
||||
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
||||
<div class="detail_right_user detail_left_right_item">
|
||||
<!-- <div class="detail_right_user_head">
|
||||
<img v-lazy="scaleImageData?.imgUrl">
|
||||
</div> -->
|
||||
<div class="detail_right_user_head" @click="openOtherUsers">
|
||||
<img v-lazy="scaleImageData?.avatar">
|
||||
|
||||
</div>
|
||||
<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-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>
|
||||
@@ -267,7 +272,7 @@ import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components:{fullScreenImg},
|
||||
emits:['deletePorfolio','bbb'],
|
||||
emits:['deletePorfolio'],
|
||||
setup(props:any,{emit}) {
|
||||
let {t} = useI18n()
|
||||
//首先在setup中定义
|
||||
@@ -344,7 +349,6 @@ export default defineComponent({
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
let getDeatilData = {}
|
||||
let originalGetDetail = ()=>{
|
||||
if(imgData.scaleImageData.jumpable != 1){
|
||||
return message.info(t('newScaleImage.jsContent6'))
|
||||
@@ -353,8 +357,10 @@ export default defineComponent({
|
||||
}
|
||||
let getDetail = (value:any,str:string)=>{
|
||||
imgData.loadingShow = true
|
||||
let data = value
|
||||
getDeatilData = value
|
||||
// let data = value
|
||||
let data = {
|
||||
id:value.id
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
|
||||
(rv: any) => {
|
||||
imgData.loadingShow = false
|
||||
@@ -489,7 +495,6 @@ export default defineComponent({
|
||||
imgData.scaleImageData.likeNum += 1
|
||||
imgData.scaleImageData.isLike = 1
|
||||
}
|
||||
// getDetail(getDeatilData,'zan')
|
||||
})
|
||||
.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,
|
||||
(newVal,oldVal)=>{
|
||||
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
|
||||
@@ -585,6 +611,8 @@ export default defineComponent({
|
||||
setComment,
|
||||
setPortfolioLike,
|
||||
setDeleteComment,
|
||||
setFollow,
|
||||
openOtherUsers,
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
@@ -725,6 +753,7 @@ export default defineComponent({
|
||||
font-size: 1.6rem;
|
||||
font-weight: 300;
|
||||
color: #535353;
|
||||
text-align: left;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
@@ -758,6 +787,7 @@ export default defineComponent({
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
.scaleImage_chunk_title_Original{
|
||||
color: #39215b;
|
||||
background: #c9a2ff;
|
||||
@@ -774,14 +804,21 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.started_btn{
|
||||
margin-top: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
.detail_right_user_head{
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: var(--margin);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
@@ -1187,7 +1224,7 @@ export default defineComponent({
|
||||
.detail_right_work_detail{
|
||||
.scaleImage_chunk_title_intro{
|
||||
margin-top: calc(var(--padding) / 2);
|
||||
height: auto
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -31,11 +31,16 @@
|
||||
</div> -->
|
||||
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
||||
<div class="detail_right_user detail_left_right_item">
|
||||
<!-- <div class="detail_right_user_head">
|
||||
<img v-lazy="scaleImageData?.imgUrl">
|
||||
</div> -->
|
||||
<div class="detail_right_user_head">
|
||||
<img v-lazy="scaleImageData?.avatar">
|
||||
</div>
|
||||
<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-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>
|
||||
@@ -716,6 +721,7 @@ export default defineComponent({
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
.scaleImage_chunk_title_Original{
|
||||
color: #39215b;
|
||||
background: #c9a2ff;
|
||||
@@ -732,16 +738,18 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail_right_user_head{
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: var(--margin);
|
||||
flex-shrink: 0;
|
||||
img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
.detail_right_user_head:hover{
|
||||
|
||||
|
||||
@@ -33,6 +33,9 @@
|
||||
<div class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
|
||||
<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 class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
|
||||
@@ -260,7 +263,6 @@ export default defineComponent({
|
||||
}
|
||||
let pushTag = (tag:any,index:number)=>{
|
||||
// let selectTag = tagList.value.splice(index,1)[0]
|
||||
// selectTagList.value.push(selectTag)
|
||||
// if(tag.tag == 'RCAworkshop_2024'){
|
||||
// publishData.subPublishDate.portfolioDes = '#AiDA x RCA workshop '
|
||||
// }
|
||||
@@ -311,7 +313,23 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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{
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
@@ -342,6 +360,32 @@ export default defineComponent({
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
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{
|
||||
|
||||
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:'历史',
|
||||
WORKS:'作品广场',
|
||||
EVENTS:'活动',
|
||||
personal:'个人中心',
|
||||
bindEmail:'绑定邮箱',
|
||||
logOff:'退出登录',
|
||||
Tutorial:'教程',
|
||||
@@ -47,7 +48,7 @@ export default {
|
||||
CanvasSize:'画布大小',
|
||||
Height:'高',
|
||||
Width:'宽',
|
||||
CanvasNav:'缩略图',
|
||||
CanvasNav:'系列',
|
||||
CanvasTool:'画布工具',
|
||||
Color:'颜色',
|
||||
Size:'大小',
|
||||
@@ -65,6 +66,8 @@ export default {
|
||||
requiresCredits:'执行超分的图片需要消耗{data}积分',
|
||||
Scale:'倍率',
|
||||
Cancel:'取消',
|
||||
size:'区域',
|
||||
density:'强度',
|
||||
jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
|
||||
jsContent2:'我们只支持对印花进行超分',
|
||||
jsContent3:'您的积分小于一次超分',
|
||||
@@ -72,7 +75,9 @@ export default {
|
||||
jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
|
||||
jsContent6:'请选择需要超分的图片',
|
||||
jsContent7:'保存成功~',
|
||||
jsContent8:'是否需要自动裁剪画布多余空间',
|
||||
jsContent8:'是否继续编辑',
|
||||
jsContent9:'是否需要自动裁剪画布多余空间',
|
||||
jsContent10:'请选择一张图片后再次尝试',
|
||||
},
|
||||
upgradePlan:{
|
||||
BuyCredlts:'购买积分',
|
||||
@@ -159,6 +164,7 @@ export default {
|
||||
Upload:'上传',
|
||||
MagicTools:'转换产品图工具',
|
||||
Similarity:'相似度',
|
||||
Highlight:'高亮',
|
||||
RelightDirection:'打光方向',
|
||||
GenerateProduct:'生成的产品',
|
||||
SelectedProduct:'选择的产品',
|
||||
@@ -297,6 +303,7 @@ export default {
|
||||
Thumbnail:'选择的线稿',
|
||||
inputContent1:'生成图片的标题',
|
||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
||||
GenerateSketch:'生成线稿',
|
||||
jsContent1:"上传失败",
|
||||
jsContent2:"您只能上传图片文件！",
|
||||
jsContent3:'图片必须小于5MB',
|
||||
@@ -338,7 +345,7 @@ export default {
|
||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
||||
SelectSuccessivelyOffTitle:'连续选色模式关闭.',
|
||||
SelectSeparately:'单选',
|
||||
ExtractColor:'提取颜色',
|
||||
ExtractColor:'提取',
|
||||
Single:'单色',
|
||||
Gradual:'渐变',
|
||||
Alignment:'线性',
|
||||
@@ -412,6 +419,9 @@ export default {
|
||||
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
||||
Model:'模型',
|
||||
uploadTitle:'上传参考图',
|
||||
uploadproduct:'上传产品图',
|
||||
style:'风格',
|
||||
referenceImage:'参考图',
|
||||
sloganTitle:'输入文字内容',
|
||||
jsContent1:"您只能上传图片文件！",
|
||||
jsContent2:'图片必须小于5MB',
|
||||
@@ -522,6 +532,7 @@ export default {
|
||||
Publish:'发布',
|
||||
CoverPicture:'封面图',
|
||||
CollectionTitle:'系列名字',
|
||||
topic:'话题',
|
||||
Description:'描述',
|
||||
Permissions:'权限',
|
||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
||||
@@ -535,6 +546,8 @@ export default {
|
||||
newScaleImage:{
|
||||
Collection:'系列',
|
||||
SecondaryCreation:'二次创作',
|
||||
Follow:'关注',
|
||||
Unfollow:'取关',
|
||||
CreationTime:'创建时间',
|
||||
UpdateTime:'更新时间',
|
||||
Comment:'评论',
|
||||
@@ -556,6 +569,37 @@ export default {
|
||||
jsContent5:'是否删除当前作品',
|
||||
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:{
|
||||
guide1:"在<strong>工作空间</strong>中，您可以个性化您的设计设置，包括选择适用于男装或女装的设计，以及选择用于创作的人体模型。",
|
||||
guide2:"选择您要设计的服装性别。",
|
||||
|
||||
@@ -6,6 +6,7 @@ export default {
|
||||
HISTORY:'HISTORY',
|
||||
WORKS:'GALLERY',
|
||||
EVENTS:'EVENTS',
|
||||
personal:'Personal Center',
|
||||
bindEmail:'bind email',
|
||||
logOff:'log off',
|
||||
Tutorial:'Tutorial',
|
||||
@@ -39,7 +40,6 @@ export default {
|
||||
createTime:'Create Time',
|
||||
},
|
||||
payOrder:{
|
||||
|
||||
OrderInformation:'Order Information',
|
||||
CreditsInformation:'Credits Information',
|
||||
},
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
CanvasSize:'Canvas Size',
|
||||
Height:'Height',
|
||||
Width:'Width',
|
||||
CanvasNav:'Canvas Nav',
|
||||
CanvasNav:'Collection',
|
||||
CanvasTool:'Canvas Tool',
|
||||
Color:'Color',
|
||||
Size:'Size',
|
||||
@@ -66,6 +66,8 @@ export default {
|
||||
requiresCredits:'Performing upscale image requires a {data} credits',
|
||||
Scale:'Scale',
|
||||
Cancel:'Cancel',
|
||||
size:'Size',
|
||||
density:'Density',
|
||||
jsContent1:"Have you saved your canvas content? If not, please click 'Save' before closing.",
|
||||
jsContent2:'We only provide super-resolution capabilities for printboard images.',
|
||||
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.',
|
||||
jsContent6:'Please select the picture that requires upscale',
|
||||
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:{
|
||||
BuyCredlts:'Buy credits',
|
||||
@@ -159,6 +163,7 @@ export default {
|
||||
SelectCollection:'Select Collection',
|
||||
Upload:'Upload',
|
||||
Similarity:'Similarity',
|
||||
Highlight:'Highlight',
|
||||
RelightDirection:'Relight Direction',
|
||||
MagicTools:'To Product lmage Tool',
|
||||
GenerateProduct:'Generate Product',
|
||||
@@ -298,6 +303,7 @@ export default {
|
||||
Thumbnail:'Selected sketchboard',
|
||||
inputContent1:'Input prompt',
|
||||
maximumLength:'The entered content exceeds the maximum length.',
|
||||
GenerateSketch:'Generate Sketch',
|
||||
jsContent1:"upload failed",
|
||||
jsContent2:"You can only upload Image file!",
|
||||
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.',
|
||||
Model:'Model',
|
||||
uploadTitle:'Upload reference image',
|
||||
uploadproduct:'Upload product picture',
|
||||
style:'Style',
|
||||
referenceImage:'Reference Image',
|
||||
sloganTitle:'Input text content',
|
||||
jsContent1:"You can only upload Image file!",
|
||||
jsContent2:'Image must smaller than 5MB!',
|
||||
@@ -497,7 +506,7 @@ export default {
|
||||
inputContent:'Please input',
|
||||
preview:'Preview',
|
||||
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:{
|
||||
jsContent1:'You can select up to {maxImg} images',
|
||||
@@ -515,7 +524,7 @@ export default {
|
||||
},
|
||||
works:{
|
||||
all:'All',
|
||||
FavoriteWorks:'Favorite Works',
|
||||
FavoriteWorks:'Like Works',
|
||||
MyWorks:'My Works',
|
||||
RCAworkshop_2024:'AiDA Workshop 2024',
|
||||
},
|
||||
@@ -523,6 +532,7 @@ export default {
|
||||
Publish:'Publish',
|
||||
CoverPicture:'Cover Picture',
|
||||
CollectionTitle:'Collection Title',
|
||||
topic:'Topic',
|
||||
Description:'Description',
|
||||
Permissions:'Permissions',
|
||||
PermissionsItem1:'Allow other users to perform secondary creation.',
|
||||
@@ -536,6 +546,8 @@ export default {
|
||||
newScaleImage:{
|
||||
Collection:'Collection',
|
||||
SecondaryCreation:'Secondary Creation',
|
||||
Follow:'Follow',
|
||||
Unfollow:'Unfollow',
|
||||
CreationTime:'CreationTime',
|
||||
UpdateTime:'UpdateTime',
|
||||
Comment:'Comment',
|
||||
@@ -557,6 +569,47 @@ export default {
|
||||
jsContent5:'Whether to delete the current gallery',
|
||||
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:{
|
||||
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.",
|
||||
|
||||
@@ -24,6 +24,9 @@ const app = createApp(App);
|
||||
flexible()
|
||||
|
||||
import { getCookie, setCookie } from "@/tool/cookie";
|
||||
document.addEventListener('touchstart', function(event) {
|
||||
event.preventDefault(); // 阻止长按选中
|
||||
});
|
||||
let loadingParam = {
|
||||
loading: require('./assets/images/homePage/loading.gif'),
|
||||
attempt: 1
|
||||
|
||||
@@ -69,6 +69,41 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path:'eventsDetail',
|
||||
name:'eventsDetail',
|
||||
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',
|
||||
component: _import('feedbackSurveyCN'),
|
||||
},
|
||||
{
|
||||
path: '/emailVerify',
|
||||
name: 'emailVerify',
|
||||
component: _import('emailVerify'),
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
component: _import('404')
|
||||
},
|
||||
{
|
||||
path: "/:catchAll(.*)",
|
||||
redirect: "/404",
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
@@ -221,15 +266,24 @@ const router = createRouter({
|
||||
// 刷新保存数据-
|
||||
let state:any = store.state
|
||||
window.addEventListener("beforeunload", (e) => {
|
||||
sessionStorage.setItem(
|
||||
localStorage.setItem(
|
||||
"vuex_setSystemUser",
|
||||
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) {
|
||||
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)=> {
|
||||
@@ -264,7 +318,7 @@ let setMurmur = (id:any)=> {
|
||||
}
|
||||
|
||||
router.beforeEach((to:any, from, next) => {
|
||||
let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN']//指定页面系统维护也可以访问
|
||||
let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN','emailVerify']//指定页面系统维护也可以访问
|
||||
|
||||
// 系统维护
|
||||
const toName = to.name === 'upgrade';
|
||||
@@ -323,30 +377,27 @@ router.beforeEach((to:any, from, next) => {
|
||||
}
|
||||
return
|
||||
}
|
||||
if (routeExists) {//检测档期那页面是否存在
|
||||
if (isMurmur && murmurStr && token) {
|
||||
const toName = to.name === 'login';
|
||||
if (toName) {
|
||||
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();
|
||||
}
|
||||
// 如果页面存在，正常跳转
|
||||
}
|
||||
if (isMurmur && murmurStr && token) {
|
||||
const toName = to.name === 'login';
|
||||
if (toName) {
|
||||
return next({ name: '/home' });//机房用户
|
||||
}
|
||||
} else {
|
||||
// 如果页面不存在，可以跳转到404页面或者其他页面
|
||||
next('/404');
|
||||
if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
|
||||
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,
|
||||
designId:any,
|
||||
showSketchList:any,
|
||||
|
||||
}
|
||||
|
||||
const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||
@@ -83,8 +82,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
||||
state.templateId= ''
|
||||
state.templateImgUrl = ''
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
@@ -6,6 +6,7 @@ import GO from '@/tool/GO';
|
||||
interface UploadFiles{
|
||||
moodboard:any,
|
||||
disposeMoodboard:any,
|
||||
moodboardPosition:any,
|
||||
moodboardFiles:any,
|
||||
moodboardGenerateFiles:any,
|
||||
moodboardMaterialFiles:any,
|
||||
@@ -29,6 +30,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
state:{
|
||||
moodboard:[],
|
||||
disposeMoodboard:[],
|
||||
moodboardPosition:{},
|
||||
moodboardFiles:[],
|
||||
moodboardGenerateFiles:[],
|
||||
moodboardMaterialFiles:[],
|
||||
@@ -56,6 +58,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
},
|
||||
setDisposeMoodboard(state,files){
|
||||
state.disposeMoodboard = [files]
|
||||
},
|
||||
setDisposeMoodboardPosition(state,files){
|
||||
state.moodboardPosition = files
|
||||
console.log(state.moodboardPosition);
|
||||
|
||||
},
|
||||
setMoodboardGenerateFiles(state,files){
|
||||
state.moodboardGenerateFiles = files
|
||||
@@ -198,6 +205,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
setAllBoardData(state){
|
||||
state.allBoardData = {
|
||||
disposeMoodboard:state.disposeMoodboard,
|
||||
moodboardPosition:state.moodboardPosition,
|
||||
moodboardFiles:state.moodboard,
|
||||
printboardFiles:state.printboard,
|
||||
colorBoards:state.colorBoards,
|
||||
@@ -233,6 +241,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
state.moodTemplateId = ''
|
||||
state.disposeMoodboard = []
|
||||
// state.showSketchboard = []
|
||||
state.chooseIsDesign.value = true
|
||||
},
|
||||
clearAllId(state){
|
||||
state.moodboard.forEach((v:any) => {
|
||||
@@ -250,6 +259,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
},
|
||||
clearMoodTemplateId(state){
|
||||
state.disposeMoodboard = []
|
||||
state.moodboardPosition = {}
|
||||
},
|
||||
},
|
||||
actions:{
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {Module} from 'vuex'
|
||||
import {RootState} from '../index'
|
||||
import { Https } from "@/tool/https";
|
||||
import store from '../index'
|
||||
interface UserHabit{
|
||||
clothingType:any,
|
||||
credits:any,
|
||||
@@ -13,7 +14,12 @@ interface UserHabit{
|
||||
FemalePosition:any,
|
||||
MalePosition:any,
|
||||
Position:any,
|
||||
SketchGenerateType:any,
|
||||
SketchStyle:any,
|
||||
systemUser:any,
|
||||
userInfo:any,
|
||||
messageSystem:any,
|
||||
sex:any,
|
||||
}
|
||||
|
||||
const userHabit : Module<UserHabit,RootState> = {
|
||||
@@ -35,11 +41,21 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
designElementsType:[],
|
||||
FemalePosition:[],
|
||||
MalePosition:[],
|
||||
SketchGenerateType:[],
|
||||
Position:[],
|
||||
SketchStyle:[],
|
||||
systemUser:{
|
||||
value : -1
|
||||
},
|
||||
userInfo:{
|
||||
|
||||
},
|
||||
messageSystem:{
|
||||
messageNum:0,
|
||||
messageType:{},
|
||||
},
|
||||
sex:{
|
||||
},
|
||||
},
|
||||
mutations:{
|
||||
res_clothingType(state,data){
|
||||
@@ -57,6 +73,12 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
setFemalePosition(state,data){
|
||||
state.FemalePosition = data
|
||||
},
|
||||
setSketchGenerateType(state,data){
|
||||
state.SketchGenerateType = data
|
||||
},
|
||||
setSketchStyle(state,data){
|
||||
state.SketchStyle = data
|
||||
},
|
||||
setMalePosition(state,data){
|
||||
state.MalePosition = data
|
||||
},
|
||||
@@ -70,9 +92,54 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
setSystemUser(state,data){
|
||||
state.systemUser.value = data
|
||||
},
|
||||
setUserInfo(state,data){
|
||||
if(!data)return
|
||||
for (const key in data) {
|
||||
state.userInfo[key] = data[key]
|
||||
}
|
||||
},
|
||||
clearSystemUser(state){
|
||||
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:{
|
||||
@@ -105,7 +172,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
},
|
||||
async getLangType(context){
|
||||
let allPromise = [];
|
||||
let getList = ['DesignElementsEnum','PrintboardLevel2TypeEnum','FemalePosition','MalePosition']
|
||||
let getList = ['DesignElementsEnum','PrintboardLevel2TypeEnum','FemalePosition','MalePosition','SketchStyle','SketchGenerateType','Sex']
|
||||
let axiosGet = (item:any)=>{
|
||||
return new Promise((resolve) => {
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:item}}).then((rv: any) => {
|
||||
@@ -114,6 +181,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
let name = item.name
|
||||
item.name = item.value
|
||||
item.value = name
|
||||
item.optype = false
|
||||
});
|
||||
if(item == 'DesignElementsEnum'){
|
||||
context.commit('setDesignElementsType',rv)
|
||||
@@ -124,6 +192,12 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
}else if(item == 'MalePosition'){
|
||||
context.commit('setMalePosition',rv)
|
||||
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('')
|
||||
}
|
||||
|
||||
@@ -295,6 +295,102 @@ function JSSetRemoveImage(fun){
|
||||
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 {
|
||||
multiselectJS,
|
||||
JSRectUpdata,
|
||||
@@ -304,5 +400,7 @@ export {
|
||||
JScreateCheck,
|
||||
exportSele,
|
||||
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()
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user