🎈 perf(码单管理):

src/app.config.ts

@@ -184,6 +184,12 @@ export default {
         'inviteCord/index',
       ],
     },
+    {
+      root: 'pages/codeList',
+      pages: [
+        'index',
+      ],
+    },
 
   ],
 }

src/pages/codeList/components/counter/index.module.scss

@@ -0,0 +1,37 @@
+.main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 178px;
+  height: 56px;
+  border-radius: 8px;
+  border: 1px solid #979797;
+  .btn {
+    width: 56px;
+    height: 56px;
+
+    text-align: center;
+    line-height: 56px;
+  }
+  .left_btn {
+    border-right: 1px solid #979797;
+    border-radius: 8px 0px 0px 8px;
+  }
+  .right_btn {
+    border-left: 1px solid #979797;
+    border-radius: 0px 8px 8px 0px;
+  }
+  .input {
+    background-color: #fff;
+    box-sizing: border-box;
+    width: 66px;
+    height: 56px;
+    input {
+      font-size: $font_size_medium;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      line-height: 56px;
+    }
+  }
+}

src/pages/codeList/components/counter/index.tsx

@@ -0,0 +1,147 @@
+import { CustomWrapper, Input, View } from '@tarojs/components'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import Big from 'big.js'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+
+interface params {
+  minNum?: number // 最小值
+  maxNum?: number // 最大值
+  step?: number // 步长
+  defaultNum?: number // 默认值
+  digits?: number // 多少位小数
+  onChange?: (val: number) => void
+  onBlue?: (val: number) => void // 失去焦点触发
+  onClickBtn?: (val: number) => void
+  unit?: string
+  disabled?: true | false // 是否禁用
+  returnZero?: true | false // 少于最小值时是否归0
+}
+
+const CounterDisplayName = (props: params) => {
+  const {
+    minNum = 0,
+    maxNum = 10000,
+    step = 1,
+    digits = 0,
+    defaultNum = 0,
+    onChange,
+    onBlue,
+    onClickBtn,
+    returnZero = false,
+    unit = '',
+    disabled = false,
+  } = props
+  const [value, setValue] = useState<any>({ count: defaultNum })
+  // 保留小数
+  const formatDigits = (num) => {
+    num = `${num}`
+    if (num.includes('.')) {
+      const res = num.split('.')
+      if (digits > 0) {
+        const last_num = res[1].substr(0, digits)
+        return `${res[0]}.${last_num}`
+      }
+      else {
+        return res[0]
+      }
+    }
+
+    return parseFloat(num)
+  }
+  useEffect(() => {
+    setValue({ count: defaultNum })
+  }, [defaultNum])
+  const onPlus = () => {
+    if (disabled) { return false }
+    const count = value.count
+    let num_res = Big(count).add(step).toNumber()
+    num_res = num_res >= maxNum ? maxNum : num_res
+    num_res = formatDigits(num_res)
+    setValue({ ...value, count: num_res })
+    onChange?.(parseFloat(num_res))
+    onClickBtn?.(parseFloat(num_res))
+  }
+  const minus = () => {
+    if (disabled) { return false }
+    const count = value.count
+    let num_res = Big(count).minus(step).toNumber()
+    if (returnZero) {
+      num_res = num_res < minNum ? 0 : num_res
+    }
+    else {
+      num_res = num_res < minNum ? minNum : num_res
+    }
+    setValue({ ...value, count: num_res })
+    onChange?.(parseFloat(num_res))
+    onClickBtn?.(parseFloat(num_res))
+  }
+
+  // 检查数据
+  const checkData = (val) => {
+    const num = parseFloat(val)
+    if (num > maxNum) { return maxNum }
+    if (num < minNum) { return minNum }
+    return val
+  }
+
+  const onInputEven = (e) => {
+    const res = e.detail.value
+    if (res === '') {
+      onChange?.(minNum)
+    }
+    else if (!Number.isNaN(Number(res))) {
+      let count = formatDigits(res)
+      count = checkData(count)
+      onChange?.(parseFloat(count as string))
+    }
+    else {
+      const num = parseFloat(res)
+      if (!Number.isNaN(num)) {
+        let count = formatDigits(num)
+        count = checkData(count)
+        onChange?.(count as number)
+      }
+      else {
+        onChange?.(defaultNum)
+      }
+    }
+  }
+
+  const onBluerEven = (e) => {
+    const num = parseFloat(e.detail.value)
+    if (e.detail.value == '') {
+      onBlue?.(minNum)
+      setValue({ count: minNum })
+    }
+    else if (!Number.isNaN(num)) {
+      let count = formatDigits(num)
+      count = checkData(count)
+      setValue({ count })
+      onBlue?.(count as number)
+    }
+    else {
+      setValue({ count: minNum })
+      onBlue?.(minNum)
+    }
+  }
+  return (
+    <View className={styles.main} onClick={e => e.stopPropagation()}>
+      <View className={classNames(styles.btn, styles.left_btn)} onClick={() => minus()}>
+        -
+      </View>
+      <View className={styles.input}>
+        <Input type="digit" value={value.count} onInput={onInputEven} onBlur={onBluerEven} disabled={disabled} alwaysEmbed cursorSpacing={150} />
+        <View className={styles.unit}>{unit}</View>
+      </View>
+      <View className={classNames(styles.btn, styles.right_btn)} onClick={() => onPlus()}>
+        +
+      </View>
+    </View>
+  )
+}
+const Counter = memo(CounterDisplayName)
+const CounterWithMemo = (props: params) => {
+  return <Counter {...props}></Counter>
+}
+export default memo(CounterWithMemo)

src/pages/codeList/components/payeeHead/index.module.scss

@@ -0,0 +1,51 @@
+.payee_head {
+  padding: 24px;
+  box-sizing: border-box;
+  display: flex;
+  background-color: #f6f7fb;
+  border-radius: 16px;
+  align-items: center;
+  .payee_head--icon {
+    width: 78px;
+    height: 78px;
+    background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%);
+    border-radius: 50%;
+    text-align: center;
+    line-height: 78px;
+    color: #fff;
+  }
+  .payee_head__desc {
+    flex: 1;
+    margin-left: 32px;
+    .payee_head__desc__company {
+      text {
+        &:nth-child(1) {
+          color: #000;
+          font-weight: 500;
+        }
+        &:nth-child(2) {
+          font-size: 24px;
+          border-radius: 8px;
+          border: 1px solid #4581ff;
+          padding: 3px 20px;
+          box-sizing: border-box;
+          color: #4581ff;
+          margin-left: 16px;
+        }
+      }
+    }
+    .payee_head__desc__name {
+      color: rgba(0, 0, 0, 0.6);
+      margin-top: 16px;
+      text {
+        &:nth-child(2) {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+  .more {
+    transform: rotate(-90deg);
+    margin-right: 26px;
+  }
+}

src/pages/codeList/components/payeeHead/index.tsx

@@ -0,0 +1,20 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+
+export default () => {
+  return <View className={styles.payee_head}>
+    <View className={styles['payee_head--icon']}>布</View>
+    <View className={styles.payee_head__desc}>
+      <View className={styles.payee_head__desc__company}>
+        <Text>布郡纺织有限公司</Text>
+        <Text>默认抬头</Text>
+      </View>
+      <View className={styles.payee_head__desc__name}>
+        <Text>杨翰俊</Text>
+        <Text>189467876642</Text>
+      </View>
+    </View>
+    <View className={styles.more}><IconFont name="icon-xiala" size={50} color="#979797" /></View>
+  </View>
+}

src/pages/codeList/components/payeeHead/selectList/index.module.scss

@@ -0,0 +1,20 @@
+.select_list {
+  display: flex;
+  background-color: #fff;
+  font-size: 32px;
+  font-weight: 500;
+  color: #4581ff;
+  .select_list_item {
+    height: 96px;
+    text-align: center;
+    line-height: 96px;
+    flex: 1;
+    text {
+      display: inline-block;
+      height: 100%;
+      border-bottom: 6px solid #337fff;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+  }
+}

src/pages/codeList/components/payeeHead/selectList/index.tsx

@@ -0,0 +1,10 @@
+import { Text, View } from '@tarojs/components'
+import styles from './index.module.scss'
+
+export default () => {
+  return <View className={styles.select_list}>
+    <View className={styles.select_list_item}><Text>按整单</Text></View>
+    <View className={styles.select_list_item}><Text>按面料</Text></View>
+    <View className={styles.select_list_item}><Text>按颜色</Text></View>
+  </View>
+}

src/pages/codeList/components/settingNumber/index.module.scss

@@ -0,0 +1,13 @@
+.change_count {
+  display: flex;
+  background-color: #fff;
+  .change_count__item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .change_count__item--title {
+      padding-bottom: 24px;
+    }
+  }
+}

src/pages/codeList/components/settingNumber/index.tsx

@@ -0,0 +1,20 @@
+import { View } from "@tarojs/components"
+import styles from './index.module.scss'
+import Counter from "../counter"
+
+export default () => {
+    return <View className={styles.change_count}>
+    <View className={styles.change_count__item}>
+      <View className={styles['change_count__item--title']}>重量</View>
+      <Counter />
+    </View>
+    <View className={styles.change_count__item}>
+      <View className={styles['change_count__item--title']}>空差</View>
+      <Counter />
+    </View>
+    <View className={styles.change_count__item}>
+      <View className={styles['change_count__item--title']}>单价</View>
+      <Counter />
+    </View>
+  </View>
+}

src/pages/codeList/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '码单详情',
+}

src/pages/codeList/index.module.scss

@@ -0,0 +1,8 @@
+.code_list__main {
+  background-color: #f7f7f7;
+  min-height: 100vh;
+  .code_list__head {
+    background-color: #fff;
+    padding: 24px;
+  }
+}

src/pages/codeList/index.tsx

@@ -0,0 +1,36 @@
+import { Text, View } from '@tarojs/components'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+import PayeeHead from './components/payeeHead'
+import SelectList from './components/payeeHead/selectList'
+import Counter from './components/counter'
+import useLogin from '@/use/useLogin'
+import IconFont from '@/components/iconfont/iconfont'
+import SettingNumber from './components/settingNumber'
+
+export default () => {
+  useLogin()
+  return <View className={styles.code_list__main}>
+    <View className={styles.code_list__head}>
+      <PayeeHead />
+    </View>
+    <View>
+    <SelectList />
+    <SettingNumber/>
+    <View className={styles.product_list}>
+      <View className={styles.product_list__item}>
+        <View className={styles['product_list__item--title']}>5215# 26S双纱亲水滑爽棉</View>
+        <View className={styles['product_list__item--con']}>
+          <View className={styles.item_image}></View>
+          <View className={styles.item_desc}>
+            <View className={styles.item_name_count}>
+              <View>001# 环保黑 <IconFont name="icon-bianji" size={50} /></View>
+              <View>x2条</View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    </View>
+  </View>
+}