✨ feat(ID1000868): 内部商城用户申请领取色卡

【商城用户申请领取色卡】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000868

src/components/AddressList/index.scss

@@ -30,10 +30,6 @@
     border: 1px solid #68b4ff;
   }
 
-  .address-list:first-child {
-    margin-top: 0;
-  }
-
   .address-list-last {
     margin-bottom: 300px;
   }

src/components/SelectSaleRankingIndicators/index.tsx

@@ -59,7 +59,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = (props) => {
         {!!enumList.length
           && enumList.map((item: EnumList, key) => {
             return (
-              <FilterButton key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
+              <FilterButton circle key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
                 {item.name}
               </FilterButton>
             )

src/components/SelectSaleType/index.tsx

@@ -69,7 +69,7 @@ const SelectSaleType = (props: SelectSaleTypeProps, ref) => {
         {!!enumList.length
           && enumList.map((item: EnumList, key) => {
             return (
-              <FilterButton key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
+              <FilterButton circle key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
                 {item.name}
               </FilterButton>
             )

src/components/SelectTimePicker/index.tsx

@@ -153,12 +153,12 @@ const SelectTimePicker = (props: SelectSaleTypeProps, ref) => {
             .slice(0, -1)
             .map(([key, value], index) => {
               return (
-                <FilterButton key={index} isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
+                <FilterButton circle key={index} isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
                   {value.name}
                 </FilterButton>
               )
             })}
-          <FilterButton customClassName={styles.customFilterTime} isActive={currentValue === 'custom'} onClick={handleCustomTime}>
+          <FilterButton circle customClassName={styles.customFilterTime} isActive={currentValue === 'custom'} onClick={handleCustomTime}>
             <Text>{customFilterButtonText.current}</Text>
             <IconFont name="icon-chakanquanbukehu" color={currentValue === 'custom' ? '#3983ff' : '#7f7f7f'}></IconFont>
           </FilterButton>

src/components/cell/index.tsx

@@ -8,7 +8,7 @@ import styles from './index.module.scss'
 
 interface CellPropsType {
   title: string | React.ReactNode
-  desc: string
+  desc: string | React.ReactNode
   isLink?: boolean
   onClick?: () => void
   customStyle?: React.CSSProperties

src/components/checkbox/index.module.scss

@@ -42,8 +42,8 @@
   justify-content: center;
 }
 .no_checkbox_item {
-  border: 0;
-  background-color: #dddddd;
+  opacity: $opacity-disabled;
+  border-color: rgba($color: $color_main, $alpha: $opacity-disabled);
 }
 .checkbox_item_select {
   background-color: $color_main;

src/components/checkbox/index.tsx

@@ -81,13 +81,13 @@ const Checkbox = (props: params, ref) => {
       [styles[`checkbox_main--${size}`]]: size,
       [styles['checkbox_main--round']]: round,
       [styles['checkbox_main--circle']]: circle,
+      [styles.no_checkbox_item]: disabled,
     }
     return classObject
   }
 
   const getClassName = () => {
     const classObject = {
-      [styles.no_checkbox_item]: disabled,
       [styles.checkbox_item_select]: selected,
     }
     return classObject

src/components/filterButton/index.module.scss

@@ -8,7 +8,6 @@
   box-sizing: border-box;
   border: 0 solid transparent;
   background-color: #f6f6f6;
-  border-radius: 8px;
   font-size: 28px;
   height: 72px;
   &--text {

src/components/filterButton/index.tsx

@@ -1,24 +1,27 @@
 import classnames from 'classnames'
 import type { FC } from 'react'
+import type { ButtonSize, NormalButtonPropsType } from '../normalButton'
 import NormalButton from '../normalButton'
 import styles from './index.module.scss'
 
-interface ButtonPropsType {
+interface ButtonPropsType extends NormalButtonPropsType {
   isActive: boolean
   onClick?: Function
   children?: React.ReactNode
   customClassName?: string
+  size?: ButtonSize
 }
 
 const FilterButton: FC<ButtonPropsType> = (props) => {
-  const { onClick, children, isActive = false, customClassName } = props
+  const { onClick, children, isActive = false, customClassName, size = 'normal', ...normalProps } = props
   const handleClick = () => {
     onClick?.()
   }
   return (
     <NormalButton
       customTextClassName={styles['filterButton--text']}
-      customClassName={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)}
+      {...normalProps}
+      customClassName={classnames(customClassName, styles.filterButton, isActive && styles['filterButton--active'])}
       onClick={handleClick}
     >
       {children}

src/components/moveBtn/index.module.scss

@@ -1,34 +1,45 @@
-.movableItem{
+.movableItem {
+  width: 100%;
+  height: 100%;
+}
+.moveBtn {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 2px solid #cde5ff;
+  box-shadow: 0px 0px 20px 0px rgba(104, 180, 255, 0.7);
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  image {
     width: 100%;
     height: 100%;
+  }
+  .shop_icon {
+    font-size: 70px;
+    color: $color_main;
+  }
+  .product_num {
+    position: absolute;
+    font-size: 23px;
+    background-color: red;
+    color: #fff;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 6px;
+    border-radius: 72px;
+    min-width: 25px;
+    text-align: center;
+    top: 0;
+    right: 0;
+  }
+}
+.no_bg_moveBtn {
+  box-shadow: none;
+  background-color: transparent;
+  border: none;
+  width: 130px;
+  height: 130px;
 }
-.moveBtn{
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 2px solid #cde5ff;
-    box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70);
-    background-color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index:999;
-    .shop_icon{
-        font-size: 70px;
-        color: $color_main;
-    }
-    .product_num{
-        position: absolute;
-        font-size: 23px;
-        background-color: red;
-        color: #fff;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 6px;
-        border-radius: 72px;
-        min-width: 25px;
-        text-align: center;
-        top: 0;
-        right: 0;
-    }
-}

src/components/moveBtn/index.tsx

@@ -1,48 +1,54 @@
-import { MovableArea, MovableView, View } from '@tarojs/components'
+import { Image, MovableArea, MovableView } from '@tarojs/components'
 import Taro, { useReady } from '@tarojs/taro'
-import type { ReactElement } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import { GetShoppingCartApi } from '@/api/shopCart'
 import useCommonData from '@/use/useCommonData'
 import { useSelector } from '@/reducers/hooks'
+import { BUSINESS_MANAGER, BUSINESS_MANAGER_PHONE } from '@/common/constant'
 
+type ShowStatus = 'businessManager'
 interface param {
-  children?: ReactElement|null
+  children?: React.ReactNode
+  showList?: ShowStatus[]
   onClick?: () => void
 }
-const MoveBtn = ({ children = null, onClick }: param) => {
-  // 获取购物车数据数量
-  const { getShopCount, commonData } = useCommonData()
+const MoveBtn = ({ children = null, onClick, showList = [] }: param) => {
+  const onShow = (val: ShowStatus) => {
+    if (showList.length <= 0) { return true }
+    return showList.includes(val)
+  }
 
-  const [screenHeight, setScreenHeight] = useState(0)
-  const [showMoveBtn, setShowMoveBtn] = useState(false)
-  const screenWidthRef = useRef(0)
-  useReady(() => {
-    const res = Taro.getSystemInfoSync()
-    if (res.screenHeight) {
-      const ratio = 750 / res.screenWidth
-      setScreenHeight(res.screenHeight * ratio - 460)
-      screenWidthRef.current = res.screenWidth / 2
-    }
-    setShowMoveBtn(true)
+  const [screenHeight, setScreenHeight] = useState<{ shop?: number; businessManager?: number; order?: number; code?: number }>({
+    shop: 0,
+    businessManager: 0,
+    order: 0,
   })
 
-  useEffect(() => {
-    getShopCount()
-  }, [])
-
-  const dragEnd = (e) => {
+  const screenWidthRef = useRef(0)
+  useReady(() => {
+    Taro.nextTick(() => {
+      const res = Taro.getSystemInfoSync()
+      if (res.screenHeight) {
+        const ratio = 750 / res.screenWidth
+        const num = res.screenHeight * ratio
+        setScreenHeight(() => ({ shop: num - 460, businessManager: num - 580, order: num - 700, code: num - 820 }))
+        screenWidthRef.current = res.screenWidth / 2
+      }
+    })
+  })
 
+  const onClickBusinessManager = () => {
+    Taro.makePhoneCall({
+      phoneNumber: BUSINESS_MANAGER_PHONE,
+    })
   }
 
   return (
     <MovableArea className={styles.movableItem}>
       {children}
-      {showMoveBtn && <MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`} onTouchEnd={e => dragEnd(e)}>
-        <View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)} ></View>
-        {(commonData.shopCount > 0) && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
+      {onShow('businessManager') && <MovableView onClick={onClickBusinessManager} className={classnames(styles.moveBtn, styles.no_bg_moveBtn)} direction="all" inertia x="630rpx" y={`${screenHeight.businessManager}rpx`}>
+        <Image mode="aspectFit" src={BUSINESS_MANAGER} />
       </MovableView>}
     </MovableArea>
   )

src/components/normalButton/index.tsx

@@ -5,9 +5,9 @@ import Loading from '../loading'
 import styles from './index.module.scss'
 
 type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
-type ButtonSize = 'normal' | 'small'
+export type ButtonSize = 'normal' | 'small'
 
-interface PropsType {
+export interface NormalButtonPropsType {
   size?: ButtonSize
   type?: ButtonType
   round?: boolean // 大圆角
@@ -22,7 +22,7 @@ interface PropsType {
   loading?: boolean
 }
 
-const NormalButton: FC<PropsType> = (props) => {
+const NormalButton: FC<NormalButtonPropsType> = (props) => {
   const {
     type = 'primary',
     size = 'normal',

src/components/steps/components/step/index.tsx

@@ -0,0 +1,31 @@
+import { View } from '@tarojs/components'
+import classnames from 'classnames'
+import type { FC } from 'react'
+import '../../index.scss'
+
+export interface StepProps {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  status?: 'wait' | 'process' | 'finish' | 'error'
+}
+
+const Step: FC<StepProps> = (props) => {
+  const {
+    title,
+    description,
+    icon,
+    status = 'wait',
+  } = props
+  console.log('status==>', status)
+  return <View className={classnames(`step-status-${status}`, 'step')}>
+    <View className="step-indicator">
+      <View className="step-icon-container">{icon || <View className="step-icon-dot"></View>}</View>
+    </View>
+    <View className="step-content">
+      <View className="step-title">{title}</View>
+      {!!description && <View className="step-description">{description}</View>}
+    </View>
+  </View>
+}
+export default Step

src/components/steps/index.scss

@@ -0,0 +1,170 @@
+@import '../../styles/common.scss';
+$icon-size: 30px;
+$icon-color: #e5e5e5;
+$line-to-next-color: #e5e5e5;
+
+.step {
+  .step-indicator {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      background-color: #e5e5e5;
+    }
+    .step-icon-container {
+      position: absolute;
+      z-index: 1;
+      background: white;
+    }
+  }
+
+  &:last-child {
+    .step-indicator::after {
+      display: none;
+    }
+  }
+  &-status-finish {
+    .step-indicator::after {
+      background-color: $color_main;
+    }
+  }
+
+  &-status-wait {
+    .step-icon-container {
+      color: #e5e5e5;
+    }
+    .step-title {
+      color: #999;
+    }
+  }
+  &-status-process {
+    .step-icon-container {
+      color: $color_main;
+    }
+    .step-title {
+      color: $color_main;
+    }
+  }
+  &-status-finish {
+    .step-icon-container {
+      color: $color_main;
+    }
+  }
+  &-status-error {
+    .step-icon-container {
+      color: $color_danger;
+    }
+    .step-title {
+      color: $color_danger;
+    }
+  }
+}
+
+.steps {
+  $title-font-size: 28px;
+  $description-font-size: 24px;
+  $indicator-margin-right: 0;
+
+  width: 100%;
+  box-sizing: border-box;
+
+  &-horizontal {
+    display: flex;
+    justify-content: space-around;
+    padding: 16px 0;
+
+    .step {
+      flex: 1;
+
+      .step-indicator {
+        width: 100%;
+        height: 48px;
+        &::after {
+          left: 50%;
+          top: 50%;
+          height: 1px;
+          transform: translateY(-50%);
+          width: 100%;
+        }
+        .step-icon-container {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+
+    .step-content {
+      text-align: center;
+      font-size: $description-font-size;
+      padding: 4px 16px 0;
+      .step-title {
+        font-size: $title-font-size;
+      }
+      .step-description {
+        margin-top: 8px;
+        color: #999;
+      }
+    }
+  }
+
+  &-vertical {
+    padding: 16px 32px;
+
+    .step {
+      display: flex;
+      align-items: stretch;
+
+      .step-indicator {
+        flex: none;
+        width: 48px;
+        margin-right: $indicator-margin-right;
+
+        &::after {
+          left: 50%;
+          top: calc($title-font-size * 1.5 / 2);
+          width: 1px;
+          transform: translateX(-50%);
+          height: 100%;
+        }
+        .step-icon-container {
+          top: calc($title-font-size * 1.5 / 2);
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      &:last-child {
+        .step-content {
+          padding-bottom: 0;
+        }
+      }
+      .step-content {
+        flex: auto;
+        padding-bottom: 48px;
+        .step-title {
+          font-size: $title-font-size;
+          line-height: 1.5;
+        }
+        .step-description {
+          padding-top: 8px;
+          font-size: $description-font-size;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+
+.step-icon-container {
+  font-size: $icon-size;
+}
+
+.step-icon-dot {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  border-radius: 8px;
+}

src/components/steps/index.tsx

@@ -0,0 +1,78 @@
+import { View } from '@tarojs/components'
+import React from 'react'
+import classNames from 'classnames'
+import './index.scss'
+import type { StepProps } from './components/step'
+
+/**
+ * 用法
+ * <Steps direction="vertical">
+ *  <Step
+ *    status="finish"
+ *    title="已下单"
+ *    description="2021-08-09 15:00:00"
+ *  />
+ *  <Step
+ *    status="finish"
+ *    title="已下单"
+ *    description="2021-08-09 15:00:00"
+ *  />
+ *  <Step
+ *    title="已下单"
+ *    status="error"
+ *    description="2021-08-09 15:00:00"
+ *  />
+ *  <Step
+ *    title="已下单"
+ *    description="2021-08-09 15:00:00"
+ *  />
+ *</Steps>
+ */
+
+interface StepsProps {
+  current?: number
+  direction?: 'horizontal' | 'vertical'
+  children: React.ReactNode
+  customClassName?: string
+  customStyle?: React.CSSProperties
+}
+// 步骤条
+const Steps = (props: StepsProps) => {
+  const {
+    current = 0,
+    direction = 'horizontal',
+    children,
+    customClassName,
+    customStyle,
+  } = props
+
+  return <View className={classNames('steps', `steps-${direction}`, customClassName)} style={customStyle}>
+    {
+      React.Children.map(children, (child, index) => {
+        console.log('child', child)
+        if (!React.isValidElement(child)) {
+          return child
+        }
+        const props = child.props as StepProps
+
+        // eslint-disable-next-line react/prop-types
+        let status = props.status || 'wait'
+
+        if (index < current) {
+          // eslint-disable-next-line react/prop-types
+          status = props.status || 'finish'
+        }
+        else if (index === current) {
+          // eslint-disable-next-line react/prop-types
+          status = props.status || 'process'
+        }
+        console.log('status==>', status)
+        return React.cloneElement(child, {
+          // @ts-expect-error 无法推断
+          status,
+        })
+      })
+    }
+  </View>
+}
+export default Steps