🌈 style(Tag): 调整Tag组件的plain样式

src/components/saleModeTag/index.tsx

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

src/components/tag/index.module.scss

@@ -12,39 +12,54 @@
     font-size: $font_size_medium;
     height: 40px;
   }
-  &--small{
+  &--small {
     font-size: $font_size_min;
     height: 30px;
   }
-  &--circle{
+  &--circle {
     border-radius: 10px;
   }
 
   &--danger {
     border: 1px solid $color_danger;
-    color: $color_danger;
+    background-color: $color_danger;
+    color: white;
   }
-  &--primary{
+  &--primary {
     border: 1px solid $color_main;
-    color: $color_main;
+    background-color: $color_main;
+    color: white;
   }
-  &--warning{
+  &--warning {
     border: 1px solid $color_warning;
-    color: $color_warning;
+    background-color: $color_warning;
+    color: white;
   }
-  &--info{
+  &--info {
     border: 1px solid $color_info;
-    color: $color_info;
-    .tag--text {
-      color: rgba($color: #333333, $alpha: 0.8) !important;
-    }
+    background-color: $color_info;
+    color: white;
   }
   &--plain {
-    background-color: currentColor;
-    border-color: currentColor;
-    border: unset;
-    .tag--text {
-      color: #ffffff;
+    background-color: white;
+    &.tag--danger {
+      border: 1px solid $color_danger;
+      color: $color_danger;
+    }
+    &.tag--primary {
+      border: 1px solid $color_main;
+      color: $color_main;
+    }
+    &.tag--warning {
+      border: 1px solid $color_warning;
+      color: $color_warning;
+    }
+    &.tag--info {
+      border: 1px solid $color_info;
+      color: $color_info;
+      .tag--text {
+        color: rgba($color: #333333, $alpha: 0.8) !important;
+      }
     }
   }
   &--disabled {

src/components/tag/index.tsx

@@ -27,7 +27,7 @@ const Tag: FC<PropsType> = (props) => {
     onClick,
     circle = false,
     customStyle = {},
-    plain = false,
+    plain = false,         // 朴素
     customClassName = '',
   } = props
   const handleClick = (event) => {

src/pages/shopping/components/shoppingCartItem/index.tsx

@@ -191,7 +191,7 @@ export default memo<PropsType>(props => {
           <View className={styles.topItem}>
             <View className='flex-row items-center'>
               <View className={styles.topTitle}>{itemData?.purchaser_name}</View>
-              <Tag type='info' size='normal' circle plain>
+              <Tag type='info' size='normal' circle customStyle={{ backgroundColor: '#f0f0f0',borderColor: 'transparent' }} plain>
                 {itemData?.sale_user_name}
               </Tag>
             </View>
@@ -200,10 +200,6 @@ export default memo<PropsType>(props => {
                 已选 {materialChecked} 种面料，{colorChecked} 个颜色，共{' '}
                 {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked} 条` : `${lengthOrRollChecked} 米`}
               </Text>
-              {/* <Text>
-                已选 {0} 种面料，{0} 个颜色，共{' '}
-                {selected === EnumSaleMode.Bulk ? `${0} 条` : `${0} 米`}
-              </Text> */}
             </View>
           </View>
           <DrawerButton isOpen={openDetail} />
@@ -240,7 +236,7 @@ export default memo<PropsType>(props => {
             <Divider customClassName={styles.line}></Divider>
             <View className={classnames(styles.orderTitle, 'justify-between')}>
               <Text>布料颜色</Text>
-              <Tag type='danger' size='normal' circle plain={false}>
+              <Tag type='danger' size='normal' circle plain>
                 {selectList[selected].title}单位：{selectList[selected].unit}
               </Tag>
             </View>

src/pages/user/index.tsx

@@ -141,7 +141,7 @@ const UserInfo: FC = () => {
           </View>
         </View>
         <View className={styles.bottomBar}>
-          <Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
+          <Tag type='primary' size='normal' circle plain customStyle={{ marginRight: '10px' }}>
             {userInfo.userInfo.department_name}
           </Tag>
           <Divider direction='vertical'></Divider>