🆕 轮播图添加圆角

src/components/BasicShop/BasicComponents/Carousel/index.tsx

@@ -1,15 +1,19 @@
-import React, { memo } from 'react';
+import React, { memo, PropsWithChildren } from 'react';
 import { Carousel } from 'zarm';
 import styles from './index.less';
 import { ICarouselConfig } from './schema';
 import logo from '@/assets/01-轮播.png';
 
-const XCarousel = memo((props: ICarouselConfig) => {
+interface CarouselTypes extends ICarouselConfig {
-  const { direction, swipeable, autoPlay, isTpl, imgList } = props;
+  isTpl: boolean;
+}
+
+const XCarousel = memo((props: PropsWithChildren<CarouselTypes>) => {
+  const { direction, swipeable, autoPlay, isTpl, imgList, round } = props;
   const contentRender = () => {
     return imgList.map((item, i) => {
       return (
-        <div className={styles.carousel__item__pic} key={+i}>
+        <div className={styles.carousel__item__pic} key={+i} style={{ borderRadius: round + 'px' }}>
           <a href={item.link}>
             <img src={item.imgUrl.length > 0 ? item.imgUrl[0].url : ''} alt="" />
           </a>
@@ -18,38 +22,25 @@ const XCarousel = memo((props: ICarouselConfig) => {
     });
   };
   return (
-    <>
+    <div style={{ width: '100%', overflow: 'hidden' }}>
       {isTpl ? (
         <div className={styles.carousel__item__pic}>
           <img src={logo} alt="" />
         </div>
       ) : (
-        <div
+        <Carousel
-          style={{
+          onChange={index => {
-            overflow: 'hidden',
+            // console.log(`onChange: ${index}`);
-            position: 'absolute',
-            width: `${props.baseWidth}%`,
-            height: `${props.baseHeight}%`,
-            borderRadius: props.baseRadius,
-            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
-                        scale(${props.baseScale / 100}) 
-                        rotate(${props.baseRotate}deg)`,
           }}
+          direction={direction}
+          swipeable={swipeable}
+          autoPlay={autoPlay}
+          loop
         >
-          <Carousel
+          {contentRender()}
-            onChange={index => {
+        </Carousel>
-              // console.log(`onChange: ${index}`);
-            }}
-            direction={direction}
-            swipeable={swipeable}
-            autoPlay={autoPlay}
-            loop
-          >
-            {contentRender()}
-          </Carousel>
-        </div>
       )}
-    </>
+    </div>
   );
 });
 

src/components/BasicShop/BasicComponents/Carousel/schema.ts

@@ -1,27 +1,31 @@
 import {
   IDataListConfigType,
-  INumberConfigType,
   IRadioConfigType,
   ISwitchConfigType,
+  INumberConfigType,
   TDataListDefaultType,
   TRadioDefaultType,
   TSwitchDefaultType,
+  TNumberDefaultType,
 } from '@/core/FormComponents/types';
-import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
+
+import { serverUrl } from '@/utils/tool';
 
 export type CarouselDirectionKeyType = 'down' | 'left';
 
 export type TCarouselEditData = Array<
-  | INumberConfigType
   | IRadioConfigType<CarouselDirectionKeyType>
   | ISwitchConfigType
   | IDataListConfigType
+  | INumberConfigType
 >;
-export interface ICarouselConfig extends ICommonBaseType {
+export interface ICarouselConfig {
   direction: TRadioDefaultType<CarouselDirectionKeyType>;
   swipeable: TSwitchDefaultType;
   autoPlay: TSwitchDefaultType;
   imgList: TDataListDefaultType;
+  tplImg: string;
+  round: TNumberDefaultType;
 }
 
 export interface ICarouselSchema {
@@ -31,8 +35,6 @@ export interface ICarouselSchema {
 
 const Carousel: ICarouselSchema = {
   editData: [
-    ...baseConfig,
-
     {
       key: 'direction',
       name: '方向',
@@ -53,6 +55,11 @@ const Carousel: ICarouselSchema = {
       name: '是否可拖拽',
       type: 'Switch',
     },
+    {
+      key: 'round',
+      name: '圆角',
+      type: 'Number',
+    },
     {
       key: 'autoPlay',
       name: '是否自动播放',
@@ -67,6 +74,7 @@ const Carousel: ICarouselSchema = {
   config: {
     direction: 'left',
     swipeable: false,
+    round: 0,
     autoPlay: false,
     imgList: [
       {
@@ -79,7 +87,7 @@ const Carousel: ICarouselSchema = {
             uid: '001',
             name: 'image.png',
             status: 'done',
-            url: 'http://49.234.61.19/uploads/1_1740bd7c3dc.png',
+            url: `${serverUrl}/uploads/1_1740bd7c3dc.png`,
           },
         ],
       },
@@ -93,12 +101,12 @@ const Carousel: ICarouselSchema = {
             uid: '001',
             name: 'image.png',
             status: 'done',
-            url: 'http://49.234.61.19/uploads/2_1740bd8d525.png',
+            url: `${serverUrl}/uploads/2_1740bd8d525.png`,
           },
         ],
       },
     ],
-    ...baseDefault,
+    tplImg: `${serverUrl}/uploads/carousal_17442e1420f.png`,
   },
 };
 export default Carousel;