From 75ef18a96fb9f2dac285b1df3cdc5b8e993f0c6c Mon Sep 17 00:00:00 2001
From: zedmund <806835750@qq.com>
Date: Mon, 11 Oct 2021 14:38:01 +0800
Subject: [PATCH] feat(Sku): add message extra desc (#9651)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* style: 去cell边框
---
 src/sku/README.md                 |  3 ++-
 src/sku/README.zh-CN.md           |  3 ++-
 src/sku/components/SkuMessages.js | 34 +++++++++++++++++++++----------
 src/sku/demo/data.ts              |  2 ++
 src/sku/index.less                | 16 +++++++++++++++
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/sku/README.md b/src/sku/README.md
index 472272cc9..229c6f950 100644
--- a/src/sku/README.md
+++ b/src/sku/README.md
@@ -227,7 +227,8 @@ sku: {
       name: 'Message',
       type: 'text',
       required: '1'，
-      placeholder: ''
+      placeholder: '',
+      extraDesc: ''
     }
   ],
   hide_stock: false,
diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md
index 5fecdfc64..a4d69161c 100644
--- a/src/sku/README.zh-CN.md
+++ b/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 // 是否隐藏剩余库存
diff --git a/src/sku/components/SkuMessages.js b/src/sku/components/SkuMessages.js
index 03382fee3..c65674188 100644
--- a/src/sku/components/SkuMessages.js
+++ b/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
-          vModel={this.messageValues[index].value}
-          maxlength="200"
-          center={!message.multiple}
-          label={message.name}
-          key={`${this.goodsId}-${index}`}
-          required={String(message.required) === '1'}
-          placeholder={this.getPlaceholder(message)}
-          type={this.getType(message)}
-          formatter={this.getFormatter(message)}
-        />
+        <div class={bem('cell-block')}>
+          <Field
+            vModel={this.messageValues[index].value}
+            maxlength="200"
+            center={!message.multiple}
+            label={message.name}
+            key={`${this.goodsId}-${index}`}
+            required={String(message.required) === '1'}
+            placeholder={this.getPlaceholder(message)}
+            type={this.getType(message)}
+            formatter={this.getFormatter(message)}
+            border={false}
+          />
+          {this.getExtraDesc(message)}
+        </div>
       );
     },
   },
diff --git a/src/sku/demo/data.ts b/src/sku/demo/data.ts
index d54b2a403..2a3dc5f3b 100644
--- a/src/sku/demo/data.ts
+++ b/src/sku/demo/data.ts
@@ -105,6 +105,8 @@ export function getSkuData(largeImageMode = false) {
           name: '留言2',
           type: 'id_no',
           required: 0,
+          extraDesc:
+            '身份证号码为敏感信息，系统将会对其进行安全处理，请放心。如对收集原因有疑问，请联系商家。',
         },
         {
           datetime: '0',
diff --git a/src/sku/index.less b/src/sku/index.less
index c038d6349..be7e28140 100644
--- a/src/sku/index.less
+++ b/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 {