From 3b224cf41bf82f12eef5683aaa9dde601edcd5ec Mon Sep 17 00:00:00 2001 From: lhmin0604 Date: Sat, 12 Sep 2026 19:10:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(diy):=20=E8=B4=B4=E7=BA=B8=E5=B0=BA?= =?UTF-8?q?=E5=AF=B8=E5=BD=92=E4=B8=80=E5=8C=96=E7=94=BB=E5=B8=83=E7=A9=BA?= =?UTF-8?q?=E9=97=B4=20+=20=E5=9D=90=E6=A0=87=E9=92=B3=E5=88=B6=20+=20?= =?UTF-8?q?=E6=97=A7=E6=95=B0=E6=8D=AE=E8=AF=BB=E7=AB=AF=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修正工作流批次②（问题1 重叠误报）： - addSticker 按 mask 短边 60% 归一化 width/height（契约实现注记： width/height 语义 = 画布显示像素），渲染/碰撞/WCD 三方自洽 - 拖动与缩放后坐标钳制在 [0, mask尺寸-显示尺寸]，杜绝负坐标/拖出画布 - 读取端兼容：旧数据 width > mask 尺寸时按 mask 等比归一化（不做存量迁移） - canvas-image/preview-image 补 transform-origin: top left， 缩放原点与碰撞盒（左上角）语义一致 Co-Authored-By: Claude --- dist/pages/diy/index.js | 2 +- dist/pages/diy/index.wxss | 2 +- src/pages/diy/index.scss | 3 ++ src/pages/diy/index.tsx | 63 ++++++++++++++++++++++++++++++--------- 4 files changed, 54 insertions(+), 16 deletions(-) diff --git a/dist/pages/diy/index.js b/dist/pages/diy/index.js index ce37ea0..78ea860 100644 --- a/dist/pages/diy/index.js +++ b/dist/pages/diy/index.js @@ -1 +1 @@ -"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[95],{8955:function(e,s,a){var t=a(7842),n=a(1212),i=a(467),c=a(9379),r=a(436),o=a(5544),d=a(118),l=a(758),u=a.n(l),h=a(6540),m=a(5234),p=a(1457),g=a(6845),f=a(9703),x=a(9201),v=a(5414),j=a(9674),N=a(3053),y=a(9513),S=a(4848);function w(){var e=(0,f.wR)(),s=(e.theme,e.resolvedTheme),a=(0,x.c)();(0,v.l)(s);var t=(0,h.useState)(null),l=(0,o.A)(t,2),w=l[0],k=l[1],A=(0,h.useState)(1),b=(0,o.A)(A,2),D=(b[0],b[1],(0,h.useState)("")),T=(0,o.A)(D,2),E=T[0],Y=T[1],I=(0,h.useState)(1),P=(0,o.A)(I,2),O=P[0],_=P[1],F=(0,h.useState)([]),R=(0,o.A)(F,2),M=R[0],B=R[1],q=(0,h.useState)(null),z=(0,o.A)(q,2),V=z[0],C=z[1],H=(0,h.useState)(!1),J=(0,o.A)(H,2),X=J[0],G=J[1],L=(0,h.useState)({x:0,y:0}),K=(0,o.A)(L,2),Q=K[0],U=K[1],W=(0,h.useState)(!1),Z=(0,o.A)(W,2),$=Z[0],ee=Z[1],se=(0,h.useState)(!1),ae=(0,o.A)(se,2),te=ae[0],ne=ae[1],ie=function(e,s){(0,g.x9)({productId:e.id,productName:e.name,unitPrice:e.price,count:s}).then(function(e){return(0,p.Fu)([e].concat((0,r.A)((0,p.p_)()))),Y(e.id),(0,g.i5)(e.id,{status:"designing"}).then(function(s){(0,p.Fu)((0,p.p_)().map(function(a){return a.id===e.id?(0,c.A)((0,c.A)({},a),{},{status:s.status}):a}))}).catch(function(){(0,p.Fu)((0,p.p_)().map(function(s){return s.id===e.id?(0,c.A)((0,c.A)({},s),{},{status:"designing"}):s}))})}).catch(function(){var a={id:"DSG"+Date.now(),productId:e.id,productName:e.name,productIcon:e.icon,unitPrice:e.price,count:s,status:"designing",createdAt:(new Date).toISOString().slice(0,10)};(0,p.Fu)([].concat((0,r.A)((0,p.p_)()),[a])),Y(a.id)})};(0,h.useEffect)(function(){var e=u().getCurrentInstance().router,s=e?e.params:void 0,a=s?s.source:void 0,t=s&&s.productId||s&&s.category;if("product"===a&&t){var n=(0,m.y9)(t);if(n){k(n);var i=Number(s?s.quantity:void 0)||1;_(i),ie(n,i)}}else if("designList"===a&&s&&s.designId){var c=s.designId,r=(0,p.p_)(),o=r.find(function(e){return e.id===c});if(o){Y(c),_(o.count);var d=(0,m.y9)(o.productId);if(d&&k(d),o.designData?o.designData.stickers:void 0)B(o.designData.stickers);else if(o.designData?o.designData.imageSrc:void 0){var l={id:"legacy_"+Date.now(),src:o.designData.imageSrc,x:o.designData.imagePos&&o.designData.imagePos.x||0,y:o.designData.imagePos&&o.designData.imagePos.y||0,scale:o.designData.imagePos&&o.designData.imagePos.scale||1,width:200,height:200,isOverlapping:!1};B([l])}"undesigned"===o.status&&((0,p.i5)(c,{status:"designing"}),(0,g.i5)(c,{status:"designing"}).catch(function(){}))}}else if(t){var h=(0,m.y9)(t);h&&(k(h),ie(h,1))}},[]);var ce=(0,h.useRef)(null),re=(0,h.useRef)({designId:"",quantity:1,category:null,stickers:[]});re.current={designId:E,quantity:O,category:w,stickers:M};var oe=function(){var e=re.current,s=e.designId,a=e.quantity,t=e.category,n=e.stickers;if(s&&t){var i=(0,p.p_)().find(function(e){return e.id===s}),r=(0,c.A)((0,c.A)({},i&&i.designData?i.designData:{}),{},{version:1,category:(0,c.A)({id:t.id,mask:t.mask},t.tone?{tone:t.tone}:{}),stickers:n});(0,p.i5)(s,{designData:r}),(0,g.i5)(s,{item:{productId:t.id,productName:t.name,unitPrice:t.price,count:a,designData:r}}).catch(function(){})}},de=function(){ce.current&&(clearTimeout(ce.current),ce.current=null),oe()};u().useDidHide(de),(0,h.useEffect)(function(){return de},[]);var le=(0,h.useRef)(!0);(0,h.useEffect)(function(){le.current?le.current=!1:(ce.current&&clearTimeout(ce.current),ce.current=setTimeout(oe,800))},[M]);var ue=function(e){for(var s=e.map(function(e){return(0,c.A)((0,c.A)({},e),{},{isOverlapping:!1})}),a=0;ai.x&&n.yi.y&&(s[a].isOverlapping=!0,s[t].isOverlapping=!0)}var u=s.some(function(e){return e.isOverlapping});return ne(u),s},he=function(){u().chooseImage({count:1,sizeType:["compressed"],sourceType:["album","camera"],success:function(e){var s=e.tempFilePaths[0];u().getImageInfo({src:s,success:function(e){var a={id:"stk_"+Date.now(),src:s,x:0,y:0,scale:1,width:e.width,height:e.height,isOverlapping:!1},t=[].concat((0,r.A)(M),[a]),n=ue(t);B(n),C(a.id)},fail:function(){var e={id:"stk_"+Date.now(),src:s,x:0,y:0,scale:1,width:200,height:200,isOverlapping:!1},a=[].concat((0,r.A)(M),[e]),t=ue(a);B(t),C(e.id)}})}})},me=function(e){var s=M.filter(function(s){return s.id!==e}),a=ue(s);B(a),V===e&&C(null)},pe=function(e,s){var a=e.touches[0],t=M.find(function(e){return e.id===s});t&&(C(s),G(!0),U({x:a.clientX-t.x,y:a.clientY-t.y}))},ge=function(e){if(X&&V){var s=e.touches[0],a=M.map(function(e){return e.id!==V?e:(0,c.A)((0,c.A)({},e),{},{x:s.clientX-Q.x,y:s.clientY-Q.y})}),t=ue(a);B(t)}},fe=function(){return G(!1)},xe=function(){V&&E&&(de(),u().navigateTo({url:"/pages/diy/stickerEdit/index?designId=".concat(E,"&stickerId=").concat(V)}))},ve=function(e,s){var a=M.map(function(a){return a.id!==e?a:(0,c.A)((0,c.A)({},a),{},{scale:Math.max(.3,Math.min(3,a.scale+s))})}),t=ue(a);B(t)},je=function(){u().navigateBack()},Ne=function(){if(!w)return{width:300,height:420};var e={width:w.mask.width,height:w.mask.height};return"rect"===w.mask.shape&&(e.borderRadius=w.mask.borderRadius||0),"circle"===w.mask.shape&&(e.borderRadius="50%"),e},ye=function(){var e=(0,i.A)((0,n.A)().m(function e(){var s,a,t,i;return(0,n.A)().w(function(e){while(1)switch(e.p=e.n){case 0:if(!te){e.n=1;break}return u().showToast({title:"\u8d34\u7eb8\u4e0d\u80fd\u91cd\u53e0",icon:"none"}),e.a(2);case 1:if(!E||!w){e.n=6;break}return e.n=2,(0,g.x5)({stickers:M,category:w,version:1});case 2:return s=e.v,a=(0,c.A)({id:w.id,mask:w.mask},w.tone?{tone:w.tone}:{}),t=(0,p.p_)().find(function(e){return e.id===E}),i=(0,c.A)((0,c.A)({},t&&t.designData?t.designData:{}),{},{version:1,category:a,stickers:s.stickers||M}),(0,p.i5)(E,{status:"designing",designData:i}),e.p=3,e.n=4,(0,g.i5)(E,{status:"designing",item:{productId:w.id,productName:w.name,unitPrice:w.price,count:O,designData:i}});case 4:e.n=6;break;case 5:e.p=5,e.v,u().showToast({title:"\u7f51\u7edc\u4e0d\u53ef\u7528\uff0c\u5df2\u6682\u5b58\u5230\u672c\u5730",icon:"none"});case 6:ee(!1),u().navigateTo({url:"/pages/checkout/index?designId=".concat(E)});case 7:return e.a(2)}},e,null,[[3,5]])}));return function(){return e.apply(this,arguments)}}(),Se=V?M.find(function(e){return e.id===V}):void 0,we=Se?Se.scale:1;return w?(0,S.jsxs)(d.Ss,{className:"theme-".concat(s),children:[(0,S.jsx)(j.A,{}),(0,S.jsx)(N.A,{title:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0",targetSelector:".page-header.surface-card",showBack:!0}),(0,S.jsxs)(d.Ss,{className:"diy-page",children:[(0,S.jsx)(d.Ss,{className:"page-header surface-card",style:{paddingTop:"".concat(a.statusBarHeight+12,"px")},children:(0,S.jsxs)(d.Ss,{className:"flex-between",style:{width:"100%"},children:[(0,S.jsx)(d.EY,{className:"back-btn",onTap:je,children:"\u2190"}),(0,S.jsx)(d.EY,{className:"page-title",children:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0"}),(0,S.jsx)(d.Ss,{className:"header-spacer"})]})}),(0,S.jsx)(d.Ss,{className:"canvas-wrapper surface-card mt-20",catchMove:!0,children:(0,S.jsxs)(d.Ss,{className:"canvas-area",style:Ne(),children:[M.map(function(e){return(0,S.jsx)(d._V,{className:"canvas-image ".concat(e.isOverlapping?"overlap":""," ").concat(V===e.id?"active":""),src:e.src,style:{transform:"translate(".concat(e.x,"px, ").concat(e.y,"px) scale(").concat(e.scale,")"),opacity:X&&V===e.id?.8:1,zIndex:V===e.id?10:5,width:e.width||200,height:e.height||200},onTouchStart:function(s){return pe(s,e.id)},onTouchMove:ge,onTouchEnd:fe,onTap:function(){return C(e.id)},mode:"aspectFit"},e.id)}),(0,S.jsx)(d.Ss,{className:"mask-border",style:Ne()})]})}),(0,S.jsxs)(d.Ss,{className:"sticker-panel surface-card mt-20",children:[(0,S.jsx)(d.EY,{className:"section-title",children:"\u8d34\u7eb8"}),(0,S.jsxs)(d.Ss,{className:"sticker-list",children:[M.map(function(e){return(0,S.jsxs)(d.Ss,{className:"sticker-thumb ".concat(e.isOverlapping?"overlap":""," ").concat(V===e.id?"active":""),children:[(0,S.jsx)(d._V,{src:e.src,className:"sticker-thumb-img",mode:"aspectFit",onTap:function(){return C(e.id)}}),(0,S.jsx)(d.Ss,{className:"sticker-del",onTap:function(){return me(e.id)},children:(0,S.jsx)(d.EY,{className:"del-icon",children:"\xd7"})})]},e.id)}),(0,S.jsxs)(d.Ss,{className:"sticker-add-btn",onTap:he,children:[(0,S.jsx)(d.EY,{className:"add-icon",children:"+"}),(0,S.jsx)(d.EY,{className:"add-label",children:"\u6dfb\u52a0"})]})]}),te&&(0,S.jsx)(d.EY,{className:"overlap-hint",children:"\u6709\u8d34\u7eb8\u91cd\u53e0\uff0c\u8bf7\u8c03\u6574\u4f4d\u7f6e"})]}),V&&(0,S.jsxs)(d.Ss,{className:"toolbar surface-card mt-20",children:[(0,S.jsxs)(d.Ss,{className:"tool-row",children:[(0,S.jsx)(d.EY,{className:"tool-label",children:"\u7f29\u653e"}),(0,S.jsxs)(d.Ss,{className:"flex-center",style:{gap:"20px"},children:[(0,S.jsx)(d.Ss,{className:"tool-btn",onTap:function(){return ve(V,-.1)},children:"\uff0d"}),(0,S.jsxs)(d.EY,{className:"tool-value",children:[Math.round(100*we),"%"]}),(0,S.jsx)(d.Ss,{className:"tool-btn",onTap:function(){return ve(V,.1)},children:"\uff0b"})]})]}),(0,S.jsxs)(d.Ss,{className:"tool-row",children:[(0,S.jsx)(d.EY,{className:"tool-label",children:"\u63d0\u793a"}),(0,S.jsx)(d.EY,{className:"tool-hint",children:"\u62d6\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u8d34\u7eb8\u4e0d\u53ef\u91cd\u53e0"})]})]}),(0,S.jsx)(d.Ss,{className:"edit-btn-bar mt-20",children:(0,S.jsx)(d.Ss,{className:"edit-btn ".concat(V?"active":"disabled"),onTap:xe,children:(0,S.jsx)(d.EY,{children:"\u7f16\u8f91"})})}),(0,S.jsxs)(y.A,{children:[(0,S.jsx)(d.Ss,{className:"btn-primary",onTap:function(){return ee(!0)},children:(0,S.jsx)(d.EY,{children:"\u9884\u89c8\u6548\u679c"})}),(0,S.jsx)(d.Ss,{className:"btn-secondary",onTap:he,children:(0,S.jsx)(d.EY,{children:"\u6dfb\u52a0\u8d34\u7eb8"})})]}),$&&(0,S.jsx)(d.Ss,{className:"preview-overlay",children:(0,S.jsxs)(d.Ss,{className:"preview-card surface-card",children:[(0,S.jsx)(d.EY,{className:"preview-title",children:"\u786e\u8ba4\u6548\u679c"}),(0,S.jsx)(d.Ss,{className:"preview-canvas",style:Ne(),children:M.map(function(e){return(0,S.jsx)(d._V,{className:"preview-image ".concat(e.isOverlapping?"overlap":""),src:e.src,style:{transform:"translate(".concat(e.x,"px, ").concat(e.y,"px) scale(").concat(e.scale,")"),width:e.width||200,height:e.height||200},mode:"aspectFit"},e.id)})}),(0,S.jsxs)(d.Ss,{className:"product-info",children:[(0,S.jsx)(d.EY,{className:"product-name",children:w.name}),(0,S.jsxs)(d.EY,{className:"product-size",children:["\u753b\u5e03\u5c3a\u5bf8: ",w.mask.width," \xd7 ",w.mask.height," px"]}),te&&(0,S.jsx)(d.EY,{className:"overlap-hint",children:"\u8d34\u7eb8\u6709\u91cd\u53e0\uff0c\u4e0d\u53ef\u63d0\u4ea4"})]}),(0,S.jsxs)(d.Ss,{className:"preview-actions",children:[(0,S.jsx)(d.Ss,{className:"btn-secondary",onTap:function(){return ee(!1)},children:(0,S.jsx)(d.EY,{children:"\u8fd4\u56de\u4fee\u6539"})}),(0,S.jsx)(d.Ss,{className:"btn-primary ".concat(te?"disabled":""),onTap:ye,children:(0,S.jsx)(d.EY,{children:"\u786e\u8ba4\u5b8c\u6210"})})]})]})}),(0,S.jsx)(d.Ss,{className:"safe-bottom-placeholder"})]})]}):(0,S.jsxs)(d.Ss,{className:"theme-".concat(s),children:[(0,S.jsx)(j.A,{}),(0,S.jsx)(N.A,{title:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0",targetSelector:".page-header.surface-card",showBack:!0}),(0,S.jsx)(d.Ss,{className:"diy-page",children:(0,S.jsx)(d.EY,{className:"page-title",children:"\u52a0\u8f7d\u4e2d..."})})]})}var k={navigationStyle:"custom",enablePageMeta:!0,navigationBarTitleText:"DIY\u5de5\u4f5c\u53f0"};Page((0,t.createPageConfig)(w,"pages/diy/index",{root:{cn:[]}},k||{}))}},function(e){var s=function(s){return e(e.s=s)};e.O(0,[907,96,76],function(){return s(8955)});e.O()}]); \ No newline at end of file +"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[95],{8955:function(e,a,t){var s=t(7842),n=t(1212),i=t(467),c=t(9379),r=t(436),o=t(5544),d=t(118),l=t(758),u=t.n(l),h=t(6540),m=t(5234),p=t(1457),g=t(6845),x=t(9703),f=t(9201),v=t(5414),j=t(9674),N=t(3053),y=t(9513),w=t(4848);function S(){var e=(0,x.wR)(),a=(e.theme,e.resolvedTheme),t=(0,f.c)();(0,v.l)(a);var s=(0,h.useState)(null),l=(0,o.A)(s,2),S=l[0],k=l[1],A=(0,h.useState)(1),b=(0,o.A)(A,2),M=(b[0],b[1],(0,h.useState)("")),T=(0,o.A)(M,2),E=T[0],Y=T[1],I=(0,h.useState)(1),D=(0,o.A)(I,2),P=D[0],O=D[1],_=(0,h.useState)([]),F=(0,o.A)(_,2),R=F[0],B=F[1],q=(0,h.useState)(null),z=(0,o.A)(q,2),V=z[0],C=z[1],H=(0,h.useState)(!1),J=(0,o.A)(H,2),X=J[0],G=J[1],L=(0,h.useState)({x:0,y:0}),K=(0,o.A)(L,2),Q=K[0],U=K[1],W=(0,h.useState)(!1),Z=(0,o.A)(W,2),$=Z[0],ee=Z[1],ae=(0,h.useState)(!1),te=(0,o.A)(ae,2),se=te[0],ne=te[1],ie=function(e,a){(0,g.x9)({productId:e.id,productName:e.name,unitPrice:e.price,count:a}).then(function(e){return(0,p.Fu)([e].concat((0,r.A)((0,p.p_)()))),Y(e.id),(0,g.i5)(e.id,{status:"designing"}).then(function(a){(0,p.Fu)((0,p.p_)().map(function(t){return t.id===e.id?(0,c.A)((0,c.A)({},t),{},{status:a.status}):t}))}).catch(function(){(0,p.Fu)((0,p.p_)().map(function(a){return a.id===e.id?(0,c.A)((0,c.A)({},a),{},{status:"designing"}):a}))})}).catch(function(){var t={id:"DSG"+Date.now(),productId:e.id,productName:e.name,productIcon:e.icon,unitPrice:e.price,count:a,status:"designing",createdAt:(new Date).toISOString().slice(0,10)};(0,p.Fu)([].concat((0,r.A)((0,p.p_)()),[t])),Y(t.id)})};(0,h.useEffect)(function(){var e=u().getCurrentInstance().router,a=e?e.params:void 0,t=a?a.source:void 0,s=a&&a.productId||a&&a.category;if("product"===t&&s){var n=(0,m.y9)(s);if(n){k(n);var i=Number(a?a.quantity:void 0)||1;O(i),ie(n,i)}}else if("designList"===t&&a&&a.designId){var r=a.designId,o=(0,p.p_)(),d=o.find(function(e){return e.id===r});if(d){Y(r),O(d.count);var l=(0,m.y9)(d.productId);l&&k(l);var h=d.designData,x=h?h.stickers:void 0;if(x){var f=h&&h.category&&h.category.mask||(l?l.mask:void 0),v=f?x.map(function(e){if(e.width>f.width||e.height>f.height){var a=.6*Math.min(f.width,f.height)/Math.max(e.width,e.height);return(0,c.A)((0,c.A)({},e),{},{width:Math.round(e.width*a),height:Math.round(e.height*a)})}return e}):x;B(v)}else if(h?h.imageSrc:void 0){var j={id:"legacy_"+Date.now(),src:h.imageSrc,x:h.imagePos&&h.imagePos.x||0,y:h.imagePos&&h.imagePos.y||0,scale:h.imagePos&&h.imagePos.scale||1,width:200,height:200,isOverlapping:!1};B([j])}"undesigned"===d.status&&((0,p.i5)(r,{status:"designing"}),(0,g.i5)(r,{status:"designing"}).catch(function(){}))}}else if(s){var N=(0,m.y9)(s);N&&(k(N),ie(N,1))}},[]);var ce=(0,h.useRef)(null),re=(0,h.useRef)({designId:"",quantity:1,category:null,stickers:[]});re.current={designId:E,quantity:P,category:S,stickers:R};var oe=function(){var e=re.current,a=e.designId,t=e.quantity,s=e.category,n=e.stickers;if(a&&s){var i=(0,p.p_)().find(function(e){return e.id===a}),r=(0,c.A)((0,c.A)({},i&&i.designData?i.designData:{}),{},{version:1,category:(0,c.A)({id:s.id,mask:s.mask},s.tone?{tone:s.tone}:{}),stickers:n});(0,p.i5)(a,{designData:r}),(0,g.i5)(a,{item:{productId:s.id,productName:s.name,unitPrice:s.price,count:t,designData:r}}).catch(function(){})}},de=function(){ce.current&&(clearTimeout(ce.current),ce.current=null),oe()};u().useDidHide(de),(0,h.useEffect)(function(){return de},[]);var le=(0,h.useRef)(!0);(0,h.useEffect)(function(){le.current?le.current=!1:(ce.current&&clearTimeout(ce.current),ce.current=setTimeout(oe,800))},[R]);var ue=function(e){for(var a=e.map(function(e){return(0,c.A)((0,c.A)({},e),{},{isOverlapping:!1})}),t=0;ti.x&&n.yi.y&&(a[t].isOverlapping=!0,a[s].isOverlapping=!0)}var u=a.some(function(e){return e.isOverlapping});return ne(u),a},he=function(){u().chooseImage({count:1,sizeType:["compressed"],sourceType:["album","camera"],success:function(e){var a=e.tempFilePaths[0];u().getImageInfo({src:a,success:function(e){var t=Math.min(S.mask.width,S.mask.height),s=.6*t/Math.max(e.width,e.height),n={id:"stk_"+Date.now(),src:a,x:0,y:0,scale:1,width:Math.round(e.width*s),height:Math.round(e.height*s),isOverlapping:!1},i=[].concat((0,r.A)(R),[n]),c=ue(i);B(c),C(n.id)},fail:function(){var e=Math.min(S.mask.width,S.mask.height),t=.6*e/200,s={id:"stk_"+Date.now(),src:a,x:0,y:0,scale:1,width:Math.round(200*t),height:Math.round(200*t),isOverlapping:!1},n=[].concat((0,r.A)(R),[s]),i=ue(n);B(i),C(s.id)}})}})},me=function(e){var a=R.filter(function(a){return a.id!==e}),t=ue(a);B(t),V===e&&C(null)},pe=function(e,a){var t=e.touches[0],s=R.find(function(e){return e.id===a});s&&(C(a),G(!0),U({x:t.clientX-s.x,y:t.clientY-s.y}))},ge=function(e){if(X&&V){var a=e.touches[0],t=R.map(function(e){if(e.id!==V)return e;var t=Math.max(0,S.mask.width-e.width*e.scale),s=Math.max(0,S.mask.height-e.height*e.scale);return(0,c.A)((0,c.A)({},e),{},{x:Math.min(Math.max(a.clientX-Q.x,0),t),y:Math.min(Math.max(a.clientY-Q.y,0),s)})}),s=ue(t);B(s)}},xe=function(){return G(!1)},fe=function(){V&&E&&(de(),u().navigateTo({url:"/pages/diy/stickerEdit/index?designId=".concat(E,"&stickerId=").concat(V)}))},ve=function(e,a){var t=R.map(function(t){if(t.id!==e)return t;var s=Math.max(.3,Math.min(3,t.scale+a)),n=Math.max(0,S.mask.width-t.width*s),i=Math.max(0,S.mask.height-t.height*s);return(0,c.A)((0,c.A)({},t),{},{scale:s,x:Math.min(Math.max(t.x,0),n),y:Math.min(Math.max(t.y,0),i)})}),s=ue(t);B(s)},je=function(){u().navigateBack()},Ne=function(){if(!S)return{width:300,height:420};var e={width:S.mask.width,height:S.mask.height};return"rect"===S.mask.shape&&(e.borderRadius=S.mask.borderRadius||0),"circle"===S.mask.shape&&(e.borderRadius="50%"),e},ye=function(){var e=(0,i.A)((0,n.A)().m(function e(){var a,t,s,i;return(0,n.A)().w(function(e){while(1)switch(e.p=e.n){case 0:if(!se){e.n=1;break}return u().showToast({title:"\u8d34\u7eb8\u4e0d\u80fd\u91cd\u53e0",icon:"none"}),e.a(2);case 1:if(!E||!S){e.n=6;break}return e.n=2,(0,g.x5)({stickers:R,category:S,version:1});case 2:return a=e.v,t=(0,c.A)({id:S.id,mask:S.mask},S.tone?{tone:S.tone}:{}),s=(0,p.p_)().find(function(e){return e.id===E}),i=(0,c.A)((0,c.A)({},s&&s.designData?s.designData:{}),{},{version:1,category:t,stickers:a.stickers||R}),(0,p.i5)(E,{status:"designing",designData:i}),e.p=3,e.n=4,(0,g.i5)(E,{status:"designing",item:{productId:S.id,productName:S.name,unitPrice:S.price,count:P,designData:i}});case 4:e.n=6;break;case 5:e.p=5,e.v,u().showToast({title:"\u7f51\u7edc\u4e0d\u53ef\u7528\uff0c\u5df2\u6682\u5b58\u5230\u672c\u5730",icon:"none"});case 6:ee(!1),u().navigateTo({url:"/pages/checkout/index?designId=".concat(E)});case 7:return e.a(2)}},e,null,[[3,5]])}));return function(){return e.apply(this,arguments)}}(),we=V?R.find(function(e){return e.id===V}):void 0,Se=we?we.scale:1;return S?(0,w.jsxs)(d.Ss,{className:"theme-".concat(a),children:[(0,w.jsx)(j.A,{}),(0,w.jsx)(N.A,{title:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0",targetSelector:".page-header.surface-card",showBack:!0}),(0,w.jsxs)(d.Ss,{className:"diy-page",children:[(0,w.jsx)(d.Ss,{className:"page-header surface-card",style:{paddingTop:"".concat(t.statusBarHeight+12,"px")},children:(0,w.jsxs)(d.Ss,{className:"flex-between",style:{width:"100%"},children:[(0,w.jsx)(d.EY,{className:"back-btn",onTap:je,children:"\u2190"}),(0,w.jsx)(d.EY,{className:"page-title",children:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0"}),(0,w.jsx)(d.Ss,{className:"header-spacer"})]})}),(0,w.jsx)(d.Ss,{className:"canvas-wrapper surface-card mt-20",catchMove:!0,children:(0,w.jsxs)(d.Ss,{className:"canvas-area",style:Ne(),children:[R.map(function(e){return(0,w.jsx)(d._V,{className:"canvas-image ".concat(e.isOverlapping?"overlap":""," ").concat(V===e.id?"active":""),src:e.src,style:{transform:"translate(".concat(e.x,"px, ").concat(e.y,"px) scale(").concat(e.scale,")"),opacity:X&&V===e.id?.8:1,zIndex:V===e.id?10:5,width:e.width||200,height:e.height||200},onTouchStart:function(a){return pe(a,e.id)},onTouchMove:ge,onTouchEnd:xe,onTap:function(){return C(e.id)},mode:"aspectFit"},e.id)}),(0,w.jsx)(d.Ss,{className:"mask-border",style:Ne()})]})}),(0,w.jsxs)(d.Ss,{className:"sticker-panel surface-card mt-20",children:[(0,w.jsx)(d.EY,{className:"section-title",children:"\u8d34\u7eb8"}),(0,w.jsxs)(d.Ss,{className:"sticker-list",children:[R.map(function(e){return(0,w.jsxs)(d.Ss,{className:"sticker-thumb ".concat(e.isOverlapping?"overlap":""," ").concat(V===e.id?"active":""),children:[(0,w.jsx)(d._V,{src:e.src,className:"sticker-thumb-img",mode:"aspectFit",onTap:function(){return C(e.id)}}),(0,w.jsx)(d.Ss,{className:"sticker-del",onTap:function(){return me(e.id)},children:(0,w.jsx)(d.EY,{className:"del-icon",children:"\xd7"})})]},e.id)}),(0,w.jsxs)(d.Ss,{className:"sticker-add-btn",onTap:he,children:[(0,w.jsx)(d.EY,{className:"add-icon",children:"+"}),(0,w.jsx)(d.EY,{className:"add-label",children:"\u6dfb\u52a0"})]})]}),se&&(0,w.jsx)(d.EY,{className:"overlap-hint",children:"\u6709\u8d34\u7eb8\u91cd\u53e0\uff0c\u8bf7\u8c03\u6574\u4f4d\u7f6e"})]}),V&&(0,w.jsxs)(d.Ss,{className:"toolbar surface-card mt-20",children:[(0,w.jsxs)(d.Ss,{className:"tool-row",children:[(0,w.jsx)(d.EY,{className:"tool-label",children:"\u7f29\u653e"}),(0,w.jsxs)(d.Ss,{className:"flex-center",style:{gap:"20px"},children:[(0,w.jsx)(d.Ss,{className:"tool-btn",onTap:function(){return ve(V,-.1)},children:"\uff0d"}),(0,w.jsxs)(d.EY,{className:"tool-value",children:[Math.round(100*Se),"%"]}),(0,w.jsx)(d.Ss,{className:"tool-btn",onTap:function(){return ve(V,.1)},children:"\uff0b"})]})]}),(0,w.jsxs)(d.Ss,{className:"tool-row",children:[(0,w.jsx)(d.EY,{className:"tool-label",children:"\u63d0\u793a"}),(0,w.jsx)(d.EY,{className:"tool-hint",children:"\u62d6\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u8d34\u7eb8\u4e0d\u53ef\u91cd\u53e0"})]})]}),(0,w.jsx)(d.Ss,{className:"edit-btn-bar mt-20",children:(0,w.jsx)(d.Ss,{className:"edit-btn ".concat(V?"active":"disabled"),onTap:fe,children:(0,w.jsx)(d.EY,{children:"\u7f16\u8f91"})})}),(0,w.jsxs)(y.A,{children:[(0,w.jsx)(d.Ss,{className:"btn-primary",onTap:function(){return ee(!0)},children:(0,w.jsx)(d.EY,{children:"\u9884\u89c8\u6548\u679c"})}),(0,w.jsx)(d.Ss,{className:"btn-secondary",onTap:he,children:(0,w.jsx)(d.EY,{children:"\u6dfb\u52a0\u8d34\u7eb8"})})]}),$&&(0,w.jsx)(d.Ss,{className:"preview-overlay",children:(0,w.jsxs)(d.Ss,{className:"preview-card surface-card",children:[(0,w.jsx)(d.EY,{className:"preview-title",children:"\u786e\u8ba4\u6548\u679c"}),(0,w.jsx)(d.Ss,{className:"preview-canvas",style:Ne(),children:R.map(function(e){return(0,w.jsx)(d._V,{className:"preview-image ".concat(e.isOverlapping?"overlap":""),src:e.src,style:{transform:"translate(".concat(e.x,"px, ").concat(e.y,"px) scale(").concat(e.scale,")"),width:e.width||200,height:e.height||200},mode:"aspectFit"},e.id)})}),(0,w.jsxs)(d.Ss,{className:"product-info",children:[(0,w.jsx)(d.EY,{className:"product-name",children:S.name}),(0,w.jsxs)(d.EY,{className:"product-size",children:["\u753b\u5e03\u5c3a\u5bf8: ",S.mask.width," \xd7 ",S.mask.height," px"]}),se&&(0,w.jsx)(d.EY,{className:"overlap-hint",children:"\u8d34\u7eb8\u6709\u91cd\u53e0\uff0c\u4e0d\u53ef\u63d0\u4ea4"})]}),(0,w.jsxs)(d.Ss,{className:"preview-actions",children:[(0,w.jsx)(d.Ss,{className:"btn-secondary",onTap:function(){return ee(!1)},children:(0,w.jsx)(d.EY,{children:"\u8fd4\u56de\u4fee\u6539"})}),(0,w.jsx)(d.Ss,{className:"btn-primary ".concat(se?"disabled":""),onTap:ye,children:(0,w.jsx)(d.EY,{children:"\u786e\u8ba4\u5b8c\u6210"})})]})]})}),(0,w.jsx)(d.Ss,{className:"safe-bottom-placeholder"})]})]}):(0,w.jsxs)(d.Ss,{className:"theme-".concat(a),children:[(0,w.jsx)(j.A,{}),(0,w.jsx)(N.A,{title:"\u8bbe\u8ba1\u5de5\u4f5c\u53f0",targetSelector:".page-header.surface-card",showBack:!0}),(0,w.jsx)(d.Ss,{className:"diy-page",children:(0,w.jsx)(d.EY,{className:"page-title",children:"\u52a0\u8f7d\u4e2d..."})})]})}var k={navigationStyle:"custom",enablePageMeta:!0,navigationBarTitleText:"DIY\u5de5\u4f5c\u53f0"};Page((0,s.createPageConfig)(S,"pages/diy/index",{root:{cn:[]}},k||{}))}},function(e){var a=function(a){return e(e.s=a)};e.O(0,[907,96,76],function(){return a(8955)});e.O()}]); \ No newline at end of file diff --git a/dist/pages/diy/index.wxss b/dist/pages/diy/index.wxss index dbc88ba..a73cf6d 100644 --- a/dist/pages/diy/index.wxss +++ b/dist/pages/diy/index.wxss @@ -1 +1 @@ -.diy-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;padding:0 32rpx calc(48rpx + env(safe-area-inset-bottom))}.diy-page .page-header{-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 24rpx;padding-bottom:16rpx;padding-top:0}.diy-page .page-header.surface-card{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.diy-page .page-header .flex-between{min-height:88rpx}.back-btn{-ms-flex-align:center;-ms-flex-pack:center;-ms-flex-negative:0;-webkit-align-items:center;align-items:center;background:var(--bg-card);border:1rpx solid var(--border-strong);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;flex-shrink:0;font-size:36rpx;height:80rpx;-webkit-justify-content:center;justify-content:center;line-height:1;width:80rpx}.back-btn:active{-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.diy-page .page-title{color:var(--text-primary);-webkit-flex:1;-ms-flex:1;flex:1;font-size:34rpx;font-weight:700;letter-spacing:0;line-height:1.2;min-width:0;overflow:hidden;padding:0 16rpx;text-align:center;text-overflow:ellipsis;white-space:nowrap}.header-spacer{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:80rpx;width:80rpx}.canvas-wrapper{-ms-flex-pack:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:24rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;padding:24rpx}.canvas-area{background:var(--bg-input);border-radius:24rpx;-webkit-box-shadow:inset 0 0 0 1rpx var(--border-strong);box-shadow:inset 0 0 0 1rpx var(--border-strong);-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.mask-border{border:1rpx solid var(--border-strong);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.canvas-image{border:2rpx solid transparent;border-radius:8rpx;max-height:100%;max-width:100%;position:absolute;z-index:5}.canvas-image.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 8rpx var(--accent-primary-soft);box-shadow:0 0 0 8rpx var(--accent-primary-soft)}.canvas-image.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 8rpx var(--danger-soft);box-shadow:0 0 0 8rpx var(--danger-soft)}.sticker-panel{padding:24rpx}.sticker-panel .section-title{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:20rpx}.sticker-list{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16rpx}.sticker-thumb{background:var(--bg-input);border:1rpx solid var(--border);border-radius:20rpx;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);height:164rpx;overflow:hidden;position:relative;width:164rpx}.sticker-thumb.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 6rpx var(--accent-primary-soft);box-shadow:0 0 0 6rpx var(--accent-primary-soft)}.sticker-thumb.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 6rpx var(--danger-soft);box-shadow:0 0 0 6rpx var(--danger-soft)}.sticker-thumb-img{height:100%;width:100%}.sticker-del{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--danger);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);display:-webkit-flex;display:-ms-flexbox;display:flex;height:44rpx;-webkit-justify-content:center;justify-content:center;position:absolute;right:8rpx;top:8rpx;width:44rpx;z-index:10}.del-icon{color:#fff;font-size:28rpx;font-weight:700;line-height:1}.sticker-add-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-muted);border:1rpx solid var(--border-strong);border-radius:20rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:164rpx;-webkit-justify-content:center;justify-content:center;width:164rpx}.sticker-add-btn:active{-webkit-transform:scale(.97);-ms-transform:scale(.97);transform:scale(.97)}.add-icon{color:var(--accent-primary);font-size:44rpx;font-weight:600;line-height:1}.add-label{color:var(--text-secondary);font-size:22rpx;margin-top:8rpx}.overlap-hint{color:var(--danger);display:block;font-size:24rpx;font-weight:600;margin-top:16rpx;text-align:center}.toolbar{padding:24rpx}.tool-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;-webkit-justify-content:space-between;justify-content:space-between;padding:8rpx 0}.tool-row + .tool-row{border-top:1rpx solid var(--border);margin-top:8rpx;padding-top:16rpx}.tool-label{color:var(--text-primary);font-size:26rpx;font-weight:600}.tool-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border);border-radius:16rpx;color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:32rpx;font-weight:600;height:64rpx;-webkit-justify-content:center;justify-content:center;width:64rpx}.tool-btn:active{background:var(--bg-muted);-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.tool-value{color:var(--accent-primary);font-size:26rpx;font-variant-numeric:tabular-nums;font-weight:600;min-width:88rpx;text-align:center}.tool-hint{color:var(--text-secondary);font-size:24rpx}.edit-btn-bar{-ms-flex-pack:end;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:24rpx}.edit-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:999rpx;color:var(--text-secondary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:88rpx;-webkit-justify-content:center;justify-content:center;min-width:176rpx;padding:0 40rpx;text-align:center;-webkit-transition:all .2s ease;transition:all .2s ease}.edit-btn.active{background:var(--accent-primary-soft);border-color:var(--accent-primary);color:var(--accent-primary)}.edit-btn.disabled{opacity:.45;pointer-events:none}.bottom-action-bar .btn-primary,.bottom-action-bar .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-overlay{-ms-flex-align:end;-ms-flex-pack:center;-webkit-align-items:flex-end;align-items:flex-end;background:rgba(0,0,0,.45);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.preview-card{background:var(--bg-card);border:1rpx solid var(--border);border-radius:32rpx 32rpx 0 0;-webkit-box-shadow:var(--shadow-elevated);box-shadow:var(--shadow-elevated);-webkit-box-sizing:border-box;box-sizing:border-box;max-height:88vh;overflow-y:auto;padding:40rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));width:100%}.preview-card::before{background:var(--bg-muted);border-radius:999rpx;content:"";display:block;height:8rpx;margin:0 auto 32rpx;width:64rpx}.preview-title{color:var(--text-primary);display:block;font-size:34rpx;font-weight:700;letter-spacing:0;margin-bottom:24rpx;text-align:center}.preview-canvas{background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:24rpx;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto 24rpx;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.preview-image{max-height:100%;max-width:100%;position:absolute;z-index:5}.preview-image.overlap{border:2rpx solid var(--danger);border-radius:8rpx}.product-info{margin-bottom:28rpx;text-align:center}.product-name{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:8rpx}.product-size{color:var(--text-secondary);font-size:24rpx}.preview-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx}.preview-actions .btn-primary,.preview-actions .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-actions .btn-primary.disabled{opacity:.5;pointer-events:none}.mt-20{margin-top:24rpx} \ No newline at end of file +.diy-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;padding:0 32rpx calc(48rpx + env(safe-area-inset-bottom))}.diy-page .page-header{-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 0 24rpx;padding-bottom:16rpx;padding-top:0}.diy-page .page-header.surface-card{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.diy-page .page-header .flex-between{min-height:88rpx}.back-btn{-ms-flex-align:center;-ms-flex-pack:center;-ms-flex-negative:0;-webkit-align-items:center;align-items:center;background:var(--bg-card);border:1rpx solid var(--border-strong);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;flex-shrink:0;font-size:36rpx;height:80rpx;-webkit-justify-content:center;justify-content:center;line-height:1;width:80rpx}.back-btn:active{-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.diy-page .page-title{color:var(--text-primary);-webkit-flex:1;-ms-flex:1;flex:1;font-size:34rpx;font-weight:700;letter-spacing:0;line-height:1.2;min-width:0;overflow:hidden;padding:0 16rpx;text-align:center;text-overflow:ellipsis;white-space:nowrap}.header-spacer{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;height:80rpx;width:80rpx}.canvas-wrapper{-ms-flex-pack:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:24rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;padding:24rpx}.canvas-area{background:var(--bg-input);border-radius:24rpx;-webkit-box-shadow:inset 0 0 0 1rpx var(--border-strong);box-shadow:inset 0 0 0 1rpx var(--border-strong);-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.mask-border{border:1rpx solid var(--border-strong);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.canvas-image{border:2rpx solid transparent;border-radius:8rpx;max-height:100%;max-width:100%;position:absolute;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;z-index:5}.canvas-image.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 8rpx var(--accent-primary-soft);box-shadow:0 0 0 8rpx var(--accent-primary-soft)}.canvas-image.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 8rpx var(--danger-soft);box-shadow:0 0 0 8rpx var(--danger-soft)}.sticker-panel{padding:24rpx}.sticker-panel .section-title{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:20rpx}.sticker-list{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16rpx}.sticker-thumb{background:var(--bg-input);border:1rpx solid var(--border);border-radius:20rpx;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);height:164rpx;overflow:hidden;position:relative;width:164rpx}.sticker-thumb.active{border-color:var(--accent-primary);-webkit-box-shadow:0 0 0 6rpx var(--accent-primary-soft);box-shadow:0 0 0 6rpx var(--accent-primary-soft)}.sticker-thumb.overlap{border-color:var(--danger);-webkit-box-shadow:0 0 0 6rpx var(--danger-soft);box-shadow:0 0 0 6rpx var(--danger-soft)}.sticker-thumb-img{height:100%;width:100%}.sticker-del{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--danger);border-radius:50%;-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);display:-webkit-flex;display:-ms-flexbox;display:flex;height:44rpx;-webkit-justify-content:center;justify-content:center;position:absolute;right:8rpx;top:8rpx;width:44rpx;z-index:10}.del-icon{color:#fff;font-size:28rpx;font-weight:700;line-height:1}.sticker-add-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-muted);border:1rpx solid var(--border-strong);border-radius:20rpx;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:164rpx;-webkit-justify-content:center;justify-content:center;width:164rpx}.sticker-add-btn:active{-webkit-transform:scale(.97);-ms-transform:scale(.97);transform:scale(.97)}.add-icon{color:var(--accent-primary);font-size:44rpx;font-weight:600;line-height:1}.add-label{color:var(--text-secondary);font-size:22rpx;margin-top:8rpx}.overlap-hint{color:var(--danger);display:block;font-size:24rpx;font-weight:600;margin-top:16rpx;text-align:center}.toolbar{padding:24rpx}.tool-row{-ms-flex-align:center;-ms-flex-pack:justify;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx;-webkit-justify-content:space-between;justify-content:space-between;padding:8rpx 0}.tool-row + .tool-row{border-top:1rpx solid var(--border);margin-top:8rpx;padding-top:16rpx}.tool-label{color:var(--text-primary);font-size:26rpx;font-weight:600}.tool-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border);border-radius:16rpx;color:var(--text-primary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:32rpx;font-weight:600;height:64rpx;-webkit-justify-content:center;justify-content:center;width:64rpx}.tool-btn:active{background:var(--bg-muted);-webkit-transform:scale(.96);-ms-transform:scale(.96);transform:scale(.96)}.tool-value{color:var(--accent-primary);font-size:26rpx;font-variant-numeric:tabular-nums;font-weight:600;min-width:88rpx;text-align:center}.tool-hint{color:var(--text-secondary);font-size:24rpx}.edit-btn-bar{-ms-flex-pack:end;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:24rpx}.edit-btn{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:999rpx;color:var(--text-secondary);display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:28rpx;font-weight:600;height:88rpx;-webkit-justify-content:center;justify-content:center;min-width:176rpx;padding:0 40rpx;text-align:center;-webkit-transition:all .2s ease;transition:all .2s ease}.edit-btn.active{background:var(--accent-primary-soft);border-color:var(--accent-primary);color:var(--accent-primary)}.edit-btn.disabled{opacity:.45;pointer-events:none}.bottom-action-bar .btn-primary,.bottom-action-bar .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-overlay{-ms-flex-align:end;-ms-flex-pack:center;-webkit-align-items:flex-end;align-items:flex-end;background:rgba(0,0,0,.45);bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.preview-card{background:var(--bg-card);border:1rpx solid var(--border);border-radius:32rpx 32rpx 0 0;-webkit-box-shadow:var(--shadow-elevated);box-shadow:var(--shadow-elevated);-webkit-box-sizing:border-box;box-sizing:border-box;max-height:88vh;overflow-y:auto;padding:40rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));width:100%}.preview-card::before{background:var(--bg-muted);border-radius:999rpx;content:"";display:block;height:8rpx;margin:0 auto 32rpx;width:64rpx}.preview-title{color:var(--text-primary);display:block;font-size:34rpx;font-weight:700;letter-spacing:0;margin-bottom:24rpx;text-align:center}.preview-canvas{background:var(--bg-input);border:1rpx solid var(--border-strong);border-radius:24rpx;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto 24rpx;max-width:100%;min-height:400rpx;min-width:300rpx;overflow:hidden;position:relative}.preview-image{max-height:100%;max-width:100%;position:absolute;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;z-index:5}.preview-image.overlap{border:2rpx solid var(--danger);border-radius:8rpx}.product-info{margin-bottom:28rpx;text-align:center}.product-name{color:var(--text-primary);display:block;font-size:32rpx;font-weight:700;letter-spacing:0;margin-bottom:8rpx}.product-size{color:var(--text-secondary);font-size:24rpx}.preview-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16rpx}.preview-actions .btn-primary,.preview-actions .btn-secondary{-webkit-flex:1;-ms-flex:1;flex:1;font-size:28rpx;font-weight:600;line-height:1.2;padding:28rpx 0;text-align:center}.preview-actions .btn-primary.disabled{opacity:.5;pointer-events:none}.mt-20{margin-top:24rpx} \ No newline at end of file diff --git a/src/pages/diy/index.scss b/src/pages/diy/index.scss index 5c25296..19e23f9 100644 --- a/src/pages/diy/index.scss +++ b/src/pages/diy/index.scss @@ -103,6 +103,8 @@ position: absolute; max-width: 100%; max-height: 100%; + /* 问题1 修正：碰撞盒按左上角计算，缩放原点统一为左上角，渲染与碰撞语义自洽 */ + transform-origin: top left; z-index: 5; border: 2rpx solid transparent; border-radius: 8rpx; @@ -391,6 +393,7 @@ position: absolute; max-width: 100%; max-height: 100%; + transform-origin: top left; z-index: 5; } diff --git a/src/pages/diy/index.tsx b/src/pages/diy/index.tsx index 27328b0..207f765 100644 --- a/src/pages/diy/index.tsx +++ b/src/pages/diy/index.tsx @@ -88,16 +88,30 @@ export default function DIYPage() { setQuantity(design.count) const product = getProductById(design.productId) if (product) setCategory(product) - if (design.designData ? design.designData.stickers : undefined) { - setStickers(design.designData.stickers) - } else if (design.designData ? design.designData.imageSrc : undefined) { + const dd = design.designData + const rawStickers = dd ? dd.stickers : undefined + if (rawStickers) { + // 问题1 留意点：旧数据 width/height 为图片原始像素语义，读取端按 mask 等比归一化 + //（契约实现注记，不做存量迁移）；新语义数据（≤mask 短边 60%）原样通过 + const mask = (dd && dd.category && dd.category.mask) || (product ? product.mask : undefined) + const normalized: StickerItem[] = mask + ? rawStickers.map(s => { + if (s.width > mask.width || s.height > mask.height) { + const k = (Math.min(mask.width, mask.height) * 0.6) / Math.max(s.width, s.height) + return { ...s, width: Math.round(s.width * k), height: Math.round(s.height * k) } + } + return s + }) + : rawStickers + setStickers(normalized) + } else if (dd ? dd.imageSrc : undefined) { // 兼容旧版数据 const s: StickerItem = { id: 'legacy_' + Date.now(), - src: design.designData.imageSrc, - x: design.designData.imagePos ? design.designData.imagePos.x || 0 : 0, - y: design.designData.imagePos ? design.designData.imagePos.y || 0 : 0, - scale: design.designData.imagePos ? design.designData.imagePos.scale || 1 : 1, + src: dd.imageSrc, + x: dd.imagePos ? dd.imagePos.x || 0 : 0, + y: dd.imagePos ? dd.imagePos.y || 0 : 0, + scale: dd.imagePos ? dd.imagePos.scale || 1 : 1, width: 200, height: 200, isOverlapping: false @@ -207,14 +221,17 @@ export default function DIYPage() { Taro.getImageInfo({ src, success: (info) => { + // 问题1 修正：归一化到画布坐标空间（width/height = 画布显示像素，契约实现注记） + const maskMin = Math.min(category.mask.width, category.mask.height) + const k = (maskMin * 0.6) / Math.max(info.width, info.height) const newSticker: StickerItem = { id: 'stk_' + Date.now(), src, x: 0, y: 0, scale: 1, - width: info.width, - height: info.height, + width: Math.round(info.width * k), + height: Math.round(info.height * k), isOverlapping: false } const next = [...stickers, newSticker] @@ -223,15 +240,17 @@ export default function DIYPage() { setActiveStickerId(newSticker.id) }, fail: () => { - // fallback 尺寸 + // fallback 尺寸（同样按画布空间归一化） + const maskMin = Math.min(category.mask.width, category.mask.height) + const k = (maskMin * 0.6) / 200 const newSticker: StickerItem = { id: 'stk_' + Date.now(), src, x: 0, y: 0, scale: 1, - width: 200, - height: 200, + width: Math.round(200 * k), + height: Math.round(200 * k), isOverlapping: false } const next = [...stickers, newSticker] @@ -265,7 +284,14 @@ export default function DIYPage() { const touch = e.touches[0] const next = stickers.map(s => { if (s.id !== activeStickerId) return s - return { ...s, x: touch.clientX - startPos.x, y: touch.clientY - startPos.y } + // 问题1 修正：坐标钳制在画布内，杜绝负坐标与拖出画布（碰撞盒 = x/y + 显示宽高） + const maxX = Math.max(0, category.mask.width - s.width * s.scale) + const maxY = Math.max(0, category.mask.height - s.height * s.scale) + return { + ...s, + x: Math.min(Math.max(touch.clientX - startPos.x, 0), maxX), + y: Math.min(Math.max(touch.clientY - startPos.y, 0), maxY) + } }) const checked = checkOverlap(next) setStickers(checked) @@ -284,7 +310,16 @@ export default function DIYPage() { const handleScale = (id: string, delta: number) => { const next = stickers.map(s => { if (s.id !== id) return s - return { ...s, scale: Math.max(0.3, Math.min(3, s.scale + delta)) } + const scale = Math.max(0.3, Math.min(3, s.scale + delta)) + // 问题1 修正：缩放后把位置钳回画布内 + const maxX = Math.max(0, category.mask.width - s.width * scale) + const maxY = Math.max(0, category.mask.height - s.height * scale) + return { + ...s, + scale, + x: Math.min(Math.max(s.x, 0), maxX), + y: Math.min(Math.max(s.y, 0), maxY) + } }) const checked = checkOverlap(next) setStickers(checked)