🐞 fix(#1000663#16#17#18#19#20): 修复发货列表|发货详情的样式问题

src/components/calendar/index.scss

@@ -177,4 +177,4 @@
         height: 480px;
       }
     }
-  }
+  }

src/components/calendar/types/calendar.d.ts

@@ -0,0 +1,225 @@
+import dayjs from 'dayjs'
+// import { BaseEvent } from '@tarojs/components/types/common'
+
+// #region Calendar
+declare namespace Calendar {
+  export type DateArg = string | number | Date
+
+  export type classNameType =
+    | string
+    | Array<string>
+    | { [key: string]: boolean }
+
+  export interface Mark {
+    value: DateArg
+  }
+
+  export interface ValidDate {
+    value: DateArg
+  }
+
+  export interface Item {
+    value: string
+
+    _value: dayjs.Dayjs
+
+    text: number
+
+    type: number
+
+    marks: Array<Mark>
+
+    isActive?: boolean
+
+    isToday?: boolean
+
+    isBeforeMin?: boolean
+
+    isAfterMax?: boolean
+
+    isDisabled?: boolean
+
+    isSelected?: boolean
+
+    isSelectedHead?: boolean
+
+    isSelectedTail?: boolean
+  }
+
+  export interface GroupOptions {
+    validDates: Array<ValidDate>
+
+    marks: Array<Mark>
+
+    format: string
+
+    selectedDates: Array<SelectedDate>
+
+    minDate?: DateArg
+
+    maxDate?: DateArg
+  }
+
+  export type List<T> = Array<T>
+
+  export type ListInfo<T> = {
+    value: number
+
+    list: List<T>
+  }
+
+  export interface SelectedDate {
+    end?: Calendar.DateArg
+
+    start: Calendar.DateArg
+  }
+}
+
+export default Calendar
+export { Calendar }
+// #endregion
+
+// #region AtCalendar
+export interface AtCalendarPropsBase {
+  format?: string
+
+  validDates?: Array<Calendar.ValidDate>
+
+  minDate?: Calendar.DateArg
+
+  maxDate?: Calendar.DateArg
+
+  isSwiper?: boolean
+
+  marks?: Array<Calendar.Mark>
+
+  monthFormat?: string
+
+  hideArrow?: boolean
+
+  isVertical?: boolean
+
+  className?: Calendar.classNameType
+
+  onClickPreMonth?: () => void
+
+  onClickNextMonth?: () => void
+
+  onSelectDate?: (item: { value: Calendar.SelectedDate }) => void
+
+  onDayClick?: (item: { value: string }) => void
+
+  onDayLongClick?: (item: { value: string }) => void
+
+  onMonthChange?: (value: string) => void
+}
+
+export interface AtCalendarSingleSelectedProps extends AtCalendarPropsBase {
+  isMultiSelect?: false
+
+  currentDate?: Calendar.DateArg
+}
+
+export interface AtCalendarMutilSelectedProps extends AtCalendarPropsBase {
+  isMultiSelect?: true
+
+  currentDate?: Calendar.SelectedDate
+}
+
+export type AtCalendarProps =
+  | AtCalendarSingleSelectedProps
+  | AtCalendarMutilSelectedProps
+
+export interface AtCalendarDefaultProps {
+  format: string
+
+  isSwiper: boolean
+
+  validDates: Array<Calendar.ValidDate>
+
+  marks: Array<Calendar.Mark>
+
+  currentDate: Calendar.DateArg | Calendar.SelectedDate
+
+  monthFormat: string
+
+  hideArrow: boolean
+
+  isVertical: boolean
+
+  isMultiSelect: boolean
+
+  selectedDates: Array<Calendar.SelectedDate>
+}
+
+export interface AtCalendarState {
+  generateDate: number
+
+  selectedDate: Calendar.SelectedDate
+}
+
+export type AtCalendarPropsWithDefaults = AtCalendarProps &
+  AtCalendarDefaultProps
+// #endregion
+
+// #region AtCalendarController
+export interface AtCalendarControllerProps {
+  generateDate: Calendar.DateArg
+
+  minDate?: Calendar.DateArg
+
+  maxDate?: Calendar.DateArg
+
+  hideArrow: boolean
+
+  monthFormat: string
+
+  onPreMonth: () => void
+
+  onNextMonth: () => void
+
+  onSelectDate: (e: any) => void
+}
+
+export interface AtCalendarControllerState {}
+// #endregion
+
+// #region AtCalendarBody
+export type AtCalendarBodyListGroup = Array<Calendar.ListInfo<Calendar.Item>>
+
+export interface AtCalendarBodyProps {
+  format: string
+
+  validDates: Array<Calendar.ValidDate>
+
+  marks: Array<Calendar.Mark>
+
+  isSwiper: boolean
+
+  minDate?: Calendar.DateArg
+
+  maxDate?: Calendar.DateArg
+
+  isVertical: boolean
+
+  generateDate: number
+
+  selectedDate: Calendar.SelectedDate
+
+  selectedDates: Array<Calendar.SelectedDate> | []
+
+  onDayClick: (item: Calendar.Item) => void
+
+  onSwipeMonth: (vectorCount: number) => void
+
+  onLongClick: (item: Calendar.Item) => void
+}
+
+export interface AtCalendarBodyState {
+  isAnimate: boolean
+
+  offsetSize: number
+
+  listGroup: AtCalendarBodyListGroup
+}
+// #endregion

src/components/calendar/ui/date-list/index.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React from 'react'
 import { Text, View } from '@tarojs/components'
-import { Calendar } from '../../../../../types/calendar'
+import { Calendar } from '../../types/calendar'
 import * as constant from '../../common/constant'
 
 const MAP: { [key: number]: string } = {
@@ -66,7 +66,7 @@ export default class AtCalendarList extends React.Component<Props> {
                 <View className='extra-marks'>
                   {item.marks.map((mark, key) => (
                     <Text key={key} className='mark'>
-                      {mark.value}
+                      {mark.value as React.ReactNode}
                     </Text>
                   ))}
                 </View>

src/components/popup/index.module.scss

@@ -49,6 +49,7 @@ $am-ms: 200ms;
         justify-content: center;
         height: 80px;
         font-size: 29px;
+        font-weight: bold;
         color: #000000;
         padding-top: 10px;
       }

src/components/saleModeTag/index.tsx

@@ -14,17 +14,17 @@ const SaleModeTag: FC<SaleModeProps> = (props) => {
   return (
     <>
       {saleMode === EnumSaleMode.Bulk && (
-        <Tag circle type='primary' size={size} customClassName={customClassName}>
+        <Tag circle type='bulk' size={size} customClassName={customClassName}>
           大货
         </Tag>
       )}
       {saleMode === EnumSaleMode.Plate && (
-        <Tag circle type='danger' size={size} customClassName={customClassName}>
+        <Tag circle type='plate' size={size} customClassName={customClassName}>
           剪板
         </Tag>
       )}
       {saleMode === EnumSaleMode.BulkCut && (
-        <Tag circle type='warning' size={size} customClassName={customClassName}>
+        <Tag circle type='bulkCut' size={size} customClassName={customClassName}>
           散剪
         </Tag>
       )}

src/components/tag/index.module.scss

@@ -35,6 +35,24 @@
     background-color: $color_warning;
     color: white;
   }
+  // 大货
+  &--bulk {
+    border: 1px solid $color_bulk;
+    background-color: $color_bulk;
+    color: white;
+  }
+  // 剪板
+  &--plate {
+    border: 1px solid $color_plate;
+    background-color: $color_plate;
+    color: white;
+  }
+  // 散剪
+  &--bulkCut {
+    border: 1px solid $color_bulkCut;
+    background-color: $color_bulkCut;
+    color: white;
+  }
   &--info {
     border: 1px solid $color_info;
     background-color: $color_info;
@@ -54,6 +72,18 @@
       border: 1px solid $color_warning;
       color: $color_warning;
     }
+    &.tag--bulk {
+      border: 1px solid $color_bulk;
+      color: $color_bulk;
+    }
+    &.tag--plate {
+      border: 1px solid $color_plate;
+      color: $color_plate;
+    }
+    &.tag--bulkCut {
+      border: 1px solid $color_bulkCut;
+      color: $color_bulkCut;
+    }
     &.tag--info {
       border: 1px solid $color_info;
       color: $color_info;

src/components/tag/index.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 
 export type TagSize = 'small' | 'normal'
-type TagType = 'primary' | 'danger' | 'warning' | 'info'
+type TagType = 'primary' | 'danger' | 'warning' | 'info' | 'bulk' | 'plate' | 'bulkCut'
 
 interface PropsType {
   type?: TagType

src/components/timePicker/index.module.scss

@@ -0,0 +1,12 @@
+
+
+.time-box {
+  padding: 40px;
+}
+
+.sure-box {
+  margin-left: 102px;
+  margin-right: 102px;
+  font-size: 28px;
+  font-weight: 500;
+}

src/components/timePicker/index.scss

@@ -1,19 +0,0 @@
-
-
-.time-box {
-  padding: 40px;
-}
-
-.sure-box {
-  // padding: 16px 102px 30px 102px;
-  margin-left: 102px;
-  margin-right: 102px;
-  height: 80px;
-  background: #337FFF;
-  border-radius: 44px;
-  font-size: 28px;
-  font-weight: 500;
-  color: #FFFFFF;
-  text-align: center;
-  line-height: 80px;
-}

src/components/timePicker/index.tsx

@@ -1,9 +1,10 @@
 import Popup from '@/components/popup'
 import { useState, memo } from 'react'
 import { View } from '@tarojs/components'
-import './index.scss'
+import styles from './index.module.scss'
 import AtCalendar from '@/components/calendar/index'
 import dayjs from 'dayjs'
+import NormalButton from '../normalButton'
 
 type DateArg = string | number | Date
 interface Props {
@@ -32,7 +33,7 @@ export default memo((props: Props) => {
   
   return (
     <>
-      <View className='time-box'>
+      <View className={styles['time-box']}>
         <AtCalendar
           isMultiSelect
           format='YYYY-MM-DD 00:00:00'
@@ -43,9 +44,10 @@ export default memo((props: Props) => {
           onSelectDate={(e) => handTime?.(e)}
         />
       </View>
-      <View className='sure-box' onClick={() => onSelectDate?.(time)}>
+      <NormalButton type='primary' onClick={() => onSelectDate?.(time)} size="normal" round customClassName={styles['sure-box']}>确认</NormalButton>
+      {/* <View className='sure-box' onClick={() => onSelectDate?.(time)}>
         确认
-      </View>
+      </View> */}
     </>
   )
 })

src/pages/delivery/components/Filter/index.module.scss

@@ -48,11 +48,12 @@
   font-size: 28px;
   height: 72px;
   &--text {
-    color: #909090;
+    color: #696969;
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
+    font-weight: lighter;
   }
   &:hover {
     opacity: 0.7;
@@ -62,6 +63,7 @@
     background-color: #eaf2ff;
     .filterButton--text {
       color: $color_main;
+      font-weight: 550;
     }
   }
 }
@@ -74,11 +76,13 @@
   justify-content: space-around;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+  .btn {
+    width: 40%;
+    &:hover{
+      filter: blur(.7);
+    }
 
-  btn:hover{
-    filter: blur(.7);
   }
-
   .rest_btn {
     font-size: 28px;
   }

src/pages/delivery/components/ItemList/index.module.scss

@@ -1,5 +1,6 @@
 .layoutBlock{
-  margin: 24px;
+  margin: 20px;
+  padding: 24px;
 }
 .topBar {
   font-size: 28px;
@@ -8,13 +9,16 @@
     flex-flow: row nowrap;
     justify-content: space-between;
     color: $color_font_one;
+    .orderNo{
+      font-weight: bold;
+    }
   }
   &__orderType {
-    color: rgba($color: #000000, $alpha: 0.6);
+    color: #6e6e6e;
-    font-weight: 550;
+    font-weight: bold;
   }
   &__orderStatus {
-    font-weight: 550;
+    font-weight: bold;
     &--toBeAudited{
       color: #e42945;
     }

src/pages/delivery/components/ItemList/index.tsx

@@ -53,13 +53,13 @@ const ItemList:FC<PropsType> = (props) => {
     <LayoutBlock circle customClassName={styles.layoutBlock}>
       <View className={styles.topBar}>
         <View className={styles.topBar__orderNo}>
-          <View>单号：{itemData?.order_no}</View>
+          <View className={styles.orderNo}>单号：{itemData?.order_no}</View>
           {itemData?.status === 1 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finish'])}>已审核</View>}
           {itemData?.status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--toBeAudited'])}>待审核</View>}
         </View>
         <Text className={styles.topBar__orderType}>{itemData?.type_name}</Text>
       </View>
-      <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+      <Divider direction='horizontal' customStyles={{ margin: '20rpx 0 10rpx 0' }}></Divider>
       <View className={styles.content}>
         <View className={classnames(styles.content__row, styles.bord)}>
           <View className={styles.content__row__left}>货品信息：</View>
@@ -83,7 +83,7 @@ const ItemList:FC<PropsType> = (props) => {
           customClassName={styles.bottomBar__button}
           plain
           type='info'
-          customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
+          customStyles={{ color: '#636363', borderColor: '#c8c8c8' }}
           round
           onClick={() => handleDetail(itemData)}>
           查看详情

src/pages/delivery/index.module.scss

@@ -25,7 +25,7 @@ page {
     height: 100%;
     &--total {
       display: block;
-      margin-top: 24px;
+      margin-top: 20px;
       padding: 0 24px;
       font-size: 24px;
       color: #9d9d9d;

src/pages/delivery/index.tsx

@@ -41,7 +41,7 @@ const Delivery: FC = () => {
   const { fetchData: FetchDeliveryOrderList, state: orderState } = DeliverNoticeOrderList()
   //数据加载状态
   const statusMore = useMemo(() => {
-    return dataLoadingStatus({ list: deliveryOrderList.list, total: deliveryOrderList.total, status: orderState.loading })
+    return dataLoadingStatus({ list: deliveryOrderList.list, total: deliveryOrderList.total, status: orderState.loading! })
   }, [deliveryOrderList, orderState])
 
   //输入搜索关键字

src/pages/deliveryDetail/index.module.scss

@@ -38,6 +38,8 @@ page {
       justify-content: space-between;
       align-items: center;
       font-size: 28px;
+      font-weight: bold;
+      color: #424242;
       padding: 10px 0;
     }
     &--detail {
@@ -47,6 +49,7 @@ page {
         align-items: center;
         padding: 10px 0;
         font-size: 28px;
+        color: #6e6e6e;
       }
       &--name{
 
@@ -69,19 +72,22 @@ page {
 .orderNo {
   font-size: 28px;
   font-weight: 550;
+  color: #424242;
 }
 .status {
   font-size: 28px;
   &--toBeAudit {
     color: $color_danger;
+     font-weight: bold;
   }
   &--audited {
     color: $color_main;
+     font-weight: bold;
   }
 }
 
 .divider {
-  margin: 24px 0;
+  margin: 20px 0 10px 0;
 }
 .total {
   margin-top: 24px;

src/pages/deliveryDetail/index.tsx

@@ -132,7 +132,7 @@ const DeliveryDetail: FC = () => {
   return (
     <View className={styles.deliveryDetail}>
       <View className={styles.content}>
-        <LayoutBlock circle>
+        <LayoutBlock circle customStyle={{padding: '24rpx'}}>
           <View className={styles.detailTop}>
             <View className={styles.orderNo}>发货单号：{detailInfo?.order_no}</View>
             {detailInfo?.status === 0 ? <View className={styles['status--toBeAudit']}>待审核</View> : <View className={styles['status--audited']}>已完成</View>}
@@ -147,17 +147,17 @@ const DeliveryDetail: FC = () => {
             </Text>
           </View>
         </LayoutBlock>
-        <LayoutBlock circle>
+        <LayoutBlock circle customStyle={{padding: '24rpx'}}>
           <View className={styles.orderInfoTop}>订单信息</View>
           <Divider direction='horizontal' customClassName={styles.divider}></Divider>
           <View className='orderInfoDetail'>
-            <Cell title='订单备注：' desc={detailInfo?.sale_order_remark}></Cell>
+            <Cell title='订单备注：' desc={detailInfo?.sale_order_remark || '暂无备注信息'}></Cell>
-            <Cell title='创建时间：' desc={formatDateTime(detailInfo?.create_time)}></Cell>
+            <Cell title='创建时间：' desc={formatDateTime(detailInfo?.create_time) || '暂无创建时间'}></Cell>
-            <Cell title='发货方式：' desc={detailInfo?.shipment_mode_name}></Cell>
+            <Cell title='发货方式：' desc={detailInfo?.shipment_mode_name || '暂无发货方式'}></Cell>
-            <Cell title='发货地址：' desc={`${detailInfo.province_name}${detailInfo.city_name}${detailInfo.district_name}${detailInfo.address_detail}`}></Cell>
+            <Cell title='发货地址：' desc={`${detailInfo.province_name}${detailInfo.city_name}${detailInfo.district_name}${detailInfo.address_detail}` || '暂无发货地址'}></Cell>
           </View>
         </LayoutBlock>
-        <LayoutBlock circle>
+        <LayoutBlock circle customStyle={{padding: '24rpx'}}>
           <View className={styles.orderInfoTop}>附件</View>
           <Divider direction='horizontal' customClassName={styles.divider}></Divider>
           <UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.delivery_appendix_url}></UploadImage>

src/styles/common.scss

@@ -9,6 +9,10 @@ $color_warning: #e6a23c;
 $color_money: #F64861;
 $color_info: #909090;
 
+$color_bulk: #0D7CFF;    // 大货
+$color_plate: #F79B31;   // 剪板
+$color_bulkCut: #0AC76F; // 散剪
+
 $opacity-disabled: 0.3;
 $borderStyle: solid;
 $borderColor: #ebebeb;