2 lines
2.5 KiB
JavaScript
2 lines
2.5 KiB
JavaScript
var h=(e,o,a)=>new Promise((c,n)=>{var l=t=>{try{s(a.next(t))}catch(r){n(r)}},d=t=>{try{s(a.throw(t))}catch(r){n(r)}},s=t=>t.done?c(t.value):Promise.resolve(t.value).then(l,d);s((a=a.apply(e,o)).next())});import{b as $}from"./index-D3VduTvn.js";import{aA as b}from"./bootstrap-CRjSNGHY.js";import{m as k,b9 as i,w,v as B,ad as p,b2 as u,ae as y,I as z,bb as C,aT as v,ac as f,j as g,u as x,aR as L,bp as R,cX as S}from"../jse/index-index-CMeVxoEG.js";const j={key:0,class:"absolute left-0 top-0 z-10 items-center justify-center"},F=k({name:"ProductList",__name:"index",props:{property:{}},setup(e){const o=e,a=i([]);w(()=>o.property.spuIds,()=>h(null,null,function*(){a.value=yield $(o.property.spuIds)}),{immediate:!0,deep:!0});const c=i(375),n=i(),l=i(2),d=i("100%"),s=i("0"),t=i("");return w(()=>[o.property,c,a.value.length],()=>{l.value=o.property.layoutType==="twoCol"?2:3;const r=(c.value-o.property.space*(l.value-1))/l.value;s.value=l.value===2?"64px":`${r}px`,o.property.layoutType==="horizSwiper"?(t.value=`repeat(auto-fill, ${r}px)`,d.value=`${r*a.value.length+o.property.space*(a.value.length-1)}px`):(t.value=`repeat(${l.value}, auto)`,d.value="100%")},{immediate:!0,deep:!0}),B(()=>{var r;c.value=((r=n.value)==null?void 0:r.offsetWidth)||375}),(r,I)=>(u(),p("div",{class:"z-10 min-h-[30px] w-full",ref_key:"containerRef",ref:n},[y("div",{class:"grid overflow-x-auto",style:v({gridGap:`${e.property.space}px`,gridTemplateColumns:t.value,width:d.value})},[(u(!0),p(z,null,C(a.value,(m,T)=>(u(),p("div",{class:"relative box-content flex flex-row flex-wrap overflow-hidden bg-white",style:v({borderTopLeftRadius:`${e.property.borderRadiusTop}px`,borderTopRightRadius:`${e.property.borderRadiusTop}px`,borderBottomLeftRadius:`${e.property.borderRadiusBottom}px`,borderBottomRightRadius:`${e.property.borderRadiusBottom}px`}),key:T},[e.property.badge.show?(u(),p("div",j,[g(x(b),{src:e.property.badge.imgUrl,preview:!1,class:"h-[26px] w-[38px] object-cover"},null,8,["src"])])):f("",!0),g(x(b),{src:m.picUrl,style:v({width:s.value,height:s.value,objectFit:"cover"}),preview:!1},null,8,["src","style"]),y("div",{class:L(["box-border flex flex-col gap-2 p-2",[{"w-[calc(100%-64px)]":l.value===2,"w-full":l.value===3}]])},[e.property.fields.name.show?(u(),p("div",{key:0,class:"truncate text-xs",style:v({color:e.property.fields.name.color})},R(m.name),5)):f("",!0),y("div",null,[e.property.fields.price.show?(u(),p("span",{key:0,class:"text-xs",style:v({color:e.property.fields.price.color})}," ￥"+R(x(S)(m.price||0)),5)):f("",!0)])],2)],4))),128))],4)],512))}});export{F as default};
|