From ecb6bfccb5af907bdd782aa792b6e9714f7c3331 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 23 Jun 2020 16:41:53 +0800
Subject: [PATCH] style(Sku): fix header height when hide header image

---
 src/sku/demo/data.ts       | 390 +++++++++++++++++++------------------
 src/sku/demo/index.vue     |  21 +-
 src/sku/index.less         |   2 +
 src/sku/test/index.spec.js |   4 +-
 4 files changed, 212 insertions(+), 205 deletions(-)

diff --git a/src/sku/demo/data.ts b/src/sku/demo/data.ts
index a7ca48d76..38ae6f0f4 100644
--- a/src/sku/demo/data.ts
+++ b/src/sku/demo/data.ts
@@ -1,205 +1,207 @@
-export const skuData = {
-  goods_id: '946755',
-  quota: 15,
-  quota_used: 0,
-  start_sale_num: 10,
-  goods_info: {
-    title: '测试商品',
-    picture:
-      'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
-    price: 1,
-  },
-  sku: {
-    price: '1.00',
-    stock_num: 227,
-    none_sku: false,
-    hide_stock: false,
-    collection_id: 2261,
-    tree: [
-      {
-        k: '颜色',
-        k_id: '1',
-        v: [
-          {
-            id: '30349',
-            name: '天蓝色',
-            imgUrl:
-              'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg',
-          },
-          {
-            id: '1215',
-            name: '白色',
-            imgUrl:
-              'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
-          },
-        ],
-        k_s: 's1',
-        count: 2,
-        large_picture_preview: true,
-      },
-      {
-        k: '尺寸',
-        k_id: '2',
-        v: [
-          {
-            id: '1193',
-            name: '1',
-          },
-          {
-            id: '1194',
-            name: '2',
-          },
-        ],
-        k_s: 's2',
-        count: 2,
-      },
-    ],
-    list: [
-      {
-        id: 2259,
-        price: 100,
-        discount: 100,
-        code: '',
-        s1: '1215',
-        s2: '1193',
-        s3: '0',
-        s4: '0',
-        s5: '0',
-        stock_num: 110,
-        goods_id: 946755,
-      },
-      {
-        id: 2260,
-        price: 100,
-        discount: 100,
-        code: '',
-        s1: '1215',
-        s2: '1194',
-        s3: '0',
-        s4: '0',
-        s5: '0',
-        stock_num: 0,
-        goods_id: 946755,
-      },
-      {
-        id: 2257,
-        price: 100,
-        discount: 100,
-        code: '',
-        s1: '30349',
-        s2: '1193',
-        s3: '0',
-        s4: '0',
-        s5: '0',
-        stock_num: 111,
-        goods_id: 946755,
-      },
-      {
-        id: 2258,
-        price: 100,
-        discount: 100,
-        code: '',
-        s1: '30349',
-        s2: '1194',
-        s3: '0',
-        s4: '0',
-        s5: '0',
-        stock_num: 6,
-        goods_id: 946755,
-      },
-    ],
-    messages: [
-      {
-        datetime: '0',
-        disable: false,
-        multiple: '0',
-        name: '留言1',
-        type: 'text',
-        required: '1',
-      },
-      {
-        datetime: '0',
-        disable: false,
-        multiple: 0,
-        name: '留言2',
-        type: 'id_no',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        multiple: 0,
-        name: '留言3',
-        type: 'image',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        multiple: 1,
-        name: '留言4',
-        type: 'text',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        name: '数字',
-        multiple: 0,
-        type: 'tel',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        name: '邮件',
-        multiple: 0,
-        type: 'email',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        name: '日期',
-        multiple: 0,
-        type: 'date',
-        required: 0,
-      },
-      {
-        datetime: '0',
-        disable: false,
-        name: '时间',
-        multiple: 0,
-        type: 'time',
-        required: 0,
-      },
-    ],
-  },
-  properties: [
-    {
-      k_id: 124,
-      k: '加料',
-      is_multiple: true,
-      v: [
+export function getSkuData(large_picture_preview = false) {
+  return {
+    goods_id: '946755',
+    quota: 15,
+    quota_used: 0,
+    start_sale_num: 10,
+    goods_info: {
+      title: '测试商品',
+      picture:
+        'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
+      price: 1,
+    },
+    sku: {
+      price: '1.00',
+      stock_num: 227,
+      none_sku: false,
+      hide_stock: false,
+      collection_id: 2261,
+      tree: [
         {
-          id: 1224,
-          name: '布丁',
-          price: 3,
+          k: '颜色',
+          k_id: '1',
+          v: [
+            {
+              id: '30349',
+              name: '天蓝色',
+              imgUrl:
+                'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg',
+            },
+            {
+              id: '1215',
+              name: '白色',
+              imgUrl:
+                'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
+            },
+          ],
+          k_s: 's1',
+          count: 2,
+          large_picture_preview,
         },
         {
-          id: 1225,
-          name: '波霸',
-          price: 4,
+          k: '尺寸',
+          k_id: '2',
+          v: [
+            {
+              id: '1193',
+              name: '1',
+            },
+            {
+              id: '1194',
+              name: '2',
+            },
+          ],
+          k_s: 's2',
+          count: 2,
+        },
+      ],
+      list: [
+        {
+          id: 2259,
+          price: 100,
+          discount: 100,
+          code: '',
+          s1: '1215',
+          s2: '1193',
+          s3: '0',
+          s4: '0',
+          s5: '0',
+          stock_num: 110,
+          goods_id: 946755,
         },
         {
-          id: 1226,
-          name: '珍珠',
-          price: 5,
+          id: 2260,
+          price: 100,
+          discount: 100,
+          code: '',
+          s1: '1215',
+          s2: '1194',
+          s3: '0',
+          s4: '0',
+          s5: '0',
+          stock_num: 0,
+          goods_id: 946755,
+        },
+        {
+          id: 2257,
+          price: 100,
+          discount: 100,
+          code: '',
+          s1: '30349',
+          s2: '1193',
+          s3: '0',
+          s4: '0',
+          s5: '0',
+          stock_num: 111,
+          goods_id: 946755,
+        },
+        {
+          id: 2258,
+          price: 100,
+          discount: 100,
+          code: '',
+          s1: '30349',
+          s2: '1194',
+          s3: '0',
+          s4: '0',
+          s5: '0',
+          stock_num: 6,
+          goods_id: 946755,
+        },
+      ],
+      messages: [
+        {
+          datetime: '0',
+          disable: false,
+          multiple: '0',
+          name: '留言1',
+          type: 'text',
+          required: '1',
+        },
+        {
+          datetime: '0',
+          disable: false,
+          multiple: 0,
+          name: '留言2',
+          type: 'id_no',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          multiple: 0,
+          name: '留言3',
+          type: 'image',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          multiple: 1,
+          name: '留言4',
+          type: 'text',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          name: '数字',
+          multiple: 0,
+          type: 'tel',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          name: '邮件',
+          multiple: 0,
+          type: 'email',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          name: '日期',
+          multiple: 0,
+          type: 'date',
+          required: 0,
+        },
+        {
+          datetime: '0',
+          disable: false,
+          name: '时间',
+          multiple: 0,
+          type: 'time',
+          required: 0,
         },
       ],
     },
-  ],
-};
+    properties: [
+      {
+        k_id: 124,
+        k: '加料',
+        is_multiple: true,
+        v: [
+          {
+            id: 1224,
+            name: '布丁',
+            price: 3,
+          },
+          {
+            id: 1225,
+            name: '波霸',
+            price: 4,
+          },
+          {
+            id: 1226,
+            name: '珍珠',
+            price: 5,
+          },
+        ],
+      },
+    ],
+  };
+}
 
 export const initialSku = {
   s1: '30349',
diff --git a/src/sku/demo/index.vue b/src/sku/demo/index.vue
index 2e67d2577..e28be725e 100644
--- a/src/sku/demo/index.vue
+++ b/src/sku/demo/index.vue
@@ -83,15 +83,15 @@
       <div class="sku-container">
         <van-sku
           v-model="showLargePicturePreview"
-          :sku="skuData.sku"
-          :quota="skuData.quota"
-          :goods="skuData.goods_info"
-          :goods-id="skuData.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
-          :properties="skuData.properties"
-          :quota-used="skuData.quota_used"
+          :sku="skuData2.sku"
+          :quota="skuData2.quota"
+          :goods="skuData2.goods_info"
+          :goods-id="skuData2.goods_id"
+          :hide-stock="skuData2.sku.hide_stock"
+          :properties="skuData2.properties"
+          :quota-used="skuData2.quota_used"
           :message-config="messageConfig"
-          :start-sale-num="skuData.start_sale_num"
+          :start-sale-num="skuData2.start_sale_num"
           :show-header-image="false"
           :custom-sku-validator="customSkuValidator"
           :close-on-click-overlay="closeOnClickOverlay"
@@ -175,7 +175,7 @@
 </template>
 
 <script>
-import { skuData, initialSku } from './data';
+import { initialSku, getSkuData } from './data';
 import { LIMIT_TYPE } from '../constants';
 
 export default {
@@ -203,7 +203,8 @@ export default {
   },
 
   data() {
-    this.skuData = skuData;
+    this.skuData = getSkuData();
+    this.skuData2 = getSkuData(true);
     this.initialSku = initialSku;
 
     return {
diff --git a/src/sku/index.less b/src/sku/index.less
index dd8190cff..cac961414 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -53,6 +53,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
+      box-sizing: border-box;
       min-height: 96px;
       padding: @padding-sm 20px @padding-sm @padding-xs;
       overflow: hidden;
@@ -282,6 +283,7 @@
 
     &__content {
       overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
 
       &::-webkit-scrollbar {
         display: none;
diff --git a/src/sku/test/index.spec.js b/src/sku/test/index.spec.js
index cbc8b37e7..7dcf2cc5e 100644
--- a/src/sku/test/index.spec.js
+++ b/src/sku/test/index.spec.js
@@ -1,6 +1,8 @@
 import { mount } from '../../../test';
 import Sku from '..';
-import { skuData, initialSku } from '../demo/data';
+import { getSkuData, initialSku } from '../demo/data';
+
+const skuData = getSkuData();
 
 test('resetSelectedSku method', () => {
   skuData.sku.messages = [];