feat(Sku): add message extra desc (#9651)

* feat: 新增sku组件message附加描述信息

* style: 去cell边框

src/sku/README.md

@@ -227,7 +227,8 @@ sku: {
       name: 'Message',
       type: 'text',
       required: '1'，
-      placeholder: ''
+      placeholder: '',
+      extraDesc: ''
     }
   ],
   hide_stock: false,

src/sku/README.zh-CN.md

@@ -238,7 +238,8 @@ sku: {
       name: '留言', // 留言名称
       type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
       required: '1', // 是否必填 '1' 表示必填
-      placeholder: '' // 可选值，占位文本
+      placeholder: '', // 可选值，占位文本
+      extraDesc: ''  // 可选值，附加描述文案
     }
   ],
   hide_stock: false // 是否隐藏剩余库存

src/sku/components/SkuMessages.js

@@ -127,6 +127,14 @@ export default createComponent({
       };
     },
 
+    getExtraDesc(message) {
+      const { extraDesc } = message;
+
+      if (extraDesc) {
+        return <div class={bem('extra-message')}>{extraDesc}</div>;
+      }
+    },
+
     genMessage(message, index) {
       if (message.type === 'image') {
         return (
@@ -164,17 +172,21 @@ export default createComponent({
       }
 
       return (
-        <Field
+        <div class={bem('cell-block')}>
-          vModel={this.messageValues[index].value}
+          <Field
-          maxlength="200"
+            vModel={this.messageValues[index].value}
-          center={!message.multiple}
+            maxlength="200"
-          label={message.name}
+            center={!message.multiple}
-          key={`${this.goodsId}-${index}`}
+            label={message.name}
-          required={String(message.required) === '1'}
+            key={`${this.goodsId}-${index}`}
-          placeholder={this.getPlaceholder(message)}
+            required={String(message.required) === '1'}
-          type={this.getType(message)}
+            placeholder={this.getPlaceholder(message)}
-          formatter={this.getFormatter(message)}
+            type={this.getType(message)}
-        />
+            formatter={this.getFormatter(message)}
+            border={false}
+          />
+          {this.getExtraDesc(message)}
+        </div>
       );
     },
   },

src/sku/demo/data.ts

@@ -105,6 +105,8 @@ export function getSkuData(largeImageMode = false) {
           name: '留言2',
           type: 'id_no',
           required: 0,
+          extraDesc:
+            '身份证号码为敏感信息，系统将会对其进行安全处理，请放心。如对收集原因有疑问，请联系商家。',
         },
         {
           datetime: '0',

src/sku/index.less

@@ -342,6 +342,22 @@
         line-height: @cell-label-line-height;
       }
     }
+
+    &__cell-block {
+      position: relative;
+
+      &::after {
+        .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
+      }
+    }
+
+    &__extra-message {
+      margin-top: -2px;
+      padding: 0 16px 12px;
+      color: @cell-label-color;
+      font-size: @cell-label-font-size;
+      line-height: @cell-label-line-height;
+    }
   }
 
   &-actions {