✨ feat(购物界面): 完成购物界面50%

2022-09-15 19:59:19 +08:00
parent 8472f4c14b
commit fee33aec38
124 changed files with 1939 additions and 28 deletions
@@ -0,0 +1,34 @@
+.bottomBar {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  padding: 16px 24px;
+
+  .bottomLeft{
+     margin-left: 12px;
+    .moneyText{
+      font-size: 24px;
+      font-family: $font_family;
+      font-weight: 400;
+      color: rgba($color: #000000, $alpha: 0.6);
+    }
+    .moneyNumber{
+
+      font-size: 28px;
+      font-family: $font_family;
+      font-weight: 500;
+      color: $color_money;
+    }
+  }
+  .bottomRight{
+
+  }
+
+ 
+  .bottomButton {
+    
+  }
+}
+
@@ -0,0 +1,52 @@
+import { formatPriceDiv } from '@/common/format'
+import NormalButton from '@/components/normalButton'
+import { View, Text } from '@tarojs/components'
+import { memo, useState } from 'react'
+import styles from './index.module.scss'
+import MCheckbox from '@/components/checkbox'
+
+type PropsType = {
+  onDelete?: Function
+  onSelectCheckbox?: (bool: boolean) => void
+}
+
+export default memo<PropsType>((props) => {
+  const { onDelete, onSelectCheckbox } = props
+
+  const handleSettle = () => {
+    onDelete && onDelete()
+  }
+
+  const selectCallBack = () => {
+    setSelectAll(true)
+    onSelectCheckbox && onSelectCheckbox(isSelectAll)
+  }
+  const closeCallBack = () => {
+    setSelectAll(false)
+    onSelectCheckbox && onSelectCheckbox(isSelectAll)
+
+  }
+
+  const [isSelectAll, setSelectAll] = useState(false)
+
+  return (
+    <View className={styles.bottomBar}>
+      <View className={styles.bottomLeft}>
+        <MCheckbox
+          status={isSelectAll}
+          round
+          size='small'
+          onSelect={selectCallBack}
+          onClose={closeCallBack}
+          customStyles={{ color: '$color: #000000, $alpha: 0.6' }}>
+          全选
+        </MCheckbox>
+      </View>
+      <View className={styles.bottomRight}>
+        <NormalButton plain round type='danger' size='normal' onClick={handleSettle} customStyles={{ backgroundColor: '#F44761' }}>
+          <Text style={{ fontSize: '32rpx' }}>删除</Text>
+        </NormalButton>
+      </View>
+    </View>
+  )
+})
@@ -0,0 +1,39 @@
+.bottomBar {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  padding: 16px 24px;
+  box-shadow: 0 1px 2px 1px #c2c2c2;
+  .bottomLeft{
+     margin-left: 12px;
+    .moneyText{
+      font-size: 28px;
+      font-family: $font_family;
+      font-weight: 400;
+      color: rgba($color: #000000, $alpha: 0.6);
+    }
+    .moneyNumber{
+
+      font-size: 28px;
+      font-family: $font_family;
+      font-weight: 550;
+      color: $color_money;
+    }
+  }
+  .bottomRight{
+
+  }
+
+ 
+  .bottomButton {
+    
+  }
+}
+
+.unit{
+  font-size: 24px;
+  transform: scale(.7);
+  margin-right: 10px;
+}
@@ -0,0 +1,35 @@
+import { formatPriceDiv } from '@/common/format'
+import NormalButton from '@/components/normalButton'
+import { View, Text } from '@tarojs/components'
+import { memo } from 'react'
+import styles from './index.module.scss'
+
+type PropsType = {
+  amount?: number
+  onSettleAccount?: Function
+}
+
+export default memo<PropsType>((props) => {
+  const { onSettleAccount, amount = 0 } = props
+
+  const handleSettle = () => {
+    onSettleAccount && onSettleAccount()
+  }
+
+  return (
+    <View className={styles.bottomBar}>
+      <View className={styles.bottomLeft}>
+        <Text className={styles.moneyText}>预估金额：</Text>
+        <Text className={styles.moneyNumber}>
+          <Text className={styles.unit}>¥</Text>
+          {formatPriceDiv(amount)}
+        </Text>
+      </View>
+      <View className={styles.bottomRight}>
+        <NormalButton plain type='primary' round size='normal' onClick={handleSettle}>
+          <Text style={{fontSize: '32rpx'}}>结算</Text>
+        </NormalButton>
+      </View>
+    </View>
+  )
+})
@@ -0,0 +1,56 @@
+.layout{
+  margin: 24px;
+}
+
+.line{
+  margin: 16px 0;
+}
+
+.topItem {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  justify-content: space-around;
+
+  .topTitle {
+    font-size: 32px;
+    font-family: $font_family;
+    font-weight: 550;
+    color: rgba($color: #000000, $alpha: 0.8);
+    margin-right: 16px;
+  }
+  // 汇总
+  .summary{
+    color: rgba($color: #000000, $alpha: 0.4);
+    font-size: 24px;
+
+  }
+}
+
+.detailBox {
+  box-sizing: border-box;
+  overflow: hidden;
+  .orderType{
+    width: 100%;
+    margin-left: 56px;
+    .orderTypeTitle{
+      color: $color_font_one;
+      font-weight: 550;
+      font-size: 28px;
+      line-height: 2.5;
+    }
+    .orderTypeDetail{
+      display: flex;
+      gap: 0 16px;
+    }
+  }
+  .orderColor{
+
+    width: 100%;
+    margin-left: 56px;
+  }
+}
+
+.bottomBox {
+  margin-top: 40px;
+}
@@ -0,0 +1,95 @@
+import { Text, View } from '@tarojs/components'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import { formatPriceDiv } from '@/common/format'
+import Taro from '@tarojs/taro'
+import LayoutBlock from '@/components/layoutBlock'
+import MCheckbox from '@/components/checkbox'
+import Tag from '@/components/tag'
+import Divider from '@/components/divider'
+import NormalButton from '@/components/normalButton'
+
+type PropsType = {
+  obj?: any
+}
+
+const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
+  return isOpen ? <Text className='iconfont '></Text> : <Text className='iconfont '></Text>
+})
+
+export default memo((props: PropsType) => {
+  const [openDetail, setOpenDetail] = useState(false)
+
+  const handleOpenDetail = () => {
+    setOpenDetail((isOpen) => !isOpen)
+  }
+
+  const [selected, setSelect] = useState(0)
+
+  const onSelectOrderType = (type) => {
+    setSelect(type)
+  }
+
+  return (
+    <LayoutBlock circle customClassName={styles.layout}>
+      <MCheckbox>
+        <View className='flex-row justify-between' onClick={handleOpenDetail}>
+          <View className={styles.topItem}>
+            <View className='flex-row'>
+              <View className={styles.topTitle}>灵玉布行</View>
+              <Tag type='info' size='normal'>
+                刘思伟
+              </Tag>
+            </View>
+            <View className={styles.summary}>
+              <Text>已选 1 种面料，1 个颜色，共 4 条</Text>
+            </View>
+          </View>
+          <DrawerButton isOpen={openDetail} />
+        </View>
+      </MCheckbox>
+      <View className={styles.detailBox}>
+        <View className={styles.orderType}>
+          <Divider customClassName={styles.line}></Divider>
+          <View className={styles.orderTypeTitle}>订单类型</View>
+          <View className={styles.orderTypeDetail}>
+            <NormalButton
+              type={selected === 0 ? 'primary' : 'info'}
+              plain={selected !== 0}
+              customStyles={{ padding: '0 50rpx' }}
+              circle
+              onClick={() => onSelectOrderType(0)}>
+              大货
+            </NormalButton>
+            <NormalButton
+              type={selected === 1 ? 'primary' : 'info'}
+              plain={selected !== 1}
+              customStyles={{ padding: '0 50rpx' }}
+              circle
+              onClick={() => onSelectOrderType(1)}>
+              散剪
+            </NormalButton>
+            <NormalButton
+              type={selected === 2 ? 'primary' : 'info'}
+              plain={selected !== 2}
+              customStyles={{ padding: '0 50rpx' }}
+              circle
+              onClick={() => onSelectOrderType(2)}>
+              剪板
+            </NormalButton>
+          </View>
+        </View>
+        <View className={styles.orderColor}>
+          <Divider customClassName={styles.line}></Divider>
+          <View className={classnames(styles.orderTypeTitle, 'justify-between')}>
+            <Text>布料颜色</Text>
+            <Tag type='danger' size='normal' circle>
+              大货单位：条
+            </Tag>
+          </View>
+        </View>
+      </View>
+    </LayoutBlock>
+  )
+})
@@ -0,0 +1,23 @@
+.shopping {
+  width: 100%;
+  height: 100%;
+  background-color: $color_bg_one;
+  &--topBar {
+    background: #ffffff;
+    padding: 16px 24px;
+  }
+  &--context {
+    justify-content: space-between;
+    height: 100%;
+    
+  }
+}
+.flexBox {
+  display: flex;
+  width: 150px;
+  align-items: center;
+  justify-content: flex-end;
+}
+.icon--manage--cancel {
+  color: $color_main;
+}
@@ -1,13 +1,81 @@
-import { isEmptyObject } from '@/common/common'
+import Search from '@/components/search'
 import { View } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
-import { useMemo } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import IconText from '@/components/iconText'
+import InfiniteScroll from '@/components/infiniteScroll'
+import ItemList from './components/shoppingCartItem/index'
+import BottomBtns from '@/components/BottomBtns'
+import { formatPriceDiv } from '@/common/format'
+import BottomSettleBar from './components/bottomSettleBar'
+import BottomEditBar from './components/bottomEditBar'

-const User = () => {
-  const obj = {}
-  console.log(isEmptyObject(obj))
+const Shopping: FC = () => {
+  //输入了搜索关键字
+  const getSearchData = useCallback((e) => {
+    // pageNum.current.page = 1
+    // setOrderData(() => ({ list: [], total: 0 }))
+    // setSearchField((val) => ({ ...val, name: e, size: 10 }))
+  }, [])

+  const [isManage, setManage] = useState(false)

-  return <View>sdfasdfasdf</View>
+  // 管理
+  const onStartToManage = () => {
+    setManage((isManage) => !isManage)
+  }
+
+  const [selectedAmount, setSelectedAmount] = useState(0)
+
+  // 结算
+  const handleSettleAccount = () => {}
+  // 删除
+  const handleDelete = () => {}
+
+  const handleSelectAllCheckbox = (isSelectAll: boolean) => {
+    console.log('handleSelectAllCheckbox', isSelectAll)
+  }
+
+  return (
+    <View className={classnames('flex-col', styles.shopping)}>
+      <View className={styles['shopping--topBar']}>
+        <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
+          <View className={styles.flexBox} onClick={onStartToManage}>
+            {isManage ? (
+              <IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
+            ) : (
+              <IconText iconName='icon-guanlidingdan' text='管理' />
+            )}
+          </View>
+        </Search>
+      </View>
+      <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
+        <View className={classnames('flex-item')}>
+          {/* <InfiniteScroll
+            statusMore={statusMore}
+            selfonScrollToLower={getScrolltolower}
+            refresherEnabled={true}
+            refresherTriggered={refresherTriggeredStatus}
+            selfOnRefresherRefresh={getRefresherRefresh}>
+            {orderData?.list?.map((item, index) => {
+              return (
+                <View key={item.id} className={styles.order_item_con}>
+                  <ItemList obj={item} key={index}></ItemList>
+                </View>
+              )
+            })}
+          </InfiniteScroll> */}
+          <ItemList></ItemList>
+        </View>
+        {isManage ? (
+          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
+        ) : (
+          <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
+        )}
+      </View>
+    </View>
+  )
 }
-export default User
+export default Shopping